@pactor-app/ui 1.22.0 → 1.24.0

package/dist/{chunk-EDUMGNT6.js → chunk-WYRFTFYQ.js}

@@ -8146,7 +8146,7 @@ function ChatMessage({
 
 // src/components/chat/ChatPage/index.tsx
 import { useRenderer as useRenderer18 } from "@pactor-app/runtime";
-import { isValidElement as isValidElement2, useState as useState44 } from "react";
+import { isValidElement as isValidElement2, useEffect as useEffect36, useState as useState44 } from "react";
 
 // src/components/chat/Composer/index.tsx
 import {
@@ -8984,6 +8984,10 @@ function ChatPage({
   conversationTitle,
   conversationHeaderAction,
   onConversationHeaderAction,
+  conversationRailItems = [],
+  hideArtifactRailItem = false,
+  activeConversationRailKey,
+  onConversationRailChange,
   messages = [],
   sending,
   composerPlaceholder,
@@ -9024,6 +9028,51 @@ function ChatPage({
     if (!controlled) setInnerOpen(next);
     onArtifactOpenChange?.(next);
   };
+  const railControlled = activeConversationRailKey !== void 0;
+  const [activeRailInner, setActiveRailInner] = useState44(null);
+  const activeRailKey = railControlled ? activeConversationRailKey : activeRailInner;
+  const setActiveRailKey = (next) => {
+    if (!railControlled) setActiveRailInner(next);
+    onConversationRailChange?.(next);
+  };
+  const visibleRailItems = conversationRailItems.filter((item) => item.hidden !== true);
+  const activeRailItem = visibleRailItems.find(
+    (item) => item.key === activeRailKey
+  );
+  const activePanelItem = activeRailItem?.display === "panel" && activeRailItem.content !== void 0 ? activeRailItem : void 0;
+  const activePopoverItem = activeRailItem !== void 0 && activeRailItem.display !== "panel" && activeRailItem.content !== void 0 ? activeRailItem : void 0;
+  const toggleRailItem = (item) => {
+    const next = activeRailKey === item.key ? null : item.key;
+    if (next !== null && item.display === "panel") {
+      setOpen(false);
+    }
+    setActiveRailKey(next);
+  };
+  const toggleArtifact = () => {
+    if (!open && activePanelItem) {
+      setActiveRailKey(null);
+    }
+    setOpen(!open);
+  };
+  useEffect36(() => {
+    if (!activePopoverItem) return;
+    const onKeyDown = (event) => {
+      if (event.key === "Escape") setActiveRailKey(null);
+    };
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (target.closest("[data-slot=chat-page-rail-popover]") || target.closest("[data-slot=chat-page-conv-rail]")) {
+        return;
+      }
+      setActiveRailKey(null);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    document.addEventListener("mousedown", onPointerDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.removeEventListener("mousedown", onPointerDown);
+    };
+  });
   const { renderChildren } = useRenderer18();
   const renderSlot = (slot) => isValidElement2(slot) || typeof slot !== "object" || slot === null ? slot : renderChildren([slot]);
   const convCollControlled = conversationSectionCollapsed !== void 0;
@@ -9055,10 +9104,58 @@ function ChatPage({
       onClick: () => onMenuSelect?.(item.key)
     }
   ) }, item.key);
+  const convRailButton = (item, active, onClick) => {
+    const button = /* @__PURE__ */ jsx127(
+      Button2,
+      {
+        icon: item.icon,
+        variant: "text",
+        className: cn(active ? "bg-accent text-accent-foreground" : void 0, "px-2"),
+        onClick
+      }
+    );
+    return item.label !== void 0 ? /* @__PURE__ */ jsx127(Tooltip2, { content: item.label, side: "left", children: button }, item.key) : /* @__PURE__ */ jsx127("span", { children: button }, item.key);
+  };
+  const convRailVisible = !hideArtifactRailItem || visibleRailItems.length > 0;
+  const convRail = convRailVisible ? /* @__PURE__ */ jsxs90(
+    "div",
+    {
+      "data-slot": "chat-page-conv-rail",
+      className: "relative flex w-(--pactor-chat-rail-width) shrink-0 flex-col items-center gap-1 px-1 py-2",
+      children: [
+        !hideArtifactRailItem ? convRailButton(
+          {
+            key: "artifact",
+            icon: open ? "panel-right-close" : "package",
+            label: open ? "\u6536\u8D77\u4EA7\u7269\u533A" : artifactTitle
+          },
+          open,
+          toggleArtifact
+        ) : null,
+        visibleRailItems.map(
+          (item) => convRailButton(item, activeRailKey === item.key, () => toggleRailItem(item))
+        ),
+        activePopoverItem ? /* @__PURE__ */ jsx127(
+          "div",
+          {
+            "data-slot": "chat-page-rail-popover",
+            className: "absolute right-full top-0 z-10 mr-2 overflow-auto rounded-lg border border-border bg-popover shadow-md",
+            style: {
+              width: "var(--pactor-chat-rail-popover-width)",
+              maxWidth: "calc(100cqw - 2rem)",
+              maxHeight: "calc(100% - 1rem)"
+            },
+            children: renderSlot(activePopoverItem.content)
+          }
+        ) : null
+      ]
+    }
+  ) : null;
   const chatArea = /* @__PURE__ */ jsxs90("div", { "data-slot": "chat-page-conversation", className: "flex h-full min-w-0 flex-1 flex-col", children: [
     /* @__PURE__ */ jsxs90(
       "div",
       {
+        "data-slot": "chat-page-conversation-header",
         className: "flex shrink-0 items-center justify-between border-b border-border px-4 py-2.5",
         children: [
           /* @__PURE__ */ jsx127(Text, { text: conversationTitle, strong: true }),
@@ -9070,66 +9167,62 @@ function ChatPage({
               variant: "text",
               onClick: () => onConversationHeaderAction?.()
             }
-          ) }) : /* @__PURE__ */ jsx127(Tooltip2, { content: open ? "\u6536\u8D77\u4EA7\u7269\u533A" : artifactTitle, side: "bottom", children: /* @__PURE__ */ jsx127(
-            Button2,
-            {
-              icon: open ? "panel-right-close" : "panel-right-open",
-              variant: "text",
-              onClick: () => setOpen(!open)
-            }
-          ) })
+          ) }) : null
         ]
       }
     ),
-    /* @__PURE__ */ jsxs90(
-      "div",
-      {
-        "data-slot": "chat-page-conversation-body",
-        className: "mx-auto flex min-h-0 w-[61.8cqw] max-w-full flex-1 flex-col",
-        children: [
-          messages.length === 0 ? /* @__PURE__ */ jsx127(
-            Welcome,
-            {
-              title: welcome?.title,
-              description: welcome?.description,
-              prompts: welcome?.prompts,
-              style: { flex: 1 },
-              onSelect: (value) => onSend?.(value)
-            }
-          ) : /* @__PURE__ */ jsx127(
-            MessageList,
-            {
-              messages,
-              className: "scrollbar-subtle",
-              style: { flex: 1, minHeight: 0, padding: 16 },
-              onAction: onMessageAction,
-              onOpenArtifacts: () => setOpen(true)
-            }
-          ),
-          /* @__PURE__ */ jsx127(
-            Composer,
-            {
-              placeholder: composerPlaceholder,
-              loading: sending,
-              models,
-              model,
-              contexts,
-              contextItems,
-              attachments,
-              footer: composerFooter,
-              style: { padding: 16, paddingBottom: composerBottom ? 8 : 16, flexShrink: 0 },
-              onModelChange,
-              onContextItemsChange,
-              onAttachFiles,
-              onRemoveAttachment,
-              onRetryAttachment,
-              onSubmit: (text) => onSend?.(text)
-            }
-          ),
-          composerBottom ? /* @__PURE__ */ jsx127("div", { "data-slot": "chat-page-composer-bottom", className: "shrink-0 px-4 pb-2 text-center", children: renderSlot(composerBottom) }) : null
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxs90("div", { className: "flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ jsxs90(
+        "div",
+        {
+          "data-slot": "chat-page-conversation-body",
+          className: "mx-auto flex min-h-0 w-[61.8cqw] max-w-full flex-col",
+          children: [
+            messages.length === 0 ? /* @__PURE__ */ jsx127(
+              Welcome,
+              {
+                title: welcome?.title,
+                description: welcome?.description,
+                prompts: welcome?.prompts,
+                style: { flex: 1 },
+                onSelect: (value) => onSend?.(value)
+              }
+            ) : /* @__PURE__ */ jsx127(
+              MessageList,
+              {
+                messages,
+                className: "scrollbar-subtle",
+                style: { flex: 1, minHeight: 0, padding: 16 },
+                onAction: onMessageAction,
+                onOpenArtifacts: () => setOpen(true)
+              }
+            ),
+            /* @__PURE__ */ jsx127(
+              Composer,
+              {
+                placeholder: composerPlaceholder,
+                loading: sending,
+                models,
+                model,
+                contexts,
+                contextItems,
+                attachments,
+                footer: composerFooter,
+                style: { padding: 16, paddingBottom: composerBottom ? 8 : 16, flexShrink: 0 },
+                onModelChange,
+                onContextItemsChange,
+                onAttachFiles,
+                onRemoveAttachment,
+                onRetryAttachment,
+                onSubmit: (text) => onSend?.(text)
+              }
+            ),
+            composerBottom ? /* @__PURE__ */ jsx127("div", { "data-slot": "chat-page-composer-bottom", className: "shrink-0 px-4 pb-2 text-center", children: renderSlot(composerBottom) }) : null
+          ]
+        }
+      ),
+      convRail
+    ] })
   ] });
   const activeArtifact = artifacts.find((item) => item.id === activeArtifactId) ?? (activeArtifactId === void 0 || activeArtifactId === "" ? artifacts[artifacts.length - 1] : void 0);
   const artifactPanel = /* @__PURE__ */ jsx127(
@@ -9261,10 +9354,17 @@ function ChatPage({
             ]
           }
         ),
