@lobehub/ui 1.9.0 → 1.10.0

package/es/ActionIcon/index.js

@@ -36,7 +36,7 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
       borderRadius = 5;
       break;
     case 'small':
-      blockSize = 28;
+      blockSize = 24;
       borderRadius = 5;
       break;
     case 'site':
@@ -57,7 +57,7 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
     }, style)
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Icon, {
-      size: size === 'site' ? 'small' : size,
+      size: size === 'site' ? 'normal' : size,
       icon: icon
     })
   }));

package/es/EditableMessageList/index.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import IconAction from "../ActionIcon";
+import { messagesReducer } from "../Chat";
+import { ControlInput } from "../components/ControlInput";
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
+import { TrashIcon } 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 { TrashIcon } from 'lucide-react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
@@ -70,8 +70,8 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
           placeholder: item.role === 'user' ? '请填入输入的样例内容' : '请填入输出的样例'
         }), /*#__PURE__*/_jsx(IconAction, {
           icon: TrashIcon,
-          title: '删除',
-          size: 'small',
+          placement: "right",
+          title: "Delete",
           onClick: function onClick() {
             dispatch({
               type: 'deleteMessage',

package/es/EditableText/index.js

@@ -26,10 +26,7 @@ var EditableText = /*#__PURE__*/memo(function (_ref) {
       title: 'Edit',
       placement: "right",
       icon: Edit3,
-      size: {
-        fontSize: 14,
-        blockSize: 24
-      },
+      size: "small",
       onClick: function onClick() {
         setEdited(!edited);
       }

package/es/Icon/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SvgProps } from "../types";
 import { LucideIcon } from 'lucide-react';
 export declare type IconSize = 'large' | 'normal' | 'small' | {
     fontSize?: number;

package/es/Icon/index.js

@@ -13,12 +13,15 @@ var Icon = function Icon(_ref) {
   var SvgIcon = icon;
   switch (size) {
     case 'large':
-    case 'normal':
       fontSize = 24;
       strokeWidth = 2;
       break;
-    case 'small':
+    case 'normal':
       fontSize = 20;
+      strokeWidth = 2;
+      break;
+    case 'small':
+      fontSize = 14;
       strokeWidth = 1.5;
       break;
     default:

package/es/Input/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+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';
+}
+export declare const Input: import("react").NamedExoticComponent<InputProps>;
+export interface TextAreaProps extends AntdTextAreaProps {
+    ref?: any;
+    type?: 'ghost' | 'block';
+}
+export declare const TextArea: import("react").NamedExoticComponent<TextAreaProps>;

package/es/Input/index.js

@@ -0,0 +1,36 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "type"],
+  _excluded2 = ["className", "type"];
+import { Input as AntInput } from 'antd';
+import { memo } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Input = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'ghost' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      type: type
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsx(AntInput, _objectSpread({
+    className: cx(styles.input, className)
+  }, props));
+});
+export var TextArea = /*#__PURE__*/memo(function (_ref2) {
+  var className = _ref2.className,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'ghost' : _ref2$type,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _useStyles2 = useStyles({
+      type: type
+    }),
+    styles = _useStyles2.styles,
+    cx = _useStyles2.cx;
+  return /*#__PURE__*/_jsx(AntInput.TextArea, _objectSpread({
+    className: cx(styles.textarea, className)
+  }, props));
+});

package/es/Input/style.d.ts

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

package/es/Input/style.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var css = _ref.css,
+    token = _ref.token;
+  var type = _ref2.type;
+  return {
+    input: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    height: 36px;\n    padding: 0 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    input {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary),
+    textarea: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    padding: 8px 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    textarea {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary)
+  };
+});

package/es/MessageInput/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { type TextAreaProps } from "../index";
 import { ButtonProps } from 'antd';
 /**
  * @title MessageInputProps
@@ -30,6 +31,7 @@ export interface MessageInputProps {
     renderButtons?: (text: string) => ButtonProps[];
     height?: number;
     className?: string;
+    type?: TextAreaProps['type'];
 }
 declare const MessageInput: import("react").NamedExoticComponent<MessageInputProps>;
 export default MessageInput;

package/es/MessageInput/index.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Button, Input } from 'antd';
+import { TextArea } from "./..";
+import { Button } from 'antd';
 import { cx } from 'antd-style';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -14,7 +15,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MessageInput = /*#__PURE__*/memo(function (_ref) {
-  var onCancel = _ref.onCancel,
+  var type = _ref.type,
+    onCancel = _ref.onCancel,
     defaultValue = _ref.defaultValue,
     onConfirm = _ref.onConfirm,
     renderButtons = _ref.renderButtons,
@@ -26,9 +28,9 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
     setRole = _useState2[1];
   return /*#__PURE__*/_jsxs(Flexbox, {
     gap: 8,
-    children: [/*#__PURE__*/_jsx(Input.TextArea, {
+    children: [/*#__PURE__*/_jsx(TextArea, {
+      type: type,
       value: tempSystemRole,
-      allowClear: true,
       placeholder: '例如：你是一名擅长翻译的翻译官，请将用户所输入的英文都翻译为中文。',
       style: {
         height: height !== null && height !== void 0 ? height : 200
@@ -44,15 +46,15 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
         return /*#__PURE__*/_jsx(Button, _objectSpread({}, buttonProps), index);
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Button, {
-          type: 'primary',
+          type: "primary",
           onClick: function onClick() {
             onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(tempSystemRole);
           },
-          children: "\u8BBE\u5B9A"
+          children: "Confirm"
         }), /*#__PURE__*/_jsx(Button, {
-          type: 'text',
+          type: "text",
           onClick: onCancel,
-          children: "\u53D6\u6D88"
+          children: "Cancel"
         })]
       })
     })]

package/es/SearchBar/index.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { InputProps } from 'antd';
+import { InputProps } from "../index";
 export interface SearchBarProps extends InputProps {
     shortKey?: string;
     enableShortKey?: boolean;
-    type?: 'ghost' | 'block';
 }
 declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
 export default SearchBar;

package/es/SearchBar/index.js

@@ -1,10 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "value", "onChange", "style", "placeholder", "type", "enableShortKey", "shortKey"];
+var _excluded = ["className", "value", "onChange", "placeholder", "enableShortKey", "shortKey"];
 var _navigator;
-import { Icon } from "./..";
-import { Input, Tag } from 'antd';
+import { Icon, Input } from "./..";
+import { Tag } from 'antd';
 import { Search } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
 import { useStyles } from "./style";
@@ -16,10 +16,7 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     value = _ref.value,
     _onChange = _ref.onChange,
-    style = _ref.style,
     placeholder = _ref.placeholder,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'ghost' : _ref$type,
     enableShortKey = _ref.enableShortKey,
     _ref$shortKey = _ref.shortKey,
     shortKey = _ref$shortKey === void 0 ? 'f' : _ref$shortKey,
@@ -32,9 +29,7 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     inputValue = _useState4[0],
     setInputValue = _useState4[1];
-  var _useStyles = useStyles({
-      type: type
-    }),
+  var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var inputRef = useRef(null);
@@ -52,16 +47,14 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
     };
   }, []);
   return /*#__PURE__*/_jsxs("div", {
-    className: cx(styles.search, className),
+    className: styles.search,
     children: [/*#__PURE__*/_jsx(Input, _objectSpread({
       ref: inputRef,
-      className: styles.input,
+      className: cx(styles.input, className),
       prefix: /*#__PURE__*/_jsx(Icon, {
         className: styles.icon,
         icon: Search,
-        size: {
-          fontSize: 14
-        },
+        size: "small",
         style: {
           marginRight: 4
         }
@@ -69,9 +62,6 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
       allowClear: true,
       value: value,
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Type keywords...',
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        borderColor: 'transparent'
-      }),
       onChange: function onChange(e) {
         setInputValue(e.target.value);
         setShowTag(e.target.value ? false : true);

package/es/SearchBar/style.d.ts

@@ -1,6 +1,4 @@
-export declare const useStyles: (props?: {
-    type: 'ghost' | 'block';
-} | undefined) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     search: import("antd-style").SerializedStyles;
     input: import("antd-style").SerializedStyles;
     tag: import("antd-style").SerializedStyles;

package/es/SearchBar/style.js

@@ -1,15 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
-export var useStyles = createStyles(function (_ref, _ref2) {
+export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
-  var type = _ref2.type;
   return {
-    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n    height: 36px;\n  "]))),
-    input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    height: inherit;\n    padding: 0 8px 0 12px;\n    transition: background-color 100ms ", ";\n\n    ", "\n\n    &:hover {\n      background-color: ", " !important;\n    }\n\n    input {\n      background: transparent;\n    }\n  "])), token.motionEaseOut, type === 'block' ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          background-color: ", " !important;\n        "])), rgba(token.colorBgElevated, 0.6)) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          background: transparent !important;\n          border: 1px solid ", " !important;\n        "])), token.colorBorder), token.colorFillTertiary),
-    tag: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
-    icon: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)
+    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
+    input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
+    tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
+    icon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)
   };
 });

package/es/StroyBook/style.js

@@ -9,6 +9,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   return {
     editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: stretch;\n        justify-content: stretch;\n\n        width: inherit;\n        min-height: inherit;\n        ", "\n      "])), mobile && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          flex-direction: column;\n        "])))),
     left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto;\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n\n        ", "\n      "])), !noPadding && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 40px 24px;\n        "])))),
