@lobehub/editor 3.1.1 → 3.2.1

package/es/plugins/toolbar/react/index.js

@@ -6,6 +6,7 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { mergeRegister } from '@lexical/utils';
 import { Block } from '@lobehub/ui';
+import { cx, useThemeMode } from 'antd-style';
 import { $getSelection, COMMAND_PRIORITY_LOW, SELECTION_CHANGE_COMMAND, getDOMSelection } from 'lexical';
 import { useCallback, useRef } from 'react';
 import { useLexicalComposerContext, useLexicalEditor } from "../../../editor-kernel/react";
@@ -14,7 +15,7 @@ import { createDebugLogger } from "../../../utils/debug";
 import { HIDE_TOOLBAR_COMMAND, registerToolbarCommand } from "../command";
 import { getDOMRangeRect } from "../utils/getDOMRangeRect";
 import { setFloatingElemPosition } from "../utils/setFloatingElemPosition";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
   var className = _ref.className,
@@ -24,9 +25,8 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
   var _useLexicalComposerCo = useLexicalComposerContext(),
     _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
     kernelEditor = _useLexicalComposerCo2[0];
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
   var isMouseDownRef = useRef(false);
   var logger = createDebugLogger('plugin', 'toolbar');
   var $updateTextFormatFloatingToolbar = useCallback(function (editor) {
@@ -127,12 +127,10 @@ export var ReactToolbarPlugin = function ReactToolbarPlugin(_ref) {
     });
   });
   return /*#__PURE__*/_jsx("div", {
+    className: styles.anchor,
     ref: anchorElemRef,
-    style: {
-      position: 'relative'
-    },
     children: /*#__PURE__*/_jsx(Block, {
-      className: cx(styles, className),
+      className: cx(isDarkMode ? styles.toolbarDark : styles.toolbarLight, className),
       padding: 4,
       ref: popupCharStylesEditorRef,
       variant: 'outlined',

package/es/plugins/toolbar/react/style.d.ts

@@ -1 +1,5 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<import("antd-style").SerializedStyles>;
+export declare const styles: {
+    anchor: string;
+    toolbarDark: string;
+    toolbarLight: string;
+};

package/es/plugins/toolbar/react/style.js

@@ -1,9 +1,12 @@
-var _templateObject;
+var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token,
-    isDarkMode = _ref.isDarkMode;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    transform: translate(-10000px, -10000px);\n\n    display: flex;\n\n    border-color: ", ";\n\n    vertical-align: middle;\n\n    opacity: 0;\n    background: ", ";\n    box-shadow: ", ";\n\n    transition: opacity 0.12s ", ";\n  "])), token.colorFillSecondary, token.colorBgElevated, isDarkMode ? '0px 14px 28px -6px #0003,0px 2px 4px -1px #0000001f' : '0 14px 28px -6px #0000001a, 0 2px 4px -1px #0000000f', token.motionEaseOut);
+    cssVar = _ref.cssVar;
+  return {
+    anchor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n  "]))),
+    toolbarDark: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    transform: translate(-10000px, -10000px);\n\n    display: flex;\n\n    border-color: ", ";\n\n    vertical-align: middle;\n\n    opacity: 0;\n    background: ", ";\n    box-shadow:\n      0 14px 28px -6px color-mix(in srgb, #000 18.75%, transparent),\n      0 2px 4px -1px color-mix(in srgb, #000 12.19%, transparent);\n\n    transition: opacity 0.12s ", ";\n  "])), cssVar.colorFillSecondary, cssVar.colorBgElevated, cssVar.motionEaseOut),
+    toolbarLight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    will-change: transform;\n\n    position: absolute;\n    z-index: 10;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    transform: translate(-10000px, -10000px);\n\n    display: flex;\n\n    border-color: ", ";\n\n    vertical-align: middle;\n\n    opacity: 0;\n    background: ", ";\n    box-shadow:\n      0 14px 28px -6px color-mix(in srgb, #000 10.2%, transparent),\n      0 2px 4px -1px color-mix(in srgb, #000 5.88%, transparent);\n\n    transition: opacity 0.12s ", ";\n  "])), cssVar.colorFillSecondary, cssVar.colorBgElevated, cssVar.motionEaseOut)
+  };
 });

package/es/react/ChatInput/ChatInput.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { ChatInputProps } from './type';
-declare const ChatInput: import("react").NamedExoticComponent<ChatInputProps>;
+declare const ChatInput: FC<ChatInputProps>;
 export default ChatInput;

package/es/react/ChatInput/ChatInput.js

@@ -16,15 +16,15 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Flexbox } from '@lobehub/ui';
+import { cx, useThemeMode } from 'antd-style';
 import { Resizable } from 're-resizable';
-import { memo, useCallback } from 'react';
+import { useCallback } from 'react';
 import useMergeState from 'use-merge-value';
 import { useHeight } from "../hooks/useSize";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-// Keep memo: Complex resize logic and state management
-var ChatInput = /*#__PURE__*/memo(function (props) {
+var ChatInput = function ChatInput(props) {
   var _props$defaultHeight = props.defaultHeight,
     defaultHeight = _props$defaultHeight === void 0 ? props.defaultHeight || props.minHeight || 64 : _props$defaultHeight,
     height = props.height,
@@ -50,9 +50,8 @@ var ChatInput = /*#__PURE__*/memo(function (props) {
     onBodyClick = props.onBodyClick,
     customStyles = props.styles,
     rest = _objectWithoutProperties(props, _excluded);
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
+  var _useThemeMode = useThemeMode(),
+    isDarkMode = _useThemeMode.isDarkMode;
   var _useHeight = useHeight(),
     headerRef = _useHeight.ref,
     _useHeight$height = _useHeight.height,
@@ -80,34 +79,27 @@ var ChatInput = /*#__PURE__*/memo(function (props) {
     onSizeDragging === null || onSizeDragging === void 0 || onSizeDragging(newHeight);
   }, [onSizeDragging, defaultHeight]);
   var bodyNode = /*#__PURE__*/_jsx("div", {
-    className: cx(styles.editor, classNames === null || classNames === void 0 ? void 0 : classNames.body),
+    className: cx(styles.editor, styles.bodyEditor, classNames === null || classNames === void 0 ? void 0 : classNames.body),
     draggable: false,
     onClick: onBodyClick,
     style: _objectSpread(_objectSpread({}, customStyles === null || customStyles === void 0 ? void 0 : customStyles.body), {}, {
-      flex: 1,
       maxHeight: fullscreen ? '100%' : maxHeight,
-      minHeight: resize ? currentHeight : minHeight,
-      zIndex: 0
+      minHeight: resize ? currentHeight : minHeight
     }),
     children: children
   });
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
-    className: cx(styles.container, className),
+    className: cx(isDarkMode ? styles.containerDark : styles.containerLight, styles.root, className),
     height: fullscreen ? '100%' : undefined,
-    style: _objectSpread({
-      position: 'relative'
-    }, style),
+    style: style,
     width: "100%"
   }, rest), {}, {
     children: [slashMenuRef && /*#__PURE__*/_jsx("div", {
       ref: slashMenuRef
     }), /*#__PURE__*/_jsx("div", {
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.header,
+      className: cx(styles.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
       ref: headerRef,
-      style: _objectSpread({
-        width: '100%',
-        zIndex: 1
-      }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.header),
+      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.header,
       children: header
     }), resize ? /*#__PURE__*/_jsx(Resizable, {
       className: styles.resizableContainer,
@@ -141,17 +133,14 @@ var ChatInput = /*#__PURE__*/memo(function (props) {
         flex: 1,
         overflow: 'hidden',
         position: 'relative'
-      } : {},
+      } : undefined,
       children: bodyNode
     }) : bodyNode, /*#__PURE__*/_jsx("div", {
-      className: classNames === null || classNames === void 0 ? void 0 : classNames.footer,
-      style: _objectSpread({
-        width: '100%',
-        zIndex: 1
-      }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.footer),
+      className: cx(styles.footer, classNames === null || classNames === void 0 ? void 0 : classNames.footer),
+      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.footer,
       children: footer
     })]
   }));
-});
+};
 ChatInput.displayName = 'ChatInput';
 export default ChatInput;

package/es/react/ChatInput/style.d.ts

@@ -1,6 +1,11 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    container: import("antd-style").SerializedStyles;
-    editor: import("antd-style").SerializedStyles;
-    resizableContainer: import("antd-style").SerializedStyles;
-    resizeHandle: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    bodyEditor: string;
+    containerDark: string;
+    containerLight: string;
+    editor: string;
+    footer: string;
+    header: string;
+    resizableContainer: string;
+    resizeHandle: string;
+    root: string;
+};

package/es/react/ChatInput/style.js

@@ -1,14 +1,18 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css,
-    token = _ref.token,
-    isDarkMode = _ref.isDarkMode;
+    cssVar = _ref.cssVar;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: ", "px;\n\n    background-color: ", ";\n    box-shadow: ", ";\n  "])), isDarkMode ? token.colorFillSecondary : token.colorFill, token.borderRadiusLG, token.colorBgElevated, isDarkMode ? '0px 4px 4px rgba(0, 0, 0, 0.4)' : '0px 4px 4px rgba(0, 0, 0, 0.04)'),
-    editor: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: text;\n\n    overflow: hidden auto;\n    flex: 1;\n\n    width: 100%;\n    padding-block: 8px 0;\n    padding-inline: 12px;\n  "]))),
-    resizableContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-self: flex-end;\n\n    width: 100%;\n\n    &:hover .resize-handle {\n      opacity: 1;\n    }\n  "]))),
-    resizeHandle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    position: absolute;\n    inset-block-start: -4px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: 100%;\n    height: 8px;\n\n    opacity: 0;\n\n    transition: opacity 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 32px;\n      height: 4px;\n      border-radius: 4px;\n\n      background-color: ", ";\n      box-shadow: 0 1px 2px ", "20;\n    }\n\n    &:hover {\n      opacity: 1 !important;\n\n      &::before {\n        background-color: ", ";\n        box-shadow: 0 2px 4px ", "40;\n      }\n    }\n\n    &:active {\n      &::before {\n        background-color: ", ";\n      }\n    }\n  "])), token.colorPrimary, token.colorTextSecondary, token.colorPrimaryHover, token.colorTextSecondary, token.colorPrimaryActive)
+    bodyEditor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    z-index: 0;\n    flex: 1;\n  "]))),
+    containerDark: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    background-color: ", ";\n    box-shadow: 0 4px 4px color-mix(in srgb, #000 40%, transparent);\n  "])), cssVar.colorFillSecondary, cssVar.borderRadiusLG, cssVar.colorBgElevated),
+    containerLight: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    border: 1px solid ", ";\n    border-radius: ", ";\n\n    background-color: ", ";\n    box-shadow: 0 4px 4px color-mix(in srgb, #000 4%, transparent);\n  "])), cssVar.colorFill, cssVar.borderRadiusLG, cssVar.colorBgElevated),
+    editor: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    cursor: text;\n\n    overflow: hidden auto;\n    flex: 1;\n\n    width: 100%;\n    padding-block: 8px 0;\n    padding-inline: 12px;\n  "]))),
+    footer: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    z-index: 1;\n    width: 100%;\n  "]))),
+    header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    z-index: 1;\n    width: 100%;\n  "]))),
+    resizableContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    position: relative;\n\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    align-self: flex-end;\n\n    width: 100%;\n\n    &:hover .resize-handle {\n      opacity: 1;\n    }\n  "]))),
+    resizeHandle: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    position: absolute;\n    inset-block-start: -4px;\n    inset-inline-start: 50%;\n    transform: translateX(-50%);\n\n    width: 100%;\n    height: 8px;\n\n    opacity: 0;\n\n    transition: opacity 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 50%;\n      transform: translateX(-50%);\n\n      width: 32px;\n      height: 4px;\n      border-radius: 4px;\n\n      background-color: ", ";\n      box-shadow: 0 1px 2px color-mix(in srgb, ", " 12.5%, transparent);\n    }\n\n    &:hover {\n      opacity: 1 !important;\n\n      &::before {\n        background-color: ", ";\n        box-shadow: 0 2px 4px color-mix(in srgb, ", " 25%, transparent);\n      }\n    }\n\n    &:active {\n      &::before {\n        background-color: ", ";\n      }\n    }\n  "])), cssVar.colorPrimary, cssVar.colorTextSecondary, cssVar.colorPrimaryHover, cssVar.colorTextSecondary, cssVar.colorPrimaryActive),
+    root: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    position: relative;\n  "])))
   };
 });

