feat: integrate antdx (#48)

* feat: integrate antdx

* feat(antdx): bubble

* fix: build mode

* feat(antdx): welcome & prompts

* feat(antdx): thought-chain

* feat(antdx): sender, attachments, suggestion

* feat(antdx): x-provider

* fix: card meta

* fix: children

* chore: add changeset

Author: Col0ring

.changeset/brown-trains-flow.md

@@ -0,0 +1,7 @@
+---
+'@modelscope-studio/antd': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+fix: missing component children rendering

.changeset/funny-singers-exercise.md

@@ -0,0 +1,7 @@
+---
+'@modelscope-studio/antdx': minor
+'@modelscope-studio/frontend': minor
+'modelscope_studio': minor
+---
+
+feat: integrate antdx

backend/modelscope_studio/__init__.py

@@ -1,4 +1,5 @@
 from .components.antd.components import *
+from .components.antdx.components import *
 from .components.base import *
 from .components.legacy.components import *
 from .external import load

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

@@ -32,6 +32,7 @@ def __init__(
             offset_bottom: int | float | None = None,
             offset_top: int | float | None = None,
             get_target: str | None = None,
+            root_class_name: str | None = None,
             as_item: str | None = None,
             _internal: None = None,
             # gradio properties
@@ -58,6 +59,7 @@ def __init__(
         self.offset_bottom = offset_bottom
         self.offset_top = offset_top
         self.get_target = get_target
+        self.root_class_name = root_class_name
 
     FRONTEND_DIR = resolve_frontend_dir("affix")
 

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

@@ -41,7 +41,8 @@ class AntdAutoComplete(ModelScopeDataLayoutComponent):
 
     # supported slots
     SLOTS = [
-        'allowClear.clearIcon', 'dropdownRender', 'children', 'notFoundContent'
+        'allowClear.clearIcon', 'dropdownRender', 'children',
+        'notFoundContent', 'options'
     ]
 
     def __init__(

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

@@ -25,6 +25,8 @@ def __init__(
         | None = None,
             image_style: dict | None = None,
             root_class_name: str | None = None,
+            styles: dict | None = None,
+            class_names: dict | None = None,
             as_item: str | None = None,
             _internal: None = None,
             # gradio properties
@@ -42,6 +44,8 @@ def __init__(
                          elem_style=elem_style,
                          **kwargs)
         self.props = props
+        self.styles = styles
+        self.class_names = class_names
         self.description = description
         self.image = image
         self.image_style = image_style

backend/modelscope_studio/components/antdx/__init__.py

@@ -0,0 +1,19 @@
+from .attachments import AntdXAttachments as Attachments
+from .attachments.file_card import \
+  AntdXAttachmentsFileCard as AttachmentsFileCard
+from .bubble import AntdXBubble as Bubble
+from .bubble.list import AntdXBubbleList as BubbleList
+from .bubble.list.item import AntdXBubbleListItem as BubbleListItem
+from .bubble.list.role import AntdXBubbleListRole as BubbleListRole
+from .conversations import AntdXConversations as Conversations
+from .conversations.item import AntdXConversationsItem as ConversationsItem
+from .prompts import AntdXPrompts as Prompts
+from .prompts.item import AntdXPromptsItem as PromptsItem
+from .sender import AntdXSender as Sender
+from .sender.header import AntdXSenderHeader as SenderHeader
+from .suggestion import AntdXSuggestion as Suggestion
+from .suggestion.item import AntdXSuggestionItem as SuggestionItem
+from .thought_chain import AntdXThoughtChain as ThoughtChain
+from .thought_chain.item import AntdXThoughtChainItem as ThoughtChainItem
+from .welcome import AntdXWelcome as Welcome
+from .x_provider import AntdXXProvider as XProvider

backend/modelscope_studio/components/antdx/attachments/__init__.py

@@ -0,0 +1,222 @@
+from __future__ import annotations
+
+import tempfile
+from pathlib import Path
+from typing import TYPE_CHECKING, Any, Callable, Literal
+
+import gradio_client.utils as client_utils
+from gradio import processing_utils
+from gradio.components.base import Component
+from gradio.data_classes import FileData, ListFiles
+from gradio.events import EventListener
+from gradio.utils import NamedString
+from gradio_client import handle_file
+
+from ....utils.dev import ModelScopeDataLayoutComponent, resolve_frontend_dir
+from .file_card import AntdXAttachmentsFileCard
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+# as inputs, outputs
+class AntdXAttachments(ModelScopeDataLayoutComponent):
+    """
+    Ant Design: https://ant.design/components/attachments
+    """
+
+    FileCard = AntdXAttachmentsFileCard
+
+    EVENTS = [
+        EventListener("change",
+                      callback=lambda block: block._internal.update(
+                          bind_change_event=True)),
+        EventListener("drop",
+                      callback=lambda block: block._internal.update(
+                          bind_drop_event=True)),
+        EventListener("download",
+                      callback=lambda block: block._internal.update(
+                          bind_download_event=True)),
+        EventListener("preview",
+                      callback=lambda block: block._internal.update(
+                          bind_preview_event=True)),
+        EventListener("remove",
+                      callback=lambda block: block._internal.update(
+                          bind_remove_event=True))
+    ]
+
+    # supported slots
+    SLOTS = [
+        'showUploadList.extra',
+        'showUploadList.previewIcon',
+        'showUploadList.removeIcon',
+        'showUploadList.downloadIcon',
+        'iconRender',
+        'itemRender',
+        'placeholder',
+        'placeholder.title',
+        'placeholder.description',
+        'placeholder.icon',
+    ]
+
+    data_model = ListFiles
+
+    def __init__(
+            self,
+            value: list[str] | Callable | None = None,
+            props: dict | None = None,
+            *,
+            accept: str | None = None,
+            action: str | None = None,
+            before_upload: str | None = None,
+            custom_request: str | None = None,
+            data: dict | str | None = None,
+            default_file_list: list[dict] | None = None,
+            directory: bool | None = None,
+            disabled: bool | None = None,
+            items: list[dict] | None = None,
+            get_drop_container: str | None = None,
+            overflow: Literal['wrap', 'scrollX', 'scrollY'] | None = None,
+            placeholder: str | None = None,
+            headers: dict | None = None,
+            icon_render: str | None = None,
+            is_image_url: str | None = None,
+            item_render: str | None = None,
+            list_type: Literal['text', 'picture', 'picture-card',
+                               'picture-circle'] | None = None,
+            max_count: int | None = None,
+            method: str | None = None,
+            multiple: bool | None = None,
+            form_name: str | None = None,
+            open_file_dialog_on_click: bool | None = True,
+            preview_file: str | None = None,
+            progress: dict | None = None,
+            show_upload_list: bool | dict | None = True,
+            with_credentials: bool | None = None,
+            class_names: dict | None = None,
+            root_style: dict | None = None,
+            styles: dict | None = None,
+            root_class_name: str | None = None,
+            as_item: str | None = None,
+            _internal: None = None,
+            # gradio properties
+            visible: bool = True,
+            elem_id: str | None = None,
+            elem_classes: list[str] | str | None = None,
+            elem_style: dict | None = None,
+            key: int | str | None = None,
+            every: Timer | float | None = None,
+            inputs: Component | list[Component] | set[Component] | None = None,
+            render: bool = True,
+            **kwargs):
+
+        super().__init__(as_item=as_item,
+                         visible=visible,
+                         value=value,
+                         elem_id=elem_id,
+                         elem_classes=elem_classes,
+                         key=key,
+                         elem_style=elem_style,
+                         every=every,
+                         inputs=inputs,
+                         render=render,
+                         **kwargs)
+        self.props = props
+        self.accept = accept
+        self.action = action
+        self.before_upload = before_upload
+        self.custom_request = custom_request
+        self.data = data
+        self.default_file_list = default_file_list
+        self.directory = directory
+        self.disabled = disabled
+        self.items = items
+        self.get_drop_container = get_drop_container
+        self.overflow = overflow
+        self.placeholder = placeholder
+        self.class_names = class_names
+        self.root_style = root_style
+        self.styles = styles
+        self.headers = headers
+        self.icon_render = icon_render
+        self.is_image_url = is_image_url
+        self.item_render = item_render
+        self.list_type = list_type
+        self.max_count = max_count
+        self.method = method
+        self.multiple = multiple
+        self.form_name = form_name
+        self.open_file_dialog_on_click = open_file_dialog_on_click
+        self.preview_file = preview_file
+        self.progress = progress
+        self.show_upload_list = show_upload_list
+        self.with_credentials = with_credentials
+        self.root_class_name = root_class_name
+
+    FRONTEND_DIR = resolve_frontend_dir("attachments", type="antdx")
+
+    def _process_single_file(self, f: FileData) -> NamedString:
+        file_name = f.path
+        file = tempfile.NamedTemporaryFile(delete=False, dir=self.GRADIO_CACHE)
+        file.name = file_name
+        return NamedString(file_name)
+
+    def preprocess(self, payload: ListFiles | None) -> list[str] | None:
+        """
+            Parameters:
+                payload: File information as a list of FileData objects.
+            Returns:
+                Passes the file as a list of `str`.
+            """
+        if payload is None:
+            return None
+
+        return [self._process_single_file(f) for f in payload]  # type: ignore
+
+    def _download_files(self, value: list[str]) -> list[str]:
+        downloaded_files = []
+        for file in value:
+            if client_utils.is_http_url_like(file):
+                downloaded_file = processing_utils.save_url_to_cache(
+                    file, self.GRADIO_CACHE)
+                downloaded_files.append(downloaded_file)
+            else:
+                downloaded_files.append(file)
+        return downloaded_files
+
+    def postprocess(self, value: list[str] | None) -> ListFiles | None:
+        """
+        Parameters:
+            value: a `list[str]` of filepaths/URLs.
+        Returns:
+            File information as a list of FileData objects.
+        """
+        if value is None:
+            return None
+        value = self._download_files(value)
+        return ListFiles(root=[
+            FileData(
+                path=file,
+                orig_name=Path(file).name,
+                size=Path(file).stat().st_size,
+            ) for file in value
+        ])
+
+    @property
+    def skip_api(self):
+        return False
+
+    def api_info(self) -> dict[str, list[str]]:
+        return ListFiles.model_json_schema()
+
+    def example_payload(self) -> Any:
+        return [
+            handle_file(
+                "https://github.com/gradio-app/gradio/raw/main/test/test_files/sample_file.pdf"
+            )
+        ]
+
+    def example_value(self) -> Any:
+        return [
+            "https://github.com/gradio-app/gradio/raw/main/test/test_files/sample_file.pdf"
+        ]

backend/modelscope_studio/components/antdx/attachments/file_card/__init__.py

@@ -0,0 +1,64 @@
+from __future__ import annotations
+
+from gradio.events import EventListener
+
+from .....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
+
+
+class AntdXAttachmentsFileCard(ModelScopeLayoutComponent):
+    """
+    Ant Design X: https://x.ant.design/components/attachments
+    """
+    EVENTS = [
+        EventListener("remove",
+                      callback=lambda block: block._internal.update(
+                          bind_remove_event=True))
+    ]
+
+    # supported slots
+    SLOTS = []
+
+    def __init__(
+            self,
+            props: dict | None = None,
+            *,
+            item: dict | None = None,
+            as_item: str | None = None,
+            _internal: None = None,
+            # gradio properties
+            visible: bool = True,
+            elem_id: str | None = None,
+            elem_classes: list[str] | str | None = None,
+            elem_style: dict | None = None,
+            render: bool = True,
+            **kwargs):
+        super().__init__(visible=visible,
+                         elem_id=elem_id,
+                         elem_classes=elem_classes,
+                         render=render,
+                         as_item=as_item,
+                         elem_style=elem_style,
+                         **kwargs)
+        self.props = props
+        self.item = item
+
+    FRONTEND_DIR = resolve_frontend_dir("attachments",
+                                        'file-card',
+                                        type="antdx")
+
+    @property
+    def skip_api(self):
+        return True
+
+    def preprocess(self, payload: None) -> None:
+        return payload
+
+    def postprocess(self, value: None) -> None:
+
+        return value
+
+    def example_payload(self) -> None:
+        return None
+
+    def example_value(self) -> None:
+        return None