-    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorBorder)
+    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n\n        button {\n          --leva-colors-accent2: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorBorder, token.colorFillSecondary)
   };
 });

package/es/components/ControlInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputProps } from 'antd';
+import { InputProps } from "../index";
 export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
     onChange?: (value: string) => void;
     onValueChanging?: (value: string) => void;

package/es/components/ControlInput.js

@@ -2,7 +2,9 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["value", "onChange", "onValueChanging", "onChangeEnd"];
-import { Button, ConfigProvider, Input } from 'antd';
+import { ActionIcon, Input } from "./..";
+import { ConfigProvider, Space } from 'antd';
+import { RotateCcw, Save } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -54,33 +56,28 @@ export var ControlInput = /*#__PURE__*/memo(function (_ref) {
         onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);
       }
     },
-    suffix: value === input ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsxs(ConfigProvider, {
+    suffix: value === input ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsx(ConfigProvider, {
       theme: {
         token: {
           fontSize: 14
         }
       },
-      children: [/*#__PURE__*/_jsx(Button, {
-        type: 'link',
-        size: 'small',
-        onClick: function onClick() {
-          setInput(value);
-        },
-        style: {
-          padding: 0
-        },
-        children: "\u91CD\u7F6E"
-      }), /*#__PURE__*/_jsx(Button, {
-        type: 'link',
-        size: 'small',
-        style: {
-          padding: 0
-        },
-        onClick: function onClick() {
-          updateValue();
-        },
-        children: "\u4FDD\u5B58 \u21B5"
-      })]
+      children: /*#__PURE__*/_jsxs(Space, {
+        size: 2,
+        children: [/*#__PURE__*/_jsx(ActionIcon, {
+          title: "Reset",
+          icon: RotateCcw,
+          size: "small",
+          onClick: function onClick() {
+            setInput(value);
+          }
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          title: "\u2705 Save",
+          icon: Save,
+          size: "small",
+          onClick: updateValue
+        })]
+      })
     })
   }));
 });