package/es/react/ChatInputActionBar/ChatInputActionBar.js

@@ -10,7 +10,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Flexbox } from '@lobehub/ui';
-import { useStyles } from "./style";
+import { cx } from 'antd-style';
+import { styles } from "./style";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ChatInputActionBar = function ChatInputActionBar(_ref) {
   var className = _ref.className,
@@ -18,9 +19,6 @@ var ChatInputActionBar = function ChatInputActionBar(_ref) {
     left = _ref.left,
     right = _ref.right,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
     className: cx(styles.container, className),

package/es/react/ChatInputActionBar/style.d.ts

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

package/es/react/ChatInputActionBar/style.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css;
   return {
     container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n  "])))

package/es/react/ChatInputActions/ChatInputActions.js

@@ -19,12 +19,13 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { Flexbox } from '@lobehub/ui';
+import { Flexbox, TooltipGroup } from '@lobehub/ui';
+import { cx } from 'antd-style';
 import { memo, useMemo } from 'react';
 import useMergeState from 'use-merge-value';
 import ActionItem from "./components/ActionItem";
 import { useDisplayActionCount } from "./components/useDisplayActionCount";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 // Keep memo: Complex calcItem computation and list rendering with state management
 var ChatInputActions = /*#__PURE__*/memo(function (_ref) {
@@ -44,9 +45,6 @@ var ChatInputActions = /*#__PURE__*/memo(function (_ref) {
     onGroupCollapseChange = _ref.onGroupCollapseChange,
     groupCollapse = _ref.groupCollapse,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   var _useMergeState = useMergeState(defaultGroupCollapse, {
       defaultValue: defaultGroupCollapse,
       onChange: onGroupCollapseChange,
@@ -84,26 +82,28 @@ var ChatInputActions = /*#__PURE__*/memo(function (_ref) {
       }).slice(sliceCount)), _toConsumableArray(collapseItems.children))
     })], _toConsumableArray(alwaysDisplayItems)).filter(Boolean);
   }, [collapsed, items, maxCount]);
-  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
-    align: 'center',
-    className: cx(styles.container, className),
-    flex: 1,
-    gap: gap,
-    horizontal: true,
-    ref: ref
-  }, rest), {}, {
-    children: calcItem.map(function (item, index) {
-      return /*#__PURE__*/_jsx(ActionItem, {
-        collapsed: collapsed,
-        disabled: disabled,
-        gap: gap,
-        groupCollapsed: groupCollapsed,
-        item: item,
-        onActionClick: onActionClick,
-        setGroupCollapsed: setGroupCollapsed
-      }, item.key || index);
-    })
-  }));
+  return /*#__PURE__*/_jsx(TooltipGroup, {
+    children: /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+      align: 'center',
+      className: cx(styles.container, className),
+      flex: 1,
+      gap: gap,
+      horizontal: true,
+      ref: ref
+    }, rest), {}, {
+      children: calcItem.map(function (item, index) {
+        return /*#__PURE__*/_jsx(ActionItem, {
+          collapsed: collapsed,
+          disabled: disabled,
+          gap: gap,
+          groupCollapsed: groupCollapsed,
+          item: item,
+          onActionClick: onActionClick,
+          setGroupCollapsed: setGroupCollapsed
+        }, item.key || index);
+      })
+    }))
+  });
 });
 ChatInputActions.displayName = 'ChatInputActions';
 export default ChatInputActions;

