flowcloudai-ui 0.1.4 → 0.1.6

package/dist/index.css

@@ -1891,32 +1891,26 @@
 .fc-tab-bar__nav-outer {
   display: flex;
   align-items: stretch;
-}
-.fc-tab-bar__nav-outer--scroll {
-  overflow: hidden;
-}
-.fc-tab-bar__nav {
   flex: 1;
   min-width: 0;
-  display: flex;
-  align-items: stretch;
-  position: relative;
-  z-index: 0;
-}
-.fc-tab-bar__nav--scroll {
-  overflow: hidden;
-  flex-shrink: 0;
 }
 .fc-tab-bar__nav-wrap {
   display: flex;
-  gap: 0;
   align-items: stretch;
-  max-width: 100%;
-  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.fc-tab-bar__nav-wrap::-webkit-scrollbar {
+  display: none;
 }
 .fc-tab-bar__tab {
+  flex: 1 1 0;
+  min-width: var(--tab-min-width, 80px);
+  max-width: var(--tab-max-width, 200px);
   position: relative;
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: var(--fc-space-sm, 8px);
   padding: var(--fc-space-sm, 8px) var(--fc-space-lg, 16px);
@@ -1928,10 +1922,9 @@
   white-space: nowrap;
   border: none;
   user-select: none;
+  box-sizing: border-box;
   border-radius: var(--tab-item-radius-tl) var(--tab-item-radius-tr) var(--tab-item-radius-br) var(--tab-item-radius-bl);
-}
-.fc-tab-bar__nav--scroll .fc-tab-bar__tab {
-  justify-content: space-between;
+  overflow: hidden;
 }
 .fc-tab-bar__tab:hover:not(.fc-tab-bar__tab--disabled):not(.fc-tab-bar__tab--dragging) {
   color: var(--tab-hover-color);
@@ -1946,6 +1939,24 @@
   cursor: not-allowed;
   opacity: 0.6;
 }
+.fc-tab-bar__tab-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  -webkit-mask-image:
+    linear-gradient(
+      to right,
+      black 0%,
+      black calc(100% - 20px),
+      transparent 100%);
+  mask-image:
+    linear-gradient(
+      to right,
+      black 0%,
+      black calc(100% - 20px),
+      transparent 100%);
+}
 .fc-tab-bar--attached {
   border-bottom: 2px solid var(--fc-color-border);
 }
@@ -2022,32 +2033,6 @@
 .fc-tab-bar__add-btn {
   -webkit-app-region: no-drag;
 }
-.fc-tab-bar--shrink .fc-tab-bar__tab {
-  overflow: hidden;
-  min-width: 0;
-}
-.fc-tab-bar--shrink .fc-tab-bar__tab[data-compact=true] {
-  padding-left: var(--fc-space-xs, 6px);
-  padding-right: var(--fc-space-xs, 6px);
-}
-.fc-tab-bar--shrink .fc-tab-bar__tab-label {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  -webkit-mask-image:
-    linear-gradient(
-      to right,
-      black 0%,
-      black calc(100% - 20px),
-      transparent 100%);
-  mask-image:
-    linear-gradient(
-      to right,
-      black 0%,
-      black calc(100% - 20px),
-      transparent 100%);
-}
 .fc-tab-bar__tab--draggable {
   cursor: default;
 }
