feat: message elem id & classes

.gitignore

@@ -48,6 +48,7 @@ typings/
 
 # Output of 'npm pack'
 *.tgz
+*.whl
 
 # xconsole
 src/.xconsole

backend/modelscope_studio/components/Chatbot/__init__.py

@@ -24,6 +24,10 @@ class FileMessage(GradioModel):
 class MultimodalMessage(GradioModel):
     # By default, message index is used as id. it will cause the message to be re-rendered when id changed.
     id: Optional[str] = None
+    # elem id of message container
+    elem_id: Optional[str] = None
+    # elem classes of message container
+    elem_classes: Optional[Union[list[str], str]] = None
     name: Optional[str] = None
     text: Optional[str] = None
     flushing: Optional[bool] = None

docs/.gitattributes

@@ -31,4 +31,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 **/*ckpt*.meta filter=lfs diff=lfs merge=lfs -text
 **/*ckpt*.index filter=lfs diff=lfs merge=lfs -text
 *.safetensors filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.whl filter=lfs diff=lfs merge=lfs -text
+*.mp4 filter=lfs diff=lfs merge=lfs -text

docs/Dockerfile

@@ -0,0 +1,15 @@
+FROM python:3.9
+
+WORKDIR /code
+
+COPY --link --chown=1000 . .
+
+RUN mkdir -p /tmp/cache/
+RUN chmod a+rwx -R /tmp/cache/
+ENV TRANSFORMERS_CACHE=/tmp/cache/
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+ENV PYTHONUNBUFFERED=1 	GRADIO_ALLOW_FLAGGING=never 	GRADIO_NUM_PORTS=1 	GRADIO_SERVER_NAME=0.0.0.0     GRADIO_SERVER_PORT=7860 	SYSTEM=spaces
+
+CMD ["python", "app.py"]

docs/README.md

@@ -6,9 +6,9 @@ tags:
   - Markdown
   - gradio-template-Chatbot
   - gradio-template-Markdown
-title: modelscope_gradio_components V0.0.1b8
-colorFrom: red
-colorTo: red
+title: modelscope-studio
+colorFrom: blue
+colorTo: gray
 sdk: docker
 pinned: false
 license: apache-2.0

docs/components/Chatbot/README-zh_CN.md

@@ -79,6 +79,10 @@ class FileMessage(GradioModel):
 class MultimodalMessage(GradioModel):
     # 默认以 index 为作为 id，id 改变会导致 message 重新渲染
     id: Optional[str] = None
+    # message 容器的 elem id
+    elem_id: Optional[str] = None
+    # message 容器的 elem classes
+    elem_classes: Optional[list[str] | str] = None
     name: Optional[str] = None
     text: Optional[str] = None
     flushing: Optional[bool] = None

docs/components/Chatbot/README.md

@@ -78,6 +78,10 @@ class FileMessage(GradioModel):
 class MultimodalMessage(GradioModel):
     # By default, message index is used as id. it will cause the message to be re-rendered when id changed.
     id: Optional[str] = None
+    # elem id of message container
+    elem_id: Optional[str] = None
+    # elem classes of message container
+    elem_classes: Optional[list[str] | str] = None
     name: Optional[str] = None
     text: Optional[str] = None
     flushing: Optional[bool] = None

docs/requirements.txt

@@ -1 +1,2 @@
 modelscope_studio
+modelscope_studio-0.0.8-py3-none-any.whl

docs/src/pyproject.toml

@@ -0,0 +1,54 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "modelscope_studio"
+version = "0.0.8"
+description = "A set of extension component, inluding components for conversational input and display in multimodal scenarios, as well as more components for vertical scenarios."
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "[email protected]" }]
+keywords = [
+  "gradio-custom-component",
+  "modelscope-studio",
+  "gradio-template-Chatbot",
+]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<5.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'License :: OSI Approved :: Apache Software License',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = [
+  "*.pyi",
+  "backend/modelscope_studio/components/Chatbot/templates",
+  "backend/modelscope_studio/components/MultimodalInput/templates",
+  "backend/modelscope_studio/components/Markdown/templates",
+]
+
+[tool.hatch.build.targets.sdist]
+include = ["/backend/modelscope_studio"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/modelscope_studio"]

frontend/Chatbot/shared/ChatBot.svelte

@@ -24,6 +24,7 @@
   } from './utils';
   import {
     copy_to_clipboard,
+    ensureArray,
     format_chat_for_sharing,
     should_flushing,
   } from './utils';
@@ -236,7 +237,12 @@
             {#each message_item as message, k (message?.id || `${i}-${j}-${k}`)}
               {#if message}
                 <div
-                  class="message-row {layout} {j == 0 ? 'user-row' : 'bot-row'}"
+                  id={message.elem_id}
+                  class="message-row {layout} {j == 0
+                    ? 'user-row'
+                    : 'bot-row'} {message.elem_classes
+                    ? ensureArray(message.elem_classes).join(' ')
+                    : ''}"
                 >
                   {#if message.avatar || avatar_images[j][k]}
                     {@const message_name = get_message_name(message, j, k)}

frontend/Chatbot/shared/utils.ts

@@ -37,7 +37,8 @@ export type FileMessage = {
 export type MultimodalMessage = {
   id?: string;
   text: string;
-  original_text: string;
+  elem_id?: string;
+  elem_classes?: string | string[];
   name?: string;
   avatar?: string | FileData | null;
   flushing?: boolean;

pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "modelscope_studio"
-version = "0.0.6"
+version = "0.0.8"
 description = "A set of extension component, inluding components for conversational input and display in multimodal scenarios, as well as more components for vertical scenarios."
 readme = "README.md"
 license = "Apache-2.0"