@agentscope-ai/chat 1.1.8 → 1.1.10

package/lib/OperateCard/OperateCard.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+export interface IOperateCardProps {
+    /**
+     * @description 头部配置
+     * @descriptionEn Header Config
+     * @default {}
+     */
+    header: {
+        className?: string;
+        style?: React.CSSProperties;
+        icon: React.ReactNode;
+        title: React.ReactNode | string;
+        description?: React.ReactNode | string;
+    };
+    /**
+     * @description 内容配置
+     * @descriptionEn Body Config
+     * @default {}
+     */
+    body?: {
+        children?: React.ReactNode;
+        defaultOpen?: boolean;
+    };
+}
+declare function OperateCard(props: IOperateCardProps): import("react/jsx-runtime").JSX.Element;
+declare namespace OperateCard {
+    var LineBody: (props: {
+        children?: import("react").ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export default OperateCard;

package/lib/OperateCard/OperateCard.js

@@ -0,0 +1,74 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useState } from 'react';
+import { useProviderContext } from "../Provider";
+import useStyle from "./style";
+import classNames from 'classnames';
+import { SparkDownLine, SparkUpLine } from '@agentscope-ai/icons';
+import { IconButton } from '@ali/agentscope-ai-design';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function LineBody(props) {
+  var _useProviderContext = useProviderContext(),
+    getPrefixCls = _useProviderContext.getPrefixCls;
+  var prefixCls = getPrefixCls('operate-card');
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-line-body"),
+      children: props.children
+    })
+  });
+}
+function OperateCard(props) {
+  var _props$body;
+  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],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
+      className: prefixCls,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: classNames("".concat(prefixCls, "-header"), props.header.className, _defineProperty({}, "".concat(prefixCls, "-header-has-body"), props.body)),
+        onClick: function onClick() {
+          if (props.body) {
+            setOpen(!open);
+          }
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixCls, "-header-icon"),
+          children: props.header.icon
+        }), typeof props.header.title === 'string' ? /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixCls, "-header-title"),
+          children: props.header.title
+        }) : props.header.title, props.header.description && /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixCls, "-header-description"),
+          children: props.header.description
+        }), props.body && /*#__PURE__*/_jsx(IconButton, {
+          size: "small",
+          bordered: false,
+          className: "".concat(prefixCls, "-header-arrow"),
+          icon: open ? /*#__PURE__*/_jsx(SparkUpLine, {}) : /*#__PURE__*/_jsx(SparkDownLine, {})
+        })]
+      }), props.body && open && /*#__PURE__*/_jsx("div", {
+        className: "".concat(prefixCls, "-body"),
+        children: props.body.children
+      })]
+    })]
+  });
+}
+OperateCard.LineBody = LineBody;
+export default OperateCard;

package/lib/OperateCard/index.d.ts

@@ -0,0 +1 @@
+export { default, type IOperateCardProps } from './OperateCard';

package/lib/OperateCard/index.js

@@ -0,0 +1 @@
+export { default } from "./OperateCard";

package/lib/OperateCard/preset/Rag.d.ts

@@ -0,0 +1,26 @@
+export interface IRagProps {
+    /**
+     * @description 标题
+     * @descriptionEn Title
+     * @default '知识库检索'
+     */
+    title?: string;
+    /**
+     * @description 副标题
+     * @descriptionEn Subtitle
+     * @default ''
+     */
+    subTitle?: string;
+    /**
+     * @description 召回知识列表
+     * @descriptionEn RAG List
+     * @default []
+     */
+    list: {
+        title: string;
+        content: string;
+        footer: string;
+        link?: string;
+    }[];
+}
+export default function (props: IRagProps): import("react/jsx-runtime").JSX.Element;

package/lib/OperateCard/preset/Rag.js