package/es/index.d.ts

@@ -10,6 +10,7 @@ export { default as EditableMessageList, type EditableMessageListProps, } from '
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
+export { Input, TextArea, type InputProps, type TextAreaProps } from './Input';
 export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';

package/es/index.js

@@ -9,6 +9,7 @@ export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { default as Icon } from "./Icon";
+export { Input, TextArea } from "./Input";
 export { default as List } from "./List";
 export { default as Logo } from "./Logo";
 export { default as Markdown } from "./Markdown";

package/es/types/index.d.ts

@@ -11,8 +11,19 @@ export type DivProps = React.DetailedHTMLProps<
   HTMLDivElement
 >;
 
-declare global {
-  type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
+export type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
 
-  type ImgProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLImageElement>, HTMLImageElement>;
-}
+export type ImgProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+>;
+
+export type InputProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>;
+
+export type TextAreaProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+>;

package/lib/ActionIcon/index.js

@@ -51,7 +51,7 @@ var ActionIcon = (0, import_react.memo)(
         borderRadius = 5;
         break;
       case "small":
-        blockSize = 28;
+        blockSize = 24;
         borderRadius = 5;
         break;
       case "site":
@@ -70,7 +70,7 @@ var ActionIcon = (0, import_react.memo)(
         style: { width: blockSize, height: blockSize, borderRadius, ...style },
         ...props
       },
-      /* @__PURE__ */ React.createElement(import__.Icon, { size: size === "site" ? "small" : size, icon })
+      /* @__PURE__ */ React.createElement(import__.Icon, { size: size === "site" ? "normal" : size, icon })
     );
     if (!title)
       return actionIconBlock;

