docs: the documentation for antdx is ready

.changeset/plenty-bulldogs-hang.md

@@ -0,0 +1,7 @@
+---
+'@modelscope-studio/antdx': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+docs: the documentation for antdx is ready

docs/app.py

@@ -66,7 +66,7 @@ def get_layout_templates():
 
 base_docs = get_docs("base")
 antd_docs = get_docs("antd")
-# antdx_docs = get_docs("antdx")
+antdx_docs = get_docs("antdx")
 
 default_active_tab = "index"
 index_menu_items = [{
@@ -422,6 +422,27 @@ def get_layout_templates():
     }, {
         "label": get_text("Sender", "Sender 输入框"),
         "key": "sender"
+    }, {
+        "label": get_text("Suggestion", "Suggestion 快捷指令"),
+        "key": "suggestion"
+    }]
+}, {
+    "label":
+    get_text("Confirm", "确认"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("ThoughtChain", "ThoughtChain 思考链"),
+        "key": "thought_chain"
+    }]
+}, {
+    "label":
+    get_text("Tools", "工具"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("XProvider", "XProvider 全局化配置"),
+        "key": "x_provider"
     }]
 }]
 
@@ -477,12 +498,12 @@ def more_components():
         "menus": antd_menu_items,
         "extra_menu_footer": more_components
     },
-    # {
-    #     "label": get_text("Antdx Components", "Antdx 组件"),
-    #     "key": "antdx",
-    #     "default_active_key": "overview",
-    #     "menus": antdx_menu_items,
-    # },
+    {
+        "label": get_text("Antdx Components", "Antdx 组件"),
+        "key": "antdx",
+        "default_active_key": "overview",
+        "menus": antdx_menu_items,
+    },
     {
         "label": get_text("Version 0.x", "0.x 版本"),
         "key": "legacy",
@@ -496,7 +517,7 @@ def more_components():
         # match the key of tabs
         "index": index_docs,
         "antd": antd_docs,
-        # "antdx": antdx_docs,
+        "antdx": antdx_docs,
         "base": base_docs
     },
     default_active_tab=default_active_tab,

docs/components/antdx/bubble/demos/chatbot.py

@@ -67,7 +67,7 @@ def dislike(state_value, e: gr.EventData):
                     scroll_btn = antd.Button("Scroll To First")
                 with antdx.Bubble.List(items=default_history,
                                        elem_style=dict(maxHeight=500),
-                                       elem_id="bubble-list") as bubble_list:
+                                       elem_id="chatbot") as bubble_list:
                     # Define Roles
                     with ms.Slot("roles"):
                         with antdx.Bubble.List.Role(
@@ -141,7 +141,7 @@ def dislike(state_value, e: gr.EventData):
                                  outputs=[state, bubble_list])
             scroll_btn.click(fn=None,
                              js="""() => {
-                const bubbleList = document.getElementById("bubble-list");
+                const bubbleList = document.getElementById("chatbot");
                 bubbleList.scrollTo({ top:0, behavior:'smooth' });
 }""")
 

docs/components/antdx/suggestion/README-zh_CN.md