@@ -0,0 +1,47 @@
+import { OperateCard, useProviderContext } from "../..";
+import { SparkBookLine } from '@agentscope-ai/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function (props) {
+  var _useProviderContext = useProviderContext(),
+    getPrefixCls = _useProviderContext.getPrefixCls;
+  var prefixCls = getPrefixCls('operate-card');
+  var _props$title = props.title,
+    title = _props$title === void 0 ? '知识库检索' : _props$title,
+    subTitle = props.subTitle;
+  return /*#__PURE__*/_jsx(OperateCard, {
+    header: {
+      icon: /*#__PURE__*/_jsx(SparkBookLine, {}),
+      title: title,
+      description: subTitle
+    },
+    body: {
+      defaultOpen: true,
+      children: /*#__PURE__*/_jsx(OperateCard.LineBody, {
+        children: props.list.map(function (item, index) {
+          return /*#__PURE__*/_jsxs("div", {
+            className: "".concat(prefixCls, "-rag-item"),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "".concat(prefixCls, "-rag-item-title"),
+              children: item.title
+            }), /*#__PURE__*/_jsxs("div", {
+              className: "".concat(prefixCls, "-rag-item-content"),
+              children: [item.content, item.link ? /*#__PURE__*/_jsx("a", {
+                onClick: function onClick() {
+                  window.open(item.link, '_blank');
+                },
+                className: "".concat(prefixCls, "-rag-item-footer"),
+                href: item.link,
+                target: "_blank",
+                children: item.footer
+              }) : /*#__PURE__*/_jsx("div", {
+                className: "".concat(prefixCls, "-rag-item-footer"),
+                children: item.footer
+              })]
+            })]
+          }, index);
+        })
+      })
+    }
+  });
+}

package/lib/OperateCard/preset/Thinking.d.ts

@@ -0,0 +1,21 @@
+export interface IThinkingProps {
+    /**
+     * @description 标题
+     * @descriptionEn Title
+     * @default ''
+     */
+    title: string;
+    /**
+     * @description 副标题
+     * @descriptionEn Subtitle
+     * @default ''
+     */
+    subTitle?: string;
+    /**
+     * @description 思考内容
+     * @descriptionEn Thinking Content
+     * @default ''
+     */
+    content: string;
+}
+export default function (props: IThinkingProps): import("react/jsx-runtime").JSX.Element;

package/lib/OperateCard/preset/Thinking.js

@@ -0,0 +1,24 @@
+import { OperateCard, useProviderContext } from "../..";
+import { SparkMemoryLine } from '@agentscope-ai/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function (props) {
+  var _useProviderContext = useProviderContext(),
+    getPrefixCls = _useProviderContext.getPrefixCls;
+  var prefixCls = getPrefixCls('operate-card');
+  return /*#__PURE__*/_jsx(OperateCard, {
+    header: {
+      icon: /*#__PURE__*/_jsx(SparkMemoryLine, {}),
+      title: props.title,
+      description: props.subTitle
+    },
+    body: {
+      defaultOpen: true,
+      children: /*#__PURE__*/_jsx(OperateCard.LineBody, {
+        children: /*#__PURE__*/_jsx("div", {
+          className: "".concat(prefixCls, "-thinking"),
+          children: props.content
+        })
+      })
+    }
+  });
+}

package/lib/OperateCard/preset/TodoList.d.ts

@@ -0,0 +1,24 @@
+export interface ITodoListProps {
+    /**
+     * @description 标题
+     * @descriptionEn Title
+     * @default 'Task List'
+     */
+    title?: string;
+    /**
+     * @description 默认展开
+     * @descriptionEn Default Open
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * @description Todo 列表
+     * @descriptionEn Todo List
+     * @default []
+     */
+    list: {
+        title: string;
+        status: 'done' | 'todo' | 'running';
+    }[];
+}
+export default function (props: ITodoListProps): import("react/jsx-runtime").JSX.Element;

package/lib/OperateCard/preset/TodoList.js

