Mirgate to ModelScope Studio 2.0

README-zh_CN.md

@@ -27,7 +27,9 @@
 
 ## 依赖
 
-- Gradio >= 4.43.0
+- Gradio >= 6.0.0
+
+> 注意：您的 Gradio 版本必须`<=6.8.0`，[为什么？](https://github.com/gradio-app/gradio/issues/13131)
 
 ## 安装
 
@@ -35,22 +37,12 @@
 pip install modelscope_studio
 ```
 
-## 示例
-
-<demo name="example"></demo>
-
-## 迁移到 1.0
-
-如果您在之前使用了`modelscope_studio`的组件，并且想要在新版本中继续使用。不需要对原有组件做任何修改，只需要在外层引入`ms.Application`即可。
+如果您需要使用`4.43.0 <= Gradio < 6.0.0`，请使用 1.x 版本：
 
-```python
-import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+```sh
+pip install modelscope_studio~=1.0
+```
 
-with gr.Blocks() as demo:
-    with ms.Application():
-        mgr.Chatbot()
+## 示例
 
-demo.launch()
-```
+<demo name="example"></demo>

README.md

@@ -45,7 +45,9 @@ However, when your application needs Gradio to handle more built-in data on the
 
 ## Dependencies
 
-- Gradio >= 4.43.0
+- Gradio >= 6.0.0
+
+> Note: Your Gradio version must`<=6.8.0`, [why?](https://github.com/gradio-app/gradio/issues/13131)
 
 ## Installation
 
@@ -53,22 +55,12 @@ However, when your application needs Gradio to handle more built-in data on the
 pip install modelscope_studio
 ```
 
-## Examples
-
-<demo name="example"></demo>
-
-## Migration to 1.0
-
-If you have used the `modelscope_studio` component before and want to continue using it in the new version, you do not need to make any changes to the original component, just import `ms.Application` in the outer layer.
+If you need to use `4.43.0 <= Gradio < 6.0.0`, please use 1.x version:
 
-```python
-import gradio as gr
-import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
+```sh
+pip install modelscope_studio~=1.0
+```
 
-with gr.Blocks() as demo:
-    with ms.Application():
-        mgr.Chatbot()
+## Examples
 
-demo.launch()
-```
+<demo name="example"></demo>

api/app.py

@@ -1,19 +0,0 @@
-import os
-
-from components.legacy.Docs import Docs
-
-
-def resolve(relative_path: str):
-    return os.path.join(os.path.dirname(__file__), relative_path)
-
-
-docs = Docs(
-    __file__,
-    markdown_files=([
-        filename for filename in os.listdir(resolve('.'))
-        if filename.endswith(".md")
-    ]),
-)
-
-if __name__ == "__main__":
-    docs.render().queue().launch()

api/load-zh_CN.md

@@ -1,30 +0,0 @@
-# load
-
-该特性与 [gr.load](https://www.gradio.app/docs/gradio/load) 类似。允许用户从已有创空间 [ModelScope Studio](https://modelscope.cn/studios) 仓库构造 demo。
-
-## 如何使用
-
-### 基本使用
-
-```python
-import modelscope_studio.components.legacy as mgr
-demo = mgr.load("modelscope/modelscope-studio")
-demo.launch()
-```
-
-### 使用访问令牌
-
-使用访问令牌来加载私有创空间。在这里找到您的 sdk 令牌：https://modelscope.cn/my/myaccesstoken。
-
-```python
-import modelscope_studio.components.legacy as mgr
-demo = mgr.load("modelscope/modelscope-studio", token="YOUR_ACCESS_TOKEN")
-demo.launch()
-```
-
-## 初始化
-
-| 属性  | 类型 | 默认值 | 描述                                                                                                 |
-| ----- | ---- | ------ | ---------------------------------------------------------------------------------------------------- |
-| name  | str  | None   | 必填。 创空间名称（如: "modelscope/modelscope-studio"）。                                            |
-| token | str  | None   | 用于加载私有创空间的可选访问令牌。 在这里找到您的 sdk 令牌：https://modelscope.cn/my/myaccesstoken。 |

api/load.md

@@ -1,30 +0,0 @@
-# load
-
-This feature is similar to [gr.load](https://www.gradio.app/docs/gradio/load). Allow users to Construct a demo from a [ModelScope Studio](https://modelscope.cn/studios) repo.
-
-## How to Use
-
-### Basic Usage
-
-```python
-import modelscope_studio.components.legacy as mgr
-demo = mgr.load("modelscope/modelscope-studio")
-demo.launch()
-```
-
-### With Access Token
-
-Use the access token to load a private ModelScope Studio repo. Find your sdk token here: https://modelscope.cn/my/myaccesstoken.
-
-```python
-import modelscope_studio.components.legacy as mgr
-demo = mgr.load("modelscope/modelscope-studio", token="YOUR_ACCESS_TOKEN")
-demo.launch()
-```
-
-## Initialization
-
-| Parameter | Type | Default Value | Description                                                                                                                         |
-| --------- | ---- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| name      | str  | None          | required. the name of the ModelScope Studio repo (e.g. "modelscope/modelscope-studio").                                             |
-| token     | str  | None          | optional access token for loading private ModelScope Studio repo. Find your sdk token here: https://modelscope.cn/my/myaccesstoken. |

app.py

@@ -6,7 +6,6 @@ import modelscope_studio.components.base as ms
 from helper.Docs import Docs
 from helper.env import is_modelscope_studio
 from helper.Site import Site
-from legacy_app import legacy_demo
 
 is_dev = os.environ.get("GRADIO_WATCH_MODULE_NAME") == 'docs.app'
 
@@ -225,6 +224,9 @@ antd_menu_items = [{
     }, {
         "label": get_text("Layout", "Layout 布局"),
         "key": "layout"
+    }, {
+        "label": get_text("Masonry", "Masonry 瀑布流"),
+        "key": "masonry"
     }, {
         "label": get_text("Space", "Space 间距"),
         "key": "space"
@@ -452,6 +454,9 @@ antdx_menu_items = [{
     }, {
         "label": get_text("Conversations", "Conversations 管理对话"),
         "key": "conversations"
+    }, {
+        "label": get_text("Notification", "Notification 系统通知"),
+        "key": "notification"
     }]
 }, {
     "label":
@@ -486,6 +491,9 @@ antdx_menu_items = [{
     "type":
     "group",
     "children": [{
+        "label": get_text("Think", "Think 思考过程"),
+        "key": "think"
+    }, {
         "label": get_text("ThoughtChain", "ThoughtChain 思考链"),
         "key": "thought_chain"
     }]
@@ -497,6 +505,21 @@ antdx_menu_items = [{
     "children": [{
         "label": get_text("Actions", "Actions 操作列表"),
         "key": "actions"
+    }, {
+        "label": get_text("CodeHighlighter", "CodeHighlighter 代码高亮"),
+        "key": "code_highlighter"
+    }, {
+        "label": get_text("FileCard", "FileCard 文件卡片"),
+        "key": "file_card"
+    }, {
+        "label": get_text("Folder", "Folder 文件夹"),
+        "key": "folder"
+    }, {
+        "label": get_text("Mermaid", "Mermaid 图表工具"),
+        "key": "mermaid"
+    }, {
+        "label": get_text("Sources", "Sources 来源引用"),
+        "key": "sources"
     }]
 }, {
     "label":
@@ -573,11 +596,6 @@ tabs = [
         "default_active_key": "overview",
         "menus": antdx_menu_items,
     },
-    {
-        "label": get_text("Version 0.x", "0.x 版本"),
-        "key": "legacy",
-        "content": legacy_demo
-    } if not is_dev else None,
 ]
 
 site = Site(
@@ -593,8 +611,8 @@ site = Site(
     default_active_tab=default_active_tab,
     logo=logo)
 
-demo = site.render()
+demo, css = site.render()
 
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=100,
-               max_size=100).launch(ssr_mode=False, max_threads=100)
+               max_size=100).launch(css=css, ssr_mode=False, max_threads=100)

components/antd/config_provider/demos/basic.py

@@ -10,7 +10,7 @@ with gr.Blocks() as demo:
         with antd.ConfigProvider(
                 locale=default_locale,
                 direction=default_direction,
-                theme=dict(token=dict(
+                theme_config=dict(token=dict(
                     colorPrimary=default_color))) as config_provider:
             with antd.Card():
                 with ms.Div(elem_style=dict(marginBottom=16)):
@@ -61,7 +61,7 @@ with gr.Blocks() as demo:
                          outputs=[config_provider])
         gr.on(
             [theme.change, color.change],
-            fn=lambda _theme, _color: gr.update(theme=dict(
+            fn=lambda _theme, _color: gr.update(theme_config=dict(
                 token=dict(colorPrimary=_color) if _color else None,
                 algorithm=dict(dark=True
                                if _theme and 'dark' in _theme else False,

components/antd/masonry/README-zh_CN.md

@@ -0,0 +1,9 @@
+# Masonry
+
+A masonry/waterfall layout component for displaying content with different heights. See [Ant Design](https://ant.design/components/masonry/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="columns" title="Custom Columns"></demo>
+<demo name="responsive" title="Responsive Layout"></demo>

components/antd/masonry/README.md

@@ -0,0 +1,9 @@
+# Masonry
+
+A masonry/waterfall layout component for displaying content with different heights. See [Ant Design](https://ant.design/components/masonry/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="columns" title="Custom Columns"></demo>
+<demo name="responsive" title="Responsive Layout"></demo>

components/{legacy/MultimodalInput → antd/masonry}/app.py

@@ -1,4 +1,4 @@
-from components.legacy.Docs import Docs
+from helper.Docs import Docs
 
 docs = Docs(__file__)
 

components/antd/masonry/demos/basic.py

@@ -0,0 +1,36 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+card_contents = [
+    ("Nature", "The natural world is full of wonder and beauty.", 120),
+    ("Technology", "Modern technology shapes how we live and work every day.",
+     100),
+    ("Travel",
+     "Exploring new destinations broadens the mind and enriches the soul.",
+     140),
+    ("Food", "Culinary traditions reflect the culture and history of a place.",
+     80),
+    ("Science",
+     "Scientific discoveries have transformed our understanding of the universe.",
+     160),
+    ("Art",
+     "Artistic expression takes countless forms across different cultures and eras.",
+     110),
+]
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Masonry(columns=3, gutter=16):
+                for title, content, height in card_contents:
+                    with antd.Masonry.Item():
+                        with antd.Card(title=title,
+                                       elem_style=dict(marginBottom=0)):
+                            ms.Div(content,
+                                   elem_style=dict(height=height,
+                                                   display='flex',
+                                                   alignItems='center'))
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antd/masonry/demos/columns.py

@@ -0,0 +1,49 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+card_contents = [
+    ("Card 1", 120),
+    ("Card 2", 80),
+    ("Card 3", 160),
+    ("Card 4", 100),
+    ("Card 5", 140),
+    ("Card 6", 90),
+    ("Card 7", 110),
+    ("Card 8", 130),
+]
+
+default_columns = 3
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Flex(gap="middle", vertical=True):
+                ms.Div("Select number of columns:")
+                columns_segmented = antd.Segmented(default_columns,
+                                                   options=[
+                                                       dict(label="1 Column",
+                                                            value=1),
+                                                       dict(label="2 Columns",
+                                                            value=2),
+                                                       dict(label="3 Columns",
+                                                            value=3),
+                                                       dict(label="4 Columns",
+                                                            value=4),
+                                                   ])
+                with antd.Masonry(columns=default_columns,
+                                  gutter=16) as masonry:
+                    for title, height in card_contents:
+                        with antd.Masonry.Item():
+                            with antd.Card(title=title,
+                                           elem_style=dict(marginBottom=0)):
+                                ms.Div(elem_style=dict(height=height,
+                                                       background='#f0f5ff',
+                                                       borderRadius=4))
+                columns_segmented.change(
+                    fn=lambda _columns: gr.update(columns=_columns),
+                    inputs=[columns_segmented],
+                    outputs=[masonry])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antd/masonry/demos/responsive.py

@@ -0,0 +1,40 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+
+items = [
+    dict(color='#1677ff', height=150, label='Item A'),
+    dict(color='#52c41a', height=80, label='Item B'),
+    dict(color='#fa8c16', height=200, label='Item C'),
+    dict(color='#722ed1', height=120, label='Item D'),
+    dict(color='#eb2f96', height=100, label='Item E'),
+    dict(color='#13c2c2', height=180, label='Item F'),
+    dict(color='#faad14', height=90, label='Item G'),
+    dict(color='#f5222d', height=160, label='Item H'),
+    dict(color='#1677ff', height=110, label='Item I'),
+    dict(color='#52c41a', height=140, label='Item J'),
+    dict(color='#fa8c16', height=70, label='Item K'),
+    dict(color='#722ed1', height=190, label='Item L'),
+]
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antd.ConfigProvider():
+            with antd.Masonry(columns=4, gutter=12):
+                for item in items:
+                    with antd.Masonry.Item():
+                        ms.Div(item['label'],
+                               elem_style=dict(
+                                   height=item['height'],
+                                   background=item['color'],
+                                   borderRadius=8,
+                                   display='flex',
+                                   alignItems='center',
+                                   justifyContent='center',
+                                   color='#fff',
+                                   fontSize=16,
+                                   fontWeight='bold',
+                               ))
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/actions/demos/basic.py

@@ -18,33 +18,33 @@ with gr.Blocks() as demo:
     with ms.Application():
         with antdx.XProvider():
             with antdx.Actions() as actions:
-                with antdx.Actions.Item(key="retry", label="Retry"):
+                with antdx.Actions.ActionItem(key="retry", label="Retry"):
                     with ms.Slot("icon"):
                         antd.Icon("RedoOutlined")
-                with antdx.Actions.Item(key="copy", label="Copy"):
-                    with ms.Slot("icon"):
-                        antd.Icon("CopyOutlined")
-            antd.Divider("More Menu Items")
+                with antdx.Actions.ActionItem(key="copy", label="Copy"):
+                    with ms.Slot("actionRender"):
+                        antdx.Actions.Copy(text="Copy Text")
+            antd.Divider("More Menu ActionItems")
             with antdx.Actions() as actions2:
-                with antdx.Actions.Item(key="retry", label="Retry"):
+                with antdx.Actions.ActionItem(key="retry", label="Retry"):
                     with ms.Slot("icon"):
                         antd.Icon("RedoOutlined")
-                with antdx.Actions.Item(key="copy", label="Copy"):
+                with antdx.Actions.ActionItem(key="copy", label="Copy"):
                     with ms.Slot("icon"):
                         antd.Icon("CopyOutlined")
-                with antdx.Actions.Item(key="more"):
-                    with antdx.Actions.Item(key="share", label="Share"):
-                        with ms.Slot("icon"):
-                            antd.Icon("ShareAltOutlined")
-                        antdx.Actions.Item(key="qq", label="QQ")
-                        antdx.Actions.Item(key="wechat", label="WeChat")
-                    antdx.Actions.Item(key="import", label="Import")
-                    with antdx.Actions.Item(
-                            key="delete", label="Delete",
-                            danger=True) as actions_delete_item:
-                        with ms.Slot("icon"):
-                            antd.Icon("DeleteOutlined")
-                with antdx.Actions.Item(key="clear", label="Clear"):
+                with antdx.Actions.ActionItem(key="more"):
+                    with ms.Slot("subItems"):
+                        with antdx.Actions.ActionItem(key="share",
+                                                      label="Share"):
+                            with ms.Slot("icon"):
+                                antd.Icon("ShareAltOutlined")
+                        antdx.Actions.ActionItem(key="import", label="Import")
+                        with antdx.Actions.ActionItem(
+                                key="delete", label="Delete",
+                                danger=True) as actions_delete_item:
+                            with ms.Slot("icon"):
+                                antd.Icon("DeleteOutlined")
+                with antdx.Actions.ActionItem(key="clear", label="Clear"):
                     with ms.Slot("icon"):
                         antd.Icon("ClearOutlined")
 

components/antdx/attachments/README-zh_CN.md

@@ -6,4 +6,3 @@ Display the collection of attachment information. See [Ant Design X](https://x.a
 
 <demo name="basic"></demo>
 <demo name="combination" title="Combination"></demo>
-<demo name="file_card" title="File Card"></demo>

components/antdx/attachments/README.md

@@ -6,4 +6,3 @@ Display the collection of attachment information. See [Ant Design X](https://x.a
 
 <demo name="basic"></demo>
 <demo name="combination" title="Combination"></demo>
-<demo name="file_card" title="File Card"></demo>

components/antdx/attachments/demos/file_card.py

@@ -1,71 +0,0 @@
-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
-
-file_list = [
-    {
-        "uid": '1',
-        "name": 'excel-file.xlsx',
-        "size": 111111,
-    },
-    {
-        "uid": '2',
-        "name": 'word-file.docx',
-        "size": 222222,
-    },
-    {
-        "uid": '3',
-        "name": 'image-file.png',
-        "size": 333333,
-    },
-    {
-        "uid": '4',
-        "name": 'pdf-file.pdf',
-        "size": 444444,
-    },
-    {
-        "uid": '5',
-        "name": 'ppt-file.pptx',
-        "size": 555555,
-    },
-    {
-        "uid": '6',
-        "name": 'video-file.mp4',
-        "size": 666666,
-    },
-    {
-        "uid": '7',
-        "name": 'audio-file.mp3',
-        "size": 777777,
-    },
-    {
-        "uid": '8',
-        "name": 'zip-file.zip',
-        "size": 888888,
-    },
-    {
-        "uid": '9',
-        "name": 'markdown-file.md',
-        "size": 999999,
-        "description": 'Custom description here',
-    },
-    {
-        "uid": '10',
-        "name": 'image-file.png',
-        "thumbUrl":
-        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        "url":
-        'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
-        "size": 123456,
-    },
-]
-with gr.Blocks() as demo:
-    with ms.Application():
-        with antdx.XProvider():
-            with antd.Flex(vertical=True, gap="middle"):
-                for file in file_list:
-                    antdx.Attachments.FileCard(item=file)
-
-if __name__ == "__main__":
-    demo.queue().launch()

components/antdx/bubble/demos/basic.py

@@ -31,28 +31,32 @@ with gr.Blocks() as demo:
                         with antd.Avatar(elem_style=fooAvatar):
                             with ms.Slot("icon"):
                                 antd.Icon("UserOutlined")
-                antdx.Bubble(placement="start",
-                             content="What a beautiful day!",
-                             avatar=dict(),
-                             styles={"avatar": hideAvatar})
+                with antdx.Bubble(placement="start",
+                                  content="What a beautiful day!",
+                                  styles={"avatar": hideAvatar}):
+                    with ms.Slot("avatar"):
+                        antd.Avatar()
                 with antdx.Bubble(placement="end",
                                   content="Hi, good morning, I'm fine!"):
                     with ms.Slot("avatar"):
                         with antd.Avatar(elem_style=barAvatar):
                             with ms.Slot("icon"):
                                 antd.Icon("UserOutlined")
-                antdx.Bubble(placement="end",
-                             content="Thank you!",
-                             avatar=dict(),
-                             styles={"avatar": hideAvatar})
+                with antdx.Bubble(placement="end",
+                                  content="Thank you!",
+                                  styles={"avatar": hideAvatar}):
+                    with ms.Slot("avatar"):
+                        antd.Avatar()
 
             antd.Divider("Header and footer")
 
             with antdx.Bubble(
                     "Hello, welcome to use Ant Design X! Just ask if you have any questions.",
                     header="Ant Design X"):
-                with ms.Slot("avatar.icon"):
-                    antd.Icon("UserOutlined")
+                with ms.Slot("avatar"):
+                    with antd.Avatar():
+                        with ms.Slot("icon"):
+                            antd.Icon("UserOutlined")
                 with ms.Slot("footer"):
                     with antd.Space(size="small"):
                         with antd.Button(value=None,
@@ -73,16 +77,20 @@ with gr.Blocks() as demo:
                 ms.Span("Loading State")
                 loading_switch = antd.Switch(value=False)
             with antdx.Bubble("hello world !") as loading_bubble:
-                with ms.Slot("avatar.icon"):
-                    antd.Icon("UserOutlined")
+                with ms.Slot("avatar"):
+                    with antd.Avatar():
+                        with ms.Slot("icon"):
+                            antd.Icon("UserOutlined")
 
             loading_switch.change(fn=lambda x: gr.update(loading=x),
                                   inputs=[loading_switch],
                                   outputs=[loading_bubble])
             antd.Divider("Markdown")
             with antdx.Bubble():
-                with ms.Slot("avatar.icon"):
-                    antd.Icon("UserOutlined")
+                with ms.Slot("avatar"):
+                    with antd.Avatar():
+                        with ms.Slot("icon"):
+                            antd.Icon("UserOutlined")
                 with ms.Slot("content"):
                     ms.Markdown("Hello `Markdown`!")
 

components/antdx/bubble/demos/bubble_list.py

@@ -1,3 +1,5 @@
+import time
+
 import gradio as gr
 import modelscope_studio.components.antd as antd
 import modelscope_studio.components.antdx as antdx
@@ -14,6 +16,7 @@ def get_bubble_items(count):
             "content": content,
             "key": i - 1
         })
+    time.sleep(2)
     return result
 
 
@@ -27,20 +30,20 @@ with gr.Blocks() as demo:
 
     with ms.Application():
         state = gr.State({"history_count": 3})
-        with antdx.XProvider():
+        with antdx.XProvider(), ms.AutoLoading():
             antd.Typography.Paragraph(
-                "Preset Bubble list. Support auto scroll. Use roles to set default properties of Bubble."
+                "Preset Bubble list. Support auto scroll. Use role to set default properties of Bubble."
             )
             with antd.Flex(gap="small", vertical=True):
                 with antd.Flex(gap="small",
                                elem_style=dict(alignSelf="flex-end")):
                     add_bubble_btn = antd.Button("Add Bubble")
-                    scroll_btn = antd.Button("Scroll To First")
-                with antdx.Bubble.List(items=get_bubble_items(3),
-                                       elem_style=dict(maxHeight=300),
-                                       elem_id="bubble-list") as bubble_list:
-                    # Define Roles
-                    with ms.Slot("roles"):
+                with antdx.Bubble.List(
+                        items=get_bubble_items(3),
+                        elem_style={"height": 300},
+                        class_names=dict(scroll="bubble-list")) as bubble_list:
+                    # Define Role
+                    with ms.Slot("role"):
                         with antdx.Bubble.List.Role(
                                 role="ai",
                                 placement="start",
@@ -51,9 +54,9 @@ with gr.Blocks() as demo:
                                         backgroundColor="#fde3cf")):
                                     with ms.Slot("icon"):
                                         antd.Icon("UserOutlined")
-                            # use messageRender to render markdown content
+                            # use contentRender to render markdown content
                             with ms.Slot(
-                                    "messageRender",
+                                    "contentRender",
                                     params_mapping="""content => content"""):
                                 ms.Markdown()
 
@@ -67,17 +70,12 @@ with gr.Blocks() as demo:
                                     with ms.Slot("icon"):
                                         antd.Icon("UserOutlined")
                             with ms.Slot(
-                                    "messageRender",
+                                    "contentRender",
                                     params_mapping="(content) => content"):
                                 ms.Markdown()
             add_bubble_btn.click(fn=add_bubble,
                                  inputs=[state],
                                  outputs=[state, bubble_list])
-            scroll_btn.click(fn=None,
-                             js="""() => {
-                const bubbleList = document.getElementById("bubble-list");
-                bubbleList.scrollTo({ top:0, behavior:'smooth' });
-}""")
 
 if __name__ == "__main__":
     demo.queue().launch()

components/antdx/bubble/demos/chatbot.py

@@ -64,12 +64,11 @@ with gr.Blocks() as demo:
                 with antd.Flex(gap="small",
                                elem_style=dict(alignSelf="flex-end")):
                     add_bubble_btn = antd.Button("Add Bubble")
-                    scroll_btn = antd.Button("Scroll To First")
                 with antdx.Bubble.List(items=default_history,
-                                       elem_style=dict(maxHeight=500),
+                                       elem_style=dict(height=500),
                                        elem_id="chatbot") as bubble_list:
-                    # Define Roles
-                    with ms.Slot("roles"):
+                    # Define Role
+                    with ms.Slot("role"):
                         with antdx.Bubble.List.Role(
                                 role="ai",
                                 placement="start",
@@ -81,9 +80,9 @@ with gr.Blocks() as demo:
                                         backgroundColor="#fde3cf")):
                                     with ms.Slot("icon"):
                                         antd.Icon("UserOutlined")
-                            # use messageRender to render markdown content
+                            # use contentRender to render markdown content
                             with ms.Slot(
-                                    "messageRender",
+                                    "contentRender",
                                     params_mapping="""content => content"""):
                                 ms.Markdown()
 
@@ -149,17 +148,12 @@ with gr.Blocks() as demo:
                                     with ms.Slot("icon"):
                                         antd.Icon("UserOutlined")
                             with ms.Slot(
-                                    "messageRender",
+                                    "contentRender",
                                     params_mapping="(content) => content"):
                                 ms.Markdown()
             add_bubble_btn.click(fn=add_bubble,
                                  inputs=[state],
                                  outputs=[state, bubble_list])
-            scroll_btn.click(fn=None,
-                             js="""() => {
-                const bubbleList = document.getElementById("chatbot");
-                bubbleList.scrollTo({ top:0, behavior:'smooth' });
-}""")
 
 if __name__ == "__main__":
     demo.queue().launch()

components/antdx/bubble/demos/custom_list_content.py

@@ -45,16 +45,14 @@ items = [
         "content": [
             {
                 "uid": '1',
-                "name": 'excel-file.xlsx',
-                "size": 111111,
+                "filename": 'excel-file.xlsx',
+                "byte": 111111,
                 "description": 'Checking the data',
             },
             {
                 "uid": '2',
-                "name": 'word-file.docx',
-                "size": 222222,
-                "status": 'uploading',
-                "percent": 23,
+                "filename": 'word-file.docx',
+                "byte": 222222
             },
         ],
     },
@@ -68,8 +66,8 @@ with gr.Blocks() as demo:
                 "Customize the content of the bubble list, which is very useful for personalized customization scenarios."
             )
             with antdx.Bubble.List(items=items) as bubble_list:
-                # Define Roles
-                with ms.Slot("roles"):
+                # Define Role
+                with ms.Slot("role"):
                     with antdx.Bubble.List.Role(role="ai-markdown",
                                                 placement="start"):
                         with ms.Slot("avatar"):
@@ -77,7 +75,7 @@ with gr.Blocks() as demo:
                                     backgroundColor="#fde3cf")):
                                 with ms.Slot("icon"):
                                     antd.Icon("UserOutlined")
-                        with ms.Slot("messageRender",
+                        with ms.Slot("contentRender",
                                      params_mapping="(content) => content"):
                             ms.Markdown()
                     with antdx.Bubble.List.Role(role="ai-error-message",
@@ -87,32 +85,28 @@ with gr.Blocks() as demo:
                                     backgroundColor="#fde3cf")):
                                 with ms.Slot("icon"):
                                     antd.Icon("UserOutlined")
-                        with ms.Slot("messageRender",
+                        with ms.Slot("contentRender",
                                      params_mapping="(content) => content"):
                             antd.Typography.Text(type="danger")
-                    with antdx.Bubble.List.Role(
-                            role="ai-suggestion",
-                            placement="start",
-                            variant="borderless",
-                            avatar=dict(style=dict(visibility='hidden'))):
-                        with ms.Slot("messageRender",
+                    with antdx.Bubble.List.Role(role="ai-suggestion",
+                                                placement="start",
+                                                variant="borderless"):
+                        with ms.Slot("contentRender",
                                      params_mapping="(items) => ({ items })"):
                             prompts = antdx.Prompts(vertical=True)
 
-                    with antdx.Bubble.List.Role(
-                            role="ai-file",
-                            placement="start",
-                            variant="borderless",
-                            avatar=dict(style=dict(visibility='hidden'))):
-                        with ms.Slot("messageRender",
+                    with antdx.Bubble.List.Role(role="ai-file",
+                                                placement="start",
+                                                variant="borderless"):
+                        with ms.Slot("contentRender",
                                      params_mapping="""(content) => {
                                             return {
-                                                each: content?.map(item => ({ item }))
+                                                each: content
                                             }
 }"""):
                             with antd.Flex(vertical=True, gap="middle"):
                                 with ms.Each(as_item="each"):
-                                    antdx.Attachments.FileCard()
+                                    antdx.FileCard()
 
 if __name__ == "__main__":
     demo.queue().launch()

components/antdx/bubble/demos/typing_effect.py

@@ -28,13 +28,16 @@ with gr.Blocks() as demo:
             with antd.Flex(vertical=True, gap="small"):
                 with antdx.Bubble(content=text,
                                   typing=dict(step=2, interval=50)) as bubble1:
-                    with ms.Slot("avatar.icon"):
-                        antd.Icon("UserOutlined")
+                    with ms.Slot("avatar"):
+                        with antd.Avatar():
+                            with ms.Slot("icon"):
+                                antd.Icon("UserOutlined")
                 with antdx.Bubble(content=text,
-                                  typing=dict(step=2, interval=50,
-                                              suffix="💗")) as bubble2:
-                    with ms.Slot("avatar.icon"):
-                        antd.Icon("UserOutlined")
+                                  typing=dict(step=2, interval=50)) as bubble2:
+                    with ms.Slot("avatar"):
+                        with antd.Avatar():
+                            with ms.Slot("icon"):
+                                antd.Icon("UserOutlined")
                 btn = antd.Button("Repeat 1 Times",
                                   elem_style=dict(alignSelf="flex-end"))
                 btn.click(fn=repeat,

components/antdx/bubble/demos/variant.py

@@ -11,18 +11,27 @@ with gr.Blocks() as demo:
             )
             with antd.Flex(vertical=True, gap="middle"):
                 with antdx.Bubble(variant="filled", content="variant: filled"):
-                    with ms.Slot("avatar.icon"):
-                        antd.Icon("UserOutlined")
+                    with ms.Slot("avatar"):
+                        with antd.Avatar():
+                            with ms.Slot("icon"):
+                                antd.Icon("UserOutlined")
                 with antdx.Bubble(variant="outlined",
                                   content="variant: outlined"):
-                    with ms.Slot("avatar.icon"):
-                        antd.Icon("UserOutlined")
+
+                    with ms.Slot("avatar"):
+                        with antd.Avatar():
+                            with ms.Slot("icon"):
+                                antd.Icon("UserOutlined")
                 with antdx.Bubble(variant="shadow", content="variant: shadow"):
-                    with ms.Slot("avatar.icon"):
-                        antd.Icon("UserOutlined")
+                    with ms.Slot("avatar"):
+                        with antd.Avatar():
+                            with ms.Slot("icon"):
+                                antd.Icon("UserOutlined")
                 with antdx.Bubble(variant="borderless"):
-                    with ms.Slot("avatar.icon"):
-                        antd.Icon("UserOutlined")
+                    with ms.Slot("avatar"):
+                        with antd.Avatar():
+                            with ms.Slot("icon"):
+                                antd.Icon("UserOutlined")
                     with ms.Slot("content"):
                         with antdx.Prompts(
                                 vertical=True,

components/antdx/code_highlighter/README-zh_CN.md

@@ -0,0 +1,7 @@
+# CodeHighlighter
+
+A component for syntax highlighting of code blocks. See [Ant Design X](https://x.ant.design/components/code-highlighter/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

components/antdx/code_highlighter/README.md

@@ -0,0 +1,7 @@
+# CodeHighlighter
+
+A component for syntax highlighting of code blocks. See [Ant Design X](https://x.ant.design/components/code-highlighter/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

components/{legacy/Chatbot → antdx/code_highlighter}/app.py

@@ -1,4 +1,4 @@
-from components.legacy.Docs import Docs
+from helper.Docs import Docs
 
 docs = Docs(__file__)
 

components/antdx/code_highlighter/demos/basic.py

@@ -0,0 +1,75 @@
+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
+
+python_code = """import gradio as gr
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antdx.CodeHighlighter(
+                value="print('Hello, World!')",
+                lang="python",
+                header=True
+            )
+
+if __name__ == "__main__":
+    demo.queue().launch()
+"""
+
+javascript_code = """function greet(name) {
+  return `Hello, ${name}!`;
+}
+
+const result = greet('World');
+console.log(result);
+"""
+
+typescript_code = """interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+function createUser(name: string, email: string): User {
+  return {
+    id: Math.random(),
+    name,
+    email,
+  };
+}
+"""
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Divider("Python Code")
+            antdx.CodeHighlighter(value=python_code,
+                                  lang="python",
+                                  header=True)
+
+            antd.Divider("JavaScript Code")
+            antdx.CodeHighlighter(value=javascript_code,
+                                  lang="javascript",
+                                  header=True)
+
+            antd.Divider("TypeScript Code")
+            antdx.CodeHighlighter(value=typescript_code,
+                                  lang="typescript",
+                                  header=True)
+
+            antd.Divider("Custom Header Slot")
+            with antdx.CodeHighlighter(value=python_code, lang="python"):
+                with ms.Slot("header"):
+                    with antd.Flex(justify="space-between", align="center"):
+                        ms.Span("Python Example")
+                        with antd.Button(value=None, size="small",
+                                         type="text"):
+                            with ms.Slot("icon"):
+                                antd.Icon("CopyOutlined")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/file_card/README-zh_CN.md

@@ -0,0 +1,7 @@
+# FileCard
+
+Used to display files during conversations or input. See [Ant Design X](https://x.ant.design/components/file-card/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>

components/antdx/file_card/README.md

@@ -0,0 +1,7 @@
+# FileCard
+
+Used to display files during conversations or input. See [Ant Design X](https://x.ant.design/components/file-card/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>

components/{legacy/Flow → antdx/file_card}/app.py

@@ -1,4 +1,4 @@
-from components.legacy.Docs import Docs
+from helper.Docs import Docs
 
 docs = Docs(__file__)
 

components/antdx/file_card/demos/basic.py

@@ -0,0 +1,96 @@
+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
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Divider("File Types")
+            with antd.Flex(gap="middle", wrap=True):
+                antdx.FileCard(filename="document.pdf",
+                               type="file",
+                               icon="pdf",
+                               byte=204800)
+                antdx.FileCard(filename="spreadsheet.xlsx",
+                               type="file",
+                               icon="excel",
+                               byte=102400)
+                antdx.FileCard(filename="presentation.pptx",
+                               type="file",
+                               icon="ppt",
+                               byte=512000)
+                antdx.FileCard(filename="report.docx",
+                               type="file",
+                               icon="word",
+                               byte=81920)
+                antdx.FileCard(filename="archive.zip",
+                               type="file",
+                               icon="zip",
+                               byte=1048576)
+                antdx.FileCard(filename="README.md",
+                               type="file",
+                               icon="markdown",
+                               byte=4096)
+                antdx.FileCard(filename="script.py",
+                               type="file",
+                               icon="python",
+                               byte=8192)
+
+            antd.Divider("Image Type")
+            with antd.Flex(gap="middle", wrap=True):
+                antdx.FileCard(
+                    filename="photo.jpg",
+                    type="image",
+                    src=
+                    "https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg",
+                    byte=327680)
+
+            antd.Divider("Loading State")
+            with antd.Flex(gap="middle", wrap=True):
+                antdx.FileCard(filename="loading-file.pdf",
+                               type="file",
+                               icon="pdf",
+                               loading=True)
+
+            antd.Divider("With Description")
+            with antd.Flex(gap="middle", wrap=True):
+                antdx.FileCard(filename="notes.txt",
+                               type="file",
+                               description="Last modified today",
+                               byte=2048)
+
+            antd.Divider("FileCard.List")
+            antdx.FileCard.List(items=[{
+                "filename": "file1.pdf",
+                "type": "file",
+                "icon": "pdf",
+                "byte": 204800
+            }, {
+                "filename": "image1.jpg",
+                "type": "image",
+                "byte": 327680
+            }, {
+                "filename": "audio.mp3",
+                "type": "audio",
+                "byte": 5242880
+            }, {
+                "filename": "video.mp4",
+                "type": "video",
+                "byte": 52428800
+            }],
+                                removable=True)
+
+            antd.Divider("FileCard.List with Custom Items")
+            with antdx.FileCard.List(removable=True):
+                antdx.FileCard.List.Item(filename="custom1.xlsx",
+                                         type="file",
+                                         icon="excel",
+                                         byte=102400)
+                antdx.FileCard.List.Item(filename="custom2.pdf",
+                                         type="file",
+                                         icon="pdf",
+                                         byte=204800)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/folder/README-zh_CN.md

@@ -0,0 +1,7 @@
+# Folder
+
+A folder tree component for displaying file structures. See [Ant Design X](https://x.ant.design/components/folder/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>

components/antdx/folder/README.md

@@ -0,0 +1,7 @@
+# Folder
+
+A folder tree component for displaying file structures. See [Ant Design X](https://x.ant.design/components/folder/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>

components/{legacy/Lifecycle → antdx/folder}/app.py

@@ -1,4 +1,4 @@
-from components.legacy.Docs import Docs
+from helper.Docs import Docs
 
 docs = Docs(__file__)
 

components/antdx/folder/demos/basic.py

@@ -0,0 +1,110 @@
+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 on_file_click(e: gr.EventData):
+    print("file clicked:", e._data["payload"])
+
+
+def on_folder_click(e: gr.EventData):
+    print("folder clicked:", e._data["payload"])
+
+
+def on_selected_file_change(e: gr.EventData):
+    print("selected file changed:", e._data["payload"])
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Divider("Basic Folder Tree")
+            with antdx.Folder(default_expand_all=True) as folder1:
+                with antdx.Folder.TreeNode(title="src", path="/src"):
+                    antdx.Folder.TreeNode(title="index.ts",
+                                          path="/src/index.ts",
+                                          content="export * from './app';")
+                    antdx.Folder.TreeNode(
+                        title="app.ts",
+                        path="/src/app.ts",
+                        content=
+                        "// Application entry point\nconsole.log('Hello World');"
+                    )
+                    with antdx.Folder.TreeNode(title="components",
+                                               path="/src/components"):
+                        antdx.Folder.TreeNode(
+                            title="Button.tsx",
+                            path="/src/components/Button.tsx",
+                            content=
+                            "import React from 'react';\n\nexport const Button = () => <button>Click me</button>;"
+                        )
+                        antdx.Folder.TreeNode(
+                            title="Input.tsx",
+                            path="/src/components/Input.tsx",
+                            content=
+                            "import React from 'react';\n\nexport const Input = () => <input />;"
+                        )
+                    with antdx.Folder.TreeNode(title="utils",
+                                               path="/src/utils"):
+                        antdx.Folder.TreeNode(
+                            title="helpers.ts",
+                            path="/src/utils/helpers.ts",
+                            content=
+                            "export const add = (a: number, b: number) => a + b;"
+                        )
+                antdx.Folder.TreeNode(
+                    title="package.json",
+                    path="/package.json",
+                    content=
+                    '{\n  "name": "my-project",\n  "version": "1.0.0"\n}')
+                antdx.Folder.TreeNode(
+                    title="README.md",
+                    path="/README.md",
+                    content="# My Project\n\nA sample project.")
+
+            antd.Divider("Using tree_data Prop")
+            antdx.Folder(
+                default_expand_all=True,
+                tree_data=[{
+                    "title":
+                    "project",
+                    "path":
+                    "/project",
+                    "children": [{
+                        "title": "main.py",
+                        "path": "/project/main.py",
+                        "content": "print('Hello, World!')"
+                    }, {
+                        "title":
+                        "utils.py",
+                        "path":
+                        "/project/utils.py",
+                        "content":
+                        "def greet(name):\n    return f'Hello, {name}!'"
+                    }, {
+                        "title":
+                        "tests",
+                        "path":
+                        "/project/tests",
+                        "children": [{
+                            "title":
+                            "test_main.py",
+                            "path":
+                            "/project/tests/test_main.py",
+                            "content":
+                            "import unittest\n\nclass TestMain(unittest.TestCase):\n    pass"
+                        }]
+                    }]
+                }, {
+                    "title": "requirements.txt",
+                    "path": "/requirements.txt",
+                    "content": "gradio\nmodelscope-studio"
+                }])
+
+            folder1.file_click(fn=on_file_click)
+            folder1.folder_click(fn=on_folder_click)
+            folder1.selected_file_change(fn=on_selected_file_change)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/mermaid/README-zh_CN.md

@@ -0,0 +1,7 @@
+# Mermaid
+
+A Mermaid diagram rendering component. See [Ant Design X](https://x.ant.design/components/mermaid/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>

components/antdx/mermaid/README.md

@@ -0,0 +1,7 @@
+# Mermaid
+
+A Mermaid diagram rendering component. See [Ant Design X](https://x.ant.design/components/mermaid/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>

components/antdx/mermaid/app.py

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

components/{legacy/Markdown/demos/custom_tags/accordion → antdx/mermaid/demos}/basic.py

@@ -1,17 +1,14 @@
 import gradio as gr
+import modelscope_studio.components.antdx as antdx
 import modelscope_studio.components.base as ms
-import modelscope_studio.components.legacy as mgr
 
-with gr.Blocks() as demo, ms.Application():
-    mgr.Markdown("""
-<accordion title="Using tool">
-
-```json
-{"text": "glorious weather", "resolution": "1024*1024"}
-```
-
-</accordion>
-""")
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antdx.Mermaid(value="""graph TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[OK]
+    B -->|No| D[Cancel]""")
 
 if __name__ == "__main__":
     demo.queue().launch()

components/antdx/notification/README-zh_CN.md

@@ -0,0 +1,7 @@
+# Notification
+
+A browser native notification component. See [Ant Design X](https://x.ant.design/components/notification/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>

components/antdx/notification/README.md

@@ -0,0 +1,7 @@
+# Notification
+
+A browser native notification component. See [Ant Design X](https://x.ant.design/components/notification/) for more information.
+
+## Examples
+
+<demo name="basic" position="bottom" collapsible="true"></demo>

components/antdx/notification/app.py

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

components/antdx/notification/demos/basic.py

@@ -0,0 +1,23 @@
+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
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            notification = antdx.Notification(
+                title="Hello Notification",
+                body=
+                "This is a browser native notification triggered from Gradio.",
+                duration=5000,
+                visible=False)
+            btn = antd.Button("Send Notification", type="primary")
+
+            btn.click(
+                fn=lambda: gr.update(visible=True),
+                outputs=[notification],
+            )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/prompts/demos/nest_usage.py

@@ -11,7 +11,7 @@ def item_click(e: gr.EventData):
 
 with gr.Blocks() as demo:
     with ms.Application():
-        with antdx.XProvider(theme=dict(algorithm=dict(dark=False))):
+        with antdx.XProvider(theme_config=dict(algorithm=dict(dark=False))):
             with antd.Card(elem_style=dict(borderRadius=0, border=0)):
                 with antdx.Prompts(
                         title="Do you want?",

components/antdx/sources/README-zh_CN.md

@@ -0,0 +1,7 @@
+# Sources
+
+A component for displaying information source lists in AI chat scenarios. See [Ant Design X](https://x.ant.design/components/sources/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

components/antdx/sources/README.md

@@ -0,0 +1,7 @@
+# Sources
+
+A component for displaying information source lists in AI chat scenarios. See [Ant Design X](https://x.ant.design/components/sources/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

components/antdx/sources/app.py

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

components/antdx/sources/demos/basic.py

@@ -0,0 +1,64 @@
+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 on_click(e: gr.EventData):
+    item = e._data["payload"][0]
+    gr.Info("Clicked: " + str(item.get("title", "")))
+
+
+def on_expand(e: gr.EventData):
+    expanded = e._data["payload"][0]
+    gr.Info("Expanded: " + str(expanded))
+
+
+source_items = [
+    {
+        "title": "Ant Design X",
+        "description": "The AI-Native UI solution of Ant Design",
+        "href": "https://x.ant.design",
+    },
+    {
+        "title": "Ant Design",
+        "description": "An enterprise-class UI design language",
+        "href": "https://ant.design",
+    },
+    {
+        "title": "GitHub",
+        "description": "Where the world builds software",
+        "href": "https://github.com",
+    },
+]
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Divider("Basic Sources")
+            sources1 = antdx.Sources(title="References",
+                                     items=source_items,
+                                     default_expanded=True)
+
+            antd.Divider("Inline Sources")
+            sources2 = antdx.Sources(title="References",
+                                     items=source_items,
+                                     inline=True)
+
+            antd.Divider("Sources with Slot Items")
+            with antdx.Sources(title="Sources") as sources3:
+                with ms.Slot("items"):
+                    antdx.Sources.Item(title="Ant Design X",
+                                       description="The AI-Native UI solution",
+                                       url="https://x.ant.design")
+                    antdx.Sources.Item(
+                        title="ModelScope Studio",
+                        description="Gradio component library",
+                        url="https://github.com/modelscope/modelscope-studio")
+
+    sources1.click(fn=on_click)
+    sources2.click(fn=on_click)
+    sources1.expand(fn=on_expand)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/antdx/think/README-zh_CN.md

@@ -0,0 +1,7 @@
+# Think
+
+A component for displaying AI model thinking process in chat scenarios. See [Ant Design X](https://x.ant.design/components/think/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>

components/antdx/think/README.md

@@ -0,0 +1,7 @@
+# Think
+
+A component for displaying AI model thinking process in chat scenarios. See [Ant Design X](https://x.ant.design/components/think/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>