@lobehub/ui 1.72.5 → 1.72.6

package/es/ChatInputArea/index.d.ts

@@ -40,6 +40,7 @@ export interface ChatInputAreaProps extends ActionProps, TextAreaProps {
      * @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...'
@@ -51,6 +52,7 @@ export interface ChatInputAreaProps extends ActionProps, TextAreaProps {
     style?: CSSProperties;
     text?: {
         send?: string;
+        stop?: string;
     };
     /**
      * @description Additional class name for the textarea element

package/es/ChatInputArea/index.js

@@ -1,14 +1,15 @@
 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"];
+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"];
 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 Icon from "../Icon";
 import { TextArea } from "../Input";
 import Action from "./Action";
-import InputHighlight from "./InputHighlight";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,7 +30,8 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onSend = _ref.onSend,
     _ref$defaultValue = _ref.defaultValue,
     defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
-    loading = _ref.loading,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? true : _ref$loading,
     disabled = _ref.disabled,
     onInputChange = _ref.onInputChange,
     _onPressEnter = _ref.onPressEnter,
@@ -40,6 +42,7 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$textareaId = _ref.textareaId,
     textareaId = _ref$textareaId === void 0 ? 'lobe-chat-input-area' : _ref$textareaId,
     actionsRight = _ref.actionsRight,
+    onStop = _ref.onStop,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -50,7 +53,7 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
     value = _useState2[0],
     setValue = _useState2[1];
   var handleSend = useCallback(function () {
-    if (disabled) return;
+    if (loading && disabled) return;
     if (onSend) onSend(value);
     setValue('');
   }, [disabled, value]);
@@ -67,12 +70,9 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
       actionsRight: actionsRight,
       expand: expand,
       onExpandChange: onExpandChange
-    }), /*#__PURE__*/_jsxs("div", {
+    }), /*#__PURE__*/_jsx("div", {
       className: styles.textareaContainer,
-      children: [/*#__PURE__*/_jsx(InputHighlight, {
-        target: textareaId,
-        value: value
-      }), /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({
+      children: /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({
         className: cx(styles.textarea, textareaClassName),
         defaultValue: defaultValue,
         id: textareaId,
@@ -106,14 +106,21 @@ var ChatInputArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
         resize: false,
         type: "pure",
         value: value
-      }))]
+      }))
     }), /*#__PURE__*/_jsxs("div", {
       className: styles.footerBar,
-      children: [footer, /*#__PURE__*/_jsx(Button, {
+      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,
-        loading: loading,
         onClick: handleSend,
-        type: "primary",
+        type: 'primary',
         children: (text === null || text === void 0 ? void 0 : text.send) || 'Send'
       })]
     })]

package/es/ChatInputArea/style.d.ts

@@ -4,7 +4,6 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     actionsRight: import("antd-style").SerializedStyles;
     container: import("antd-style").SerializedStyles;
     footerBar: import("antd-style").SerializedStyles;
-    highlight: import("antd-style").SerializedStyles;
     textarea: import("antd-style").SerializedStyles;
     textareaContainer: import("antd-style").SerializedStyles;
 }>;

package/es/ChatInputArea/style.js

@@ -1,17 +1,15 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token;
+  var css = _ref.css;
   return {
     actionLeft: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      flex: 1;\n      gap: 4px;\n      align-items: center;\n      justify-content: flex-start;\n    "]))),
     actionsBar: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: space-between;\n\n      padding: 0 16px;\n    "]))),
     actionsRight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: 0;\n      gap: 4px;\n      align-items: center;\n      justify-content: flex-end;\n    "]))),
     container: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n\n      height: 100%;\n      padding: 12px 0 16px;\n    "]))),
     footerBar: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: none;\n      gap: 8px;\n      align-items: center;\n      justify-content: flex-end;\n\n      padding: 0 24px;\n    "]))),
-    highlight: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      pointer-events: none;\n\n      position: absolute;\n      inset: 0;\n\n      overflow-x: hidden;\n      overflow-y: auto;\n\n      padding: 0 24px;\n\n      .shiki {\n        margin: 0;\n      }\n\n      pre {\n        font-family: ", " !important;\n        line-height: 1.5;\n        color: ", ";\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n    "])), token.fontFamilyCode, token.colorSuccess),
-    textarea: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      height: 100% !important;\n      padding: 0 24px;\n\n      font-family: ", " !important;\n      line-height: 1.5;\n      color: transparent;\n\n      caret-color: ", ";\n    "])), token.fontFamilyCode, token.colorText),
-    textareaContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: 1;\n    "])))
+    textarea: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      height: 100% !important;\n      padding: 0 24px;\n      line-height: 1.5;\n    "]))),
+    textareaContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      position: relative;\n      flex: 1;\n    "])))
   };
 });