@@ -0,0 +1,53 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+import { OperateCard, useProviderContext } from "../..";
+import { SparkCheckCircleLine, SparkLoadingLine, SparkProjectNoLine } from '@agentscope-ai/icons';
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function (props) {
+  var _useProviderContext = useProviderContext(),
+    getPrefixCls = _useProviderContext.getPrefixCls;
+  var prefixCls = getPrefixCls('operate-card');
+  var _props$title = props.title,
+    title = _props$title === void 0 ? 'Task List' : _props$title;
+  var doneCount = props.list.filter(function (item) {
+    return item.status === 'done';
+  }).length;
+  return /*#__PURE__*/_jsx(OperateCard, {
+    header: {
+      icon: /*#__PURE__*/_jsx(SparkProjectNoLine, {}),
+      title: title,
+      description: "\xB7 ".concat(doneCount ? doneCount + ' of ' : '', " ").concat(props.list.length)
+    },
+    body: {
+      defaultOpen: props.defaultOpen,
+      children: /*#__PURE__*/_jsx("div", {
+        className: "".concat(prefixCls, "-todo-list"),
+        children: props.list.map(function (item) {
+          return /*#__PURE__*/_jsxs("div", {
+            className: classNames(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-todo-list-item"), true), "".concat(prefixCls, "-todo-list-item-").concat(item.status), true)),
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "".concat(prefixCls, "-todo-list-item-icon"),
+              children: {
+                'done': /*#__PURE__*/_jsx(SparkCheckCircleLine, {}),
+                'todo': /*#__PURE__*/_jsx(SparkCheckCircleLine, {}),
+                'running': /*#__PURE__*/_jsx(SparkLoadingLine, {
+                  spin: true
+                })
+              }[item.status]
+            }), /*#__PURE__*/_jsx("div", {
+              className: "".concat(prefixCls, "-todo-list-item-title"),
+              style: {
+                textDecoration: item.status === 'done' ? 'line-through' : 'none'
+              },
+              children: item.title
+            })]
+          }, item.title);
+        })
+      })
+    }
+  });
+}

package/lib/OperateCard/preset/ToolCall.d.ts

@@ -0,0 +1,27 @@
+export interface IToolCallProps {
+    /**
+     * @description 标题
+     * @descriptionEn Title
+     * @default 'Call Tool'
+     */
+    title?: string;
+    /**
+     * @description 副标题
+     * @descriptionEn Subtitle
+     * @default ''
+     */
+    subTitle?: string;
+    /**
+     * @description 工具调用入参
+     * @descriptionEn Tool Call Input
+     * @default ''
+     */
+    input: string | Record<string, any>;
+    /**
+     * @description 工具调用输出
+     * @descriptionEn Tool Call Output
+     * @default ''
+     */
+    output: string | Record<string, any>;
+}
+export default function (props: IToolCallProps): import("react/jsx-runtime").JSX.Element;

package/lib/OperateCard/preset/ToolCall.js

@@ -0,0 +1,44 @@
+import { OperateCard, useProviderContext } from "../..";
+import { SparkToolLine } from '@agentscope-ai/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Block(props) {
+  var _useProviderContext = useProviderContext(),
+    getPrefixCls = _useProviderContext.getPrefixCls;
+  var prefixCls = getPrefixCls('operate-card');
+  var contentString = typeof props.content === 'string' ? props.content : JSON.stringify(props.content, null, 2);
+  return /*#__PURE__*/_jsxs("div", {
+    className: "".concat(prefixCls, "-tool-call-block"),
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-tool-call-block-title"),
+      children: props.title
+    }), /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-tool-call-block-content"),
+      children: contentString
+    })]
+  });
+}
+export default function (props) {
+  var _props$title = props.title,
+    title = _props$title === void 0 ? 'Call Tool' : _props$title,
+    subTitle = props.subTitle;
+  return /*#__PURE__*/_jsx(OperateCard, {
+    header: {
+      icon: /*#__PURE__*/_jsx(SparkToolLine, {}),
+      title: title,
+      description: subTitle
+    },
+    body: {
+      defaultOpen: true,
+      children: /*#__PURE__*/_jsxs(OperateCard.LineBody, {
+        children: [/*#__PURE__*/_jsx(Block, {
+          title: "Parameters",
+          content: props.input
+        }), /*#__PURE__*/_jsx(Block, {
+          title: "Result",
+          content: props.output
+        })]
+      })
+    }
+  });
+}

package/lib/OperateCard/preset/WebSearch.d.ts

@@ -0,0 +1,26 @@
+export interface IWebSearchProps {
+    /**
+     * @description 标题
+     * @descriptionEn Title
+     * @default '联网搜索'
+     */
+    title?: string;
+    /**
+     * @description 副标题
+     * @descriptionEn Subtitle
+     * @default ''
+     */
+    subTitle?: string;
+    /**
+     * @description 列表
+     * @descriptionEn List
+     * @default []
+     */
+    list: {
+        title: string;
+        subTitle?: string;
+        link: string;
+        icon: string;
+    }[];
+}
+export default function (props: IWebSearchProps): import("react/jsx-runtime").JSX.Element;

