fix: disabled status of action buttons & improve load times of frontend

.changeset/beige-bugs-bake.md

@@ -0,0 +1,7 @@
+---
+'@modelscope-studio/pro': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+fix: disabled status of action buttons

.changeset/famous-horses-open.md

@@ -0,0 +1,7 @@
+---
+'@modelscope-studio/pro': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+feat: improve load times

.changeset/slick-pandas-sit.md

@@ -0,0 +1,11 @@
+---
+'@modelscope-studio/legacy-compiled': patch
+'@modelscope-studio/lint-config': patch
+'@modelscope-studio/changelog': patch
+'@modelscope-studio/antd': patch
+'@modelscope-studio/pro': patch
+'@modelscope-studio/frontend': patch
+'modelscope_studio': patch
+---
+
+chore: update deps

backend/modelscope_studio/components/antdx/bubble/list/__init__.py

@@ -2,6 +2,8 @@
 
 from typing import Any
 
+from gradio.events import EventListener
+
 from .....utils.dev import ModelScopeLayoutComponent, resolve_frontend_dir
 from .item import AntdXBubbleListItem
 from .role import AntdXBubbleListRole
@@ -14,7 +16,12 @@ class AntdXBubbleList(ModelScopeLayoutComponent):
     Role = AntdXBubbleListRole
     Item = AntdXBubbleListItem
 
-    EVENTS = []
+    EVENTS = [
+        EventListener("scroll",
+                      callback=lambda block: block._internal.update(
+                          bind_scroll_event=True),
+                      doc="Callback when the bubble list is scrolled.")
+    ]
 
     # supported slots
     SLOTS = [

config/changelog/package.json

@@ -20,12 +20,12 @@
   },
   "dependencies": {
     "@changesets/get-github-info": "^0.6.0",
-    "@manypkg/get-packages": "^3.0.0",
+    "@manypkg/get-packages": "^3.1.0",
     "detect-indent": "^7.0.1"
   },
   "devDependencies": {
     "@changesets/types": "^6.1.0",
-    "@types/node": "^24.0.10",
+    "@types/node": "^24.1.0",
     "tsup": "^8.5.0"
   }
 }

config/lint-config/package.json

@@ -17,18 +17,18 @@
   },
   "dependencies": {
     "@eslint/compat": "^1.3.1",
-    "@eslint/js": "^9.30.1",
-    "@typescript-eslint/parser": "^8.35.1",
-    "eslint-config-prettier": "^10.1.5",
+    "@eslint/js": "^9.32.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "5.5.1",
+    "eslint-plugin-prettier": "5.5.3",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.0",
-    "eslint-plugin-svelte": "^3.10.1",
+    "eslint-plugin-svelte": "^3.11.0",
     "globals": "^16.3.0",
     "postcss": "^8.5.6",
     "postcss-less": "^6.0.0",
@@ -38,8 +38,8 @@
     "stylelint-declaration-block-no-ignored-properties": "^2.8.0",
     "stylelint-order": "^7.0.0",
     "stylelint-prettier": "^5.0.3",
-    "svelte-eslint-parser": "^1.2.0",
-    "typescript-eslint": "^8.35.1"
+    "svelte-eslint-parser": "^1.3.0",
+    "typescript-eslint": "^8.38.0"
   },
   "devDependencies": {
     "@types/eslint": "^9.6.1",

docs/layout_templates/coder_artifacts/demos/app.py

@@ -177,21 +177,27 @@ def clear_history(e: gr.EventData, state_value):
   min-height: 680px;
 }
 
+#coder-artifacts #output-container .ms-gr-ant-tabs-content,.ms-gr-ant-tabs-tabpane {
+    height: 100%;
+}
+
 #coder-artifacts .output-html {
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   min-height: 680px;
+  max-height: 1200px;
 }
 
-#coder-artifacts .output-html > iframe {
-  flex: 1;
+#coder-artifacts .output-html .html-container {
+  height: 100%;
 }
 
-#code-artifacts-code-drawer .output-code {
+#coder-artifacts-code-drawer .output-code {
   flex:1;
 }
