@pactor-app/ui 1.23.0 → 1.24.0

package/dist/{chunk-VTCNWVKQ.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;
@@ -9433,7 +9533,7 @@ function EChartBase({
       chartRef.current = null;
     };
   }, []);
-  useEffect36(() => {
+  useEffect37(() => {
     try {
       chartRef.current?.setOption(option, { notMerge: true });
     } catch {
@@ -10375,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) {
@@ -10408,7 +10508,7 @@ function MapChart2({
     } catch {
     }
   }
-  useEffect37(() => {
+  useEffect38(() => {
     if (geoJson || !geoJsonUrl || hasRegisteredMap(mapName) || fetchedMaps.has(mapName)) {
       setLoadState("idle");
       return;

package/dist/components/index.cjs

@@ -13240,6 +13240,10 @@ function ChatPage({
   conversationTitle,
   conversationHeaderAction,
   onConversationHeaderAction,
+  conversationRailItems = [],
+  hideArtifactRailItem = false,
+  activeConversationRailKey,
+  onConversationRailChange,
   messages = [],
   sending,
   composerPlaceholder,
@@ -13280,6 +13284,51 @@ function ChatPage({
     if (!controlled) setInnerOpen(next);
     onArtifactOpenChange?.(next);
   };
+  const railControlled = activeConversationRailKey !== void 0;
+  const [activeRailInner, setActiveRailInner] = (0, import_react67.useState)(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);
+  };
+  (0, import_react67.useEffect)(() => {
+    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 } = (0, import_runtime26.useRenderer)();
   const renderSlot = (slot) => (0, import_react67.isValidElement)(slot) || typeof slot !== "object" || slot === null ? slot : renderChildren([slot]);
   const convCollControlled = conversationSectionCollapsed !== void 0;
@@ -13311,10 +13360,58 @@ function ChatPage({
       onClick: () => onMenuSelect?.(item.key)
     }
   ) }, item.key);
+  const convRailButton = (item, active, onClick) => {
+    const button = /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+      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__ */ (0, import_jsx_runtime185.jsx)(Tooltip2, { content: item.label, side: "left", children: button }, item.key) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("span", { children: button }, item.key);
+  };
+  const convRailVisible = !hideArtifactRailItem || visibleRailItems.length > 0;
+  const convRail = convRailVisible ? /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
+    "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__ */ (0, import_jsx_runtime185.jsx)(
+          "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__ */ (0, import_jsx_runtime185.jsxs)("div", { "data-slot": "chat-page-conversation", className: "flex h-full min-w-0 flex-1 flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
       "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__ */ (0, import_jsx_runtime185.jsx)(Text, { text: conversationTitle, strong: true }),
@@ -13326,66 +13423,62 @@ function ChatPage({
               variant: "text",
               onClick: () => onConversationHeaderAction?.()
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Tooltip2, { content: open ? "\u6536\u8D77\u4EA7\u7269\u533A" : artifactTitle, side: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-            Button2,
-            {
-              icon: open ? "panel-right-close" : "panel-right-open",
-              variant: "text",
-              onClick: () => setOpen(!open)
-            }
-          ) })
+          ) }) : null
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
-      "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__ */ (0, import_jsx_runtime185.jsx)(
-            Welcome,
-            {
-              title: welcome?.title,
-              description: welcome?.description,
-              prompts: welcome?.prompts,
-              style: { flex: 1 },
-              onSelect: (value) => onSend?.(value)
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-            MessageList,
-            {
-              messages,
-              className: "scrollbar-subtle",
-              style: { flex: 1, minHeight: 0, padding: 16 },
-              onAction: onMessageAction,
-              onOpenArtifacts: () => setOpen(true)
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-            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__ */ (0, import_jsx_runtime185.jsx)("div", { "data-slot": "chat-page-composer-bottom", className: "shrink-0 px-4 pb-2 text-center", children: renderSlot(composerBottom) }) : null
-        ]
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { className: "flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
+        "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__ */ (0, import_jsx_runtime185.jsx)(
+              Welcome,
+              {
+                title: welcome?.title,
+                description: welcome?.description,
+                prompts: welcome?.prompts,
+                style: { flex: 1 },
+                onSelect: (value) => onSend?.(value)
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+              MessageList,
+              {
+                messages,
+                className: "scrollbar-subtle",
+                style: { flex: 1, minHeight: 0, padding: 16 },
+                onAction: onMessageAction,
+                onOpenArtifacts: () => setOpen(true)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+              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__ */ (0, import_jsx_runtime185.jsx)("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__ */ (0, import_jsx_runtime185.jsx)(
@@ -13517,10 +13610,17 @@ function ChatPage({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: "@container h-full min-w-0 flex-1", children: open ? /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(PanelGroup, { orientation: "horizontal", style: { width: "100%", height: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: "@container h-full min-w-0 flex-1", children: open || activePanelItem ? /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(PanelGroup, { orientation: "horizontal", style: { width: "100%", height: "100%" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Panel, { defaultSize: "62%", children: chatArea }),
           /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(ResizableHandle, { withHandle: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Panel, { defaultSize: "38%", minSize: "380px", maxSize: "760px", children: artifactPanel })
+          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Panel, { defaultSize: "38%", minSize: "380px", maxSize: "760px", children: activePanelItem ? /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+            "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 })
       ]
     }

package/dist/components/index.d.cts

@@ -3381,6 +3381,20 @@ interface ChatPageMenuItem {
     /** 图标名（Icon 白名单） */
     icon?: string;
 }
+/** 对话图标栏项：点击 toggle 展示当前对话的附加内容（产物 / 执行步骤等） */
+interface ConversationRailItem {
+    key: string;
+    /** 提示文案（hover tooltip） */
+    label?: string;
+    /** 图标名（Icon 白名单） */
+    icon?: string;
+    /** 呈现形态：popover（图标栏旁悬浮弹框，缺省）/ panel（产物栏式右侧固定宽栏） */
+    display?: 'panel' | 'popover';
+    /** 附加内容（React 元素或 DslNode；缺省时点击仅触发状态事件，不渲染内容层） */
+    content?: DslNode | ReactNode;
+    /** 隐藏该项（如按当前会话有无对应内容动态显隐）；隐藏时激活态一并失效 */
+    hidden?: boolean;
+}
 /** 品牌区（展开菜单区标题 / 版本） */
 interface ChatPageBrand {
     title: string;
@@ -3436,9 +3450,8 @@ interface ChatPageProps {
     /** 对话区头部标题（通常为当前会话标题） */
     conversationTitle?: string;
     /**
-     * 对话区头部右侧自定义操作（图标 + 提示）；提供时替换缺省的产物区
-     * 开关钮，点击经 onConversationHeaderAction 传出（产物区开关可经
-     * 受控 artifactOpen + onArtifactOpenChange 自行接线）
+     * 对话区头部右侧自定义操作（图标 + 提示）；提供才渲染（未配置时
+     * header 不渲染任何按钮），点击经 onConversationHeaderAction 传出
      */
     conversationHeaderAction?: {
         icon?: string;
@@ -3447,6 +3460,17 @@ interface ChatPageProps {
     };
     /** 对话区头部右侧自定义操作点击事件 */
     onConversationHeaderAction?: () => void;
+    /**
+     * 对话图标栏附加项（header 下方、对话区右缘纵向排列，产物内置项
+     * 之后按序展示）；点击 toggle 展示对应附加内容
+     */
+    conversationRailItems?: ConversationRailItem[];
+    /** 隐藏图标栏内置产物入口（缺省 false：产物开关为图标栏首项） */
+    hideArtifactRailItem?: boolean;
+    /** 图标栏激活项 key（提供即受控，配合 onConversationRailChange 闭环；null 为全部收起） */
+    activeConversationRailKey?: string | null;
+    /** 图标栏激活项变化事件，传出 key 或 null */
+    onConversationRailChange?: (key: string | null) => void;
     messages?: MessageListItem[];
     /** 发送中（禁用 Composer 发送钮，由调用方完成后复位） */
     sending?: boolean;
@@ -3526,13 +3550,16 @@ interface ChatPageProps {
  * 行内提及（contexts：输入触发符在光标处弹菜单，选中替换为行内提及块，
  * 退格整体删除；受控 contextItems）、附件
  * 入口（onAttachFiles + 受控 attachments）与 composerFooter /
- * composerBottom 槽位）、最右产物区（ArtifactPanel：内建产物预览、
+ * composerBottom 槽位）、对话图标栏（header 下方、对话区右缘纵向
+ * 图标列：内置产物入口 + conversationRailItems 附加项，点击 toggle
+ * 展示附加内容——popover 悬浮弹框或 panel 右侧分栏，与产物区互斥）、
+ * 最右产物区（ArtifactPanel：内建产物预览、
  * 目录树与下载，可显隐；展示时经 Resizable 拖拽调节与对话区的宽度）。
  * 数据与行为全部经 props / events 进出，
- * 本组件不持有业务状态（产物区开关与分区折叠缺省非受控，均可经
- * 受控 prop + change 事件闭环）。
+ * 本组件不持有业务状态（产物区开关、图标栏激活项与分区折叠缺省非受控，
+ * 均可经受控 prop + change 事件闭环）。
  */
-declare function ChatPage({ brand, menuItems, activeMenuKey, railItems, railFooterItems, menuAction, onMenuSelect, onMenuAction, conversationSectionTitle, conversationSectionCollapsed, defaultConversationSectionCollapsed, onConversationSectionToggle, conversations, activeConversationId, onSelectConversation, onDeleteConversation, moreLabel, onMore, footerSectionTitle, footerItems, footerSectionCollapsed, defaultFooterSectionCollapsed, onFooterSectionToggle, conversationTitle, conversationHeaderAction, onConversationHeaderAction, messages, sending, composerPlaceholder, welcome, onSend, onMessageAction, models, model, onModelChange, contexts, contextItems, onContextItemsChange, attachments, onAttachFiles, onRemoveAttachment, onRetryAttachment, composerFooter, composerBottom, artifactTitle, artifacts, activeArtifactId, onSelectArtifact, artifactEmptyText, safeRegistry, user, artifactViewers, onDownloadArtifact, artifactOpen, defaultArtifactOpen, onArtifactOpenChange, className, style, }: ChatPageProps): React.JSX.Element;
+declare function ChatPage({ brand, menuItems, activeMenuKey, railItems, railFooterItems, menuAction, onMenuSelect, onMenuAction, conversationSectionTitle, conversationSectionCollapsed, defaultConversationSectionCollapsed, onConversationSectionToggle, conversations, activeConversationId, onSelectConversation, onDeleteConversation, moreLabel, onMore, footerSectionTitle, footerItems, footerSectionCollapsed, defaultFooterSectionCollapsed, onFooterSectionToggle, conversationTitle, conversationHeaderAction, onConversationHeaderAction, conversationRailItems, hideArtifactRailItem, activeConversationRailKey, onConversationRailChange, messages, sending, composerPlaceholder, welcome, onSend, onMessageAction, models, model, onModelChange, contexts, contextItems, onContextItemsChange, attachments, onAttachFiles, onRemoveAttachment, onRetryAttachment, composerFooter, composerBottom, artifactTitle, artifacts, activeArtifactId, onSelectArtifact, artifactEmptyText, safeRegistry, user, artifactViewers, onDownloadArtifact, artifactOpen, defaultArtifactOpen, onArtifactOpenChange, className, style, }: ChatPageProps): React.JSX.Element;
 
 /** 引用来源项 */
 interface CitationItem {
@@ -4444,4 +4471,4 @@ interface FormContextValue {
 /** 在字段组件内探测 Form 上下文；不在 Form 内时返回 null */
 declare function useFormContext(): FormContextValue | null;
 
-export { Accordion, type AccordionItemData, type AccordionProps, Affix, type AffixProps, AgentStatus, type AgentStatusProps, type AgentStatusType, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, Anchor, type AnchorItemData, type AnchorProps, AreaChart, type AreaChartProps, ArtifactPanel, type ArtifactPanelProps, type ArtifactTreeNode, type ArtifactViewer, type ArtifactViewers, AspectRatio, type AspectRatioProps, Attachment, type AttachmentItemData, type AttachmentProps, Audio, type AudioProps, Avatar, type AvatarProps, BackTop, type BackTopProps, Badge, type BadgeProps, type BadgeVariant, BarChart, type BarChartProps, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Bubble, BubbleChart, type BubbleChartProps, type BubbleProps, type BubbleVariant, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Carousel, type CarouselImage, type CarouselItemData, type CarouselProps, Cascader, type CascaderOption, type CascaderProps, type ChartSelectPayload, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageActionItem, type ChatMessageAgent, type ChatMessagePart, type ChatMessageProps, type ChatMessageStatus, ChatPage, type ChatPageArtifact, type ChatPageBrand, type ChatPageMenuItem, type ChatPageProps, Checkbox, type CheckboxProps, Citation, type CitationItem, type CitationProps, CodeBlock, type CodeBlockProps, Collapsible, type CollapsibleProps, ColorPicker, type ColorPickerProps, ColumnChart, type ColumnChartProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandGroupData, type CommandItemData, type CommandProps, ComposedChart, type ComposedChartProps, type ComposedSeriesItem, Composer, type ComposerContextItem, type ComposerContextSource, type ComposerModelOption, type ComposerProps, Container, type ContainerProps, type ContainerSize, Content, type ContentProps, ContextMenu, type ContextMenuItemData, type ContextMenuProps, type ConversationItemData, ConversationList, type ConversationListProps, DataTable, type DataTableColumn, type DataTablePagination, type DataTableProps, type DataTableSort, type DataTableSortOrder, DatePicker, type DatePickerPreset, type DatePickerPresetKey, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRangeValue, Descriptions, type DescriptionsItemData, type DescriptionsProps, Dialog, type DialogProps, DiffViewer, type DiffViewerProps, type DocumentPageData, DocumentPreview, type DocumentPreviewProps, DonutChart, type DonutChartProps, Drawer, type DrawerPlacement, type DrawerProps, DropdownMenu, type DropdownMenuItemData, type DropdownMenuProps, EChartBase, type EChartBaseProps, Empty, type EmptyProps, Field, type FieldProps, type FieldRule, FilePreview, type FilePreviewKind, type FilePreviewProps, Flex, type FlexProps, Footer, type FooterProps, Form, type FormContextValue, type FormProps, FunnelChart, type FunnelChartProps, Gallery, type GalleryItemData, type GalleryProps, GaugeChart, type GaugeChartProps, Grid, type GridProps, Header, type HeaderBrandPosition, type HeaderDropdown, type HeaderDropdownItem, type HeaderLocale, type HeaderMenuItem, type HeaderProps, type HeaderTheme, type HeaderUser, type HeaderUserItem, Heatmap, type HeatmapProps, HoverCard, type HoverCardProps, ICONS, Icon, type IconProps, type IconSize, Image, ImageLightbox, type ImageLightboxProps, type ImageProps, ImageViewer, type ImageViewerProps, Input, InputGroup, type InputGroupProps, InputOTP, type InputOTPProps, type InputProps, Item, type ItemProps, JSONViewer, type JSONViewerProps, Kbd, type KbdProps, Label, type LabelProps, Layout, type LayoutProps, LineChart, type LineChartProps, Link, type LinkProps, List, type ListItemData, type ListProps, LoadingOverlay, type LoadingOverlayProps, MapChart, type MapChartProps, type MentionOption, Mentions, type MentionsProps, Menu, type MenuItem, type MenuProps, Menubar, type MenubarLeafItem, type MenubarMenuData, type MenubarProps, Message, MessageList, type MessageListItem, type MessageListProps, type MessageProps, MetricCard, type MetricCardProps, NavigationMenu, type NavigationMenuChildItem, type NavigationMenuItemData, type NavigationMenuProps, Notification, type NotificationProps, NumberInput, type NumberInputProps, Page, type PageProps, Pagination, type PaginationProps, PieChart, type PieChartProps, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, Progress, type ProgressProps, Prompt, type PromptProps, QRCode, type QRCodeProps, RadarChart, type RadarChartProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, RailTooltip, Rate, type RateProps, Resizable, type ResizablePanelData, type ResizableProps, Result, type ResultProps, type ResultStatus, RichText, type RichTextProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, ScrollArea, type ScrollAreaProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sender, type SenderProps, Separator, type SeparatorProps, Sheet, type SheetProps, type SheetSide, Sidebar, type SidebarBrand, type SidebarNavItem, type SidebarProps, Sider, type SiderProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sonner, type SonnerProps, Space, type SpaceProps, Spinner, type SpinnerProps, type SpinnerSize, Statistic, type StatisticProps, Status, type StatusProps, type StatusType, type StepItemData, type StepStatus, Steps, type StepsProps, StreamingText, type StreamingTextProps, Suggestion, type SuggestionItem, type SuggestionProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, Tag, type TagColor, type TagProps, Text, type TextProps, type TextType, Textarea, type TextareaProps, Thinking, type ThinkingProps, type ThinkingStatus, TimePicker, type TimePickerProps, Timeline, type TimelineItemData, type TimelineProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, ToolCall, type ToolCallProps, type ToolCallStatus, Tooltip, type TooltipProps, Tour, type TourProps, type TourStep, Transfer, type TransferOption, type TransferProps, Tree, TreeChart, type TreeChartProps, type TreeNodeData, type TreeProps, TreeSelect, type TreeSelectOption, type TreeSelectProps, Typography, type TypographyProps, type TypographyVariant, Upload, type UploadFileMeta, type UploadProps, Video, type VideoProps, Watermark, type WatermarkProps, Welcome, type WelcomePromptItem, type WelcomeProps, buildArtifactTree, builtinComponents, createComponentRegistry, diffLines, inferKind, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer };
+export { Accordion, type AccordionItemData, type AccordionProps, Affix, type AffixProps, AgentStatus, type AgentStatusProps, type AgentStatusType, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, Anchor, type AnchorItemData, type AnchorProps, AreaChart, type AreaChartProps, ArtifactPanel, type ArtifactPanelProps, type ArtifactTreeNode, type ArtifactViewer, type ArtifactViewers, AspectRatio, type AspectRatioProps, Attachment, type AttachmentItemData, type AttachmentProps, Audio, type AudioProps, Avatar, type AvatarProps, BackTop, type BackTopProps, Badge, type BadgeProps, type BadgeVariant, BarChart, type BarChartProps, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Bubble, BubbleChart, type BubbleChartProps, type BubbleProps, type BubbleVariant, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Carousel, type CarouselImage, type CarouselItemData, type CarouselProps, Cascader, type CascaderOption, type CascaderProps, type ChartSelectPayload, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageActionItem, type ChatMessageAgent, type ChatMessagePart, type ChatMessageProps, type ChatMessageStatus, ChatPage, type ChatPageArtifact, type ChatPageBrand, type ChatPageMenuItem, type ChatPageProps, Checkbox, type CheckboxProps, Citation, type CitationItem, type CitationProps, CodeBlock, type CodeBlockProps, Collapsible, type CollapsibleProps, ColorPicker, type ColorPickerProps, ColumnChart, type ColumnChartProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandGroupData, type CommandItemData, type CommandProps, ComposedChart, type ComposedChartProps, type ComposedSeriesItem, Composer, type ComposerContextItem, type ComposerContextSource, type ComposerModelOption, type ComposerProps, Container, type ContainerProps, type ContainerSize, Content, type ContentProps, ContextMenu, type ContextMenuItemData, type ContextMenuProps, type ConversationItemData, ConversationList, type ConversationListProps, type ConversationRailItem, DataTable, type DataTableColumn, type DataTablePagination, type DataTableProps, type DataTableSort, type DataTableSortOrder, DatePicker, type DatePickerPreset, type DatePickerPresetKey, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRangeValue, Descriptions, type DescriptionsItemData, type DescriptionsProps, Dialog, type DialogProps, DiffViewer, type DiffViewerProps, type DocumentPageData, DocumentPreview, type DocumentPreviewProps, DonutChart, type DonutChartProps, Drawer, type DrawerPlacement, type DrawerProps, DropdownMenu, type DropdownMenuItemData, type DropdownMenuProps, EChartBase, type EChartBaseProps, Empty, type EmptyProps, Field, type FieldProps, type FieldRule, FilePreview, type FilePreviewKind, type FilePreviewProps, Flex, type FlexProps, Footer, type FooterProps, Form, type FormContextValue, type FormProps, FunnelChart, type FunnelChartProps, Gallery, type GalleryItemData, type GalleryProps, GaugeChart, type GaugeChartProps, Grid, type GridProps, Header, type HeaderBrandPosition, type HeaderDropdown, type HeaderDropdownItem, type HeaderLocale, type HeaderMenuItem, type HeaderProps, type HeaderTheme, type HeaderUser, type HeaderUserItem, Heatmap, type HeatmapProps, HoverCard, type HoverCardProps, ICONS, Icon, type IconProps, type IconSize, Image, ImageLightbox, type ImageLightboxProps, type ImageProps, ImageViewer, type ImageViewerProps, Input, InputGroup, type InputGroupProps, InputOTP, type InputOTPProps, type InputProps, Item, type ItemProps, JSONViewer, type JSONViewerProps, Kbd, type KbdProps, Label, type LabelProps, Layout, type LayoutProps, LineChart, type LineChartProps, Link, type LinkProps, List, type ListItemData, type ListProps, LoadingOverlay, type LoadingOverlayProps, MapChart, type MapChartProps, type MentionOption, Mentions, type MentionsProps, Menu, type MenuItem, type MenuProps, Menubar, type MenubarLeafItem, type MenubarMenuData, type MenubarProps, Message, MessageList, type MessageListItem, type MessageListProps, type MessageProps, MetricCard, type MetricCardProps, NavigationMenu, type NavigationMenuChildItem, type NavigationMenuItemData, type NavigationMenuProps, Notification, type NotificationProps, NumberInput, type NumberInputProps, Page, type PageProps, Pagination, type PaginationProps, PieChart, type PieChartProps, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, Progress, type ProgressProps, Prompt, type PromptProps, QRCode, type QRCodeProps, RadarChart, type RadarChartProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, RailTooltip, Rate, type RateProps, Resizable, type ResizablePanelData, type ResizableProps, Result, type ResultProps, type ResultStatus, RichText, type RichTextProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, ScrollArea, type ScrollAreaProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sender, type SenderProps, Separator, type SeparatorProps, Sheet, type SheetProps, type SheetSide, Sidebar, type SidebarBrand, type SidebarNavItem, type SidebarProps, Sider, type SiderProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sonner, type SonnerProps, Space, type SpaceProps, Spinner, type SpinnerProps, type SpinnerSize, Statistic, type StatisticProps, Status, type StatusProps, type StatusType, type StepItemData, type StepStatus, Steps, type StepsProps, StreamingText, type StreamingTextProps, Suggestion, type SuggestionItem, type SuggestionProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, Tag, type TagColor, type TagProps, Text, type TextProps, type TextType, Textarea, type TextareaProps, Thinking, type ThinkingProps, type ThinkingStatus, TimePicker, type TimePickerProps, Timeline, type TimelineItemData, type TimelineProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, ToolCall, type ToolCallProps, type ToolCallStatus, Tooltip, type TooltipProps, Tour, type TourProps, type TourStep, Transfer, type TransferOption, type TransferProps, Tree, TreeChart, type TreeChartProps, type TreeNodeData, type TreeProps, TreeSelect, type TreeSelectOption, type TreeSelectProps, Typography, type TypographyProps, type TypographyVariant, Upload, type UploadFileMeta, type UploadProps, Video, type VideoProps, Watermark, type WatermarkProps, Welcome, type WelcomePromptItem, type WelcomeProps, buildArtifactTree, builtinComponents, createComponentRegistry, diffLines, inferKind, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer };

package/dist/components/index.d.ts

@@ -3381,6 +3381,20 @@ interface ChatPageMenuItem {
     /** 图标名（Icon 白名单） */
     icon?: string;
 }
+/** 对话图标栏项：点击 toggle 展示当前对话的附加内容（产物 / 执行步骤等） */
+interface ConversationRailItem {
+    key: string;
+    /** 提示文案（hover tooltip） */
+    label?: string;
+    /** 图标名（Icon 白名单） */
+    icon?: string;
+    /** 呈现形态：popover（图标栏旁悬浮弹框，缺省）/ panel（产物栏式右侧固定宽栏） */
+    display?: 'panel' | 'popover';
+    /** 附加内容（React 元素或 DslNode；缺省时点击仅触发状态事件，不渲染内容层） */
+    content?: DslNode | ReactNode;
+    /** 隐藏该项（如按当前会话有无对应内容动态显隐）；隐藏时激活态一并失效 */
+    hidden?: boolean;
+}
 /** 品牌区（展开菜单区标题 / 版本） */
 interface ChatPageBrand {
     title: string;
@@ -3436,9 +3450,8 @@ interface ChatPageProps {
     /** 对话区头部标题（通常为当前会话标题） */
     conversationTitle?: string;
     /**
-     * 对话区头部右侧自定义操作（图标 + 提示）；提供时替换缺省的产物区
-     * 开关钮，点击经 onConversationHeaderAction 传出（产物区开关可经
-     * 受控 artifactOpen + onArtifactOpenChange 自行接线）
+     * 对话区头部右侧自定义操作（图标 + 提示）；提供才渲染（未配置时
+     * header 不渲染任何按钮），点击经 onConversationHeaderAction 传出
      */
     conversationHeaderAction?: {
         icon?: string;
@@ -3447,6 +3460,17 @@ interface ChatPageProps {
     };
     /** 对话区头部右侧自定义操作点击事件 */
     onConversationHeaderAction?: () => void;
+    /**
+     * 对话图标栏附加项（header 下方、对话区右缘纵向排列，产物内置项
+     * 之后按序展示）；点击 toggle 展示对应附加内容
+     */
+    conversationRailItems?: ConversationRailItem[];
+    /** 隐藏图标栏内置产物入口（缺省 false：产物开关为图标栏首项） */
+    hideArtifactRailItem?: boolean;
+    /** 图标栏激活项 key（提供即受控，配合 onConversationRailChange 闭环；null 为全部收起） */
+    activeConversationRailKey?: string | null;
+    /** 图标栏激活项变化事件，传出 key 或 null */
+    onConversationRailChange?: (key: string | null) => void;
     messages?: MessageListItem[];
     /** 发送中（禁用 Composer 发送钮，由调用方完成后复位） */
     sending?: boolean;
@@ -3526,13 +3550,16 @@ interface ChatPageProps {
  * 行内提及（contexts：输入触发符在光标处弹菜单，选中替换为行内提及块，
  * 退格整体删除；受控 contextItems）、附件
  * 入口（onAttachFiles + 受控 attachments）与 composerFooter /
- * composerBottom 槽位）、最右产物区（ArtifactPanel：内建产物预览、
+ * composerBottom 槽位）、对话图标栏（header 下方、对话区右缘纵向
+ * 图标列：内置产物入口 + conversationRailItems 附加项，点击 toggle
+ * 展示附加内容——popover 悬浮弹框或 panel 右侧分栏，与产物区互斥）、
+ * 最右产物区（ArtifactPanel：内建产物预览、
  * 目录树与下载，可显隐；展示时经 Resizable 拖拽调节与对话区的宽度）。
  * 数据与行为全部经 props / events 进出，
- * 本组件不持有业务状态（产物区开关与分区折叠缺省非受控，均可经
- * 受控 prop + change 事件闭环）。
+ * 本组件不持有业务状态（产物区开关、图标栏激活项与分区折叠缺省非受控，
+ * 均可经受控 prop + change 事件闭环）。
  */
-declare function ChatPage({ brand, menuItems, activeMenuKey, railItems, railFooterItems, menuAction, onMenuSelect, onMenuAction, conversationSectionTitle, conversationSectionCollapsed, defaultConversationSectionCollapsed, onConversationSectionToggle, conversations, activeConversationId, onSelectConversation, onDeleteConversation, moreLabel, onMore, footerSectionTitle, footerItems, footerSectionCollapsed, defaultFooterSectionCollapsed, onFooterSectionToggle, conversationTitle, conversationHeaderAction, onConversationHeaderAction, messages, sending, composerPlaceholder, welcome, onSend, onMessageAction, models, model, onModelChange, contexts, contextItems, onContextItemsChange, attachments, onAttachFiles, onRemoveAttachment, onRetryAttachment, composerFooter, composerBottom, artifactTitle, artifacts, activeArtifactId, onSelectArtifact, artifactEmptyText, safeRegistry, user, artifactViewers, onDownloadArtifact, artifactOpen, defaultArtifactOpen, onArtifactOpenChange, className, style, }: ChatPageProps): React.JSX.Element;
+declare function ChatPage({ brand, menuItems, activeMenuKey, railItems, railFooterItems, menuAction, onMenuSelect, onMenuAction, conversationSectionTitle, conversationSectionCollapsed, defaultConversationSectionCollapsed, onConversationSectionToggle, conversations, activeConversationId, onSelectConversation, onDeleteConversation, moreLabel, onMore, footerSectionTitle, footerItems, footerSectionCollapsed, defaultFooterSectionCollapsed, onFooterSectionToggle, conversationTitle, conversationHeaderAction, onConversationHeaderAction, conversationRailItems, hideArtifactRailItem, activeConversationRailKey, onConversationRailChange, messages, sending, composerPlaceholder, welcome, onSend, onMessageAction, models, model, onModelChange, contexts, contextItems, onContextItemsChange, attachments, onAttachFiles, onRemoveAttachment, onRetryAttachment, composerFooter, composerBottom, artifactTitle, artifacts, activeArtifactId, onSelectArtifact, artifactEmptyText, safeRegistry, user, artifactViewers, onDownloadArtifact, artifactOpen, defaultArtifactOpen, onArtifactOpenChange, className, style, }: ChatPageProps): React.JSX.Element;
 
 /** 引用来源项 */
 interface CitationItem {
@@ -4444,4 +4471,4 @@ interface FormContextValue {
 /** 在字段组件内探测 Form 上下文；不在 Form 内时返回 null */
 declare function useFormContext(): FormContextValue | null;
 
-export { Accordion, type AccordionItemData, type AccordionProps, Affix, type AffixProps, AgentStatus, type AgentStatusProps, type AgentStatusType, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, Anchor, type AnchorItemData, type AnchorProps, AreaChart, type AreaChartProps, ArtifactPanel, type ArtifactPanelProps, type ArtifactTreeNode, type ArtifactViewer, type ArtifactViewers, AspectRatio, type AspectRatioProps, Attachment, type AttachmentItemData, type AttachmentProps, Audio, type AudioProps, Avatar, type AvatarProps, BackTop, type BackTopProps, Badge, type BadgeProps, type BadgeVariant, BarChart, type BarChartProps, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Bubble, BubbleChart, type BubbleChartProps, type BubbleProps, type BubbleVariant, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Carousel, type CarouselImage, type CarouselItemData, type CarouselProps, Cascader, type CascaderOption, type CascaderProps, type ChartSelectPayload, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageActionItem, type ChatMessageAgent, type ChatMessagePart, type ChatMessageProps, type ChatMessageStatus, ChatPage, type ChatPageArtifact, type ChatPageBrand, type ChatPageMenuItem, type ChatPageProps, Checkbox, type CheckboxProps, Citation, type CitationItem, type CitationProps, CodeBlock, type CodeBlockProps, Collapsible, type CollapsibleProps, ColorPicker, type ColorPickerProps, ColumnChart, type ColumnChartProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandGroupData, type CommandItemData, type CommandProps, ComposedChart, type ComposedChartProps, type ComposedSeriesItem, Composer, type ComposerContextItem, type ComposerContextSource, type ComposerModelOption, type ComposerProps, Container, type ContainerProps, type ContainerSize, Content, type ContentProps, ContextMenu, type ContextMenuItemData, type ContextMenuProps, type ConversationItemData, ConversationList, type ConversationListProps, DataTable, type DataTableColumn, type DataTablePagination, type DataTableProps, type DataTableSort, type DataTableSortOrder, DatePicker, type DatePickerPreset, type DatePickerPresetKey, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRangeValue, Descriptions, type DescriptionsItemData, type DescriptionsProps, Dialog, type DialogProps, DiffViewer, type DiffViewerProps, type DocumentPageData, DocumentPreview, type DocumentPreviewProps, DonutChart, type DonutChartProps, Drawer, type DrawerPlacement, type DrawerProps, DropdownMenu, type DropdownMenuItemData, type DropdownMenuProps, EChartBase, type EChartBaseProps, Empty, type EmptyProps, Field, type FieldProps, type FieldRule, FilePreview, type FilePreviewKind, type FilePreviewProps, Flex, type FlexProps, Footer, type FooterProps, Form, type FormContextValue, type FormProps, FunnelChart, type FunnelChartProps, Gallery, type GalleryItemData, type GalleryProps, GaugeChart, type GaugeChartProps, Grid, type GridProps, Header, type HeaderBrandPosition, type HeaderDropdown, type HeaderDropdownItem, type HeaderLocale, type HeaderMenuItem, type HeaderProps, type HeaderTheme, type HeaderUser, type HeaderUserItem, Heatmap, type HeatmapProps, HoverCard, type HoverCardProps, ICONS, Icon, type IconProps, type IconSize, Image, ImageLightbox, type ImageLightboxProps, type ImageProps, ImageViewer, type ImageViewerProps, Input, InputGroup, type InputGroupProps, InputOTP, type InputOTPProps, type InputProps, Item, type ItemProps, JSONViewer, type JSONViewerProps, Kbd, type KbdProps, Label, type LabelProps, Layout, type LayoutProps, LineChart, type LineChartProps, Link, type LinkProps, List, type ListItemData, type ListProps, LoadingOverlay, type LoadingOverlayProps, MapChart, type MapChartProps, type MentionOption, Mentions, type MentionsProps, Menu, type MenuItem, type MenuProps, Menubar, type MenubarLeafItem, type MenubarMenuData, type MenubarProps, Message, MessageList, type MessageListItem, type MessageListProps, type MessageProps, MetricCard, type MetricCardProps, NavigationMenu, type NavigationMenuChildItem, type NavigationMenuItemData, type NavigationMenuProps, Notification, type NotificationProps, NumberInput, type NumberInputProps, Page, type PageProps, Pagination, type PaginationProps, PieChart, type PieChartProps, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, Progress, type ProgressProps, Prompt, type PromptProps, QRCode, type QRCodeProps, RadarChart, type RadarChartProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, RailTooltip, Rate, type RateProps, Resizable, type ResizablePanelData, type ResizableProps, Result, type ResultProps, type ResultStatus, RichText, type RichTextProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, ScrollArea, type ScrollAreaProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sender, type SenderProps, Separator, type SeparatorProps, Sheet, type SheetProps, type SheetSide, Sidebar, type SidebarBrand, type SidebarNavItem, type SidebarProps, Sider, type SiderProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sonner, type SonnerProps, Space, type SpaceProps, Spinner, type SpinnerProps, type SpinnerSize, Statistic, type StatisticProps, Status, type StatusProps, type StatusType, type StepItemData, type StepStatus, Steps, type StepsProps, StreamingText, type StreamingTextProps, Suggestion, type SuggestionItem, type SuggestionProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, Tag, type TagColor, type TagProps, Text, type TextProps, type TextType, Textarea, type TextareaProps, Thinking, type ThinkingProps, type ThinkingStatus, TimePicker, type TimePickerProps, Timeline, type TimelineItemData, type TimelineProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, ToolCall, type ToolCallProps, type ToolCallStatus, Tooltip, type TooltipProps, Tour, type TourProps, type TourStep, Transfer, type TransferOption, type TransferProps, Tree, TreeChart, type TreeChartProps, type TreeNodeData, type TreeProps, TreeSelect, type TreeSelectOption, type TreeSelectProps, Typography, type TypographyProps, type TypographyVariant, Upload, type UploadFileMeta, type UploadProps, Video, type VideoProps, Watermark, type WatermarkProps, Welcome, type WelcomePromptItem, type WelcomeProps, buildArtifactTree, builtinComponents, createComponentRegistry, diffLines, inferKind, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer };
+export { Accordion, type AccordionItemData, type AccordionProps, Affix, type AffixProps, AgentStatus, type AgentStatusProps, type AgentStatusType, Alert, AlertDialog, type AlertDialogProps, type AlertProps, type AlertVariant, Anchor, type AnchorItemData, type AnchorProps, AreaChart, type AreaChartProps, ArtifactPanel, type ArtifactPanelProps, type ArtifactTreeNode, type ArtifactViewer, type ArtifactViewers, AspectRatio, type AspectRatioProps, Attachment, type AttachmentItemData, type AttachmentProps, Audio, type AudioProps, Avatar, type AvatarProps, BackTop, type BackTopProps, Badge, type BadgeProps, type BadgeVariant, BarChart, type BarChartProps, Breadcrumb, type BreadcrumbItemData, type BreadcrumbProps, Bubble, BubbleChart, type BubbleChartProps, type BubbleProps, type BubbleVariant, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardProps, Carousel, type CarouselImage, type CarouselItemData, type CarouselProps, Cascader, type CascaderOption, type CascaderProps, type ChartSelectPayload, ChatInput, type ChatInputProps, ChatMessage, type ChatMessageActionItem, type ChatMessageAgent, type ChatMessagePart, type ChatMessageProps, type ChatMessageStatus, ChatPage, type ChatPageArtifact, type ChatPageBrand, type ChatPageMenuItem, type ChatPageProps, Checkbox, type CheckboxProps, Citation, type CitationItem, type CitationProps, CodeBlock, type CodeBlockProps, Collapsible, type CollapsibleProps, ColorPicker, type ColorPickerProps, ColumnChart, type ColumnChartProps, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandGroupData, type CommandItemData, type CommandProps, ComposedChart, type ComposedChartProps, type ComposedSeriesItem, Composer, type ComposerContextItem, type ComposerContextSource, type ComposerModelOption, type ComposerProps, Container, type ContainerProps, type ContainerSize, Content, type ContentProps, ContextMenu, type ContextMenuItemData, type ContextMenuProps, type ConversationItemData, ConversationList, type ConversationListProps, type ConversationRailItem, DataTable, type DataTableColumn, type DataTablePagination, type DataTableProps, type DataTableSort, type DataTableSortOrder, DatePicker, type DatePickerPreset, type DatePickerPresetKey, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DateRangeValue, Descriptions, type DescriptionsItemData, type DescriptionsProps, Dialog, type DialogProps, DiffViewer, type DiffViewerProps, type DocumentPageData, DocumentPreview, type DocumentPreviewProps, DonutChart, type DonutChartProps, Drawer, type DrawerPlacement, type DrawerProps, DropdownMenu, type DropdownMenuItemData, type DropdownMenuProps, EChartBase, type EChartBaseProps, Empty, type EmptyProps, Field, type FieldProps, type FieldRule, FilePreview, type FilePreviewKind, type FilePreviewProps, Flex, type FlexProps, Footer, type FooterProps, Form, type FormContextValue, type FormProps, FunnelChart, type FunnelChartProps, Gallery, type GalleryItemData, type GalleryProps, GaugeChart, type GaugeChartProps, Grid, type GridProps, Header, type HeaderBrandPosition, type HeaderDropdown, type HeaderDropdownItem, type HeaderLocale, type HeaderMenuItem, type HeaderProps, type HeaderTheme, type HeaderUser, type HeaderUserItem, Heatmap, type HeatmapProps, HoverCard, type HoverCardProps, ICONS, Icon, type IconProps, type IconSize, Image, ImageLightbox, type ImageLightboxProps, type ImageProps, ImageViewer, type ImageViewerProps, Input, InputGroup, type InputGroupProps, InputOTP, type InputOTPProps, type InputProps, Item, type ItemProps, JSONViewer, type JSONViewerProps, Kbd, type KbdProps, Label, type LabelProps, Layout, type LayoutProps, LineChart, type LineChartProps, Link, type LinkProps, List, type ListItemData, type ListProps, LoadingOverlay, type LoadingOverlayProps, MapChart, type MapChartProps, type MentionOption, Mentions, type MentionsProps, Menu, type MenuItem, type MenuProps, Menubar, type MenubarLeafItem, type MenubarMenuData, type MenubarProps, Message, MessageList, type MessageListItem, type MessageListProps, type MessageProps, MetricCard, type MetricCardProps, NavigationMenu, type NavigationMenuChildItem, type NavigationMenuItemData, type NavigationMenuProps, Notification, type NotificationProps, NumberInput, type NumberInputProps, Page, type PageProps, Pagination, type PaginationProps, PieChart, type PieChartProps, Popconfirm, type PopconfirmProps, Popover, type PopoverProps, Progress, type ProgressProps, Prompt, type PromptProps, QRCode, type QRCodeProps, RadarChart, type RadarChartProps, RadioGroup, type RadioGroupOption, type RadioGroupProps, RailTooltip, Rate, type RateProps, Resizable, type ResizablePanelData, type ResizableProps, Result, type ResultProps, type ResultStatus, RichText, type RichTextProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, ScrollArea, type ScrollAreaProps, Segmented, type SegmentedOption, type SegmentedProps, Select, type SelectOption, type SelectProps, Sender, type SenderProps, Separator, type SeparatorProps, Sheet, type SheetProps, type SheetSide, Sidebar, type SidebarBrand, type SidebarNavItem, type SidebarProps, Sider, type SiderProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sonner, type SonnerProps, Space, type SpaceProps, Spinner, type SpinnerProps, type SpinnerSize, Statistic, type StatisticProps, Status, type StatusProps, type StatusType, type StepItemData, type StepStatus, Steps, type StepsProps, StreamingText, type StreamingTextProps, Suggestion, type SuggestionItem, type SuggestionProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TablePagination, type TablePaginationInfo, type TableProps, Tabs, type TabsProps, Tag, type TagColor, type TagProps, Text, type TextProps, type TextType, Textarea, type TextareaProps, Thinking, type ThinkingProps, type ThinkingStatus, TimePicker, type TimePickerProps, Timeline, type TimelineItemData, type TimelineProps, Toggle, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleProps, ToolCall, type ToolCallProps, type ToolCallStatus, Tooltip, type TooltipProps, Tour, type TourProps, type TourStep, Transfer, type TransferOption, type TransferProps, Tree, TreeChart, type TreeChartProps, type TreeNodeData, type TreeProps, TreeSelect, type TreeSelectOption, type TreeSelectProps, Typography, type TypographyProps, type TypographyVariant, Upload, type UploadFileMeta, type UploadProps, Video, type VideoProps, Watermark, type WatermarkProps, Welcome, type WelcomePromptItem, type WelcomeProps, buildArtifactTree, builtinComponents, createComponentRegistry, diffLines, inferKind, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer };

package/dist/components/index.js

@@ -151,7 +151,7 @@ import {
   inferKind,
   registerBuiltinComponents,
   useFormContext
-} from "../chunk-VTCNWVKQ.js";
+} from "../chunk-WYRFTFYQ.js";
 import {
   ICONS,
   Icon,

package/dist/index.cjs

@@ -13279,6 +13279,10 @@ function ChatPage({
   conversationTitle,
   conversationHeaderAction,
   onConversationHeaderAction,
+  conversationRailItems = [],
+  hideArtifactRailItem = false,
+  activeConversationRailKey,
+  onConversationRailChange,
   messages = [],
   sending,
   composerPlaceholder,
@@ -13319,6 +13323,51 @@ function ChatPage({
     if (!controlled) setInnerOpen(next);
     onArtifactOpenChange?.(next);
   };
+  const railControlled = activeConversationRailKey !== void 0;
+  const [activeRailInner, setActiveRailInner] = (0, import_react67.useState)(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);
+  };
+  (0, import_react67.useEffect)(() => {
+    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 } = (0, import_runtime26.useRenderer)();
   const renderSlot = (slot) => (0, import_react67.isValidElement)(slot) || typeof slot !== "object" || slot === null ? slot : renderChildren([slot]);
   const convCollControlled = conversationSectionCollapsed !== void 0;
@@ -13350,10 +13399,58 @@ function ChatPage({
       onClick: () => onMenuSelect?.(item.key)
     }
   ) }, item.key);
+  const convRailButton = (item, active, onClick) => {
+    const button = /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+      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__ */ (0, import_jsx_runtime185.jsx)(Tooltip2, { content: item.label, side: "left", children: button }, item.key) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("span", { children: button }, item.key);
+  };
+  const convRailVisible = !hideArtifactRailItem || visibleRailItems.length > 0;
+  const convRail = convRailVisible ? /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
+    "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__ */ (0, import_jsx_runtime185.jsx)(
+          "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__ */ (0, import_jsx_runtime185.jsxs)("div", { "data-slot": "chat-page-conversation", className: "flex h-full min-w-0 flex-1 flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
       "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__ */ (0, import_jsx_runtime185.jsx)(Text, { text: conversationTitle, strong: true }),
@@ -13365,66 +13462,62 @@ function ChatPage({
               variant: "text",
               onClick: () => onConversationHeaderAction?.()
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Tooltip2, { content: open ? "\u6536\u8D77\u4EA7\u7269\u533A" : artifactTitle, side: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-            Button2,
-            {
-              icon: open ? "panel-right-close" : "panel-right-open",
-              variant: "text",
-              onClick: () => setOpen(!open)
-            }
-          ) })
+          ) }) : null
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
-      "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__ */ (0, import_jsx_runtime185.jsx)(
-            Welcome,
-            {
-              title: welcome?.title,
-              description: welcome?.description,
-              prompts: welcome?.prompts,
-              style: { flex: 1 },
-              onSelect: (value) => onSend?.(value)
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-            MessageList,
-            {
-              messages,
-              className: "scrollbar-subtle",
-              style: { flex: 1, minHeight: 0, padding: 16 },
-              onAction: onMessageAction,
-              onOpenArtifacts: () => setOpen(true)
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-            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__ */ (0, import_jsx_runtime185.jsx)("div", { "data-slot": "chat-page-composer-bottom", className: "shrink-0 px-4 pb-2 text-center", children: renderSlot(composerBottom) }) : null
-        ]
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { className: "flex min-h-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
+        "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__ */ (0, import_jsx_runtime185.jsx)(
+              Welcome,
+              {
+                title: welcome?.title,
+                description: welcome?.description,
+                prompts: welcome?.prompts,
+                style: { flex: 1 },
+                onSelect: (value) => onSend?.(value)
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+              MessageList,
+              {
+                messages,
+                className: "scrollbar-subtle",
+                style: { flex: 1, minHeight: 0, padding: 16 },
+                onAction: onMessageAction,
+                onOpenArtifacts: () => setOpen(true)
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+              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__ */ (0, import_jsx_runtime185.jsx)("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__ */ (0, import_jsx_runtime185.jsx)(
@@ -13556,10 +13649,17 @@ function ChatPage({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: "@container h-full min-w-0 flex-1", children: open ? /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(PanelGroup, { orientation: "horizontal", style: { width: "100%", height: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("div", { className: "@container h-full min-w-0 flex-1", children: open || activePanelItem ? /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(PanelGroup, { orientation: "horizontal", style: { width: "100%", height: "100%" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Panel, { defaultSize: "62%", children: chatArea }),
           /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(ResizableHandle, { withHandle: true }),
-          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Panel, { defaultSize: "38%", minSize: "380px", maxSize: "760px", children: artifactPanel })
+          /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(Panel, { defaultSize: "38%", minSize: "380px", maxSize: "760px", children: activePanelItem ? /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+            "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 })
       ]
     }

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-export { Accordion, AccordionItemData, AccordionProps, Affix, AffixProps, AgentStatus, AgentStatusProps, AgentStatusType, Alert, AlertDialog, AlertDialogProps, AlertProps, AlertVariant, Anchor, AnchorItemData, AnchorProps, AreaChart, AreaChartProps, ArtifactPanel, ArtifactPanelProps, ArtifactTreeNode, ArtifactViewer, ArtifactViewers, AspectRatio, AspectRatioProps, Attachment, AttachmentItemData, AttachmentProps, Audio, AudioProps, Avatar, AvatarProps, BackTop, BackTopProps, Badge, BadgeProps, BadgeVariant, BarChart, BarChartProps, Breadcrumb, BreadcrumbItemData, BreadcrumbProps, Bubble, BubbleChart, BubbleChartProps, BubbleProps, BubbleVariant, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, Calendar, CalendarProps, Card, CardProps, Carousel, CarouselImage, CarouselItemData, CarouselProps, Cascader, CascaderOption, CascaderProps, ChartSelectPayload, ChatInput, ChatInputProps, ChatMessage, ChatMessageActionItem, ChatMessageAgent, ChatMessagePart, ChatMessageProps, ChatMessageStatus, ChatPage, ChatPageArtifact, ChatPageBrand, ChatPageMenuItem, ChatPageProps, Checkbox, CheckboxProps, Citation, CitationItem, CitationProps, CodeBlock, CodeBlockProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerProps, ColumnChart, ColumnChartProps, Combobox, ComboboxOption, ComboboxProps, Command, CommandGroupData, CommandItemData, CommandProps, ComposedChart, ComposedChartProps, ComposedSeriesItem, Composer, ComposerContextItem, ComposerContextSource, ComposerModelOption, ComposerProps, Container, ContainerProps, ContainerSize, Content, ContentProps, ContextMenu, ContextMenuItemData, ContextMenuProps, ConversationItemData, ConversationList, ConversationListProps, DataTable, DataTableColumn, DataTablePagination, DataTableProps, DataTableSort, DataTableSortOrder, DatePicker, DatePickerPreset, DatePickerPresetKey, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, DateRangeValue, Descriptions, DescriptionsItemData, DescriptionsProps, Dialog, DialogProps, DiffViewer, DiffViewerProps, DocumentPageData, DocumentPreview, DocumentPreviewProps, DonutChart, DonutChartProps, Drawer, DrawerPlacement, DrawerProps, DropdownMenu, DropdownMenuItemData, DropdownMenuProps, EChartBase, EChartBaseProps, Empty, EmptyProps, Field, FieldProps, FieldRule, FilePreview, FilePreviewKind, FilePreviewProps, Flex, FlexProps, Footer, FooterProps, Form, FormContextValue, FormProps, FunnelChart, FunnelChartProps, Gallery, GalleryItemData, GalleryProps, GaugeChart, GaugeChartProps, Grid, GridProps, Header, HeaderBrandPosition, HeaderDropdown, HeaderDropdownItem, HeaderLocale, HeaderMenuItem, HeaderProps, HeaderTheme, HeaderUser, HeaderUserItem, Heatmap, HeatmapProps, HoverCard, HoverCardProps, ICONS, Icon, IconProps, IconSize, Image, ImageLightbox, ImageLightboxProps, ImageProps, ImageViewer, ImageViewerProps, Input, InputGroup, InputGroupProps, InputOTP, InputOTPProps, InputProps, Item, ItemProps, JSONViewer, JSONViewerProps, Kbd, KbdProps, Label, LabelProps, Layout, LayoutProps, LineChart, LineChartProps, Link, LinkProps, List, ListItemData, ListProps, LoadingOverlay, LoadingOverlayProps, MapChart, MapChartProps, MentionOption, Mentions, MentionsProps, Menu, MenuItem, MenuProps, Menubar, MenubarLeafItem, MenubarMenuData, MenubarProps, Message, MessageList, MessageListItem, MessageListProps, MessageProps, MetricCard, MetricCardProps, NavigationMenu, NavigationMenuChildItem, NavigationMenuItemData, NavigationMenuProps, Notification, NotificationProps, NumberInput, NumberInputProps, Page, PageProps, Pagination, PaginationProps, PieChart, PieChartProps, Popconfirm, PopconfirmProps, Popover, PopoverProps, Progress, ProgressProps, Prompt, PromptProps, QRCode, QRCodeProps, RadarChart, RadarChartProps, RadioGroup, RadioGroupOption, RadioGroupProps, RailTooltip, Rate, RateProps, Resizable, ResizablePanelData, ResizableProps, Result, ResultProps, ResultStatus, RichText, RichTextProps, SankeyChart, SankeyChartProps, ScatterChart, ScatterChartProps, ScrollArea, ScrollAreaProps, Segmented, SegmentedOption, SegmentedProps, Select, SelectOption, SelectProps, Sender, SenderProps, Separator, SeparatorProps, Sheet, SheetProps, SheetSide, Sidebar, SidebarBrand, SidebarNavItem, SidebarProps, Sider, SiderProps, Skeleton, SkeletonProps, SkeletonShape, Slider, SliderProps, Sonner, SonnerProps, Space, SpaceProps, Spinner, SpinnerProps, SpinnerSize, Statistic, StatisticProps, Status, StatusProps, StatusType, StepItemData, StepStatus, Steps, StepsProps, StreamingText, StreamingTextProps, Suggestion, SuggestionItem, SuggestionProps, Switch, SwitchProps, TabItem, Table, TableColumn, TablePagination, TablePaginationInfo, TableProps, Tabs, TabsProps, Tag, TagColor, TagProps, Text, TextProps, TextType, Textarea, TextareaProps, Thinking, ThinkingProps, ThinkingStatus, TimePicker, TimePickerProps, Timeline, TimelineItemData, TimelineProps, Toggle, ToggleGroup, ToggleGroupOption, ToggleGroupProps, ToggleProps, ToolCall, ToolCallProps, ToolCallStatus, Tooltip, TooltipProps, Tour, TourProps, TourStep, Transfer, TransferOption, TransferProps, Tree, TreeChart, TreeChartProps, TreeNodeData, TreeProps, TreeSelect, TreeSelectOption, TreeSelectProps, Typography, TypographyProps, TypographyVariant, Upload, UploadFileMeta, UploadProps, Video, VideoProps, Watermark, WatermarkProps, Welcome, WelcomePromptItem, WelcomeProps, buildArtifactTree, builtinComponents, createComponentRegistry, diffLines, inferKind, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer } from './components/index.cjs';
+export { Accordion, AccordionItemData, AccordionProps, Affix, AffixProps, AgentStatus, AgentStatusProps, AgentStatusType, Alert, AlertDialog, AlertDialogProps, AlertProps, AlertVariant, Anchor, AnchorItemData, AnchorProps, AreaChart, AreaChartProps, ArtifactPanel, ArtifactPanelProps, ArtifactTreeNode, ArtifactViewer, ArtifactViewers, AspectRatio, AspectRatioProps, Attachment, AttachmentItemData, AttachmentProps, Audio, AudioProps, Avatar, AvatarProps, BackTop, BackTopProps, Badge, BadgeProps, BadgeVariant, BarChart, BarChartProps, Breadcrumb, BreadcrumbItemData, BreadcrumbProps, Bubble, BubbleChart, BubbleChartProps, BubbleProps, BubbleVariant, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, Calendar, CalendarProps, Card, CardProps, Carousel, CarouselImage, CarouselItemData, CarouselProps, Cascader, CascaderOption, CascaderProps, ChartSelectPayload, ChatInput, ChatInputProps, ChatMessage, ChatMessageActionItem, ChatMessageAgent, ChatMessagePart, ChatMessageProps, ChatMessageStatus, ChatPage, ChatPageArtifact, ChatPageBrand, ChatPageMenuItem, ChatPageProps, Checkbox, CheckboxProps, Citation, CitationItem, CitationProps, CodeBlock, CodeBlockProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerProps, ColumnChart, ColumnChartProps, Combobox, ComboboxOption, ComboboxProps, Command, CommandGroupData, CommandItemData, CommandProps, ComposedChart, ComposedChartProps, ComposedSeriesItem, Composer, ComposerContextItem, ComposerContextSource, ComposerModelOption, ComposerProps, Container, ContainerProps, ContainerSize, Content, ContentProps, ContextMenu, ContextMenuItemData, ContextMenuProps, ConversationItemData, ConversationList, ConversationListProps, ConversationRailItem, DataTable, DataTableColumn, DataTablePagination, DataTableProps, DataTableSort, DataTableSortOrder, DatePicker, DatePickerPreset, DatePickerPresetKey, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, DateRangeValue, Descriptions, DescriptionsItemData, DescriptionsProps, Dialog, DialogProps, DiffViewer, DiffViewerProps, DocumentPageData, DocumentPreview, DocumentPreviewProps, DonutChart, DonutChartProps, Drawer, DrawerPlacement, DrawerProps, DropdownMenu, DropdownMenuItemData, DropdownMenuProps, EChartBase, EChartBaseProps, Empty, EmptyProps, Field, FieldProps, FieldRule, FilePreview, FilePreviewKind, FilePreviewProps, Flex, FlexProps, Footer, FooterProps, Form, FormContextValue, FormProps, FunnelChart, FunnelChartProps, Gallery, GalleryItemData, GalleryProps, GaugeChart, GaugeChartProps, Grid, GridProps, Header, HeaderBrandPosition, HeaderDropdown, HeaderDropdownItem, HeaderLocale, HeaderMenuItem, HeaderProps, HeaderTheme, HeaderUser, HeaderUserItem, Heatmap, HeatmapProps, HoverCard, HoverCardProps, ICONS, Icon, IconProps, IconSize, Image, ImageLightbox, ImageLightboxProps, ImageProps, ImageViewer, ImageViewerProps, Input, InputGroup, InputGroupProps, InputOTP, InputOTPProps, InputProps, Item, ItemProps, JSONViewer, JSONViewerProps, Kbd, KbdProps, Label, LabelProps, Layout, LayoutProps, LineChart, LineChartProps, Link, LinkProps, List, ListItemData, ListProps, LoadingOverlay, LoadingOverlayProps, MapChart, MapChartProps, MentionOption, Mentions, MentionsProps, Menu, MenuItem, MenuProps, Menubar, MenubarLeafItem, MenubarMenuData, MenubarProps, Message, MessageList, MessageListItem, MessageListProps, MessageProps, MetricCard, MetricCardProps, NavigationMenu, NavigationMenuChildItem, NavigationMenuItemData, NavigationMenuProps, Notification, NotificationProps, NumberInput, NumberInputProps, Page, PageProps, Pagination, PaginationProps, PieChart, PieChartProps, Popconfirm, PopconfirmProps, Popover, PopoverProps, Progress, ProgressProps, Prompt, PromptProps, QRCode, QRCodeProps, RadarChart, RadarChartProps, RadioGroup, RadioGroupOption, RadioGroupProps, RailTooltip, Rate, RateProps, Resizable, ResizablePanelData, ResizableProps, Result, ResultProps, ResultStatus, RichText, RichTextProps, SankeyChart, SankeyChartProps, ScatterChart, ScatterChartProps, ScrollArea, ScrollAreaProps, Segmented, SegmentedOption, SegmentedProps, Select, SelectOption, SelectProps, Sender, SenderProps, Separator, SeparatorProps, Sheet, SheetProps, SheetSide, Sidebar, SidebarBrand, SidebarNavItem, SidebarProps, Sider, SiderProps, Skeleton, SkeletonProps, SkeletonShape, Slider, SliderProps, Sonner, SonnerProps, Space, SpaceProps, Spinner, SpinnerProps, SpinnerSize, Statistic, StatisticProps, Status, StatusProps, StatusType, StepItemData, StepStatus, Steps, StepsProps, StreamingText, StreamingTextProps, Suggestion, SuggestionItem, SuggestionProps, Switch, SwitchProps, TabItem, Table, TableColumn, TablePagination, TablePaginationInfo, TableProps, Tabs, TabsProps, Tag, TagColor, TagProps, Text, TextProps, TextType, Textarea, TextareaProps, Thinking, ThinkingProps, ThinkingStatus, TimePicker, TimePickerProps, Timeline, TimelineItemData, TimelineProps, Toggle, ToggleGroup, ToggleGroupOption, ToggleGroupProps, ToggleProps, ToolCall, ToolCallProps, ToolCallStatus, Tooltip, TooltipProps, Tour, TourProps, TourStep, Transfer, TransferOption, TransferProps, Tree, TreeChart, TreeChartProps, TreeNodeData, TreeProps, TreeSelect, TreeSelectOption, TreeSelectProps, Typography, TypographyProps, TypographyVariant, Upload, UploadFileMeta, UploadProps, Video, VideoProps, Watermark, WatermarkProps, Welcome, WelcomePromptItem, WelcomeProps, buildArtifactTree, builtinComponents, createComponentRegistry, diffLines, inferKind, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer } from './components/index.cjs';
 export { MarkdownDslComponent as Markdown, MarkdownDslComponentProps as MarkdownProps } from '@pactor-app/markdown';
 export { AdminBrand, AdminLayout, AdminLayoutBreakpoint, AdminLayoutConfig, AdminLayoutMode, AdminLayoutProps, BlankLayout, BlankLayoutProps, ChatLayout, ChatLayoutBrand, ChatLayoutMenuItem, ChatLayoutProps, LandingLayout, LandingLayoutProps, LayoutComponent, LayoutRegistry, LoginBrand, LoginLayout, LoginLayoutProps, collectDefaultOpenKeys, createLayoutRegistry, findMenuChain, registerBuiltinLayouts, resolveLayout } from './layout/index.cjs';
 export { InteractionProvider, InteractionProviderProps, OVERLAY_CANCEL_PAYLOAD, OverlayConfig, OverlayEntry, OverlayHost, OverlayHostProps, OverlayListener, OverlayManager, ResolvePageFn, UiBridge, UiMessage, UiModal, createUiBridge, registerInteractionActions } from './interaction/index.cjs';

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AccordionItemData, AccordionProps, Affix, AffixProps, AgentStatus, AgentStatusProps, AgentStatusType, Alert, AlertDialog, AlertDialogProps, AlertProps, AlertVariant, Anchor, AnchorItemData, AnchorProps, AreaChart, AreaChartProps, ArtifactPanel, ArtifactPanelProps, ArtifactTreeNode, ArtifactViewer, ArtifactViewers, AspectRatio, AspectRatioProps, Attachment, AttachmentItemData, AttachmentProps, Audio, AudioProps, Avatar, AvatarProps, BackTop, BackTopProps, Badge, BadgeProps, BadgeVariant, BarChart, BarChartProps, Breadcrumb, BreadcrumbItemData, BreadcrumbProps, Bubble, BubbleChart, BubbleChartProps, BubbleProps, BubbleVariant, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, Calendar, CalendarProps, Card, CardProps, Carousel, CarouselImage, CarouselItemData, CarouselProps, Cascader, CascaderOption, CascaderProps, ChartSelectPayload, ChatInput, ChatInputProps, ChatMessage, ChatMessageActionItem, ChatMessageAgent, ChatMessagePart, ChatMessageProps, ChatMessageStatus, ChatPage, ChatPageArtifact, ChatPageBrand, ChatPageMenuItem, ChatPageProps, Checkbox, CheckboxProps, Citation, CitationItem, CitationProps, CodeBlock, CodeBlockProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerProps, ColumnChart, ColumnChartProps, Combobox, ComboboxOption, ComboboxProps, Command, CommandGroupData, CommandItemData, CommandProps, ComposedChart, ComposedChartProps, ComposedSeriesItem, Composer, ComposerContextItem, ComposerContextSource, ComposerModelOption, ComposerProps, Container, ContainerProps, ContainerSize, Content, ContentProps, ContextMenu, ContextMenuItemData, ContextMenuProps, ConversationItemData, ConversationList, ConversationListProps, DataTable, DataTableColumn, DataTablePagination, DataTableProps, DataTableSort, DataTableSortOrder, DatePicker, DatePickerPreset, DatePickerPresetKey, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, DateRangeValue, Descriptions, DescriptionsItemData, DescriptionsProps, Dialog, DialogProps, DiffViewer, DiffViewerProps, DocumentPageData, DocumentPreview, DocumentPreviewProps, DonutChart, DonutChartProps, Drawer, DrawerPlacement, DrawerProps, DropdownMenu, DropdownMenuItemData, DropdownMenuProps, EChartBase, EChartBaseProps, Empty, EmptyProps, Field, FieldProps, FieldRule, FilePreview, FilePreviewKind, FilePreviewProps, Flex, FlexProps, Footer, FooterProps, Form, FormContextValue, FormProps, FunnelChart, FunnelChartProps, Gallery, GalleryItemData, GalleryProps, GaugeChart, GaugeChartProps, Grid, GridProps, Header, HeaderBrandPosition, HeaderDropdown, HeaderDropdownItem, HeaderLocale, HeaderMenuItem, HeaderProps, HeaderTheme, HeaderUser, HeaderUserItem, Heatmap, HeatmapProps, HoverCard, HoverCardProps, ICONS, Icon, IconProps, IconSize, Image, ImageLightbox, ImageLightboxProps, ImageProps, ImageViewer, ImageViewerProps, Input, InputGroup, InputGroupProps, InputOTP, InputOTPProps, InputProps, Item, ItemProps, JSONViewer, JSONViewerProps, Kbd, KbdProps, Label, LabelProps, Layout, LayoutProps, LineChart, LineChartProps, Link, LinkProps, List, ListItemData, ListProps, LoadingOverlay, LoadingOverlayProps, MapChart, MapChartProps, MentionOption, Mentions, MentionsProps, Menu, MenuItem, MenuProps, Menubar, MenubarLeafItem, MenubarMenuData, MenubarProps, Message, MessageList, MessageListItem, MessageListProps, MessageProps, MetricCard, MetricCardProps, NavigationMenu, NavigationMenuChildItem, NavigationMenuItemData, NavigationMenuProps, Notification, NotificationProps, NumberInput, NumberInputProps, Page, PageProps, Pagination, PaginationProps, PieChart, PieChartProps, Popconfirm, PopconfirmProps, Popover, PopoverProps, Progress, ProgressProps, Prompt, PromptProps, QRCode, QRCodeProps, RadarChart, RadarChartProps, RadioGroup, RadioGroupOption, RadioGroupProps, RailTooltip, Rate, RateProps, Resizable, ResizablePanelData, ResizableProps, Result, ResultProps, ResultStatus, RichText, RichTextProps, SankeyChart, SankeyChartProps, ScatterChart, ScatterChartProps, ScrollArea, ScrollAreaProps, Segmented, SegmentedOption, SegmentedProps, Select, SelectOption, SelectProps, Sender, SenderProps, Separator, SeparatorProps, Sheet, SheetProps, SheetSide, Sidebar, SidebarBrand, SidebarNavItem, SidebarProps, Sider, SiderProps, Skeleton, SkeletonProps, SkeletonShape, Slider, SliderProps, Sonner, SonnerProps, Space, SpaceProps, Spinner, SpinnerProps, SpinnerSize, Statistic, StatisticProps, Status, StatusProps, StatusType, StepItemData, StepStatus, Steps, StepsProps, StreamingText, StreamingTextProps, Suggestion, SuggestionItem, SuggestionProps, Switch, SwitchProps, TabItem, Table, TableColumn, TablePagination, TablePaginationInfo, TableProps, Tabs, TabsProps, Tag, TagColor, TagProps, Text, TextProps, TextType, Textarea, TextareaProps, Thinking, ThinkingProps, ThinkingStatus, TimePicker, TimePickerProps, Timeline, TimelineItemData, TimelineProps, Toggle, ToggleGroup, ToggleGroupOption, ToggleGroupProps, ToggleProps, ToolCall, ToolCallProps, ToolCallStatus, Tooltip, TooltipProps, Tour, TourProps, TourStep, Transfer, TransferOption, TransferProps, Tree, TreeChart, TreeChartProps, TreeNodeData, TreeProps, TreeSelect, TreeSelectOption, TreeSelectProps, Typography, TypographyProps, TypographyVariant, Upload, UploadFileMeta, UploadProps, Video, VideoProps, Watermark, WatermarkProps, Welcome, WelcomePromptItem, WelcomeProps, buildArtifactTree, builtinComponents, createComponentRegistry, diffLines, inferKind, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer } from './components/index.js';
+export { Accordion, AccordionItemData, AccordionProps, Affix, AffixProps, AgentStatus, AgentStatusProps, AgentStatusType, Alert, AlertDialog, AlertDialogProps, AlertProps, AlertVariant, Anchor, AnchorItemData, AnchorProps, AreaChart, AreaChartProps, ArtifactPanel, ArtifactPanelProps, ArtifactTreeNode, ArtifactViewer, ArtifactViewers, AspectRatio, AspectRatioProps, Attachment, AttachmentItemData, AttachmentProps, Audio, AudioProps, Avatar, AvatarProps, BackTop, BackTopProps, Badge, BadgeProps, BadgeVariant, BarChart, BarChartProps, Breadcrumb, BreadcrumbItemData, BreadcrumbProps, Bubble, BubbleChart, BubbleChartProps, BubbleProps, BubbleVariant, Button, ButtonGroup, ButtonGroupProps, ButtonProps, ButtonSize, ButtonVariant, Calendar, CalendarProps, Card, CardProps, Carousel, CarouselImage, CarouselItemData, CarouselProps, Cascader, CascaderOption, CascaderProps, ChartSelectPayload, ChatInput, ChatInputProps, ChatMessage, ChatMessageActionItem, ChatMessageAgent, ChatMessagePart, ChatMessageProps, ChatMessageStatus, ChatPage, ChatPageArtifact, ChatPageBrand, ChatPageMenuItem, ChatPageProps, Checkbox, CheckboxProps, Citation, CitationItem, CitationProps, CodeBlock, CodeBlockProps, Collapsible, CollapsibleProps, ColorPicker, ColorPickerProps, ColumnChart, ColumnChartProps, Combobox, ComboboxOption, ComboboxProps, Command, CommandGroupData, CommandItemData, CommandProps, ComposedChart, ComposedChartProps, ComposedSeriesItem, Composer, ComposerContextItem, ComposerContextSource, ComposerModelOption, ComposerProps, Container, ContainerProps, ContainerSize, Content, ContentProps, ContextMenu, ContextMenuItemData, ContextMenuProps, ConversationItemData, ConversationList, ConversationListProps, ConversationRailItem, DataTable, DataTableColumn, DataTablePagination, DataTableProps, DataTableSort, DataTableSortOrder, DatePicker, DatePickerPreset, DatePickerPresetKey, DatePickerProps, DatePickerRangeProps, DatePickerSingleProps, DateRangeValue, Descriptions, DescriptionsItemData, DescriptionsProps, Dialog, DialogProps, DiffViewer, DiffViewerProps, DocumentPageData, DocumentPreview, DocumentPreviewProps, DonutChart, DonutChartProps, Drawer, DrawerPlacement, DrawerProps, DropdownMenu, DropdownMenuItemData, DropdownMenuProps, EChartBase, EChartBaseProps, Empty, EmptyProps, Field, FieldProps, FieldRule, FilePreview, FilePreviewKind, FilePreviewProps, Flex, FlexProps, Footer, FooterProps, Form, FormContextValue, FormProps, FunnelChart, FunnelChartProps, Gallery, GalleryItemData, GalleryProps, GaugeChart, GaugeChartProps, Grid, GridProps, Header, HeaderBrandPosition, HeaderDropdown, HeaderDropdownItem, HeaderLocale, HeaderMenuItem, HeaderProps, HeaderTheme, HeaderUser, HeaderUserItem, Heatmap, HeatmapProps, HoverCard, HoverCardProps, ICONS, Icon, IconProps, IconSize, Image, ImageLightbox, ImageLightboxProps, ImageProps, ImageViewer, ImageViewerProps, Input, InputGroup, InputGroupProps, InputOTP, InputOTPProps, InputProps, Item, ItemProps, JSONViewer, JSONViewerProps, Kbd, KbdProps, Label, LabelProps, Layout, LayoutProps, LineChart, LineChartProps, Link, LinkProps, List, ListItemData, ListProps, LoadingOverlay, LoadingOverlayProps, MapChart, MapChartProps, MentionOption, Mentions, MentionsProps, Menu, MenuItem, MenuProps, Menubar, MenubarLeafItem, MenubarMenuData, MenubarProps, Message, MessageList, MessageListItem, MessageListProps, MessageProps, MetricCard, MetricCardProps, NavigationMenu, NavigationMenuChildItem, NavigationMenuItemData, NavigationMenuProps, Notification, NotificationProps, NumberInput, NumberInputProps, Page, PageProps, Pagination, PaginationProps, PieChart, PieChartProps, Popconfirm, PopconfirmProps, Popover, PopoverProps, Progress, ProgressProps, Prompt, PromptProps, QRCode, QRCodeProps, RadarChart, RadarChartProps, RadioGroup, RadioGroupOption, RadioGroupProps, RailTooltip, Rate, RateProps, Resizable, ResizablePanelData, ResizableProps, Result, ResultProps, ResultStatus, RichText, RichTextProps, SankeyChart, SankeyChartProps, ScatterChart, ScatterChartProps, ScrollArea, ScrollAreaProps, Segmented, SegmentedOption, SegmentedProps, Select, SelectOption, SelectProps, Sender, SenderProps, Separator, SeparatorProps, Sheet, SheetProps, SheetSide, Sidebar, SidebarBrand, SidebarNavItem, SidebarProps, Sider, SiderProps, Skeleton, SkeletonProps, SkeletonShape, Slider, SliderProps, Sonner, SonnerProps, Space, SpaceProps, Spinner, SpinnerProps, SpinnerSize, Statistic, StatisticProps, Status, StatusProps, StatusType, StepItemData, StepStatus, Steps, StepsProps, StreamingText, StreamingTextProps, Suggestion, SuggestionItem, SuggestionProps, Switch, SwitchProps, TabItem, Table, TableColumn, TablePagination, TablePaginationInfo, TableProps, Tabs, TabsProps, Tag, TagColor, TagProps, Text, TextProps, TextType, Textarea, TextareaProps, Thinking, ThinkingProps, ThinkingStatus, TimePicker, TimePickerProps, Timeline, TimelineItemData, TimelineProps, Toggle, ToggleGroup, ToggleGroupOption, ToggleGroupProps, ToggleProps, ToolCall, ToolCallProps, ToolCallStatus, Tooltip, TooltipProps, Tour, TourProps, TourStep, Transfer, TransferOption, TransferProps, Tree, TreeChart, TreeChartProps, TreeNodeData, TreeProps, TreeSelect, TreeSelectOption, TreeSelectProps, Typography, TypographyProps, TypographyVariant, Upload, UploadFileMeta, UploadProps, Video, VideoProps, Watermark, WatermarkProps, Welcome, WelcomePromptItem, WelcomeProps, buildArtifactTree, builtinComponents, createComponentRegistry, diffLines, inferKind, normalizeIconName, registerBuiltinComponents, useFormContext, useSidebarDrawer } from './components/index.js';
 export { MarkdownDslComponent as Markdown, MarkdownDslComponentProps as MarkdownProps } from '@pactor-app/markdown';
 export { AdminBrand, AdminLayout, AdminLayoutBreakpoint, AdminLayoutConfig, AdminLayoutMode, AdminLayoutProps, BlankLayout, BlankLayoutProps, ChatLayout, ChatLayoutBrand, ChatLayoutMenuItem, ChatLayoutProps, LandingLayout, LandingLayoutProps, LayoutComponent, LayoutRegistry, LoginBrand, LoginLayout, LoginLayoutProps, collectDefaultOpenKeys, createLayoutRegistry, findMenuChain, registerBuiltinLayouts, resolveLayout } from './layout/index.js';
 export { InteractionProvider, InteractionProviderProps, OVERLAY_CANCEL_PAYLOAD, OverlayConfig, OverlayEntry, OverlayHost, OverlayHostProps, OverlayListener, OverlayManager, ResolvePageFn, UiBridge, UiMessage, UiModal, createUiBridge, registerInteractionActions } from './interaction/index.js';

package/dist/index.js

@@ -151,7 +151,7 @@ import {
   inferKind,
   registerBuiltinComponents,
   useFormContext
-} from "./chunk-VTCNWVKQ.js";
+} from "./chunk-WYRFTFYQ.js";
 import {
   InteractionProvider,
   OVERLAY_CANCEL_PAYLOAD,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pactor-app/ui",
-  "version": "1.23.0",
+  "version": "1.24.0",
   "description": "Pactor UI kit (shadcn): the single built-in UI kit — vendored shadcn/ui components (Base UI primitives + cva + tailwind-merge + lucide-react), props contracts, interaction core (OverlayManager / UiBridge) and layouts, with build-time Tailwind v4 prebuilt styles.css (zero consumer-side Tailwind config)",
   "keywords": [
     "pactor",
@@ -107,11 +107,11 @@
     "react-resizable-panels": "^4.12.3",
     "tailwind-merge": "^3.6.0",
     "vaul": "^1.1.2",
-    "@pactor-app/core": "1.23.0",
-    "@pactor-app/markdown": "1.23.0",
-    "@pactor-app/permission": "1.23.0",
-    "@pactor-app/runtime": "1.23.0",
-    "@pactor-app/router": "1.23.0"
+    "@pactor-app/core": "1.24.0",
+    "@pactor-app/markdown": "1.24.0",
+    "@pactor-app/router": "1.24.0",
+    "@pactor-app/permission": "1.24.0",
+    "@pactor-app/runtime": "1.24.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/styles.css

@@ -315,6 +315,9 @@
   .right-10 {
     right: calc(var(--spacing) * 10);
   }
+  .right-full {
+    right: 100%;
+  }
   .-bottom-12 {
     bottom: calc(var(--spacing) * -12);
   }
@@ -477,6 +480,9 @@
   .-mr-0\.5 {
     margin-right: calc(var(--spacing) * -0.5);
   }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
   .mb-1 {
     margin-bottom: var(--spacing);
   }
@@ -807,6 +813,9 @@
   .w-\(--anchor-width\) {
     width: var(--anchor-width);
   }
+  .w-\(--pactor-chat-rail-width\) {
+    width: var(--pactor-chat-rail-width);
+  }
   .w-\(--sidebar-width\) {
     width: var(--sidebar-width);
   }
@@ -1899,6 +1908,9 @@
   .text-\(--menu-active-foreground\) {
     color: var(--menu-active-foreground);
   }
+  .text-accent-foreground {
+    color: var(--accent-foreground);
+  }
   .text-card-foreground {
     color: var(--card-foreground);
   }
@@ -3984,6 +3996,8 @@
   --flex-gap-md: calc(var(--flex-gap) * 1.33);
   --flex-gap-lg: calc(var(--flex-gap) * 2);
   --grid-gap: 16px;
+  --pactor-chat-rail-width: 40px;
+  --pactor-chat-rail-popover-width: 320px;
 }
 [data-pactor-theme='dark'] {
   color-scheme: dark;