feat: pro components

README-zh_CN.md

@@ -25,7 +25,7 @@
 
 ## 依赖
 
-- Gradio >= 4.0
+- Gradio >= 4.43.0
 
 ## 安装
 

README.md

@@ -42,7 +42,7 @@ However, when your application needs Gradio to handle more built-in data on the
 
 ## Dependencies
 
-- Gradio >= 4.0
+- Gradio >= 4.43.0
 
 ## Installation
 

app.py

@@ -15,7 +15,7 @@ def get_text(text: str, cn_text: str):
     return text
 
 
-def get_docs(type: Literal["antd", "antdx", "base"]):
+def get_docs(type: Literal["antd", "antdx", "pro", "base"]):
     import importlib.util
 
     components = []
@@ -67,6 +67,7 @@ index_docs = {"overview": Docs(__file__), **layout_templates}
 base_docs = get_docs("base")
 antd_docs = get_docs("antd")
 antdx_docs = get_docs("antdx")
+pro_docs = get_docs("pro")
 
 default_active_tab = "index"
 index_menu_items = [{
@@ -136,6 +137,20 @@ base_menu_items = [{
     }]
 }]
 
+pro_menu_items = [{
+    "label":
+    get_text("Chat", "对话"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("Chatbot", "Chatbot 聊天机器人"),
+        "key": "chatbot"
+    }, {
+        "label": get_text("MultimodalInput", "MultimodalInput 多模态输入框"),
+        "key": "multimodal_input"
+    }]
+}]
+
 antd_menu_items = [{
     "label": get_text("Overview", "概览"),
     "key": "overview"
@@ -494,6 +509,12 @@ tabs = [
         "default_active_key": "application",
         "menus": base_menu_items
     },
+    {
+        "label": get_text("Pro Components", "高级组件"),
+        "key": "pro",
+        "default_active_key": "chatbot",
+        "menus": pro_menu_items
+    },
     {
         "label": get_text("Antd Components", "Antd 组件"),
         "key": "antd",
@@ -521,7 +542,8 @@ site = Site(
         "index": index_docs,
         "antd": antd_docs,
         "antdx": antdx_docs,
-        "base": base_docs
+        "base": base_docs,
+        "pro": pro_docs
     },
     default_active_tab=default_active_tab,
     logo=logo)
@@ -529,4 +551,5 @@ site = Site(
 demo = site.render()
 
 if __name__ == "__main__":
-    demo.queue().launch(ssr_mode=False)
+    demo.queue(default_concurrency_limit=100,
+               max_size=100).launch(ssr_mode=False, max_threads=100)

components/pro/chatbot/README-zh_CN.md

@@ -0,0 +1,342 @@
+# Chatbot
+
+基于 [Ant Design X](https://x.ant.design) 封装的对话机器人组件。
+
+## 示例
+
+### 基础使用
+
+支持传入：
+
+- `user`,`assistant`两种 role。
+- `text`,`file`,`tool`,`suggestion`四种消息类型。
+
+<demo name="basic" position="bottom" collapsible="true"></demo>
+
+### Chatbot 配置
+
+支持传入配置项：
+
+- `markdown_config`：Chatbot 中 Markdown 文本的渲染配置。
+- `welcome_config`：当 Chatbot 中内容为空时显示的欢迎界面配置。
+- `bot_config`：Chatbot 中 bot 信息的展示配置。
+- `user_config`：Chatbot 中 user 信息的展示配置。
+
+<demo name="chatbot_config"  position="bottom" collapsible="true"></demo>
+
+### Message 配置
+
+`message`对象包含了`bot_config`和`user_config`的所有配置，这意味着用户可以自定义每条消息的显示方式。
+
+<demo name="message_config"  position="bottom"  collapsible="true"></demo>
+
+### 多模态示例
+
+<demo name="multimodal"  position="bottom" collapsible="true"></demo>
+
+### Thinking 示例
+
+<demo name="thinking"  position="bottom" collapsible="true"></demo>
+
+### API
+
+#### 属性
+
+| 属性            | 类型                                                              | 默认值 | 描述                                                                                                                                |
+| --------------- | ----------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------- |
+| value           | `list[dict \| ChatbotDataMessage] \| ChatbotDataMessages \| None` | None   | 聊天机器人中显示的默认消息列表，每条消息的格式为`ChatbotDataMessage`。                                                              |
+| welcome_config  | `ChatbotWelcomeConfig \| dict \| None`                            | None   | 欢迎界面配置。若`value`为空则会显示欢迎界面。                                                                                       |
+| markdown_config | `ChatbotMarkdownConfig \| dict \| None`                           | None   | 所有消息的 Markdown 配置。                                                                                                          |
+| user_config     | `ChatbotUserConfig \| dict \| None`                               | None   | 用户配置，当 message 的 role 为 'user'时生效。                                                                                      |
+| bot_config      | `ChatbotBotConfig \| dict \| None`                                | None   | 机器人配置，当 message 的 role 为 'assistant'时生效。                                                                               |
+| auto_scroll     | `bool`                                                            | True   | 如果为 `True`，则当值改变时将自动滚动到文本框底部，除非用户向上滚动。如果为 `False`，则当值改变时不会滚动到文本框底部。             |
+| height          | `int \| float \| str`                                             | 400    | 组件的高度，如果值为数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。如果 messages 超出了组件高度，则组件将可滚动。 |
+| max_height      | `int \| float \| str \| None`                                     | None   | 组件的最大高度，如果传递的是数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。                                       |
+| min_height      | `int \| float \| str \| None`                                     | None   | 组件的最小高度，如果传递的是数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。                                       |
+
+#### 事件
+
+| 事件                                         | 描述                                 |
+| -------------------------------------------- | ------------------------------------ |
+| `pro.Chatbot.change(fn, ···)`                | 当 Chatbot 的值发生变化时触发。      |
+| `pro.Chatbot.copy(fn, ···)`                  | 当点击复制按钮时触发。               |
+| `pro.Chatbot.edit(fn, ···)`                  | 当用户编辑消息时触发。               |
+| `pro.Chatbot.delete(fn, ···)`                | 当用户删除消息时触发。               |
+| `pro.Chatbot.like(fn, ···)`                  | 当点击喜欢/不喜欢按钮时触发。        |
+| `pro.Chatbot.retry(fn, ···)`                 | 当点击重试按钮时触发。               |
+| `pro.Chatbot.suggestion_select(fn, ···)`     | 当选择 suggestion 消息的选项时触发。 |
+| `pro.Chatbot.welcome_prompt_select(fn, ···)` | 当选择欢迎提示词的选项时触发。       |
+
+### 插槽
+
+```python
+SLOTS=["roles"]
+```
+
+另外，如果已有的 role 样式不符合预期，也可以和`Ant Design X`的`Bubble`组件一样使用`ms.Slot("roles")`进行自定义。
+
+### 类型
+
+```python
+# Ant Design X prompt props: https://x.ant.design/components/prompts#promptprops
+class ChatbotPromptConfig(GradioModel):
+    disabled: Optional[bool] = None
+    description: Optional[str] = None
+    label: Optional[str] = None
+    icon: Optional[str] = None
+    key: Optional[str] = None
+    children: Optional[List[Union[
+        dict,
+    ]]] = None
+
+
+# Ant Design X prompts props: https://x.ant.design/components/prompts
+class ChatbotPromptsConfig(GradioModel):
+    title: Optional[str] = None
+    vertical: Optional[bool] = False
+    wrap: Optional[bool] = False
+    styles: Optional[dict] = None
+    class_names: Optional[dict] = None
+    elem_style: Optional[dict] = None
+    elem_classes: Optional[Union[str, List[str]]] = None
+    items: Optional[List[Union[ChatbotPromptConfig, dict]]] = None
+
+
+# Ant Design X welcome props: https://x.ant.design/components/welcome
+class ChatbotWelcomeConfig(GradioModel):
+    variant: Optional[Literal['borderless', 'filled']] = 'borderless'
+    icon: Optional[Union[str, Path]] = None
+    title: Optional[str] = None
+    description: Optional[str] = None
+    extra: Optional[str] = None
+    elem_style: Optional[dict] = None
+    elem_classes: Optional[Union[str, List[str]]] = None
+    styles: Optional[dict] = None
+    class_names: Optional[dict] = None
+    prompts: Optional[Union[ChatbotPromptsConfig, dict]] = None
+
+
+class ChatbotMarkdownConfig(GradioModel):
+    render_markdown: Optional[bool] = True
+    latex_delimiters: Optional[list[dict[str, str | bool]]] = field(
+        default_factory=lambda: [
+            {
+                "left": "$$",
+                "right": "$$",
+                "display": True
+            },
+            {
+                "left": "\\(",
+                "right": "\\)",
+                "display": False
+            },
+            {
+                "left": "\\begin{equation}",
+                "right": "\\end{equation}",
+                "display": True
+            },
+            {
+                "left": "\\begin{align}",
+                "right": "\\end{align}",
+                "display": True
+            },
+            {
+                "left": "\\begin{alignat}",
+                "right": "\\end{alignat}",
+                "display": True
+            },
+            {
+                "left": "\\begin{gather}",
+                "right": "\\end{gather}",
+                "display": True
+            },
+            {
+                "left": "\\begin{CD}",
+                "right": "\\end{CD}",
+                "display": True
+            },
+            {
+                "left": "\\[",
+                "right": "\\]",
+                "display": True
+            },
+        ])
+    sanitize_html: Optional[bool] = True
+    line_breaks: Optional[bool] = True
+    rtl: Optional[bool] = False
+    allow_tags: Optional[List[str]] = None
+
+
+class ChatbotActionConfig(GradioModel):
+    action: Literal['copy', 'like', 'dislike', 'retry', 'edit', 'delete']
+    disabled: Optional[bool] = None
+    # Ant Design tooltip: https://ant.design/components/tooltip
+    tooltip: Optional[Union[str, dict]] = None
+    # Ant Design popconfirm props: https://ant.design/components/popconfirm
+    popconfirm: Optional[Union[str, dict]] = None
+
+
+class ChatbotUserConfig(GradioModel):
+    # Action buttons for user message
+    actions: Optional[List[Union[Literal[
+        'copy',
+        'edit',
+        'delete',
+    ], ChatbotActionConfig, dict]]] = field(default_factory=lambda: [
+        "copy"
+        # 'edit',
+        # ChatbotActionConfig(
+        #     action='delete',
+        #     popconfirm=dict(title="Delete the message",
+        #                     description="Are you sure to delete this message?",
+        #                     okButtonProps=dict(danger=True)))
+    ])
+    disabled_actions: Optional[List[Union[Literal[
+        'copy',
+        'edit',
+        'delete',
+    ]]]] = None
+    header: Optional[str] = None
+    footer: Optional[str] = None
+    # Ant Design avatar props: https://ant.design/components/avatar
+    avatar: Optional[Union[str, Path, dict, None]] = None
+    variant: Optional[Literal['filled', 'borderless', 'outlined',
+                              'shadow']] = None
+    shape: Optional[Literal['round', 'corner']] = None
+    placement: Optional[Literal['start', 'end']] = 'end'
+    loading: Optional[bool] = None
+    typing: Optional[Union[bool, dict]] = None
+    elem_style: Optional[dict] = None
+    elem_classes: Optional[Union[str, List[str]]] = None
+    styles: Optional[dict] = None
+    class_names: Optional[dict] = None
+
+
+class ChatbotBotConfig(ChatbotUserConfig):
+    # Action buttons for bot message
+    actions: Optional[List[Union[Literal[
+        'copy',
+        'like',
+        'dislike',
+        'retry',
+        'edit',
+        'delete',
+    ], ChatbotActionConfig, dict]]] = field(default_factory=lambda: [
+        'copy',
+        # 'like', 'dislike', 'retry', 'edit',
+        # ChatbotActionConfig(
+        #     action='delete',
+        #     popconfirm=dict(title="Delete the message",
+        #                     description="Are you sure to delete this message?",
+        #                     okButtonProps=dict(danger=True)))
+    ])
+    disabled_actions: Optional[List[Union[Literal[
+        'copy',
+        'like',
+        'dislike',
+        'retry',
+        'edit',
+        'delete',
+    ]]]] = None
+    placement: Optional[Literal['start', 'end']] = 'start'
+
+
+class ChatbotDataTextContentOptions(ChatbotMarkdownConfig):
+    pass
+
+
+class ChatbotDataToolContentOptions(ChatbotDataTextContentOptions):
+    """
+    title: tool message title.
+    status: tool message status, if status is 'done', the message will be collapsed.
+    """
+    title: Optional[str] = None
+    status: Optional[Literal['pending', 'done']] = None
+
+
+# Ant Design flex props: https://ant.design/components/flex
+class ChatbotDataFileContentOptions(GradioModel):
+    vertical: Union[bool] = False
+    wrap: Optional[Union[Literal['nowrap', 'wrap', 'wrap-reverse'],
+                         bool]] = True
+    justify: Optional[Literal['normal', 'start', 'end', 'flex-start',
+                              'flex-end', 'center', 'left', 'right',
+                              'space-between', 'space-around', 'space-evenly',
+                              'stretch', 'safe', 'unsafe']] = "normal"
+    align: Optional[Literal['normal', 'start', 'end', 'flex-start', 'flex-end',
+                            'center', 'self-start', 'self-end', 'baseline',
+                            'unsafe', 'stretch']] = "normal"
+    flex: Optional[str] = "normal"
+    gap: Optional[Union[Literal["small", "middle", "large"], str, int,
+                        float]] = "small"
+
+
+# Ant Design X prompts props: https://x.ant.design/components/prompts
+class ChatbotDataSuggestionContentOptions(ChatbotPromptsConfig):
+    pass
+
+
+# Ant Design X prompt props: https://x.ant.design/components/prompts#promptprops
+class ChatbotDataSuggestionContentItem(ChatbotPromptConfig):
+    pass
+
+
+class ChatbotDataMeta(GradioModel):
+    feedback: Optional[Literal['like', 'dislike', None]] = None
+
+
+class ChatbotDataMessageContent(GradioModel):
+    """
+    type: Content type, support 'text', 'tool', 'file', 'suggestion'.
+
+    content: Content value.
+
+    options: Content options, each content type has different options.
+
+    copyable: Whether the content can be copied via the 'copy' button.
+
+    editable: Whether the content can be edited via the 'edit' button. Only available for content type 'text' and 'tool'.
+    """
+    type: Optional[Literal['text', 'tool', 'file', 'suggestion']] = 'text'
+    copyable: Optional[bool] = True
+    editable: Optional[bool] = True
+    content: Optional[Union[str, List[Union[FileData,
+                                            ChatbotDataSuggestionContentItem,
+                                            dict, str]]]] = None
+    options: Optional[Union[dict, ChatbotDataTextContentOptions,
+                            ChatbotDataFileContentOptions,
+                            ChatbotDataToolContentOptions,
+                            ChatbotDataSuggestionContentOptions]] = None
+
+
+class ChatbotDataMessage(ChatbotBotConfig):
+    role: Union[Literal['user', 'assistant', 'system'], str] = None
+    key: Optional[Union[str, int, float]] = None
+    # If status is 'pending', the message will not render the footer area (including 'actions' and 'footer').
+    status: Optional[Literal['pending', 'done']] = None
+    content: Optional[Union[str, ChatbotDataMessageContent, dict,
+                            List[ChatbotDataMessageContent],
+                            List[dict]]] = None
+    placement: Optional[Literal['start', 'end']] = None
+    actions: Optional[List[Union[Literal[
+        'copy',
+        'like',
+        'dislike',
+        'retry',
+        'edit',
+        'delete',
+    ], ChatbotActionConfig, dict]]] = None
+    disabled_actions: Optional[List[Union[Literal[
+        'copy',
+        'like',
+        'dislike',
+        'retry',
+        'edit',
+        'delete',
+    ]]]] = None
+    meta: Optional[Union[ChatbotDataMeta, dict]] = None
+
+
+class ChatbotDataMessages(GradioRootModel):
+    root: List[ChatbotDataMessage]
+```

components/pro/chatbot/README.md

@@ -0,0 +1,341 @@
+# Chatbot
+
+A chatbot component based on [Ant Design X](https://x.ant.design).
+
+## Examples
+
+### Basic
+
+Supports:
+
+- Two roles: user and assistant.
+- Four message types: text, file, tool, and suggestion.
+
+<demo name="basic" position="bottom" collapsible="true"></demo>
+
+### Chatbot Config
+
+Supports configuration options:
+
+- `markdown_config`: Rendering configuration for Markdown text in the Chatbot.
+- `welcome_config`: Welcome interface configuration displayed when the Chatbot is empty.
+- `bot_config`: Display configuration for bot messages.
+- `user_config`: Display configuration for user messages.
+  <demo name="chatbot_config"  position="bottom" collapsible="true"></demo>
+
+### Message Config
+
+The `message` object includes all configurations from `bot_config` and `user_config`, allowing users to customize the display of individual messages.
+
+<demo name="message_config"  position="bottom"  collapsible="true"></demo>
+
+### Multimodal
+
+<demo name="multimodal"  position="bottom" collapsible="true"></demo>
+
+### Thinking
+
+<demo name="thinking"  position="bottom" collapsible="true"></demo>
+
+### API
+
+### Props
+
+| Attribute       | Type                                                              | Default Value | Description                                                                                                                                                                                        |
+| --------------- | ----------------------------------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value           | `list[dict \| ChatbotDataMessage] \| ChatbotDataMessages \| None` | None          | Default list of messages to show in chatbot, where each message is of the format `ChatbotDataMessage`.                                                                                             |
+| welcome_config  | `ChatbotWelcomeConfig \| dict \| None`                            | None          | Configuration of the welcome interface. If the `value` is empty, the welcome interface will be displayed.                                                                                          |
+| markdown_config | `ChatbotMarkdownConfig \| dict \| None`                           | None          | Markdown configuration for all messages.                                                                                                                                                           |
+| user_config     | `ChatbotUserConfig \| dict \| None`                               | None          | User configuration, will be applied when the message role is 'user'.                                                                                                                               |
+| bot_config      | `ChatbotBotConfig \| dict \| None`                                | None          | Bot configuration, will be applied when the message role is 'assistant'.                                                                                                                           |
+| auto_scroll     | `bool`                                                            | True          | If True, will automatically scroll to the bottom of the textbox when the value changes, unless the user scrolls up. If False, will not scroll to the bottom of the textbox when the value changes. |
+| height          | `int \| float \| str`                                             | 400           | The height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed. If messages exceed the height, the component will scroll.                           |
+| max_height      | `int \| float \| str \| None`                                     | None          | The maximum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed.                                                                             |
+| min_height      | `int \| float \| str \| None`                                     | None          | The minimum height of the component, specified in pixels if a number is passed, or in CSS units if a string is passed.                                                                             |
+
+#### Events
+
+| Event                                        | Description                                             |
+| -------------------------------------------- | ------------------------------------------------------- |
+| `pro.Chatbot.change(fn, ···)`                | Triggered when the Chatbot value changed.               |
+| `pro.Chatbot.copy(fn, ···)`                  | Triggered when the copy button is clicked.              |
+| `pro.Chatbot.edit(fn, ···)`                  | Triggered when user edit a message.                     |
+| `pro.Chatbot.delete(fn, ···)`                | Triggered when user delete a message.                   |
+| `pro.Chatbot.like(fn, ···)`                  | Triggered when the like/dislike button is clicked       |
+| `pro.Chatbot.retry(fn, ···)`                 | Triggered when the retry button is clicked              |
+| `pro.Chatbot.suggestion_select(fn, ···)`     | Triggered when the suggestion message item is selected. |
+| `pro.Chatbot.welcome_prompt_select(fn, ···)` | Triggered when the welcome prompt item is selected.     |
+
+### Slots
+
+```python
+SLOTS=["roles"]
+```
+
+Additionally, if the role style does not meet your expectations, you can also use `ms.Slot("roles")` to customize it, just like the `Bubble` component of `Ant ​​Design X`.
+
+### Types
+
+```python
+# Ant Design X prompt props: https://x.ant.design/components/prompts#promptprops
+class ChatbotPromptConfig(GradioModel):
+    disabled: Optional[bool] = None
+    description: Optional[str] = None
+    label: Optional[str] = None
+    icon: Optional[str] = None
+    key: Optional[str] = None
+    children: Optional[List[Union[
+        dict,
+    ]]] = None
+
+
+# Ant Design X prompts props: https://x.ant.design/components/prompts
+class ChatbotPromptsConfig(GradioModel):
+    title: Optional[str] = None
+    vertical: Optional[bool] = False
+    wrap: Optional[bool] = False
+    styles: Optional[dict] = None
+    class_names: Optional[dict] = None
+    elem_style: Optional[dict] = None
+    elem_classes: Optional[Union[str, List[str]]] = None
+    items: Optional[List[Union[ChatbotPromptConfig, dict]]] = None
+
+
+# Ant Design X welcome props: https://x.ant.design/components/welcome
+class ChatbotWelcomeConfig(GradioModel):
+    variant: Optional[Literal['borderless', 'filled']] = 'borderless'
+    icon: Optional[Union[str, Path]] = None
+    title: Optional[str] = None
+    description: Optional[str] = None
+    extra: Optional[str] = None
+    elem_style: Optional[dict] = None
+    elem_classes: Optional[Union[str, List[str]]] = None
+    styles: Optional[dict] = None
+    class_names: Optional[dict] = None
+    prompts: Optional[Union[ChatbotPromptsConfig, dict]] = None
+
+
+class ChatbotMarkdownConfig(GradioModel):
+    render_markdown: Optional[bool] = True
+    latex_delimiters: Optional[list[dict[str, str | bool]]] = field(
+        default_factory=lambda: [
+            {
+                "left": "$$",
+                "right": "$$",
+                "display": True
+            },
+            {
+                "left": "\\(",
+                "right": "\\)",
+                "display": False
+            },
+            {
+                "left": "\\begin{equation}",
+                "right": "\\end{equation}",
+                "display": True
+            },
+            {
+                "left": "\\begin{align}",
+                "right": "\\end{align}",
+                "display": True
+            },
+            {
+                "left": "\\begin{alignat}",
+                "right": "\\end{alignat}",
+                "display": True
+            },
+            {
+                "left": "\\begin{gather}",
+                "right": "\\end{gather}",
+                "display": True
+            },
+            {
+                "left": "\\begin{CD}",
+                "right": "\\end{CD}",
+                "display": True
+            },
+            {
+                "left": "\\[",
+                "right": "\\]",
+                "display": True
+            },
+        ])
+    sanitize_html: Optional[bool] = True
+    line_breaks: Optional[bool] = True
+    rtl: Optional[bool] = False
+    allow_tags: Optional[List[str]] = None
+
+
+class ChatbotActionConfig(GradioModel):
+    action: Literal['copy', 'like', 'dislike', 'retry', 'edit', 'delete']
+    disabled: Optional[bool] = None
+    # Ant Design tooltip: https://ant.design/components/tooltip
+    tooltip: Optional[Union[str, dict]] = None
+    # Ant Design popconfirm props: https://ant.design/components/popconfirm
+    popconfirm: Optional[Union[str, dict]] = None
+
+
+class ChatbotUserConfig(GradioModel):
+    # Action buttons for user message
+    actions: Optional[List[Union[Literal[
+        'copy',
+        'edit',
+        'delete',
+    ], ChatbotActionConfig, dict]]] = field(default_factory=lambda: [
+        "copy"
+        # 'edit',
+        # ChatbotActionConfig(
+        #     action='delete',
+        #     popconfirm=dict(title="Delete the message",
+        #                     description="Are you sure to delete this message?",
+        #                     okButtonProps=dict(danger=True)))
+    ])
+    disabled_actions: Optional[List[Union[Literal[
+        'copy',
+        'edit',
+        'delete',
+    ]]]] = None
+    header: Optional[str] = None
+    footer: Optional[str] = None
+    # Ant Design avatar props: https://ant.design/components/avatar
+    avatar: Optional[Union[str, Path, dict, None]] = None
+    variant: Optional[Literal['filled', 'borderless', 'outlined',
+                              'shadow']] = None
+    shape: Optional[Literal['round', 'corner']] = None
+    placement: Optional[Literal['start', 'end']] = 'end'
+    loading: Optional[bool] = None
+    typing: Optional[Union[bool, dict]] = None
+    elem_style: Optional[dict] = None
+    elem_classes: Optional[Union[str, List[str]]] = None
+    styles: Optional[dict] = None
+    class_names: Optional[dict] = None
+
+
+class ChatbotBotConfig(ChatbotUserConfig):
+    # Action buttons for bot message
+    actions: Optional[List[Union[Literal[
+        'copy',
+        'like',
+        'dislike',
+        'retry',
+        'edit',
+        'delete',
+    ], ChatbotActionConfig, dict]]] = field(default_factory=lambda: [
+        'copy',
+        # 'like', 'dislike', 'retry', 'edit',
+        # ChatbotActionConfig(
+        #     action='delete',
+        #     popconfirm=dict(title="Delete the message",
+        #                     description="Are you sure to delete this message?",
+        #                     okButtonProps=dict(danger=True)))
+    ])
+    disabled_actions: Optional[List[Union[Literal[
+        'copy',
+        'like',
+        'dislike',
+        'retry',
+        'edit',
+        'delete',
+    ]]]] = None
+    placement: Optional[Literal['start', 'end']] = 'start'
+
+
+class ChatbotDataTextContentOptions(ChatbotMarkdownConfig):
+    pass
+
+
+class ChatbotDataToolContentOptions(ChatbotDataTextContentOptions):
+    """
+    title: tool message title.
+    status: tool message status, if status is 'done', the message will be collapsed.
+    """
+    title: Optional[str] = None
+    status: Optional[Literal['pending', 'done']] = None
+
+
+# Ant Design flex props: https://ant.design/components/flex
+class ChatbotDataFileContentOptions(GradioModel):
+    vertical: Union[bool] = False
+    wrap: Optional[Union[Literal['nowrap', 'wrap', 'wrap-reverse'],
+                         bool]] = True
+    justify: Optional[Literal['normal', 'start', 'end', 'flex-start',
+                              'flex-end', 'center', 'left', 'right',
+                              'space-between', 'space-around', 'space-evenly',
+                              'stretch', 'safe', 'unsafe']] = "normal"
+    align: Optional[Literal['normal', 'start', 'end', 'flex-start', 'flex-end',
+                            'center', 'self-start', 'self-end', 'baseline',
+                            'unsafe', 'stretch']] = "normal"
+    flex: Optional[str] = "normal"
+    gap: Optional[Union[Literal["small", "middle", "large"], str, int,
+                        float]] = "small"
+
+
+# Ant Design X prompts props: https://x.ant.design/components/prompts
+class ChatbotDataSuggestionContentOptions(ChatbotPromptsConfig):
+    pass
+
+
+# Ant Design X prompt props: https://x.ant.design/components/prompts#promptprops
+class ChatbotDataSuggestionContentItem(ChatbotPromptConfig):
+    pass
+
+
+class ChatbotDataMeta(GradioModel):
+    feedback: Optional[Literal['like', 'dislike', None]] = None
+
+
+class ChatbotDataMessageContent(GradioModel):
+    """
+    type: Content type, support 'text', 'tool', 'file', 'suggestion'.
+
+    content: Content value.
+
+    options: Content options, each content type has different options.
+
+    copyable: Whether the content can be copied via the 'copy' button.
+
+    editable: Whether the content can be edited via the 'edit' button. Only available for content type 'text' and 'tool'.
+    """
+    type: Optional[Literal['text', 'tool', 'file', 'suggestion']] = 'text'
+    copyable: Optional[bool] = True
+    editable: Optional[bool] = True
+    content: Optional[Union[str, List[Union[FileData,
+                                            ChatbotDataSuggestionContentItem,
+                                            dict, str]]]] = None
+    options: Optional[Union[dict, ChatbotDataTextContentOptions,
+                            ChatbotDataFileContentOptions,
+                            ChatbotDataToolContentOptions,
+                            ChatbotDataSuggestionContentOptions]] = None
+
+
+class ChatbotDataMessage(ChatbotBotConfig):
+    role: Union[Literal['user', 'assistant', 'system'], str] = None
+    key: Optional[Union[str, int, float]] = None
+    # If status is 'pending', the message will not render the footer area (including 'actions' and 'footer').
+    status: Optional[Literal['pending', 'done']] = None
+    content: Optional[Union[str, ChatbotDataMessageContent, dict,
+                            List[ChatbotDataMessageContent],
+                            List[dict]]] = None
+    placement: Optional[Literal['start', 'end']] = None
+    actions: Optional[List[Union[Literal[
+        'copy',
+        'like',
+        'dislike',
+        'retry',
+        'edit',
+        'delete',
+    ], ChatbotActionConfig, dict]]] = None
+    disabled_actions: Optional[List[Union[Literal[
+        'copy',
+        'like',
+        'dislike',
+        'retry',
+        'edit',
+        'delete',
+    ]]]] = None
+    meta: Optional[Union[ChatbotDataMeta, dict]] = None
+
+
+class ChatbotDataMessages(GradioRootModel):
+    root: List[ChatbotDataMessage]
+```

components/pro/chatbot/app.py

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

components/pro/chatbot/demos/basic.py

@@ -0,0 +1,73 @@
+import os
+
+import gradio as gr
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+from modelscope_studio.components.pro.chatbot import (
+    ChatbotDataMessage, ChatbotDataMessageContent,
+    ChatbotDataSuggestionContentItem, ChatbotDataSuggestionContentOptions)
+
+with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
+    pro.Chatbot(
+        value=[
+            ChatbotDataMessage(role="user", content="Hello"),
+            {
+                "role": "assistant",
+                "content": "World"
+            },
+            ChatbotDataMessage(
+                role="user",
+                # other content type
+                content=ChatbotDataMessageContent(
+                    type="file",
+                    content=[
+                        "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+                        os.path.join(os.path.dirname(__file__),
+                                     "../resources/scenery.jpeg")
+                    ])),
+            ChatbotDataMessage(role="assistant",
+                               content=ChatbotDataMessageContent(
+                                   type="tool",
+                                   content="Tool content",
+                                   options={"title": "Tool"})),
+            ChatbotDataMessage(role="assistant",
+                               content=ChatbotDataMessageContent(
+                                   type="suggestion",
+                                   content=[
+                                       ChatbotDataSuggestionContentItem(
+                                           description="Option 1"),
+                                       ChatbotDataSuggestionContentItem(
+                                           description="Option 2"),
+                                       ChatbotDataSuggestionContentItem(
+                                           description="Option 3")
+                                   ],
+                                   options=ChatbotDataSuggestionContentOptions(
+                                       title="Suggestion"))),
+            ChatbotDataMessage(
+                role="assistant",
+                # multiple content type
+                content=[
+                    ChatbotDataMessageContent(type="tool",
+                                              content="Thought content",
+                                              options={"title": "Thinking"}),
+                    ChatbotDataMessageContent(type="text",
+                                              content="Hello World"),
+                    ChatbotDataMessageContent(
+                        type="suggestion",
+                        content=[
+                            ChatbotDataSuggestionContentItem(
+                                description="Option 1"),
+                            ChatbotDataSuggestionContentItem(
+                                description="Option 2"),
+                            ChatbotDataSuggestionContentItem(
+                                description="Option 3")
+                        ],
+                        options=ChatbotDataSuggestionContentOptions(
+                            title="Suggestion"))
+                ]),
+        ],
+        height=600)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/chatbot/demos/chatbot_config.py

@@ -0,0 +1,122 @@
+import time
+
+import gradio as gr
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+from modelscope_studio.components.pro.chatbot import (
+    ChatbotActionConfig, ChatbotBotConfig, ChatbotMarkdownConfig,
+    ChatbotPromptsConfig, ChatbotUserConfig, ChatbotWelcomeConfig)
+
+
+def welcome_prompt_select(chatbot_value, e: gr.EventData):
+    chatbot_value.append({
+        "role":
+        "user",
+        "content":
+        e._data["payload"][0]["value"]["description"]
+    })
+    chatbot_value.append({
+        "role": "assistant",
+        "loading": True,
+        "status": "pending",
+    })
+    yield gr.update(value=chatbot_value)
+
+    time.sleep(1)
+    chatbot_value[-1]["loading"] = False
+    chatbot_value[-1]["status"] = 'done'
+    chatbot_value[-1]["content"] = """
+<think>Thought Content</think>
+
+Content
+"""
+    yield gr.update(value=chatbot_value)
+
+
+def retry(chatbot_value, e: gr.EventData):
+    index = e._data["payload"][0]["index"]
+    chatbot_value[index]["content"] = "Regenerated Content"
+    return gr.update(value=chatbot_value)
+
+
+with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
+    chatbot = pro.Chatbot(
+        markdown_config=ChatbotMarkdownConfig(allow_tags=["think"]),
+        welcome_config=ChatbotWelcomeConfig(
+            variant="borderless",
+            icon=
+            "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp",
+            title="Hello I'm Chatbot",
+            description="Let's start a conversation.",
+            prompts=ChatbotPromptsConfig(
+                title="How can I help you today?",
+                styles={
+                    "list": {
+                        "width": '100%',
+                    },
+                    "item": {
+                        "flex": 1,
+                    },
+                },
+                items=[{
+                    "label":
+                    "🖋 Make a plan",
+                    "children": [{
+                        "description":
+                        "Help me with a plan to start a business"
+                    }, {
+                        "description":
+                        "Help me with a plan to achieve my goals"
+                    }, {
+                        "description":
+                        "Help me with a plan for a successful interview"
+                    }]
+                }, {
+                    "label":
+                    "📅 Help me write",
+                    "children": [{
+                        "description":
+                        "Help me write a story with a twist ending"
+                    }, {
+                        "description":
+                        "Help me write a blog post on mental health"
+                    }, {
+                        "description":
+                        "Help me write a letter to my future self"
+                    }]
+                }])),
+        user_config=ChatbotUserConfig(
+            actions=[
+                "copy", "edit",
+                ChatbotActionConfig(
+                    action="delete",
+                    popconfirm=dict(
+                        title="Delete the message",
+                        description="Are you sure to delete this message?",
+                        okButtonProps=dict(danger=True)))
+            ],
+            avatar="https://api.dicebear.com/7.x/miniavs/svg?seed=3"),
+        bot_config=ChatbotBotConfig(
+            # custom actions
+            actions=[
+                "copy", "like", "dislike", "retry", "edit",
+                ChatbotActionConfig(
+                    action="delete",
+                    popconfirm=dict(
+                        title="Delete the message",
+                        description="Are you sure to delete this message?",
+                        okButtonProps=dict(danger=True)))
+            ],
+            avatar=
+            "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
+        ),
+        height=600)
+
+    chatbot.welcome_prompt_select(fn=welcome_prompt_select,
+                                  inputs=[chatbot],
+                                  outputs=[chatbot])
+    chatbot.retry(fn=retry, inputs=[chatbot], outputs=[chatbot])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/chatbot/demos/message_config.py

@@ -0,0 +1,64 @@
+import gradio as gr
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+from modelscope_studio.components.pro.chatbot import (ChatbotActionConfig,
+                                                      ChatbotBotConfig,
+                                                      ChatbotDataMessage,
+                                                      ChatbotUserConfig)
+
+with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
+    pro.Chatbot(
+        value=[
+            ChatbotDataMessage(role="user", content="Hello"),
+            ChatbotDataMessage(role="assistant", content="World"),
+            ChatbotDataMessage(role="assistant",
+                               content="Liked message",
+                               meta=dict(feedback="like")),
+            ChatbotDataMessage(role="assistant",
+                               content="Message only has copy button",
+                               actions=["copy"]),
+            ChatbotDataMessage(
+                role="assistant",
+                content="Pending message will not show action buttons",
+                status="pending"),
+            ChatbotDataMessage(
+                role="assistant",
+                content="Bot 1",
+                header="bot1",
+                avatar="https://api.dicebear.com/7.x/miniavs/svg?seed=1"),
+            ChatbotDataMessage(
+                role="assistant",
+                content="Bot 2",
+                header="bot2",
+                avatar="https://api.dicebear.com/7.x/miniavs/svg?seed=2"),
+        ],
+        user_config=ChatbotUserConfig(
+            actions=[
+                "copy", "edit",
+                ChatbotActionConfig(
+                    action="delete",
+                    popconfirm=dict(
+                        title="Delete the message",
+                        description="Are you sure to delete this message?",
+                        okButtonProps=dict(danger=True)))
+            ],
+            avatar="https://api.dicebear.com/7.x/miniavs/svg?seed=3"),
+        bot_config=ChatbotBotConfig(
+            # custom actions
+            actions=[
+                "copy", "like", "dislike", "edit",
+                ChatbotActionConfig(
+                    action="delete",
+                    popconfirm=dict(
+                        title="Delete the message",
+                        description="Are you sure to delete this message?",
+                        okButtonProps=dict(danger=True)))
+            ],
+            avatar=
+            "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
+        ),
+        height=600)
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/chatbot/demos/multimodal.py

@@ -0,0 +1,223 @@
+import base64
+import os
+import time
+
+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
+import modelscope_studio.components.pro as pro
+from modelscope_studio.components.pro.chatbot import (ChatbotBotConfig,
+                                                      ChatbotPromptsConfig,
+                                                      ChatbotWelcomeConfig)
+from modelscope_studio.components.pro.multimodal_input import \
+  MultimodalInputUploadConfig
+from openai import OpenAI
+
+client = OpenAI(
+    base_url='https://api-inference.modelscope.cn/v1/',
+    api_key=os.getenv("MODELSCOPE_API_KEY"),  # ModelScope Token
+)
+
+model = "Qwen/Qwen2.5-VL-72B-Instruct"
+
+
+def prompt_select(input_value, e: gr.EventData):
+    input_value["text"] = e._data["payload"][0]["value"]["description"]
+    return gr.update(value=input_value)
+
+
+def clear():
+    return gr.update(value=None)
+
+
+def cancel(chatbot_value):
+    chatbot_value[-1]["loading"] = False
+    chatbot_value[-1]["status"] = "done"
+    chatbot_value[-1]["footer"] = "Chat completion paused"
+
+    return gr.update(value=chatbot_value), gr.update(loading=False), gr.update(
+        disabled=False)
+
+
+def retry(chatbot_value, e: gr.EventData):
+    index = e._data["payload"][0]["index"]
+    chatbot_value = chatbot_value[:index]
+
+    yield gr.update(loading=True), gr.update(value=chatbot_value), gr.update(
+        disabled=True)
+    for chunk in submit(None, chatbot_value):
+        yield chunk
+
+
+def image_to_base64(image_path):
+    with open(image_path, "rb") as image_file:
+        encoded_string = base64.b64encode(image_file.read()).decode('utf-8')
+    return f"data:image/jpeg;base64,{encoded_string}"
+
+
+def format_history(history):
+    messages = [{"role": "system", "content": "You are a helpful assistant."}]
+    for item in history:
+        if item["role"] == "user":
+            messages.append({
+                "role":
+                "user",
+                "content": [{
+                    "type": "image_url",
+                    "image_url": image_to_base64(file)
+                } for file in item["content"][0]["content"]
+                            if os.path.exists(file)] +
+                [{
+                    "type": "text",
+                    "text": item["content"][1]["content"]
+                }]
+            })
+        elif item["role"] == "assistant":
+            # ignore thought message
+            messages.append({"role": "assistant", "content": item["content"]})
+    return messages
+
+
+def submit(input_value, chatbot_value):
+    if input_value is not None:
+        chatbot_value.append({
+            "role":
+            "user",
+            "content": [{
+                "type": "file",
+                "content": [f for f in input_value["files"]]
+            }, {
+                "type": "text",
+                "content": input_value["text"]
+            }],
+        })
+    history_messages = format_history(chatbot_value)
+    chatbot_value.append({
+        "role": "assistant",
+        "content": "",
+        "loading": True,
+        "status": "pending"
+    })
+    yield {
+        input: gr.update(value=None, loading=True),
+        clear_btn: gr.update(disabled=True),
+        chatbot: gr.update(value=chatbot_value)
+    }
+
+    try:
+        response = client.chat.completions.create(model=model,
+                                                  messages=history_messages,
+                                                  stream=True)
+        start_time = time.time()
+
+        for chunk in response:
+            chatbot_value[-1]["content"] += chunk.choices[0].delta.content
+            chatbot_value[-1]["loading"] = False
+
+            yield {chatbot: gr.update(value=chatbot_value)}
+
+        chatbot_value[-1]["footer"] = "{:.2f}".format(time.time() -
+                                                      start_time) + 's'
+        chatbot_value[-1]["status"] = "done"
+        yield {
+            clear_btn: gr.update(disabled=False),
+            input: gr.update(loading=False),
+            chatbot: gr.update(value=chatbot_value),
+        }
+    except Exception as e:
+        chatbot_value[-1]["loading"] = False
+        chatbot_value[-1]["status"] = "done"
+        chatbot_value[-1]["content"] = "Failed to respond, please try again."
+        yield {
+            clear_btn: gr.update(disabled=False),
+            input: gr.update(loading=False),
+            chatbot: gr.update(value=chatbot_value),
+        }
+        raise e
+
+
+with gr.Blocks() as demo, ms.Application(), antdx.XProvider(), ms.AutoLoading(
+):
+    with antd.Flex(vertical=True, gap="middle", elem_style=dict(height=800)):
+        chatbot = pro.Chatbot(
+            # for flex=1 to fill the remaining space
+            height=0,
+            elem_style=dict(flex=1),
+            welcome_config=ChatbotWelcomeConfig(
+                variant="borderless",
+                icon=
+                "https://assets.alicdn.com/g/qwenweb/qwen-webui-fe/0.0.44/static/favicon.png",
+                title=f"Hello, I'm {model}",
+                description="You can upload images and text to get started.",
+                prompts=ChatbotPromptsConfig(
+                    title="How can I help you today?",
+                    styles={
+                        "list": {
+                            "width": '100%',
+                        },
+                        "item": {
+                            "flex": 1,
+                        },
+                    },
+                    items=[{
+                        "label":
+                        "🖋 Make a plan",
+                        "children": [{
+                            "description":
+                            "Help me with a plan to start a business"
+                        }, {
+                            "description":
+                            "Help me with a plan to achieve my goals"
+                        }, {
+                            "description":
+                            "Help me with a plan for a successful interview"
+                        }]
+                    }, {
+                        "label":
+                        "📅 Help me write",
+                        "children": [{
+                            "description":
+                            "Help me write a story with a twist ending"
+                        }, {
+                            "description":
+                            "Help me write a blog post on mental health"
+                        }, {
+                            "description":
+                            "Help me write a letter to my future self"
+                        }]
+                    }])),
+            user_config=dict(
+                avatar="https://api.dicebear.com/7.x/miniavs/svg?seed=3"),
+            bot_config=ChatbotBotConfig(
+                header=model,
+                actions=["copy", "retry"],
+                avatar=
+                "https://assets.alicdn.com/g/qwenweb/qwen-webui-fe/0.0.44/static/favicon.png"
+            ),
+        )
+
+        with pro.MultimodalInput(upload_config=MultimodalInputUploadConfig(
+                max_count=4, multiple=True, accept="image/*")) as input:
+            with ms.Slot("prefix"):
+                with antd.Button(value=None, color="default",
+                                 variant="text") as clear_btn:
+                    with ms.Slot("icon"):
+                        antd.Icon("ClearOutlined")
+        clear_btn.click(fn=clear, outputs=[chatbot])
+        submit_event = input.submit(fn=submit,
+                                    inputs=[input, chatbot],
+                                    outputs=[input, chatbot, clear_btn])
+        input.cancel(fn=cancel,
+                     inputs=[chatbot],
+                     outputs=[chatbot, input, clear_btn],
+                     cancels=[submit_event],
+                     queue=False)
+        chatbot.retry(fn=retry,
+                      inputs=[chatbot],
+                      outputs=[input, chatbot, clear_btn])
+        chatbot.welcome_prompt_select(fn=prompt_select,
+                                      inputs=[input],
+                                      outputs=[input])
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/chatbot/demos/thinking.py

@@ -0,0 +1,217 @@
+import os
+import time
+
+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
+import modelscope_studio.components.pro as pro
+from modelscope_studio.components.pro.chatbot import (ChatbotBotConfig,
+                                                      ChatbotPromptsConfig,
+                                                      ChatbotUserConfig,
+                                                      ChatbotWelcomeConfig)
+from openai import OpenAI
+
+client = OpenAI(
+    base_url='https://api-inference.modelscope.cn/v1/',
+    api_key=os.getenv("MODELSCOPE_API_KEY"),  # ModelScope Token
+)
+
+model = "Qwen/QwQ-32B"
+
+
+def prompt_select(e: gr.EventData):
+    return gr.update(value=e._data["payload"][0]["value"]["description"])
+
+
+def clear():
+    return gr.update(value=None)
+
+
+def retry(chatbot_value, e: gr.EventData):
+    index = e._data["payload"][0]["index"]
+    chatbot_value = chatbot_value[:index]
+
+    yield gr.update(loading=True), gr.update(value=chatbot_value), gr.update(
+        disabled=True)
+    for chunk in submit(None, chatbot_value):
+        yield chunk
+
+
+def cancel(chatbot_value):
+    chatbot_value[-1]["loading"] = False
+    chatbot_value[-1]["status"] = "done"
+    chatbot_value[-1]["footer"] = "Chat completion paused"
+    return gr.update(value=chatbot_value), gr.update(loading=False), gr.update(
+        disabled=False)
+
+
+def format_history(history):
+    messages = [{"role": "system", "content": "You are a helpful assistant."}]
+    for item in history:
+        if item["role"] == "user":
+            messages.append({"role": "user", "content": item["content"]})
+        elif item["role"] == "assistant":
+            # ignore thought message
+            messages.append({
+                "role": "assistant",
+                "content": item["content"][-1]["content"]
+            })
+    return messages
+
+
+def submit(sender_value, chatbot_value):
+    if sender_value is not None:
+        chatbot_value.append({
+            "role": "user",
+            "content": sender_value,
+        })
+    history_messages = format_history(chatbot_value)
+    chatbot_value.append({
+        "role": "assistant",
+        "content": [],
+        "loading": True,
+        "status": "pending"
+    })
+    yield {
+        sender: gr.update(value=None, loading=True),
+        clear_btn: gr.update(disabled=True),
+        chatbot: gr.update(value=chatbot_value)
+    }
+
+    try:
+        response = client.chat.completions.create(model=model,
+                                                  messages=history_messages,
+                                                  stream=True)
+        thought_done = False
+        start_time = time.time()
+        message_content = chatbot_value[-1]["content"]
+        # thought content
+        message_content.append({
+            "copyable": False,
+            "editable": False,
+            "type": "tool",
+            "content": "",
+            "options": {
+                "title": "Thinking..."
+            }
+        })
+        # content
+        message_content.append({
+            "type": "text",
+            "content": "",
+        })
+        for chunk in response:
+            reasoning_content = chunk.choices[0].delta.reasoning_content
+            content = chunk.choices[0].delta.content
+            chatbot_value[-1]["loading"] = False
+            message_content[-2]["content"] += reasoning_content or ""
+            message_content[-1]["content"] += content or ""
+
+            if content and not thought_done:
+                thought_done = True
+                thought_cost_time = "{:.2f}".format(time.time() - start_time)
+                message_content[-2]["options"][
+                    "title"] = f"End of Thought ({thought_cost_time}s)"
+                message_content[-2]["options"]["status"] = "done"
+
+            yield {chatbot: gr.update(value=chatbot_value)}
+
+        chatbot_value[-1]["footer"] = "{:.2f}".format(time.time() -
+                                                      start_time) + 's'
+        chatbot_value[-1]["status"] = "done"
+        yield {
+            clear_btn: gr.update(disabled=False),
+            sender: gr.update(loading=False),
+            chatbot: gr.update(value=chatbot_value),
+        }
+    except Exception as e:
+        chatbot_value[-1]["loading"] = False
+        chatbot_value[-1]["status"] = "done"
+        chatbot_value[-1]["content"] = "Failed to respond, please try again."
+        yield {
+            clear_btn: gr.update(disabled=False),
+            sender: gr.update(loading=False),
+            chatbot: gr.update(value=chatbot_value),
+        }
+        raise e
+
+
+with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
+    with antd.Flex(vertical=True, gap="middle"):
+        chatbot = pro.Chatbot(
+            height=600,
+            welcome_config=ChatbotWelcomeConfig(
+                variant="borderless",
+                icon=
+                "https://assets.alicdn.com/g/qwenweb/qwen-webui-fe/0.0.44/static/favicon.png",
+                title=f"Hello, I'm {model}",
+                description="You can input text to get started.",
+                prompts=ChatbotPromptsConfig(
+                    title="How can I help you today?",
+                    styles={
+                        "list": {
+                            "width": '100%',
+                        },
+                        "item": {
+                            "flex": 1,
+                        },
+                    },
+                    items=[{
+                        "label":
+                        "🖋 Make a plan",
+                        "children": [{
+                            "description":
+                            "Help me with a plan to start a business"
+                        }, {
+                            "description":
+                            "Help me with a plan to achieve my goals"
+                        }, {
+                            "description":
+                            "Help me with a plan for a successful interview"
+                        }]
+                    }, {
+                        "label":
+                        "📅 Help me write",
+                        "children": [{
+                            "description":
+                            "Help me write a story with a twist ending"
+                        }, {
+                            "description":
+                            "Help me write a blog post on mental health"
+                        }, {
+                            "description":
+                            "Help me write a letter to my future self"
+                        }]
+                    }])),
+            user_config=ChatbotUserConfig(
+                avatar="https://api.dicebear.com/7.x/miniavs/svg?seed=3"),
+            bot_config=ChatbotBotConfig(
+                header=model,
+                avatar=
+                "https://assets.alicdn.com/g/qwenweb/qwen-webui-fe/0.0.44/static/favicon.png",
+                actions=["copy", "retry"]),
+        )
+
+        with antdx.Sender() as sender:
+            with ms.Slot("prefix"):
+                with antd.Button(value=None, color="default",
+                                 variant="text") as clear_btn:
+                    with ms.Slot("icon"):
+                        antd.Icon("ClearOutlined")
+        clear_btn.click(fn=clear, outputs=[chatbot])
+        submit_event = sender.submit(fn=submit,
+                                     inputs=[sender, chatbot],
+                                     outputs=[sender, chatbot, clear_btn])
+        sender.cancel(fn=cancel,
+                      inputs=[chatbot],
+                      outputs=[chatbot, sender, clear_btn],
+                      cancels=[submit_event],
+                      queue=False)
+        chatbot.retry(fn=retry,
+                      inputs=[chatbot],
+                      outputs=[sender, chatbot, clear_btn])
+        chatbot.welcome_prompt_select(fn=prompt_select, outputs=[sender])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/multimodal_input/README-zh_CN.md

@@ -0,0 +1,100 @@
+# MutilmodalInput 
+
+基于 [Ant Design X](https://x.ant.design) 封装的多模态输入框组件，支持文件上传、录音等功能。
+
+## 示例
+
+### 基本使用
+
+<demo name="basic"></demo>
+
+### 与 Chatbot 配合使用
+
+<demo name="with_chatbot"></demo>
+
+### 配置额外按钮
+
+<demo name="extra_button"></demo>
+
+### 上传配置
+
+<demo name="upload_config"></demo>
+
+## API 
+
+### 属性
+
+| 属性          | 类型                                          | 默认值  | 描述                                                   |
+| ------------- | --------------------------------------------- | ------- | ------------------------------------------------------ |
+| value         | `dict \| MultimodalInputValue \| None`        | None    | 显示的默认值，格式为`{ "text":"", "files":[] }`。      |
+| loading       | `bool \| None`                                | None    | 输入框是否处处于加载状态，此时可以触发 `cancel` 事件。 |
+| read_only     | `bool \| None`                                | None    | 输入框是否为只读状态。                                 |
+| submit_type   | `Literal['enter', 'shiftEnter'] \| None`      | 'enter' | 输入框触发`submit`事件的方式。                         |
+| placeholder   | `str \| None`                                 | None    | 输入框的提示信息。                                     |
+| upload_config | `MultimodalInputUploadConfig \| dict \| None` | None    | 文件上传配置。                                         |
+
+### 插槽
+
+```python
+SLOTS=["prefix"]
+```
+
+### 类型
+
+```python
+class MultimodalInputUploadConfig(GradioModel):
+    """
+    fullscreen_drop: Whether to allow fullscreen drop files to the attachments.
+
+    allow_paste_file: Whether to allow paste file to the attachments.
+
+    allow_speech: Whether to allow speech input.
+
+    show_count: Whether to show the count of files when the attachments panel is close.
+
+    upload_button_tooltip: Tooltip of the upload button.
+
+    accept: File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
+
+    max_count: Limit the number of uploaded files. Will replace current one when maxCount is 1.
+
+    directory: Support upload whole directory.
+
+    disabled: Disable upload files.
+
+    multiple: Whether to support selected multiple files. IE10+ supported. You can select multiple files with CTRL holding down while multiple is set to be True.
+
+    overflow: Behavior when the file list overflows.
+    title: Title of the attachments panel.
+
+    placeholder: Placeholder information when there is no file.
+    """
+    fullscreen_drop: Optional[bool] = False
+    allow_paste_file: Optional[bool] = True
+    allow_speech: Optional[bool] = False
+    show_count: Optional[bool] = True
+    upload_button_tooltip: Optional[str] = None
+    accept: Optional[str] = None
+    max_count: Optional[int] = None
+    directory: Optional[bool] = False
+    multiple: Optional[bool] = False
+    disabled: Optional[bool] = False
+    overflow: Literal['wrap', 'scrollX', 'scrollY'] | None = None
+    title: Optional[str] = "Attachments"
+    placeholder: Optional[dict] = field(
+        default_factory=lambda: {
+            "inline": {
+                "title": "Upload files",
+                "description": "Click or drag files to this area to upload"
+            },
+            "drop": {
+                "title": "Drop files here",
+            }
+        })
+
+
+class MultimodalInputValue(GradioModel):
+    files: Optional[ListFiles] = None
+    text: Optional[str] = None
+
+```

components/pro/multimodal_input/README.md

@@ -0,0 +1,100 @@
+# MultimodalInput
+
+A multimodal input component based on [Ant Design X](https://x.ant.design), supporting file upload, voice recording, and more.
+
+## Examples
+
+### Basic
+
+<demo name="basic"></demo>
+
+### Integration with Chatbot
+
+<demo name="with_chatbot"></demo>
+
+### Configuring Extra Buttons
+
+<demo name="extra_button"></demo>
+
+### Upload Configuration
+
+<demo name="upload_config"></demo>
+
+## API
+
+### Props
+
+| Attribute     | Type                                          | Default Value | Description                                                                                 |
+| ------------- | --------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------- |
+| value         | `dict \| MultimodalInputValue \| None`        | None          | Default value to display, formatted as `{ "text":"", "files":[] }`.                         |
+| loading       | `bool \| None`                                | None          | Whether the input is in a loading state, in which case the `cancel` event can be triggered. |
+| read_only     | `bool \| None`                                | None          | Whether the input is read-only.                                                             |
+| submit_type   | `Literal['enter', 'shiftEnter'] \| None`      | 'enter'       | How the input box triggers the `submit` event.                                              |
+| placeholder   | `str \| None`                                 | None          | Input placeholder text.                                                                     |
+| upload_config | `MultimodalInputUploadConfig \| dict \| None` | None          | File upload configuration.                                                                  |
+
+### Slots
+
+```python
+SLOTS = ["prefix"]
+```
+
+### Types
+
+```python
+class MultimodalInputUploadConfig(GradioModel):
+    """
+    fullscreen_drop: Whether to allow fullscreen drop files to the attachments.
+
+    allow_paste_file: Whether to allow paste file to the attachments.
+
+    allow_speech: Whether to allow speech input.
+
+    show_count: Whether to show the count of files when the attachments panel is close.
+
+    upload_button_tooltip: Tooltip of the upload button.
+
+    accept: File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
+
+    max_count: Limit the number of uploaded files. Will replace current one when maxCount is 1.
+
+    directory: Support upload whole directory.
+
+    disabled: Disable upload files.
+
+    multiple: Whether to support selected multiple files. IE10+ supported. You can select multiple files with CTRL holding down while multiple is set to be True.
+
+    overflow: Behavior when the file list overflows.
+    title: Title of the attachments panel.
+
+    placeholder: Placeholder information when there is no file.
+    """
+    fullscreen_drop: Optional[bool] = False
+    allow_paste_file: Optional[bool] = True
+    allow_speech: Optional[bool] = False
+    show_count: Optional[bool] = True
+    upload_button_tooltip: Optional[str] = None
+    accept: Optional[str] = None
+    max_count: Optional[int] = None
+    directory: Optional[bool] = False
+    multiple: Optional[bool] = False
+    disabled: Optional[bool] = False
+    overflow: Literal['wrap', 'scrollX', 'scrollY'] | None = None
+    title: Optional[str] = "Attachments"
+    placeholder: Optional[dict] = field(
+        default_factory=lambda: {
+            "inline": {
+                "title": "Upload files",
+                "description": "Click or drag files to this area to upload"
+            },
+            "drop": {
+                "title": "Drop files here",
+            }
+        })
+
+
+class MultimodalInputValue(GradioModel):
+    files: Optional[ListFiles] = None
+    text: Optional[str] = None
+
+```

components/pro/multimodal_input/app.py

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

components/pro/multimodal_input/demos/basic.py

@@ -0,0 +1,16 @@
+import gradio as gr
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+
+def submit(input_value):
+    print(input_value)
+
+
+with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
+    input = pro.MultimodalInput()
+    input.submit(fn=submit, inputs=[input])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/multimodal_input/demos/extra_button.py

@@ -0,0 +1,77 @@
+import time
+
+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
+import modelscope_studio.components.pro as pro
+
+
+def submit(input_value, chatbot_value):
+    chatbot_value.append({
+        "role":
+        "user",
+        "content": [{
+            "type": "text",
+            "content": input_value["text"]
+        }, {
+            "type": "file",
+            "content": [file for file in input_value["files"]]
+        }]
+    })
+    chatbot_value.append({
+        "role": "assistant",
+        "loading": True,
+        "status": "pending"
+    })
+    yield gr.update(value=None, loading=True), gr.update(value=chatbot_value)
+    time.sleep(2)
+    chatbot_value[-1]["loading"] = False
+    chatbot_value[-1]["content"] = "Hello"
+    chatbot_value[-1]["status"] = "done"
+    yield gr.update(loading=False), gr.update(value=chatbot_value)
+
+
+def cancel(chatbot_value):
+    chatbot_value[-1]["loading"] = False
+    chatbot_value[-1]["footer"] = "canceled"
+    chatbot_value[-1]["status"] = "done"
+    return gr.update(loading=False), gr.update(value=chatbot_value)
+
+
+def clear():
+    return gr.update(value=None)
+
+
+with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
+    with antd.Flex(elem_style=dict(height=300), vertical=True):
+        chatbot = pro.Chatbot(height=0,
+                              elem_style=dict(flex=1),
+                              value=[{
+                                  "role": "user",
+                                  "content": "Hello"
+                              }, {
+                                  "role": "assistant",
+                                  "content": "Hello"
+                              }])
+        with pro.MultimodalInput(upload_config=dict(
+                upload_button_tooltip="Attachments")) as input:
+            with ms.Slot("prefix"):
+                with antd.Tooltip("Clear History"):
+                    with antd.Button(value=None,
+                                     variant="text",
+                                     color="default") as clear_btn:
+                        with ms.Slot("icon"):
+                            antd.Icon("ClearOutlined")
+    submit_event = input.submit(fn=submit,
+                                inputs=[input, chatbot],
+                                outputs=[input, chatbot])
+    input.cancel(fn=cancel,
+                 cancels=[submit_event],
+                 inputs=[chatbot],
+                 outputs=[input, chatbot],
+                 queue=False)
+    clear_btn.click(fn=clear, outputs=[chatbot])
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/multimodal_input/demos/upload_config.py

@@ -0,0 +1,33 @@
+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
+import modelscope_studio.components.pro as pro
+from modelscope_studio.components.pro.multimodal_input import \
+  MultimodalInputUploadConfig
+
+with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
+    with antd.Flex(vertical=True, gap="small"):
+        antd.Divider("Style")
+        pro.MultimodalInput(upload_config=MultimodalInputUploadConfig(
+            upload_button_tooltip="Upload",
+            title="Upload Attachments",
+            placeholder={
+                "inline": {
+                    "title": "Upload files",
+                    "description": "Click or drag files to this area to upload"
+                },
+                "drop": {
+                    "title": "Drop files here",
+                }
+            }))
+        antd.Divider("Upload Limits")
+        pro.MultimodalInput(upload_config=MultimodalInputUploadConfig(
+            accept="image/*", fullscreen_drop=True, multiple=True,
+            max_count=4))
+        antd.Divider("Other Sources")
+        pro.MultimodalInput(upload_config=MultimodalInputUploadConfig(
+            allow_speech=True, allow_paste_file=True))
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/multimodal_input/demos/with_chatbot.py

@@ -0,0 +1,56 @@
+import time
+
+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
+import modelscope_studio.components.pro as pro
+
+
+def submit(input_value, chatbot_value):
+    chatbot_value.append({
+        "role":
+        "user",
+        "content": [{
+            "type": "text",
+            "content": input_value["text"]
+        }, {
+            "type": "file",
+            "content": [file for file in input_value["files"]]
+        }]
+    })
+    chatbot_value.append({
+        "role": "assistant",
+        "loading": True,
+        "status": "pending"
+    })
+    yield gr.update(value=None, loading=True), gr.update(value=chatbot_value)
+    time.sleep(2)
+    chatbot_value[-1]["loading"] = False
+    chatbot_value[-1]["content"] = "Hello"
+    chatbot_value[-1]["status"] = "done"
+    yield gr.update(loading=False), gr.update(value=chatbot_value)
+
+
+def cancel(chatbot_value):
+    chatbot_value[-1]["loading"] = False
+    chatbot_value[-1]["footer"] = "canceled"
+    chatbot_value[-1]["status"] = "done"
+    return gr.update(loading=False), gr.update(value=chatbot_value)
+
+
+with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
+    with antd.Flex(elem_style=dict(height=600), vertical=True):
+        chatbot = pro.Chatbot(height=0, elem_style=dict(flex=1))
+        input = pro.MultimodalInput()
+    submit_event = input.submit(fn=submit,
+                                inputs=[input, chatbot],
+                                outputs=[input, chatbot])
+    input.cancel(fn=cancel,
+                 cancels=[submit_event],
+                 inputs=[chatbot],
+                 outputs=[input, chatbot],
+                 queue=False)
+
+if __name__ == "__main__":
+    demo.queue().launch()

layout_templates/chatbot/README-zh_CN.md

@@ -5,11 +5,13 @@
 该模板提供以下功能：
 
 - 支持对话管理，可以同时开启多个对话。
-- 支持对话历史管理，可以对任意 message 进行重新生成、删除等操作，可以一键清空历史。
+- 支持对话历史管理，可以对任意 message 进行编辑、重新生成、删除等操作，可以一键清空历史。
 - 支持对话中断，可以中断当前的对话消息，并给出提示。
 - 支持通过输入`/`为用户展示输入建议。
 - 支持附件上传，可以手动控制最大上传个数以及上传格式。
 
 ## 示例
 
-<demo name="app" position="bottom" collapsible="true"></demo>
+<demo name="basic" position="bottom" collapsible="true"></demo>
+
+<demo name="fine_grained_control" title="细粒度控制"  position="bottom" collapsible="true"></demo>

layout_templates/chatbot/README.md

@@ -5,11 +5,13 @@ Application templates for building chatbot interfaces.
 This template provides the following features:
 
 - Supports conversation management, allowing multiple conversations to be opened simultaneously.
-- Enables conversation history management, including operations like regenerating or deleting any message, and clearing all history with one click.
+- Enables conversation history management, including operations like editing, regenerating or deleting any message, and clearing all history with one click.
 - Allows interrupting ongoing conversations and displaying notifications.
 - Displays input suggestions when users type `/`.
 - Supports attachment uploads with manual configuration of maximum upload count and allowed formats.
 
 ## Examples
 
-<demo name="app" position="bottom" collapsible="true"></demo>
+<demo name="basic" position="bottom" collapsible="true"></demo>
+
+<demo name="fine_grained_control" title="Fine-grained Control"  position="bottom" collapsible="true"></demo>

layout_templates/chatbot/demos/basic.py

@@ -0,0 +1,693 @@
+import base64
+import os
+import uuid
+
+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
+import modelscope_studio.components.pro as pro
+from modelscope_studio.components.pro.chatbot import (ChatbotActionConfig,
+                                                      ChatbotBotConfig,
+                                                      ChatbotUserConfig,
+                                                      ChatbotWelcomeConfig)
+from modelscope_studio.components.pro.multimodal_input import \
+  MultimodalInputUploadConfig
+from openai import OpenAI
+
+# =========== Configuration
+
+# API KEY
+MODELSCOPE_ACCESS_TOKEN = os.getenv('MODELSCOPE_ACCESS_TOKEN')
+
+client = OpenAI(
+    base_url='https://api-inference.modelscope.cn/v1/',
+    api_key=MODELSCOPE_ACCESS_TOKEN,
+)
+
+model = "Qwen/Qwen2.5-VL-72B-Instruct"
+
+save_history = False
+
+# =========== Configuration
+
+DEFAULT_PROMPTS = [{
+    "label":
+    "📅 Make a plan",
+    "children": [{
+        "description": "Help me with a plan to start a business",
+    }, {
+        "description": "Help me with a plan to achieve my goals",
+    }, {
+        "description":
+        "Help me with a plan for a successful interview",
+    }]
+}, {
+    "label":
+    "🖋 Help me write",
+    "children": [{
+        "description": "SHelp me write a story with a twist ending",
+    }, {
+        "description": "Help me write a blog post on mental health",
+    }, {
+        "description": "Help me write a letter to my future self",
+    }]
+}]
+
+DEFAULT_SUGGESTIONS = [{
+    "label":
+    'Make a plan',
+    "value":
+    "Make a plan",
+    "children": [{
+        "label": "Start a business",
+        "value": "Help me with a plan to start a business"
+    }, {
+        "label": "Achieve my goals",
+        "value": "Help me with a plan to achieve my goals"
+    }, {
+        "label": "Successful interview",
+        "value": "Help me with a plan for a successful interview"
+    }]
+}, {
+    "label":
+    'Help me write',
+    "value":
+    "Help me write",
+    "children": [{
+        "label": "Story with a twist ending",
+        "value": "Help me write a story with a twist ending"
+    }, {
+        "label": "Blog post on mental health",
+        "value": "Help me write a blog post on mental health"
+    }, {
+        "label": "Letter to my future self",
+        "value": "Help me write a letter to my future self"
+    }]
+}]
+
+DEFAULT_LOCALE = 'en_US'
+
+DEFAULT_THEME = {
+    "token": {
+        "colorPrimary": "#6A57FF",
+    }
+}
+
+
+def user_config(disabled_actions=None):
+    return ChatbotUserConfig(actions=[
+        "copy", "edit",
+        ChatbotActionConfig(
+            action="delete",
+            popconfirm=dict(title="Delete the message",
+                            description="Are you sure to delete this message?",
+                            okButtonProps=dict(danger=True)))
+    ],
+                             disabled_actions=disabled_actions)
+
+
+def bot_config(disabled_actions=None):
+    return ChatbotBotConfig(
+        actions=[
+            "copy", "like", "dislike", "edit",
+            ChatbotActionConfig(
+                action="retry",
+                popconfirm=dict(
+                    title="Regenerate the message",
+                    description=
+                    "Regenerate the message will also delete all subsequent messages.",
+                    okButtonProps=dict(danger=True))),
+            ChatbotActionConfig(action="delete",
+                                popconfirm=dict(
+                                    title="Delete the message",
+                                    description=
+                                    "Are you sure to delete this message?",
+                                    okButtonProps=dict(danger=True)))
+        ],
+        avatar=
+        "https://assets.alicdn.com/g/qwenweb/qwen-webui-fe/0.0.44/static/favicon.png",
+        disabled_actions=disabled_actions)
+
+
+class Gradio_Events:
+
+    @staticmethod
+    def submit(state_value):
+        # Define your code here
+        # The best way is to use the image url.
+        def image_to_base64(image_path):
+            with open(image_path, "rb") as image_file:
+                encoded_string = base64.b64encode(
+                    image_file.read()).decode('utf-8')
+            return f"data:image/jpeg;base64,{encoded_string}"
+
+        def format_history(history):
+            messages = [{
+                "role": "system",
+                "content": "You are a helpful and harmless assistant.",
+            }]
+            for item in history:
+                if item["role"] == "user":
+                    messages.append({
+                        "role":
+                        "user",
+                        "content": [{
+                            "type": "image_url",
+                            "image_url": image_to_base64(file)
+                        } for file in item["content"][0]["content"]
+                                    if os.path.exists(file)] +
+                        [{
+                            "type": "text",
+                            "text": item["content"][1]["content"]
+                        }]
+                    })
+                elif item["role"] == "assistant":
+                    messages.append({
+                        "role": "assistant",
+                        "content": item["content"]
+                    })
+            return messages
+
+        history = state_value["conversations_history"][
+            state_value["conversation_id"]]
+        history_messages = format_history(history)
+
+        history.append({
+            "role": "assistant",
+            "content": "",
+            "loading": True,
+            "status": "pending"
+        })
+
+        yield {
+            chatbot: gr.update(value=history),
+            state: gr.update(value=state_value),
+        }
+        try:
+            response = client.chat.completions.create(
+                model=model,  # ModelScope Model-Id
+                messages=history_messages,
+                stream=True)
+            for chunk in response:
+                history[-1]["content"] += chunk.choices[0].delta.content
+                history[-1]["loading"] = False
+                yield {
+                    chatbot: gr.update(value=history),
+                    state: gr.update(value=state_value)
+                }
+            history[-1]["status"] = "done"
+            yield {
+                chatbot: gr.update(value=history),
+                state: gr.update(value=state_value),
+            }
+        except Exception as e:
+            history[-1]["loading"] = False
+            history[-1]["status"] = "done"
+            history[-1]["content"] = "Failed to respond, please try again."
+            yield {
+                chatbot: gr.update(value=history),
+                state: gr.update(value=state_value)
+            }
+            raise e
+
+    @staticmethod
+    def add_user_message(input_value, state_value):
+        if not state_value["conversation_id"]:
+            random_id = str(uuid.uuid4())
+            history = []
+            state_value["conversation_id"] = random_id
+            state_value["conversations_history"][random_id] = history
+            state_value["conversations"].append({
+                "label": input_value["text"],
+                "key": random_id
+            })
+
+        history = state_value["conversations_history"][
+            state_value["conversation_id"]]
+        history.append({
+            "role":
+            "user",
+            "content": [{
+                "type": "file",
+                "content": [f for f in input_value["files"]]
+            }, {
+                "type": "text",
+                "content": input_value["text"]
+            }]
+        })
+        return gr.update(value=state_value)
+
+    @staticmethod
+    def preprocess_submit(clear_input=True):
+
+        def preprocess_submit_handler(state_value):
+            history = state_value["conversations_history"][
+                state_value["conversation_id"]]
+            return {
+                **({
+                    input:
+                    gr.update(value=None, loading=True) if clear_input else gr.update(loading=True),
+                } if clear_input else {}),
+                conversations:
+                gr.update(active_key=state_value["conversation_id"],
+                          items=list(
+                              map(
+                                  lambda item: {
+                                      **item,
+                                      "disabled":
+                                      True if item["key"] != state_value[
+                                          "conversation_id"] else False,
+                                  }, state_value["conversations"]))),
+                add_conversation_btn:
+                gr.update(disabled=True),
+                clear_btn:
+                gr.update(disabled=True),
+                conversation_delete_menu_item:
+                gr.update(disabled=True),
+                chatbot:
+                gr.update(value=history,
+                          bot_config=bot_config(
+                              disabled_actions=['edit', 'retry', 'delete']),
+                          user_config=user_config(
+                              disabled_actions=['edit', 'delete'])),
+                state:
+                gr.update(value=state_value),
+            }
+
+        return preprocess_submit_handler
+
+    @staticmethod
+    def postprocess_submit(state_value):
+        history = state_value["conversations_history"][
+            state_value["conversation_id"]]
+        return {
+            input:
+            gr.update(loading=False),
+            conversation_delete_menu_item:
+            gr.update(disabled=False),
+            clear_btn:
+            gr.update(disabled=False),
+            conversations:
+            gr.update(items=state_value["conversations"]),
+            add_conversation_btn:
+            gr.update(disabled=False),
+            chatbot:
+            gr.update(value=history,
+                      bot_config=bot_config(),
+                      user_config=user_config()),
+            state:
+            gr.update(value=state_value),
+        }
+
+    @staticmethod
+    def cancel(state_value):
+        history = state_value["conversations_history"][
+            state_value["conversation_id"]]
+        history[-1]["loading"] = False
+        history[-1]["status"] = "done"
+        history[-1]["footer"] = "Chat completion paused"
+        return Gradio_Events.postprocess_submit(state_value)
+
+    @staticmethod
+    def delete_message(state_value, e: gr.EventData):
+        index = e._data["payload"][0]["index"]
+        history = state_value["conversations_history"][
+            state_value["conversation_id"]]
+        history = history[:index] + history[index + 1:]
+
+        state_value["conversations_history"][
+            state_value["conversation_id"]] = history
+
+        return gr.update(value=state_value)
+
+    @staticmethod
+    def edit_message(state_value, chatbot_value, e: gr.EventData):
+        index = e._data["payload"][0]["index"]
+        history = state_value["conversations_history"][
+            state_value["conversation_id"]]
+        history[index]["content"] = chatbot_value[index]["content"]
+        return gr.update(value=state_value)
+
+    @staticmethod
+    def regenerate_message(state_value, e: gr.EventData):
+        index = e._data["payload"][0]["index"]
+        history = state_value["conversations_history"][
+            state_value["conversation_id"]]
+        history = history[:index]
+        state_value["conversations_history"][
+            state_value["conversation_id"]] = history
+        # custom code
+        return gr.update(value=history), gr.update(value=state_value)
+
+    @staticmethod
+    def select_suggestion(input_value, e: gr.EventData):
+        input_value["text"] = input_value["text"][:-1] + e._data["payload"][0]
+        return gr.update(value=input_value)
+
+    @staticmethod
+    def apply_prompt(input_value, e: gr.EventData):
+        input_value["text"] = e._data["payload"][0]["value"]["description"]
+        return gr.update(value=input_value)
+
+    @staticmethod
+    def new_chat(state_value):
+        if not state_value["conversation_id"]:
+            return gr.skip()
+        state_value["conversation_id"] = ""
+        return gr.update(active_key=state_value["conversation_id"]), gr.update(
+            value=None), gr.update(value=state_value)
+
+    @staticmethod
+    def select_conversation(state_value, e: gr.EventData):
+        active_key = e._data["payload"][0]
+        if state_value["conversation_id"] == active_key or (
+                active_key not in state_value["conversations_history"]):
+            return gr.skip()
+        state_value["conversation_id"] = active_key
+        return gr.update(active_key=active_key), gr.update(
+            value=state_value["conversations_history"][active_key]), gr.update(
+                value=state_value)
+
+    @staticmethod
+    def click_conversation_menu(state_value, e: gr.EventData):
+        conversation_id = e._data["payload"][0]["key"]
+        operation = e._data["payload"][1]["key"]
+        if operation == "delete":
+            del state_value["conversations_history"][conversation_id]
+
+            state_value["conversations"] = [
+                item for item in state_value["conversations"]
+                if item["key"] != conversation_id
+            ]
+
+            if state_value["conversation_id"] == conversation_id:
+                state_value["conversation_id"] = ""
+                return gr.update(
+                    items=state_value["conversations"],
+                    active_key=state_value["conversation_id"]), gr.update(
+                        value=None), gr.update(value=state_value)
+            else:
+                return gr.update(
+                    items=state_value["conversations"]), gr.skip(), gr.update(
+                        value=state_value)
+        return gr.skip()
+
+    @staticmethod
+    def clear_conversation_history(state_value):
+        if not state_value["conversation_id"]:
+            return gr.skip()
+        state_value["conversations_history"][
+            state_value["conversation_id"]] = []
+        return gr.update(value=None), gr.update(value=state_value)
+
+    @staticmethod
+    def update_browser_state(state_value):
+
+        return gr.update(value=dict(
+            conversations=state_value["conversations"],
+            conversations_history=state_value["conversations_history"]))
+
+    @staticmethod
+    def apply_browser_state(browser_state_value, state_value):
+        state_value["conversations"] = browser_state_value["conversations"]
+        state_value["conversations_history"] = browser_state_value[
+            "conversations_history"]
+        return gr.update(
+            items=browser_state_value["conversations"]), gr.update(
+                value=state_value)
+
+
+css = """
+#chatbot {
+  height: calc(100vh - 32px - 21px - 16px);
+}
+
+#chatbot .chatbot-conversations {
+  height: 100%;
+  background-color: var(--ms-gr-ant-color-bg-layout);
+}
+
+#chatbot .chatbot-conversations .chatbot-conversations-list {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+#chatbot .chatbot-chat {
+  padding: 32px;
+  height: 100%;
+}
+
+@media (max-width: 768px) {
+  #chatbot .chatbot-chat {
+      padding: 0;
+  }
+}
+
+#chatbot .chatbot-chat .chatbot-chat-messages {
+  flex: 1;
+}
+"""
+
+
+def logo():
+    with antd.Typography.Title(level=1,
+                               elem_style=dict(fontSize=24,
+                                               padding=8,
+                                               margin=0)):
+        with antd.Flex(align="center", gap="small", justify="center"):
+            antd.Image(
+                "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original",
+                preview=False,
+                alt="logo",
+                width=24,
+                height=24)
+            ms.Span("Chatbot")
+
+
+with gr.Blocks(css=css, fill_width=True) as demo:
+    state = gr.State({
+        "conversations_history": {},
+        "conversations": [],
+        "conversation_id": "",
+    })
+
+    with ms.Application(), antdx.XProvider(
+            theme=DEFAULT_THEME, locale=DEFAULT_LOCALE), ms.AutoLoading():
+        with antd.Row(gutter=[20, 20], wrap=False, elem_id="chatbot"):
+            # Left Column
+            with antd.Col(md=dict(flex="0 0 260px", span=24, order=0),
+                          span=0,
+                          order=1,
+                          elem_classes="chatbot-conversations"):
+                with antd.Flex(vertical=True,
+                               gap="small",
+                               elem_style=dict(height="100%")):
+                    # Logo
+                    logo()
+
+                    # New Conversation Button
+                    with antd.Button(value=None,
+                                     color="primary",
+                                     variant="filled",
+                                     block=True) as add_conversation_btn:
+                        ms.Text("New Conversation")
+                        with ms.Slot("icon"):
+                            antd.Icon("PlusOutlined")
+
+                    # Conversations List
+                    with antdx.Conversations(
+                            elem_classes="chatbot-conversations-list",
+                    ) as conversations:
+                        with ms.Slot('menu.items'):
+                            with antd.Menu.Item(
+                                    label="Delete", key="delete", danger=True
+                            ) as conversation_delete_menu_item:
+                                with ms.Slot("icon"):
+                                    antd.Icon("DeleteOutlined")
+            # Right Column
+            with antd.Col(flex=1, elem_style=dict(height="100%")):
+                with antd.Flex(vertical=True, elem_classes="chatbot-chat"):
+                    # Chatbot
+                    chatbot = pro.Chatbot(
+                        elem_classes="chatbot-chat-messages",
+                        welcome_config=ChatbotWelcomeConfig(
+                            variant="borderless",
+                            icon=
+                            "https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp",
+                            title=f"Hello, I'm {model}",
+                            description=
+                            "You can upload images and text to get started.",
+                            prompts=dict(
+                                title="How can I help you today?",
+                                styles={
+                                    "list": {
+                                        "width": '100%',
+                                    },
+                                    "item": {
+                                        "flex": 1,
+                                    },
+                                },
+                                items=[{
+                                    "label":
+                                    "🖋 Make a plan",
+                                    "children": [{
+                                        "description":
+                                        "Help me with a plan to start a business"
+                                    }, {
+                                        "description":
+                                        "Help me with a plan to achieve my goals"
+                                    }, {
+                                        "description":
+                                        "Help me with a plan for a successful interview"
+                                    }]
+                                }, {
+                                    "label":
+                                    "📅 Help me write",
+                                    "children": [{
+                                        "description":
+                                        "Help me write a story with a twist ending"
+                                    }, {
+                                        "description":
+                                        "Help me write a blog post on mental health"
+                                    }, {
+                                        "description":
+                                        "Help me write a letter to my future self"
+                                    }]
+                                }]),
+                        ),
+                        user_config=user_config(),
+                        bot_config=bot_config())
+                    # Input
+                    with antdx.Suggestion(
+                            items=DEFAULT_SUGGESTIONS,
+                            # 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"):
+                            with pro.MultimodalInput(
+                                    placeholder="Enter / to get suggestions",
+                                    upload_config=MultimodalInputUploadConfig(
+                                        upload_button_tooltip=
+                                        "Upload Attachments",
+                                        max_count=6,
+                                        accept="image/*",
+                                        multiple=True)) as input:
+                                with ms.Slot("prefix"):
+                                    # Clear Button
+                                    with antd.Tooltip(
+                                            title="Clear Conversation History"
+                                    ):
+                                        with antd.Button(
+                                                value=None,
+                                                type="text") as clear_btn:
+                                            with ms.Slot("icon"):
+                                                antd.Icon("ClearOutlined")
+
+    # Events Handler
+    if save_history:
+        browser_state = gr.BrowserState(
+            {
+                "conversations_history": {},
+                "conversations": [],
+            },
+            storage_key="ms_chatbot_storage")
+        state.change(fn=Gradio_Events.update_browser_state,
+                     inputs=[state],
+                     outputs=[browser_state])
+
+        demo.load(fn=Gradio_Events.apply_browser_state,
+                  inputs=[browser_state, state],
+                  outputs=[conversations, state])
+
+    add_conversation_btn.click(fn=Gradio_Events.new_chat,
+                               inputs=[state],
+                               outputs=[conversations, chatbot, state])
+    conversations.active_change(fn=Gradio_Events.select_conversation,
+                                inputs=[state],
+                                outputs=[conversations, chatbot, state])
+    conversations.menu_click(fn=Gradio_Events.click_conversation_menu,
+                             inputs=[state],
+                             outputs=[conversations, chatbot, state])
+    chatbot.welcome_prompt_select(fn=Gradio_Events.apply_prompt,
+                                  inputs=[input],
+                                  outputs=[input])
+
+    clear_btn.click(fn=Gradio_Events.clear_conversation_history,
+                    inputs=[state],
+                    outputs=[chatbot, state])
+
+    suggestion.select(fn=Gradio_Events.select_suggestion,
+                      inputs=[input],
+                      outputs=[input])
+    chatbot.delete(fn=Gradio_Events.delete_message,
+                   inputs=[state],
+                   outputs=[state])
+    chatbot.edit(fn=Gradio_Events.edit_message,
+                 inputs=[state, chatbot],
+                 outputs=[state])
+
+    regenerating_event = chatbot.retry(
+        fn=Gradio_Events.regenerate_message,
+        inputs=[state],
+        outputs=[chatbot, state
+                 ]).then(fn=Gradio_Events.preprocess_submit(clear_input=False),
+                         inputs=[state],
+                         outputs=[
+                             input, clear_btn, conversation_delete_menu_item,
+                             add_conversation_btn, conversations, chatbot,
+                             state
+                         ]).then(fn=Gradio_Events.submit,
+                                 inputs=[state],
+                                 outputs=[chatbot, state])
+
+    submit_event = input.submit(
+        fn=Gradio_Events.add_user_message,
+        inputs=[input, state],
+        outputs=[state
+                 ]).then(fn=Gradio_Events.preprocess_submit(clear_input=True),
+                         inputs=[state],
+                         outputs=[
+                             input, clear_btn, conversation_delete_menu_item,
+                             add_conversation_btn, conversations, chatbot,
+                             state
+                         ]).then(fn=Gradio_Events.submit,
+                                 inputs=[state],
+                                 outputs=[chatbot, state])
+    regenerating_event.then(fn=Gradio_Events.postprocess_submit,
+                            inputs=[state],
+                            outputs=[
+                                input, conversation_delete_menu_item,
+                                clear_btn, conversations, add_conversation_btn,
+                                chatbot, state
+                            ])
+    submit_event.then(fn=Gradio_Events.postprocess_submit,
+                      inputs=[state],
+                      outputs=[
+                          input, conversation_delete_menu_item, clear_btn,
+                          conversations, add_conversation_btn, chatbot, state
+                      ])
+    input.cancel(fn=Gradio_Events.cancel,
+                 inputs=[state],
+                 outputs=[
+                     input, conversation_delete_menu_item, clear_btn,
+                     conversations, add_conversation_btn, chatbot, state
+                 ],
+                 cancels=[submit_event, regenerating_event],
+                 queue=False)
+
+if __name__ == "__main__":
+    demo.queue().launch(ssr_mode=False)

layout_templates/chatbot/demos/{app.py → fine_grained_control.py}

@@ -26,7 +26,7 @@ save_history = False
 
 DEFAULT_PROMPTS = [{
     "category":
-    "🖋 Make a plan",
+    "📅 Make a plan",
     "prompts": [
         "Help me with a plan to start a business",
         "Help me with a plan to achieve my goals",
@@ -34,7 +34,7 @@ DEFAULT_PROMPTS = [{
     ]
 }, {
     "category":
-    "📅 Help me write",
+    "🖋 Help me write",
     "prompts": [
         "Help me write a story with a twist ending",
         "Help me write a blog post on mental health",
@@ -155,8 +155,8 @@ class Gradio_Events:
             }
         except Exception as e:
             history[-1]["loading"] = False
-            history[-1]["content"] = ""
-            history[-1]["role"] = "assistant-error"
+            history[-1]["meta"]["end"] = True
+            history[-1]["content"] = "Failed to respond, please try again."
             yield {
                 chatbot: gr.update(items=history),
                 state: gr.update(value=state_value)
@@ -203,9 +203,12 @@ class Gradio_Events:
                     conversation["meta"]["disabled"] = True
             return {
                 **({
-                    sender: gr.update(value=None, loading=True),
-                    attachments: gr.update(value=[]),
-                    attachments_badge: gr.update(dot=False),
+                    sender:
+                    gr.update(value=None, loading=True) if clear_input else gr.update(loading=True),
+                    attachments:
+                    gr.update(value=[]),
+                    attachments_badge:
+                    gr.update(dot=False),
                 } if clear_input else {}),
                 conversations:
                 gr.update(active_key=state_value["conversation_id"],
@@ -824,20 +827,7 @@ with gr.Blocks(css=css, fill_width=True) as demo:
                                                     as_item="delete_btn"):
                                                 with ms.Slot("icon"):
                                                     antd.Icon("DeleteOutlined")
-                            # Error Chatbot Role
-                            with antdx.Bubble.List.Role(
-                                    role="assistant-error",
-                                    placement="start",
-                                    styles=dict(content=dict(
-                                        maxWidth="100%", overflow='auto'))):
-                                with ms.Slot("avatar"):
-                                    with antd.Avatar():
-                                        with ms.Slot("icon"):
-                                            antd.Icon("RobotOutlined")
-                                with ms.Slot("messageRender"):
-                                    antd.Typography.Text(
-                                        "Failed to respond, please try again.",
-                                        type="danger")
+
                     # Sender
                     with antdx.Suggestion(
                             items=DEFAULT_SUGGESTIONS,
@@ -1033,13 +1023,14 @@ with gr.Blocks(css=css, fill_width=True) as demo:
                           sender, conversation_delete_menu_item, clear_btn,
                           conversations, add_conversation_btn, chatbot, state
                       ])
-    sender.cancel(fn=None, cancels=[submit_event, regenerating_event])
     sender.cancel(fn=Gradio_Events.cancel,
                   inputs=[state],
                   outputs=[
                       sender, conversation_delete_menu_item, clear_btn,
                       conversations, add_conversation_btn, chatbot, state
-                  ])
+                  ],
+                  cancels=[submit_event, regenerating_event],
+                  queue=False)
 
 if __name__ == "__main__":
     demo.queue().launch(ssr_mode=False)

requirements.txt

@@ -1,2 +1,2 @@
-modelscope_studio==1.1.7
+modelscope_studio==1.2.1
 openai

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "1.1.7"
+version = "1.2.1"
 description = "A third-party component library based on Gradio."
 readme = "README.md"
 license = "Apache-2.0"
@@ -23,7 +23,7 @@ keywords = [
   'gradio-antdx',
 ]
 # Add dependencies here
-dependencies = ["gradio>=4.0,<6.0"]
+dependencies = ["gradio>=4.43.0,<6.0"]
 classifiers = [
   'Development Status :: 3 - Alpha',
   'License :: OSI Approved :: Apache Software License',
@@ -224,6 +224,8 @@ artifacts = [
   "/backend/modelscope_studio/components/antdx/suggestion/templates",
   "/backend/modelscope_studio/components/antdx/suggestion/item/templates",
   "/backend/modelscope_studio/components/antdx/x_provider/templates",
+  "/backend/modelscope_studio/components/pro/chatbot/templates",
+  "/backend/modelscope_studio/components/pro/multimodal_input/templates",
 ]
 
 [tool.yapfignore]