@lobehub/ui 1.88.1 → 1.89.0

package/es/ChatInputArea/index.d.ts

@@ -63,6 +63,7 @@ export interface ChatInputAreaProps extends ActionProps, TextAreaProps {
      * @description CSS styles for the textarea element
      */
     textareaStyle?: CSSProperties;
+    value?: string;
 }
 declare const ChatInputArea: import("react").ForwardRefExoticComponent<ChatInputAreaProps & import("react").RefAttributes<InputRef>>;
 export default ChatInputArea;

package/es/ChatInputArea/index.js

@@ -1,12 +1,13 @@
 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"];
+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, useEffect, useRef, useState } from '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";
@@ -42,23 +43,25 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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 _useState = useState(defaultValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
   var handleSend = useCallback(function () {
     if (loading && disabled) return;
-    if (onSend) onSend(value);
-    setValue('');
-  }, [disabled, value]);
-  useEffect(function () {
-    if (onInputChange) onInputChange(value);
-  }, [value]);
+    if (onSend) onSend(currentValue);
+    setCurrentValue('');
+  }, [disabled, currentValue]);
   return /*#__PURE__*/_jsxs("section", {
     className: cx(styles.container, className),
     style: _objectSpread({
@@ -80,11 +83,11 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }, props), {}, {
         onBlur: function onBlur(e) {
           if (_onBlur) _onBlur(e);
-          setValue(e.target.value);
+          setCurrentValue(e.target.value);
         },
         onChange: function onChange(e) {
           if (_onChange) _onChange(e);
-          setValue(e.target.value);
+          setCurrentValue(e.target.value);
         },
         onCompositionEnd: function onCompositionEnd(e) {
           if (_onCompositionEnd) _onCompositionEnd(e);
@@ -104,7 +107,7 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
         placeholder: placeholder,
         resize: false,
         type: "pure",
-        value: value
+        value: currentValue
       }))
     }), /*#__PURE__*/_jsxs("div", {
       className: styles.footerBar,

package/package.json

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