package/lib/EditableMessageList/index.js

@@ -33,15 +33,15 @@ __export(EditableMessageList_exports, {
   default: () => EditableMessageList_default
 });
 module.exports = __toCommonJS(EditableMessageList_exports);
+var import_ActionIcon = __toESM(require("../ActionIcon"));
+var import_Chat = require("../Chat");
+var import_ControlInput = require("../components/ControlInput");
 var import_icons = require("@ant-design/icons");
 var import_antd = require("antd");
 var import_fast_deep_equal = __toESM(require("fast-deep-equal"));
+var import_lucide_react = require("lucide-react");
 var import_react = require("react");
 var import_react_layout_kit = require("react-layout-kit");
-var import_ActionIcon = __toESM(require("../ActionIcon"));
-var import_Chat = require("../Chat");
-var import_ControlInput = require("../components/ControlInput");
-var import_lucide_react = require("lucide-react");
 var EditableMessageList = (0, import_react.memo)(
   ({ disabled, dataSources, onChange }) => {
     const [chatMessages, dispatch] = (0, import_react.useReducer)(import_Chat.messagesReducer, dataSources);
@@ -91,8 +91,8 @@ var EditableMessageList = (0, import_react.memo)(
         import_ActionIcon.default,
         {
           icon: import_lucide_react.TrashIcon,
-          title: "删除",
-          size: "small",
+          placement: "right",
+          title: "Delete",
           onClick: () => {
             dispatch({ type: "deleteMessage", index });
           }

package/lib/EditableText/index.js

@@ -44,7 +44,7 @@ var EditableText = (0, import_react.memo)(({ value, onChange }) => {
       title: "Edit",
       placement: "right",
       icon: import_lucide_react.Edit3,
-      size: { fontSize: 14, blockSize: 24 },
+      size: "small",
       onClick: () => {
         setEdited(!edited);
       }

package/lib/Icon/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SvgProps } from "../types";
 import { LucideIcon } from 'lucide-react';
 export declare type IconSize = 'large' | 'normal' | 'small' | {
     fontSize?: number;

package/lib/Icon/index.js

@@ -29,12 +29,15 @@ var Icon = ({ icon, size = "normal", ...props }) => {
   const SvgIcon = icon;
   switch (size) {
     case "large":
-    case "normal":
       fontSize = 24;
       strokeWidth = 2;
       break;
-    case "small":
+    case "normal":
       fontSize = 20;
+      strokeWidth = 2;
+      break;
+    case "small":
+      fontSize = 14;
       strokeWidth = 1.5;
       break;
     default:

package/lib/Input/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+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';
+}
+export declare const Input: import("react").NamedExoticComponent<InputProps>;
+export interface TextAreaProps extends AntdTextAreaProps {
+    ref?: any;
+    type?: 'ghost' | 'block';
+}
+export declare const TextArea: import("react").NamedExoticComponent<TextAreaProps>;

package/lib/Input/index.js

@@ -0,0 +1,41 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Input/index.tsx
+var Input_exports = {};
+__export(Input_exports, {
+  Input: () => Input,
+  TextArea: () => TextArea
+});
+module.exports = __toCommonJS(Input_exports);
+var import_antd = require("antd");
+var import_react = require("react");
+var import_style = require("./style");
+var Input = (0, import_react.memo)(({ className, type = "ghost", ...props }) => {
+  const { styles, cx } = (0, import_style.useStyles)({ type });
+  return /* @__PURE__ */ React.createElement(import_antd.Input, { className: cx(styles.input, className), ...props });
+});
+var TextArea = (0, import_react.memo)(({ className, type = "ghost", ...props }) => {
+  const { styles, cx } = (0, import_style.useStyles)({ type });
+  return /* @__PURE__ */ React.createElement(import_antd.Input.TextArea, { className: cx(styles.textarea, className), ...props });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input,
+  TextArea
+});

package/lib/Input/style.d.ts

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

package/lib/Input/style.js

@@ -0,0 +1,71 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Input/style.ts
+var style_exports = {};
+__export(style_exports, {
+  useStyles: () => useStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_antd_style = require("antd-style");
+var import_polished = require("polished");
+var useStyles = (0, import_antd_style.createStyles)(({ css, token }, { type }) => ({
+  input: css`
+    position: relative;
+
+    max-width: 100%;
+    height: 36px;
+    padding: 0 12px;
+
+    background-color: ${type === "block" ? (0, import_polished.rgba)(token.colorBgElevated, 0.6) : "transparent"};
+    border: 1px solid ${type === "block" ? "transparent" : token.colorBorder};
+
+    transition: background-color 100ms ${token.motionEaseOut};
+
+    input {
+      background: transparent;
+    }
+
+    &:hover {
+      background-color: ${token.colorFillTertiary};
+    }
+  `,
+  textarea: css`
+    position: relative;
+
+    max-width: 100%;
+    padding: 8px 12px;
+
+    background-color: ${type === "block" ? (0, import_polished.rgba)(token.colorBgElevated, 0.6) : "transparent"};
+    border: 1px solid ${type === "block" ? "transparent" : token.colorBorder};
+
+    transition: background-color 100ms ${token.motionEaseOut};
+
+    textarea {
+      background: transparent;
+    }
+
+    &:hover {
+      background-color: ${token.colorFillTertiary};
+    }
+  `
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/MessageInput/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { type TextAreaProps } from "../index";
 import { ButtonProps } from 'antd';
 /**
  * @title MessageInputProps
@@ -30,6 +31,7 @@ export interface MessageInputProps {
     renderButtons?: (text: string) => ButtonProps[];
     height?: number;
     className?: string;
+    type?: TextAreaProps['type'];
 }
 declare const MessageInput: import("react").NamedExoticComponent<MessageInputProps>;
 export default MessageInput;

package/lib/MessageInput/index.js

@@ -22,18 +22,19 @@ __export(MessageInput_exports, {
   default: () => MessageInput_default
 });
 module.exports = __toCommonJS(MessageInput_exports);
+var import__ = require("../index");
 var import_antd = require("antd");
 var import_antd_style = require("antd-style");
 var import_react = require("react");
 var import_react_layout_kit = require("react-layout-kit");
 var MessageInput = (0, import_react.memo)(
-  ({ onCancel, defaultValue, onConfirm, renderButtons, height, className }) => {
+  ({ type, onCancel, defaultValue, onConfirm, renderButtons, height, className }) => {
     const [tempSystemRole, setRole] = (0, import_react.useState)(defaultValue || "");
     return /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { gap: 8 }, /* @__PURE__ */ React.createElement(
-      import_antd.Input.TextArea,
+      import__.TextArea,
       {
+        type,
         value: tempSystemRole,
-        allowClear: true,
         placeholder: "例如：你是一名擅长翻译的翻译官，请将用户所输入的英文都翻译为中文。",
         style: { height: height ?? 200 },
         onChange: (e) => {
@@ -49,8 +50,8 @@ var MessageInput = (0, import_react.memo)(
           onConfirm == null ? void 0 : onConfirm(tempSystemRole);
         }
       },
-      "设定"
-    ), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "text", onClick: onCancel }, "取消"))));
+      "Confirm"
+    ), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "text", onClick: onCancel }, "Cancel"))));
   }
 );
 var MessageInput_default = MessageInput;

