@lobehub/ui 1.8.2 → 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

@@ -1,9 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { EditOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
+import { ControlInput } from "../components/ControlInput";
+import { ActionIcon } from "./..";
+import { Edit3 } from 'lucide-react';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import { ControlInput } from "../components/ControlInput";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var EditableText = /*#__PURE__*/memo(function (_ref) {
@@ -22,13 +22,14 @@ var EditableText = /*#__PURE__*/memo(function (_ref) {
   }) : /*#__PURE__*/_jsxs(Flexbox, {
     horizontal: true,
     gap: 8,
-    children: [value, /*#__PURE__*/_jsx(Tooltip, {
-      title: '编辑',
-      children: /*#__PURE__*/_jsx(EditOutlined, {
-        onClick: function onClick() {
-          setEdited(!edited);
-        }
-      })
+    children: [value, /*#__PURE__*/_jsx(ActionIcon, {
+      title: 'Edit',
+      placement: "right",
+      icon: Edit3,
+      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,5 +1,8 @@
 /// <reference types="react" />
-import { InputProps } from 'antd';
-export declare type SearchBarProps = InputProps;
-declare const SearchBar: import("react").MemoExoticComponent<({ value, onChange, style, placeholder, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element>;
+import { InputProps } from "../index";
+export interface SearchBarProps extends InputProps {
+    shortKey?: string;
+    enableShortKey?: boolean;
+}
+declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
 export default SearchBar;

package/es/SearchBar/index.js

@@ -1,25 +1,82 @@
 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", "style", "placeholder"];
-import { SearchOutlined } from '@ant-design/icons';
-import { Input } from 'antd';
-import { memo } from 'react';
+var _excluded = ["className", "value", "onChange", "placeholder", "enableShortKey", "shortKey"];
+var _navigator;
+import { Icon, Input } from "./..";
+import { Tag } from 'antd';
+import { Search } from 'lucide-react';
+import { memo, useEffect, useRef, useState } from 'react';
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(typeof navigator !== 'undefined' ? (_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.platform : '');
+var symbol = isAppleDevice ? '⌘' : 'Ctrl';
 var SearchBar = /*#__PURE__*/memo(function (_ref) {
-  var value = _ref.value,
-    onChange = _ref.onChange,
-    style = _ref.style,
+  var className = _ref.className,
+    value = _ref.value,
+    _onChange = _ref.onChange,
     placeholder = _ref.placeholder,
+    enableShortKey = _ref.enableShortKey,
+    _ref$shortKey = _ref.shortKey,
+    shortKey = _ref$shortKey === void 0 ? 'f' : _ref$shortKey,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_jsx(Input, _objectSpread({
-    prefix: /*#__PURE__*/_jsx(SearchOutlined, {}),
-    allowClear: true,
-    value: value,
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Search',
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      borderColor: 'transparent'
-    }),
-    onChange: onChange
-  }, props));
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showTag = _useState2[0],
+    setShowTag = _useState2[1];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    inputValue = _useState4[0],
+    setInputValue = _useState4[1];
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var inputRef = useRef(null);
+  useEffect(function () {
+    if (!enableShortKey) return;
+    var handler = function handler(ev) {
+      if ((isAppleDevice ? ev.metaKey : ev.ctrlKey) && ev.key === shortKey) {
+        ev.preventDefault();
+        inputRef.current.focus();
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return function () {
+      return document.removeEventListener('keydown', handler);
+    };
+  }, []);
+  return /*#__PURE__*/_jsxs("div", {
+    className: styles.search,
+    children: [/*#__PURE__*/_jsx(Input, _objectSpread({
+      ref: inputRef,
+      className: cx(styles.input, className),
+      prefix: /*#__PURE__*/_jsx(Icon, {
+        className: styles.icon,
+        icon: Search,
+        size: "small",
+        style: {
+          marginRight: 4
+        }
+      }),
+      allowClear: true,
+      value: value,
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Type keywords...',
+      onChange: function onChange(e) {
+        setInputValue(e.target.value);
+        setShowTag(e.target.value ? false : true);
+        if (_onChange) _onChange(e);
+      },
+      onFocus: function onFocus() {
+        return setShowTag(false);
+      },
+      onBlur: function onBlur() {
+        return setShowTag(true);
+      }
+    }, props)), enableShortKey && showTag && !inputValue && /*#__PURE__*/_jsxs(Tag, {
+      className: styles.tag,
+      children: [symbol, " ", shortKey.toUpperCase()]
+    })]
+  });
 });
 export default SearchBar;

package/es/SearchBar/style.d.ts

@@ -0,0 +1,6 @@
+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;
+    icon: import("antd-style").SerializedStyles;
+}>;

package/es/SearchBar/style.js

@@ -0,0 +1,13 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    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\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.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/ThemeProvider/index.js

@@ -32,8 +32,6 @@ var ThemeProvider = function ThemeProvider(_ref) {
       customStylish: getCustomStylish,
       customToken: getCustomToken,
       children: [/*#__PURE__*/_jsx(ReactFontLoader, {
-        url: "https://raw.githubusercontent.com/divspace/hack/master/css/hack.css"
-      }), /*#__PURE__*/_jsx(ReactFontLoader, {
         url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans.css"
       }), /*#__PURE__*/_jsx(ReactFontLoader, {
         url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans_sc.css"

package/es/Tooltip/index.js

@@ -1,18 +1,21 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className"];
+var _excluded = ["className", "arrow"];
 import { Tooltip as AntdTooltip } from 'antd';
 import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var Tooltip = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
+    _ref$arrow = _ref.arrow,
+    arrow = _ref$arrow === void 0 ? false : _ref$arrow,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsx(AntdTooltip, _objectSpread({
-    overlayClassName: cx(styles.tooltip, className)
+    overlayClassName: cx(styles.tooltip, className),
+    arrow: arrow
   }, props));
 });
 export default Tooltip;

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/styles/theme/base.js

@@ -1,7 +1,7 @@
-var FONT_EMOJI = "\"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Apple Color Emoji\", \"Twemoji Mozilla\", \"Noto Color Emoji\", \"Android Emoji\"";
-var FONT_EN = "\"HarmonyOS Sans\", \"Segoe UI\", \"SF Pro Display\",-apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif";
-var FONT_CN = "\"HarmonyOS Sans SC\", \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft Yahei UI\", \"Microsoft Yahei\", \"Source Han Sans CN\", sans-serif";
-var FONT_CODE = "Hack, \"SFMono Regular\", Consolas, \"Liberation Mono\", Menlo, Courier, monospace";
+var FONT_EMOJI = "\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Apple Color Emoji\",\"Twemoji Mozilla\",\"Noto Color Emoji\",\"Android Emoji\"";
+var FONT_EN = "\"HarmonyOS Sans\",\"Segoe UI\",\"SF Pro Display\",-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,\"Open Sans\",\"Helvetica Neue\",sans-serif";
+var FONT_CN = "\"HarmonyOS Sans SC\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft Yahei UI\",\"Microsoft Yahei\",\"Source Han Sans CN\",sans-serif";
+var FONT_CODE = "ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace";
 export var baseTheme = {
   token: {
     colorInfo: '#0070f3',

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

@@ -22,11 +22,11 @@ __export(EditableText_exports, {
   default: () => EditableText_default
 });
 module.exports = __toCommonJS(EditableText_exports);
-var import_icons = require("@ant-design/icons");
-var import_antd = require("antd");
+var import_ControlInput = require("../components/ControlInput");
+var import__ = require("../index");
+var import_lucide_react = require("lucide-react");
 var import_react = require("react");
 var import_react_layout_kit = require("react-layout-kit");
-var import_ControlInput = require("../components/ControlInput");
 var EditableText = (0, import_react.memo)(({ value, onChange }) => {
   const [edited, setEdited] = (0, import_react.useState)(false);
   return edited ? /* @__PURE__ */ React.createElement(
@@ -38,14 +38,18 @@ var EditableText = (0, import_react.memo)(({ value, onChange }) => {
       },
       onChange
     }
-  ) : /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, gap: 8 }, value, /* @__PURE__ */ React.createElement(import_antd.Tooltip, { title: "编辑" }, /* @__PURE__ */ React.createElement(
-    import_icons.EditOutlined,
+  ) : /* @__PURE__ */ React.createElement(import_react_layout_kit.Flexbox, { horizontal: true, gap: 8 }, value, /* @__PURE__ */ React.createElement(
+    import__.ActionIcon,
     {
+      title: "Edit",
+      placement: "right",
+      icon: import_lucide_react.Edit3,
+      size: "small",
       onClick: () => {
         setEdited(!edited);
       }
     }
-  )));
+  ));
 });
 var EditableText_default = EditableText;
 // Annotate the CommonJS export names for ESM import in node:

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,5 +1,8 @@
 /// <reference types="react" />
-import { InputProps } from 'antd';
-export declare type SearchBarProps = InputProps;
-declare const SearchBar: import("react").MemoExoticComponent<({ value, onChange, style, placeholder, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element>;
+import { InputProps } from "../index";
+export interface SearchBarProps extends InputProps {
+    shortKey?: string;
+    enableShortKey?: boolean;
+}
+declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
 export default SearchBar;

package/lib/SearchBar/index.js

@@ -22,21 +22,55 @@ __export(SearchBar_exports, {
   default: () => SearchBar_default
 });
 module.exports = __toCommonJS(SearchBar_exports);
-var import_icons = require("@ant-design/icons");
+var import__ = require("../index");
 var import_antd = require("antd");
+var import_lucide_react = require("lucide-react");
 var import_react = require("react");
-var SearchBar = (0, import_react.memo)(({ value, onChange, style, placeholder, ...props }) => /* @__PURE__ */ React.createElement(
-  import_antd.Input,
-  {
-    prefix: /* @__PURE__ */ React.createElement(import_icons.SearchOutlined, null),
-    allowClear: true,
-    value,
-    placeholder: placeholder ?? "Search",
-    style: { ...style, borderColor: "transparent" },
-    onChange,
-    ...props
+var import_style = require("./style");
+var isAppleDevice = /(mac|iphone|ipod|ipad)/i.test(
+  typeof navigator !== "undefined" ? navigator == null ? void 0 : navigator.platform : ""
+);
+var symbol = isAppleDevice ? "⌘" : "Ctrl";
+var SearchBar = (0, import_react.memo)(
+  ({ 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)();
+    const inputRef = (0, import_react.useRef)(null);
+    (0, import_react.useEffect)(() => {
+      if (!enableShortKey)
+        return;
+      const handler = (ev) => {
+        if ((isAppleDevice ? ev.metaKey : ev.ctrlKey) && ev.key === shortKey) {
+          ev.preventDefault();
+          inputRef.current.focus();
+        }
+      };
+      document.addEventListener("keydown", handler);
+      return () => document.removeEventListener("keydown", handler);
+    }, []);
+    return /* @__PURE__ */ React.createElement("div", { className: styles.search }, /* @__PURE__ */ React.createElement(
+      import__.Input,
+      {
+        ref: inputRef,
+        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...",
+        onChange: (e) => {
+          setInputValue(e.target.value);
+          setShowTag(e.target.value ? false : true);
+          if (onChange)
+            onChange(e);
+        },
+        onFocus: () => setShowTag(false),
+        onBlur: () => setShowTag(true),
+        ...props
+      }
+    ), enableShortKey && showTag && !inputValue && /* @__PURE__ */ React.createElement(import_antd.Tag, { className: styles.tag }, symbol, " ", shortKey.toUpperCase()));
   }
-));
+);
 var SearchBar_default = SearchBar;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/lib/SearchBar/style.d.ts

@@ -0,0 +1,6 @@
+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;
+    icon: import("antd-style").SerializedStyles;
+}>;

package/lib/SearchBar/style.js

@@ -0,0 +1,49 @@
+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/SearchBar/style.ts
+var style_exports = {};
+__export(style_exports, {
+  useStyles: () => useStyles
+});
+module.exports = __toCommonJS(style_exports);
+var import_antd_style = require("antd-style");
+var useStyles = (0, import_antd_style.createStyles)(({ css, token }) => ({
+  search: css`
+    position: relative;
+    max-width: 100%;
+  `,
+  input: css`
+    position: relative;
+    padding: 0 8px 0 12px;
+  `,
+  tag: css`
+    position: absolute;
+    z-index: 5;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  `,
+  icon: css`
+    color: ${token.colorTextPlaceholder};
+  `
+}));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useStyles
+});

package/lib/StroyBook/style.js

@@ -62,6 +62,7 @@ var useStyles = (0, import_antd_style.createStyles)(
         --leva-colors-vivid1: ${token.colorWarning};
         --leva-shadows-level1: unset;
         --leva-shadows-level2: unset;
+        --leva-fonts-mono: ${token.fontFamilyCode};
 
         padding: 6px 0;
         background: ${token.colorBgLayout};
@@ -71,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/ThemeProvider/index.js

@@ -60,7 +60,6 @@ var ThemeProvider = ({ token, children, themeMode }) => {
       customStylish: import_styles.getCustomStylish,
       customToken: getCustomToken
     },
-    /* @__PURE__ */ import_react.default.createElement(import_react_font_loader.default, { url: "https://raw.githubusercontent.com/divspace/hack/master/css/hack.css" }),
     /* @__PURE__ */ import_react.default.createElement(import_react_font_loader.default, { url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans.css" }),
     /* @__PURE__ */ import_react.default.createElement(import_react_font_loader.default, { url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans_sc.css" }),
     /* @__PURE__ */ import_react.default.createElement(import_GlobalStyle.default, null),

package/lib/Tooltip/index.js

@@ -25,9 +25,9 @@ module.exports = __toCommonJS(Tooltip_exports);
 var import_antd = require("antd");
 var import_react = require("react");
 var import_style = require("./style");
-var Tooltip = (0, import_react.memo)(({ className, ...props }) => {
+var Tooltip = (0, import_react.memo)(({ className, arrow = false, ...props }) => {
   const { styles, cx } = (0, import_style.useStyles)();
-  return /* @__PURE__ */ React.createElement(import_antd.Tooltip, { overlayClassName: cx(styles.tooltip, className), ...props });
+  return /* @__PURE__ */ React.createElement(import_antd.Tooltip, { overlayClassName: cx(styles.tooltip, className), arrow, ...props });
 });
 var Tooltip_default = Tooltip;
 // Annotate the CommonJS export names for ESM import in node:

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/styles/theme/base.js

@@ -22,10 +22,10 @@ __export(base_exports, {
   baseTheme: () => baseTheme
 });
 module.exports = __toCommonJS(base_exports);
-var FONT_EMOJI = `"Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Twemoji Mozilla", "Noto Color Emoji", "Android Emoji"`;
-var FONT_EN = `"HarmonyOS Sans", "Segoe UI", "SF Pro Display",-apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif`;
-var FONT_CN = `"HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN", sans-serif`;
-var FONT_CODE = `Hack, "SFMono Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace`;
+var FONT_EMOJI = `"Segoe UI Emoji","Segoe UI Symbol","Apple Color Emoji","Twemoji Mozilla","Noto Color Emoji","Android Emoji"`;
+var FONT_EN = `"HarmonyOS Sans","Segoe UI","SF Pro Display",-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif`;
+var FONT_CN = `"HarmonyOS Sans SC","PingFang SC","Hiragino Sans GB","Microsoft Yahei UI","Microsoft Yahei","Source Han Sans CN",sans-serif`;
+var FONT_CODE = `ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace`;
 var baseTheme = {
   token: {
     colorInfo: "#0070f3",

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.8.2",
+  "version": "1.10.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",