@lobehub/ui 1.25.4 → 1.26.0

package/es/ChatInputArea/index.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import type { DivProps } from "../types";
+export interface ChatInputAreaProps extends DivProps {
+    actions?: ReactNode;
+    defaultValue?: string;
+    disabled?: boolean;
+    expand?: boolean;
+    footer?: ReactNode;
+    loading?: boolean;
+    minHeight?: number;
+    onExpandChange?: (expand: boolean) => void;
+    onInputChange?: (value: string) => void;
+    onSend?: (value: string) => void;
+    placeholder?: string;
+}
+declare const ChatInputArea: import("react").NamedExoticComponent<ChatInputAreaProps>;
+export default ChatInputArea;

package/es/ChatInputArea/index.js

@@ -0,0 +1,106 @@
+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"];
+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 { ActionIcon, TextArea } from "./..";
+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,
+    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,
+    style = _ref.style,
+    disabled = _ref.disabled,
+    onInputChange = _ref.onInputChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isChineseInput = useRef(false);
+  var _useState = useState(defaultValue),
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var handleExpandClick = useCallback(function () {
+    if (onExpandChange) onExpandChange(!expand);
+  }, [expand]);
+  var handleSend = useCallback(function () {
+    if (disabled) return;
+    if (onSend) onSend(value);
+    setValue('');
+  }, [disabled, value]);
+  useEffect(function () {
+    if (onInputChange) onInputChange(value);
+  }, [value]);
+  return /*#__PURE__*/_jsxs("section", _objectSpread(_objectSpread({
+    className: cx(styles.container, className),
+    style: _objectSpread({
+      minHeight: minHeight
+    }, style)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: styles.actionsBar,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.actionLeft,
+        children: actions
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.actionsRight,
+        children: /*#__PURE__*/_jsx(ActionIcon, {
+          icon: expand ? Minimize2 : Maximize2,
+          onClick: handleExpandClick
+        })
+      })]
+    }), /*#__PURE__*/_jsx(TextArea, {
+      className: styles.textarea,
+      defaultValue: defaultValue,
+      onBlur: function onBlur(e) {
+        return setValue(e.target.value);
+      },
+      onChange: function onChange(e) {
+        return setValue(e.target.value);
+      },
+      onCompositionEnd: function onCompositionEnd() {
+        isChineseInput.current = false;
+      },
+      onCompositionStart: function onCompositionStart() {
+        isChineseInput.current = true;
+      },
+      onPressEnter: function onPressEnter(e) {
+        if (!loading && !e.shiftKey && !isChineseInput.current) {
+          e.preventDefault();
+          handleSend();
+        }
+      },
+      placeholder: placeholder,
+      resize: false,
+      type: "pure",
+      value: value
+    }), /*#__PURE__*/_jsxs("div", {
+      className: styles.footerBar,
+      children: [footer, /*#__PURE__*/_jsx(Button, {
+        disabled: disabled,
+        loading: loading,
+        onClick: handleSend,
+        type: "primary",
+        children: "Send"
+      })]
+    })]
+  }));
+});
+export default ChatInputArea;

package/es/ChatInputArea/style.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    container: import("antd-style").SerializedStyles;
+    actionsBar: import("antd-style").SerializedStyles;
+    actionLeft: import("antd-style").SerializedStyles;
+    actionsRight: import("antd-style").SerializedStyles;
+    textarea: import("antd-style").SerializedStyles;
+    footerBar: import("antd-style").SerializedStyles;
+}>;

