@agentscope-ai/chat 1.1.4 → 1.1.8

package/lib/Sender/SenderHeader.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+export interface SendHeaderContextProps {
+    /**
+     * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+     * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+     */
+    prefixCls: string;
+}
+export declare const SendHeaderContext: React.Context<SendHeaderContextProps>;
+export type SemanticType = 'header' | 'content';
+export interface SenderHeaderProps {
+    /**
+     * @description 是否强制渲染组件，即使不可见也保持DOM结构
+     * @descriptionEn Whether to force render the component, maintaining DOM structure even when invisible
+     */
+    forceRender?: boolean;
+    /**
+     * @description 是否展开头部区域，控制显示状态
+     * @descriptionEn Whether to expand the header area, controls display state
+     */
+    open?: boolean;
+    /**
+     * @description 展开状态变化时的回调函数
+     * @descriptionEn Callback function when expand state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * @description 头部标题内容，支持文本或React元素
+     * @descriptionEn Header title content, supports text or React elements
+     */
+    title?: React.ReactNode;
+    /**
+     * @description 头部内容区域，用于显示额外的信息或控件
+     * @descriptionEn Header content area for displaying additional information or controls
+     */
+    children?: React.ReactNode;
+    /**
+     * @description 组件的CSS类名
+     * @descriptionEn CSS class name for the component
+     */
+    className?: string;
+    /**
+     * @description 组件的内联样式对象
+     * @descriptionEn Inline style object for the component
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description 语义化CSS类名，用于为不同区域添加自定义类名
+     * @descriptionEn Semantic CSS class names for adding custom classes to different areas
+     */
+    classNames?: Partial<Record<SemanticType, string>>;
+    /**
+     * @description 语义化样式对象，用于精确控制不同区域的样式
+     * @descriptionEn Semantic style object for precise control of different area styles
+     */
+    styles?: Partial<Record<SemanticType, React.CSSProperties>>;
+    /**
+     * @description 是否显示关闭按钮，用于控制头部区域的展开/收起
+     * @descriptionEn Whether to show close button for controlling header area expand/collapse
+     */
+    closable?: boolean;
+}
+export default function SenderHeader(props: SenderHeaderProps): import("react/jsx-runtime").JSX.Element;

package/{dist/sender → lib/Sender}/SenderHeader.js

@@ -4,11 +4,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 { CloseOutlined } from '@ant-design/icons';
+import { CloseOutlined } from "@agentscope-ai/icons-override-antd";
 import { Button } from 'antd';
 import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var SendHeaderContext = /*#__PURE__*/React.createContext({});
 var collapseHeight = function collapseHeight() {
   return {
@@ -24,7 +26,7 @@ export default function SenderHeader(props) {
   var title = props.title,
     onOpenChange = props.onOpenChange,
     open = props.open,
-    children = props.children,
+    _children = props.children,
     className = props.className,
     style = props.style,
     _props$classNames = props.classNames,
@@ -36,7 +38,7 @@ export default function SenderHeader(props) {
   var _React$useContext = React.useContext(SendHeaderContext),
     prefixCls = _React$useContext.prefixCls;
   var headerCls = "".concat(prefixCls, "-header");
-  return /*#__PURE__*/React.createElement(CSSMotion, {
+  return /*#__PURE__*/_jsx(CSSMotion, {
     motionEnter: true,
     motionLeave: true,
     motionName: "".concat(headerCls, "-motion"),
@@ -46,34 +48,40 @@ export default function SenderHeader(props) {
     onLeaveStart: expandedHeight,
     onLeaveActive: collapseHeight,
     visible: open,
-    forceRender: forceRender
-  }, function (_ref) {
-    var motionClassName = _ref.className,
-      motionStyle = _ref.style;
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames(headerCls, motionClassName, className),
-      style: _objectSpread(_objectSpread({}, motionStyle), style)
-    }, (closable !== false || title) && /*#__PURE__*/React.createElement("div", {
-      className:
-      // We follow antd naming standard here.
-      // So the header part is use `-header` suffix.
-      // Though its little bit weird for double `-header`.
-      classNames("".concat(headerCls, "-header"), classes.header),
-      style: _objectSpread({}, styles.header)
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(headerCls, "-title")
-    }, title), closable !== false && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(headerCls, "-close")
-    }, /*#__PURE__*/React.createElement(Button, {
-      type: "text",
-      icon: /*#__PURE__*/React.createElement(CloseOutlined, null),
-      size: "small",
-      onClick: function onClick() {
-        onOpenChange === null || onOpenChange === void 0 || onOpenChange(!open);
-      }
-    }))), children && /*#__PURE__*/React.createElement("div", {
-      className: classNames("".concat(headerCls, "-content"), classes.content),
-      style: _objectSpread({}, styles.content)
-    }, children));
+    forceRender: forceRender,
+    children: function children(_ref) {
+      var motionClassName = _ref.className,
+        motionStyle = _ref.style;
+      return /*#__PURE__*/_jsxs("div", {
+        className: classNames(headerCls, motionClassName, className),
+        style: _objectSpread(_objectSpread({}, motionStyle), style),
+        children: [(closable !== false || title) && /*#__PURE__*/_jsxs("div", {
+          className:
+          // We follow antd naming standard here.
+          // So the header part is use `-header` suffix.
+          // Though its little bit weird for double `-header`.
+          classNames("".concat(headerCls, "-header"), classes.header),
+          style: _objectSpread({}, styles.header),
+          children: [/*#__PURE__*/_jsx("div", {
+            className: "".concat(headerCls, "-title"),
+            children: title
+          }), closable !== false && /*#__PURE__*/_jsx("div", {
+            className: "".concat(headerCls, "-close"),
+            children: /*#__PURE__*/_jsx(Button, {
+              type: "text",
+              icon: /*#__PURE__*/_jsx(CloseOutlined, {}),
+              size: "small",
+              onClick: function onClick() {
+                onOpenChange === null || onOpenChange === void 0 || onOpenChange(!open);
+              }
+            })
+          })]
+        }), _children && /*#__PURE__*/_jsx("div", {
+          className: classNames("".concat(headerCls, "-content"), classes.content),
+          style: _objectSpread({}, styles.content),
+          children: _children
+        })]
+      });
+    }
   });
 }

package/{dist/sender → lib/Sender}/StopLoading.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 declare const StopLoadingIcon: React.MemoExoticComponent<(props: {
     className?: string;
-}) => React.JSX.Element>;
+}) => import("react/jsx-runtime").JSX.Element>;
 export default StopLoadingIcon;

