@lobehub/ui 1.34.1 → 1.36.0

package/es/ChatInputArea/index.d.ts

@@ -1,30 +1,34 @@
-import { ReactNode } from 'react';
-import type { DivProps } from "../types";
-export interface ChatInputAreaProps extends DivProps {
+import { CSSProperties, ReactNode } from 'react';
+import { type TextAreaProps } from "../Input";
+export interface ChatInputAreaProps extends TextAreaProps {
     /**
-     * @description Actions to be displayed in the left of actions bar
+     * @description Actions to be displayed in the input area
      */
     actions?: ReactNode;
     /**
-     * @description Default value of the input
+     * @description Additional class name for the component
+     */
+    className?: string;
+    /**
+     * @description Default value for the input area
      */
     defaultValue?: string;
     /**
-     * @description Whether the input is disabled or not
+     * @description Whether the input area is disabled
      * @default false
      */
     disabled?: boolean;
     /**
-     * @description Whether the input is expanded or not
+     * @description Whether the input area is expanded
      * @default false
      */
     expand?: boolean;
     /**
-     * @description Footer to be displayed below input area
+     * @description Footer content to be displayed below the input area
      */
     footer?: ReactNode;
     /**
-     * @description Whether the input is in loading state or not
+     * @description Whether the input area is in loading state
      * @default false
      */
     loading?: boolean;
@@ -35,24 +39,36 @@ export interface ChatInputAreaProps extends DivProps {
     minHeight?: number;
     /**
      * @description Callback function when the expand state changes
-     * @param expand - Whether the input is expanded or not
+     * @param expand - Whether the input area is expanded
      */
     onExpandChange?: (expand: boolean) => void;
     /**
      * @description Callback function when the input value changes
-     * @param value - The current value of the input
+     * @param value - The current value of the input area
      */
     onInputChange?: (value: string) => void;
     /**
      * @description Callback function when the send button is clicked
-     * @param value - The current value of the input
+     * @param value - The current value of the input area
      */
     onSend?: (value: string) => void;
     /**
-     * @description Placeholder text of the input
+     * @description Placeholder text for the input area
      * @default 'Type something to chat...'
      */
     placeholder?: string;
+    /**
+     * @description CSS styles for the component
+     */
+    style?: CSSProperties;
+    /**
+     * @description Additional class name for the textarea element
+     */
+    textareaClassName?: string;
+    /**
+     * @description CSS styles for the textarea element
+     */
+    textareaStyle?: CSSProperties;
 }
 declare const ChatInputArea: import("react").NamedExoticComponent<ChatInputAreaProps>;
 export default ChatInputArea;

package/es/ChatInputArea/index.js

@@ -1,19 +1,22 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "style", "disabled", "onInputChange"];
+var _excluded = ["textareaClassName", "style", "textareaStyle", "minHeight", "className", "actions", "footer", "expand", "placeholder", "onExpandChange", "onSend", "defaultValue", "loading", "disabled", "onInputChange", "onPressEnter", "onCompositionStart", "onCompositionEnd", "onBlur", "onChange"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Button } from 'antd';
 import { Maximize2, Minimize2 } from 'lucide-react';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from 'react';
 import ActionIcon from "../ActionIcon";
 import { TextArea } from "../Input";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
-  var _ref$minHeight = _ref.minHeight,
+var ChatInputArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, reference) {
+  var textareaClassName = _ref.textareaClassName,
+    style = _ref.style,
+    textareaStyle = _ref.textareaStyle,
+    _ref$minHeight = _ref.minHeight,
     minHeight = _ref$minHeight === void 0 ? 200 : _ref$minHeight,
     className = _ref.className,
     actions = _ref.actions,
@@ -26,9 +29,13 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
     _ref$defaultValue = _ref.defaultValue,
     defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
     loading = _ref.loading,
-    style = _ref.style,
     disabled = _ref.disabled,
     onInputChange = _ref.onInputChange,
+    _onPressEnter = _ref.onPressEnter,
+    _onCompositionStart = _ref.onCompositionStart,
+    _onCompositionEnd = _ref.onCompositionEnd,
+    _onBlur = _ref.onBlur,
+    _onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
   var isChineseInput = useRef(false);
   var _useState = useState(defaultValue),
@@ -49,12 +56,11 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
   useEffect(function () {
     if (onInputChange) onInputChange(value);
   }, [value]);
-  return /*#__PURE__*/_jsxs("section", _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs("section", {
     className: cx(styles.container, className),
     style: _objectSpread({
       minHeight: minHeight
-    }, style)
-  }, props), {}, {
+    }, style),
     children: [/*#__PURE__*/_jsxs("div", {
       className: styles.actionsBar,
       children: [/*#__PURE__*/_jsx("div", {
@@ -67,22 +73,30 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
           onClick: handleExpandClick
         })
       })]
-    }), /*#__PURE__*/_jsx(TextArea, {
-      className: styles.textarea,
+    }), /*#__PURE__*/_jsx(TextArea, _objectSpread(_objectSpread({
+      className: cx(styles.textarea, textareaClassName),
       defaultValue: defaultValue,
+      ref: reference,
+      style: textareaStyle
+    }, props), {}, {
       onBlur: function onBlur(e) {
-        return setValue(e.target.value);
+        if (_onBlur) _onBlur(e);
+        setValue(e.target.value);
       },
       onChange: function onChange(e) {
-        return setValue(e.target.value);
+        if (_onChange) _onChange(e);
+        setValue(e.target.value);
       },
-      onCompositionEnd: function onCompositionEnd() {
+      onCompositionEnd: function onCompositionEnd(e) {
+        if (_onCompositionEnd) _onCompositionEnd(e);
         isChineseInput.current = false;
       },
-      onCompositionStart: function onCompositionStart() {
+      onCompositionStart: function onCompositionStart(e) {
+        if (_onCompositionStart) _onCompositionStart(e);
         isChineseInput.current = true;
       },
       onPressEnter: function onPressEnter(e) {
+        if (_onPressEnter) _onPressEnter(e);
         if (!loading && !e.shiftKey && !isChineseInput.current) {
           e.preventDefault();
           handleSend();
@@ -92,7 +106,7 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
       resize: false,
       type: "pure",
       value: value
-    }), /*#__PURE__*/_jsxs("div", {
+    })), /*#__PURE__*/_jsxs("div", {
       className: styles.footerBar,
       children: [footer, /*#__PURE__*/_jsx(Button, {
         disabled: disabled,
@@ -102,6 +116,6 @@ var ChatInputArea = /*#__PURE__*/memo(function (_ref) {
         children: "Send"
       })]
     })]
-  }));
-});
+  });
+}));
 export default ChatInputArea;

