@agentscope-ai/chat 1.1.4 → 1.1.7

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;

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

@@ -1,15 +1,14 @@
 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 = ["prefixCls", "styles", "classNames", "className", "rootClassName", "style", "defaultValue", "value", "readOnly", "submitType", "onSubmit", "loading", "components", "onCancel", "onChange", "actions", "onKeyPress", "onKeyDown", "disabled", "allowSpeech", "header", "onPaste", "onPasteFile"];
-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); }
+var _excluded = ["styles", "classNames", "className", "rootClassName", "style", "defaultValue", "value", "readOnly", "submitType", "onSubmit", "loading", "onCancel", "onChange", "actions", "onKeyPress", "onKeyDown", "disabled", "header", "onPaste", "allowSpeech", "onPasteFile", "components", "initialRows"];
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 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); }
@@ -18,13 +17,13 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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, Flex, Input } from 'antd';
+import { Flex, Input } from 'antd';
 import classnames from 'classnames';
 import { useMergedState } from 'rc-util';
 import pickAttrs from 'rc-util/lib/pickAttrs';
 import getValue from 'rc-util/lib/utils/get';
 import React, { useState } from 'react';
-import useProxyImperativeHandle from "../_util/hooks/use-proxy-imperative-handle";
+import useProxyImperativeHandle from "../Util/hooks/use-proxy-imperative-handle";
 import { useProviderContext } from "./..";
 import SenderHeader, { SendHeaderContext } from "./SenderHeader";
 import { ActionButtonContext } from "./components/ActionButton";
@@ -34,13 +33,17 @@ import SendButton from "./components/SendButton";
 import SpeechButton from "./components/SpeechButton";
 import useStyle from "./style";
 import useSpeech from "./useSpeech";
-import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons';
+import ModeSelect from "./ModeSelect";
+import { SparkEnlargeLine, SparkShrinkLine } from '@agentscope-ai/icons';
+import { IconButton } from "@ali/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";
 function getComponent(components, path, defaultComponent) {
   return getValue(components, path) || defaultComponent;
 }
 var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var customizePrefixCls = props.prefixCls,
-    _props$styles = props.styles,
+  var _props$styles = props.styles,
     styles = _props$styles === void 0 ? {} : _props$styles,
     _props$classNames = props.classNames,
     classNames = _props$classNames === void 0 ? {} : _props$classNames,
@@ -54,17 +57,19 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
     submitType = _props$submitType === void 0 ? 'enter' : _props$submitType,
     onSubmit = props.onSubmit,
     loading = props.loading,
-    components = props.components,
     onCancel = props.onCancel,
     onChange = props.onChange,
     actions = props.actions,
     onKeyPress = props.onKeyPress,
     onKeyDown = props.onKeyDown,
     disabled = props.disabled,
-    allowSpeech = props.allowSpeech,
     header = props.header,
     onPaste = props.onPaste,
+    allowSpeech = props.allowSpeech,
     onPasteFile = props.onPasteFile,
+    components = props.components,
+    _props$initialRows = props.initialRows,
+    initialRows = _props$initialRows === void 0 ? 2 : _props$initialRows,
     rest = _objectWithoutProperties(props, _excluded);
   var _useState = useState(props.zoomable ? false : undefined),
     _useState2 = _slicedToArray(_useState, 2),
@@ -72,35 +77,18 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setZoom = _useState2[1];
   var autoSize = React.useMemo(function () {
     return zoom ? {
-      maxRows: 8,
-      minRows: 8
+      maxRows: 10,
+      minRows: 10
     } : {
-      maxRows: 2,
-      minRows: 2
+      maxRows: 10,
+      minRows: initialRows
     };
   }, [props.zoomable, zoom]);
-  var prefix = React.useMemo(function () {
-    var nodes = Array.isArray(props.prefix) ? _toConsumableArray(props.prefix) : [props.prefix];
-    if (props.zoomable) {
-      nodes.push( /*#__PURE__*/React.createElement(Button, {
-        key: "zoom",
-        onClick: function onClick() {
-          return setZoom(!zoom);
-        },
-        type: "text",
-        icon: zoom ? /*#__PURE__*/React.createElement(FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(FullscreenOutlined, null)
-      }));
-    }
-    return nodes;
-  }, [props.prefix, props.zoomable, zoom]);
-
-  // ============================= MISC =============================
   var _useProviderContext = useProviderContext(),
     direction = _useProviderContext.direction,
     getPrefixCls = _useProviderContext.getPrefixCls;
-  var prefixCls = getPrefixCls('sender', customizePrefixCls);
-
-  // ============================= Refs =============================
+  var prefixCls = getPrefixCls('sender');
+  var Style = useStyle();
   var containerRef = React.useRef(null);
   var inputRef = React.useRef(null);
   useProxyImperativeHandle(ref, function () {
@@ -112,18 +100,9 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
     };
   });
   var inputCls = "".concat(prefixCls, "-input");