package/lib/OperateCard/preset/WebSearch.js

@@ -0,0 +1,48 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+import { OperateCard, useProviderContext } from "../..";
+import { SparkSearchLine } from '@agentscope-ai/icons';
+import classNames from 'classnames';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export default function (props) {
+  var _useProviderContext = useProviderContext(),
+    getPrefixCls = _useProviderContext.getPrefixCls;
+  var prefixCls = getPrefixCls('operate-card');
+  var _props$title = props.title,
+    title = _props$title === void 0 ? '联网搜索' : _props$title,
+    subTitle = props.subTitle;
+  return /*#__PURE__*/_jsx(OperateCard, {
+    header: {
+      icon: /*#__PURE__*/_jsx(SparkSearchLine, {}),
+      title: title,
+      description: subTitle
+    },
+    body: {
+      defaultOpen: true,
+      children: /*#__PURE__*/_jsx(OperateCard.LineBody, {
+        children: props.list.map(function (item) {
+          return /*#__PURE__*/_jsxs("div", {
+            className: classNames(_defineProperty({}, "".concat(prefixCls, "-web-search-item"), true)),
+            onClick: function onClick() {
+              window.open(item.link, '_blank');
+            },
+            children: [/*#__PURE__*/_jsx("img", {
+              className: "".concat(prefixCls, "-web-search-item-icon"),
+              src: item.icon,
+              alt: item.title
+            }), /*#__PURE__*/_jsx("div", {
+              className: "".concat(prefixCls, "-web-search-item-title"),
+              children: item.title
+            }), item.subTitle && /*#__PURE__*/_jsx("div", {
+              className: "".concat(prefixCls, "-web-search-item-subTitle"),
+              children: item.subTitle
+            })]
+          }, item.title);
+        })
+      })
+    }
+  });
+}

package/lib/OperateCard/preset/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Thinking, type IThinkingProps } from './Thinking';
+export { default as TodoList, type ITodoListProps } from './TodoList';
+export { default as ToolCall, type IToolCallProps } from './ToolCall';
+export { default as WebSearch, type IWebSearchProps } from './WebSearch';
+export { default as Rag, type IRagProps } from './Rag';

package/lib/OperateCard/preset/index.js

@@ -0,0 +1,5 @@
+export { default as Thinking } from "./Thinking";
+export { default as TodoList } from "./TodoList";
+export { default as ToolCall } from "./ToolCall";
+export { default as WebSearch } from "./WebSearch";
+export { default as Rag } from "./Rag";

package/lib/OperateCard/style.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/lib/OperateCard/style.js

@@ -0,0 +1,54 @@
+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  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      font-size: 12px;\n      line-height: 20px;\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;
+}, function (p) {
+  return p.theme.borderRadiusLG;
+}, function (p) {
+  return p.theme.colorFillTertiary;
+}, function (p) {
+  return p.theme.colorText;
+}, function (p) {
+  return p.theme.colorTextTertiary;
+}, function (p) {
+  return p.prefix;
+}, function (p) {
+  return p.prefix;
+}, function (p) {
+  return p.theme.colorBorderSecondary;
+}, function (p) {
+  return p.theme.colorTextTertiary;
+}, function (p) {
+  return p.theme.colorText;
+}, function (p) {
+  return p.theme.colorTextTertiary;
+}, function (p) {
+  return p.theme.colorText;
+}, function (p) {
+  return p.theme.colorBorderSecondary;
+}, function (p) {
+  return p.theme.colorTextSecondary;
+}, function (p) {
+  return p.theme.colorText;
+}, function (p) {
+  return p.theme.colorBorderSecondary;
+}, function (p) {
+  return p.theme.colorTextTertiary;
+}, function (p) {
+  return p.theme.colorText;
+}, function (p) {
+  return p.theme.fontFamilyCode;
+}, function (p) {
+  return p.theme.colorFillTertiary;
+}, function (p) {
+  return p.theme.colorTextSecondary;
+}, function (p) {
+  return p.theme.colorBorderSecondary;
+}, function (p) {
+  return p.theme.colorText;
+}, function (p) {
+  return p.theme.colorFillTertiary;
+}, function (p) {
+  return p.theme.colorTextTertiary;
+});