package/es/ChatItem/index.d.ts

@@ -2,43 +2,46 @@ import { type AlertProps } from 'antd';
 import { ReactNode } from 'react';
 import { MetaData } from "../types/meta";
 export interface ChatItemProps {
+    /**
+     * @description Actions to be displayed in the chat item
+     */
     actions?: ReactNode;
     /**
-     * @description Whether to show alert and alert config
+     * @description Props for Alert component
      */
     alert?: AlertProps;
     /**
-     * @description Avatar config
+     * @description Metadata for the avatar
      */
     avatar: MetaData;
     /**
-     * @description Whether to add spacing between chat items
-     * @default true
+     * @description Whether to add border spacing
+     */
+    borderSpacing?: number | string;
+    /**
+     * @description Custom CSS class name for the chat item
      */
-    borderSpacing?: boolean;
     className?: string;
     /**
-     * @title Whether the component is in edit mode or not
-     * @default false
+     * @description Whether the chat item is in editing mode
      */
     editing?: boolean;
     /**
-     * @description Whether to show a loading spinner
-     * @default false
+     * @description Whether the chat item is in loading state
      */
     loading?: boolean;
     /**
-     * @description The message to be displayed
+     * @description The message content of the chat item
      */
     message?: string;
     /**
-     * @title Callback function when the value changes
-     * @param value - The new value
+     * @description Callback when the message content changes
+     * @param value - The new message content
      */
     onChange?: (value: string) => void;
     /**
-     * @title Callback function when the editing state changes
-     * @param editing - Whether the component is in edit mode or not
+     * @description Callback when the editing mode changes
+     * @param editing - The new editing mode
      */
     onEditingChange?: (editing: boolean) => void;
     /**
@@ -48,20 +51,18 @@ export interface ChatItemProps {
     placement?: 'left' | 'right';
     /**
      * @description Whether the chat item is primary
-     * @default false
      */
     primary?: boolean;
     /**
-     * @description Whether to show name of the chat item
-     * @default false
+     * @description Whether to show the title of the chat item
      */
     showTitle?: boolean;
     /**
-     * @description Time of chat message
+     * @description The timestamp of the chat item
      */
     time?: number;
     /**
-     * @description The type of chat item
+     * @description The type of the chat item
      * @default 'block'
      */
     type?: 'block' | 'pure';

package/es/ChatItem/index.js

@@ -18,8 +18,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
   var actions = _ref.actions,
     className = _ref.className,
     primary = _ref.primary,
-    _ref$borderSpacing = _ref.borderSpacing,
-    borderSpacing = _ref$borderSpacing === void 0 ? true : _ref$borderSpacing,
+    borderSpacing = _ref.borderSpacing,
     loading = _ref.loading,
     message = _ref.message,
     _ref$placement = _ref.placement,
@@ -36,7 +35,6 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     properties = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       avatarSize: AVATAR_SIZE,
-      borderSpacing: borderSpacing,
       placement: placement,
       primary: primary,
       showTitle: showTitle,
@@ -68,33 +66,37 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: styles.messageContainer,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: cx(styles.name, 'chat-item-name'),
-        children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("span", {
-          className: "chat-item-time",
+      children: [/*#__PURE__*/_jsxs("title", {
+        className: styles.name,
+        children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("time", {
           children: formatTime(time)
         })]
-      }), alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
-        showIcon: true
-      }, alert)) : /*#__PURE__*/_jsx("div", {
-        className: styles.message,
-        style: editing ? {
-          padding: 12
-        } : {},
-        children: /*#__PURE__*/_jsx(EditableMessage, {
-          editing: editing,
-          onChange: onChange,
-          onEditingChange: onEditingChange,
-          value: String(message || '...')
-        })
-      }), !editing && /*#__PURE__*/_jsx("div", {
-        className: cx(styles.actions, 'chat-item-actions'),
-        children: actions
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.messageContent,
+        children: [alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
+          className: styles.alert,
+          showIcon: true
+        }, alert)) : /*#__PURE__*/_jsx("div", {
+          className: styles.message,
+          style: editing ? {
+            padding: 12
+          } : {},
+          children: /*#__PURE__*/_jsx(EditableMessage, {
+            editing: editing,
+            onChange: onChange,
+            onEditingChange: onEditingChange,
+            value: String(message || '...')
+          })
+        }), !editing && /*#__PURE__*/_jsx("div", {
+          className: styles.actions,
+          role: "chat-item-actions",
+          children: actions
+        })]
       })]
     }), borderSpacing && /*#__PURE__*/_jsx("div", {
       style: {
         flex: 'none',
-        width: AVATAR_SIZE
+        width: borderSpacing
       }
     })]
   }));