-
-  // ============================ Styles ============================
-  var _useStyle = useStyle(prefixCls),
-    _useStyle2 = _slicedToArray(_useStyle, 3),
-    wrapCSSVar = _useStyle2[0],
-    hashId = _useStyle2[1],
-    cssVarCls = _useStyle2[2];
-  var mergedCls = classnames(prefixCls, className, rootClassName, hashId, cssVarCls, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-disabled"), disabled));
+  var mergedCls = classnames(prefixCls, className, rootClassName, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-rtl"), direction === 'rtl'), "".concat(prefixCls, "-disabled"), disabled));
   var actionBtnCls = "".concat(prefixCls, "-actions-btn");
   var actionListCls = "".concat(prefixCls, "-actions-list");
-
-  // ============================ Value =============================
   var _useMergedState = useMergedState(defaultValue || '', {
       value: value
     }),
@@ -136,8 +115,6 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChange(nextValue, event);
     }
   };
-
-  // ============================ Speech ============================
   var _useSpeech = useSpeech(function (transcript) {
       triggerValueChange("".concat(innerValue, " ").concat(transcript));
     }, allowSpeech),
@@ -145,8 +122,6 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
     speechPermission = _useSpeech2[0],
     triggerSpeech = _useSpeech2[1],
     speechRecording = _useSpeech2[2];
-
-  // ========================== Components ==========================
   var InputTextArea = getComponent(components, ['input'], Input.TextArea);
   var domProps = pickAttrs(rest, {
     attr: true,
@@ -197,8 +172,6 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onKeyPress(e);
     }
   };
-
-  // ============================ Paste =============================
   var onInternalPaste = function onInternalPaste(e) {
     var _e$clipboardData;
     // Get file
@@ -221,13 +194,23 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus();
   };
