fix: react slots clone & unexpected style (#56)

.changeset/pink-paws-sleep.md

@@ -0,0 +1,8 @@
+---
+'@modelscope-studio/antdx': patch
+'@modelscope-studio/base': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+fix: react slots clone & unexpected style

backend/modelscope_studio/components/antd/transfer/__init__.py

@@ -119,7 +119,7 @@ def api_info(self) -> dict[str, Any]:
                     },
                 ],
             },
-        },
+        }
 
     def preprocess(
         self, payload: list[float | int | str] | None

docs/app.py

@@ -419,6 +419,9 @@ def get_layout_templates():
     "children": [{
         "label": get_text("Attachments", "Attachments 输入附件"),
         "key": "attachments"
+    }, {
+        "label": get_text("Sender", "Sender 输入框"),
+        "key": "sender"
     }]
 }]
 

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

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

docs/components/antdx/attachments/README.md

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

docs/components/antdx/attachments/demos/combination.py

@@ -17,7 +17,7 @@ def submit(sender_value, attachments_value):
 
 
 with gr.Blocks() as demo:
-    state = gr.State({"open": True})
+    state = gr.State({"open": False})
     with ms.Application():
         with antdx.XProvider():
             antd.Typography.Paragraph(
@@ -31,7 +31,7 @@ def submit(sender_value, attachments_value):
                                 antd.Icon("LinkOutlined")
                 with ms.Slot("header"):
                     with antdx.Sender.Header(title="Attachments",
-                                             open=True,
+                                             open=False,
                                              styles={
                                                  "content": {
                                                      "padding": 0,

docs/components/antdx/attachments/demos/file_card.py

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

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

@@ -11,16 +11,20 @@ def repeat(state_value):
         state_value["repeat"] = state_value["repeat"] + 1
     else:
         state_value["repeat"] = 1
+    repeat_value = state_value["repeat"]
     return gr.update(value=state_value), gr.update(
-        value=f"Repeat {state_value["repeat"]} Times"), gr.update(
-            content=text * state_value["repeat"]), gr.update(content=text * state_value["repeat"])
+        value=f"Repeat {repeat_value} Times"), gr.update(
+            content=text * repeat_value), gr.update(content=text *
+                                                    repeat_value)
 
 
 with gr.Blocks() as demo:
     state = gr.State({"repeat": 1})
     with ms.Application():
         with antdx.XProvider():
-            antd.Typography.Paragraph("Enable typing output by setting the typing prop. If the updated content is a subset of the previous content, it will continue to output, otherwise it will output again.")
+            antd.Typography.Paragraph(
+                "Enable typing output by setting the typing prop. If the updated content is a subset of the previous content, it will continue to output, otherwise it will output again."
+            )
             with antd.Flex(vertical=True, gap="small"):
                 with antdx.Bubble(content=text,
                                   typing=dict(step=2, interval=50)) as bubble1:

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

@@ -0,0 +1,9 @@
+# Sender
+
+A input component for chat. See [Ant Design X](https://x.ant.design/components/sender/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="submit_type" title="Submit Type"></demo>
+<demo name="header_panel" title="Header Panel"></demo>

docs/components/antdx/sender/README.md

@@ -0,0 +1,9 @@
+# Sender
+
+A input component for chat. See [Ant Design X](https://x.ant.design/components/sender/) for more information.
+
+## Examples
+
+<demo name="basic"></demo>
+<demo name="submit_type" title="Submit Type"></demo>
+<demo name="header_panel" title="Header Panel"></demo>

docs/components/antdx/sender/app.py

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

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

@@ -0,0 +1,27 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def submit():
+    return gr.update(loading=True, read_only=True)
+
+
+def cancel():
+    return gr.update(loading=False, read_only=False)
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            with antd.Flex(vertical=True, gap="middle"):
+                sender = antdx.Sender()
+                antdx.Sender("Force as loading", loading=True, read_only=True)
+                antdx.Sender("Set to disabled", disabled=True)
+
+            sender.submit(fn=submit, outputs=[sender])
+            sender.cancel(fn=cancel, outputs=[sender])
+
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/antdx/sender/demos/header_panel.py

@@ -0,0 +1,77 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def paste_file(attachments_value, e: gr.EventData):
+    return gr.update(value=attachments_value + e._data["payload"][0])
+
+
+def toggle_open(state_value):
+    state_value["open"] = not state_value["open"]
+    return gr.update(open=state_value["open"]), gr.update(value=state_value)
+
+
+def submit(sender_value, attachments_value):
+    print(sender_value, attachments_value)
+    return gr.update(value=None), gr.update(value=None)
+
+
+with gr.Blocks() as demo:
+    state = gr.State({"open": False})
+    with ms.Application():
+        with antdx.XProvider():
+            antd.Typography.Paragraph(
+                "Use header to customize the file upload example and paste image to upload files with Attachments."
+            )
+            with antdx.Sender(placeholder="← Click to open") as sender:
+                with ms.Slot("prefix"):
+                    with antd.Button(value=None, type="text") as prefix_button:
+                        with ms.Slot("icon"):
+                            antd.Icon("LinkOutlined")
+                with ms.Slot("header"):
+                    with antdx.Sender.Header(title="Attachments",
+                                             open=False,
+                                             styles={
+                                                 "content": {
+                                                     "padding": 0,
+                                                 },
+                                             }) as sender_header:
+                        with antdx.Attachments() as attachments:
+                            with ms.Slot(
+                                    "placeholder.title",
+                                    params_mapping=
+                                    """(type) => type === 'drop' ? 'Drop file here' : 'Upload files'"""
+                            ):
+                                ms.Span()
+                            with ms.Slot(
+                                    "placeholder.description",
+                                    params_mapping=
+                                    "(type) => ({ style: { display: type === 'drop'? 'none' : undefined } })"
+                            ):
+                                ms.Span(
+                                    "Click or drag files to this area to upload"
+                                )
+                            with ms.Slot(
+                                    "placeholder.icon",
+                                    params_mapping=
+                                    "(type) => ({ style: { display: type === 'drop'? 'none' : undefined } })"
+                            ):
+                                antd.Icon("CloudUploadOutlined")
+
+            sender_header.open_change(fn=toggle_open,
+                                      inputs=[state],
+                                      outputs=[sender_header, state])
+            prefix_button.click(fn=toggle_open,
+                                inputs=[state],
+                                outputs=[sender_header, state])
+            sender.submit(fn=submit,
+                          inputs=[sender, attachments],
+                          outputs=[sender, attachments])
+            sender.paste_file(fn=paste_file,
+                              inputs=[attachments],
+                              outputs=[attachments])
+
+if __name__ == "__main__":
+    demo.queue().launch()

docs/components/antdx/sender/demos/submit_type.py

@@ -0,0 +1,27 @@
+import gradio as gr
+import modelscope_studio.components.antd as antd
+import modelscope_studio.components.antdx as antdx
+import modelscope_studio.components.base as ms
+
+
+def submit():
+    return gr.update(loading=True, read_only=True)
+
+
+def cancel():
+    return gr.update(loading=False, read_only=False)
+
+
+with gr.Blocks() as demo:
+    with ms.Application():
+        with antdx.XProvider():
+            with antd.Flex(vertical=True, gap="middle"):
+                sender = antdx.Sender(
+                    submit_type="shiftEnter",
+                    placeholder="Press Shift + Enter to send message")
+
+            sender.submit(fn=submit, outputs=[sender])
+            sender.cancel(fn=cancel, outputs=[sender])
+
+if __name__ == "__main__":
+    demo.queue().launch()

frontend/antdx/sender/sender.tsx

@@ -13,7 +13,7 @@ export const Sender = sveltify<
     children?: React.ReactNode;
     setSlotParams: SetSlotParams;
     upload: (files: File[]) => Promise<FileData[]>;
-    onPasteFile?: (value: FileData[]) => void;
+    onPasteFile?: (value: string[]) => void;
     onValueChange: (value: string) => void;
   },
   ['actions', 'header', 'prefix']
@@ -47,7 +47,7 @@ export const Sender = sveltify<
           }}
           onPasteFile={async (file) => {
             const urls = await upload(Array.isArray(file) ? file : [file]);
-            onPasteFile?.(urls);
+            onPasteFile?.(urls.map((url) => url.path));
           }}
           header={
             slots.header ? <ReactSlot slot={slots.header} /> : props.header

frontend/base/markdown/index.less

@@ -2,6 +2,8 @@
   position: relative;
   max-width: 100%;
 
+  @import url('./prism.less');
+
   .ms-gr-markdown-copy {
     position: absolute;
     top: 0;

frontend/base/markdown/markdown.tsx

@@ -12,7 +12,6 @@ import { bind_copy_event, copy_to_clipboard, create_marked } from './utils';
 
 import 'katex/dist/katex.min.css';
 import './index.less';
-import './prism.less';
 
 function escapeRegExp(string: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');