feat: WebSandbox

app.py

@@ -149,6 +149,15 @@ pro_menu_items = [{
         "label": get_text("MultimodalInput", "MultimodalInput 多模态输入框"),
         "key": "multimodal_input"
     }]
+}, {
+    "label":
+    get_text("Interactive Preview", "交互式预览"),
+    "type":
+    "group",
+    "children": [{
+        "label": get_text("WebSandbox", "WebSandbox 网页沙盒"),
+        "key": "web_sandbox"
+    }]
 }]
 
 antd_menu_items = [{

components/antd/breadcrumb/demos/basic.py

@@ -9,10 +9,10 @@ with gr.Blocks() as demo:
                 antd.Breadcrumb.Item(title="Ant Design")
                 with antd.Breadcrumb.Item():
                     with ms.Slot("title"):
-                        antd.Button(type="link", href="#")
+                        antd.Button("Link", type="link", href="#")
                 with antd.Breadcrumb.Item():
                     with ms.Slot("title"):
-                        antd.Button(type="link", href="General")
+                        antd.Button("General", type="link", href="#")
                     with ms.Slot("menu.items"):
                         with antd.Menu.Item(key="1"):
                             with ms.Slot("label"):

components/base/application/README-zh_CN.md

@@ -18,3 +18,38 @@
 <demo name="theme_adaptation" title="根据用户界面主题返回不同权重内容"></demo>
 
 <demo name="custom_event" title="发送自定义事件"></demo>
+
+## API
+
+### 属性
+
+| 属性  | 类型                | 默认值 | 描述     |
+| ----- | ------------------- | ------ | -------- |
+| value | ApplicationPageData | None   | 页面数据 |
+
+### 事件
+
+| 事件                              | 描述                                                                         |
+| --------------------------------- | ---------------------------------------------------------------------------- |
+| `ms.Application.mount(fn, ···)`   | 当页面加载时触发。                                                           |
+| `ms.Application.resize(fn, ···)`  | 当页面尺寸变化时触发。                                                       |
+| `ms.Application.unmount(fn, ···)` | 当页面卸载时触发。                                                           |
+| `ms.Application.custom(fn, ···)`  | 当用户在 JavaScript 中调用`window.ms_globals.dispatch`抛出自定义事件时触发。 |
+
+### 类型
+
+```python
+
+class ApplicationPageScreenData(GradioModel):
+    width: float
+    height: float
+    scrollX: float
+    scrollY: float
+
+
+class ApplicationPageData(GradioModel):
+    screen: ApplicationPageScreenData
+    language: str
+    theme: str
+    userAgent: str
+```

components/base/application/README.md

@@ -18,3 +18,38 @@ In addition, this component provides the `custom` event, you can send events to
 <demo name="theme_adaptation" title="Return different weighted content based on user interface theme"></demo>
 
 <demo name="custom_event" title="Send custom events"></demo>
+
+## API
+
+### Props
+
+| Attribute | Type                | Default Value | Description |
+| --------- | ------------------- | ------------- | ----------- |
+| value     | ApplicationPageData | None          | Page data   |
+
+### 事件
+
+| Event                             | Description                                                                                         |
+| --------------------------------- | --------------------------------------------------------------------------------------------------- |
+| `ms.Application.mount(fn, ···)`   | Triggered when the page is mounted.                                                                 |
+| `ms.Application.resize(fn, ···)`  | Triggered when the page size changes.                                                               |
+| `ms.Application.unmount(fn, ···)` | Triggered when the page is unmounted.                                                               |
+| `ms.Application.custom(fn, ···)`  | Triggered when the user throws a custom event by calling `window.ms_globals.dispatch` in Javascript |
+
+### Types
+
+```python
+
+class ApplicationPageScreenData(GradioModel):
+    width: float
+    height: float
+    scrollX: float
+    scrollY: float
+
+
+class ApplicationPageData(GradioModel):
+    screen: ApplicationPageScreenData
+    language: str
+    theme: str
+    userAgent: str
+```

components/base/each/README-zh_CN.md

@@ -22,7 +22,9 @@
 
 <demo name="use_context_value" title="使用 context_value 参数"></demo>
 
-### API
+## API
+
+### 属性
 
 | 属性          | 类型 | 默认值 | 描述             |
 | ------------- | ---- | ------ | ---------------- |

components/base/each/README.md

@@ -21,7 +21,9 @@ If you need to add certain unified properties to all list item components, you c
 
 <demo name="use_context_value" title="Using the context_value Parameter"></demo>
 
-### API
+## API
+
+### Props
 
 | Attribute     | Type | Default Value | Description                   |
 | ------------- | ---- | ------------- | ----------------------------- |

components/base/filter/README-zh_CN.md

@@ -14,7 +14,7 @@
 <demo name="use_as_item" title="使用 as_item 参数"></demo>
 <demo name="use_params_mapping" title="使用 params_mapping 参数"></demo
 
-### API
+## API
 
 | 属性           | 类型 | 默认值 | 描述                                                                                         |
 | -------------- | ---- | ------ | -------------------------------------------------------------------------------------------- |

components/base/filter/README.md

@@ -14,7 +14,7 @@ If no parameters are provided, this component will block the context transmissio
 <demo name="use_as_item" title="Using the as_item Parameter"></demo>
 <demo name="use_params_mapping" title="Using the params_mapping Parameter"></demo>
 
-### API
+## API
 
 | Property       | Type | Default Value | Description                                                                                                                                  |
 | -------------- | ---- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |

components/base/slot/README-zh_CN.md

@@ -8,7 +8,7 @@
 
 <demo name="basic"></demo>
 
-### API
+## API
 
 | 属性           | 类型 | 默认值 | 描述                                                                                                                       |
 | -------------- | ---- | ------ | -------------------------------------------------------------------------------------------------------------------------- |

components/base/slot/README.md

@@ -8,7 +8,7 @@ The slots of components in `modelscope_studio` can be viewed by getting the `SLO
 
 <demo name="basic"></demo>
 
-### API
+## API
 
 | Attribute      | Type | Default Value | Description                                                                                                                                                                                                                    |
 | -------------- | ---- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |

components/pro/chatbot/README-zh_CN.md

@@ -38,9 +38,9 @@
 
 <demo name="thinking"  position="bottom" collapsible="true"></demo>
 
-### API
+## API
 
-#### 属性
+### 属性
 
 | 属性                           | 类型                                                              | 默认值 | 描述                                                                                                                                |
 | ------------------------------ | ----------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------- |
@@ -56,7 +56,7 @@
 | max_height                     | `int \| float \| str \| None`                                     | None   | 组件的最大高度，如果传递的是数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。                                       |
 | min_height                     | `int \| float \| str \| None`                                     | None   | 组件的最小高度，如果传递的是数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。                                       |
 
-#### 事件
+### 事件
 
 | 事件                                         | 描述                                 |
 | -------------------------------------------- | ------------------------------------ |
@@ -127,6 +127,11 @@ class ChatbotMarkdownConfig(GradioModel):
                 "right": "$$",
                 "display": True
             },
+            {
+                "left": "$",
+                "right": "$",
+                "display": False
+            },
             {
                 "left": "\\(",
                 "right": "\\)",

components/pro/chatbot/README.md

@@ -37,7 +37,7 @@ The `message` object includes all configurations from `bot_config` and `user_con
 
 <demo name="thinking"  position="bottom" collapsible="true"></demo>
 
-### API
+## API
 
 ### Props
 
@@ -55,7 +55,7 @@ The `message` object includes all configurations from `bot_config` and `user_con
 | 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
+### Events
 
 | Event                                        | Description                                             |
 | -------------------------------------------- | ------------------------------------------------------- |
@@ -126,6 +126,11 @@ class ChatbotMarkdownConfig(GradioModel):
                 "right": "$$",
                 "display": True
             },
+            {
+                "left": "$",
+                "right": "$",
+                "display": False
+            },
             {
                 "left": "\\(",
                 "right": "\\)",

components/pro/multimodal_input/README-zh_CN.md

@@ -24,19 +24,21 @@
 
 ### 属性
 
-| 属性          | 类型                                          | 默认值  | 描述                                                   |
-| ------------- | --------------------------------------------- | ------- | ------------------------------------------------------ |
-| 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    | 文件上传配置。                                         |
+| 属性          | 类型                                                     | 默认值           | 描述                                                                            |
+| ------------- | -------------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------- |
+| value         | `dict \| MultimodalInputValue \| None`                   | None             | 显示的默认值，格式为`{ "text":"", "files":[] }`。                               |
+| loading       | `bool \| None`                                           | None             | 输入框是否处处于加载状态，此时可以触发 `cancel` 事件。                          |
+| 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`事件的方式。                                                  |
+| placeholder   | `str \| None`                                            | None             | 输入框的提示信息。                                                              |
+| disabled      | `bool \| None`                                           | None             | 是否禁用。                                                                      |
+| upload_config | `MultimodalInputUploadConfig \| dict \| None`            | None             | 文件上传配置。                                                                  |
 
 ### 插槽
 
 ```python
-SLOTS=["prefix"]
+SLOTS=['actions', "prefix", 'footer', 'header']
 ```
 
 ### 类型

components/pro/multimodal_input/README.md

@@ -24,19 +24,21 @@ 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. |
-| 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.                                                                  |
+| 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.                                                                         |
 
 ### Slots
 
 ```python
-SLOTS = ["prefix"]
+SLOTS=['actions', "prefix", 'footer', 'header']
 ```
 
 ### Types
@@ -102,5 +104,4 @@ class MultimodalInputUploadConfig(GradioModel):
 class MultimodalInputValue(GradioModel):
     files: Optional[ListFiles] = None
     text: Optional[str] = None
-
 ```

components/pro/web_sandbox/README-zh_CN.md

@@ -0,0 +1,64 @@
+# WebSandbox
+
+前端代码沙箱组件，能够将`React`或`HTML`类型的前端代码在页面编译并预览。
+
+## 示例
+
+### 预览 React 代码
+
+当`template`为`react`时，会自动在`imports`参数中添加以下依赖，当需要特定的某个 React 版本时，可以通过覆盖对应的 key 进行修改：
+
+```json
+{
+  "react": "https://esm.sh/react",
+  "react/": "https://esm.sh/react/",
+  "react-dom": "https://esm.sh/react-dom",
+  "react-dom/": "https://esm.sh/react-dom/"
+}
+```
+
+<demo name="react"></demo>
+
+### 预览 HTML 代码
+
+<demo name="html"></demo>
+
+### 处理错误
+
+<demo name="error_handling"></demo>
+
+## API 
+
+### 属性
+
+| 属性                 | 类型                                     | 默认值  | 描述                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| -------------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value                | `Dict[str, Union[str, SandboxFileData]]` | None    | 传入 Sandbox 的文件集合。当`template`为`react`时，`['index.tsx', 'index.jsx', 'index.ts', 'index.js']` 为默认的入口文件，当`template`为`html`时，`['index.html']` 为默认的入口文件。你也可以通过对象的形式填写`is_entry`属性手动指定入口文件。                                                                                                                                                                                                             |
+| template             | `Literal['react', 'html']`               | 'react' | Sandbox 渲染的模板类型。                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| show_render_error    | `bool`                                   | True    | 是否抛出渲染错误提示。                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| show_compile_error   | `bool`                                   | True    | 是否展示编译失败样式。                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| compile_error_render | `str \| None`                            | None    | 自定义编译失败样式，传入类型为 Javascript 的函数字符串。                                                                                                                                                                                                                                                                                                                                                                                                   |
+| imports              | `Dict[str, str]`                         | None    | 对应 importmap 中的 imports 字段，见 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap)，可用于添加在线的前端依赖模块。 `template` 为 `react` 时会自动添加以下依赖，当需要特定的某个 React 版本时，可以通过覆盖对应的 key 进行修改： `{   "react": "https://esm.sh/react",   "react/": "https://esm.sh/react/",   "react-dom": "https://esm.sh/react-dom",   "react-dom/": "https://esm.sh/react-dom/" }`。 |
+| height               | `str \| float \| int`                    | 400     | 组件的高度，如果值为数字，则以像素为单位指定，如果传递的是字符串，则以 CSS 单位指定。                                                                                                                                                                                                                                                                                                                                                                      |
+
+### 事件
+
+| 事件                                      | 描述                        |
+| ----------------------------------------- | --------------------------- |
+| `pro.WebSandbox.compile_success(fn, ···)` | 当 Sandbox 编译成功时触发。 |
+| `pro.WebSandbox.compile_error(fn, ···)`   | 当 Sandbox 编译失败时触发。 |
+| `pro.WebSandbox.render_error(fn, ···)`    | 当 Sandbox 渲染抛错时触发。 |
+
+### 插槽
+
+```python
+SLOTS=['compileErrorRender']
+```
+
+### 类型
+
+```python
+class SandboxFileData(TypedDict):
+    code: str
+    is_entry: Optional[bool]
+```

components/pro/web_sandbox/README.md

@@ -0,0 +1,64 @@
+# WebSandbox
+
+A frontend code sandbox component that compiles and previews `React` or `HTML` code in the page.
+
+## Examples
+
+### React Code Preview
+
+When `template` is set to `react`, the following dependencies will be automatically added to the `imports` parameter. When a specific React version is needed, you can override the corresponding keys:
+
+```json
+{
+  "react": "https://esm.sh/react",
+  "react/": "https://esm.sh/react/",
+  "react-dom": "https://esm.sh/react-dom",
+  "react-dom/": "https://esm.sh/react-dom/"
+}
+```
+
+<demo name="react"></demo>
+
+### HTML Code Preview
+
+<demo name="html"></demo>
+
+### Error Handling
+
+<demo name="error_handling"></demo>
+
+## API
+
+### Props
+
+| Attribute            | Type                                     | Default Value | Description                                                                                                                                                                                                                                                                                                       |
+| -------------------- | ---------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| value                | `Dict[str, Union[str, SandboxFileData]]` | None          | Files collection passed to the Sandbox. When `template` is `react`, `['index.tsx', 'index.jsx', 'index.ts', 'index.js']` are the default entry files. When `template` is `html`, `['index.html']` is the default entry file. You can also manually specify the entry file by setting the `is_entry` property.     |
+| template             | `Literal['react', 'html']`               | 'react'       | Template type for Sandbox rendering.                                                                                                                                                                                                                                                                              |
+| show_render_error    | `bool`                                   | True          | Whether to show rendering error messages.                                                                                                                                                                                                                                                                         |
+| show_compile_error   | `bool`                                   | True          | Whether to show compilation failure styles.                                                                                                                                                                                                                                                                       |
+| compile_error_render | `str \| None`                            | None          | Custom compilation failure style, passed as a JavaScript function string.                                                                                                                                                                                                                                         |
+| imports              | `Dict[str, str]`                         | None          | Corresponds to the imports field in importmap, see [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap), used for adding online frontend dependencies. When `template` is `react`, React-related dependencies are automatically added as shown in the example above. |
+| height               | `str \| float \| int`                    | 400           | Height of the component. If a number is passed, it's specified in pixels; if a string is passed, it's specified in CSS units.                                                                                                                                                                                     |
+
+### Events
+
+| Event                                     | Description                                       |
+| ----------------------------------------- | ------------------------------------------------- |
+| `pro.WebSandbox.compile_success(fn, ···)` | Triggered when Sandbox compilation succeeds.      |
+| `pro.WebSandbox.compile_error(fn, ···)`   | Triggered when Sandbox compilation fails.         |
+| `pro.WebSandbox.render_error(fn, ···)`    | Triggered when Sandbox rendering throws an error. |
+
+### Slots
+
+```python
+SLOTS=['compileErrorRender']
+```
+
+### Types
+
+```python
+class SandboxFileData(TypedDict):
+    code: str
+    is_entry: Optional[bool]
+```

components/pro/web_sandbox/app.py

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

components/pro/web_sandbox/demos/error_handling.py

@@ -0,0 +1,28 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    antd.Divider("Render Error")
+    pro.WebSandbox(value={
+        "index.tsx":
+        """
+export default function App() {
+  return <button onClick={() => {
+    throw new Error('Test Error');
+  } }>Click to throw error</button>;
+}
+"""
+    },
+                   template="react")
+    antd.Divider("Compile Error")
+    pro.WebSandbox(value={}, template="react")
+    antd.Divider("Custom Compile Error Render")
+    with pro.WebSandbox(value={}, template="react"):
+        with ms.Slot("compileErrorRender",
+                     params_mapping="(message) => ({ sub_title: message })"):
+            antd.Result(status="error", title="Compile Error")
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/web_sandbox/demos/html.py

@@ -0,0 +1,112 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    pro.WebSandbox(
+        value={
+            "./index.html":
+            """<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TODO List</title>
+</head>
+<body>
+    <div class="todo-container">
+        <h1>TODO List</h1>
+        <input type="text" id="taskInput" placeholder="Add a new task...">
+        <button id="addButton">Add Task</button>
+        <ul id="taskList"></ul>
+    </div>
+
+    <script type="module">
+        import "./index.css";
+        function addTask() {
+            const taskInput = document.getElementById('taskInput');
+            const taskText = taskInput.value.trim();
+            if (taskText === '') return;
+
+            const taskList = document.getElementById('taskList');
+            const li = document.createElement('li');
+            li.textContent = taskText;
+
+            const deleteButton = document.createElement('button');
+            deleteButton.textContent = 'Delete';
+            deleteButton.onclick = function() {
+                taskList.removeChild(li);
+            };
+
+            li.appendChild(deleteButton);
+            taskList.appendChild(li);
+
+            taskInput.value = '';
+        }
+        document.getElementById('addButton').onclick = addTask;
+    </script>
+</body>
+</html>""",
+            "./index.css":
+            """body {
+            font-family: Arial, sans-serif;
+            background-color: #2c3e50;
+            color: #ecf0f1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .todo-container {
+            background-color: #34495e;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            width: 300px;
+        }
+        h1 {
+            text-align: center;
+            color: #ecf0f1;
+        }
+        input[type="text"] {
+            width: calc(100% - 22px);
+            padding: 10px;
+            margin-bottom: 10px;
+            border: none;
+            border-radius: 3px;
+            background-color: #ecf0f1;
+            color: #2c3e50;
+        }
+        ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        li {
+            background-color: #2c3e50;
+            margin-bottom: 5px;
+            padding: 10px;
+            border-radius: 3px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        button {
+            background-color: #e74c3c;
+            color: #ecf0f1;
+            border: none;
+            padding: 5px 10px;
+            border-radius: 3px;
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #c0392b;
+        }"""
+        },
+        template="html",
+        height=600,
+    )
+
+if __name__ == "__main__":
+    demo.queue().launch()

components/pro/web_sandbox/demos/react.py

@@ -0,0 +1,170 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.base as ms
+import modelscope_studio.components.pro as pro
+
+with gr.Blocks() as demo, ms.Application(), antd.ConfigProvider():
+    pro.WebSandbox(value={
+        "./index.tsx":
+        """import Demo from './demo.tsx'
+import "@tailwindcss/browser"
+
+export default Demo
+""",
+        "./demo.tsx":
+        """import { useState, useEffect } from 'react';
+
+export default function App() {
+  const [messages, setMessages] = useState([
+    { id: 1, sender: 'ai', content: 'Hello! I am your AI assistant. How can I help you today?', timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) },
+  ]);
+  const [inputValue, setInputValue] = useState('');
+  const [isTyping, setIsTyping] = useState(false);
+  const [darkMode, setDarkMode] = useState(false);
+
+  // Simulate AI typing effect
+  const handleSendMessage = () => {
+    if (inputValue.trim() === '') return;
+
+    const userMessage = {
+      id: messages.length + 1,
+      sender: 'user',
+      content: inputValue,
+      timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+    };
+
+    setMessages((prev) => [...prev, userMessage]);
+    setInputValue('');
+    setIsTyping(true);
+
+    // Simulate AI response after delay
+    setTimeout(() => {
+      const aiResponse = {
+        id: messages.length + 2,
+        sender: 'ai',
+        content: 'I am processing your request and will respond shortly.',
+        timestamp: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+      };
+      setMessages((prev) => [...prev, aiResponse]);
+      setIsTyping(false);
+    }, 1500);
+  };
+
+  // Handle Enter key press
+  const handleKeyPress = (e) => {
+    if (e.key === 'Enter') {
+      handleSendMessage();
+    }
+  };
+
+  // Toggle dark mode
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+  };
+
+  useEffect(() => {
+    const app = document.documentElement;
+    if (darkMode) {
+      app.classList.add('dark');
+    } else {
+      app.classList.remove('dark');
+    }
+  }, [darkMode]);
+
+  return (
+    <div className={"min-h-screen flex flex-col transition-colors duration-300 " + (darkMode ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-900')}>
+      {/* Header */}
+      <header className={"px-6 py-4 shadow-md flex justify-between items-center " + (darkMode ? 'bg-gray-800' : 'bg-white')}>
+        <div className="flex items-center space-x-2">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" className="text-blue-500">
+            <path d="M12 4L4 8V16L12 20L20 16V8L12 4Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            <path d="M12 15L9 12H15L12 9V15Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+          </svg>
+          <h1 className="text-xl font-bold">Chatbot</h1>
+        </div>
+        <button onClick={toggleDarkMode} className="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+          {darkMode ? (
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="12" cy="12" r="5" stroke="white" strokeWidth="2"/>
+              <path d="M12 2V4M12 20V22M4 12H2M6.31 6.31L4.9 4.9M17.69 6.31L19.1 4.9M6.31 17.69L4.9 19.1M17.69 17.69L19.1 19.1" stroke="white" strokeWidth="2" strokeLinecap="round"/>
+            </svg>
+          ) : (
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+          )}
+        </button>
+      </header>
+
+      {/* Chat Area */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-4">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={"flex " + (message.sender === 'user' ? 'justify-end' : 'justify-start')}
+          >
+            <div
+              className={"max-w-xs sm:max-w-md px-4 py-2 rounded-lg " +
+                (message.sender === 'user'
+                  ? 'bg-blue-500 text-white rounded-br-none'
+                  : (darkMode ? 'bg-gray-700' : 'bg-white') + ' rounded-bl-none')
+              }
+            >
+              <p>{message.content}</p>
+              <span className={"text-xs mt-1 block " + (message.sender === 'user' ? 'text-blue-100' : 'text-gray-500')}>
+                {message.timestamp}
+              </span>
+            </div>
+          </div>
+        ))}
+
+        {isTyping && (
+          <div className="flex justify-start">
+            <div className={"px-4 py-2 rounded-lg " + (darkMode ? 'bg-gray-700' : 'bg-white') + ' rounded-bl-none'}>
+              <div className="flex space-x-1">
+                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '0ms' }}></span>
+                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '150ms' }}></span>
+                <span className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{ animationDelay: '300ms' }}></span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Input Area */}
+      <div className={"p-4 border-t " + (darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200')}>
+        <div className="flex space-x-2">
+          <input
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder="Type a message..."
+            className={"flex-1 px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 " +
+              (darkMode ? 'bg-gray-700 text-white placeholder-gray-400' : 'bg-gray-100 text-gray-900 placeholder-gray-500')
+            }
+          />
+          <button
+            onClick={handleSendMessage}
+            disabled={inputValue.trim() === ''}
+            className={"px-4 py-2 rounded-lg font-medium text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors " +
+              (inputValue.trim() === '' ? 'opacity-50 cursor-not-allowed' : '')
+            }
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}"""
+    },
+                   height=600,
+                   template="react",
+                   imports={
+                       "@tailwindcss/browser":
+                       "https://esm.sh/@tailwindcss/browser",
+                   })
+
+if __name__ == "__main__":
+    demo.queue().launch()

layout_templates/chatbot/demos/basic.py

@@ -431,6 +431,9 @@ css = """
 #chatbot .chatbot-conversations .chatbot-conversations-list {
   padding-left: 0;
   padding-right: 0;
+  flex: 1;
+  height: 0;
+  overflow: auto;
 }
 
 #chatbot .chatbot-chat {
@@ -479,6 +482,7 @@ with gr.Blocks(css=css, fill_width=True) as demo:
             with antd.Col(md=dict(flex="0 0 260px", span=24, order=0),
                           span=0,
                           order=1,
+                          elem_style=dict(width=0),
                           elem_classes="chatbot-conversations"):
                 with antd.Flex(vertical=True,
                                gap="small",

layout_templates/chatbot/demos/fine_grained_control.py

@@ -541,6 +541,7 @@ with gr.Blocks(css=css, fill_width=True) as demo:
             with antd.Col(md=dict(flex="0 0 260px", span=24, order=0),
                           span=0,
                           order=1,
+                          elem_style=dict(width=0),
                           elem_classes="chatbot-conversations"):
                 with antd.Flex(vertical=True,
                                gap="small",

requirements.txt

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

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "1.2.3"
+version = "1.3.0"
 description = "A third-party component library based on Gradio."
 readme = "README.md"
 license = "Apache-2.0"