-
-  // ============================ Action ============================
-  var actionNode = /*#__PURE__*/React.createElement(Flex, {
-    className: "".concat(actionListCls, "-presets")
-  }, allowSpeech && /*#__PURE__*/React.createElement(SpeechButton, null), loading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(SendButton, null));
-
-  // Custom actions
+  var prefix = React.useMemo(function () {
+    var nodes = Array.isArray(props.prefix) ? _toConsumableArray(props.prefix) : [props.prefix];
+    if (props.zoomable) {
+      nodes.push( /*#__PURE__*/_jsx(IconButton, {
+        onClick: function onClick() {
+          return setZoom(!zoom);
+        },
+        bordered: false,
+        icon: zoom ? /*#__PURE__*/_jsx(SparkShrinkLine, {}) : /*#__PURE__*/_jsx(SparkEnlargeLine, {})
+      }, "zoom"));
+    }
+    return nodes;
+  }, [props.prefix, props.zoomable, zoom, allowSpeech]);
+  var actionNode = /*#__PURE__*/_jsx(Flex, {
+    className: "".concat(actionListCls, "-presets"),
+    children: loading ? /*#__PURE__*/_jsx(LoadingButton, {}) : /*#__PURE__*/_jsx(SendButton, {})
+  });
   if (typeof actions === 'function') {
     actionNode = actions(actionNode, {
       components: {
@@ -239,69 +222,93 @@ var ForwardSender = /*#__PURE__*/React.forwardRef(function (props, ref) {
   } else if (actions) {
     actionNode = actions;
   }
-
-  // ============================ Render ============================
-  return wrapCSSVar( /*#__PURE__*/React.createElement("div", {
-    ref: containerRef,
-    className: mergedCls,
-    style: style
-  }, header && /*#__PURE__*/React.createElement(SendHeaderContext.Provider, {
-    value: {
-      prefixCls: prefixCls
-    }
-  }, header), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-content"),
-    onMouseDown: onContentMouseDown
-  }, /*#__PURE__*/React.createElement(InputTextArea, _extends({}, inputProps, {
-    disabled: disabled,
-    style: styles.input,
-    className: classnames(inputCls, classNames.input),
-    autoSize: autoSize,
-    value: innerValue.slice(0, props.maxLength || Number.MAX_SAFE_INTEGER),
-    onChange: function onChange(event) {
-      triggerValueChange(event.target.value, event);
-      triggerSpeech(true);
-    },
-    onPressEnter: onInternalKeyPress,
-    onCompositionStart: onInternalCompositionStart,
-    onCompositionEnd: onInternalCompositionEnd,
-    onKeyDown: onKeyDown,
-    onPaste: onInternalPaste,
-    variant: "borderless",
-    readOnly: readOnly
-  })), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(prefixCls, "-content-bottom")
-  }, prefix.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: classnames("".concat(prefixCls, "-prefix"), classNames.prefix),
-    style: styles.prefix
-  }, /*#__PURE__*/React.createElement(Flex, {
-    gap: 8
-  }, prefix)), /*#__PURE__*/React.createElement("div", {
-    className: classnames(actionListCls, classNames.actions),
-    style: styles.actions
-  }, props.maxLength ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(actionListCls, "-length")
-  }, innerValue.length, "/", props.maxLength) : null, /*#__PURE__*/React.createElement(ActionButtonContext.Provider, {
-    value: {
-      prefixCls: actionBtnCls,
-      onSend: triggerSend,
-      onSendDisabled: !innerValue,
-      onClear: triggerClear,
-      onClearDisabled: !innerValue,
-      onCancel: onCancel,
-      onCancelDisabled: !loading,
-      onSpeech: function onSpeech() {
-        return triggerSpeech(false);
-      },
-      onSpeechDisabled: !speechPermission,
-      speechRecording: speechRecording,
-      disabled: disabled
-    }
-  }, actionNode))))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Style, {}), /*#__PURE__*/_jsxs("div", {
+      ref: containerRef,
+      className: mergedCls,
+      style: style,
+      children: [header && /*#__PURE__*/_jsx(SendHeaderContext.Provider, {
+        value: {
+          prefixCls: prefixCls
+        },
+        children: header
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "".concat(prefixCls, "-content"),
+        onMouseDown: onContentMouseDown,
+        children: [/*#__PURE__*/_jsx(InputTextArea, _objectSpread(_objectSpread({}, inputProps), {}, {
+          disabled: disabled,
+          style: styles.input,
+          className: classnames(inputCls, classNames.input),
+          autoSize: autoSize,
+          value: innerValue.slice(0, props.maxLength || Number.MAX_SAFE_INTEGER),
+          onChange: function onChange(event) {
+            triggerValueChange(event.target.value, event);
+            triggerSpeech(true);
+          },
+          onPressEnter: onInternalKeyPress,
+          onCompositionStart: onInternalCompositionStart,
+          onCompositionEnd: onInternalCompositionEnd,
+          onKeyDown: onKeyDown,
+          onPaste: onInternalPaste,
+          variant: "borderless",
+          readOnly: readOnly
+        })), /*#__PURE__*/_jsxs("div", {
+          className: "".concat(prefixCls, "-content-bottom"),
+          children: [prefix.length > 0 && /*#__PURE__*/_jsx("div", {
+            className: classnames("".concat(prefixCls, "-prefix"), classNames.prefix),
+            style: styles.prefix,
+            children: /*#__PURE__*/_jsxs(Flex, {
+              gap: 8,
+              children: [allowSpeech && /*#__PURE__*/_jsx(ActionButtonContext.Provider, {
+                value: {
+                  prefixCls: actionBtnCls,
+                  onSend: triggerSend,
+                  onSendDisabled: !innerValue,
+                  onClear: triggerClear,
+                  onClearDisabled: !innerValue,
+                  onCancel: onCancel,
+                  onCancelDisabled: !loading,
+                  onSpeech: function onSpeech() {
+                    return triggerSpeech(false);
+                  },
+                  onSpeechDisabled: !speechPermission,
+                  speechRecording: speechRecording,
+                  disabled: disabled
+                },
+                children: /*#__PURE__*/_jsx(SpeechButton, {})
+              }), prefix]
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            className: classnames(actionListCls, classNames.actions),
+            style: styles.actions,
+            children: [props.maxLength ? /*#__PURE__*/_jsxs("div", {
+              className: "".concat(actionListCls, "-length"),
+              children: [innerValue.length, "/", props.maxLength]
+            }) : null, /*#__PURE__*/_jsx(ActionButtonContext.Provider, {
+              value: {
+                prefixCls: actionBtnCls,
+                onSend: triggerSend,
+                onSendDisabled: !innerValue,
+                onClear: triggerClear,
+                onClearDisabled: !innerValue,
+                onCancel: onCancel,
+                onCancelDisabled: !loading,
+                onSpeech: function onSpeech() {
+                  return triggerSpeech(false);
+                },
+                onSpeechDisabled: !speechPermission,
+                speechRecording: speechRecording,
+                disabled: disabled
+              },
+              children: actionNode
+            })]
+          })]
+        })]
+      })]
+    })]
+  });
 });
 var Sender = ForwardSender;