-#code-artifacts-code-drawer .output-code .ms-gr-ant-spin-nested-loading {
+#coder-artifacts-code-drawer .output-code .ms-gr-ant-spin-nested-loading {
   min-height: 100%;
 }
 """
@@ -277,10 +283,13 @@ def clear_history(e: gr.EventData, state_value):
 
                     # Right Column
                     with antd.Col(span=24, md=16):
-                        with antd.Card(title="Output",
-                                       elem_style=dict(height="100%"),
-                                       styles=dict(body=dict(height="100%")),
-                                       elem_id="output-container"):
+                        with antd.Card(
+                                title="Output",
+                                elem_style=dict(height="100%",
+                                                display="flex",
+                                                flexDirection="column"),
+                                styles=dict(body=dict(height=0, flex=1)),
+                                elem_id="output-container"):
                             # Output Container Extra
                             with ms.Slot("extra"):
                                 with ms.Div(elem_id="output-container-extra"):
@@ -298,6 +307,7 @@ def clear_history(e: gr.EventData, state_value):
                                         "🧑‍💻 View Code", type="primary")
                             # Output Content
                             with antd.Tabs(
+                                    elem_style=dict(height="100%"),
                                     active_key="empty",
                                     render_tab_bar="() => null") as state_tab:
                                 with antd.Tabs.Item(key="empty"):
@@ -333,7 +343,7 @@ def clear_history(e: gr.EventData, state_value):
                             placement="right",
                             get_container=
                             "() => document.querySelector('.gradio-container')",
-                            elem_id="code-artifacts-code-drawer",
+                            elem_id="coder-artifacts-code-drawer",
                             styles=dict(
                                 body=dict(display="flex",
                                           flexDirection="column-reverse")),

frontend/antd/splitter/splitter.tsx

@@ -18,7 +18,9 @@ export const Splitter = sveltify<GetProps<typeof ASplitter>>(
               if (!item) {
                 return null;
               }
+
               const { el, props: panelProps } = item;
+
               return (
                 <ASplitter.Panel {...panelProps} key={index}>
                   {el && <ReactSlot slot={el} />}

frontend/fixtures.d.ts

@@ -11,6 +11,8 @@ declare module '*?raw' {
   export default string;
 }
 
+declare module '*css' {}
+
 interface Window {
   __gradio_space__: any;
 }

frontend/globals/components/markdown/index.tsx

@@ -1,8 +1,13 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import { useMemoizedFn } from '@utils/hooks/useMemoizedFn';
 import cls from 'classnames';
-import render_math_in_element from 'katex/contrib/auto-render';
 
 import { sanitize } from './sanitize';
 import {
@@ -13,7 +18,6 @@ import {
   renderMermaid,
 } from './utils';
 
-import 'katex/dist/katex.min.css';
 import './markdown.less';
 
 function escapeRegExp(string: string): string {
@@ -59,6 +63,8 @@ const defaultLatexDelimiters = [
   { left: '\\[', right: '\\]', display: true },
 ];
 
+let katexLoaded = false;
+
 export const Markdown: React.FC<MarkdownProps> = ({
   value: message,
   headerLinks: header_links,
@@ -89,6 +95,19 @@ export const Markdown: React.FC<MarkdownProps> = ({
     });
   }, [header_links, latex_delimiters, line_breaks]);
 
+  const hasMathSyntax = useCallback(
+    (text: string) => {
+      if (!latex_delimiters || latex_delimiters.length === 0) {
+        return false;
+      }
+      return latex_delimiters.some(
+        (delimiter) =>
+          text.includes(delimiter.left) && text.includes(delimiter.right)
+      );
+    },
+    [latex_delimiters]
+  );
+
   const process_message = useMemoizedFn((value: string) => {
     let parsedValue = value;
 
@@ -128,12 +147,28 @@ export const Markdown: React.FC<MarkdownProps> = ({
       await renderMermaid(el, themeMode);
     }
 
-    if (el && latex_delimiters && latex_delimiters.length > 0 && value) {
-      const containsDelimiter = latex_delimiters.some(
-        (delimiter) =>
-          value.includes(delimiter.left) && value.includes(delimiter.right)
-      );
-      if (containsDelimiter) {
+    if (
+      el &&
+      latex_delimiters &&
+      latex_delimiters.length > 0 &&
+      value &&
+      hasMathSyntax(value)
+    ) {
+      if (!katexLoaded) {
+        await Promise.all([
+          import('katex/dist/katex.min.css'),
+          import('katex/contrib/auto-render'),
+        ]).then(([, { default: render_math_in_element }]) => {
+          katexLoaded = true;
+          render_math_in_element(el, {
+            delimiters: latex_delimiters,
+            throwOnError: false,
+          });
+        });
+      } else {
+        const { default: render_math_in_element } = await import(
+          'katex/contrib/auto-render'
+        );
         render_math_in_element(el, {
           delimiters: latex_delimiters,
           throwOnError: false,

frontend/globals/components/markdown/utils.ts

@@ -11,6 +11,9 @@ import * as Prism from 'prismjs';
 import 'prismjs/components/prism-python';
 import 'prismjs/components/prism-latex';
 import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-tsx';
 
 import { allHtmlAndSvgTags } from './html-tags';
 

frontend/legacy/compiled/package.json

@@ -14,7 +14,7 @@
     "@subscribe-kit/core": "^2.1.1",
     "@subscribe-kit/react": "^2.1.1",
     "@ungap/structured-clone": "^1.3.0",
-    "@xyflow/react": "12.8.1",
+    "@xyflow/react": "12.8.2",
     "ajv": "^8.17.1",
     "ajv-i18n": "^4.2.0",
     "deepmerge": "^4.3.1",

frontend/package.json

@@ -6,10 +6,10 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@ant-design/cssinjs": "^1.23.0",
+    "@ant-design/cssinjs": "^1.24.0",
     "@ant-design/icons": "^6.0.0",
-    "@ant-design/x": "^1.4.0",
-    "@babel/standalone": "^7.27.7",
+    "@ant-design/x": "^1.5.0",
+    "@babel/standalone": "^7.28.2",
     "@gradio/atoms": "0.7.4",
     "@gradio/button": "^0.2.43",
     "@gradio/client": "^1.14.2",
@@ -19,28 +19,28 @@
     "@gradio/upload": "0.11.2",
     "@gradio/utils": "0.9.0",
     "amuchina": "^1.0.12",
-    "antd": "^5.26.3",
+    "antd": "^5.26.6",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.12",
     "dequal": "^2.0.2",
     "github-slugger": "^2.0.0",
     "immer": "^10.1.1",
     "katex": "^0.16.22",
     "lodash-es": "^4.17.21",
-    "marked": "^16.0.0",
+    "marked": "^16.1.1",
     "marked-gfm-heading-id": "^4.1.2",
     "marked-highlight": "^2.2.2",
-    "mermaid": "^11.7.0",
+    "mermaid": "^11.9.0",
     "path-browserify-esm": "^1.0.6",
     "prismjs": "^1.30.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "svelte": "^4.2.19",
     "svelte-i18n": "^4.0.1",
-    "wavesurfer.js": "^7.9.9"
+    "wavesurfer.js": "^7.10.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.7",
+    "@babel/core": "^7.28.0",
     "@types/babel__core": "^7.20.5",
     "@types/babel__standalone": "^7.1.9",
     "@types/katex": "^0.16.7",
@@ -49,11 +49,11 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/sanitize-html": "^2.16.0",
-    "@vitejs/plugin-react-swc": "^3.10.2",
+    "@vitejs/plugin-react-swc": "^3.11.0",
     "fast-glob": "^3.3.3",
-    "less": "^4.3.0",
+    "less": "^4.4.0",
     "typescript-json-schema": "^0.65.1",
-    "vite": "^7.0.0"
+    "vite": "^7.0.6"
   },
   "main_changeset": true
 }

frontend/pro/chatbot/chatbot-footer.tsx

@@ -134,8 +134,8 @@ const Action: React.FC<{
   urlProxyUrl,
 }) => {
   const handleActionRef = useRef<() => void>();
-  const renderAction = () => {
-    const { action, disabled, disableHandler } = isObject(actionOrActionObject)
+  const getActionProps = () => {
+    return isObject(actionOrActionObject)
       ? {
           action: actionOrActionObject.action,
           disabled:
@@ -148,7 +148,10 @@ const Action: React.FC<{
           disabled: disabledActions?.includes(actionOrActionObject) || false,
           disableHandler: false,
         };
+  };
+  const { action, disabled, disableHandler } = getActionProps();
 
+  const getActionContent = () => {
     switch (action) {
       case 'copy':
         return (
@@ -228,7 +231,7 @@ const Action: React.FC<{
         return null;
     }
   };
-  const actionContent = renderAction();
+  const actionContent = getActionContent();
   if (isObject(actionOrActionObject)) {
     const popconfirmProps: PopconfirmProps = {
       ...(typeof actionOrActionObject.popconfirm === 'string'
@@ -237,6 +240,7 @@ const Action: React.FC<{
             ...actionOrActionObject.popconfirm,
             title: actionOrActionObject.popconfirm?.title,
           }),
+      disabled,
       onConfirm() {
         handleActionRef.current?.();
       },