package/es/EditableMessage/index.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties } from 'react';
+import { type MessageInputProps } from "../MessageInput";
 import { type MessageModalProps } from "../MessageModal";
 export interface EditableMessageProps {
     /**
@@ -14,12 +15,13 @@ export interface EditableMessageProps {
          */
         markdown?: string;
     };
-    editButtonSize?: 'small' | 'middle';
+    editButtonSize?: MessageInputProps['editButtonSize'];
     /**
      * @title Whether the component is in edit mode or not
      * @default false
      */
     editing?: boolean;
+    height?: number;
     /**
      * @title Callback function when the value changes
      * @param value - The new value

package/es/EditableMessage/index.js

@@ -1,4 +1,7 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+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 { memo } from 'react';
 import useControlledState from 'use-merge-value';
 import Markdown from "../Markdown";
@@ -21,6 +24,7 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     _ref$showEditWhenEmpt = _ref.showEditWhenEmpty,
     showEditWhenEmpty = _ref$showEditWhenEmpt === void 0 ? false : _ref$showEditWhenEmpt,
     styles = _ref.styles,
+    height = _ref.height,
     editButtonSize = _ref.editButtonSize,
     text = _ref.text;
   var _useControlledState = useControlledState(false, {
@@ -37,10 +41,11 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     _useControlledState4 = _slicedToArray(_useControlledState3, 2),
     expand = _useControlledState4[0],
     setExpand = _useControlledState4[1];
-  return !value && showEditWhenEmpty ? /*#__PURE__*/_jsx(MessageInput, {
+  var input = /*#__PURE__*/_jsx(MessageInput, {
     className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
     defaultValue: value,
     editButtonSize: editButtonSize,
+    height: height,
     onCancel: function onCancel() {
       return setTyping(false);
     },
@@ -51,24 +56,16 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
     placeholder: placeholder,
     style: styles === null || styles === void 0 ? void 0 : styles.input,
     text: text
-  }) : /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!expand && isEdit ? /*#__PURE__*/_jsx(MessageInput, {
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
-      defaultValue: value,
-      editButtonSize: editButtonSize,
-      onCancel: function onCancel() {
-        return setTyping(false);
-      },
-      onConfirm: function onConfirm(text) {
-        _onChange === null || _onChange === void 0 ? void 0 : _onChange(text);
-        setTyping(false);
-      },
-      placeholder: placeholder,
-      style: styles === null || styles === void 0 ? void 0 : styles.input,
-      text: text
-    }) : /*#__PURE__*/_jsx(Markdown, {
+  });
+  if (!value && showEditWhenEmpty) return input;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [!expand && isEdit ? input : /*#__PURE__*/_jsx(Markdown, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
-      style: styles === null || styles === void 0 ? void 0 : styles.markdown,
+      style: _objectSpread({
+        height: height,
+        overflowX: 'hidden',
+        overflowY: 'auto'
+      }, styles === null || styles === void 0 ? void 0 : styles.markdown),
       children: value || placeholder
     }), /*#__PURE__*/_jsx(MessageModal, {
       editing: isEdit,

package/es/Input/style.js

@@ -9,6 +9,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n      transition:\n        background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:focus {\n        border-color: ", ";\n      }\n\n      &.ant-input-affix-wrapper-focused {\n        border-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.motionEaseOut, token.colorFillTertiary, token.colorTextQuaternary, token.colorTextQuaternary);
   return {
     input: cx(type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n          max-width: 100%;\n          height: ", ";\n          padding: ", ";\n\n          input {\n            background: transparent;\n          }\n        "])), type === 'pure' ? 'unset' : '36px', type === 'pure' ? '0' : '0 12px')),
-    textarea: cx(type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          max-width: 100%;\n          padding: ", ";\n\n          textarea {\n            background: transparent;\n          }\n        "])), type === 'pure' ? '0' : '8px 12px'))
+    textarea: cx(type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          max-width: 100%;\n          padding: ", ";\n          border-radius: ", ";\n\n          textarea {\n            background: transparent;\n          }\n        "])), type === 'pure' ? '0' : '8px 12px', type === 'pure' ? '0' : "".concat(token.borderRadius, "px")))
   };
 });

package/es/MessageInput/index.d.ts

@@ -11,7 +11,7 @@ export interface MessageInputProps extends DivProps {
      * @description The default value of the input box.
      */
     defaultValue?: string;
-    editButtonSize?: 'small' | 'middle';
+    editButtonSize?: ButtonProps['size'];
     height?: number | string;
     /**
      * @description Callback function triggered when user clicks on the cancel button.

package/es/MessageInput/index.js

@@ -1,13 +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", "type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height", "editButtonSize"];
+var _excluded = ["text", "type", "onCancel", "defaultValue", "onConfirm", "renderButtons", "textareaStyle", "textareaClassname", "placeholder", "height", "style", "editButtonSize"];
 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 { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import CodeEditor from "../CodeEditor";
+import { TextArea } from "../Input";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -26,6 +26,7 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
     placeholder = _ref$placeholder === void 0 ? 'Type something...' : _ref$placeholder,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? 'fit-content' : _ref$height,
+    style = _ref.style,
     _ref$editButtonSize = _ref.editButtonSize,
     editButtonSize = _ref$editButtonSize === void 0 ? 'middle' : _ref$editButtonSize,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -36,32 +37,30 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  return /*#__PURE__*/_jsxs(Flexbox, {
-    gap: 8,
-    children: [/*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
-      gap: 8,
-      style: {
-        flex: 1,
-        width: '100%'
-      }
-    }, props), {}, {
-      children: /*#__PURE__*/_jsx(CodeEditor, {
-        className: cx(styles, textareaClassname),
-        language: "md",
-        onValueChange: function onValueChange(value) {
-          setRole(value);
-        },
-        placeholder: placeholder,
-        resize: false,
-        style: _objectSpread({
-          height: height,
-          minHeight: '100%'
-        }, textareaStyle),
-        textareaClassName: cx(styles, textareaClassname),
-        type: type,
-        value: temporarySystemRole
-      })
-    })), /*#__PURE__*/_jsx(Flexbox, {
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    gap: 16,
+    style: _objectSpread({
+      flex: 1,
+      width: '100%'
+    }, style)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx(TextArea, {
+      className: cx(styles, textareaClassname),
+      onBlur: function onBlur(e) {
+        return setRole(e.target.value);
+      },
+      onChange: function onChange(e) {
+        return setRole(e.target.value);
+      },
+      placeholder: placeholder,
+      resize: false,
+      style: _objectSpread({
+        height: height,
+        minHeight: '100%'
+      }, textareaStyle),
+      type: type,
+      value: temporarySystemRole
+    }), /*#__PURE__*/_jsx(Flexbox, {
       direction: 'horizontal-reverse',
       gap: 8,
       children: renderButtons ? renderButtons(temporarySystemRole).map(function (buttonProps, index) {
@@ -83,6 +82,6 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
         })]
       })
     })]
-  });
+  }));
 });
 export default MessageInput;

