@agentscope-ai/chat 1.1.14 → 1.1.16

package/lib/ChatAnywhere/SessionList/style.js

@@ -1,14 +1,14 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createGlobalStyle } from "../..";
+import { createGlobalStyle } from 'antd-style';
 export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-chat-anywhere-session-list {\n  display: flex;\n  flex-direction: column;\n  height: 0;\n  flex: 1;\n  width: 100%;\n\n  .", "-conversations {\n    height: 100%;\n  }\n\n  &-session { \n    height: 0;\n    flex: 1;\n    padding: 8px 20px;\n\n  }\n\n  &-logo {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 20px;\n    height: 64px;\n  }\n\n  &-adder {\n    padding: 0 20px 8px 20px;\n    button {\n      border-radius: 6px;\n      box-shadow: 15px 0px 30px -10px rgba(131, 88, 246, 0.4),\n        0px 0px 30px -10px rgba(255, 142, 168, 0.4),\n        -15px 0px 30px -10px rgba(225, 163, 37, 0.4);\n    }\n  }\n\n  &-hide {\n    .", "-chat-anywhere-session-list-adder-logo > div {\n      opacity: 0;\n    }\n    .", "-chat-anywhere-session-list-adder {\n      opacity: 0;\n    }\n    .", "-chat-anywhere-session-list-session {\n      opacity: 0;\n    }\n  }\n}\n\n"])), function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 });

package/lib/Conversations/index.js

@@ -20,7 +20,7 @@ import ConversationsItem from "./Item";
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { useProviderContext } from "./..";
 import useGroupable from "./hooks/useGroupable";