package/es/ChatInputArea/style.js

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    container: css(_templateObject || (_templateObject = _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    "]))),
+    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    "]))),
+    actionLeft: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: 1;\n      gap: 4px;\n      align-items: center;\n      justify-content: flex-start;\n    "]))),
+    actionsRight: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: 0;\n      gap: 4px;\n      align-items: center;\n      justify-content: flex-end;\n    "]))),
+    textarea: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      flex: 1;\n      padding: 0 24px;\n    "]))),
+    footerBar: css(_templateObject6 || (_templateObject6 = _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    "])))
+  };
+});

package/es/DraggablePanel/index.d.ts

@@ -34,11 +34,13 @@ export interface DraggablePanelProps extends DivProps {
      * @default true
      */
     expandable?: boolean;
+    fullscreen?: boolean;
     /**
      * @description The style of the panel handler
      * @type CSSProperties
      */
     hanlderStyle?: React.CSSProperties;
+    maxHeight?: number;
     maxWidth?: number;
     /**
      * @description The minimum height of the panel

package/es/DraggablePanel/index.js

@@ -15,7 +15,9 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_HEIGHT = 180;
 var DEFAULT_WIDTH = 280;
 var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
-  var _ref$pin = _ref.pin,
+  var fullscreen = _ref.fullscreen,
+    maxHeight = _ref.maxHeight,
+    _ref$pin = _ref.pin,
     pin = _ref$pin === void 0 ? 'true' : _ref$pin,
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? 'fixed' : _ref$mode,
@@ -46,7 +48,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   var ref = useRef(null);
   var isHovering = useHover(ref);
   var isVertical = placement === 'top' || placement === 'bottom';
-  var _useStyles = useStyles('draggable-panel'),
+  var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var _useControlledState = useControlledState(defaultExpand, {
@@ -94,9 +96,10 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     }, customizeDefaultSize);
   }, [isVertical]);
   var sizeProps = isExpand ? {
-    minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : 280,
-    minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined,
-    maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined,
+    minWidth: typeof minWidth === 'number' ? Math.max(minWidth, 0) : minWidth,
+    minHeight: typeof minHeight === 'number' ? Math.max(minHeight, 0) : minHeight,
+    maxWidth: typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : maxWidth,
+    maxHeight: typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : maxHeight,
     defaultSize: defaultSize,
     size: size
   } : isVertical ? {
@@ -186,6 +189,10 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     style: style,
     children: children
   }));
+  if (fullscreen) return /*#__PURE__*/_jsx("div", {
+    className: cx(styles.fullscreen, className),
+    children: children
+  });
   return /*#__PURE__*/_jsxs("aside", {
     className: cx(styles.container,
     // @ts-ignore

package/es/DraggablePanel/style.d.ts

@@ -1,4 +1,4 @@
-export declare const useStyles: (props?: string | undefined) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     container: string;
     fixed: import("antd-style").SerializedStyles;
     leftFloat: string;
@@ -15,4 +15,5 @@ export declare const useStyles: (props?: string | undefined) => import("antd-sty
     rightHandle: string;
     topHandle: string;
     bottomHandle: string;
+    fullscreen: import("antd-style").SerializedStyles;
 }>;

package/es/DraggablePanel/style.js

@@ -1,10 +1,11 @@
 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, _templateObject17, _templateObject18, _templateObject19;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 import { createStyles, css, cx } from 'antd-style';
 var offset = 16;
 var toggleLength = 40;
 var toggleShort = 16;
-export var useStyles = createStyles(function (_ref, prefix) {
+var prefix = 'draggable-panel';
+export var useStyles = createStyles(function (_ref) {
   var token = _ref.token;
   var commonHandle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    &::before {\n      content: '';\n      position: absolute;\n      z-index: 50;\n      transition: all 0.2s ", ";\n    }\n\n    &:hover,\n    &:active {\n      &::before {\n        background: ", " !important;\n      }\n    }\n  "])), token.motionEaseOut, token.colorPrimary);
   var commonToggle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 101;\n    opacity: 0;\n    transition: all 0.2s ", ";\n\n    &:hover {\n      opacity: 1 !important;\n    }\n\n    &:active {\n      opacity: 1 !important;\n    }\n\n    > div {\n      cursor: pointer;\n\n      position: absolute;\n\n      color: ", ";\n\n      background: ", ";\n      border-color: ", ";\n      border-style: solid;\n      border-width: 1px;\n      border-radius: 4px;\n\n      transition: all 0.2s ", ";\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background: ", ";\n      }\n    }\n  "])), token.motionEaseOut, token.colorTextTertiary, token.colorFillTertiary, token.colorBorderSecondary, token.motionEaseOut, token.colorTextSecondary, token.colorFillSecondary, token.colorText, token.colorFill);
@@ -25,6 +26,7 @@ export var useStyles = createStyles(function (_ref, prefix) {
     leftHandle: cx(css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          left: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-left-handle")),
     rightHandle: cx(css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        ", ";\n        &::before {\n          right: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-right-handle")),
     topHandle: cx("".concat(prefix, "-top-handle"), css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          top: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      "])), commonHandle)),
-    bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          bottom: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      "])), commonHandle))
+    bottomHandle: cx("".concat(prefix, "-bottom-handle"), css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          bottom: 50%;\n          width: 100%;\n          height: 2px;\n        }\n      "])), commonHandle)),
+    fullscreen: css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n    "])))
   };
 });

package/es/EditableMessageList/index.js

@@ -1,13 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { PlusOutlined } from '@ant-design/icons';
 import { Button, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
-import { TrashIcon } from 'lucide-react';
+import { Plus, Trash } from 'lucide-react';
 import { memo, useEffect, useReducer } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import IconAction from "../ActionIcon";
 import { messagesReducer } from "../Chat";
 import { ControlInput } from "../components/ControlInput";
+import { ActionIcon, Icon } from "./..";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
@@ -45,13 +44,13 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
           },
           options: [{
             value: 'system',
-            label: '系统'
+            label: 'System'
           }, {
             value: 'user',
-            label: '输入'
+            label: 'Input'
           }, {
             value: 'assistant',
-            label: '输出'
+            label: 'Output'
           }],
           style: {
             width: 120
@@ -68,8 +67,8 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
           },
           placeholder: item.role === 'user' ? '请填入输入的样例内容' : '请填入输出的样例',
           value: item.content
-        }), /*#__PURE__*/_jsx(IconAction, {
-          icon: TrashIcon,
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          icon: Trash,
           onClick: function onClick() {
             dispatch({
               type: 'deleteMessage',
@@ -77,13 +76,18 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
             });
           },
           placement: "right",
+          size: {
+            fontSize: 16
+          },
           title: "Delete"
         })]
       }, "".concat(index, "-").concat(item.content));
     }), /*#__PURE__*/_jsx(Button, {
       block: true,
       disabled: disabled,
-      icon: /*#__PURE__*/_jsx(PlusOutlined, {}),
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: Plus
+      }),
       onClick: function onClick() {
         var lastMeg = chatMessages.at(-1);
         dispatch({
@@ -94,7 +98,7 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
           }
         });
       },
-      children: "\u6DFB\u52A0\u4E00\u9879"
+      children: "Add Props"
     })]
   });
 }, isEqual);