-if (process.env.NODE_ENV !== 'production') {
-  Sender.displayName = 'Sender';
-}
 Sender.Header = SenderHeader;
+Sender.ModeSelect = ModeSelect;
 export default Sender;

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

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

package/lib/Sender/style/index.js

@@ -0,0 +1,41 @@
+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 "../..";
+var IndexStyle = createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.", "-sender {\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  box-shadow: 0px 12px 24px -16px rgba(54, 54, 73, 0.04),\n    0px 12px 40px 0px rgba(51, 51, 71, 0.08),\n    0px 0px 1px 0px rgba(44, 44, 54, 0.02);\n  background-color: ", ";\n  border-radius: ", "px;\n  border-color: ", ";\n  border-width: 0;\n  border-style: solid;\n  overflow: hidden;\n\n  &:after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    pointer-events: none;\n    transition: border-color ", ";\n    border-radius: inherit;\n    border-style: inherit;\n    border-color: inherit;\n    border-width: ", "px;\n  }\n\n  &:focus-within {\n    box-shadow: 0px 12px 24px -16px rgba(54, 54, 73, 0.04),\n      0px 12px 40px 0px rgba(51, 51, 71, 0.08),\n      0px 0px 1px 0px rgba(44, 44, 54, 0.02);\n    border-color: ", ";\n\n    &:after {\n      border-width: ", "px;\n    }\n  }\n\n  &-disabled {\n    .", "-sender-content,\n    .", "-sender-header {\n      background-color: ", ";\n    }\n  }\n\n  &.", "-sender-rtl {\n    direction: rtl;\n  }\n\n  &-content {\n    width: 100%;\n    padding: 8px;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  &-content-bottom {\n    margin-top: 4px;\n    display: flex;\n  }\n\n  &-prefix {\n    flex: 1;\n  }\n\n  &-input {\n    margin: 4px 0;\n    padding: 0 8px;\n    border-radius: 0;\n    align-self: center;\n    font-size: 14px;\n    line-height: 22px;\n  }\n\n  &-actions-list {\n    flex: none;\n    display: flex;\n    margin: 0 0 0 auto;\n\n    &-presets {\n      gap: ", "px;\n    }\n\n    &-length {\n      font-size: 12px;\n      line-height: 1;\n      display: flex;\n      align-items: center;\n      padding: 0 12px;\n      color: ", ";\n    }\n  }\n\n  &-recording {\n    height: 30px;\n    padding: 0 8px;\n    &-icon {\n      display: block;\n      width: 100%;\n      height: 30px;\n    }\n  }\n\n  &-actions-btn {\n    &-disabled {\n      background: ", ";\n    }\n\n    &-loading-button {\n      padding: 0;\n      border: 0;\n    }\n\n    &-loading-icon {\n      height: ", "px;\n      width: ", "px;\n      vertical-align: top;\n    }\n\n    &-recording-icon {\n      height: 1.2em;\n      width: 1.2em;\n      vertical-align: top;\n    }\n\n    \n  }\n}\n\n.", "-sender {\n  &-header {\n    &-motion {\n      transition: height .3s, border .3s;\n      overflow: hidden;\n      &-enter-start,\n      &-leave-active {\n        border-bottom-color: transparent;\n      }\n\n      &-hidden {\n        display: none;\n      }\n    }\n  }\n}\n"])), function (p) {
+  return p.prefix;
+}, function (p) {
+  return p.theme.colorBgBase;
+}, function (p) {
+  return p.theme.borderRadiusLG;
+}, function (p) {
+  return p.theme.colorBorderSecondary;
+}, function (p) {
+  return p.theme.motionDurationSlow;
+}, function (p) {
+  return p.theme.lineWidth;
+}, function (p) {
+  return p.theme.colorPrimaryHover;
+}, function (p) {
+  return p.theme.lineWidth;
+}, function (p) {
+  return p.prefix;
+}, function (p) {
+  return p.prefix;
+}, function (p) {
+  return p.theme.colorBgContainerDisabled;
+}, function (p) {
+  return p.prefix;
+}, function (p) {
+  return p.theme.paddingXS;
+}, function (p) {
+  return p.theme.colorTextTertiary;
+}, function (p) {
+  return "var(--".concat(p.prefix, "-color-fill-disable)");
+}, function (p) {
+  return p.theme.controlHeight;
+}, function (p) {
+  return p.theme.controlHeight;
+}, function (p) {
+  return p.prefix;
+});
+export default IndexStyle;