package/lib/SearchBar/index.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { InputProps } from 'antd';
+import { InputProps } from "../index";
 export interface SearchBarProps extends InputProps {
     shortKey?: string;
     enableShortKey?: boolean;
-    type?: 'ghost' | 'block';
 }
 declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
 export default SearchBar;

package/lib/SearchBar/index.js

@@ -32,20 +32,10 @@ var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(
 );
 var symbol = isAppleDevice ? "⌘" : "Ctrl";
 var SearchBar = (0, import_react.memo)(
-  ({
-    className,
-    value,
-    onChange,
-    style,
-    placeholder,
-    type = "ghost",
-    enableShortKey,
-    shortKey = "f",
-    ...props
-  }) => {
+  ({ className, value, onChange, placeholder, enableShortKey, shortKey = "f", ...props }) => {
     const [showTag, setShowTag] = (0, import_react.useState)(true);
     const [inputValue, setInputValue] = (0, import_react.useState)(value);
-    const { styles, cx } = (0, import_style.useStyles)({ type });
+    const { styles, cx } = (0, import_style.useStyles)();
     const inputRef = (0, import_react.useRef)(null);
     (0, import_react.useEffect)(() => {
       if (!enableShortKey)
@@ -59,24 +49,15 @@ var SearchBar = (0, import_react.memo)(
       document.addEventListener("keydown", handler);
       return () => document.removeEventListener("keydown", handler);
     }, []);
-    return /* @__PURE__ */ React.createElement("div", { className: cx(styles.search, className) }, /* @__PURE__ */ React.createElement(
-      import_antd.Input,
+    return /* @__PURE__ */ React.createElement("div", { className: styles.search }, /* @__PURE__ */ React.createElement(
+      import__.Input,
       {
         ref: inputRef,
-        className: styles.input,
-        prefix: /* @__PURE__ */ React.createElement(
-          import__.Icon,
-          {
-            className: styles.icon,
-            icon: import_lucide_react.Search,
-            size: { fontSize: 14 },
-            style: { marginRight: 4 }
-          }
-        ),
+        className: cx(styles.input, className),
+        prefix: /* @__PURE__ */ React.createElement(import__.Icon, { className: styles.icon, icon: import_lucide_react.Search, size: "small", style: { marginRight: 4 } }),
         allowClear: true,
         value,
         placeholder: placeholder ?? "Type keywords...",
-        style: { ...style, borderColor: "transparent" },
         onChange: (e) => {
           setInputValue(e.target.value);
           setShowTag(e.target.value ? false : true);

package/lib/SearchBar/style.d.ts

@@ -1,6 +1,4 @@
-export declare const useStyles: (props?: {
-    type: 'ghost' | 'block';
-} | undefined) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     search: import("antd-style").SerializedStyles;
     input: import("antd-style").SerializedStyles;
     tag: import("antd-style").SerializedStyles;

package/lib/SearchBar/style.js

@@ -23,33 +23,14 @@ __export(style_exports, {
 });
 module.exports = __toCommonJS(style_exports);
 var import_antd_style = require("antd-style");
-var import_polished = require("polished");
-var useStyles = (0, import_antd_style.createStyles)(({ css, token }, { type }) => ({
+var useStyles = (0, import_antd_style.createStyles)(({ css, token }) => ({
   search: css`
     position: relative;
     max-width: 100%;
-    height: 36px;
   `,
   input: css`
     position: relative;
-    height: inherit;
     padding: 0 8px 0 12px;
-    transition: background-color 100ms ${token.motionEaseOut};
-
-    ${type === "block" ? css`
-          background-color: ${(0, import_polished.rgba)(token.colorBgElevated, 0.6)} !important;
-        ` : css`
-          background: transparent !important;
-          border: 1px solid ${token.colorBorder} !important;
-        `}
-
-    &:hover {
-      background-color: ${token.colorFillTertiary} !important;
-    }
-
-    input {
-      background: transparent;
-    }
   `,
   tag: css`
     position: absolute;

package/lib/StroyBook/style.js

@@ -72,9 +72,14 @@ var useStyles = (0, import_antd_style.createStyles)(
             background: transparent;
           }
         }
+
         input:checked + label > svg {
           stroke: ${token.colorBorder};
         }
+
+        button {
+          --leva-colors-accent2: ${token.colorFillSecondary};
+        }
       `
     };
   }

package/lib/components/ControlInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputProps } from 'antd';
+import { InputProps } from "../index";
 export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
     onChange?: (value: string) => void;
     onValueChanging?: (value: string) => void;

package/lib/components/ControlInput.js

@@ -22,7 +22,9 @@ __export(ControlInput_exports, {
   ControlInput: () => ControlInput
 });
 module.exports = __toCommonJS(ControlInput_exports);
+var import__ = require("../index");
 var import_antd = require("antd");
+var import_lucide_react = require("lucide-react");
 var import_react = require("react");
 var ControlInput = (0, import_react.memo)(
   ({ value, onChange, onValueChanging, onChangeEnd, ...props }) => {
@@ -38,7 +40,7 @@ var ControlInput = (0, import_react.memo)(
         setInput(value);
     }, [value]);
     return /* @__PURE__ */ React.createElement(
-      import_antd.Input,
+      import__.Input,
       {
         ref: inputRef,
         ...props,
@@ -68,29 +70,17 @@ var ControlInput = (0, import_react.memo)(
             onChangeEnd == null ? void 0 : onChangeEnd(input);
           }
         },
-        suffix: value === input ? /* @__PURE__ */ React.createElement("span", null) : /* @__PURE__ */ React.createElement(import_antd.ConfigProvider, { theme: { token: { fontSize: 14 } } }, /* @__PURE__ */ React.createElement(
-          import_antd.Button,
+        suffix: value === input ? /* @__PURE__ */ React.createElement("span", null) : /* @__PURE__ */ React.createElement(import_antd.ConfigProvider, { theme: { token: { fontSize: 14 } } }, /* @__PURE__ */ React.createElement(import_antd.Space, { size: 2 }, /* @__PURE__ */ React.createElement(
+          import__.ActionIcon,
           {
-            type: "link",
+            title: "Reset",
+            icon: import_lucide_react.RotateCcw,
             size: "small",
             onClick: () => {
               setInput(value);
-            },
-            style: { padding: 0 }
-          },
-          "重置"
-        ), /* @__PURE__ */ React.createElement(
-          import_antd.Button,
-          {
-            type: "link",
-            size: "small",
-            style: { padding: 0 },
-            onClick: () => {
-              updateValue();
             }
-          },
-          "保存 ↵"
-        ))
+          }
+        ), /* @__PURE__ */ React.createElement(import__.ActionIcon, { title: "✅ Save", icon: import_lucide_react.Save, size: "small", onClick: updateValue })))
       }
     );
   }

package/lib/index.d.ts

@@ -10,6 +10,7 @@ export { default as EditableMessageList, type EditableMessageListProps, } from '
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
+export { Input, TextArea, type InputProps, type TextAreaProps } from './Input';
 export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';

package/lib/index.js

@@ -40,6 +40,7 @@ __export(src_exports, {
   EditableText: () => import_EditableText.default,
   Highlighter: () => import_Highlighter.default,
   Icon: () => import_Icon.default,
+  Input: () => import_Input.Input,
   List: () => import_List.default,
   Logo: () => import_Logo.default,
   Markdown: () => import_Markdown.default,
@@ -52,6 +53,7 @@ __export(src_exports, {
   Swatches: () => import_Swatches.default,
   SyntaxHighlighter: () => import_Highlighter.SyntaxHighlighter,
   TabsNav: () => import_TabsNav.default,
+  TextArea: () => import_Input.TextArea,
   ThemeProvider: () => import_ThemeProvider.default,
   ThemeSwitch: () => import_ThemeSwitch.default,
   Tooltip: () => import_Tooltip.default,
@@ -70,6 +72,7 @@ var import_EditableMessageList = __toESM(require("./EditableMessageList"));
 var import_EditableText = __toESM(require("./EditableText"));
 var import_Highlighter = __toESM(require("./Highlighter"));
 var import_Icon = __toESM(require("./Icon"));
+var import_Input = require("./Input");
 var import_List = __toESM(require("./List"));
 var import_Logo = __toESM(require("./Logo"));
 var import_Markdown = __toESM(require("./Markdown"));
@@ -97,6 +100,7 @@ var import_Tooltip = __toESM(require("./Tooltip"));
   EditableText,
   Highlighter,
   Icon,
+  Input,
   List,
   Logo,
   Markdown,
@@ -109,6 +113,7 @@ var import_Tooltip = __toESM(require("./Tooltip"));
   Swatches,
   SyntaxHighlighter,
   TabsNav,
+  TextArea,
   ThemeProvider,
   ThemeSwitch,
   Tooltip,

package/lib/types/index.d.ts

@@ -11,8 +11,19 @@ export type DivProps = React.DetailedHTMLProps<
   HTMLDivElement
 >;
 
-declare global {
-  type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
+export type SvgProps = React.DetailedHTMLProps<React.HTMLAttributes<SVGSVGElement>, SVGSVGElement>;
 
-  type ImgProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLImageElement>, HTMLImageElement>;
-}
+export type ImgProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+>;
+
+export type InputProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>;
+
+export type TextAreaProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLTextAreaElement>,
+  HTMLTextAreaElement
+>;

package/package.json

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