package/es/Hero/index.js

@@ -33,21 +33,18 @@ var Hero = /*#__PURE__*/memo(function (_ref) {
           rel: "noreferrer",
           target: openExternal ? '_blank' : undefined,
           children: type === 'primary' ? /*#__PURE__*/_jsx(GradientButton, {
+            icon: ButtonIcon && /*#__PURE__*/_jsx(Icon, {
+              icon: ButtonIcon
+            }),
             size: "large",
             children: text
           }, index) : /*#__PURE__*/_jsx(Button, {
+            icon: ButtonIcon && /*#__PURE__*/_jsx(Icon, {
+              icon: ButtonIcon
+            }),
             size: "large",
             type: "primary",
-            children: /*#__PURE__*/_jsxs(Space, {
-              align: "center",
-              children: [ButtonIcon && /*#__PURE__*/_jsx(Icon, {
-                icon: ButtonIcon,
-                size: {
-                  fontSize: 18,
-                  strokeWidth: 2
-                }
-              }), text]
-            })
+            children: text
           }, index)
         }, text);
       })

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -1,10 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
 import { useThemeMode } from 'antd-style';
+import { Loader2 } from 'lucide-react';
 import { memo, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 import { useHighlight } from "../../hooks/useHighlight";
+import { Icon } from "../..";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -13,8 +14,7 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
     language = _ref.language;
   var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    theme = _useStyles.theme;
+    styles = _useStyles.styles;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
   var _useHighlight = useHighlight(function (s) {
@@ -43,11 +43,9 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
       className: styles.loading,
       gap: 8,
       horizontal: true,
-      children: [/*#__PURE__*/_jsx(Loading, {
-        spin: true,
-        style: {
-          color: theme.colorTextTertiary
-        }
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: Loader2,
+        spin: true
       }), "Highlighting..."]
     })]
   });

