@lobehub/ui 1.91.0 → 1.93.0

package/es/ActionIcon/index.js

@@ -86,6 +86,7 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     borderRadius = _useMemo.borderRadius;
   var content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [icon && /*#__PURE__*/_jsx(Icon, {
+      className: styles.icon,
       color: color,
       fill: fill,
       icon: icon,

package/es/ActionIcon/style.d.ts

@@ -3,4 +3,5 @@ export declare const useStyles: (props?: {
     glass: boolean;
 } | undefined) => import("antd-style").ReturnStyles<{
     block: string;
+    icon: import("antd-style").SerializedStyles;
 }>;

package/es/ActionIcon/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject;
+var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
@@ -9,6 +9,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var active = _ref2.active,
     glass = _ref2.glass;
   return {
-    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          position: relative;\n\n          display: flex;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition:\n            color 600ms ", ",\n            scale 400ms ", ",\n            background-color 100ms ", ";\n\n          &:hover {\n            color: ", ";\n            background-color: ", ";\n          }\n\n          &:active {\n            scale: 0.8;\n            color: ", ";\n            background-color: ", ";\n          }\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillSecondary, token.colorText, token.colorFill))
+    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          position: relative;\n\n          display: flex;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition:\n            color 600ms ", ",\n            scale 400ms ", ",\n            background-color 100ms ", ";\n\n          &:hover {\n            color: ", ";\n            background-color: ", ";\n          }\n\n          &:active {\n            color: ", ";\n            background-color: ", ";\n          }\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillSecondary, token.colorText, token.colorFill)),
+    icon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        transition: scale 400ms ", ";\n\n        &:active {\n          scale: 0.8;\n        }\n      "])), token.motionEaseOut)
   };
 });

package/es/Avatar/index.js

@@ -4,7 +4,7 @@ var _excluded = ["className", "avatar", "title", "animation", "size", "shape", "
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Avatar as AntAvatar } from 'antd';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import FluentEmoji from "../FluentEmoji";
 import { getEmoji } from "../utils/getEmojiByCharacter";
 import { useStyles } from "./style";
@@ -24,7 +24,9 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
   var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (index) {
     return avatar.startsWith(index);
   }));
