feat: update docs

components/pro/multimodal_input/README-zh_CN.md

@@ -16,6 +16,10 @@
 
 <demo name="extra_button"></demo>
 
+### Block 模式
+
+<demo name="block_mode"></demo>
+
 ### 上传配置
 
 <demo name="upload_config"></demo>
@@ -28,6 +32,7 @@
 | ------------- | -------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------- |
 | value         | `dict \| MultimodalInputValue \| None`                   | None             | 显示的默认值，格式为`{ "text":"", "files":[] }`。                               |
 | loading       | `bool \| None`                                           | None             | 输入框是否处处于加载状态，此时可以触发 `cancel` 事件。                          |
+| mode          | `inline \| block`                                        | 'inline'         | 输入框的渲染模式， 值为 `block` 时会将输入框与提交按钮分开渲染。                |
 | auto_size     | `bool \| { minRows?: number; maxRows?: number } \| None` | { "maxRows": 8 } | 自适应内容高度，可设置为 True \| False 或对象：{ "minRows": 2, "maxRows": 6 }。 |
 | read_only     | `bool \| None`                                           | None             | 输入框是否为只读状态。                                                          |
 | submit_type   | `Literal['enter', 'shiftEnter'] \| None`                 | 'enter'          | 输入框触发`submit`事件的方式。                                                  |

components/pro/multimodal_input/README.md

@@ -16,6 +16,10 @@ A multimodal input component based on [Ant Design X](https://x.ant.design), supp
 
 <demo name="extra_button"></demo>
 
+### Block Mode
+
+<demo name="block_mode"></demo>
+
 ### Upload Configuration
 
 <demo name="upload_config"></demo>
@@ -24,16 +28,17 @@ A multimodal input component based on [Ant Design X](https://x.ant.design), supp
 
 ### 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.        |
-| auto_size     | `bool \| { minRows?: number; maxRows?: number } \| None` | { "maxRows": 8 } | Height auto size feature, can be set to True \| False or an object { "minRows": 2, "maxRows": 6 }. |
-| 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.                                                                            |
-| disabled      | `bool \| None`                                           | None             | Whether to disable.                                                                                |
-| upload_config | `MultimodalInputUploadConfig \| dict \| None`            | None             | File upload configuration.                                                                         |
+| 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.                     |
+| mode          | `inline \| block`                                        | 'inline'         | The rending mode of the input box. If `block`, the input box and the submit button will be rendered separately. |
+| auto_size     | `bool \| { minRows?: number; maxRows?: number } \| None` | { "maxRows": 8 } | Height auto size feature, can be set to True \| False or an object { "minRows": 2, "maxRows": 6 }.              |
+| 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.                                                                                         |
+| disabled      | `bool \| None`                                           | None             | Whether to disable.                                                                                             |
+| upload_config | `MultimodalInputUploadConfig \| dict \| None`            | None             | File upload configuration.                                                                                      |
 
 ### Slots
 

components/pro/multimodal_input/demos/block_mode.py

@@ -0,0 +1,80 @@
+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(
+                mode="block",
+                auto_size=dict(minRows=2, maxRows=6),
+                upload_config=dict(
+                    upload_button_tooltip="Attachments")) as input:
+            with ms.Slot("footer"):
+                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

@@ -28,6 +28,10 @@ with gr.Blocks() as demo, ms.Application(), antdx.XProvider():
         antd.Divider("Other Sources")
         pro.MultimodalInput(upload_config=MultimodalInputUploadConfig(
             allow_speech=True, allow_paste_file=True))
+        pro.MultimodalInput(mode="block",
+                            auto_size=dict(minRows=2, maxRows=6),
+                            upload_config=MultimodalInputUploadConfig(
+                                allow_speech=True, allow_paste_file=True))
 
 if __name__ == "__main__":
     demo.queue().launch()

requirements.txt

@@ -1,2 +1,2 @@
-modelscope_studio==1.3.0
+modelscope_studio==1.3.1
 openai

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "1.3.0"
+version = "1.3.1"
 description = "A third-party component library based on Gradio."
 readme = "README.md"
 license = "Apache-2.0"
@@ -226,6 +226,7 @@ artifacts = [
   "/backend/modelscope_studio/components/antdx/x_provider/templates",
   "/backend/modelscope_studio/components/pro/chatbot/templates",
   "/backend/modelscope_studio/components/pro/multimodal_input/templates",
+  "/backend/modelscope_studio/components/pro/web_sandbox/templates",
 ]
 
 [tool.yapfignore]