package/es/Icon/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "size", "style", "className", "spin"];
+var _excluded = ["icon", "size", "className", "spin"];
 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, useMemo } from 'react';
@@ -40,7 +40,6 @@ var calcSize = function calcSize(size) {
 var Icon = /*#__PURE__*/memo(function (_ref) {
   var icon = _ref.icon,
     size = _ref.size,
-    style = _ref.style,
     className = _ref.className,
     spin = _ref.spin,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -53,16 +52,16 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
     }, [size]),
     fontSize = _useMemo.fontSize,
     strokeWidth = _useMemo.strokeWidth;
-  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
-    className: cx(styles.icon, spin && styles.spin, className),
-    style: _objectSpread({
-      width: fontSize,
-      height: fontSize
-    }, style)
+  return /*#__PURE__*/_jsx("span", _objectSpread(_objectSpread({
+    className: cx('anticon', spin && styles.spin, className),
+    role: "img"
   }, props), {}, {
     children: /*#__PURE__*/_jsx(SvgIcon, {
+      focusable: false,
+      height: fontSize,
       size: fontSize,
-      strokeWidth: strokeWidth
+      strokeWidth: strokeWidth,
+      width: fontSize
     })
   }));
 });

package/es/Icon/style.d.ts

@@ -1,4 +1,3 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    icon: import("antd-style").SerializedStyles;
     spin: import("antd-style").SerializedStyles;
 }>;

package/es/Icon/style.js

@@ -1,11 +1,10 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 import { createStyles, keyframes } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   var spin = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n  "])));
   return {
-    icon: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    "]))),
-    spin: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      animation: ", " 1s linear infinite;\n    "])), spin)
+    spin: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      animation: ", " 1s linear infinite;\n    "])), spin)
   };
 });

package/es/Input/index.d.ts

@@ -3,11 +3,12 @@ import { InputProps as AntdInputProps } from 'antd';
 import { TextAreaProps as AntdTextAreaProps } from 'antd/es/input/TextArea';
 export interface InputProps extends AntdInputProps {
     ref?: any;
-    type?: 'ghost' | 'block';
+    type?: 'ghost' | 'block' | 'pure';
 }
 export declare const Input: import("react").NamedExoticComponent<InputProps>;
 export interface TextAreaProps extends AntdTextAreaProps {
     ref?: any;
-    type?: 'ghost' | 'block';
+    resize?: boolean;
+    type?: 'ghost' | 'block' | 'pure';
 }
 export declare const TextArea: import("react").NamedExoticComponent<TextAreaProps>;

package/es/Input/index.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "type"],
-  _excluded2 = ["className", "type"];
+  _excluded2 = ["className", "type", "resize", "style"];
 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 { Input as AntInput } from 'antd';
@@ -19,6 +19,7 @@ export var Input = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, re
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsx(AntInput, _objectSpread({
+    bordered: type !== 'pure',
     className: cx(styles.input, className),
     ref: ref
   }, props));