package/lib/Sender/StopLoading.js

@@ -0,0 +1,25 @@
+import React, { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var StopLoadingIcon = /*#__PURE__*/memo(function (props) {
+  var className = props.className;
+  return /*#__PURE__*/_jsxs("svg", {
+    color: "currentColor",
+    viewBox: "0 0 1000 1000",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    className: className,
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "Stop Loading"
+    }), /*#__PURE__*/_jsx("rect", {
+      fill: "currentColor",
+      height: "250",
+      rx: "24",
+      ry: "24",
+      width: "250",
+      x: "375",
+      y: "375"
+    })]
+  });
+});
+export default StopLoadingIcon;

package/lib/Sender/components/ActionButton.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+export interface ActionButtonContextProps {
+    /**
+     * @description 自定义CSS类名前缀，用于样式隔离和主题定制
+     * @descriptionEn Custom CSS class name prefix for style isolation and theme customization
+     */
+    prefixCls: string;
+    /**
+     * @description 发送消息的回调函数
+     * @descriptionEn Callback function for sending messages
+     */
+    onSend?: VoidFunction;
+    /**
+     * @description 是否禁用发送按钮
+     * @descriptionEn Whether to disable the send button
+     */
+    onSendDisabled?: boolean;
+    /**
+     * @description 清空输入的回调函数
+     * @descriptionEn Callback function for clearing input
+     */
+    onClear?: VoidFunction;
+    /**
+     * @description 是否禁用清空按钮
+     * @descriptionEn Whether to disable the clear button
+     */
+    onClearDisabled?: boolean;
+    /**
+     * @description 取消操作的回调函数
+     * @descriptionEn Callback function for canceling operations
+     */
+    onCancel?: VoidFunction;
+    /**
+     * @description 是否禁用取消按钮
+     * @descriptionEn Whether to disable the cancel button
+     */
+    onCancelDisabled?: boolean;
+    /**
+     * @description 语音输入的回调函数
+     * @descriptionEn Callback function for voice input
+     */
+    onSpeech?: VoidFunction;
+    /**
+     * @description 是否禁用语音按钮
+     * @descriptionEn Whether to disable the speech button
+     */
+    onSpeechDisabled?: boolean;
+    /**
+     * @description 是否正在录音，影响语音按钮的显示状态
+     * @descriptionEn Whether currently recording, affects the display state of the speech button
+     */
+    speechRecording?: boolean;
+    /**
+     * @description 是否禁用所有操作按钮
+     * @descriptionEn Whether to disable all action buttons
+     */
+    disabled?: boolean;
+}
+export declare const ActionButtonContext: React.Context<ActionButtonContextProps>;
+export interface ActionButtonProps {
+    /**
+     * @description 按钮的操作类型，决定按钮的行为和样式
+     * @descriptionEn Action type of the button, determines button behavior and style
+     */
+    action: 'onSend' | 'onClear' | 'onCancel' | 'onSpeech';
+    onClick?: (e: any) => void;
+    className?: string;
+    disabled?: boolean;
+}
+export declare function ActionButton(props: ActionButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<ActionButtonProps & React.RefAttributes<unknown>>;
+export default _default;

package/{dist/sender → lib/Sender}/components/ActionButton.js

@@ -1,16 +1,18 @@
 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); }
 var _excluded = ["className", "action", "onClick"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Button } from 'antd';
