@lobehub/ui 1.35.0 → 1.36.0

package/es/ChatInputArea/index.d.ts

@@ -1,30 +1,34 @@
-import { ReactNode } from 'react';
-import type { DivProps } from "../types";
-export interface ChatInputAreaProps extends DivProps {
+import { CSSProperties, ReactNode } from 'react';
+import { type TextAreaProps } from "../Input";
+export interface ChatInputAreaProps extends TextAreaProps {
     /**
-     * @description Actions to be displayed in the left of actions bar
+     * @description Actions to be displayed in the input area
      */
     actions?: ReactNode;
     /**
-     * @description Default value of the input
+     * @description Additional class name for the component
+     */
+    className?: string;
+    /**
+     * @description Default value for the input area
      */
     defaultValue?: string;
     /**
-     * @description Whether the input is disabled or not
+     * @description Whether the input area is disabled
      * @default false
      */
     disabled?: boolean;
     /**
-     * @description Whether the input is expanded or not
+     * @description Whether the input area is expanded
      * @default false
      */
     expand?: boolean;
     /**
-     * @description Footer to be displayed below input area
+     * @description Footer content to be displayed below the input area
      */
     footer?: ReactNode;
     /**
-     * @description Whether the input is in loading state or not
+     * @description Whether the input area is in loading state
      * @default false
      */
     loading?: boolean;
@@ -35,24 +39,36 @@ export interface ChatInputAreaProps extends DivProps {
     minHeight?: number;
     /**
      * @description Callback function when the expand state changes
-     * @param expand - Whether the input is expanded or not
+     * @param expand - Whether the input area is expanded
      */
     onExpandChange?: (expand: boolean) => void;
     /**
      * @description Callback function when the input value changes
-     * @param value - The current value of the input
+     * @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
+     * @param value - The current value of the input area
      */
     onSend?: (value: string) => void;
     /**
-     * @description Placeholder text of the input
+     * @description Placeholder text for the input area
      * @default 'Type something to chat...'
      */
     placeholder?: string;
+    /**
+     * @description CSS styles for the component
+     */
+    style?: CSSProperties;
+    /**
+     * @description Additional class name for the textarea element
+     */
+    textareaClassName?: string;
+    /**
+     * @description CSS styles for the textarea element
+     */
+    textareaStyle?: CSSProperties;
 }
 declare const ChatInputArea: import("react").NamedExoticComponent<ChatInputAreaProps>;
 export default ChatInputArea;

package/es/ChatInputArea/index.js

@@ -1,19 +1,22 @@
 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 = ["minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "style", "disabled", "onInputChange"];
+var _excluded = ["textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange"];
 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 { Maximize2, Minimize2 } from 'lucide-react';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import { TextArea } from "../Input";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
-  var _ref$minHeight = _ref.minHeight,
+var ChatInputArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, reference) {
+  var 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,
@@ -26,9 +29,13 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
     _ref$defaultValue = _ref.defaultValue,
     defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
     loading = _ref.loading,
-    style = _ref.style,
     disabled = _ref.disabled,
     onInputChange = _ref.onInputChange,
+    _onPressEnter = _ref.onPressEnter,
+    _onCompositionStart = _ref.onCompositionStart,
+    _onCompositionEnd = _ref.onCompositionEnd,
+    _onBlur = _ref.onBlur,
+    _onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
   var isChineseInput = useRef(false);
   var _useState = useState(defaultValue),
@@ -49,12 +56,11 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
   useEffect(function () {
     if (onInputChange) onInputChange(value);
   }, [value]);
-  return /*#__PURE__*/_jsxs("section", _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs("section", {
     className: cx(styles.container, className),
     style: _objectSpread({
       minHeight: minHeight
-    }, style)
-  }, props), {}, {
+    }, style),
     children: [/*#__PURE__*/_jsxs("div", {
       className: styles.actionsBar,
       children: [/*#__PURE__*/_jsx("div", {
@@ -67,22 +73,30 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
           onClick: handleExpandClick
         })
       })]
-    }), /*#__PURE__*/_jsx(TextArea, {
-      className: styles.textarea,
+    }), /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({
+      className: cx(styles.textarea, textareaClassName),
       defaultValue: defaultValue,
+      ref: reference,
+      style: textareaStyle
+    }, props), {}, {
       onBlur: function onBlur(e) {
-        return setValue(e.target.value);
+        if (_onBlur) _onBlur(e);
+        setValue(e.target.value);
       },
       onChange: function onChange(e) {
-        return setValue(e.target.value);
+        if (_onChange) _onChange(e);
+        setValue(e.target.value);
       },
-      onCompositionEnd: function onCompositionEnd() {
+      onCompositionEnd: function onCompositionEnd(e) {
+        if (_onCompositionEnd) _onCompositionEnd(e);
         isChineseInput.current = false;
       },
-      onCompositionStart: function onCompositionStart() {
+      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();
@@ -92,7 +106,7 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
       resize: false,
       type: "pure",
       value: value
-    }), /*#__PURE__*/_jsxs("div", {
+    })), /*#__PURE__*/_jsxs("div", {
       className: styles.footerBar,
       children: [footer, /*#__PURE__*/_jsx(Button, {
         disabled: disabled,
@@ -102,6 +116,6 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
         children: "Send"
       })]
     })]
-  }));
-});
+  });
+}));
 export default ChatInputArea;

package/package.json

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