package/es/ChatItem/style.d.ts

@@ -1,17 +1,18 @@
 export declare const useStyles: (props?: {
     avatarSize: number;
-    borderSpacing: boolean;
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
     showTitle?: boolean | undefined;
     title?: string | undefined;
     type?: "block" | "pure" | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
-    actions: string;
+    actions: import("antd-style").SerializedStyles;
+    alert: import("antd-style").SerializedStyles;
     avatarContainer: import("antd-style").SerializedStyles;
     container: string;
     loading: import("antd-style").SerializedStyles;
     message: string;
     messageContainer: import("antd-style").SerializedStyles;
+    messageContent: import("antd-style").SerializedStyles;
     name: import("antd-style").SerializedStyles;
 }>;

package/es/ChatItem/style.js

@@ -10,19 +10,20 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
-    showTitle = _ref2.showTitle,
-    borderSpacing = _ref2.borderSpacing;
+    showTitle = _ref2.showTitle;
   var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   return {
-    actions: cx(css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          display: flex;\n          align-items: flex-start;\n          justify-content: ", ";\n        "])), placement === 'left' ? 'flex-end' : 'flex-start'), type === 'block' && borderSpacing ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: 0;\n              left: ", ";\n              transform: translateX(", ");\n            "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', placement === 'left' ? '100%' : '-100%') : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: ", ";\n              left: ", ";\n            "])), placement === 'left' ? '0' : 'unset', type === 'block' ? '-40px' : '-32px', placement === 'right' ? '0' : 'unset')),
-    avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          .chat-item-time,\n          .chat-item-actions {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n\n            .chat-item-actions {\n              display: flex;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
-    loading: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
-    message: cx(typeStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        position: relative;\n\n        .ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n        }\n      "]))),
+    actions: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: flex-start;\n        align-self: ", ";\n        justify-content: ", ";\n      "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'),
+    alert: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
+    avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
+    loading: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
+    message: cx(typeStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    messageContainer: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
+    messageContent: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        position: revert;\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 8px;\n        align-items: ", ";\n      "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end'),
     name: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
   };
 });

package/es/ChatList/index.d.ts

@@ -7,7 +7,12 @@ export interface ChatListProps extends DivProps {
      * @description Data of chat messages to be displayed
      */
     data: ChatMessage[];
-    onActionClick: (actionKey: string, messageId: string) => void;
+    /**
+     * @description Callback function triggered when an action is clicked
+     * @param {string} actionKey - The key of the action
+     * @param {string} messageId - The id of the message
+     */
+    onActionClick?: (actionKey: string, messageId: string) => void;
     /**
      * @description Whether to show name of the chat item
      * @default false

package/es/ChatList/index.js

@@ -9,7 +9,8 @@ import ActionsBar from "./ActionsBar";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChatList = /*#__PURE__*/memo(function (_ref) {
-  var _onActionClick = _ref.onActionClick,
+  var _ref$onActionClick = _ref.onActionClick,
+    _onActionClick = _ref$onActionClick === void 0 ? function () {} : _ref$onActionClick,
     className = _ref.className,
     data = _ref.data,
     _ref$type = _ref.type,
@@ -31,7 +32,6 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
           primary: item.role === 'user'
         }),
         avatar: item.meta,
-        borderSpacing: type === 'chat',
         message: item.content,
         placement: type === 'chat' ? item.role === 'user' ? 'right' : 'left' : 'left',
         primary: item.role === 'user',

package/es/DraggablePanel/index.js

@@ -70,6 +70,10 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showExpand = _useState2[0],
     setShowExpand = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isResizing = _useState4[0],
+    setIsResizing = _useState4[1];
   var canResizing = resize !== false && isExpand;
   var resizeHandleClassNames = useMemo(function () {
     if (!canResizing) return {};
@@ -185,16 +189,20 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
       });
     },
     onResizeStart: function onResizeStart() {
+      setIsResizing(true);
       setShowExpand(false);
     },
     onResizeStop: function onResizeStop(e, direction, reference_, delta) {
+      setIsResizing(false);
       setShowExpand(true);
       onSizeChange === null || onSizeChange === void 0 ? void 0 : onSizeChange(delta, {
         height: reference_.style.height,
         width: reference_.style.width
       });
     },
-    style: style,
+    style: _objectSpread({
+      transition: isResizing ? 'unset' : undefined
+    }, style),
     children: children
   }));
   if (fullscreen) return /*#__PURE__*/_jsx("div", {
@@ -206,7 +214,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     // @ts-ignore
     styles[mode === 'fixed' ? 'fixed' : "".concat(placement, "Float")], className),
     ref: reference,
-    style: _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1),
+    style: isExpand ? _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1) : {},
     children: [expandable && showExpand && handler, destroyOnClose ? isExpand && inner : inner]
   });
 });

package/es/styles/algorithms/generateCustomStylish.js

@@ -10,7 +10,7 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
     bottomScrollbar: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
     gradientAnimation: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
-    markdown: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
+    markdown: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0;\n        margin-inline-end: 0;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
     noScrollbar: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
     resetLinkColor: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.34.1",
+  "version": "1.36.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -114,6 +114,7 @@
     "@types/react-dom": "^18",
     "@vitest/coverage-v8": "latest",
     "antd-style": "^3",
+    "babel-plugin-antd-style": "latest",
     "commitlint": "^17",
     "concurrently": "^8",
     "cross-env": "^7",