-        /* @__PURE__ */ jsx127("div", { className: "@container h-full min-w-0 flex-1", children: open ? /* @__PURE__ */ jsxs90(PanelGroup, { orientation: "horizontal", style: { width: "100%", height: "100%" }, children: [
+        /* @__PURE__ */ jsx127("div", { className: "@container h-full min-w-0 flex-1", children: open || activePanelItem ? /* @__PURE__ */ jsxs90(PanelGroup, { orientation: "horizontal", style: { width: "100%", height: "100%" }, children: [
           /* @__PURE__ */ jsx127(Panel, { defaultSize: "62%", children: chatArea }),
           /* @__PURE__ */ jsx127(ResizableHandle, { withHandle: true }),
-          /* @__PURE__ */ jsx127(Panel, { defaultSize: "38%", minSize: "380px", maxSize: "760px", children: artifactPanel })
+          /* @__PURE__ */ jsx127(Panel, { defaultSize: "38%", minSize: "380px", maxSize: "760px", children: activePanelItem ? /* @__PURE__ */ jsx127(
+            "div",
+            {
+              "data-slot": "chat-page-rail-panel",
+              className: "flex h-full min-w-0 flex-col border-l border-border bg-muted",
+              children: renderSlot(activePanelItem.content)
+            }
+          ) : artifactPanel })
         ] }) : chatArea })
       ]
     }
@@ -9340,7 +9440,7 @@ function Suggestion({ items = [], justify = "start", onSelect, className, style
 }
 
 // src/components/chart/EChartBase/index.tsx
-import { useEffect as useEffect36, useRef as useRef11, useState as useState45 } from "react";
+import { useEffect as useEffect37, useRef as useRef11, useState as useState45 } from "react";
 
 // src/components/chart/echarts-modules.ts
 import * as echarts from "echarts/core";
@@ -9406,7 +9506,7 @@ function EChartBase({
   const onSelectRef = useRef11(onSelect);
   onSelectRef.current = onSelect;
   const [failed, setFailed] = useState45(false);
-  useEffect36(() => {
+  useEffect37(() => {
     const host = hostRef.current;
     if (!host) return;
     let chart = null;
@@ -9425,15 +9525,15 @@ function EChartBase({
         dataIndex: params.dataIndex
       });
     });
-    const observer = new ResizeObserver(() => chart?.resize());
-    observer.observe(host);
+    const observer2 = new ResizeObserver(() => chart?.resize());
+    observer2.observe(host);
     return () => {
-      observer.disconnect();
+      observer2.disconnect();
       chart?.dispose();
       chartRef.current = null;
     };
   }, []);
-  useEffect36(() => {
+  useEffect37(() => {
     try {
       chartRef.current?.setOption(option, { notMerge: true });
     } catch {
@@ -9889,6 +9989,9 @@ function buildComposedOption(input, theme) {
   };
 }
 
+// src/components/chart/lib/use-chart-theme.ts
+import { useSyncExternalStore } from "react";
+
 // src/components/chart/lib/color.ts
 var LPAREN = String.fromCharCode(40);
 var RPAREN = String.fromCharCode(41);
@@ -9985,6 +10088,64 @@ function getChartTheme() {
     return FALLBACK_THEME;
   }
 }
+function resetChartTheme() {
+  cached = null;
+}
+var CHART_SKIN_CHANGE_EVENT = "pactor:skin-change";
+var listeners = /* @__PURE__ */ new Set();
+var observer = null;
+var scheduled = false;
+function scheduleNotify() {
+  if (scheduled) return;
+  scheduled = true;
+  const enqueue = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => setTimeout(cb, 0);
+  enqueue(() => {
+    scheduled = false;
+    resetChartTheme();
+    for (const listener of [...listeners]) {
+      listener();
+    }
+  });
+}
+function handleResourceLoad(event) {
+  const target = event.target;
+  if (target instanceof HTMLLinkElement || target instanceof HTMLStyleElement) {
+    scheduleNotify();
+  }
+}
+function subscribeChartTheme(listener) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return () => {
+    };
+  }
+  listeners.add(listener);
+  if (!observer) {
+    observer = new MutationObserver(scheduleNotify);
+    observer.observe(document.documentElement, { attributes: true });
+    observer.observe(document.head, {
+      attributes: true,
+      childList: true,
+      characterData: true,
+      subtree: true
+    });
+    document.addEventListener("load", handleResourceLoad, true);
+    window.addEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && observer) {
+      observer.disconnect();
+      observer = null;
+      document.removeEventListener("load", handleResourceLoad, true);
+      window.removeEventListener(CHART_SKIN_CHANGE_EVENT, scheduleNotify);
+    }
+  };
+}
+
+// src/components/chart/lib/use-chart-theme.ts
+function useChartTheme() {
+  return useSyncExternalStore(subscribeChartTheme, getChartTheme, getChartTheme);
+}
 
 // src/components/chart/AreaChart/index.tsx
 import { jsx as jsx131 } from "react/jsx-runtime";
@@ -10003,7 +10164,7 @@ function AreaChart({
 }) {
   const option = buildAreaOption(
     { data, xKey, yKeys, stacked, fillOpacity, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx131(
     EChartBase,
@@ -10034,7 +10195,7 @@ function BarChart2({
 }) {
   const option = buildBarOption(
     { data, yKey, yKeys: xKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx132(
     EChartBase,
@@ -10066,7 +10227,7 @@ function BubbleChart({
 }) {
   const option = buildBubbleOption(
     { data, xKey, yKey, sizeKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx133(
     EChartBase,
@@ -10097,7 +10258,7 @@ function ColumnChart({
 }) {
   const option = buildColumnOption(
     { data, xKey, yKeys, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx134(
     EChartBase,
@@ -10127,7 +10288,7 @@ function ComposedChart({
 }) {
   const option = buildComposedOption(
     { data, xKey, series, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx135(
     EChartBase,
@@ -10173,7 +10334,7 @@ function DonutChart({
       colors,
       title
     },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx136(
     EChartBase,
@@ -10204,7 +10365,7 @@ function FunnelChart2({
 }) {
   const option = buildFunnelOption(
     { data, nameKey, valueKey, sort, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx137(
     EChartBase,
@@ -10235,7 +10396,7 @@ function GaugeChart2({
 }) {
   const option = buildGaugeOption(
     { value, min, max, thresholds, unit, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx138(
     EChartBase,
@@ -10265,7 +10426,7 @@ function Heatmap({
 }) {
   const option = buildHeatmapOption(
     { data, xKey, yKey, valueKey, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx139(
     EChartBase,
@@ -10298,7 +10459,7 @@ function LineChart2({
 }) {
   const option = buildLineOption(
     { data, xKey, yKeys, smooth, showArea, stacked, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx140(
     EChartBase,
@@ -10314,7 +10475,7 @@ function LineChart2({
 }
 
 // src/components/chart/MapChart/index.tsx
-import { useEffect as useEffect37, useState as useState46 } from "react";
+import { useEffect as useEffect38, useState as useState46 } from "react";
 import { jsx as jsx141 } from "react/jsx-runtime";
 var fetchedMaps = /* @__PURE__ */ new Set();
 function hasRegisteredMap(mapName) {
@@ -10337,6 +10498,7 @@ function MapChart2({
   className,
   style
 }) {
+  const theme = useChartTheme();
   const [loadState, setLoadState] = useState46(
     () => geoJson || !geoJsonUrl || hasRegisteredMap(mapName) ? "idle" : "loading"
   );
@@ -10346,7 +10508,7 @@ function MapChart2({
     } catch {
     }
   }
-  useEffect37(() => {
+  useEffect38(() => {
     if (geoJson || !geoJsonUrl || hasRegisteredMap(mapName) || fetchedMaps.has(mapName)) {
       setLoadState("idle");
       return;
@@ -10403,7 +10565,7 @@ function MapChart2({
       }
     );
   }
-  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, getChartTheme());
+  const option = buildMapOption({ mapName, data, nameKey, valueKey, title }, theme);
   return /* @__PURE__ */ jsx141(
     EChartBase,
     {
@@ -10490,7 +10652,7 @@ function PieChart2({
 }) {
   const option = buildPieOption(
     { data, nameKey, valueKey, showLabel, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx143(
     EChartBase,
@@ -10520,7 +10682,7 @@ function RadarChart2({
 }) {
   const option = buildRadarOption(
     { data, indicatorKey, yKeys, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx144(
     EChartBase,
@@ -10546,7 +10708,7 @@ function SankeyChart2({
   className,
   style
 }) {
-  const option = buildSankeyOption({ nodes, links, title }, getChartTheme());
+  const option = buildSankeyOption({ nodes, links, title }, useChartTheme());
   return /* @__PURE__ */ jsx145(
     EChartBase,
     {
@@ -10576,7 +10738,7 @@ function ScatterChart2({
 }) {
   const option = buildScatterOption(
     { data, xKey, yKey, seriesKey, colors, title },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx146(
     EChartBase,
@@ -10606,7 +10768,7 @@ function TreeChart2({
 }) {
   const option = buildTreeOption(
     { data, title, orient, edgeShape, initialTreeDepth },
-    getChartTheme()
+    useChartTheme()
   );
   return /* @__PURE__ */ jsx147(
     EChartBase,