@@ -2072,6 +2057,9 @@
   background-color: var(--fc-color-border-light);
 }
 .fc-tab-bar__add-btn {
+  position: sticky;
+  right: 0;
+  flex-shrink: 0;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2084,6 +2072,7 @@
   cursor: pointer;
   transition: all var(--fc-transition, 150ms ease);
   border-radius: var(--fc-radius-sm, 4px);
+  background-color: var(--tab-bar-bg);
 }
 .fc-tab-bar__add-btn:hover {
   color: var(--fc-color-primary);

package/dist/index.d.ts

@@ -455,17 +455,17 @@ interface TabBarProps {
     /** 是否启用拖拽排序 */
     draggable?: boolean;
     /**
-     * Tab 最小宽度比例（相对 window.innerWidth）。
-     * 当均分后每个 Tab 宽度 < window.innerWidth * minWidthRatio 时，切换为横向滚动模式。
-     * @default 0.07
+     * Tab 最小宽度（rem 单位）。
+     * Tab 压缩至此宽度后触发横向滚动。
+     * @default '7rem'
      */
-    minWidthRatio?: number;
+    minWidth?: string;
     /**
-     * Tab 最大宽度比例（相对 window.innerWidth）。
-     * 在固定模式下，单个 Tab 的宽度不会超过此值，防止子项很少时占满过多空间。
-     * @default 0.15
+     * Tab 最大宽度（rem 单位）。
+     * Tab 较少时不超过此宽度。
+     * @default '15rem'
      */
-    maxTabWidthRatio?: number;
+    maxTabWidth?: string;
     onChange: (activeKey: string) => void;
     onClose?: (key: string) => void;
     onAdd?: () => void;

package/dist/index.js

@@ -2025,113 +2025,13 @@ var Card = ({
 };
 
 // src/components/Bar/TabBar.tsx
-import { useRef as useRef8, useCallback as useCallback9, memo as memo4, useEffect as useEffect9 } from "react";
-
-// src/components/Bar/useAdaptiveTabLayout.ts
-import { useState as useState13, useRef as useRef7, useCallback as useCallback8, useEffect as useEffect8 } from "react";
-function useAdaptiveTabLayout(navRef, options) {
-  const { itemsLength, addable, minWidthRatio, maxTabWidthRatio } = options;
-  const itemsLengthRef = useRef7(itemsLength);
-  itemsLengthRef.current = itemsLength;
-  const addableRef = useRef7(addable);
-  addableRef.current = addable;
-  const minWidthRatioRef = useRef7(minWidthRatio);
-  minWidthRatioRef.current = minWidthRatio;
-  const maxTabWidthRatioRef = useRef7(maxTabWidthRatio);
-  maxTabWidthRatioRef.current = maxTabWidthRatio;
-  const [layout, setLayout] = useState13({ scrollMode: false, tabWidth: void 0 });
-  const rafRef = useRef7(null);
-  const lastLayoutRef = useRef7({ scrollMode: false, tabWidth: void 0 });
-  const addBtnWidthRef = useRef7(0);
-  const lastAddableRef = useRef7(void 0);
-  const calculate = useCallback8(() => {
-    const navOuter = navRef.current?.parentElement;
-    const nav = navRef.current;
-    const currentItemsLength = itemsLengthRef.current;
-    const currentAddable = addableRef.current;
-    const currentMinWidthRatio = minWidthRatioRef.current;
-    const currentMaxTabWidthRatio = maxTabWidthRatioRef.current;
-    if (!nav || !navOuter || currentItemsLength === 0) return;
-    if (currentAddable !== lastAddableRef.current) {
-      lastAddableRef.current = currentAddable;
-      if (currentAddable) {
-        const addBtnElement = navOuter.querySelector(".fc-tab-bar__add-btn");
-        if (addBtnElement) {
-          const btnStyle = getComputedStyle(addBtnElement);
-          const marginL = parseFloat(btnStyle.marginLeft) || 0;
-          const marginR = parseFloat(btnStyle.marginRight) || 0;
-          addBtnWidthRef.current = addBtnElement.getBoundingClientRect().width + marginL + marginR;
-        }
-      } else {
-        addBtnWidthRef.current = 0;
-      }
-    }
-    const navOuterCS = getComputedStyle(navOuter);
-    const navWrap = nav.querySelector(".fc-tab-bar__nav-wrap");
-    const navOuterW = navOuter.clientWidth - parseFloat(navOuterCS.paddingLeft) - parseFloat(navOuterCS.paddingRight);
-    const navW = navOuterW - addBtnWidthRef.current;
-    const tabGap = navWrap ? parseFloat(getComputedStyle(navWrap).gap) : 0;
-    const totalGapWidth = (currentItemsLength - 1) * tabGap;
-    const idealW = (navW - totalGapWidth) / currentItemsLength;
-    const threshold = screen.width * currentMinWidthRatio;
-    const maxAllowedWidth = screen.width * currentMaxTabWidthRatio;
-    const minAllowedWidth = 42;
-    const prev = lastLayoutRef.current;
-    const hysteresisFactor = 1.1;
-    let newScrollMode;
-    let newTabWidth;
-    if (idealW < threshold) {
-      newScrollMode = true;
-      newTabWidth = Math.max(threshold, minAllowedWidth);
-    } else if (prev.scrollMode && idealW < threshold * hysteresisFactor) {
-      newScrollMode = true;
-      newTabWidth = Math.max(threshold, minAllowedWidth);
-    } else {
-      newScrollMode = false;
-      newTabWidth = Math.min(Math.max(idealW, minAllowedWidth), maxAllowedWidth);
-    }
-    if (prev.tabWidth !== newTabWidth || prev.scrollMode !== newScrollMode) {
-      const newLayout = { scrollMode: newScrollMode, tabWidth: newTabWidth };
-      lastLayoutRef.current = newLayout;
-      setLayout(newLayout);
-    }
-  }, [navRef]);
-  const calculateRef = useRef7(calculate);
-  calculateRef.current = calculate;
-  useEffect8(() => {
-    const navOuter = navRef.current?.parentElement;
-    if (!navOuter) return;
-    const ro = new ResizeObserver(() => {
-      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-      rafRef.current = requestAnimationFrame(() => {
-        rafRef.current = null;
-        calculateRef.current();
-      });
-    });
-    ro.observe(navOuter);
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = null;
-      calculateRef.current();
-    });
-    return () => {
-      ro.disconnect();
-      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
-    };
-  }, []);
-  useEffect8(() => {
-    calculate();
-  }, [itemsLength, calculate]);
-  return layout;
-}
-
-// src/components/Bar/TabBar.tsx
+import { useRef as useRef7, useCallback as useCallback8, memo as memo4, useEffect as useEffect8 } from "react";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var TabItemView = memo4(({
   item,
   isActive,
   closable,
   draggable,
-  tabWidth,
   tabClassName,
   activeTabClassName,
   tabStyle,
@@ -2145,7 +2045,6 @@ var TabItemView = memo4(({
   onDragEnd
 }) => {
   const showClose = item.closable !== void 0 ? item.closable : closable;
-  const isCompact = tabWidth !== void 0 && tabWidth < 42;
   const classes = [
     "fc-tab-bar__tab",
     isActive && "fc-tab-bar__tab--active",
@@ -2155,7 +2054,6 @@ var TabItemView = memo4(({
     isActive && activeTabClassName
   ].filter(Boolean).join(" ");
   const mergedStyle = {
-    ...tabWidth !== void 0 ? { width: tabWidth, boxSizing: "border-box", flexShrink: 0 } : void 0,
     ...tabStyle,
     ...isActive ? activeTabStyle : void 0
   };
@@ -2164,7 +2062,6 @@ var TabItemView = memo4(({
     {
       className: classes,
       style: mergedStyle,
-      "data-compact": isCompact || void 0,
       onClick: () => !item.disabled && onClick(item.key),
       draggable: draggable && !item.disabled,
       onDragStart: (e) => onDragStart(e, item.key),
@@ -2183,7 +2080,7 @@ var TabItemView = memo4(({
             className: "fc-tab-bar__tab-close",
             onClick: (e) => onClose(e, item.key),
             role: "button",
-            "aria-label": `\u5173\u95ED`,
+            "aria-label": "\u5173\u95ED",
             children: renderCloseIcon ? renderCloseIcon(item.key) : "\xD7"
           }
         )
@@ -2201,8 +2098,8 @@ var TabBar = memo4(({
   closable = false,
   addable = false,
   draggable = false,
-  minWidthRatio = 0.07,
-  maxTabWidthRatio = 0.15,
+  minWidth = "7rem",
+  maxTabWidth = "15rem",
   onChange,
   onClose,
   onAdd,
@@ -2240,37 +2137,42 @@ var TabBar = memo4(({
     }
   }
   const mergedStyle = { ...overrideStyle, ...style };
-  const dragKeyRef = useRef8(null);
-  const navRef = useRef8(null);
-  const layout = useAdaptiveTabLayout(navRef, {
-    itemsLength: items.length,
-    addable,
-    minWidthRatio,
-    maxTabWidthRatio
-  });
-  const prevItemsLengthRef = useRef8(items.length);
-  useEffect9(() => {
+  const dragKeyRef = useRef7(null);
+  const navRef = useRef7(null);
+  const prevItemsLengthRef = useRef7(items.length);
+  useEffect8(() => {
     const prev = prevItemsLengthRef.current;
     prevItemsLengthRef.current = items.length;
-    if (items.length <= prev || !layout.scrollMode) return;
-    const roll = navRef.current?.querySelector(".fc-roll");
-    if (!roll) return;
+    if (items.length <= prev) return;
+    const nav = navRef.current;
+    if (!nav) return;
     requestAnimationFrame(() => {
-      roll.scrollLeft = roll.scrollWidth;
+      nav.scrollLeft = nav.scrollWidth;
     });
-  }, [items.length, layout.scrollMode]);
-  const handleClick = useCallback9(
+  }, [items.length]);
+  useEffect8(() => {
+    const nav = navRef.current;
+    if (!nav) return;
+    const handleWheel = (e) => {
+      if (e.deltaY === 0) return;
+      e.preventDefault();
+      nav.scrollLeft += Number(e.deltaY);
+    };
+    nav.addEventListener("wheel", handleWheel, { passive: false });
+    return () => nav.removeEventListener("wheel", handleWheel);
+  }, []);
+  const handleClick = useCallback8(
     (key) => onChange(key),
     [onChange]
   );
-  const handleClose = useCallback9(
+  const handleClose = useCallback8(
     (e, key) => {
       e.stopPropagation();
       onClose?.(key);
     },
     [onClose]
   );
-  const handleDragStart = useCallback9(
+  const handleDragStart = useCallback8(
     (e, key) => {
       dragKeyRef.current = key;
       e.dataTransfer.effectAllowed = "move";
@@ -2279,11 +2181,11 @@ var TabBar = memo4(({
     },
     []
   );
-  const handleDragOver = useCallback9((e) => {
+  const handleDragOver = useCallback8((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
   }, []);
-  const handleDrop = useCallback9(
+  const handleDrop = useCallback8(
     (e, targetKey) => {
       e.preventDefault();
       const dragKey = dragKeyRef.current;
@@ -2298,61 +2200,60 @@ var TabBar = memo4(({
     },
     [items, onReorder]
   );
-  const handleDragEnd = useCallback9((e) => {
+  const handleDragEnd = useCallback8((e) => {
     dragKeyRef.current = null;
     e.currentTarget.classList.remove("fc-tab-bar__tab--dragging");
   }, []);
-  const { scrollMode, tabWidth } = layout;
   const rootClasses = [
     "fc-tab-bar",
     `fc-tab-bar--${variant}`,
     `fc-tab-bar--radius-${radius}`,
     tabRadius && `fc-tab-bar--tab-radius-${tabRadius}`,
-    !scrollMode && tabWidth !== void 0 && "fc-tab-bar--shrink",
     className
   ].filter(Boolean).join(" ");
-  const tabList = /* @__PURE__ */ jsx18("div", { className: "fc-tab-bar__nav-wrap", children: items.map((item) => /* @__PURE__ */ jsx18(
-    TabItemView,
-    {
-      item,
-      isActive: activeKey === item.key,
-      closable,
-      draggable,
-      tabWidth,
-      tabClassName,
-      activeTabClassName,
-      tabStyle,
-      activeTabStyle,
-      renderCloseIcon,
-      onClick: handleClick,
-      onClose: handleClose,
-      onDragStart: handleDragStart,
-      onDragOver: handleDragOver,
-      onDrop: handleDrop,
-      onDragEnd: handleDragEnd
-    },
-    item.key
-  )) });
-  const addBtn = addable && /* @__PURE__ */ jsx18(
-    "div",
-    {
-      className: "fc-tab-bar__add-btn",
-      onClick: onAdd,
-      role: "button",
-      "aria-label": "\u6DFB\u52A0\u6807\u7B7E",
-      children: renderAddButton ? renderAddButton() : "+"
-    }
-  );
+  const navWrapStyle = {
+    "--tab-min-width": minWidth,
+    "--tab-max-width": maxTabWidth
+  };
   const dragRegion = tauriDragRegion ? { "data-tauri-drag-region": "" } : {};
-  return /* @__PURE__ */ jsx18("div", { className: rootClasses, style: mergedStyle, role: "tablist", ...dragRegion, children: /* @__PURE__ */ jsxs13("div", { className: `fc-tab-bar__nav-outer${scrollMode ? " fc-tab-bar__nav-outer--scroll" : ""}`, ...dragRegion, children: [
-    /* @__PURE__ */ jsx18("div", { className: `fc-tab-bar__nav${scrollMode ? " fc-tab-bar__nav--scroll" : ""}`, ref: navRef, children: scrollMode ? /* @__PURE__ */ jsx18(RollingBox, { horizontal: true, showThumb: "hide", style: { flex: 1, minWidth: 0, height: "auto" }, children: tabList }) : tabList }),
-    addBtn
-  ] }) });
+  return /* @__PURE__ */ jsx18("div", { className: rootClasses, style: mergedStyle, role: "tablist", ...dragRegion, children: /* @__PURE__ */ jsx18("div", { className: "fc-tab-bar__nav-outer", ...dragRegion, children: /* @__PURE__ */ jsxs13("div", { className: "fc-tab-bar__nav-wrap", ref: navRef, style: navWrapStyle, children: [
+    items.map((item) => /* @__PURE__ */ jsx18(
+      TabItemView,
+      {
+        item,
+        isActive: activeKey === item.key,
+        closable,
+        draggable,
+        tabClassName,
+        activeTabClassName,
+        tabStyle,
+        activeTabStyle,
+        renderCloseIcon,
+        onClick: handleClick,
+        onClose: handleClose,
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onDragEnd: handleDragEnd
+      },
+      item.key
+    )),
+    addable && /* @__PURE__ */ jsx18(
+      "div",
+      {
+        className: "fc-tab-bar__add-btn",
+        onClick: onAdd,
+        role: "button",
+        "aria-label": "\u6DFB\u52A0\u6807\u7B7E",
+        children: renderAddButton ? renderAddButton() : "+"
+      }
+    )
+  ] }) }) });
 });
 TabBar.displayName = "TabBar";
 
 // src/components/Tag/TagItem.tsx
-import { useEffect as useEffect10, useRef as useRef9, useState as useState14 } from "react";
+import { useEffect as useEffect9, useRef as useRef8, useState as useState13 } from "react";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function TagItem({
   schema,
@@ -2363,10 +2264,10 @@ function TagItem({
   color,
   borderColor
 }) {
-  const [editing, setEditing] = useState14(false);
-  const [draft, setDraft] = useState14(() => value !== void 0 ? String(value) : "");
-  const inputRef = useRef9(null);
-  useEffect10(() => {
+  const [editing, setEditing] = useState13(false);
+  const [draft, setDraft] = useState13(() => value !== void 0 ? String(value) : "");
+  const inputRef = useRef8(null);
+  useEffect9(() => {
     if (!editing) setDraft(value !== void 0 ? String(value) : "");
   }, [value, editing]);
   const colorVars = {
@@ -2465,7 +2366,7 @@ function TagItem({
 }
 
 // src/components/MarkdownEditor/MarkdownEditor.tsx
-import { useState as useState15 } from "react";
+import { useState as useState14 } from "react";
 import MDEditor, { commands } from "@uiw/react-md-editor";
 import { jsx as jsx20 } from "react/jsx-runtime";
 function withTitle(cmd, title) {
@@ -2501,7 +2402,7 @@ function MarkdownEditor({
   borderColor
 }) {
   const { resolvedTheme } = useTheme();
-  const [showSplit, setShowSplit] = useState15(false);
+  const [showSplit, setShowSplit] = useState14(false);
   const colorVars = {
     "--md-bg": background,
     "--md-toolbar-bg": toolbarBackground,
@@ -2560,7 +2461,7 @@ function MarkdownEditor({
 }
 
 // src/components/ContextMenu/ContextMenuContext.tsx
-import { createContext as createContext4, useContext as useContext4, useEffect as useEffect11, useRef as useRef10, useState as useState16 } from "react";
+import { createContext as createContext4, useContext as useContext4, useEffect as useEffect10, useRef as useRef9, useState as useState15 } from "react";
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var ContextMenuContext = createContext4(null);
 function ContextMenuProvider({
@@ -2569,13 +2470,13 @@ function ContextMenuProvider({
   borderColor,
   hoverBackground
 }) {
-  const [menu, setMenu] = useState16({
+  const [menu, setMenu] = useState15({
     visible: false,
     x: 0,
     y: 0,
     items: []
   });
-  const menuRef = useRef10(null);
+  const menuRef = useRef9(null);
   const showContextMenu = (e, items) => {
     e.preventDefault();
     e.stopPropagation();
@@ -2583,7 +2484,7 @@ function ContextMenuProvider({
   };
   const hide = () => setMenu((s) => ({ ...s, visible: false }));
   useClickOutside(menuRef, hide, menu.visible);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!menu.visible) return;
     const onKeyDown = (e) => {
       if (e.key === "Escape") hide();
@@ -2652,10 +2553,10 @@ function ContextMenuProvider({
 var useContextMenu = () => useContext4(ContextMenuContext);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState18, useRef as useRef11, useEffect as useEffect12, useCallback as useCallback11, useMemo as useMemo5 } from "react";
+import { useState as useState17, useRef as useRef10, useEffect as useEffect11, useCallback as useCallback10, useMemo as useMemo5 } from "react";
 
 // src/components/SmartMessage/SmartMessage.tsx
-import { useState as useState17, useCallback as useCallback10 } from "react";
+import { useState as useState16, useCallback as useCallback9 } from "react";
 import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var SmartMessage = ({
   id,
@@ -2668,8 +2569,8 @@ var SmartMessage = ({
   className = "",
   style = {}
 }) => {
-  const [copied, setCopied] = useState17(false);
-  const handleCopy = useCallback10(async () => {
+  const [copied, setCopied] = useState16(false);
+  const handleCopy = useCallback9(async () => {
     try {
       await navigator.clipboard.writeText(content);
       setCopied(true);
@@ -2757,34 +2658,34 @@ var Chat = ({
   height = "600px",
   width
 }) => {
-  const [showHistory, setShowHistory] = useState18(false);
-  const [isMinimized, setIsMinimized] = useState18(false);
-  const messagesContainerRef = useRef11(null);
-  const messagesEndRef = useRef11(null);
-  const historyPanelRef = useRef11(null);
+  const [showHistory, setShowHistory] = useState17(false);
+  const [isMinimized, setIsMinimized] = useState17(false);
+  const messagesContainerRef = useRef10(null);
+  const messagesEndRef = useRef10(null);
+  const historyPanelRef = useRef10(null);
   const currentConversation = useMemo5(
     () => conversations.find((c) => c.id === currentConversationId),
     [conversations, currentConversationId]
   );
   const currentTitle = currentConversation?.title || title;
-  useEffect12(() => {
+  useEffect11(() => {
     if (autoScroll && messagesContainerRef.current && !showHistory && !isMinimized) {
       messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
     }
   }, [messages, loading, showHistory, isMinimized, autoScroll]);
   useClickOutside(historyPanelRef, () => setShowHistory(false), showHistory);
-  const handleDeleteConversation = useCallback11((conversationId) => {
+  const handleDeleteConversation = useCallback10((conversationId) => {
     onDeleteConversation?.(conversationId);
   }, [onDeleteConversation]);
-  const handleMinimize = useCallback11(() => {
+  const handleMinimize = useCallback10(() => {
     setIsMinimized(true);
     onMinimize?.();
   }, [onMinimize]);
-  const handleRestore = useCallback11(() => {
+  const handleRestore = useCallback10(() => {
     setIsMinimized(false);
     onRestore?.();
   }, [onRestore]);
-  const handleCopy = useCallback11((content) => {
+  const handleCopy = useCallback10((content) => {
     const message = messages.find((m) => m.content === content);
     if (message) {
       onMessageCopy?.(message);
@@ -2962,7 +2863,7 @@ var Chat = ({
 };
 
 // src/components/Relation/Relation.tsx
-import React13, { useCallback as useCallback12, useEffect as useEffect13, memo as memo5 } from "react";
+import React13, { useCallback as useCallback11, useEffect as useEffect12, memo as memo5 } from "react";
 import {
   ReactFlow,
   useNodesState,
@@ -3184,7 +3085,7 @@ var RelationContent = ({
   const theme = propTheme;
   const isDark = theme === "dark";
   const bgColor = isDark ? "#0f172a" : "#f5f7fa";
-  useEffect13(() => {
+  useEffect12(() => {
     if (fitView && fitViewFn && (propNodes?.length || 0) > 0) {
       const timer = setTimeout(() => {
         fitViewFn({ duration: 300, padding: 0.2, ...fitViewOptions }).catch((error) => {
@@ -3194,17 +3095,17 @@ var RelationContent = ({
       return () => clearTimeout(timer);
     }
   }, [fitView, fitViewFn, fitViewOptions, propNodes]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (propNodes) {
       setNodes(propNodes);
     }
   }, [propNodes, setNodes]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (propEdges) {
       setEdges(propEdges);
     }
   }, [propEdges, setEdges]);
-  const handleNodesChange = useCallback12(
+  const handleNodesChange = useCallback11(
     (changes) => {
       onNodesChange(changes);
       if (onNodesChangeProp) {
@@ -3215,7 +3116,7 @@ var RelationContent = ({
     },
     [onNodesChange, onNodesChangeProp, nodes]
   );
-  const handleEdgesChange = useCallback12(
+  const handleEdgesChange = useCallback11(
     (changes) => {
       onEdgesChange(changes);
       if (onEdgesChangeProp) {
@@ -3226,7 +3127,7 @@ var RelationContent = ({
     },
     [onEdgesChange, onEdgesChangeProp, edges]
   );
-  const onConnect = useCallback12(
+  const onConnect = useCallback11(
     (params) => {
       const newEdge = {
         ...params,
@@ -3250,7 +3151,7 @@ var RelationContent = ({
     },
     [setEdges, onConnectProp, edgeStyles.defaultColor, isDark]
   );
-  const handleNodeClick = useCallback12(
+  const handleNodeClick = useCallback11(
     (_event, node) => {
       if (onNodeClick && node.data) {
         onNodeClick(node.id, node.data, _event);
@@ -3258,7 +3159,7 @@ var RelationContent = ({
     },
     [onNodeClick]
   );
-  const handleNodeDoubleClick = useCallback12(
+  const handleNodeDoubleClick = useCallback11(
     (_event, node) => {
       if (onNodeDoubleClick && node.data) {
         onNodeDoubleClick(node.id, node.data);
@@ -3266,7 +3167,7 @@ var RelationContent = ({
     },
     [onNodeDoubleClick]
   );
-  const handleNodeContextMenu = useCallback12(
+  const handleNodeContextMenu = useCallback11(
     (event, node) => {
       event.preventDefault();
       if (onNodeContextMenu && node.data) {
@@ -3275,7 +3176,7 @@ var RelationContent = ({
     },
     [onNodeContextMenu]
   );
-  const handleEdgeClick = useCallback12(
+  const handleEdgeClick = useCallback11(
     (_event, edge) => {
       if (onEdgeClick) {
         onEdgeClick(edge.id, edge.data);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowcloudai-ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "author": "flowcloudai",
   "module": "dist/index.js",