@4399ywkf/design 2.0.0 → 2.1.1

package/dist/AiConversation/_lobe/DraggablePanel/DraggablePanel.js

@@ -0,0 +1,496 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useHover } from 'ahooks';
+import { ConfigProvider } from 'antd';
+import { cx } from 'antd-style';
+import isEqual from 'fast-deep-equal';
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
+import { Resizable } from 're-resizable';
+import { memo, startTransition, use, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import useControlledState from 'use-merge-value';
+import { Center } from "../Flex";
+import Icon from "../Icon";
+import { handleVariants, panelVariants, styles, toggleVariants } from "./style";
+import { reversePlacement } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var ARROW_MAP = {
+  bottom: ChevronUp,
+  left: ChevronRight,
+  right: ChevronLeft,
+  top: ChevronDown
+};
+var MARGIN_MAP = {
+  bottom: {
+    marginTop: 4
+  },
+  left: {
+    marginRight: 4
+  },
+  right: {
+    marginLeft: 4
+  },
+  top: {
+    marginBottom: 4
+  }
+};
+var DISABLED_RESIZING = {
+  bottom: false,
+  bottomLeft: false,
+  bottomRight: false,
+  left: false,
+  right: false,
+  top: false,
+  topLeft: false,
+  topRight: false
+};
+var toCssSize = function toCssSize(value, fallback) {
+  if (typeof value === 'number') return "".concat(Math.max(value, 0), "px");
+  if (typeof value === 'string' && value.length > 0) return value;
+  return fallback;
+};
+var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
+  var _ref2, _ARROW_MAP$internalPl;
+  var _ref$headerHeight = _ref.headerHeight,
+    headerHeight = _ref$headerHeight === void 0 ? 0 : _ref$headerHeight,
+    fullscreen = _ref.fullscreen,
+    maxHeight = _ref.maxHeight,
+    _ref$pin = _ref.pin,
+    pin = _ref$pin === void 0 ? true : _ref$pin,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? 'fixed' : _ref$mode,
+    children = _ref.children,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
+    resize = _ref.resize,
+    style = _ref.style,
+    _ref$showBorder = _ref.showBorder,
+    showBorder = _ref$showBorder === void 0 ? true : _ref$showBorder,
+    _ref$showHandleHighli = _ref.showHandleHighlight,
+    showHandleHighlight = _ref$showHandleHighli === void 0 ? false : _ref$showHandleHighli,
+    _ref$showHandleWideAr = _ref.showHandleWideArea,
+    showHandleWideArea = _ref$showHandleWideAr === void 0 ? true : _ref$showHandleWideAr,
+    backgroundColor = _ref.backgroundColor,
+    size = _ref.size,
+    _ref$stableLayout = _ref.stableLayout,
+    stableLayout = _ref$stableLayout === void 0 ? false : _ref$stableLayout,
+    customizeDefaultSize = _ref.defaultSize,
+    minWidth = _ref.minWidth,
+    minHeight = _ref.minHeight,
+    maxWidth = _ref.maxWidth,
+    onSizeChange = _ref.onSizeChange,
+    onSizeDragging = _ref.onSizeDragging,
+    _ref$expandable = _ref.expandable,
+    expandable = _ref$expandable === void 0 ? true : _ref$expandable,
+    expand = _ref.expand,
+    _ref$defaultExpand = _ref.defaultExpand,
+    defaultExpand = _ref$defaultExpand === void 0 ? true : _ref$defaultExpand,
+    onExpandChange = _ref.onExpandChange,
+    className = _ref.className,
+    showHandleWhenCollapsed = _ref.showHandleWhenCollapsed,
+    destroyOnClose = _ref.destroyOnClose,
+    customStyles = _ref.styles,
+    classNames = _ref.classNames,
+    dir = _ref.dir;
+  var ref = useRef(null);
+  var isHovering = useHover(ref);
+  var isVertical = placement === 'top' || placement === 'bottom';
+  var hoverTimeoutRef = useRef(undefined);
+  var resetTransitionTimeoutRef = useRef(undefined);
+  var resizableRef = useRef(null);
+  var initialExpandedSizeRef = useRef(undefined);
+  var outerRef = useRef(null);
+  var _use = use(ConfigProvider.ConfigContext),
+    antdDirection = _use.direction;
+  var direction = dir !== null && dir !== void 0 ? dir : antdDirection;
+  var internalPlacement = useMemo(function () {
+    if (direction !== 'rtl') return placement;
+    if (placement === 'left') return 'right';
+    if (placement === 'right') return 'left';
+    return placement;
+  }, [direction, placement]);
+  var cssVariables = {
+    '--draggable-panel-bg': backgroundColor || '',
+    '--draggable-panel-header-height': "".concat(headerHeight, "px")
+  };
+  var _useControlledState = useControlledState(defaultExpand, {
+      onChange: onExpandChange,
+      value: expand
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    isExpand = _useControlledState2[0],
+    setIsExpand = _useControlledState2[1];
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    shouldTransition = _useState2[0],
+    setShouldTransition = _useState2[1];
+  var _useState3 = useState(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    showExpand = _useState4[0],
+    setShowExpand = _useState4[1];
+  useEffect(function () {
+    if (pin) return;
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+    if (isHovering && !isExpand) {
+      startTransition(function () {
+        return setIsExpand(true);
+      });
+    } else if (!isHovering && isExpand) {
+      hoverTimeoutRef.current = setTimeout(function () {
+        startTransition(function () {
+          return setIsExpand(false);
+        });
+      }, 150);
+    }
+  }, [pin, isHovering, isExpand, setIsExpand]);
+  useEffect(function () {
+    return function () {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+      if (resetTransitionTimeoutRef.current) {
+        clearTimeout(resetTransitionTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(function () {
+    initialExpandedSizeRef.current = undefined;
+  }, [internalPlacement]);
+  var reversed = reversePlacement(internalPlacement);
+  var canResizing = resize !== false && isExpand;
+  var resizing = useMemo(function () {
+    return _objectSpread(_defineProperty({
+      bottom: false,
+      bottomLeft: false,
+      bottomRight: false,
+      left: false,
+      right: false,
+      top: false,
+      topLeft: false,
+      topRight: false
+    }, reversed, true), resize);
+  }, [reversed, resize]);
+  var defaultSize = useMemo(function () {
+    if (isVertical) return _objectSpread({
+      height: 180,
+      width: '100%'
+    }, customizeDefaultSize);
+    return _objectSpread({
+      height: '100%',
+      width: 280
+    }, customizeDefaultSize);
+  }, [isVertical, customizeDefaultSize]);
+  var normalizedMaxHeight = typeof maxHeight === 'number' ? Math.max(maxHeight, 0) : undefined;
+  var normalizedMaxWidth = typeof maxWidth === 'number' ? Math.max(maxWidth, 0) : undefined;
+  var normalizedMinHeight = typeof minHeight === 'number' ? Math.max(minHeight, 0) : undefined;
+  var normalizedMinWidth = typeof minWidth === 'number' ? Math.max(minWidth, 0) : undefined;
+  var sizeProps = useMemo(function () {
+    if (!stableLayout && !isExpand) {
+      return isVertical ? {
+        minHeight: 0,
+        size: {
+          height: 0
+        }
+      } : {
+        minWidth: 0,
+        size: {
+          width: 0
+        }
+      };
+    }
+    return {
+      defaultSize: defaultSize,
+      maxHeight: normalizedMaxHeight,
+      maxWidth: normalizedMaxWidth,
+      minHeight: normalizedMinHeight,
+      minWidth: normalizedMinWidth,
+      size: size
+    };
+  }, [stableLayout, isExpand, isVertical, defaultSize, normalizedMaxHeight, normalizedMaxWidth, normalizedMinHeight, normalizedMinWidth, size]);
+  var fallbackExpandedSize = isVertical ? '180px' : '280px';
+  var controlledExpandedSize = useMemo(function () {
+    var controlledSize = isVertical ? size === null || size === void 0 ? void 0 : size.height : size === null || size === void 0 ? void 0 : size.width;
+    if (controlledSize === undefined) return undefined;
+    return toCssSize(controlledSize, fallbackExpandedSize);
+  }, [isVertical, size === null || size === void 0 ? void 0 : size.height, size === null || size === void 0 ? void 0 : size.width, fallbackExpandedSize]);
+  var defaultExpandedSize = useMemo(function () {
+    var initialSize = isVertical ? defaultSize.height : defaultSize.width;
+    return toCssSize(initialSize, fallbackExpandedSize);
+  }, [isVertical, defaultSize.height, defaultSize.width, fallbackExpandedSize]);
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    resizedExpandedSize = _useState6[0],
+    setResizedExpandedSize = _useState6[1];
+  var expandedOuterSize = (_ref2 = controlledExpandedSize !== null && controlledExpandedSize !== void 0 ? controlledExpandedSize : isVertical ? resizedExpandedSize.vertical : resizedExpandedSize.horizontal) !== null && _ref2 !== void 0 ? _ref2 : defaultExpandedSize;
+  var setExpandedMainSize = useCallback(function (nextSize) {
+    if (!stableLayout) return;
+    var currentSize = isVertical ? nextSize.height : nextSize.width;
+    if (!currentSize) return;
+    var normalizedSize = toCssSize(currentSize, fallbackExpandedSize);
+    setResizedExpandedSize(function (state) {
+      return isVertical ? _objectSpread(_objectSpread({}, state), {}, {
+        vertical: normalizedSize
+      }) : _objectSpread(_objectSpread({}, state), {}, {
+        horizontal: normalizedSize
+      });
+    });
+  }, [fallbackExpandedSize, isVertical, stableLayout]);
+  var captureInitialExpandedSize = useCallback(function () {
+    var _resizableRef$current;
+    if (initialExpandedSizeRef.current) return initialExpandedSizeRef.current;
+    var rect = (_resizableRef$current = resizableRef.current) === null || _resizableRef$current === void 0 || (_resizableRef$current = _resizableRef$current.resizable) === null || _resizableRef$current === void 0 ? void 0 : _resizableRef$current.getBoundingClientRect();
+    if (!rect) return undefined;
+    var nextInitialSize = isVertical ? {
+      height: rect.height,
+      width: '100%'
+    } : {
+      height: '100%',
+      width: rect.width
+    };
+    initialExpandedSizeRef.current = nextInitialSize;
+    return nextInitialSize;
+  }, [isVertical]);
+  useEffect(function () {
+    if (!isExpand) return;
+    captureInitialExpandedSize();
+  }, [captureInitialExpandedSize, isExpand]);
+  var toggleExpand = useCallback(function () {
+    if (expandable) setIsExpand(!isExpand);
+  }, [expandable, isExpand, setIsExpand]);
+  var clampResizeSize = useCallback(function (el) {
+    var _resizableRef$current2;
+    var rect = el.getBoundingClientRect();
+    var currentMainSize = isVertical ? rect.height : rect.width;
+    var minMainSize = isVertical ? normalizedMinHeight : normalizedMinWidth;
+    var maxMainSize = isVertical ? normalizedMaxHeight : normalizedMaxWidth;
+    var clampedMainSize = currentMainSize;
+    if (typeof minMainSize === 'number') clampedMainSize = Math.max(clampedMainSize, minMainSize);
+    if (typeof maxMainSize === 'number') clampedMainSize = Math.min(clampedMainSize, maxMainSize);
+    if (!Number.isFinite(clampedMainSize) || Math.abs(clampedMainSize - currentMainSize) < 0.5) {
+      return {
+        height: el.style.height,
+        width: el.style.width
+      };
+    }
+    var width = isVertical ? el.style.width || '100%' : "".concat(clampedMainSize, "px");
+    var height = isVertical ? "".concat(clampedMainSize, "px") : el.style.height || '100%';
+    (_resizableRef$current2 = resizableRef.current) === null || _resizableRef$current2 === void 0 || _resizableRef$current2.updateSize({
+      height: height,
+      width: width
+    });
+    return {
+      height: height,
+      width: width
+    };
+  }, [isVertical, normalizedMaxHeight, normalizedMaxWidth, normalizedMinHeight, normalizedMinWidth]);
+  var handleResize = useCallback(function (_event, _direction, el, delta) {
+    var nextSize = clampResizeSize(el);
+    if (stableLayout && outerRef.current) {
+      // Sync outer DOM width immediately so it doesn't lag behind the
+      // re-resizable inline style (which would otherwise trigger a 0.2s
+      // width transition on the outer/aside each frame during drag).
+      var dimension = isVertical ? nextSize.height : nextSize.width;
+      if (dimension) {
+        if (isVertical) outerRef.current.style.height = dimension;else outerRef.current.style.width = dimension;
+      }
+    }
+    setExpandedMainSize(nextSize);
+    onSizeDragging === null || onSizeDragging === void 0 || onSizeDragging(delta, nextSize);
+  }, [clampResizeSize, isVertical, onSizeDragging, setExpandedMainSize, stableLayout]);
+  var triggerResetWithoutTransition = useCallback(function () {
+    if (resetTransitionTimeoutRef.current) {
+      clearTimeout(resetTransitionTimeoutRef.current);
+    }
+    setShouldTransition(false);
+    resetTransitionTimeoutRef.current = setTimeout(function () {
+      setShouldTransition(true);
+    }, 0);
+  }, []);
+  var handleResetSize = useCallback(function () {
+    var _resizableRef$current3, _resizableRef$current4;
+    if (!canResizing) return;
+    var resetSize = captureInitialExpandedSize();
+    if (!resetSize) return;
+    triggerResetWithoutTransition();
+    var rect = (_resizableRef$current3 = resizableRef.current) === null || _resizableRef$current3 === void 0 || (_resizableRef$current3 = _resizableRef$current3.resizable) === null || _resizableRef$current3 === void 0 ? void 0 : _resizableRef$current3.getBoundingClientRect();
+    var prevMainSize = rect ? isVertical ? rect.height : rect.width : 0;
+    var resetMainSize = isVertical ? resetSize.height : resetSize.width;
+    var nextMainSize = typeof resetMainSize === 'number' ? resetMainSize : prevMainSize;
+    (_resizableRef$current4 = resizableRef.current) === null || _resizableRef$current4 === void 0 || _resizableRef$current4.updateSize(resetSize);
+    setExpandedMainSize(resetSize);
+    onSizeChange === null || onSizeChange === void 0 || onSizeChange(isVertical ? {
+      height: nextMainSize - prevMainSize,
+      width: 0
+    } : {
+      height: 0,
+      width: nextMainSize - prevMainSize
+    }, resetSize);
+  }, [canResizing, captureInitialExpandedSize, isVertical, onSizeChange, setExpandedMainSize, triggerResetWithoutTransition]);
+  var handleResizeStart = useCallback(function (event) {
+    if (event.detail === 2) {
+      handleResetSize();
+      return false;
+    }
+    if (resetTransitionTimeoutRef.current) {
+      clearTimeout(resetTransitionTimeoutRef.current);
+      resetTransitionTimeoutRef.current = undefined;
+    }
+
+    // Synchronously disable the outer transition so the first drag frame
+    // does not animate. `setShouldTransition(false)` below is asynchronous
+    // and would only take effect after the next React commit.
+    if (stableLayout && outerRef.current) {
+      outerRef.current.style.transition = 'none';
+    }
+    setShouldTransition(false);
+    setShowExpand(false);
+  }, [handleResetSize, stableLayout]);
+  var handleResizeStop = useCallback(function (_event, _direction, el, delta) {
+    var nextSize = clampResizeSize(el);
+    setExpandedMainSize(nextSize);
+    setShouldTransition(true);
+    setShowExpand(true);
+    // Clear imperative inline overrides so React resumes owning the outer
+    // width/transition on the next render.
+    if (stableLayout && outerRef.current) {
+      outerRef.current.style.removeProperty('width');
+      outerRef.current.style.removeProperty('height');
+      outerRef.current.style.removeProperty('transition');
+    }
+    onSizeChange === null || onSizeChange === void 0 || onSizeChange(delta, nextSize);
+  }, [clampResizeSize, onSizeChange, setExpandedMainSize, stableLayout]);
+  var resizeHandleClassName = useMemo(function () {
+    return cx(handleVariants({
+      placement: reversed
+    }), showHandleHighlight && styles.handleHighlight);
+  }, [reversed, showHandleHighlight]);
+  if (fullscreen) {
+    return /*#__PURE__*/_jsx("div", {
+      className: cx(styles.fullscreen, className),
+      style: cssVariables,
+      children: children
+    });
+  }
+  var Arrow = (_ARROW_MAP$internalPl = ARROW_MAP[internalPlacement]) !== null && _ARROW_MAP$internalPl !== void 0 ? _ARROW_MAP$internalPl : ChevronLeft;
+  var stableOuterFlex = stableLayout ? {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0
+  } : {};
+  var sidebarOuterStyle = isVertical ? _objectSpread({
+    height: isExpand ? expandedOuterSize : 0,
+    overflow: 'hidden',
+    transition: shouldTransition ? 'height 0.2s var(--ant-motion-ease-out, ease)' : 'none',
+    width: '100%'
+  }, stableOuterFlex) : _objectSpread({
+    overflow: 'hidden',
+    transition: shouldTransition ? 'width 0.2s var(--ant-motion-ease-out, ease)' : 'none',
+    width: isExpand ? expandedOuterSize : 0
+  }, stableLayout ? _objectSpread(_objectSpread({}, stableOuterFlex), {}, {
+    flex: 1,
+    minWidth: 0,
+    height: '100%'
+  }) : {});
+  var stableInnerStyle = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    height: '100%',
+    minHeight: 0,
+    minWidth: 0,
+    width: '100%'
+  };
+  var sidebarInnerStyle = stableLayout ? stableInnerStyle : isVertical ? {
+    height: '100%',
+    width: '100%'
+  } : {
+    width: '100%'
+  };
+  var stableAsideStyle = stableLayout ? _objectSpread({
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0
+  }, mode === 'fixed' ? {
+    height: '100%'
+  } : {}) : {};
+  var stableResizableStyle = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    height: '100%',
+    minHeight: 0,
+    minWidth: 0,
+    width: '100%'
+  };
+  var panelNode = (!destroyOnClose || isExpand) && /*#__PURE__*/_jsx(Resizable, _objectSpread(_objectSpread({
+    ref: resizableRef
+  }, sizeProps), {}, {
+    className: cx(styles.panel, classNames === null || classNames === void 0 ? void 0 : classNames.content),
+    enable: canResizing ? resizing : DISABLED_RESIZING,
+    handleClasses: canResizing ? _defineProperty({}, reversed, resizeHandleClassName) : {},
+    style: _objectSpread(_objectSpread(_objectSpread({}, cssVariables), {}, {
+      transition: shouldTransition ? undefined : 'none'
+    }, stableLayout ? stableResizableStyle : {}), style),
+    onResize: handleResize,
+    onResizeStart: handleResizeStart,
+    onResizeStop: handleResizeStop,
+    children: stableLayout ? /*#__PURE__*/_jsx("div", {
+      style: sidebarInnerStyle,
+      children: children
+    }) : children
+  }));
+  return /*#__PURE__*/_jsxs("aside", {
+    dir: dir,
+    ref: ref,
+    style: _objectSpread(_objectSpread({}, cssVariables), stableAsideStyle),
+    className: cx(panelVariants({
+      isExpand: isExpand,
+      mode: mode,
+      placement: internalPlacement,
+      showBorder: showBorder
+    }), className),
+    children: [expandable && showExpand && /*#__PURE__*/_jsx(Center, {
+      className: toggleVariants({
+        placement: internalPlacement,
+        showHandleWideArea: showHandleWideArea
+      }),
+      style: {
+        opacity: isExpand ? pin ? undefined : 0 : showHandleWhenCollapsed ? 1 : 0
+      },
+      children: /*#__PURE__*/_jsx(Center, {
+        className: classNames === null || classNames === void 0 ? void 0 : classNames.handle,
+        style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.handle,
+        onClick: toggleExpand,
+        children: /*#__PURE__*/_jsx(Icon, {
+          className: styles.handlerIcon,
+          icon: Arrow,
+          size: 16,
+          style: _objectSpread(_objectSpread({}, MARGIN_MAP[internalPlacement]), {}, {
+            transform: "rotate(".concat(isExpand ? 180 : 0, "deg)"),
+            transition: 'transform 0.3s ease'
+          })
+        })
+      })
+    }), stableLayout ? /*#__PURE__*/_jsx("div", {
+      ref: outerRef,
+      style: sidebarOuterStyle,
+      children: panelNode
+    }) : panelNode]
+  });
+}, isEqual);
+DraggablePanel.displayName = 'DraggablePanel';
+export default DraggablePanel;

package/dist/AiConversation/_lobe/DraggablePanel/components/DraggablePanelBody.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type DivProps } from '../../types';
+export type DraggablePanelBodyProps = DivProps;
+declare const DraggablePanelBody: import("react").NamedExoticComponent<DivProps>;
+export default DraggablePanelBody;

package/dist/AiConversation/_lobe/DraggablePanel/components/DraggablePanelBody.js

@@ -0,0 +1,26 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+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 { cx } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from "../../Flex";
+import { styles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DraggablePanelBody = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread({
+    className: cx(styles.body, className),
+    flex: 1
+  }, rest));
+});
+DraggablePanelBody.displayName = 'DraggablePanelBody';
+export default DraggablePanelBody;

package/dist/AiConversation/_lobe/DraggablePanel/components/DraggablePanelContainer.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type DivProps } from '../../types';
+export type DraggablePanelContainerProps = DivProps;
+declare const DraggablePanelContainer: import("react").NamedExoticComponent<DivProps>;
+export default DraggablePanelContainer;

package/dist/AiConversation/_lobe/DraggablePanel/components/DraggablePanelContainer.js

@@ -0,0 +1,25 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+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 { cx } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from "../../Flex";
+import { styles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DraggablePanelContainer = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread({
+    className: cx(styles.container, className)
+  }, rest));
+});
+DraggablePanelContainer.displayName = 'DraggablePanelContainer';
+export default DraggablePanelContainer;