@@ -27,6 +28,9 @@ export var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2
   var className = _ref2.className,
     _ref2$type = _ref2.type,
     type = _ref2$type === void 0 ? 'ghost' : _ref2$type,
+    _ref2$resize = _ref2.resize,
+    resize = _ref2$resize === void 0 ? true : _ref2$resize,
+    style = _ref2.style,
     props = _objectWithoutProperties(_ref2, _excluded2);
   var _useStyles2 = useStyles({
       type: type
@@ -34,7 +38,11 @@ export var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2
     styles = _useStyles2.styles,
     cx = _useStyles2.cx;
   return /*#__PURE__*/_jsx(AntInput.TextArea, _objectSpread({
+    bordered: type !== 'pure',
     className: cx(styles.textarea, className),
-    ref: ref
+    ref: ref,
+    style: resize ? style : _objectSpread({
+      resize: 'none'
+    }, style)
   }, props));
 }));

package/es/Input/style.d.ts

@@ -1,5 +1,5 @@
 export declare const useStyles: (props?: {
-    type: 'ghost' | 'block';
+    type: 'ghost' | 'block' | 'pure';
 } | undefined) => import("antd-style").ReturnStyles<{
     input: string;
     textarea: string;

package/es/Input/style.js

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

package/es/MessageModal/index.js

@@ -1,14 +1,12 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { AimOutlined } from '@ant-design/icons';
 import { Modal } from 'antd';
+import { X } from 'lucide-react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
-import Markdown from "../Markdown";
-import MessageInput from "../MessageInput";
+import { Icon, Markdown, MessageInput } from "./..";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var MessageModal = /*#__PURE__*/memo(function (_ref) {
   var editing = _ref.editing,
     open = _ref.open,
@@ -33,10 +31,13 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
     expand = _useControlledState4[0],
     setExpand = _useControlledState4[1];
   return /*#__PURE__*/_jsx(Modal, {
-    cancelText: '关闭',
+    cancelText: 'Cancel',
     className: styles.modal,
+    closeIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: X
+    }),
     footer: isEdit ? null : undefined,
-    okText: '编辑',
+    okText: 'Edit',
     onCancel: function onCancel() {
       return setExpand(false);
     },
@@ -44,11 +45,11 @@ var MessageModal = /*#__PURE__*/memo(function (_ref) {
       setTyping(true);
     },
     open: expand,
-    title: /*#__PURE__*/_jsxs(Flexbox, {
+    title: /*#__PURE__*/_jsx(Flexbox, {
       align: 'center',
       gap: 4,
       horizontal: true,
-      children: [/*#__PURE__*/_jsx(AimOutlined, {}), "\u63D0\u793A\u8BCD"]
+      children: "Prompt"
     }),
     width: 800,
     children: isEdit ? /*#__PURE__*/_jsx(MessageInput, {

package/es/TokenTag/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+export interface TokenTagProps extends DivProps {
+    maxValue: number;
+    value: number;
+}
+declare const TokenTag: import("react").NamedExoticComponent<TokenTagProps>;
+export default TokenTag;

package/es/TokenTag/index.js

@@ -0,0 +1,41 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "maxValue", "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 { memo } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var TokenTag = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    maxValue = _ref.maxValue,
+    value = _ref.value,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var valueLeft = maxValue - value;
+  var percent = valueLeft / maxValue;
+  var type;
+  var emoji;
+  if (percent > 0.3) {
+    type = 'normal';
+    emoji = '😀';
+  } else if (percent > 0) {
+    type = 'low';
+    emoji = '😅';
+  } else {
+    type = 'overload';
+    emoji = '🤯';
+  }
+  var _useStyles = useStyles(type),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: cx(styles.container, className)
+  }, props), {}, {
+    children: [/*#__PURE__*/_jsx("span", {
+      className: styles.emoji,
+      children: emoji
+    }), valueLeft > 0 ? "Tokens ".concat(valueLeft) : "Overload"]
+  }));
+});
+export default TokenTag;

package/es/TokenTag/style.d.ts

@@ -0,0 +1,4 @@
+export declare const useStyles: (props?: "normal" | "low" | "overload" | undefined) => import("antd-style").ReturnStyles<{
+    container: string;
+    emoji: import("antd-style").SerializedStyles;
+}>;

package/es/TokenTag/style.js

@@ -0,0 +1,27 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+var HEIGHT = 28;
+var ICON_SIZE = 20;
+export var useStyles = createStyles(function (_ref, type) {
+  var cx = _ref.cx,
+    css = _ref.css,
+    token = _ref.token;
+  var percentStyle;
+  switch (type) {
+    case 'normal':
+      percentStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorSuccessText);
+      break;
+    case 'low':
+      percentStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorWarningText);
+      break;
+    case 'overload':
+    default:
+      percentStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorErrorText);
+      break;
+  }
+  return {
+    container: cx(percentStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        display: flex;\n        gap: 4px;\n        align-items: center;\n\n        height: ", "px;\n        padding: 0 ", "px 0 ", "px;\n\n        background: ", ";\n        border-radius: ", "px;\n      "])), HEIGHT, HEIGHT - ICON_SIZE, (HEIGHT - ICON_SIZE) / 2, token.colorFillSecondary, HEIGHT / 2)),
+    emoji: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      font-size: ", "px;\n    "])), ICON_SIZE)
+  };
+});

