@lobehub/ui 1.92.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/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)
+  };
+});

package/es/ChatInputArea/type.d.ts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { ActionProps } from "./Action";
+export interface ChatInputBase extends ActionProps {
+    /**
+     * @description Default value for the input area
+     */
+    defaultValue?: string;
+    /**
+     * @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 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;
+    text?: {
+        send?: string;
+        stop?: string;
+    };
+    value?: string;
+}

package/es/ChatInputArea/type.js

@@ -0,0 +1 @@
+export {};

package/es/ChatItem/components/Actions.d.ts

@@ -2,6 +2,7 @@
 import { ChatItemProps } from "..";
 export interface ActionsProps {
     actions: ChatItemProps['actions'];
+    editing?: boolean;
     placement?: ChatItemProps['placement'];
     type?: ChatItemProps['type'];
 }

package/es/ChatItem/components/Actions.js

@@ -4,8 +4,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 var Actions = /*#__PURE__*/memo(function (_ref) {
   var actions = _ref.actions,
     placement = _ref.placement,
-    type = _ref.type;
+    type = _ref.type,
+    editing = _ref.editing;
   var _useStyles = useStyles({
+      editing: editing,
       placement: placement,
       type: type
     }),

package/es/ChatItem/components/BorderSpacing.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-import { ChatItemProps } from "..";
 export interface BorderSpacingProps {
-    borderSpacing?: ChatItemProps['borderSpacing'];
+    borderSpacing?: number;
 }
 declare const BorderSpacing: import("react").NamedExoticComponent<BorderSpacingProps>;
 export default BorderSpacing;

package/es/ChatItem/components/MessageContent.js

@@ -16,6 +16,7 @@ var Loading = /*#__PURE__*/memo(function (_ref) {
     type = _ref.type,
     primary = _ref.primary;
   var _useStyles = useStyles({
+      editing: editing,
       placement: placement,
       primary: primary,
       type: type
@@ -24,7 +25,7 @@ var Loading = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles;
   var content = /*#__PURE__*/_jsx(EditableMessage, {
     classNames: {
-      textarea: styles.editingInput
+      input: styles.editingInput
     },
     editButtonSize: 'small',
     editing: editing,

package/es/ChatItem/components/Title.js

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { formatTime } from "../../utils/formatTime";
 import { useStyles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -13,8 +14,10 @@ var Title = /*#__PURE__*/memo(function (_ref) {
       showTitle: showTitle
     }),
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs("title", {
+  return /*#__PURE__*/_jsxs(Flexbox, {
     className: styles.name,
+    gap: 4,
+    horizontal: true,
     children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("time", {
       children: formatTime(time)
     })]

package/es/ChatItem/index.js

@@ -1,9 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["avatarAddon", "onAvatarClick", "actions", "className", "primary", "borderSpacing", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "ErrorMessage"];
+var _excluded = ["avatarAddon", "onAvatarClick", "actions", "className", "primary", "loading", "message", "placement", "type", "avatar", "error", "showTitle", "time", "editing", "onChange", "onEditingChange", "messageExtra", "renderMessage", "text", "ErrorMessage"];
 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 { useResponsive } from 'antd-style';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import Actions from "./components/Actions";
 import Avatar from "./components/Avatar";
 import BorderSpacing from "./components/BorderSpacing";
@@ -13,13 +15,13 @@ import Title from "./components/Title";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+var MOBILE_AVATAR_SIZE = 32;
 var ChatItem = /*#__PURE__*/memo(function (_ref) {
   var avatarAddon = _ref.avatarAddon,
     onAvatarClick = _ref.onAvatarClick,
     actions = _ref.actions,
     className = _ref.className,
     primary = _ref.primary,
-    borderSpacing = _ref.borderSpacing,
     loading = _ref.loading,
     message = _ref.message,
     _ref$placement = _ref.placement,
@@ -38,7 +40,10 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     text = _ref.text,
     ErrorMessage = _ref.ErrorMessage,
     props = _objectWithoutProperties(_ref, _excluded);
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
   var _useStyles = useStyles({
+      editing: editing,
       placement: placement,
       primary: primary,
       showTitle: showTitle,
@@ -47,24 +52,28 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     }),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles.container, className)
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    gap: mobile ? 6 : 12,
+    horizontal: true
   }, props), {}, {
     children: [/*#__PURE__*/_jsx(Avatar, {
       addon: avatarAddon,
       avatar: avatar,
       loading: loading,
       onClick: onAvatarClick,
-      placement: placement
-    }), /*#__PURE__*/_jsxs("div", {
+      placement: placement,
+      size: mobile ? MOBILE_AVATAR_SIZE : undefined
+    }), /*#__PURE__*/_jsxs(Flexbox, {
       className: styles.messageContainer,
       children: [/*#__PURE__*/_jsx(Title, {
         avatar: avatar,
         placement: placement,
         showTitle: showTitle,
         time: time
-      }), /*#__PURE__*/_jsxs("div", {
+      }), /*#__PURE__*/_jsxs(Flexbox, {
         className: styles.messageContent,
+        gap: 8,
         children: [error ? /*#__PURE__*/_jsx(ErrorContent, {
           ErrorMessage: ErrorMessage,
           error: error,
@@ -80,14 +89,15 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
           renderMessage: renderMessage,
           text: text,
           type: type
-        }), !editing && /*#__PURE__*/_jsx(Actions, {
+        }), /*#__PURE__*/_jsx(Actions, {
           actions: actions,
+          editing: editing,
           placement: placement,
           type: type
         })]
       })]
-    }), /*#__PURE__*/_jsx(BorderSpacing, {
-      borderSpacing: borderSpacing
+    }), mobile && type === 'block' && /*#__PURE__*/_jsx(BorderSpacing, {
+      borderSpacing: MOBILE_AVATAR_SIZE
     })]
   }));
 });

package/es/ChatItem/style.d.ts

@@ -1,12 +1,13 @@
 export declare const useStyles: (props?: {
     avatarSize?: number | undefined;
+    editing?: boolean | undefined;
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
     showTitle?: boolean | undefined;
     title?: string | undefined;
     type?: "block" | "pure" | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
-    actions: import("antd-style").SerializedStyles;
+    actions: string;
     alert: import("antd-style").SerializedStyles;
     avatarContainer: import("antd-style").SerializedStyles;
     avatarGroupContainer: import("antd-style").SerializedStyles;
@@ -15,8 +16,8 @@ export declare const useStyles: (props?: {
     editingInput: import("antd-style").SerializedStyles;
     loading: import("antd-style").SerializedStyles;
     message: string;
-    messageContainer: import("antd-style").SerializedStyles;
-    messageContent: import("antd-style").SerializedStyles;
+    messageContainer: string;
+    messageContent: string;
     messageExtra: string;
     name: import("antd-style").SerializedStyles;
 }>;

package/es/ChatItem/style.js

@@ -1,34 +1,37 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
     token = _ref.token,
-    isDarkMode = _ref.isDarkMode;
+    isDarkMode = _ref.isDarkMode,
+    responsive = _ref.responsive;
   var placement = _ref2.placement,
     type = _ref2.type,
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
-    showTitle = _ref2.showTitle;
+    showTitle = _ref2.showTitle,
+    editing = _ref2.editing;
   var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? isDarkMode ? token.colorFill : token.colorBgElevated : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-bottom: -16px;\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
+  var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n      "])));
   return {
-    actions: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: flex-start;\n        align-self: ", ";\n        justify-content: ", ";\n      "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'),
-    alert: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
-    avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
-    avatarGroupContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
-    editingContainer: cx(css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          padding: 8px 12px 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
-    editingInput: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        min-width: 800px !important;\n      "]))),
-    loading: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
-    message: cx(typeStylish, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
-    messageContent: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        position: revert;\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 8px;\n        align-items: ", ";\n      "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end'),
+    actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          display: flex;\n          align-items: flex-start;\n          align-self: ", ";\n          justify-content: ", ";\n        "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
+    alert: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
+    avatarContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
+    avatarGroupContainer: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          justify-content: revert;\n\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 16px;\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut, responsive.mobile)),
+    editingContainer: cx(editingStylish, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          padding: 8px 12px 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
+    editingInput: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        width: 100%;\n      "]))),
+    loading: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
+    message: cx(typeStylish, css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    messageContainer: cx(editingStylish, css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          position: relative;\n          align-items: ", ";\n        "])), placement === 'left' ? 'flex-start' : 'flex-end')),
+    messageContent: cx(editingStylish, css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow-x: hidden;\n          flex-direction: ", ";\n          align-items: ", ";\n\n          ", " {\n            flex-direction: column;\n          }\n        "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end', responsive.mobile)),
     messageExtra: cx('message-extra'),
-    name: css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
+    name: css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        flex-direction: ", ";\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
   };
 });

package/es/ChatItem/type.d.ts

@@ -13,10 +13,6 @@ export interface ChatItemProps {
      */
     avatar: MetaData;
     avatarAddon?: ReactNode;
-    /**
-     * @description Whether to add border spacing
-     */
-    borderSpacing?: number | string;
     /**
      * @description Custom CSS class name for the chat item
      */

package/es/SpotlightCard/SpotlightCardItem.js

@@ -21,7 +21,7 @@ var SpotlightCardItem = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: cx(className, styles.itemContainer),
+    className: cx(styles.itemContainer, className),
     style: _objectSpread({
       borderRadius: borderRadius
     }, style)

package/es/SpotlightCard/index.d.ts

@@ -7,6 +7,7 @@ export interface SpotlightCardProps<T = any> extends DivProps {
     items: T[];
     renderItem: (item: T) => ReactNode;
     size?: number;
+    spotlight?: boolean;
 }
 declare const SpotlightCard: import("react").NamedExoticComponent<SpotlightCardProps<any>>;
 export default SpotlightCard;

package/es/SpotlightCard/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["items", "renderItem", "className", "columns", "gap", "style", "size", "borderRadius"];
+var _excluded = ["items", "renderItem", "className", "columns", "gap", "style", "size", "borderRadius", "spotlight"];
 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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
@@ -24,6 +24,8 @@ var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
     size = _ref$size === void 0 ? 800 : _ref$size,
     _ref$borderRadius = _ref.borderRadius,
     borderRadius = _ref$borderRadius === void 0 ? 12 : _ref$borderRadius,
+    _ref$spotlight = _ref.spotlight,
+    spotlight = _ref$spotlight === void 0 ? true : _ref$spotlight,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       borderRadius: borderRadius,
@@ -39,6 +41,7 @@ var SpotlightCard = /*#__PURE__*/memo(function (_ref) {
   }, [columns]);
   useEffect(function () {
     if (!ref.current) return;
+    if (!spotlight) return;
     var fn = function fn(e) {
       var _iterator = _createForOfIteratorHelper(document.querySelectorAll(".".concat(CHILDREN_CLASSNAME))),
         _step;

package/es/SpotlightCard/style.js

@@ -14,6 +14,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      &:hover > .", "::after {\n        opacity: 1;\n      }\n    "])), CHILDREN_CLASSNAME),
     content: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      z-index: 2;\n\n      flex-grow: 1;\n\n      height: 100%;\n      margin: 1px;\n\n      background: ", ";\n      border-radius: ", "px;\n    "])), token.colorBgContainer, borderRadius - 1),
     grid: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: grid;\n\n      ", " {\n        display: flex;\n        flex-direction: column;\n      }\n    "])), responsive.mobile),
-    itemContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n\n      background: ", ";\n      border-radius: ", "px;\n\n      &::before,\n      &::after {\n        content: '';\n\n        position: absolute;\n        top: 0;\n        left: 0;\n\n        width: 100%;\n        height: 100%;\n\n        opacity: 0;\n        border-radius: inherit;\n\n        transition: opacity 500ms;\n      }\n\n      &::before {\n        pointer-events: none;\n        user-select: none;\n        z-index: 3;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      &::after {\n        z-index: 1;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      :hover::before {\n        opacity: 1;\n      }\n    "])), rgba(token.colorBorder, 0.5), borderRadius, size, rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02), size * 0.75, rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2))
+    itemContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      position: relative;\n\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\n\n      background: ", ";\n      border-radius: ", "px;\n\n      &::before,\n      &::after {\n        content: '';\n\n        position: absolute;\n        top: 0;\n        left: 0;\n\n        width: 100%;\n        height: 100%;\n\n        opacity: 0;\n        border-radius: inherit;\n\n        transition: opacity 500ms;\n      }\n\n      &::before {\n        pointer-events: none;\n        user-select: none;\n        z-index: 3;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      &::after {\n        z-index: 1;\n        background: radial-gradient(\n          ", "px circle at var(--mouse-x) var(--mouse-y),\n          ", ",\n          transparent 40%\n        );\n      }\n\n      :hover::before {\n        opacity: 1;\n      }\n    "])), rgba(token.colorBorderSecondary, 0.75), borderRadius, size, rgba(token.colorTextBase, isDarkMode ? 0.06 : 0.02), size * 0.75, rgba(token.colorTextBase, isDarkMode ? 0.4 : 0.2))
   };
 });

package/es/TokenTag/index.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className", "displayMode", "maxValue", "value", "text", "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 { useResponsive } from 'antd-style';
 import { forwardRef } from 'react';
 import FluentEmoji from "../FluentEmoji";
 import { ICON_SIZE, useStyles } from "./style";
@@ -18,6 +19,8 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$shape = _ref.shape,
     shape = _ref$shape === void 0 ? 'round' : _ref$shape,
     props = _objectWithoutProperties(_ref, _excluded);
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
   var valueLeft = maxValue - value;
   var percent = valueLeft / maxValue;
   var type;
@@ -45,7 +48,7 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
       size: ICON_SIZE
-    }), valueLeft > 0 ? [displayMode === 'remained' ? (text === null || text === void 0 ? void 0 : text.remained) || 'Remained' : (text === null || text === void 0 ? void 0 : text.used) || 'Used', displayMode === 'remained' ? valueLeft : value].join(' ') : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
+    }), valueLeft > 0 ? [mobile ? '' : displayMode === 'remained' ? (text === null || text === void 0 ? void 0 : text.remained) || 'Remained' : (text === null || text === void 0 ? void 0 : text.used) || 'Used', displayMode === 'remained' ? valueLeft : value].join(' ') : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
   }));
 });
 export default TokenTag;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.92.0",
+  "version": "1.93.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",