package/dist/AiConversation/_lobe/DraggablePanel/components/DraggablePanelFooter.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type DivProps } from '../../types';
+export type DraggablePanelFooterProps = DivProps;
+declare const DraggablePanelFooter: import("react").NamedExoticComponent<DivProps>;
+export default DraggablePanelFooter;

package/dist/AiConversation/_lobe/DraggablePanel/components/DraggablePanelFooter.js

@@ -0,0 +1,30 @@
+'use client';
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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); }
+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 { cx } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from "../../Flex";
+import { styles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DraggablePanelFooter = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread({
+    horizontal: true,
+    align: 'center',
+    className: cx(styles.footer, className),
+    flex: 'none',
+    gap: 8,
+    justify: 'flex-start'
+  }, rest));
+});
+DraggablePanelFooter.displayName = 'DraggablePanelFooter';
+export default DraggablePanelFooter;

package/dist/AiConversation/_lobe/DraggablePanel/components/DraggablePanelHeader.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { type DivProps } from '../../types';
+export interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
+    pin?: boolean;
+    position?: 'left' | 'right';
+    setExpand?: (expand: boolean) => void;
+    setPin?: (pin: boolean) => void;
+    title?: string;
+}
+declare const DraggablePanelHeader: import("react").NamedExoticComponent<DraggablePanelHeaderProps>;
+export default DraggablePanelHeader;