-import useStyle from "./style";
+import Style from "./style";
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -60,7 +60,6 @@ var Conversations = function Conversations(props) {
     direction = _useProviderContext.direction,
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('conversations');
-  var Style = useStyle();
   var mergedCls = classnames(prefixCls, className, rootClassName, _defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'));
   var onConversationItemClick = function onConversationItemClick(info) {
     setMergedActiveKey(info.key);

package/lib/Conversations/style.d.ts

@@ -1,2 +1,3 @@
-declare const _default: () => () => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+declare const _default: import("react").NamedExoticComponent<object>;
 export default _default;

package/lib/Conversations/style.js

@@ -1,16 +1,16 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createGlobalStyle } from "./..";
+import { createGlobalStyle } from 'antd-style';
 export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-conversations {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 0;\n  overflow-y: hidden;\n  margin: 0;\n\n  &-rtl {\n    direction: rtl;\n  }\n\n  &-list {\n    display: flex;\n    gap: ", "px;\n    flex-direction: column;\n\n    .", "-conversations-item {\n      padding-inline-start: ", "px;\n    }\n\n    .", "-conversations-label {\n      color: ", ";\n    }\n  }\n\n  &-timeline {\n    position: relative;\n    z-index: 1;\n    width: 8px;\n    height: 8px;\n    border-radius: 8px;\n    background-color: ", ";\n    border: 1px solid ", ";\n    margin-right: 8px;\n  }\n\n  &-content {\n    height: 36px;\n    display: flex;\n    align-items: center;\n    padding: 6px 2px 6px 16px;\n  }\n\n  &-desc {\n    font-size: 12px;\n    padding: 0 16px 6px 16px;\n    color: ", ";\n  }\n\n  &-item {\n    position: relative;\n    border-radius: ", "px;\n    cursor: pointer;\n    transition: background-color 0.3s ease;\n\n    &-timeline {\n      &::before {\n        content: '';\n        position: absolute;\n        left: 19.5px;\n        top: 0;\n        bottom: -8px;\n        width: 1px;\n        background: ", ";\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n\n    &-active {\n      background-color: ", ";\n\n      .", "-conversations-label,\n      .", "-conversations-menu-icon {\n        color: ", ";\n      }\n    }\n\n    &-disabled {\n      cursor: not-allowed;\n\n      .", "-conversations-label {\n        color: ", ";\n      }\n\n      .", "-conversations-menu-icon {\n        opacity: 0;\n      }\n    }\n\n    &:hover,\n    &-active {\n      .", "-conversations-menu-icon {\n        opacity: 1;\n      }\n    }\n\n    &:focus-within {\n      background-color: ", ";\n      \n    \n    }\n  }\n\n  &-label {\n    flex: 1;\n    color: ", ";\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n\n  &-label-edit {\n    font-size: 14px;\n    color: ", ";\n    font-family: ", ";\n    flex: 1;\n    border: none;\n    height: 22px;\n    line-height: 22px;\n    outline: none;\n    background-color: transparent;\n    padding: 0;\n  }\n\n\n  &-menu-icon {\n    opacity: 0;\n    transition: all 0.3s;\n    font-size: ", "px;\n  }\n\n  &-group-title {\n    display: flex;\n    align-items: center;\n    height: ", "px;\n    min-height: ", "px;\n    padding: 0 ", "px;\n  }\n}"])), function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.paddingXXS;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.paddingXL;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorTextSecondary;
 }, function (p) {
@@ -28,19 +28,19 @@ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTe
 }, function (p) {
   return p.theme.colorFillTertiary;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorText;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorTextDisabled;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorFillTertiary;
 }, function (p) {

package/lib/DefaultCards/Files/index.js

@@ -3,15 +3,16 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { Space } from 'antd';
 import React from 'react';
 import { Attachments } from "../..";
-import { createGlobalStyle, useProviderContext } from "../..";
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from "../..";
 import { SparkDownloadLine } from '@agentscope-ai/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-bubble-files-file {\n  position: relative;\n}\n\n.", "-bubble-files-download {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0,0,0,0.5);\n  z-index: 1;\n  opacity: 0;\n  font-size: 16px;\n  border-radius: ", "px;\n  cursor: pointer;\n  color: ", ";\n  transition: opacity ", "\n\n}\n\n.", "-bubble-files-file:hover .", "-bubble-files-download {\n  opacity: 1;\n}\n"])), function (p) {
-  return p.prefix;
+var Style = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-bubble-files-file {\n  position: relative;\n}\n\n.", "-bubble-files-download {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0,0,0,0.5);\n  z-index: 1;\n  opacity: 0;\n  font-size: 16px;\n  border-radius: ", "px;\n  cursor: pointer;\n  color: ", ";\n  transition: opacity ", "\n\n}\n\n.", "-bubble-files-file:hover .", "-bubble-files-download {\n  opacity: 1;\n}\n"])), function (p) {
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.borderRadius;
 }, function (p) {
@@ -19,15 +20,14 @@ var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTe
 }, function (p) {
   return p.theme.motionDurationSlow;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 });
 export default function Files(props) {
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('bubble-files');
-  var Style = useStyle();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx(Space, {
       className: prefixCls,

package/lib/DefaultCards/Footer/index.js

@@ -1,19 +1,20 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import React from 'react';
-import { createGlobalStyle, useProviderContext } from "../..";
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from "../..";
 import { IconButton } from "@agentscope-ai/design";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-bubble-footer {\n  width: 100%;\n  margin-top: 8px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 12px;\n  overflow: hidden;\n}\n\n.", "-bubble-footer-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  &-item {\n    cursor: pointer;\n    color: ", "\n  }\n}\n\n.", "-bubble-footer-count {\n  display: flex;\n  align-items: center;\n\n  &-item {\n    color: ", ";\n    line-height: 1;\n    padding-right: 13px;\n    margin-left: 13px;\n    border-right: 1px solid ", ";\n    white-space: nowrap;\n\n    &:last-of-type {\n      padding-right: 0;\n      border-right: 0;\n    }\n  }\n}\n"])), function (p) {
-  return p.prefix;
+var Style = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-bubble-footer {\n  width: 100%;\n  margin-top: 8px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 12px;\n  overflow: hidden;\n}\n\n.", "-bubble-footer-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n\n  &-item {\n    cursor: pointer;\n    color: ", "\n  }\n}\n\n.", "-bubble-footer-count {\n  display: flex;\n  align-items: center;\n\n  &-item {\n    color: ", ";\n    line-height: 1;\n    padding-right: 13px;\n    margin-left: 13px;\n    border-right: 1px solid ", ";\n    white-space: nowrap;\n\n    &:last-of-type {\n      padding-right: 0;\n      border-right: 0;\n    }\n  }\n}\n"])), function (p) {
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorText;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorTextTertiary;
 }, function (p) {
@@ -23,7 +24,6 @@ export default function Footer(props) {
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('bubble-footer');
-  var Style = useStyle();
   var _props$data = props.data,
     left = _props$data.left,
     right = _props$data.right;

package/lib/DefaultCards/Images/index.js

@@ -1,24 +1,24 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createGlobalStyle, useProviderContext } from "../..";
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from "../..";
 import { Space, Image as AntdImage, ConfigProvider } from 'antd';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-bubble-image {\n  border-radius: 8px;\n  overflow: hidden;\n\n  .", "-image {\n    display: block;\n  }\n  .", "-image-img {\n    object-fit: cover;\n  }\n\n  .", "-image-mask-info {\n    span {\n      margin-inline-end: 0 !important;\n    }\n  }\n}\n"])), function (p) {
-  return p.prefix;
+var Style = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-bubble-image {\n  border-radius: 8px;\n  overflow: hidden;\n\n  .", "-image {\n    display: block;\n  }\n  .", "-image-img {\n    object-fit: cover;\n  }\n\n  .", "-image-mask-info {\n    span {\n      margin-inline-end: 0 !important;\n    }\n  }\n}\n"])), function (p) {
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 });
 function Image(image) {
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('bubble-image');
-  var Style = useStyle();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx("div", {
       className: "".concat(prefixCls),

package/lib/DefaultCards/Interrupted/index.js

@@ -1,19 +1,20 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { useProviderContext, createGlobalStyle } from "../..";
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from "../..";
 import React from 'react';
 import { SparkErrorCircleFill, SparkStopCircleLine } from '@agentscope-ai/icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-interrupted {\n  display: inline-flex;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n  letter-spacing: 0px;\n  background-color: ", ";\n  padding: 10px 12px;\n  line-height: 1;\n  border-radius: 8px;\n  gap: 8px;\n}\n.", "-interrupted-desc {\n  font-weight: normal;\n}\n\n.", "-interrupted-header {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: ", ";\n\n  &-icon-wrapper {\n    width: 16px;\n    height: 16px;\n    flex: 0 0 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &-error {\n    color: ", ";\n    font-size: 16px;\n  }\n\n  &-interrupted {\n    font-size: 16px;\n  }\n  \n}\n\n"])), function (p) {
-  return p.prefix;
+var Style = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-interrupted {\n  display: inline-flex;\n  flex-direction: column;\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 18px;\n  letter-spacing: 0px;\n  background-color: ", ";\n  padding: 10px 12px;\n  line-height: 1;\n  border-radius: 8px;\n  gap: 8px;\n}\n.", "-interrupted-desc {\n  font-weight: normal;\n}\n\n.", "-interrupted-header {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  color: ", ";\n\n  &-icon-wrapper {\n    width: 16px;\n    height: 16px;\n    flex: 0 0 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  &-error {\n    color: ", ";\n    font-size: 16px;\n  }\n\n  &-interrupted {\n    font-size: 16px;\n  }\n  \n}\n\n"])), function (p) {
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorFillSecondary;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorText;
 }, function (p) {
@@ -29,7 +30,6 @@ export default function Interrupted(props) {
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('interrupted');
-  var Style = useStyle();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
       className: "".concat(prefixCls),

package/lib/DeviceAction/index.js

@@ -15,7 +15,10 @@ export default function (props) {
     }), /*#__PURE__*/_jsx(OperateCard, {
       header: {
         className: "".concat(prefixCls, "-device-action"),
-        icon: (_actionMap$props$acti = actionMap[props.action]) === null || _actionMap$props$acti === void 0 ? void 0 : _actionMap$props$acti.icon,
+        icon: /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixCls, "-device-action-icon"),
+          children: (_actionMap$props$acti = actionMap[props.action]) === null || _actionMap$props$acti === void 0 ? void 0 : _actionMap$props$acti.icon
+        }),
         title: /*#__PURE__*/_jsxs("div", {
           className: "".concat(prefixCls, "-device-action-content"),
           children: [/*#__PURE__*/_jsxs("div", {

package/lib/Disclaimer/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import useStyle from "./style";
+import Style from "./style";
 import { useProviderContext } from "./..";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -7,7 +7,6 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 export default function (props) {
   var _props$desc = props.desc,
     desc = _props$desc === void 0 ? 'AI can also make mistakes, so please check carefully and use it with caution' : _props$desc;
-  var Style = useStyle();
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('disclaimer');

package/lib/Disclaimer/style.d.ts

@@ -1,2 +1,3 @@
-declare const _default: () => () => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+declare const _default: import("react").NamedExoticComponent<object>;
 export default _default;

package/lib/Disclaimer/style.js

@@ -1,10 +1,10 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createGlobalStyle } from "./..";
+import { createGlobalStyle } from 'antd-style';
 export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-disclaimer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  line-height: 1.5;\n  color: ", ";\n  padding: 8px 12px;\n}\n\n.", "-disclaimer-after-link {\n  padding-left: 8px;\n}\n"])), function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorTextTertiary;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 });

package/lib/ImageGenerator/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import useStyle from "./style";
+import Style from "./style";
 import { useProviderContext } from "../Provider";
 import { ConfigProvider, Image } from 'antd';
 import { SparkCheckCircleFill } from '@agentscope-ai/icons';
@@ -8,7 +8,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var ImageGenerator = function ImageGenerator(props) {
-  var Style = useStyle();
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('image-generator');

package/lib/ImageGenerator/style.d.ts

@@ -1,2 +1,3 @@
-declare const _default: () => () => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+declare const _default: import("react").NamedExoticComponent<object>;
 export default _default;

package/lib/ImageGenerator/style.js

@@ -1,22 +1,22 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createGlobalStyle } from "./..";
+import { createGlobalStyle } from 'antd-style';
 export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-image-generator {\n\n  .", "-image {\n    border-radius: 8px;\n    filter: blur(20px);\n    animation: ", "clearBlur 1s ease forwards;\n    overflow: hidden;\n  }\n\n\n  &-wrapper {\n    overflow: hidden;\n  }\n\n\n  &-text {\n    position: relative;\n    display: flex;\n    gap: 8px;\n    height: 40px;\n    align-items: center;\n    font-size: 14px;\n    line-height: 26px;\n    color: ", ";\n\n\n    &-success {\n      color: ", ";\n      font-size: 20px;\n    }\n  }\n\n  &-default-skeleton {\n    position: relative;\n    overflow: hidden;\n    border-radius: 8px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n\n    &-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%) rotate(0deg);\n      width: 100vmax;\n      height: 100vmax;\n      object-fit: cover;\n      animation: ", "spin 6s linear infinite;\n      pointer-events: none;\n    }\n\n    &-icon {\n      width: 32px;\n      height: 32px;\n    } \n\n    &-content {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n      \n    }\n\n    &-text {\n      margin-top: 8px;\n      font-size: 14px;\n      color: ", ";\n    }\n  }\n}\n\n\n\n@keyframes ", "clearBlur {\n  from {\n    filter: blur(20px);\n  }\n  to {\n    filter: blur(0);\n  }\n}\n\n@keyframes ", "spin {\n  from {\n    transform: translate(-50%, -50%) rotate(0deg);\n  }\n  to {\n    transform: translate(-50%, -50%) rotate(360deg);\n  }\n}\n"])), function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorText;
 }, function (p) {
   return p.theme.colorSuccess;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorBgBase;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 });

package/lib/Markdown/cursor/Dot.js

@@ -1,12 +1,13 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createGlobalStyle, useProviderContext } from "../..";
+import { useProviderContext } from "../..";
+import { createGlobalStyle } from 'antd-style';
 import classNames from 'classnames';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-markdown-cursor-dot {\n  display: inline-flex;\n  width: 0;\n  align-items: center;\n  padding-left: 2px;\n  gap: 4px;\n\n\n  &-dot1 {\n    flex: 0 0 5px;\n    width: 5px;\n    height: 5px;\n    border-radius: 999px;\n    background-color: ", ";\n    animation: markdown-cursor-dot1 2s infinite ease;\n  }\n\n\n  &-dot2 {\n    flex: 0 0 5px;\n    width: 5px;\n    height: 5px;\n    border-radius: 999px;\n    opacity: 0.5;\n    background-color: ", ";\n    animation: markdown-cursor-dot2 2s infinite ease;\n  }\n\n}\n\n\n@keyframes markdown-cursor-dot1 {\n  0% {\n    transform: translateX(0px)scale(1);\n    z-index: 1;\n    opacity: 1;\n\n  }\n\n  40% {\n    transform: translateX(8.5px)scale(0.8);\n    z-index: 3;\n    opacity: 0.5;\n\n  }\n\n  50% {\n    transform: translateX(8.5px) scale(0.8);\n    z-index: 1;\n    opacity: 0.5;\n  }\n\n  90% {\n    transform: translateX(0px) scale(1);\n    z-index: 1;\n    opacity: 1;\n  }\n}\n\n@keyframes markdown-cursor-dot2 {\n  0% {\n    transform: translateX(0px)scale(1);\n    z-index: 1;\n    opacity: 0.5;\n\n  }\n\n  40% {\n    transform: translateX(-8.5px)scale(1.25);\n    z-index: 3;\n    opacity: 1;\n\n  }\n\n  50% {\n    transform: translateX(-8.5px) scale(1.25);\n    z-index: 1;\n    opacity: 1;\n  }\n\n  90% {\n    transform: translateX(0px) scale(1);\n    z-index: 1;\n    opacity: 0.5;\n  }\n}\n"])), function (p) {
-  return p.prefix;
+var Style = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-markdown-cursor-dot {\n  display: inline-flex;\n  width: 0;\n  align-items: center;\n  padding-left: 2px;\n  gap: 4px;\n\n\n  &-dot1 {\n    flex: 0 0 5px;\n    width: 5px;\n    height: 5px;\n    border-radius: 999px;\n    background-color: ", ";\n    animation: markdown-cursor-dot1 2s infinite ease;\n  }\n\n\n  &-dot2 {\n    flex: 0 0 5px;\n    width: 5px;\n    height: 5px;\n    border-radius: 999px;\n    opacity: 0.5;\n    background-color: ", ";\n    animation: markdown-cursor-dot2 2s infinite ease;\n  }\n\n}\n\n\n@keyframes markdown-cursor-dot1 {\n  0% {\n    transform: translateX(0px)scale(1);\n    z-index: 1;\n    opacity: 1;\n\n  }\n\n  40% {\n    transform: translateX(8.5px)scale(0.8);\n    z-index: 3;\n    opacity: 0.5;\n\n  }\n\n  50% {\n    transform: translateX(8.5px) scale(0.8);\n    z-index: 1;\n    opacity: 0.5;\n  }\n\n  90% {\n    transform: translateX(0px) scale(1);\n    z-index: 1;\n    opacity: 1;\n  }\n}\n\n@keyframes markdown-cursor-dot2 {\n  0% {\n    transform: translateX(0px)scale(1);\n    z-index: 1;\n    opacity: 0.5;\n\n  }\n\n  40% {\n    transform: translateX(-8.5px)scale(1.25);\n    z-index: 3;\n    opacity: 1;\n\n  }\n\n  50% {\n    transform: translateX(-8.5px) scale(1.25);\n    z-index: 1;\n    opacity: 1;\n  }\n\n  90% {\n    transform: translateX(0px) scale(1);\n    z-index: 1;\n    opacity: 0.5;\n  }\n}\n"])), function (p) {
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorText;
 }, function (p) {
@@ -16,7 +17,6 @@ export default function () {
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('markdown-cursor-dot');
-  var Style = useStyle();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("span", {
       className: classNames(prefixCls, getPrefixCls('markdown-cursor')),

package/lib/Markdown/cursor/Underline.js

@@ -1,17 +1,16 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import React from 'react';
-import { createGlobalStyle, useProviderContext } from "../..";
+import { useProviderContext } from "../..";
 import classNames from 'classnames';
+import { createGlobalStyle } from 'antd-style';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.markdown-cursor-underline {\n  opacity: 1;\n  padding: 0 2px;\n  animation: markdown-cursor-underline .8s infinite;\n\n  &::after {\n    content: '_';\n    color: e('var(--@{ant-prefix}-color-primary)'),\n  }\n}\n\n\n@keyframes markdown-cursor-underline {\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n"])));
+var Style = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.markdown-cursor-underline {\n  opacity: 1;\n  padding: 0 2px;\n  animation: markdown-cursor-underline .8s infinite;\n\n  &::after {\n    content: '_';\n    color: e('var(--@{ant-prefix}-color-primary)'),\n  }\n}\n\n\n@keyframes markdown-cursor-underline {\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n}\n"])));
 export default function () {
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = 'markdown-cursor-underline';
-  var Style = useStyle();
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsx("span", {
       className: classNames(prefixCls, getPrefixCls('markdown-cursor'))

package/lib/Markdown/index.js

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import Markdown from "./Markdown";
-import useStyle from "./style";
+import Style from "./style";
 import { useGlobalContext, useProviderContext } from "./..";
 import classnames from 'classnames';
 import { useTyping } from "./useTyping";
@@ -18,7 +18,6 @@ function MarkdownComponent(props) {
   });
   var baseFontSize = props.baseFontSize || (markdown === null || markdown === void 0 ? void 0 : markdown.baseFontSize) || 14;
   var baseLineHeight = props.baseLineHeight || 1.7;
-  var Style = useStyle();
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('markdown');

package/lib/Markdown/style.d.ts

@@ -1,2 +1,3 @@
-declare const _default: () => () => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+declare const _default: import("react").NamedExoticComponent<object>;
 export default _default;

package/lib/Markdown/style.js

@@ -1,14 +1,14 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createGlobalStyle } from "./..";
+import { createGlobalStyle } from 'antd-style';
 export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-markdown  {\n  color: inherit;\n\n  .katex-display {\n    font-size: 1.3em;\n  }\n\n  .katex-html {\n    display: none;\n  }\n\n  .katex-error {\n    color: inherit !important;\n  }\n\n  .cm-gutter-lint {\n    width: 0;\n  }\n\n  .cm-line {\n    background-color: transparent !important;\n  }\n\n  .cm-activeLineGutter {\n    background-color: transparent !important;\n    color: inherit !important;\n  }\n\n  .\u037C1.cm-focused {\n    outline: 0 !important;\n  }\n\n  mstyle[mathcolor=\"#cc0000\"] {\n    opacity: 0;\n  }\n\n  ol, ul  {\n    padding-left: 30px;\n  }\n\n  blockquote {\n    padding-inline: 0.6em 0;\n    padding-block: 0;\n    margin: 1em 0;\n    border-inline-start: 4px solid rgba(100, 100, 100, 0.2);\n    opacity: 0.85;\n  }\n\n  &-cursor {}\n\n  figure {\n    margin: 0;\n  }\n\n  figure img {\n    display: block;\n    cursor: pointer;\n  }\n\n  code .", "-markdown-cursor,\n  pre .", "-markdown-cursor,\n  table .", "-markdown-cursor {\n    display: none;\n  }\n\n  @keyframes typography-cursor {\n    0% {\n      opacity: 1;\n    }\n\n    100% {\n      opacity: 0;\n    }\n  }\n\n  code {\n    font-size: 0.8571428571428571em;\n    border: 0 !important;\n  }\n\n  pre code {\n    font-size: 0.8571428571428571em;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-top: 0.5714285714285714em !important;\n    margin-bottom: 0.5714285714285714em !important;\n    font-weight: 500;\n    line-height: 1.7777;\n    color: inherit !important;\n  }\n\n  p {\n    margin-top: 0.5714285714285714em !important;\n    margin-bottom: 0.5714285714285714em !important;\n  }\n\n  h1 {\n    font-size: 1.2857142857142858em;\n  }\n\n  h2 {\n    font-size: 1.1428571428571428em;\n  }\n\n  h3 {\n    font-size: 1em;\n  }\n\n  h4 {\n    font-size: 1em;\n  }\n\n  h5 {\n    font-size: 1em;\n  }\n\n  h6 {\n    font-size: 1em;\n  }\n\n  hr {\n    border-color: ", ";\n    border-style: solid;\n    border-width: 1px 0 0 0;\n    margin: 1em 0;\n  }\n\n  table {\n    border-collapse: collapse;\n    display: block;\n    width: max-content;\n    max-width: 100%;\n    overflow: auto;\n  }\n\n  table th {\n    background: ", ";\n    text-align: left;\n  }\n\n  table td,\n  table th {\n    padding: 0.75em 1.5em;\n    border: 1px solid ", ";\n    white-space: pre;\n  }\n\n  .", "-image {\n    max-width: 480px;\n  }\n\n}\n\n.", "-markdown-video {\n  position: relative;\n  cursor: pointer;\n  \n  &-poster {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    max-width: 480px;\n    background-color: #000;\n    border-radius: 8px;\n    padding: 100px 0;\n  }\n\n  &-play {\n    color: #ccc;\n    font-size: 30px;\n  }\n}\n\n\n.", "-markdown .", "-image {\n  cursor: pointer;\n  overflow: hidden;\n  border-radius: 8px;\n}\n\n.", "-markdown  > *:last-child {\n  margin-bottom: 0 !important;\n}\n\n.", "-markdown  > *:first-child {\n  margin-top: 0 !important;\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n\n.animate-fade-in {\n  animation: fade-in 1s;\n}\n\n"])), function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorBorderSecondary;
 }, function (p) {
@@ -16,15 +16,15 @@ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTe
 }, function (p) {
   return p.theme.colorBorderSecondary;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 });

package/lib/Mermaid/index.js

@@ -15,12 +15,13 @@ import { useAsyncEffect } from 'ahooks';
 import { theme as AntdTheme } from 'antd';
 import { kebabCase } from 'lodash';
 import React, { useEffect, useId, useMemo, useState } from 'react';
-import { createGlobalStyle, useProviderContext } from "./..";
+import { useProviderContext } from "./..";
+import { createGlobalStyle } from 'antd-style';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-mermaid {\n  &-preview img {\n    background: ", ";\n  }\n}\n"])), function (p) {
-  return p.prefix;
+var Style = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-mermaid {\n  &-preview img {\n    background: ", ";\n  }\n}\n"])), function (p) {
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorBgBase;
 });
@@ -56,7 +57,6 @@ export default function Mermaid(props) {
   var content = props.content,
     width = props.width,
     height = props.height;
-  var Style = useStyle();
   var _useProviderContext = useProviderContext(),
     theme = _useProviderContext.theme,
     getPrefixCls = _useProviderContext.getPrefixCls;

package/lib/OperateCard/OperateCard.js

@@ -10,7 +10,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useState } from 'react';
 import { useProviderContext } from "../Provider";
-import useStyle from "./style";
+import Style from "./style";
 import classNames from 'classnames';
 import { SparkDownLine, SparkUpLine } from '@agentscope-ai/icons';
 import { IconButton } from "@agentscope-ai/design";
@@ -33,7 +33,6 @@ function OperateCard(props) {
   var _useProviderContext2 = useProviderContext(),
     getPrefixCls = _useProviderContext2.getPrefixCls;
   var prefixCls = getPrefixCls('operate-card');
-  var Style = useStyle();
   var _useState = useState(((_props$body = props.body) === null || _props$body === void 0 ? void 0 : _props$body.defaultOpen) || false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],

package/lib/OperateCard/style.d.ts

@@ -1,2 +1,3 @@
-declare const _default: () => () => import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+declare const _default: import("react").NamedExoticComponent<object>;
 export default _default;

package/lib/OperateCard/style.js

@@ -1,8 +1,8 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createGlobalStyle } from "./..";
-export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-operate-card {\n  width: 100%;\n  border-radius: ", "px;\n  overflow: hidden;\n  background-color: ", ";\n\n  &-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 0 12px;\n    height: 32px;\n\n    &-icon {\n      font-size: 16px;\n    }\n\n    &-title {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-size: 13px;\n      font-weight: 500;\n      color: ", ";\n    }\n\n    &-description {\n    overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-size: 12px;\n      color: ", ";\n    }\n\n    &-arrow {\n      margin: 0 0 0 auto;\n    }\n\n    &-has-body {\n      cursor: pointer;\n    }\n  }\n\n  &-body {\n    opacity: 0;\n    animation: ", "-operate-card-body-open 0.2s ease-in-out forwards;\n    \n    @keyframes ", "-operate-card-body-open {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n  \n  }\n\n\n  &-line-body {\n    margin: 0 12px 12px 20px;\n    border-left: 1px solid ", ";\n  }\n\n  &-thinking {\n    padding-left: 16px;\n    font-size: 12px;\n    line-height: 20px;\n    color: ", ";\n    opacity: 0.85;\n    white-space: pre-wrap;\n  }\n\n\n  &-todo-list {\n\n    &-item {\n      height: 32px;\n      display: flex;\n      align-items: center;\n      padding: 0 12px;\n      gap: 8px;\n      \n      color: ", ";\n\n\n      &-done {\n        color: ", ";\n      }\n\n      &-icon {\n        font-size: 16px;\n      }\n\n      &-title {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n        font-size: 12px;\n      }\n\n      &-done {\n        \n      }\n\n    }\n  \n  }\n\n\n  &-web-search-item {\n    display: flex;\n    height: 32px;\n    align-items: center;\n    padding: 0 12px;\n    gap: 8px;\n    color: ", ";\n    cursor: pointer;\n\n    &-icon {\n      display: block;\n      width: 16px;\n      height: 16px;\n      border: 1px solid ", ";\n      border-radius: 99px;\n    }\n\n    &-title {\n      font-size: 12px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n        \n      }\n\n    }\n\n    &-subTitle {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      border-left: 1px solid ", ";\n      font-size: 12px;\n      line-height: 1;\n      color: ", ";\n      padding-left: 8px;\n      margin-left: 4px;\n    }\n\n  }\n\n\n  &-tool-call-block {\n    margin-left: 16px;\n  \n    &-title {\n      font-size: 12px;\n      color: ", ";\n      line-height: 20px;\n      margin-bottom: 4px;\n    }\n\n    &-content {\n      font-size: 12px;\n      line-height: 20px;\n      font-family: ", ";\n      border-radius: 6px;\n      padding: 8px;\n      background-color: ", ";\n      white-space: pre-wrap;\n    }\n  }\n\n  &-tool-call-block ~ &-tool-call-block {\n    margin-top: 8px;\n  }\n\n\n  &-device-action {\n    height: 44px;\n\n    &-time {\n      margin-bottom: 4px;\n      font-size: 12px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &-content {\n      width: 100%;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    &-image {\n      height: 32px;\n      margin-left: 8px;\n      display: block;\n      border-radius: 6px;\n      overflow: hidden;\n      border: 1px solid ", ";\n    }\n\n\n    &-description {\n      display: flex;\n      gap: 4px;\n      flex: 1;\n      width: 0;\n      text-overflow: ellipsis;\n      overflow: hidden;\n      white-space: nowrap;\n    }\n  }\n\n  &-rag-item {\n    margin-left: 16px;\n\n    &-title {\n      font-size: 12px;\n      color: ", ";\n      line-height: 20px;\n      margin-bottom: 4px;\n    }\n\n    &-content {\n      padding: 8px;\n      border-radius: 6px;\n      background-color: ", ";\n    }\n\n    &-images {\n      margin-top: 8px;\n      padding: 8px;\n      display: flex;\n      gap: 8px;\n      background-color: ", ";\n      \n    }\n\n    &-footer {\n      display: block;\n      margin-top: 8px;\n      font-size: 12px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n  }\n\n  &-rag-item ~ &-rag-item {\n    margin-top: 8px;\n  }\n}\n"])), function (p) {
-  return p.prefix;
+import { createGlobalStyle } from 'antd-style';
+export default createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-operate-card {\n  width: 100%;\n  border-radius: ", "px;\n  overflow: hidden;\n  background-color: ", ";\n\n  &-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 0 12px;\n    height: 32px;\n\n    &-icon {\n      font-size: 16px;\n    }\n\n    &-title {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-size: 13px;\n      font-weight: 500;\n      color: ", ";\n    }\n\n    &-description {\n    overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font-size: 12px;\n      color: ", ";\n    }\n\n    &-arrow {\n      margin: 0 0 0 auto;\n    }\n\n    &-has-body {\n      cursor: pointer;\n    }\n  }\n\n  &-body {\n    opacity: 0;\n    animation: ", "-operate-card-body-open 0.2s ease-in-out forwards;\n    \n    @keyframes ", "-operate-card-body-open {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n  \n  }\n\n\n  &-line-body {\n    margin: 0 12px 12px 20px;\n    border-left: 1px solid ", ";\n  }\n\n  &-thinking {\n    padding-left: 16px;\n    font-size: 12px;\n    line-height: 20px;\n    color: ", ";\n    opacity: 0.85;\n    white-space: pre-wrap;\n  }\n\n\n  &-todo-list {\n\n    &-item {\n      height: 32px;\n      display: flex;\n      align-items: center;\n      padding: 0 12px;\n      gap: 8px;\n      \n      color: ", ";\n\n\n      &-done {\n        color: ", ";\n      }\n\n      &-icon {\n        font-size: 16px;\n      }\n\n      &-title {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n        font-size: 12px;\n      }\n\n      &-done {\n        \n      }\n\n    }\n  \n  }\n\n\n  &-web-search-item {\n    display: flex;\n    height: 32px;\n    align-items: center;\n    padding: 0 12px;\n    gap: 8px;\n    color: ", ";\n    cursor: pointer;\n\n    &-icon {\n      display: block;\n      width: 16px;\n      height: 16px;\n      border: 1px solid ", ";\n      border-radius: 99px;\n    }\n\n    &-title {\n      font-size: 12px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n        \n      }\n\n    }\n\n    &-subTitle {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      border-left: 1px solid ", ";\n      font-size: 12px;\n      line-height: 1;\n      color: ", ";\n      padding-left: 8px;\n      margin-left: 4px;\n    }\n\n  }\n\n\n  &-tool-call-block {\n    margin-left: 16px;\n  \n    &-title {\n      font-size: 12px;\n      color: ", ";\n      line-height: 20px;\n      margin-bottom: 4px;\n    }\n\n    &-content {\n      font-size: 12px;\n      line-height: 20px;\n      font-family: ", ";\n      border-radius: 6px;\n      padding: 8px;\n      background-color: ", ";\n      white-space: pre-wrap;\n    }\n  }\n\n  &-tool-call-block ~ &-tool-call-block {\n    margin-top: 8px;\n  }\n\n\n  &-device-action {\n    height: auto;\n    align-items: flex-start;\n\n    &-icon {\n      margin-top: 6px;\n    }\n\n    &-time {\n      margin-bottom: 4px;\n      font-size: 12px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n    &-content {\n      \n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n    }\n\n    &-description {\n      width: 0;\n      flex: 1;\n      margin: 8px 0 6px 0;\n    }\n\n    &-image {\n      margin: 4px 0;\n      height: 32px;\n      margin-left: 8px;\n      display: block;\n      border-radius: 6px;\n      overflow: hidden;\n      border: 1px solid ", ";\n    }\n\n\n    \n  }\n\n  &-rag-item {\n    margin-left: 16px;\n\n    &-title {\n      font-size: 12px;\n      color: ", ";\n      line-height: 20px;\n      margin-bottom: 4px;\n    }\n\n    &-content {\n      padding: 8px;\n      border-radius: 6px;\n      background-color: ", ";\n    }\n\n    &-images {\n      margin-top: 8px;\n      padding: 8px;\n      display: flex;\n      gap: 8px;\n      background-color: ", ";\n      \n    }\n\n    &-footer {\n      display: block;\n      margin-top: 8px;\n      font-size: 12px;\n      line-height: 20px;\n      color: ", ";\n    }\n\n  }\n\n  &-rag-item ~ &-rag-item {\n    margin-top: 8px;\n  }\n}\n"])), function (p) {
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.borderRadiusLG;
 }, function (p) {
@@ -12,9 +12,9 @@ export default createGlobalStyle(_templateObject || (_templateObject = _taggedTe
 }, function (p) {
   return p.theme.colorTextTertiary;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
-  return p.prefix;
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.colorBorderSecondary;
 }, function (p) {

package/lib/Sender/ModeSelect/index.js

@@ -7,14 +7,15 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import React, { useMemo } from "react";
-import { createGlobalStyle, useProviderContext } from "../..";
+import { createGlobalStyle } from 'antd-style';
+import { useProviderContext } from "../..";
 import { SparkFalseLine } from "@agentscope-ai/icons";
 import { Tooltip } from "@agentscope-ai/design";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-sender-mode-select {\n  position: relative;\n  height: 40px;\n\n  &-options {\n    position: absolute;\n    top: 4px;\n    left: 0;\n    right: 0;\n    display: flex;\n    gap: 8px;\n    transition: all 0.3s;\n  }\n\n  &-option {\n    height: 28px;\n    display: flex;\n    align-items: center;\n    fonts: 14px;\n    padding: 0 8px;\n    border-radius: ", "px;\n    gap: 4px;\n    border: 1px solid ", ";\n    cursor: pointer;\n    color: ", ";\n    transition: all 0.3s;\n\n    &:hover {\n      border-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &-display {\n    position: absolute;\n    top: 8px;\n    left: 0;\n    right: 0;\n    height: 40px;\n    border: 1px solid ", ";\n    border-radius: ", "px ", "px 0 0;\n    background: ", ";\n    transition: all 0.3s;\n\n    &-flex {\n      display: flex;\n      justify-content: space-between; \n      align-items: center;\n      height: 32px;\n      padding: 0 12px;\n    }\n\n    &-label {\n      width: 0;\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      fontsize: 14px;\n      color: ", ";\n    }\n\n    &-desc {\n      display: flex;\n      align-items: center;\n      margin: 0 12px 0 auto;\n    }\n  }\n\n  &-hide {\n    top: 45px;\n  }\n}\n\n"])), function (p) {
-  return p.prefix;
+var Style = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-sender-mode-select {\n  position: relative;\n  height: 40px;\n\n  &-options {\n    position: absolute;\n    top: 4px;\n    left: 0;\n    right: 0;\n    display: flex;\n    gap: 8px;\n    transition: all 0.3s;\n  }\n\n  &-option {\n    height: 28px;\n    display: flex;\n    align-items: center;\n    fonts: 14px;\n    padding: 0 8px;\n    border-radius: ", "px;\n    gap: 4px;\n    border: 1px solid ", ";\n    cursor: pointer;\n    color: ", ";\n    transition: all 0.3s;\n\n    &:hover {\n      border-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &-display {\n    position: absolute;\n    top: 8px;\n    left: 0;\n    right: 0;\n    height: 40px;\n    border: 1px solid ", ";\n    border-radius: ", "px ", "px 0 0;\n    background: ", ";\n    transition: all 0.3s;\n\n    &-flex {\n      display: flex;\n      justify-content: space-between; \n      align-items: center;\n      height: 32px;\n      padding: 0 12px;\n    }\n\n    &-label {\n      width: 0;\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      fontsize: 14px;\n      color: ", ";\n    }\n\n    &-desc {\n      display: flex;\n      align-items: center;\n      margin: 0 12px 0 auto;\n    }\n  }\n\n  &-hide {\n    top: 45px;\n  }\n}\n\n"])), function (p) {
+  return p.theme.prefixCls;
 }, function (p) {
   return p.theme.borderRadius;
 }, function (p) {
@@ -37,7 +38,6 @@ var useStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTe
   return p.theme.colorTextSecondary;
 });
 export default function (props) {
-  var Style = useStyle();
   var _useProviderContext = useProviderContext(),
     getPrefixCls = _useProviderContext.getPrefixCls;
   var prefixCls = getPrefixCls('sender-mode-select');