package/es/index.d.ts

@@ -2,6 +2,7 @@ export { default as ActionIcon, type ActionIconProps, type ActionIconSize } from
 export { default as ActionIconGroup, type ActionIconGroupProps } from './ActionIconGroup';
 export { default as Avatar, type AvatarProps } from './Avatar';
 export type { ChatMessage, MessageRoleType } from './Chat';
+export { default as ChatInputArea, type ChatInputAreaProps } from './ChatInputArea';
 export { default as ChatItem, type ChatItemProps } from './ChatItem';
 export { default as ChatList, type ChatListProps } from './ChatList';
 export { default as ColorScales, type ColorScalesProps } from './ColorScales';
@@ -37,6 +38,7 @@ export { default as TabsNav, type TabsNavProps } from './TabsNav';
 export { default as ThemeProvider } from './ThemeProvider';
 export { default as ThemeSwitch, type ThemeSwitchProps } from './ThemeSwitch';
 export { default as Toc, type TocProps } from './Toc';
+export { default as TokenTag, type TokenTagProps } from './TokenTag';
 export { default as Tooltip, type TooltipProps } from './Tooltip';
 export { type LobeCustomStylish } from './types/customStylish';
 export { type LobeCustomToken } from './types/customToken';

package/es/index.js

@@ -1,6 +1,7 @@
 export { default as ActionIcon } from "./ActionIcon";
 export { default as ActionIconGroup } from "./ActionIconGroup";
 export { default as Avatar } from "./Avatar";
+export { default as ChatInputArea } from "./ChatInputArea";
 export { default as ChatItem } from "./ChatItem";
 export { default as ChatList } from "./ChatList";
 export { default as ColorScales } from "./ColorScales";
@@ -36,4 +37,5 @@ export { default as TabsNav } from "./TabsNav";
 export { default as ThemeProvider } from "./ThemeProvider";
 export { default as ThemeSwitch } from "./ThemeSwitch";
 export { default as Toc } from "./Toc";
+export { default as TokenTag } from "./TokenTag";
 export { default as Tooltip } from "./Tooltip";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.25.4",
+  "version": "1.26.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -98,7 +98,7 @@
     "react-rnd": "^10",
     "remark-gfm": "^3",
     "shiki-es": "^0",
-    "styled-components": "beta",
+    "styled-components": "latest",
     "ts-md5": "^1",
     "use-merge-value": "^1",
     "zustand": "^4",