package/lib/Sender/ModeSelect/index.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 interface IItem {
     icon: string | React.ReactNode;
     label: string | React.ReactNode;
+    selectedLabel?: string | React.ReactNode;
     tooltip?: string | React.ReactNode;
     value: string;
 }

package/lib/Sender/ModeSelect/index.js

@@ -13,7 +13,7 @@ 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      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) {
+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;
 }, function (p) {
   return p.theme.borderRadius;
@@ -46,7 +46,7 @@ export default function (props) {
   var valueObject = useMemo(function () {
     var item = props.options.find(function (item) {
       return item.value === value;
-    });
+    }) || {};
     return item;
   }, [props.value]);
   var close = /*#__PURE__*/_jsx(SparkFalseLine, {
@@ -58,7 +58,6 @@ export default function (props) {
       fontSize: 20
     }
   });
-  console.log(props.options);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
       className: prefixCls,
@@ -79,6 +78,7 @@ export default function (props) {
         children: /*#__PURE__*/_jsxs("div", {
           className: "".concat(prefixCls, "-display-flex"),
           children: [/*#__PURE__*/_jsx(Display, _objectSpread(_objectSpread({}, valueObject), {}, {
+            label: (valueObject === null || valueObject === void 0 ? void 0 : valueObject.selectedLabel) || (valueObject === null || valueObject === void 0 ? void 0 : valueObject.label),
             className: "".concat(prefixCls, "-display-label")
           })), props.desc && /*#__PURE__*/_jsx("div", {
             className: "".concat(prefixCls, "-display-desc"),
@@ -101,6 +101,7 @@ function Display(props) {
   if (props.tooltip) {
     return /*#__PURE__*/_jsx(Tooltip, {
       title: props.tooltip,
+      placement: "topLeft",
       children: node
     });
   } else {

package/lib/Sender/index.js

@@ -234,7 +234,6 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
         children: header
       }), /*#__PURE__*/_jsxs("div", {
         className: "".concat(prefixCls, "-content"),
-        onMouseDown: onContentMouseDown,
         children: [/*#__PURE__*/_jsx(InputTextArea, _objectSpread(_objectSpread({}, inputProps), {}, {
           disabled: disabled,
           style: styles.input,

package/lib/index.d.ts

@@ -17,9 +17,11 @@ export { default as Conversations, default as HistoryPanel, type ConversationsPr
 export { default as Disclaimer, type IDisclaimerProps } from './Disclaimer';
 export { default as ImageGenerator, type IImageGeneratorProps, } from './ImageGenerator';
 export { default as Markdown, type MarkdownProps as IMarkdownProps, type MarkdownProps, } from './Markdown';
-export { default as useTypedEffect } from './Markdown/hooks/useTypedEffect';
 export { default as Mermaid, type IMermaidProps } from './Mermaid';
+export { default as OperateCard, type IOperateCardProps } from './OperateCard';
 export { default as ChatInput, default as Sender, type SenderProps as IChatInputProps, type SenderProps, } from './Sender';
 export { default as createGlobalStyle } from './Util/createStyle';
 export { default as sleep } from './Util/sleep';
 export { default as Welcome, type IWelcomeProps } from './Welcome';
+export * from './OperateCard/preset';
+export { default as DeviceAction, type IDeviceActionProps } from './DeviceAction';

package/lib/index.js

@@ -16,9 +16,11 @@ export { default as Conversations, default as HistoryPanel } from "./Conversatio
 export { default as Disclaimer } from "./Disclaimer";
 export { default as ImageGenerator } from "./ImageGenerator";
 export { default as Markdown } from "./Markdown";
-export { default as useTypedEffect } from "./Markdown/hooks/useTypedEffect";
 export { default as Mermaid } from "./Mermaid";
+export { default as OperateCard } from "./OperateCard";
 export { default as ChatInput, default as Sender } from "./Sender";
 export { default as createGlobalStyle } from "./Util/createStyle";
 export { default as sleep } from "./Util/sleep";
-export { default as Welcome } from "./Welcome";
+export { default as Welcome } from "./Welcome";
+export * from "./OperateCard/preset";
+export { default as DeviceAction } from "./DeviceAction";