package/es/react/ChatInputActions/components/ActionItem.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { ChatInputActionItem, ChatInputActionsProps } from '../type';
 interface ChatInputActionItemProps {
     collapsed?: boolean;
@@ -9,5 +9,5 @@ interface ChatInputActionItemProps {
     onActionClick: ChatInputActionsProps['onActionClick'];
     setGroupCollapsed?: (collapse: boolean) => void;
 }
-declare const ActionItem: import("react").NamedExoticComponent<ChatInputActionItemProps>;
+declare const ActionItem: FC<ChatInputActionItemProps>;
 export default ActionItem;

package/es/react/ChatInputActions/components/ActionItem.js

@@ -7,12 +7,10 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { ActionIcon, Dropdown } from '@lobehub/ui';
-import { memo } from 'react';
 import ActionRender from "./ActionRender";
 import CollapsedActions from "./CollapsedActions";
 import { jsx as _jsx } from "react/jsx-runtime";
-// Keep memo: Rendered as list item with conditional logic and mode switching
-var ActionItem = /*#__PURE__*/memo(function (_ref) {
+var ActionItem = function ActionItem(_ref) {
   var item = _ref.item,
     disabled = _ref.disabled,
     onActionClick = _ref.onActionClick,
@@ -62,6 +60,6 @@ var ActionItem = /*#__PURE__*/memo(function (_ref) {
     item: item,
     onActionClick: onActionClick
   });
-});
+};
 ActionItem.displayName = 'ChatInputActionItem';
 export default ActionItem;

package/es/react/ChatInputActions/components/ActionRender.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { ChatInputActionItem, ChatInputActionsProps } from '../type';
 interface ActionRenderProps {
     disabled?: boolean;
     item: ChatInputActionItem;
     onActionClick: ChatInputActionsProps['onActionClick'];
 }
-declare const ActionRender: import("react").NamedExoticComponent<ActionRenderProps>;
+declare const ActionRender: FC<ActionRenderProps>;
 export default ActionRender;

package/es/react/ChatInputActions/components/ActionRender.js

@@ -9,23 +9,17 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { ActionIcon } from '@lobehub/ui';
 import { Divider } from 'antd';
-import { isValidElement, memo } from 'react';
-import { useStyles } from "../style";
+import { isValidElement } from 'react';
+import { styles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
-// Keep memo: List rendering component with conditional wrapper logic
-var ActionRender = /*#__PURE__*/memo(function (_ref) {
+var ActionRender = function ActionRender(_ref) {
   var item = _ref.item,
     onActionClick = _ref.onActionClick,
     disabled = _ref.disabled;
-  var _useStyles = useStyles(),
-    styles = _useStyles.styles;
   if (item.type === 'divider') {
     return /*#__PURE__*/_jsx(Divider, {
       className: styles.divider,
-      orientation: 'vertical',
-      style: {
-        height: 20
-      }
+      orientation: 'vertical'
     });
   }
   var _ref2 = item,
@@ -68,5 +62,5 @@ var ActionRender = /*#__PURE__*/memo(function (_ref) {
   });
   if (!wrapper) return action;
   return wrapper(action);
-});
+};
 export default ActionRender;

package/es/react/ChatInputActions/components/CollapsedActions.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { ChatInputActionsCollapseProps } from '../type';
-declare const CollapsedActions: import("react").NamedExoticComponent<ChatInputActionsCollapseProps>;
+declare const CollapsedActions: FC<ChatInputActionsCollapseProps>;
 export default CollapsedActions;

package/es/react/ChatInputActions/components/CollapsedActions.js

@@ -4,11 +4,10 @@ import { ActionIcon, Flexbox } from '@lobehub/ui';
 import { Popover } from 'antd';
 import { CircleChevronLeftIcon, CircleChevronRightIcon, CircleChevronUpIcon } from 'lucide-react';
 import { motion } from 'motion/react';
-import { memo } from 'react';
+import { styles } from "../style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-// Keep memo: Complex animation and state management with motion.div and mode switching
-var CollapsedActions = /*#__PURE__*/memo(function (_ref) {
+var CollapsedActions = function CollapsedActions(_ref) {
   var children = _ref.children,
     _ref$groupCollapse = _ref.groupCollapse,
     groupCollapse = _ref$groupCollapse === void 0 ? false : _ref$groupCollapse,
@@ -45,12 +44,10 @@ var CollapsedActions = /*#__PURE__*/memo(function (_ref) {
     horizontal: true,
     children: [/*#__PURE__*/_jsx(motion.div, {
       animate: groupCollapse ? 'closed' : 'open',
+      className: styles.collapsedContainer,
       initial: groupCollapse ? 'closed' : 'open',
       style: {
-        alignItems: 'center',
-        display: 'flex',
-        gap: gap,
-        overflow: 'hidden'
+        gap: gap
       },
       transition: {
         duration: 0.2
@@ -77,6 +74,6 @@ var CollapsedActions = /*#__PURE__*/memo(function (_ref) {
       }
     })]
   });
-});
+};
 CollapsedActions.displayName = 'ChatInputActionsCollapse';
 export default CollapsedActions;

package/es/react/ChatInputActions/style.d.ts

@@ -1,4 +1,5 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
-    container: import("antd-style").SerializedStyles;
-    divider: import("antd-style").SerializedStyles;
-}>;
+export declare const styles: {
+    collapsedContainer: string;
+    container: string;
+    divider: string;
+};

package/es/react/ChatInputActions/style.js

@@ -1,10 +1,11 @@
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n  "]))),
-    divider: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-inline: 4px;\n  "])))
+    collapsedContainer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n  "]))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n  "]))),
+    divider: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    height: 20px;\n    margin-inline: 4px;\n  "])))
   };
 });