package/es/MessageInput/style.js

@@ -3,5 +3,5 @@ var _templateObject;
 import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 14px;\n    line-height: 1.8;\n  "])));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    height: 100%;\n    font-size: 14px;\n    line-height: 1.8;\n  "])));
 });

package/package.json

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

package/es/ChatInputArea/InputHighlight.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-interface InputHighlightProps {
-    target: string;
-    value: string;
-}
-declare const InputHighlight: import("react").NamedExoticComponent<InputHighlightProps>;
-export default InputHighlight;

package/es/ChatInputArea/InputHighlight.js

@@ -1,39 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { useScroll, useSize } from 'ahooks';
-import { memo, useEffect, useRef, useState } from 'react';
-import { SyntaxHighlighter } from "../Highlighter";
-import { useStyles } from "./style";
-import { jsx as _jsx } from "react/jsx-runtime";
-var InputHighlight = /*#__PURE__*/memo(function (_ref) {
-  var value = _ref.value,
-    target = _ref.target;
-  var ref = useRef(null);
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    nativeTextarea = _useState2[0],
-    setNativeTextarea = _useState2[1];
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
-  useEffect(function () {
-    if (!nativeTextarea) setNativeTextarea(document.querySelector("#".concat(target)));
-  }, []);
-  var size = useSize(nativeTextarea);
-  var scroll = useScroll(nativeTextarea);
-  useEffect(function () {
-    ref.current.scroll(0, (scroll === null || scroll === void 0 ? void 0 : scroll.top) || 0);
-  }, [scroll === null || scroll === void 0 ? void 0 : scroll.top]);
-  return /*#__PURE__*/_jsx("div", {
-    className: styles.highlight,
-    "data-code-type": "highlighter",
-    ref: ref,
-    style: {
-      height: size === null || size === void 0 ? void 0 : size.height,
-      width: size === null || size === void 0 ? void 0 : size.width
-    },
-    children: /*#__PURE__*/_jsx(SyntaxHighlighter, {
-      language: "markdown",
-      children: value.trim()
-    })
-  });
-});
-export default InputHighlight;