+import { IconButton } from "@agentscope-ai/design";
 import classNames from 'classnames';
 import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var ActionButtonContext = /*#__PURE__*/React.createContext(null);
-export function ActionButton(props, ref) {
+export function ActionButton(props) {
   var _ref;
   var className = props.className,
     action = props.action,
@@ -21,8 +23,10 @@ export function ActionButton(props, ref) {
     rootDisabled = context.disabled;
   var _onClick = context[action];
   var mergedDisabled = (_ref = rootDisabled !== null && rootDisabled !== void 0 ? rootDisabled : restProps.disabled) !== null && _ref !== void 0 ? _ref : context["".concat(action, "Disabled")];
-  return /*#__PURE__*/React.createElement(Button, _extends({}, restProps, {
-    ref: ref,
+  return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+    bordered: false,
+    disabled: mergedDisabled
+  }, restProps), {}, {
     onClick: function onClick(e) {
       if (!mergedDisabled) {
         if (_onClick) {

package/lib/Sender/components/ClearButton.js

@@ -0,0 +1,19 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 { ClearOutlined } from "@agentscope-ai/icons-override-antd";
+import * as React from 'react';
+import ActionButton from "./ActionButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+function ClearButton(props, ref) {
+  return /*#__PURE__*/_jsx(ActionButton, _objectSpread(_objectSpread({
+    icon: /*#__PURE__*/_jsx(ClearOutlined, {})
+  }, props), {}, {
+    action: "onClear",
+    ref: ref
+  }));
+}
+export default /*#__PURE__*/React.forwardRef(ClearButton);

package/lib/Sender/components/LoadingButton.js

@@ -0,0 +1,28 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 classNames from 'classnames';
+import * as React from 'react';
+import StopLoadingIcon from "../StopLoading";
+import ActionButton, { ActionButtonContext } from "./ActionButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+function LoadingButton(props, ref) {
+  var _React$useContext = React.useContext(ActionButtonContext),
+    prefixCls = _React$useContext.prefixCls;
+  var className = props.className;
+  return /*#__PURE__*/_jsx(ActionButton, _objectSpread(_objectSpread({
+    icon: /*#__PURE__*/_jsx(StopLoadingIcon, {
+      className: "".concat(prefixCls, "-loading-icon")
+    }),
+    type: "primary",
+    variant: "text"
+  }, props), {}, {
+    className: classNames(className, "".concat(prefixCls, "-loading-button")),
+    action: "onCancel",
+    ref: ref
+  }));
+}
+export default /*#__PURE__*/React.forwardRef(LoadingButton);

package/lib/Sender/components/SendButton.js

@@ -0,0 +1,20 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 { ArrowUpOutlined } from "@agentscope-ai/icons-override-antd";
+import * as React from 'react';
+import ActionButton from "./ActionButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+function SendButton(props, ref) {
+  return /*#__PURE__*/_jsx(ActionButton, _objectSpread(_objectSpread({
+    icon: /*#__PURE__*/_jsx(ArrowUpOutlined, {}),
+    type: "primary"
+  }, props), {}, {
+    action: "onSend",
+    ref: ref
+  }));
+}
+export default /*#__PURE__*/React.forwardRef(SendButton);

package/lib/Sender/components/SpeechButton/RecordingIcon.d.ts

@@ -0,0 +1,8 @@
+export interface RecordingIconProps {
+    /**
+     * @description 录音图标的CSS类名，用于自定义样式
+     * @descriptionEn CSS class name for the recording icon for custom styling
+     */
+    className?: string;
+}
+export default function RecordingIcon({ className }: RecordingIconProps): import("react/jsx-runtime").JSX.Element;

package/lib/Sender/components/SpeechButton/RecordingIcon.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var SIZE = 1000;
+var COUNT = 4;
+var RECT_WIDTH = 140;
+var RECT_RADIUS = RECT_WIDTH / 2;
+var RECT_HEIGHT_MIN = 250;
+var RECT_HEIGHT_MAX = 500;
+var DURATION = 0.8;
+export default function RecordingIcon(_ref) {
+  var className = _ref.className;
+  return /*#__PURE__*/_jsxs("svg", {
+    color: "currentColor",
+    viewBox: "0 0 ".concat(SIZE, " ").concat(SIZE),
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    className: className,
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "Speech Recording"
+    }), Array.from({
+      length: COUNT
+    }).map(function (_, index) {
+      var dest = (SIZE - RECT_WIDTH * COUNT) / (COUNT - 1);
+      var x = index * (dest + RECT_WIDTH);
+      var yMin = SIZE / 2 - RECT_HEIGHT_MIN / 2;
+      var yMax = SIZE / 2 - RECT_HEIGHT_MAX / 2;
+      return /*#__PURE__*/_jsxs("rect", {
+        fill: "currentColor",
+        rx: RECT_RADIUS,
+        ry: RECT_RADIUS,
+        height: RECT_HEIGHT_MIN,
+        width: RECT_WIDTH,
+        x: x,
+        y: yMin,
+        children: [/*#__PURE__*/_jsx("animate", {
+          attributeName: "height",
+          values: "".concat(RECT_HEIGHT_MIN, "; ").concat(RECT_HEIGHT_MAX, "; ").concat(RECT_HEIGHT_MIN),
+          keyTimes: "0; 0.5; 1",
+          dur: "".concat(DURATION, "s"),
+          begin: "".concat(DURATION / COUNT * index, "s"),
+          repeatCount: "indefinite"
+        }), /*#__PURE__*/_jsx("animate", {
+          attributeName: "y",
+          values: "".concat(yMin, "; ").concat(yMax, "; ").concat(yMin),
+          keyTimes: "0; 0.5; 1",
+          dur: "".concat(DURATION, "s"),
+          begin: "".concat(DURATION / COUNT * index, "s"),
+          repeatCount: "indefinite"
+        })]
+      }, index);
+    })]
+  });
+}

package/lib/Sender/components/SpeechButton/index.js

@@ -0,0 +1,35 @@
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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 * as React from 'react';
+import ActionButton, { ActionButtonContext } from "../ActionButton";
+import { SparkMicLine, SparkMicOffLine } from '@agentscope-ai/icons';
+import RecordingIcon from "./RecordingIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+function SpeechButton(props, ref) {
+  var _React$useContext = React.useContext(ActionButtonContext),
+    speechRecording = _React$useContext.speechRecording,
+    onSpeechDisabled = _React$useContext.onSpeechDisabled,
+    prefixCls = _React$useContext.prefixCls;
+  var icon = null;
+  if (speechRecording) {
+    icon = /*#__PURE__*/_jsx(RecordingIcon, {
+      className: "".concat(prefixCls, "-recording-icon")
+    });
+  } else if (onSpeechDisabled) {
+    icon = /*#__PURE__*/_jsx(SparkMicOffLine, {});
+  } else {
+    icon = /*#__PURE__*/_jsx(SparkMicLine, {});
+  }
+  return /*#__PURE__*/_jsx(ActionButton, _objectSpread(_objectSpread({
+    icon: icon,
+    variant: "text"
+  }, props), {}, {
+    action: "onSpeech",
+    ref: ref
+  }));
+}
+export default /*#__PURE__*/React.forwardRef(SpeechButton);

package/lib/Sender/index.d.ts

@@ -0,0 +1,142 @@
+import { Input } from 'antd';
+import React from 'react';
+import SenderHeader from './SenderHeader';
+import ModeSelect from './ModeSelect';
+import type { InputRef as AntdInputRef, ButtonProps, GetProps } from 'antd';
+export type SubmitType = 'enter' | 'shiftEnter' | false;
+type TextareaProps = GetProps<typeof Input.TextArea>;
+export interface SenderComponents {
+    input?: React.ComponentType<TextareaProps>;
+}
+export type ActionsRender = (ori: React.ReactNode, info: {
+    components: {
+        SendButton: React.ComponentType<ButtonProps>;
+        ClearButton: React.ComponentType<ButtonProps>;
+        LoadingButton: React.ComponentType<ButtonProps>;
+    };
+}) => React.ReactNode;
+export interface SenderProps extends Pick<TextareaProps, 'placeholder' | 'onKeyPress'> {
+    /**
+     * @description 输入框的默认初始值，仅在非受控模式下生效
+     * @descriptionEn Default initial value for the input field, only effective in uncontrolled mode
+     */
+    defaultValue?: string;
+    /**
+     * @description 输入框的当前值，用于受控组件模式
+     * @descriptionEn Current value of the input field for controlled component mode
+     */
+    value?: string;
+    /**
+     * @description 是否显示回复中的加载状态，影响按钮和输入框的交互
+     * @descriptionEn Whether to display loading state during reply, affects button and input interaction
+     */
+    loading?: boolean;
+    /**
+     * @description 是否将输入框设置为只读模式，禁止用户编辑
+     * @descriptionEn Whether to set the input field to read-only mode, preventing user editing
+     */
+    readOnly?: boolean;
+    /**
+     * @description 消息提交的方式，影响发送按钮的行为和快捷键
+     * @descriptionEn Method for message submission, affects send button behavior and keyboard shortcuts
+     */
+    submitType?: SubmitType;
+    /**
+     * @description 是否禁用整个发送器组件，包括输入框和按钮
+     * @descriptionEn Whether to disable the entire sender component, including input field and buttons
+     */
+    disabled?: boolean;
+    /**
+     * @description 用户提交消息时的回调函数，接收消息内容作为参数
+     * @descriptionEn Callback function when user submits a message, receives message content as parameter
+     */
+    onSubmit?: (message: string) => void;
+    /**
+     * @description 输入框值发生变化时的回调函数，用于实时处理用户输入
+     * @descriptionEn Callback function when input value changes, for real-time processing of user input
+     */
+    onChange?: (value: string, event?: React.FormEvent<HTMLTextAreaElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
+    /**
+     * @description 用户取消操作时的回调函数，通常用于清空输入或重置状态
+     * @descriptionEn Callback function when user cancels operation, usually for clearing input or resetting state
+     */
+    onCancel?: VoidFunction;
+    /**
+     * @description 键盘事件处理函数，用于自定义键盘快捷键和特殊按键行为
+     * @descriptionEn Keyboard event handler for custom keyboard shortcuts and special key behaviors
+     */
+    onKeyDown?: React.KeyboardEventHandler<any>;
+    /**
+     * @description 语义化样式对象，用于精确控制不同区域的样式
+     * @descriptionEn Semantic style object for precise control of different area styles
+     */
+    styles?: {
+        prefix?: React.CSSProperties;
+        input?: React.CSSProperties;
+        actions?: React.CSSProperties;
+    };
+    /**
+     * @description 自定义根容器的CSS类名，用于覆盖默认样式
+     * @descriptionEn Custom CSS class name for the root container to override default styles
+     */
+    rootClassName?: string;
+    /**
+     * @description 语义化CSS类名，用于为不同区域添加自定义类名
+     * @descriptionEn Semantic CSS class names for adding custom classes to different areas
+     */
+    classNames?: {
+        prefix?: string;
+        input?: string;
+        actions?: string;
+    };
+    /**
+     * @description 样式
+     * @descriptionEn Style
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description 类名
+     * @descriptionEn Classname
+     */
+    className?: string;
+    /**
+     * @description 前缀 UI
+     * @descriptionEn Prefix UI
+     */
+    prefix?: React.ReactNode | React.ReactNode[];
+    /**
+     * @description 头部 UI
+     * @descriptionEn Header UI
+     */
+    header?: React.ReactNode;
+    /**
+     * @description 最大文本长度
+     * @descriptionEn Max content length
+     */
+    maxLength?: number;
+    /**
+     * @description 是否可缩放
+     * @descriptionEn Zoomable
+     */
+    zoomable?: boolean;
+    /**
+     * @description 初始行数，默认 2，移动端使用建议设置 1 行
+     * @descriptionEn Initial rows, default 2, recommend 1 for mobile
+     */
+    initialRows?: number;
+    /**
+     * @description 是否支持语音输入
+     * @descriptionEn Allow speech input
+     */
+    allowSpeech?: boolean;
+}
+export type SenderRef = {
+    nativeElement: HTMLDivElement;
+} & Pick<AntdInputRef, 'focus' | 'blur'>;
+declare const ForwardSender: React.ForwardRefExoticComponent<SenderProps & React.RefAttributes<SenderRef>>;
+type CompoundedSender = typeof ForwardSender & {
+    Header: typeof SenderHeader;
+    ModeSelect: typeof ModeSelect;
+};
+declare const Sender: CompoundedSender;
+export default Sender;