@@ -0,0 +1,9 @@
+# Suggestion
+
+A suggestion component for chat. See [Ant Design X](https://x.ant.design/components/suggestion/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="block" title="Block"></demo>
+<demo name="controlled_by_python" title="Controlled By Python"></demo>

docs/components/antdx/suggestion/README.md

@@ -0,0 +1,9 @@
+# Suggestion
+
+A suggestion component for chat. See [Ant Design X](https://x.ant.design/components/suggestion/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="block" title="Block"></demo>
+<demo name="controlled_by_python" title="Controlled By Python"></demo>

docs/components/antdx/suggestion/app.py

@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

docs/components/antdx/suggestion/demos/basic.py

@@ -0,0 +1,43 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def select_suggestion(e: gr.EventData):
+    return gr.update(value=e._data["payload"][0])
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            with antdx.Suggestion(
+                    # onKeyDown Handler in Javascript
+                    should_trigger="""(e, { onTrigger, onKeyDown }) => {
+                      const value = e.target.value
+                      if (value === '/') {
+                          onTrigger()
+                      } else if (!value) {
+                          onTrigger(false);
+                      }
+                      onKeyDown(e)
+                    }""") as suggestion:
+                with ms.Slot("items"):
+                    antdx.Suggestion.Item(label="Write a report",
+                                          value="report")
+                    antdx.Suggestion.Item(label="Draw a picture", value="draw")
+                    with antdx.Suggestion.Item(label="Check some knowledge",
+                                               value="knowledge"):
+                        with ms.Slot("icon"):
+                            antd.Icon("OpenAIFilled")
+                        antdx.Suggestion.Item(label="About React",
+                                              value="react")
+                        antdx.Suggestion.Item(label="About Ant Design",
+                                              value="antd")
+                with ms.Slot("children"):
+                    sender = antdx.Sender(
+                        placeholder="Enter / to get suggestions")
+            suggestion.select(fn=select_suggestion, outputs=[sender])
+
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/antdx/suggestion/demos/block.py

@@ -0,0 +1,58 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+items = [
+    {
+        "label": 'Write a report',
+        "value": 'report'
+    },
+    {
+        "label": 'Draw a picture',
+        "value": 'draw'
+    },
+    {
+        "label": 'Check some knowledge',
+        "value": 'knowledge',
+        "extra": 'Extra Info',
+    },
+]
+
+
+def select_suggestion(e: gr.EventData):
+    return gr.update(value=e._data["payload"][0])
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Typography.Paragraph(
+                "Set `block` to display in a whole row. ``extra` can be used to configure additional information."
+            )
+            with antdx.Suggestion(
+                    items=items,
+                    block=True,
+                    # onKeyDown Handler in Javascript
+                    should_trigger="""(e, { onTrigger, onKeyDown }) => {
+                      switch(e.key) {
+                        case '/':
+                          onTrigger()
+                          break
+                        case 'ArrowRight':
+                        case 'ArrowLeft':
+                        case 'ArrowUp':
+                        case 'ArrowDown':
+                          break;
+                        default:
+                          onTrigger(false)
+                      }
+                      onKeyDown(e)
+                    }""") as suggestion:
+                with ms.Slot("children"):
+                    sender = antdx.Sender(
+                        placeholder="Enter / to get suggestions")
+            suggestion.select(fn=select_suggestion, outputs=[sender])
+
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/antdx/suggestion/demos/controlled_by_python.py

@@ -0,0 +1,54 @@
+import gradio as gr
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+items = [
+    {
+        "label": 'Write a report',
+        "value": 'report'
+    },
+    {
+        "label": 'Draw a picture',
+        "value": 'draw'
+    },
+    {
+        "label": 'Check some knowledge',
+        "value": 'knowledge',
+        "extra": 'Extra Info',
+    },
+]
+
+
+def select_suggestion(e: gr.EventData):
+    return gr.update(value=e._data["payload"][0]), gr.update(open=False)
+
+
+def change_sender(sender_value: str):
+    splitted_value = sender_value.split("/")
+    command = sender_value.split("/")[-1]
+    if len(splitted_value) > 1:
+        filtered_items = [
+            item for item in items
+            if item["label"].upper().find(command.upper()) != -1
+            and not command.startswith(item["value"])
+        ]
+        if len(filtered_items) > 0:
+            return gr.update(open=True, items=filtered_items)
+    return gr.update(open=False)
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            with antdx.Suggestion(open=False) as suggestion:
+                with ms.Slot("children"):
+                    sender = antdx.Sender(
+                        placeholder="Enter / to get suggestions")
+            sender.change(fn=change_sender,
+                          inputs=[sender],
+                          outputs=[suggestion])
+            suggestion.select(fn=select_suggestion,
+                              outputs=[sender, suggestion])
+
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/antdx/thought_chain/README-zh_CN.md

@@ -0,0 +1,9 @@
+# ThoughtChain
+
+The ThoughtChain component is used to visualize and track the call chain of Actions and Tools invoked by an Agent. See [Ant Design X](https://x.ant.design/components/thought-chain/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="item_status" title="Item Status"></demo>
+<demo name="nested_use" title="Nested Use"></demo>

docs/components/antdx/thought_chain/README.md

@@ -0,0 +1,9 @@
+# ThoughtChain
+
+The ThoughtChain component is used to visualize and track the call chain of Actions and Tools invoked by an Agent. See [Ant Design X](https://x.ant.design/components/thought-chain/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="item_status" title="Item Status"></demo>
+<demo name="nested_use" title="Nested Use"></demo>

docs/components/antdx/thought_chain/app.py

@@ -0,0 +1,6 @@
+from helper.Docs import Docs
+
+docs = Docs(__file__)
+
+if __name__ == "__main__":
+    docs.render().queue().launch()

docs/components/antdx/thought_chain/demos/basic.py

@@ -0,0 +1,76 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+default_collapsible = False
+
+
+def mock_content():
+    with antd.Typography.Paragraph():
+        antd.Typography.Paragraph(
+            "In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
+        )
+        with antd.Typography.Paragraph():
+            ms.Text(
+                "After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to "
+            )
+            antd.Typography.Text(
+                "uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development",
+                strong=True,
+            )
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            collapsible = antd.Switch(default_collapsible,
+                                      checked_children="Collapsible",
+                                      un_checked_children="Not Collapsible")
+            with antd.Card():
+                with antdx.ThoughtChain(
+                        collapsible=default_collapsible) as thought_chain:
+                    with antdx.ThoughtChain.Item(
+                            title="Thought Chain Item Title 1",
+                            description="description",
+                            status="success"):
+                        with ms.Slot("extra"):
+                            with antd.Button(value=None, type="text"):
+                                with ms.Slot("icon"):
+                                    antd.Icon("MoreOutlined")
+                        with ms.Slot("content"):
+                            mock_content()
+                        with ms.Slot("footer"):
+                            antd.Button("Thought Chain Item Footer",
+                                        block=True)
+                    with antdx.ThoughtChain.Item(
+                            title="Thought Chain Item Title 2",
+                            description="description",
+                            status="error"):
+                        with ms.Slot("extra"):
+                            with antd.Button(value=None, type="text"):
+                                with ms.Slot("icon"):
+                                    antd.Icon("MoreOutlined")
+                        with ms.Slot("content"):
+                            mock_content()
+                        with ms.Slot("footer"):
+                            antd.Button("Thought Chain Item Footer",
+                                        block=True)
+                    with antdx.ThoughtChain.Item(
+                            title="Thought Chain Item Title 3",
+                            description="description",
+                            status="pending"):
+                        with ms.Slot("extra"):
+                            with antd.Button(value=None, type="text"):
+                                with ms.Slot("icon"):
+                                    antd.Icon("MoreOutlined")
+                        with ms.Slot("content"):
+                            mock_content()
+                        with ms.Slot("footer"):
+                            antd.Button("Thought Chain Item Footer",
+                                        block=True)
+            collapsible.change(fn=lambda x: gr.update(collapsible=x),
+                               inputs=[collapsible],
+                               outputs=[thought_chain])
+if __name__ == "__main__":
+    demo.queue().launch()