-  var emoji = avatar && !isImage && getEmoji(avatar);
+  var emoji = useMemo(function () {
+    return avatar && !isImage && getEmoji(avatar);
+  }, [avatar]);
   var _useStyles = useStyles({
       background: background,
       isEmoji: Boolean(emoji),

package/es/ChatInputArea/Action.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
-import { createStyles } from 'antd-style';
+import { createStyles, useResponsive } from 'antd-style';
 import { Maximize2, Minimize2 } from 'lucide-react';
 import { memo, useCallback } from 'react';
 import ActionIcon from "../ActionIcon";
@@ -21,6 +21,8 @@ var Action = /*#__PURE__*/memo(function (_ref2) {
     onExpandChange = _ref2.onExpandChange;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
   var handleExpandClick = useCallback(function () {
     if (onExpandChange) onExpandChange(!expand);
   }, [expand]);
@@ -31,7 +33,7 @@ var Action = /*#__PURE__*/memo(function (_ref2) {
       children: actions
     }), /*#__PURE__*/_jsxs("div", {
       className: styles.actionsRight,
-      children: [actionsRight, /*#__PURE__*/_jsx(ActionIcon, {
+      children: [actionsRight, !mobile && /*#__PURE__*/_jsx(ActionIcon, {
         icon: expand ? Minimize2 : Maximize2,
         onClick: handleExpandClick
       })]

package/es/ChatInputArea/Desktop.d.ts

@@ -0,0 +1,17 @@
+import { type InputRef } from 'antd';
+import { CSSProperties } from 'react';
+import { type TextAreaProps } from "../Input";
+import type { ChatInputBase } from './type';
+export type ChatInputAreaDesktop = ChatInputBase & TextAreaProps & {
+    minHeight?: number;
+    textareaClassName?: string;
+    textareaId?: string;
+    textareaStyle?: CSSProperties;
+};
+declare const ChatInputArea: import("react").ForwardRefExoticComponent<ChatInputBase & TextAreaProps & {
+    minHeight?: number | undefined;
+    textareaClassName?: string | undefined;
+    textareaId?: string | undefined;
+    textareaStyle?: CSSProperties | undefined;
+} & import("react").RefAttributes<InputRef>>;
+export default ChatInputArea;

package/es/ChatInputArea/Desktop.js

@@ -0,0 +1,131 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["text", "textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange", "textareaId", "actionsRight", "onStop", "value"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { Button } from 'antd';
+import { Loader2 } from 'lucide-react';
+import { forwardRef, useCallback, useRef } from 'react';
+import useControlledState from 'use-merge-value';
+import Icon from "../Icon";
+import { TextArea } from "../Input";
+import Action from "./Action";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var text = _ref.text,
+    textareaClassName = _ref.textareaClassName,
+    style = _ref.style,
+    textareaStyle = _ref.textareaStyle,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 200 : _ref$minHeight,
+    className = _ref.className,
+    actions = _ref.actions,
+    footer = _ref.footer,
+    expand = _ref.expand,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Type something to chat...' : _ref$placeholder,
+    onExpandChange = _ref.onExpandChange,
+    onSend = _ref.onSend,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    loading = _ref.loading,
+    disabled = _ref.disabled,
+    onInputChange = _ref.onInputChange,
+    _onPressEnter = _ref.onPressEnter,
+    _onCompositionStart = _ref.onCompositionStart,
+    _onCompositionEnd = _ref.onCompositionEnd,
+    _onBlur = _ref.onBlur,
+    _onChange = _ref.onChange,
+    _ref$textareaId = _ref.textareaId,
+    textareaId = _ref$textareaId === void 0 ? 'lobe-chat-input-area' : _ref$textareaId,
+    actionsRight = _ref.actionsRight,
+    onStop = _ref.onStop,
+    value = _ref.value,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useControlledState = useControlledState(defaultValue, {
+      defaultValue: defaultValue,
+      onChange: onInputChange,
+      value: value
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    currentValue = _useControlledState2[0],
+    setCurrentValue = _useControlledState2[1];
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var isChineseInput = useRef(false);
+  var handleSend = useCallback(function () {
+    if (loading && disabled) return;
+    if (onSend) onSend(currentValue);
+    setCurrentValue('');
+  }, [disabled, currentValue]);
+  return /*#__PURE__*/_jsxs("section", {
+    className: cx(styles.container, className),
+    style: _objectSpread({
+      minHeight: minHeight
+    }, style),
+    children: [/*#__PURE__*/_jsx(Action, {
+      actions: actions,
+      actionsRight: actionsRight,
+      expand: expand,
+      onExpandChange: onExpandChange
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.textareaContainer,
+      children: /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({
+        className: cx(styles.textarea, textareaClassName),
+        defaultValue: defaultValue,
+        id: textareaId,
+        ref: ref,
+        style: textareaStyle
+      }, props), {}, {
+        onBlur: function onBlur(e) {
+          if (_onBlur) _onBlur(e);
+          setCurrentValue(e.target.value);
+        },
+        onChange: function onChange(e) {
+          if (_onChange) _onChange(e);
+          setCurrentValue(e.target.value);
+        },
+        onCompositionEnd: function onCompositionEnd(e) {
+          if (_onCompositionEnd) _onCompositionEnd(e);
+          isChineseInput.current = false;
+        },
+        onCompositionStart: function onCompositionStart(e) {
+          if (_onCompositionStart) _onCompositionStart(e);
+          isChineseInput.current = true;
+        },
+        onPressEnter: function onPressEnter(e) {
+          if (_onPressEnter) _onPressEnter(e);
+          if (!loading && !e.shiftKey && !isChineseInput.current) {
+            e.preventDefault();
+            handleSend();
+          }
+        },
+        placeholder: placeholder,
+        resize: false,
+        type: "pure",
+        value: currentValue
+      }))
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.footerBar,
+      children: [footer, loading ? /*#__PURE__*/_jsx(Button, {
+        disabled: disabled,
+        icon: loading && /*#__PURE__*/_jsx(Icon, {
+          icon: Loader2,
+          spin: true
+        }),
+        onClick: onStop,
+        children: (text === null || text === void 0 ? void 0 : text.stop) || 'Stop'
+      }) : /*#__PURE__*/_jsx(Button, {
+        disabled: disabled,
+        onClick: handleSend,
+        type: 'primary',
+        children: (text === null || text === void 0 ? void 0 : text.send) || 'Send'
+      })]
+    })]
+  });
+});
+export default ChatInputArea;

package/es/ChatInputArea/Mobile.d.ts

@@ -0,0 +1,17 @@
+import { type InputRef } from 'antd';
+import { CSSProperties } from 'react';
+import { type InputProps } from "../Input";
+import type { ChatInputBase } from './type';
+export type ChatInputAreaMobile = ChatInputBase & InputProps & {
+    inputClassName?: string;
+    inputId?: string;
+    inputStyle?: CSSProperties;
+    minHeight?: number;
+};
+declare const ChatInputArea: import("react").ForwardRefExoticComponent<ChatInputBase & InputProps & {
+    inputClassName?: string | undefined;
+    inputId?: string | undefined;
+    inputStyle?: CSSProperties | undefined;
+    minHeight?: number | undefined;
+} & import("react").RefAttributes<InputRef>>;
+export default ChatInputArea;

package/es/ChatInputArea/Mobile.js

@@ -0,0 +1,132 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["inputClassName", "style", "inputStyle", "minHeight", "className", "actions", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange", "inputId", "actionsRight", "onStop", "value"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { Button } from 'antd';
+import { Loader2, SendHorizonal } from 'lucide-react';
+import { forwardRef, useCallback, useRef } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
+import Icon from "../Icon";
+import { Input } from "../Input";
+import Action from "./Action";
+import { useStyles } from "./style.mobile";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var inputClassName = _ref.inputClassName,
+    style = _ref.style,
+    inputStyle = _ref.inputStyle,
+    _ref$minHeight = _ref.minHeight,
+    minHeight = _ref$minHeight === void 0 ? 200 : _ref$minHeight,
+    className = _ref.className,
+    actions = _ref.actions,
+    expand = _ref.expand,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Type something to chat...' : _ref$placeholder,
+    onExpandChange = _ref.onExpandChange,
+    onSend = _ref.onSend,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    loading = _ref.loading,
+    disabled = _ref.disabled,
+    onInputChange = _ref.onInputChange,
+    _onPressEnter = _ref.onPressEnter,
+    _onCompositionStart = _ref.onCompositionStart,
+    _onCompositionEnd = _ref.onCompositionEnd,
+    _onBlur = _ref.onBlur,
+    _onChange = _ref.onChange,
+    _ref$inputId = _ref.inputId,
+    inputId = _ref$inputId === void 0 ? 'lobe-chat-input-area' : _ref$inputId,
+    actionsRight = _ref.actionsRight,
+    onStop = _ref.onStop,
+    value = _ref.value,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useControlledState = useControlledState(defaultValue, {
+      defaultValue: defaultValue,
+      onChange: onInputChange,
+      value: value
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    currentValue = _useControlledState2[0],
+    setCurrentValue = _useControlledState2[1];
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var isChineseInput = useRef(false);
+  var handleSend = useCallback(function () {
+    if (loading && disabled) return;
+    if (onSend) onSend(currentValue);
+    setCurrentValue('');
+  }, [disabled, currentValue]);
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    className: cx(styles.container, className),
+    gap: 12,
+    style: _objectSpread({
+      minHeight: minHeight
+    }, style),
+    children: [/*#__PURE__*/_jsx(Action, {
+      actions: actions,
+      actionsRight: actionsRight,
+      expand: expand,
+      onExpandChange: onExpandChange
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      className: styles.inner,
+      gap: 8,
+      horizontal: true,
+      children: [/*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+        className: cx(styles.input, inputClassName),
+        defaultValue: defaultValue,
+        id: inputId,
+        ref: ref,
+        style: inputStyle
+      }, props), {}, {
+        onBlur: function onBlur(e) {
+          if (_onBlur) _onBlur(e);
+          setCurrentValue(e.target.value);
+        },
+        onChange: function onChange(e) {
+          if (_onChange) _onChange(e);
+          setCurrentValue(e.target.value);
+        },
+        onCompositionEnd: function onCompositionEnd(e) {
+          if (_onCompositionEnd) _onCompositionEnd(e);
+          isChineseInput.current = false;
+        },
+        onCompositionStart: function onCompositionStart(e) {
+          if (_onCompositionStart) _onCompositionStart(e);
+          isChineseInput.current = true;
+        },
+        onPressEnter: function onPressEnter(e) {
+          if (_onPressEnter) _onPressEnter(e);
+          if (!loading && !e.shiftKey && !isChineseInput.current) {
+            e.preventDefault();
+            handleSend();
+          }
+        },
+        placeholder: placeholder,
+        type: 'block',
+        value: currentValue
+      })), /*#__PURE__*/_jsx("div", {
+        children: loading ? /*#__PURE__*/_jsx(Button, {
+          disabled: disabled,
+          icon: loading && /*#__PURE__*/_jsx(Icon, {
+            icon: Loader2,
+            spin: true
+          }),
+          onClick: onStop
+        }) : /*#__PURE__*/_jsx(Button, {
+          disabled: disabled,
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: SendHorizonal
+          }),
+          onClick: handleSend,
+          type: 'primary'
+        })
+      })]
+    })]
+  });
+});
+export default ChatInputArea;

package/es/ChatInputArea/index.d.ts

@@ -1,69 +1,17 @@
+/// <reference types="react" />
 import { type InputRef } from 'antd';
-import { CSSProperties, ReactNode } from 'react';
-import { type TextAreaProps } from "../Input";
-import { ActionProps } from './Action';
-export interface ChatInputAreaProps extends ActionProps, TextAreaProps {
-    /**
-     * @description Additional class name for the component
-     */
-    className?: string;
-    /**
-     * @description Default value for the input area
-     */
-    defaultValue?: string;
-    /**
-     * @description Whether the input area is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * @description Footer content to be displayed below the input area
-     */
-    footer?: ReactNode;
-    /**
-     * @description Whether the input area is in loading state
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * @description Minimum height of the input area
-     * @default 200
-     */
-    minHeight?: number;
-    /**
-     * @description Callback function when the input value changes
-     * @param value - The current value of the input area
-     */
-    onInputChange?: (value: string) => void;
-    /**
-     * @description Callback function when the send button is clicked
-     * @param value - The current value of the input area
-     */
-    onSend?: (value: string) => void;
-    onStop?: () => void;
-    /**
-     * @description Placeholder text for the input area
-     * @default 'Type something to chat...'
-     */
-    placeholder?: string;
-    /**
-     * @description CSS styles for the component
-     */
-    style?: CSSProperties;
-    text?: {
-        send?: string;
-        stop?: string;
-    };
-    /**
-     * @description Additional class name for the textarea element
-     */
-    textareaClassName?: string;
-    textareaId?: string;
-    /**
-     * @description CSS styles for the textarea element
-     */
-    textareaStyle?: CSSProperties;
-    value?: string;
-}
-declare const ChatInputArea: import("react").ForwardRefExoticComponent<ChatInputAreaProps & import("react").RefAttributes<InputRef>>;
+import { ChatInputAreaDesktop } from './Desktop';
+import { ChatInputAreaMobile } from './Mobile';
+export type ChatInputAreaProps = ChatInputAreaDesktop & ChatInputAreaMobile;
+declare const ChatInputArea: import("react").ForwardRefExoticComponent<import("./type").ChatInputBase & import("..").TextAreaProps & {
+    minHeight?: number | undefined;
+    textareaClassName?: string | undefined;
+    textareaId?: string | undefined;
+    textareaStyle?: import("react").CSSProperties | undefined;
+} & import("..").InputProps & {
+    inputClassName?: string | undefined;
+    inputId?: string | undefined;
+    inputStyle?: import("react").CSSProperties | undefined;
+    minHeight?: number | undefined;
+} & import("react").RefAttributes<InputRef>>;
 export default ChatInputArea;

package/es/ChatInputArea/index.js

@@ -1,131 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["text", "textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange", "textareaId", "actionsRight", "onStop", "value"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import { Button } from 'antd';
-import { Loader2 } from 'lucide-react';
-import { forwardRef, useCallback, useRef } from 'react';
-import useControlledState from 'use-merge-value';
-import Icon from "../Icon";
-import { TextArea } from "../Input";
-import Action from "./Action";
-import { useStyles } from "./style";
+import { useResponsive } from 'antd-style';
+import { forwardRef } from 'react';
+import Desktop from "./Desktop";
+import Mobile from "./Mobile";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var text = _ref.text,
-    textareaClassName = _ref.textareaClassName,
-    style = _ref.style,
-    textareaStyle = _ref.textareaStyle,
-    _ref$minHeight = _ref.minHeight,
-    minHeight = _ref$minHeight === void 0 ? 200 : _ref$minHeight,
-    className = _ref.className,
-    actions = _ref.actions,
-    footer = _ref.footer,
-    expand = _ref.expand,
-    _ref$placeholder = _ref.placeholder,
-    placeholder = _ref$placeholder === void 0 ? 'Type something to chat...' : _ref$placeholder,
-    onExpandChange = _ref.onExpandChange,
-    onSend = _ref.onSend,
-    _ref$defaultValue = _ref.defaultValue,
-    defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-    loading = _ref.loading,
-    disabled = _ref.disabled,
-    onInputChange = _ref.onInputChange,
-    _onPressEnter = _ref.onPressEnter,
-    _onCompositionStart = _ref.onCompositionStart,
-    _onCompositionEnd = _ref.onCompositionEnd,
-    _onBlur = _ref.onBlur,
-    _onChange = _ref.onChange,
-    _ref$textareaId = _ref.textareaId,
-    textareaId = _ref$textareaId === void 0 ? 'lobe-chat-input-area' : _ref$textareaId,
-    actionsRight = _ref.actionsRight,
-    onStop = _ref.onStop,
-    value = _ref.value,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useControlledState = useControlledState(defaultValue, {
-      defaultValue: defaultValue,
-      onChange: onInputChange,
-      value: value
-    }),
-    _useControlledState2 = _slicedToArray(_useControlledState, 2),
-    currentValue = _useControlledState2[0],
-    setCurrentValue = _useControlledState2[1];
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
-  var isChineseInput = useRef(false);
-  var handleSend = useCallback(function () {
-    if (loading && disabled) return;
-    if (onSend) onSend(currentValue);
-    setCurrentValue('');
-  }, [disabled, currentValue]);
-  return /*#__PURE__*/_jsxs("section", {
-    className: cx(styles.container, className),
-    style: _objectSpread({
-      minHeight: minHeight
-    }, style),
-    children: [/*#__PURE__*/_jsx(Action, {
-      actions: actions,
-      actionsRight: actionsRight,
-      expand: expand,
-      onExpandChange: onExpandChange
-    }), /*#__PURE__*/_jsx("div", {
-      className: styles.textareaContainer,
-      children: /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({
-        className: cx(styles.textarea, textareaClassName),
-        defaultValue: defaultValue,
-        id: textareaId,
-        ref: ref,
-        style: textareaStyle
-      }, props), {}, {
-        onBlur: function onBlur(e) {
-          if (_onBlur) _onBlur(e);
-          setCurrentValue(e.target.value);
-        },
-        onChange: function onChange(e) {
-          if (_onChange) _onChange(e);
-          setCurrentValue(e.target.value);
-        },
-        onCompositionEnd: function onCompositionEnd(e) {
-          if (_onCompositionEnd) _onCompositionEnd(e);
-          isChineseInput.current = false;
-        },
-        onCompositionStart: function onCompositionStart(e) {
-          if (_onCompositionStart) _onCompositionStart(e);
-          isChineseInput.current = true;
-        },
-        onPressEnter: function onPressEnter(e) {
-          if (_onPressEnter) _onPressEnter(e);
-          if (!loading && !e.shiftKey && !isChineseInput.current) {
-            e.preventDefault();
-            handleSend();
-          }
-        },
-        placeholder: placeholder,
-        resize: false,
-        type: "pure",
-        value: currentValue
-      }))
-    }), /*#__PURE__*/_jsxs("div", {
-      className: styles.footerBar,
-      children: [footer, loading ? /*#__PURE__*/_jsx(Button, {
-        disabled: disabled,
-        icon: loading && /*#__PURE__*/_jsx(Icon, {
-          icon: Loader2,
-          spin: true
-        }),
-        onClick: onStop,
-        children: (text === null || text === void 0 ? void 0 : text.stop) || 'Stop'
-      }) : /*#__PURE__*/_jsx(Button, {
-        disabled: disabled,
-        onClick: handleSend,
-        type: 'primary',
-        children: (text === null || text === void 0 ? void 0 : text.send) || 'Send'
-      })]
-    })]
-  });
+var ChatInputArea = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
+  var Render = mobile ? Mobile : Desktop;
+  return /*#__PURE__*/_jsx(Render, _objectSpread({
+    ref: ref
+  }, props));
 });
 export default ChatInputArea;

package/es/ChatInputArea/style.mobile.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    inner: import("antd-style").SerializedStyles;
+    input: import("antd-style").SerializedStyles;
+}>;

package/es/ChatInputArea/style.mobile.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 12px 0;\n    "]))),
+    inner: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding: 0 16px;\n    "]))),
+    input: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      background: ", " !important;\n      border: none !important;\n    "])), token.colorFillSecondary)
+  };
+});