package/es/react/CodeLanguageSelect/CodeLanguageSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { CodeLanguageSelectProps } from './type';
-declare const CodeLanguageSelect: import("react").NamedExoticComponent<CodeLanguageSelectProps>;
+declare const CodeLanguageSelect: FC<CodeLanguageSelectProps>;
 export default CodeLanguageSelect;

package/es/react/CodeLanguageSelect/CodeLanguageSelect.js

@@ -15,19 +15,16 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { MaterialFileTypeIcon, Select, Text, Flexbox } from '@lobehub/ui';
-import { memo, useMemo } from 'react';
+import { Flexbox, MaterialFileTypeIcon, Select, Text } from '@lobehub/ui';
+import { cx } from 'antd-style';
+import { useMemo } from 'react';
 import { bundledLanguagesInfo } from 'shiki';
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-// Keep memo: UseMemo calculation of large language options array (100+ items from bundledLanguagesInfo)
-var CodeLanguageSelect = /*#__PURE__*/memo(function (_ref) {
+var CodeLanguageSelect = function CodeLanguageSelect(_ref) {
   var className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   var options = useMemo(function () {
     return [{
       aliases: ['text', 'txt'],
@@ -91,6 +88,6 @@ var CodeLanguageSelect = /*#__PURE__*/memo(function (_ref) {
     showSearch: true,
     variant: 'filled'
   }, rest));
-});
+};
 CodeLanguageSelect.displayName = 'CodeLanguageSelect';
 export default CodeLanguageSelect;

package/es/react/CodeLanguageSelect/style.d.ts

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

package/es/react/CodeLanguageSelect/style.js

@@ -1,7 +1,7 @@
 var _templateObject;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+import { createStaticStyles } from 'antd-style';
+export var styles = createStaticStyles(function (_ref) {
   var css = _ref.css;
   return {
     container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: 160px;\n  "])))

package/es/react/FloatActions/FloatActions.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type FC } from 'react';
 import type { FloatActionsProps } from './type';
-declare const FloatActions: import("react").NamedExoticComponent<FloatActionsProps>;
+declare const FloatActions: FC<FloatActionsProps>;
 export default FloatActions;

package/es/react/FloatActions/FloatActions.js

@@ -16,13 +16,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { Flexbox } from '@lobehub/ui';
-import { memo } from 'react';
+import { cx } from 'antd-style';
 import useMergeState from 'use-merge-value';
 import ActionItem from "./components/ActionItem";
-import { useStyles } from "./style";
+import { styles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-// Keep memo: List rendering with state management for collapsed/expanded states
-var FloatActions = /*#__PURE__*/memo(function (_ref) {
+var FloatActions = function FloatActions(_ref) {
   var _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 2 : _ref$gap,
     disabled = _ref.disabled,
@@ -35,9 +34,6 @@ var FloatActions = /*#__PURE__*/memo(function (_ref) {
     onGroupCollapseChange = _ref.onGroupCollapseChange,
     groupCollapse = _ref.groupCollapse,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
-    cx = _useStyles.cx,
-    styles = _useStyles.styles;
   var _useMergeState = useMergeState(defaultGroupCollapse, {
       defaultValue: defaultGroupCollapse,
       onChange: onGroupCollapseChange,
@@ -64,6 +60,6 @@ var FloatActions = /*#__PURE__*/memo(function (_ref) {
       }, item.key || index);
     })
   }));
-});
+};
 FloatActions.displayName = 'FloatActions';
 export default FloatActions;