flowcloudai-ui 0.1.1 → 0.1.2

package/dist/index.js

@@ -16,16 +16,7 @@ function ThemeProvider({ children, defaultTheme = "system", target }) {
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   useEffect(() => {
     const el = target ?? document.documentElement;
-    el.classList.remove("theme-light", "theme-dark");
-    el.classList.add(`theme-${resolvedTheme}`);
     el.setAttribute("data-theme", resolvedTheme);
-    if (resolvedTheme === "dark") {
-      document.body.style.backgroundColor = "#0F0F0F";
-      document.body.style.color = "#E8E8E6";
-    } else {
-      document.body.style.backgroundColor = "";
-      document.body.style.color = "";
-    }
   }, [resolvedTheme, target]);
   useEffect(() => {
     if (theme !== "system") return;
@@ -42,6 +33,7 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Button({
   variant = "primary",
   size = "md",
+  radius,
   disabled = false,
   loading = false,
   block = false,
@@ -86,6 +78,7 @@ function Button({
     "fc-btn",
     `fc-btn--${variant}`,
     `fc-btn--${size}`,
+    radius && `fc-btn--radius-${radius}`,
     block && "fc-btn--block",
     circle && "fc-btn--circle",
     iconOnly && "fc-btn--icon-only",
@@ -135,6 +128,7 @@ function CheckButton({
   onChange,
   disabled = false,
   size = "md",
+  radius,
   labelLeft,
   labelRight,
   trackBackground,
@@ -180,6 +174,7 @@ function CheckButton({
   const cls = [
     "fc-check",
     `fc-check--${size}`,
+    radius && `fc-check--radius-${radius}`,
     checked && "fc-check--checked",
     disabled && "fc-check--disabled",
     className
@@ -254,6 +249,17 @@ function RollingBox({
       }
     };
   }, []);
+  React2.useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !horizontal) return;
+    const handler = (e) => {
+      if (e.deltaY === 0) return;
+      e.preventDefault();
+      el.scrollLeft += e.deltaY;
+    };
+    el.addEventListener("wheel", handler, { passive: false });
+    return () => el.removeEventListener("wheel", handler);
+  }, [horizontal]);
   const resolvedDirection = horizontal ? "horizontal" : "vertical";
   const classNames = [
     "fc-roll",
@@ -304,6 +310,7 @@ var SideBarItemView = memo(({ item, isSelected, onClick }) => {
 SideBarItemView.displayName = "SideBarItemView";
 var SideBar = memo(({
   items,
+  bottomItems,
   selectedKey,
   collapsed,
   width = 240,
@@ -368,6 +375,15 @@ var SideBar = memo(({
         onClick: handleClick
       },
       item.key
+    )) }),
+    bottomItems && bottomItems.length > 0 && /* @__PURE__ */ jsx5("div", { className: "fc-sidebar__footer", children: bottomItems.map((item) => /* @__PURE__ */ jsx5(
+      SideBarItemView,
+      {
+        item,
+        isSelected: selectedKey === item.key,
+        onClick: handleClick
+      },
+      item.key
     )) })
   ] });
 });
@@ -379,6 +395,7 @@ import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input = React4.forwardRef(({
   size = "md",
   status = "default",
+  radius,
   prefix,
   suffix,
   allowClear = false,
@@ -401,13 +418,12 @@ var Input = React4.forwardRef(({
   const currentValue = isControlled ? value : internalValue;
   const handleChange = (e) => {
     if (!isControlled) setInternalValue(e.target.value);
-    onChange?.(e);
+    onChange?.(e.target.value);
   };
   const handleClear = () => {
     if (!isControlled) setInternalValue("");
     onClear?.();
-    const event = { target: { value: "" } };
-    onChange?.(event);
+    onChange?.("");
   };
   const togglePassword = () => {
     setType((prev) => prev === "password" ? "text" : "password");
@@ -418,6 +434,7 @@ var Input = React4.forwardRef(({
     "fc-input",
     `fc-input--${size}`,
     `fc-input--${status}`,
+    radius && `fc-input--radius-${radius}`,
     (prefix || addonBefore) && "fc-input--has-prefix",
     (suffix || addonAfter || showClear || showPasswordToggle) && "fc-input--has-suffix",
     addonBefore && "fc-input--addon-before",
@@ -499,8 +516,13 @@ function Slider({
   tooltipColor
 }) {
   const trackRef = React5.useRef(null);
-  const draggingRef = React5.useRef(null);
   const [dragging, setDragging] = React5.useState(null);
+  const dragCleanupRef = React5.useRef(null);
+  React5.useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.();
+    };
+  }, []);
   const initialValue = defaultValue ?? (range ? [min, max] : min);
   const [internalValue, setInternalValue] = React5.useState(initialValue);
   const isControlled = controlledValue !== void 0;
@@ -528,39 +550,66 @@ function Slider({
     const stepped = Math.round(raw / step) * step;
     return Math.max(min, Math.min(max, stepped));
   };
-  const handleMove = React5.useCallback((clientX, clientY) => {
-    if (!trackRef.current || draggingRef.current === null || disabled) return;
+  const handleMove = React5.useCallback((clientX, clientY, activeIndex) => {
+    if (!trackRef.current || disabled) return;
     const rect = trackRef.current.getBoundingClientRect();
     const percent = orientation === "horizontal" ? (clientX - rect.left) / rect.width * 100 : (rect.bottom - clientY) / rect.height * 100;
     const newValue = getValueFromPercent(Math.max(0, Math.min(100, percent)));
     let nextValue;
     if (range) {
       const [start, end] = currentValue;
-      nextValue = draggingRef.current === 0 ? [Math.min(newValue, end), end] : [start, Math.max(newValue, start)];
+      nextValue = activeIndex === 0 ? [Math.min(newValue, end), end] : [start, Math.max(newValue, start)];
     } else {
       nextValue = newValue;
     }
     if (!isControlled) setInternalValue(nextValue);
     onChange?.(nextValue);
   }, [disabled, orientation, range, currentValue, isControlled, onChange, min, max, step]);
-  const handleMouseDown = (index) => (e) => {
+  const startDrag = (index, clientX, clientY) => {
     if (disabled) return;
-    e.preventDefault();
-    draggingRef.current = index;
     setDragging(index);
-    const handleMouseMove = (e2) => handleMove(e2.clientX, e2.clientY);
-    const handleMouseUp = () => {
-      draggingRef.current = null;
-      setDragging(null);
+    const handleMouseMove = (ev) => handleMove(ev.clientX, ev.clientY, index);
+    const handleTouchMove = (ev) => {
+      ev.preventDefault();
+      const t = ev.touches[0];
+      handleMove(t.clientX, t.clientY, index);
+    };
+    const cleanup = () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+      dragCleanupRef.current = null;
+    };
+    const handleMouseUp = () => {
+      setDragging(null);
+      cleanup();
     };
+    const handleTouchEnd = () => {
+      setDragging(null);
+      cleanup();
+    };
+    dragCleanupRef.current = cleanup;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("touchmove", handleTouchMove, { passive: false });
+    document.addEventListener("touchend", handleTouchEnd);
+    handleMove(clientX, clientY, index);
+  };
+  const handleMouseDown = (index) => (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    startDrag(index, e.clientX, e.clientY);
+  };
+  const handleTouchStart = (index) => (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    const t = e.touches[0];
+    startDrag(index, t.clientX, t.clientY);
   };
   const handleTrackClick = (e) => {
-    if (disabled || draggingRef.current !== null) return;
-    handleMove(e.clientX, e.clientY);
+    if (disabled || dragging !== null) return;
+    handleMove(e.clientX, e.clientY, 0);
   };
   const [startVal, endVal] = range ? currentValue : [min, currentValue];
   const startPercent = getPercent(startVal);
@@ -595,6 +644,7 @@ function Slider({
             className: `fc-slider__thumb ${dragging === 0 ? "fc-slider__thumb--active" : ""}`,
             style: thumbStyle(startPercent),
             onMouseDown: handleMouseDown(0),
+            onTouchStart: handleTouchStart(0),
             children: tooltip && /* @__PURE__ */ jsx7("span", { className: "fc-slider__tooltip", children: startVal })
           }
         ),
@@ -604,6 +654,7 @@ function Slider({
             className: `fc-slider__thumb ${dragging === (range ? 1 : 0) ? "fc-slider__thumb--active" : ""}`,
             style: thumbStyle(endPercent),
             onMouseDown: handleMouseDown(range ? 1 : 0),
+            onTouchStart: handleTouchStart(range ? 1 : 0),
             children: tooltip && /* @__PURE__ */ jsx7("span", { className: "fc-slider__tooltip", children: endVal })
           }
         ),
@@ -626,6 +677,23 @@ function Slider({
 
 // src/components/Select/Select.tsx
 import * as React6 from "react";
+
+// src/hooks/useClickOutside.ts
+import { useEffect as useEffect4 } from "react";
+function useClickOutside(ref, handler, enabled = true) {
+  useEffect4(() => {
+    if (!enabled) return;
+    const listener = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        handler();
+      }
+    };
+    document.addEventListener("pointerdown", listener);
+    return () => document.removeEventListener("pointerdown", listener);
+  }, [ref, handler, enabled]);
+}
+
+// src/components/Select/Select.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Select({
   options,
@@ -636,6 +704,7 @@ function Select({
   searchable = false,
   multiple = false,
   disabled = false,
+  radius,
   className = "",
   style,
   virtualScroll = false,
@@ -718,28 +787,63 @@ function Select({
     const selected = options.find((o) => o.value === currentValue);
     return selected?.label || placeholder;
   };
-  React6.useEffect(() => {
-    const handleClick = (e) => {
-      if (!containerRef.current?.contains(e.target)) {
+  useClickOutside(containerRef, () => setIsOpen(false));
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          break;
+        }
+        if (flatOptions[highlightedIndex]) handleSelect(flatOptions[highlightedIndex]);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          break;
+        }
+        setHighlightedIndex((i) => Math.min(i + 1, flatOptions.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Escape":
+        e.preventDefault();
         setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
+        break;
+      case "Home":
+        e.preventDefault();
+        setHighlightedIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setHighlightedIndex(flatOptions.length - 1);
+        break;
+    }
+  };
   const classNames = [
     "fc-select",
     isOpen && "fc-select--open",
     multiple && "fc-select--multiple",
     disabled && "fc-select--disabled",
+    radius && `fc-select--radius-${radius}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs6("div", { ref: containerRef, className: classNames, style: mergedStyle, children: [
+  return /* @__PURE__ */ jsxs6("div", { ref: containerRef, className: classNames, style: mergedStyle, onKeyDown: handleKeyDown, children: [
     /* @__PURE__ */ jsxs6(
       "div",
       {
         className: "fc-select__trigger",
         onClick: () => !disabled && setIsOpen(!isOpen),
+        tabIndex: disabled ? -1 : 0,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
         children: [
           /* @__PURE__ */ jsx8("span", { className: `fc-select__value ${(currentValue === void 0 || currentValue === null || multiple && !currentValue.length) && "fc-select__value--placeholder"}`, children: displayLabel() }),
           /* @__PURE__ */ jsx8("span", { className: "fc-select__arrow", children: "\u25BC" })
@@ -822,7 +926,7 @@ import {
   memo as memo2,
   useCallback as useCallback4,
   useContext as useContext2,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useMemo as useMemo2,
   useRef as useRef4,
   useState as useState8
@@ -1007,7 +1111,7 @@ var CollapsePanel = memo2(function CollapsePanel2({ open, children }) {
   const innerRef = useRef4(null);
   const [height, setHeight] = useState8(0);
   const [ready, setReady] = useState8(false);
-  useEffect4(() => {
+  useEffect5(() => {
     const el = innerRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => setHeight(el.offsetHeight));
@@ -1051,7 +1155,7 @@ var TreeNodeItem = memo2(function TreeNodeItem2({ node, level, hidden = false })
   const hasChildren = node.children.length > 0;
   const indent = level * 20 + 12;
   const [localEdit, setLocalEdit] = useState8("");
-  useEffect4(() => {
+  useEffect5(() => {
     if (isEditing) setLocalEdit(node.title);
   }, [isEditing, node.title]);
   const handleEditKeyDown = useCallback4((e) => {
@@ -1188,7 +1292,7 @@ function Tree({
   });
   const dropRef = useRef4({ key: null, pos: null });
   const pointerYRef = useRef4(0);
-  useEffect4(() => {
+  useEffect5(() => {
     const handler = (e) => {
       pointerYRef.current = e.clientY;
     };
@@ -1414,50 +1518,16 @@ function OrphanDialog({ orphans, onResolve, onClose }) {
 }
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState10, useMemo as useMemo3, useCallback as useCallback5, forwardRef as forwardRef2, useEffect as useEffect5 } from "react";
+import { useState as useState10, useCallback as useCallback5, forwardRef as forwardRef2, useEffect as useEffect6 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var SIZE_MAP = {
-  xs: 20,
-  sm: 28,
-  md: 40,
-  lg: 56,
-  xl: 72
-};
 var DEFAULT_ICON = "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z";
-var useAvatarStyles = (size, shape, bordered, onClick, loadState, src, children, colorVariant, className, color, customStyle) => {
-  const classes = useMemo3(() => {
-    const classNames = [
-      "ui-avatar",
-      `ui-avatar-${size}`,
-      `ui-avatar-${shape}`,
-      bordered && "ui-avatar-bordered",
-      onClick && "ui-avatar-clickable",
-      loadState === "loading" && "ui-avatar-loading",
-      !src && !children && "ui-avatar-empty",
-      colorVariant && `ui-avatar--${colorVariant}`,
-      className
-    ];
-    return classNames.filter(Boolean).join(" ");
-  }, [size, shape, bordered, onClick, loadState, src, children, colorVariant, className]);
-  const style = useMemo3(() => ({
-    width: SIZE_MAP[size],
-    height: SIZE_MAP[size],
-    fontSize: `${SIZE_MAP[size] * 0.4}px`,
-    ...color && { backgroundColor: color },
-    ...customStyle
-  }), [size, color, customStyle]);
-  return { classes, style };
-};
-var useImageLoader = (src, fallbackSrc, onImageLoad, onImageError, onStateChange) => {
+var useImageLoader = (src, fallbackSrc, onImageLoad, onImageError) => {
   const [loadState, setLoadState] = useState10("idle");
   const [currentSrc, setCurrentSrc] = useState10(src);
-  useEffect5(() => {
+  useEffect6(() => {
     setCurrentSrc(src);
     setLoadState(src ? "loading" : "idle");
   }, [src]);
-  useEffect5(() => {
-    onStateChange?.(loadState);
-  }, [loadState, onStateChange]);
   const handleLoad = useCallback5(() => {
     setLoadState("loaded");
     onImageLoad?.();
@@ -1478,18 +1548,8 @@ var useImageLoader = (src, fallbackSrc, onImageLoad, onImageError, onStateChange
     handleError
   };
 };
-var useKeyboardInteraction = (onClick) => {
-  const handleKeyDown = useCallback5((e) => {
-    if (onClick && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault();
-      onClick(e);
-    }
-  }, [onClick]);
-  return { handleKeyDown };
-};
-var renderContent = (currentSrc, fallbackSrc, loadState, alt, lazyLoad2, children, handleLoad, handleError) => {
+var renderContent = (currentSrc, fallbackSrc, loadState, alt, lazyLoad2, handleLoad, handleError) => {
   const showImage = currentSrc && loadState !== "error";
-  const showFallback = !showImage && children;
   const imageSrc = loadState === "error" && currentSrc !== fallbackSrc ? fallbackSrc : currentSrc;
   if (showImage && imageSrc) {
     return /* @__PURE__ */ jsx12(
@@ -1505,37 +1565,20 @@ var renderContent = (currentSrc, fallbackSrc, loadState, alt, lazyLoad2, childre
       }
     );
   }
-  if (showFallback) {
-    return /* @__PURE__ */ jsx12("span", { className: "ui-avatar-text", children });
-  }
-  return /* @__PURE__ */ jsx12("span", { className: "ui-avatar-placeholder", children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", width: "40%", height: "40%", fill: "currentColor", opacity: 0.4, children: /* @__PURE__ */ jsx12("path", { d: DEFAULT_ICON }) }) });
-};
-var useAriaAttributes = (onClick, loadState, alt) => {
-  return {
-    role: onClick ? "button" : "img",
-    tabIndex: onClick ? 0 : void 0,
-    "aria-label": alt,
-    "aria-busy": loadState === "loading",
-    "data-load-state": loadState
-  };
+  return /* @__PURE__ */ jsx12("span", { className: "ui-avatar-placeholder", children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", width: "40%", height: "40%", fill: "currentColor", children: /* @__PURE__ */ jsx12("path", { d: DEFAULT_ICON }) }) });
 };
 var Avatar = forwardRef2(
   ({
-    children,
     src,
     fallbackSrc,
-    color,
-    colorVariant,
-    size = "md",
+    size = 40,
     shape = "circle",
     alt = "\u7528\u6237\u5934\u50CF",
     lazyLoad: lazyLoad2 = false,
     onImageLoad,
     onImageError,
-    onStateChange,
     bordered = false,
     className = "",
-    onClick,
     style: customStyle,
     ...restProps
   }, ref) => {
@@ -1543,31 +1586,28 @@ var Avatar = forwardRef2(
       src,
       fallbackSrc,
       onImageLoad,
-      onImageError,
-      onStateChange
-    );
-    const { classes, style } = useAvatarStyles(
-      size,
-      shape,
-      bordered,
-      onClick,
-      loadState,
-      src,
-      children,
-      colorVariant,
-      className,
-      color,
-      customStyle
+      onImageError
     );
-    const { handleKeyDown } = useKeyboardInteraction(onClick);
-    const ariaAttributes = useAriaAttributes(onClick, loadState, alt);
+    const sizeValue = `${size}px`;
+    const classes = [
+      "ui-avatar",
+      `ui-avatar-${shape}`,
+      bordered && "ui-avatar-bordered",
+      loadState === "loading" && "ui-avatar-loading",
+      className
+    ].filter(Boolean).join(" ");
+    const style = {
+      width: sizeValue,
+      height: sizeValue,
+      fontSize: `calc(${sizeValue} * 0.4)`,
+      ...customStyle
+    };
     const content = renderContent(
       currentSrc,
       fallbackSrc,
       loadState,
       alt,
       lazyLoad2,
-      children,
       handleLoad,
       handleError
     );
@@ -1577,9 +1617,9 @@ var Avatar = forwardRef2(
         ref,
         className: classes,
         style,
-        onClick,
-        onKeyDown: handleKeyDown,
-        ...ariaAttributes,
+        role: "img",
+        "aria-label": alt,
+        "data-load-state": loadState,
         ...restProps,
         children: content
       }
@@ -1589,7 +1629,7 @@ var Avatar = forwardRef2(
 Avatar.displayName = "Avatar";
 
 // src/components/ListGroup/ListGroup.tsx
-import { forwardRef as forwardRef3, useMemo as useMemo4, useCallback as useCallback6 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo3, useCallback as useCallback6 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var combineClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(" ");
@@ -1607,7 +1647,7 @@ var ListGroupItem = forwardRef3(
       if (disabled) return;
       onClick?.(e);
     }, [disabled, onClick]);
-    const classNames = useMemo4(() => {
+    const classNames = useMemo3(() => {
       return combineClassNames(
         "fc-list-group-item",
         active && "fc-list-group-item--active",
@@ -1640,7 +1680,7 @@ var ListGroup = forwardRef3(
     children,
     ...props
   }, ref) => {
-    const classNames = useMemo4(() => {
+    const classNames = useMemo3(() => {
       return combineClassNames(
         "fc-list-group",
         bordered && "fc-list-group--bordered",
@@ -1663,7 +1703,7 @@ var ListGroup = forwardRef3(
 ListGroup.displayName = "ListGroup";
 
 // src/components/VirtualList/VirtualList.tsx
-import { useState as useState11, useRef as useRef5, useCallback as useCallback7, useMemo as useMemo5, memo as memo3 } from "react";
+import { useState as useState11, useRef as useRef5, useCallback as useCallback7, useMemo as useMemo4, memo as memo3 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var VirtualItem = memo3(({ children, height }) => /* @__PURE__ */ jsx14("div", { className: "fc-virtual-list__item", style: { height: `${height}px` }, children }));
 VirtualItem.displayName = "VirtualItem";
@@ -1692,7 +1732,7 @@ function VirtualList({
       }
     }
   }, [onScrollEnd]);
-  const visibleRange = useMemo5(() => {
+  const visibleRange = useMemo4(() => {
     const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
     const endIndex = Math.min(
       data.length,
@@ -1700,7 +1740,7 @@ function VirtualList({
     );
     return { startIndex, endIndex };
   }, [scrollTop, height, itemHeight, data.length, overscan]);
-  const visibleData = useMemo5(() => {
+  const visibleData = useMemo4(() => {
     return data.slice(visibleRange.startIndex, visibleRange.endIndex);
   }, [data, visibleRange]);
   const offsetY = visibleRange.startIndex * itemHeight;
@@ -1739,7 +1779,7 @@ function VirtualList({
 }
 
 // src/components/Alert/AlertContext.tsx
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect6, useState as useState12 } from "react";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect7, useRef as useRef6, useState as useState12 } from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var AlertContext = createContext3(null);
 var ICONS = {
@@ -1824,7 +1864,18 @@ function AlertProvider({ children, background, borderColor }) {
     choice: () => {
     }
   });
-  const showAlert = (msg, type, mode = "alert", duration) => new Promise((resolve) => {
+  const mountedRef = useRef6(true);
+  useEffect7(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const showAlert = (msg, type, mode = "alert", duration) => new Promise((resolve, reject) => {
+    if (!mountedRef.current) {
+      reject(new Error("AlertProvider unmounted"));
+      return;
+    }
     setAlert({
       msg,
       type,
@@ -1832,12 +1883,13 @@ function AlertProvider({ children, background, borderColor }) {
       visible: true,
       duration,
       choice: (res) => {
+        if (!mountedRef.current) return;
         setAlert((p) => ({ ...p, visible: false }));
         resolve(res);
       }
     });
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (!alert.visible || !alert.duration) return;
     const timer = setTimeout(() => alert.choice("auto"), alert.duration);
     return () => clearTimeout(timer);
@@ -1973,13 +2025,107 @@ var Card = ({
 };
 
 // src/components/Bar/TabBar.tsx
-import { useRef as useRef6, useCallback as useCallback8, memo as memo4 } from "react";
+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 calculateTimeoutRef = 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 = window.innerWidth * currentMinWidthRatio;
+    const maxAllowedWidth = window.innerWidth * 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 calculateDebounced = useCallback8(() => {
+    if (calculateTimeoutRef.current) clearTimeout(calculateTimeoutRef.current);
+    calculateTimeoutRef.current = setTimeout(calculate, 50);
+  }, [calculate]);
+  const calculateDebouncedRef = useRef7(calculateDebounced);
+  calculateDebouncedRef.current = calculateDebounced;
+  useEffect8(() => {
+    const rafId = requestAnimationFrame(calculate);
+    const handleResize = () => calculateDebouncedRef.current();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", handleResize);
+      if (calculateTimeoutRef.current) clearTimeout(calculateTimeoutRef.current);
+    };
+  }, []);
+  useEffect8(() => {
+    calculate();
+  }, [itemsLength, calculate]);
+  return layout;
+}
+
+// src/components/Bar/TabBar.tsx
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var TabItemView = memo4(({
   item,
   isActive,
   closable,
   draggable,
+  tabWidth,
   tabClassName,
   activeTabClassName,
   tabStyle,
@@ -1993,6 +2139,7 @@ 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",
@@ -2002,6 +2149,7 @@ 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
   };
@@ -2010,6 +2158,7 @@ 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),
@@ -2028,7 +2177,7 @@ var TabItemView = memo4(({
             className: "fc-tab-bar__tab-close",
             onClick: (e) => onClose(e, item.key),
             role: "button",
-            "aria-label": `\u5173\u95ED ${typeof item.label === "string" ? item.label : ""}`,
+            "aria-label": `\u5173\u95ED`,
             children: renderCloseIcon ? renderCloseIcon(item.key) : "\xD7"
           }
         )
@@ -2046,6 +2195,8 @@ var TabBar = memo4(({
   closable = false,
   addable = false,
   draggable = false,
+  minWidthRatio = 0.07,
+  maxTabWidthRatio = 0.15,
   onChange,
   onClose,
   onAdd,
@@ -2082,19 +2233,37 @@ var TabBar = memo4(({
     }
   }
   const mergedStyle = { ...overrideStyle, ...style };
-  const dragKeyRef = useRef6(null);
-  const handleClick = useCallback8(
+  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 prev = prevItemsLengthRef.current;
+    prevItemsLengthRef.current = items.length;
+    if (items.length <= prev || !layout.scrollMode) return;
+    const roll = navRef.current?.querySelector(".fc-roll");
+    if (!roll) return;
+    requestAnimationFrame(() => {
+      roll.scrollLeft = roll.scrollWidth;
+    });
+  }, [items.length, layout.scrollMode]);
+  const handleClick = useCallback9(
     (key) => onChange(key),
     [onChange]
   );
-  const handleClose = useCallback8(
+  const handleClose = useCallback9(
     (e, key) => {
       e.stopPropagation();
       onClose?.(key);
     },
     [onClose]
   );
-  const handleDragStart = useCallback8(
+  const handleDragStart = useCallback9(
     (e, key) => {
       dragKeyRef.current = key;
       e.dataTransfer.effectAllowed = "move";
@@ -2103,11 +2272,11 @@ var TabBar = memo4(({
     },
     []
   );
-  const handleDragOver = useCallback8((e) => {
+  const handleDragOver = useCallback9((e) => {
     e.preventDefault();
     e.dataTransfer.dropEffect = "move";
   }, []);
-  const handleDrop = useCallback8(
+  const handleDrop = useCallback9(
     (e, targetKey) => {
       e.preventDefault();
       const dragKey = dragKeyRef.current;
@@ -2122,55 +2291,60 @@ var TabBar = memo4(({
     },
     [items, onReorder]
   );
-  const handleDragEnd = useCallback8((e) => {
+  const handleDragEnd = useCallback9((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(" ");
-  return /* @__PURE__ */ jsx18("div", { className: rootClasses, style: mergedStyle, role: "tablist", children: /* @__PURE__ */ jsx18("div", { className: "fc-tab-bar__nav", children: /* @__PURE__ */ jsxs13("div", { className: "fc-tab-bar__nav-wrap", 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() : "+"
-      }
-    )
-  ] }) }) });
+  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() : "+"
+    }
+  );
+  return /* @__PURE__ */ jsx18("div", { className: rootClasses, style: mergedStyle, role: "tablist", children: /* @__PURE__ */ jsxs13("div", { className: `fc-tab-bar__nav-outer${scrollMode ? " fc-tab-bar__nav-outer--scroll" : ""}`, 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
+  ] }) });
 });
 TabBar.displayName = "TabBar";
 
 // src/components/Tag/TagItem.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState13 } from "react";
+import { useEffect as useEffect10, useRef as useRef9, useState as useState14 } from "react";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function TagItem({
   schema,
@@ -2181,10 +2355,10 @@ function TagItem({
   color,
   borderColor
 }) {
-  const [editing, setEditing] = useState13(false);
-  const [draft, setDraft] = useState13(() => value !== void 0 ? String(value) : "");
-  const inputRef = useRef7(null);
-  useEffect7(() => {
+  const [editing, setEditing] = useState14(false);
+  const [draft, setDraft] = useState14(() => value !== void 0 ? String(value) : "");
+  const inputRef = useRef9(null);
+  useEffect10(() => {
     if (!editing) setDraft(value !== void 0 ? String(value) : "");
   }, [value, editing]);
   const colorVars = {
@@ -2283,25 +2457,29 @@ function TagItem({
 }
 
 // src/components/MarkdownEditor/MarkdownEditor.tsx
+import { useState as useState15 } from "react";
 import MDEditor, { commands } from "@uiw/react-md-editor";
 import { jsx as jsx20 } from "react/jsx-runtime";
+function withTitle(cmd, title) {
+  return { ...cmd, buttonProps: { ...cmd.buttonProps ?? {}, title } };
+}
 var TOOLBAR_COMMANDS = [
-  commands.bold,
-  commands.italic,
-  commands.strikethrough,
+  withTitle(commands.bold, "\u52A0\u7C97"),
+  withTitle(commands.italic, "\u659C\u4F53"),
+  withTitle(commands.strikethrough, "\u5220\u9664\u7EBF"),
   commands.divider,
-  commands.title1,
-  commands.title2,
-  commands.title3,
+  withTitle(commands.title1, "\u4E00\u7EA7\u6807\u9898"),
+  withTitle(commands.title2, "\u4E8C\u7EA7\u6807\u9898"),
+  withTitle(commands.title3, "\u4E09\u7EA7\u6807\u9898"),
   commands.divider,
-  commands.quote,
-  commands.code,
-  commands.codeBlock,
+  withTitle(commands.quote, "\u5F15\u7528"),
+  withTitle(commands.code, "\u884C\u5185\u4EE3\u7801"),
+  withTitle(commands.codeBlock, "\u4EE3\u7801\u5757"),
   commands.divider,
-  commands.link,
-  commands.unorderedListCommand,
-  commands.orderedListCommand,
-  commands.hr
+  withTitle(commands.link, "\u94FE\u63A5"),
+  withTitle(commands.unorderedListCommand, "\u65E0\u5E8F\u5217\u8868"),
+  withTitle(commands.orderedListCommand, "\u6709\u5E8F\u5217\u8868"),
+  withTitle(commands.hr, "\u5206\u5272\u7EBF")
 ];
 function MarkdownEditor({
   value,
@@ -2309,11 +2487,13 @@ function MarkdownEditor({
   onAiComplete,
   minHeight = 200,
   placeholder = "\u5728\u6B64\u8F93\u5165\u5185\u5BB9...",
+  mode = "edit",
   background,
   toolbarBackground,
   borderColor
 }) {
   const { resolvedTheme } = useTheme();
+  const [showSplit, setShowSplit] = useState15(false);
   const colorVars = {
     "--md-bg": background,
     "--md-toolbar-bg": toolbarBackground,
@@ -2326,11 +2506,27 @@ function MarkdownEditor({
   const aiCommand = {
     name: "ai-complete",
     keyCommand: "ai-complete",
-    buttonProps: { "aria-label": "AI \u8865\u5168", className: "fc-md-ai-btn" },
-    icon: /* @__PURE__ */ jsx20("span", { children: "AI \u8865\u5168" }),
+    buttonProps: { "aria-label": "AI \u8865\u5168", title: "AI \u8865\u5168", className: "fc-md-ai-btn" },
+    icon: /* @__PURE__ */ jsx20("span", { children: "AI" }),
     execute: () => onAiComplete?.()
   };
-  const extraCommands = onAiComplete ? [commands.divider, aiCommand, commands.fullscreen] : [commands.fullscreen];
+  const splitCommand = {
+    name: "split-view",
+    keyCommand: "split-view",
+    buttonProps: {
+      "aria-label": showSplit ? "\u7EAF\u7F16\u8F91" : "\u53CC\u680F\u9884\u89C8",
+      title: showSplit ? "\u7EAF\u7F16\u8F91" : "\u53CC\u680F\u9884\u89C8",
+      className: `fc-md-split-btn${showSplit ? " fc-md-split-btn--active" : ""}`
+    },
+    icon: /* @__PURE__ */ jsx20("span", { className: "fc-md-split-icon", children: "\u229F" }),
+    execute: () => setShowSplit((p) => !p)
+  };
+  const extraCommands = [
+    splitCommand,
+    ...onAiComplete ? [commands.divider, aiCommand] : [],
+    withTitle(commands.fullscreen, "\u5168\u5C4F")
+  ];
+  const editorPreview = mode === "preview" ? "preview" : showSplit ? "live" : "edit";
   return /* @__PURE__ */ jsx20(
     "div",
     {
@@ -2345,7 +2541,8 @@ function MarkdownEditor({
           commands: TOOLBAR_COMMANDS,
           extraCommands,
           height: minHeight,
-          preview: "edit",
+          preview: editorPreview,
+          hideToolbar: mode === "preview",
           visibleDragbar: false,
           textareaProps: { placeholder }
         }
@@ -2355,7 +2552,7 @@ function MarkdownEditor({
 }
 
 // src/components/ContextMenu/ContextMenuContext.tsx
-import { createContext as createContext4, useContext as useContext4, useEffect as useEffect8, useRef as useRef8, useState as useState14 } from "react";
+import { createContext as createContext4, useContext as useContext4, useEffect as useEffect11, useRef as useRef10, useState as useState16 } from "react";
 import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var ContextMenuContext = createContext4(null);
 function ContextMenuProvider({
@@ -2364,33 +2561,27 @@ function ContextMenuProvider({
   borderColor,
   hoverBackground
 }) {
-  const [menu, setMenu] = useState14({
+  const [menu, setMenu] = useState16({
     visible: false,
     x: 0,
     y: 0,
     items: []
   });
-  const menuRef = useRef8(null);
+  const menuRef = useRef10(null);
   const showContextMenu = (e, items) => {
     e.preventDefault();
     e.stopPropagation();
     setMenu({ visible: true, x: e.clientX, y: e.clientY, items });
   };
   const hide = () => setMenu((s) => ({ ...s, visible: false }));
-  useEffect8(() => {
+  useClickOutside(menuRef, hide, menu.visible);
+  useEffect11(() => {
     if (!menu.visible) return;
-    const onPointerDown = (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)) hide();
-    };
     const onKeyDown = (e) => {
       if (e.key === "Escape") hide();
     };
-    window.addEventListener("pointerdown", onPointerDown);
     window.addEventListener("keydown", onKeyDown);
-    return () => {
-      window.removeEventListener("pointerdown", onPointerDown);
-      window.removeEventListener("keydown", onKeyDown);
-    };
+    return () => window.removeEventListener("keydown", onKeyDown);
   }, [menu.visible]);
   const getPosition = () => {
     const W = window.innerWidth;
@@ -2453,16 +2644,15 @@ function ContextMenuProvider({
 var useContextMenu = () => useContext4(ContextMenuContext);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState16, useRef as useRef9, useEffect as useEffect9, useCallback as useCallback9, useMemo as useMemo6 } from "react";
+import { useState as useState18, useRef as useRef11, useEffect as useEffect12, useCallback as useCallback11, useMemo as useMemo5 } from "react";
 
 // src/components/SmartMessage/SmartMessage.tsx
-import { useState as useState15, memo as memo5 } from "react";
+import { useState as useState17, useCallback as useCallback10 } from "react";
 import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
-var SmartMessage = memo5(({
+var SmartMessage = ({
   id,
   content,
   role,
-  timestamp,
   status,
   toolName,
   toolResult,
@@ -2470,117 +2660,68 @@ var SmartMessage = memo5(({
   className = "",
   style = {}
 }) => {
-  const [copied, setCopied] = useState15(false);
-  const formattedTime = timestamp ? new Date(timestamp).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" }) : "";
-  const handleCopy = async () => {
+  const [copied, setCopied] = useState17(false);
+  const handleCopy = useCallback10(async () => {
     try {
-      let copyContent = content;
-      if (role === "tool" && toolResult) {
-        copyContent = `\u5DE5\u5177: ${toolName || "\u5DE5\u5177\u8C03\u7528"}
-\u7ED3\u679C: ${JSON.stringify(toolResult, null, 2)}`;
-      }
-      await navigator.clipboard.writeText(copyContent);
+      await navigator.clipboard.writeText(content);
       setCopied(true);
       onCopy?.(content, role);
       setTimeout(() => setCopied(false), 2e3);
     } catch (err) {
       console.error("\u590D\u5236\u5931\u8D25:", err);
     }
+  }, [content, role, onCopy]);
+  const getMessageClass = () => {
+    const baseClass = "fc-smart-message";
+    const roleClass = `fc-smart-message--${role}`;
+    const statusClass = status ? `fc-smart-message--${status}` : "";
+    return `${baseClass} ${roleClass} ${statusClass} ${className}`.trim();
   };
   const shouldShowCopyButton = () => {
     return role === "user" || role === "assistant";
   };
-  const getContainerClassName = () => {
-    const baseClass = "smart-message";
-    const roleClass = `smart-message-${role}`;
-    const statusClass = status ? `smart-message-${status}` : "";
-    return `${baseClass} ${roleClass} ${statusClass} ${className}`.trim();
-  };
-  const getContentClassName = () => {
-    const baseClass = "smart-message-content";
-    const roleContentClass = `smart-message-content-${role}`;
-    return `${baseClass} ${roleContentClass}`;
-  };
-  const renderSystemMessage = () => /* @__PURE__ */ jsxs16("div", { className: "system-message-wrapper", children: [
-    /* @__PURE__ */ jsx22("div", { className: "system-message-icon", children: /* @__PURE__ */ jsxs16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
-      /* @__PURE__ */ jsx22("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
-      /* @__PURE__ */ jsx22("path", { d: "M12 8V12M12 16H12.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })
-    ] }) }),
-    /* @__PURE__ */ jsx22("div", { className: "system-message-text", children: content }),
-    formattedTime && /* @__PURE__ */ jsx22("div", { className: "system-message-time", children: formattedTime })
-  ] });
-  const renderToolMessage = () => /* @__PURE__ */ jsxs16("div", { className: "tool-message-wrapper", children: [
-    /* @__PURE__ */ jsxs16("div", { className: "tool-message-header", children: [
-      /* @__PURE__ */ jsx22("div", { className: "tool-message-icon", children: /* @__PURE__ */ jsxs16("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
-        /* @__PURE__ */ jsx22("path", { d: "M14.7 6.3L19 2L22 5L17.7 9.3L14.7 6.3Z", stroke: "currentColor", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx22("path", { d: "M9.3 17.7L5 22L2 19L6.3 14.7L9.3 17.7Z", stroke: "currentColor", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx22("path", { d: "M12 12L14.7 9.3M12 12L9.3 14.7M12 12L8 8M12 12L16 16", stroke: "currentColor", strokeWidth: "2" })
-      ] }) }),
-      /* @__PURE__ */ jsx22("span", { className: "tool-message-name", children: toolName || "\u5DE5\u5177\u8C03\u7528" })
-    ] }),
-    /* @__PURE__ */ jsxs16("div", { className: "tool-message-content", children: [
-      /* @__PURE__ */ jsxs16("div", { className: "tool-message-params", children: [
-        /* @__PURE__ */ jsx22("strong", { children: "\u53C2\u6570:" }),
-        /* @__PURE__ */ jsx22("pre", { children: content })
-      ] }),
-      toolResult && /* @__PURE__ */ jsxs16("div", { className: "tool-message-result", children: [
-        /* @__PURE__ */ jsx22("strong", { children: "\u7ED3\u679C:" }),
-        /* @__PURE__ */ jsx22("pre", { children: typeof toolResult === "object" ? JSON.stringify(toolResult, null, 2) : toolResult })
-      ] })
-    ] }),
-    formattedTime && /* @__PURE__ */ jsx22("div", { className: "tool-message-time", children: formattedTime })
-  ] });
-  const renderUserAssistantMessage = () => /* @__PURE__ */ jsxs16(Fragment4, { children: [
-    /* @__PURE__ */ jsxs16("div", { className: "message-header", children: [
-      /* @__PURE__ */ jsx22("span", { className: "message-sender", children: role === "user" ? "\u6211" : "AI\u52A9\u624B" }),
-      formattedTime && /* @__PURE__ */ jsx22("span", { className: "message-time", children: formattedTime })
-    ] }),
-    /* @__PURE__ */ jsxs16("div", { className: getContentClassName(), children: [
-      /* @__PURE__ */ jsx22("div", { className: "message-text", children: content }),
-      shouldShowCopyButton() && /* @__PURE__ */ jsx22(
-        "button",
-        {
-          className: `copy-btn ${copied ? "copied" : ""}`,
-          onClick: handleCopy,
-          title: copied ? "\u5DF2\u590D\u5236" : "\u590D\u5236\u5185\u5BB9",
-          children: copied ? /* @__PURE__ */ jsxs16(Fragment4, { children: [
-            /* @__PURE__ */ jsx22("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx22("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
-            /* @__PURE__ */ jsx22("span", { children: "\u5DF2\u590D\u5236" })
-          ] }) : /* @__PURE__ */ jsxs16(Fragment4, { children: [
-            /* @__PURE__ */ jsxs16("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: [
-              /* @__PURE__ */ jsx22("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", stroke: "currentColor", strokeWidth: "2" }),
-              /* @__PURE__ */ jsx22("path", { d: "M5 15H4C2.9 15 2 14.1 2 13V4C2 2.9 2.9 2 4 2H13C14.1 2 15 2.9 15 4V5", stroke: "currentColor", strokeWidth: "2" })
-            ] }),
-            /* @__PURE__ */ jsx22("span", { children: "\u590D\u5236" })
-          ] })
-        }
-      ),
-      status === "sending" && /* @__PURE__ */ jsx22("span", { className: "message-status sending", children: "\u53D1\u9001\u4E2D..." }),
-      status === "error" && /* @__PURE__ */ jsx22("span", { className: "message-status error", children: "\u53D1\u9001\u5931\u8D25" })
-    ] })
-  ] });
-  const renderMessage = () => {
+  const renderContent2 = () => {
     switch (role) {
-      case "system":
-        return renderSystemMessage();
       case "tool":
-        return renderToolMessage();
-      case "user":
-      case "assistant":
+        return /* @__PURE__ */ jsxs16(Fragment4, { children: [
+          toolName && /* @__PURE__ */ jsxs16("div", { className: "fc-smart-message-tool-info", children: [
+            /* @__PURE__ */ jsx22("span", { className: "fc-smart-message-tool-icon", children: "\u{1F527}" }),
+            /* @__PURE__ */ jsx22("span", { className: "fc-smart-message-tool-name", children: toolName })
+          ] }),
+          /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-content", children: /* @__PURE__ */ jsx22("pre", { className: "fc-smart-message-tool-result", children: (() => {
+            try {
+              return JSON.stringify(toolResult || content, null, 2);
+            } catch {
+              return "[\u5E8F\u5217\u5316\u5931\u8D25]";
+            }
+          })() }) })
+        ] });
+      case "system":
+        return /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-content", children: /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-text fc-smart-message-system-text", children: content }) });
       default:
-        return renderUserAssistantMessage();
+        return /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-content", children: /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-text", children: content }) });
     }
   };
-  return /* @__PURE__ */ jsx22("div", { className: getContainerClassName(), style, "data-message-id": id, children: renderMessage() });
-});
-SmartMessage.displayName = "SmartMessage";
+  return /* @__PURE__ */ jsxs16("div", { className: getMessageClass(), style, "data-message-id": id, children: [
+    /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-content-wrapper", children: renderContent2() }),
+    shouldShowCopyButton() && /* @__PURE__ */ jsx22(
+      "button",
+      {
+        className: "fc-smart-message-copy-btn",
+        onClick: handleCopy,
+        title: "\u590D\u5236\u5185\u5BB9",
+        children: copied ? /* @__PURE__ */ jsx22("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx22("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx22("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx22("path", { d: "M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z", fill: "currentColor" }) })
+      }
+    )
+  ] });
+};
 var SmartMessage_default = SmartMessage;
 
 // src/components/Chat/Chat.tsx
 import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var Chat = ({
   messages = [],
-  title = "AI \u52A9\u624B",
+  title = "\u6D41\u4E91AI",
   loading = false,
   conversations = [],
   currentConversationId,
@@ -2608,52 +2749,128 @@ var Chat = ({
   height = "600px",
   width
 }) => {
-  const [showHistory, setShowHistory] = useState16(false);
-  const [isMinimized, setIsMinimized] = useState16(false);
-  const messagesContainerRef = useRef9(null);
-  const messagesEndRef = useRef9(null);
-  const historyPanelRef = useRef9(null);
-  const currentConversation = useMemo6(
+  const [showHistory, setShowHistory] = useState18(false);
+  const [isMinimized, setIsMinimized] = useState18(false);
+  const messagesContainerRef = useRef11(null);
+  const messagesEndRef = useRef11(null);
+  const historyPanelRef = useRef11(null);
+  const currentConversation = useMemo5(
     () => conversations.find((c) => c.id === currentConversationId),
     [conversations, currentConversationId]
   );
   const currentTitle = currentConversation?.title || title;
-  useEffect9(() => {
+  useEffect12(() => {
     if (autoScroll && messagesContainerRef.current && !showHistory && !isMinimized) {
       messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
     }
   }, [messages, loading, showHistory, isMinimized, autoScroll]);
-  useEffect9(() => {
-    const handleClickOutside = (event) => {
-      if (showHistory && historyPanelRef.current && !historyPanelRef.current.contains(event.target)) {
-        setShowHistory(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [showHistory]);
-  const handleDeleteConversation = useCallback9((conversationId) => {
+  useClickOutside(historyPanelRef, () => setShowHistory(false), showHistory);
+  const handleDeleteConversation = useCallback11((conversationId) => {
     onDeleteConversation?.(conversationId);
   }, [onDeleteConversation]);
-  const handleMinimize = useCallback9(() => {
+  const handleMinimize = useCallback11(() => {
     setIsMinimized(true);
     onMinimize?.();
   }, [onMinimize]);
-  const handleRestore = useCallback9(() => {
+  const handleRestore = useCallback11(() => {
     setIsMinimized(false);
     onRestore?.();
   }, [onRestore]);
-  const handleCopy = useCallback9((content) => {
+  const handleCopy = useCallback11((content) => {
     const message = messages.find((m) => m.content === content);
     if (message) {
       onMessageCopy?.(message);
     }
   }, [messages, onMessageCopy]);
-  const containerStyle = useMemo6(() => ({
+  const containerStyle = useMemo5(() => ({
     height,
     width,
     ...style
   }), [height, width, style]);
+  const renderSystemMessage = (message) => {
+    return /* @__PURE__ */ jsx23("div", { className: "system-message-container", children: /* @__PURE__ */ jsx23(
+      SmartMessage_default,
+      {
+        id: message.id,
+        content: message.content,
+        role: message.type,
+        timestamp: message.timestamp,
+        status: message.status,
+        toolName: message.toolName,
+        toolResult: message.toolResult,
+        onCopy: handleCopy,
+        className: bubbleClassName
+      }
+    ) }, message.id);
+  };
+  const renderUserAssistantMessage = (message) => {
+    const isUser = message.type === "user";
+    const showCopyButton = message.type === "user" || message.type === "assistant";
+    return /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        className: `message-wrapper message-wrapper--${isUser ? "user" : "assistant"}`,
+        children: [
+          /* @__PURE__ */ jsx23(
+            SmartMessage_default,
+            {
+              id: message.id,
+              content: message.content,
+              role: message.type,
+              timestamp: message.timestamp,
+              status: message.status,
+              toolName: message.toolName,
+              toolResult: message.toolResult,
+              onCopy: handleCopy,
+              className: bubbleClassName
+            }
+          ),
+          showCopyButton && /* @__PURE__ */ jsx23("div", { className: `message-copy-wrapper message-copy-wrapper--${isUser ? "user" : "assistant"}`, children: /* @__PURE__ */ jsx23(
+            "button",
+            {
+              className: "message-copy-btn",
+              onClick: () => handleCopy(message.content),
+              title: "\u590D\u5236\u5185\u5BB9",
+              children: /* @__PURE__ */ jsx23("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx23(
+                "path",
+                {
+                  d: "M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z",
+                  fill: "currentColor"
+                }
+              ) })
+            }
+          ) })
+        ]
+      },
+      message.id
+    );
+  };
+  const renderToolMessage = (message) => {
+    return /* @__PURE__ */ jsx23("div", { className: "tool-message-container", children: /* @__PURE__ */ jsx23(
+      SmartMessage_default,
+      {
+        id: message.id,
+        content: message.content,
+        role: message.type,
+        timestamp: message.timestamp,
+        status: message.status,
+        toolName: message.toolName,
+        toolResult: message.toolResult,
+        onCopy: handleCopy,
+        className: bubbleClassName
+      }
+    ) }, message.id);
+  };
+  const renderMessage = (message) => {
+    switch (message.type) {
+      case "system":
+        return renderSystemMessage(message);
+      case "tool":
+        return renderToolMessage(message);
+      default:
+        return renderUserAssistantMessage(message);
+    }
+  };
   if (isMinimized) {
     return /* @__PURE__ */ jsx23("div", { className: `chat-container-minimized ${className}`, style: containerStyle, children: /* @__PURE__ */ jsx23("button", { className: "restore-btn-only", onClick: handleRestore, title: "\u5C55\u5F00", children: /* @__PURE__ */ jsx23("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx23("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }) });
   }
@@ -2669,21 +2886,7 @@ var Chat = ({
       ] })
     ] }),
     /* @__PURE__ */ jsxs17("div", { className: `chat-messages ${messagesClassName}`, ref: messagesContainerRef, style: messagesStyle, children: [
-      messages.map((message) => /* @__PURE__ */ jsx23(
-        SmartMessage_default,
-        {
-          id: message.id,
-          content: message.content,
-          role: message.type,
-          timestamp: message.timestamp,
-          status: message.status,
-          toolName: message.toolName,
-          toolResult: message.toolResult,
-          onCopy: handleCopy,
-          className: bubbleClassName
-        },
-        message.id
-      )),
+      messages.map((message) => renderMessage(message)),
       loading && /* @__PURE__ */ jsx23("div", { className: "typing-wrapper", children: /* @__PURE__ */ jsxs17("div", { className: "typing-indicator", children: [
         /* @__PURE__ */ jsx23("span", {}),
         /* @__PURE__ */ jsx23("span", {}),
@@ -2749,6 +2952,290 @@ var Chat = ({
     ] })
   ] });
 };
+
+// src/components/Relation/Relation.tsx
+import { useCallback as useCallback12, useEffect as useEffect13 } from "react";
+import {
+  ReactFlow,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  Handle,
+  Position,
+  MarkerType,
+  ConnectionLineType,
+  useReactFlow,
+  ReactFlowProvider
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var getIconEmoji = (iconType) => {
+  const map = {
+    war: "\u2694\uFE0F",
+    target: "\u{1F3AF}",
+    star: "\u2B50",
+    award: "\u{1F3C6}",
+    flag: "\u{1F6A9}",
+    default: "\u{1F465}",
+    user: "\u{1F464}",
+    shield: "\u{1F6E1}\uFE0F"
+  };
+  return map[iconType || "default"] || "\u{1F465}";
+};
+var getStatusColor = (status) => {
+  const map = {
+    active: "#10b981",
+    inactive: "#6b7280",
+    warning: "#f59e0b"
+  };
+  return map[status || "active"];
+};
+var CustomNode = ({ data, theme = "light" }) => {
+  const isDark = theme === "dark";
+  const nodeStyle = {
+    background: isDark ? "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)" : "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)",
+    border: `2px solid ${isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.08)"}`,
+    borderRadius: "14px",
+    boxShadow: isDark ? "0 8px 20px rgba(0, 0, 0, 0.25)" : "0 4px 12px rgba(0, 0, 0, 0.08)",
+    minWidth: "240px",
+    cursor: "pointer",
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+  };
+  const iconStyle = {
+    width: "52px",
+    height: "52px",
+    borderRadius: "14px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: isDark ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)",
+    transition: "all 0.3s ease"
+  };
+  const titleStyle = {
+    fontWeight: 700,
+    fontSize: "15px",
+    marginBottom: "4px",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    color: isDark ? "#ffffff" : "#1e293b"
+  };
+  const subtitleStyle = {
+    fontSize: "11px",
+    fontWeight: 500,
+    marginBottom: "2px",
+    color: isDark ? "rgba(255, 255, 255, 0.7)" : "#64748b"
+  };
+  const descriptionStyle = {
+    fontSize: "10px",
+    marginTop: "6px",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    color: isDark ? "rgba(255, 255, 255, 0.45)" : "#94a3b8"
+  };
+  return /* @__PURE__ */ jsxs18("div", { style: nodeStyle, children: [
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, isConnectable: true }),
+    /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "14px", padding: "14px 18px" }, children: [
+      /* @__PURE__ */ jsxs18("div", { style: { position: "relative", flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsx24("div", { style: iconStyle, children: data.imageUrl ? /* @__PURE__ */ jsx24("img", { src: data.imageUrl, alt: data.title, style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "12px" } }) : /* @__PURE__ */ jsx24("span", { style: { fontSize: "28px" }, children: getIconEmoji(data.iconType) }) }),
+        data.status && /* @__PURE__ */ jsx24("div", { style: {
+          position: "absolute",
+          bottom: "-2px",
+          right: "-2px",
+          width: "12px",
+          height: "12px",
+          borderRadius: "50%",
+          border: `2px solid ${isDark ? "#1e293b" : "#ffffff"}`,
+          backgroundColor: getStatusColor(data.status)
+        } })
+      ] }),
+      /* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx24("div", { style: titleStyle, children: data.title }),
+        /* @__PURE__ */ jsx24("div", { style: subtitleStyle, children: data.subtitle }),
+        data.description && /* @__PURE__ */ jsx24("div", { style: descriptionStyle, children: data.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, isConnectable: true })
+  ] });
+};
+var nodeTypes = {
+  custom: CustomNode
+};
+var RelationContent = ({
+  nodes: propNodes,
+  edges: propEdges,
+  onNodeClick,
+  onNodeDoubleClick,
+  onEdgeClick,
+  onConnect: onConnectProp,
+  onNodesChange: onNodesChangeProp,
+  onEdgesChange: onEdgesChangeProp,
+  fitView = true,
+  fitViewOptions,
+  className = "",
+  style = {},
+  height = "70vh",
+  width = "100%",
+  defaultViewport = { x: 0, y: 0, zoom: 1 },
+  minZoom = 0.5,
+  maxZoom = 2,
+  snapToGrid = false,
+  snapGrid = [15, 15],
+  enableEdgeCreation = true,
+  enableNodeDrag = true,
+  onNodeContextMenu,
+  theme: propTheme = "light"
+}) => {
+  const [nodes, , onNodesChange] = useNodesState(propNodes || []);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(propEdges || []);
+  const { fitView: fitViewFn } = useReactFlow();
+  const theme = propTheme;
+  const isDark = theme === "dark";
+  const bgColor = isDark ? "#0f172a" : "#f5f7fa";
+  useEffect13(() => {
+    if (fitView && fitViewFn && (propNodes?.length || 0) > 0) {
+      setTimeout(() => {
+        fitViewFn({ duration: 300, ...fitViewOptions }).catch((error) => {
+          console.warn("Fit view failed:", error);
+        });
+      }, 100);
+    }
+  }, [fitView, fitViewFn, fitViewOptions, propNodes]);
+  const handleNodesChange = useCallback12(
+    (changes) => {
+      onNodesChange(changes);
+      if (onNodesChangeProp) {
+        onNodesChangeProp(nodes);
+      }
+    },
+    [onNodesChange, onNodesChangeProp, nodes]
+  );
+  const handleEdgesChange = useCallback12(
+    (changes) => {
+      onEdgesChange(changes);
+      if (onEdgesChangeProp) {
+        onEdgesChangeProp(edges);
+      }
+    },
+    [onEdgesChange, onEdgesChangeProp, edges]
+  );
+  const onConnect = useCallback12(
+    (params) => {
+      const newEdge = {
+        ...params,
+        id: `edge-${Date.now()}-${Math.random()}`,
+        type: "smoothstep",
+        style: { stroke: "#ff6b6b", strokeWidth: 2 },
+        markerEnd: { type: MarkerType.ArrowClosed, color: "#ff6b6b" },
+        label: "\u65B0\u8FDE\u63A5"
+      };
+      setEdges((eds) => addEdge(newEdge, eds));
+      if (onConnectProp) {
+        onConnectProp(params);
+      }
+    },
+    [setEdges, onConnectProp]
+  );
+  const handleNodeClick = useCallback12(
+    (_event, node) => {
+      if (onNodeClick && node.data) {
+        onNodeClick(node.id, node.data, _event);
+      }
+    },
+    [onNodeClick]
+  );
+  const handleNodeDoubleClick = useCallback12(
+    (_event, node) => {
+      if (onNodeDoubleClick && node.data) {
+        onNodeDoubleClick(node.id, node.data);
+      }
+    },
+    [onNodeDoubleClick]
+  );
+  const handleNodeContextMenu = useCallback12(
+    (event, node) => {
+      event.preventDefault();
+      if (onNodeContextMenu && node.data) {
+        onNodeContextMenu(node.id, node.data);
+      }
+    },
+    [onNodeContextMenu]
+  );
+  const handleEdgeClick = useCallback12(
+    (_event, edge) => {
+      if (onEdgeClick) {
+        onEdgeClick(edge.id, edge.data);
+      }
+    },
+    [onEdgeClick]
+  );
+  const nodesWithTheme = nodes.map((node) => ({
+    ...node,
+    data: { ...node.data, theme }
+  }));
+  const globalStyle = `
+    .react-flow__background,
+    .react-flow__pane,
+    .react-flow__renderer,
+    .react-flow__viewport {
+      background-color: ${bgColor} !important;
+    }
+  `;
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      className: `relation-container ${className}`,
+      style: {
+        width,
+        height,
+        ...style,
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: bgColor
+      },
+      children: [
+        /* @__PURE__ */ jsx24("style", { children: globalStyle }),
+        /* @__PURE__ */ jsx24(
+          ReactFlow,
+          {
+            nodes: nodesWithTheme,
+            edges,
+            onNodesChange: handleNodesChange,
+            onEdgesChange: handleEdgesChange,
+            onConnect: enableEdgeCreation ? onConnect : void 0,
+            onNodeClick: handleNodeClick,
+            onNodeDoubleClick: handleNodeDoubleClick,
+            onNodeContextMenu: handleNodeContextMenu,
+            onEdgeClick: handleEdgeClick,
+            nodeTypes,
+            fitView: false,
+            fitViewOptions,
+            defaultViewport,
+            minZoom,
+            maxZoom,
+            snapToGrid,
+            snapGrid,
+            nodesDraggable: enableNodeDrag,
+            nodesConnectable: enableEdgeCreation,
+            connectionLineType: ConnectionLineType.SmoothStep,
+            connectionLineStyle: { stroke: "#ff6b6b", strokeWidth: 2 },
+            attributionPosition: "bottom-right",
+            zoomOnScroll: true,
+            zoomOnPinch: true,
+            zoomOnDoubleClick: false,
+            panOnScroll: false,
+            panOnDrag: true,
+            proOptions: { hideAttribution: true }
+          }
+        )
+      ]
+    }
+  );
+};
+var Relation = (props) => {
+  return /* @__PURE__ */ jsx24(ReactFlowProvider, { children: /* @__PURE__ */ jsx24(RelationContent, { ...props }) });
+};
 export {
   AlertProvider,
   Avatar,
@@ -2765,6 +3252,7 @@ export {
   ListGroupItem,
   MarkdownEditor,
   OrphanDialog,
+  Relation,
   RollingBox,
   Select,
   SideBar,