@pactor-app/chat 1.15.6 → 1.16.0

package/dist/index.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ARTIFACT_IMAGE_EXTENSIONS: () => ARTIFACT_IMAGE_EXTENSIONS,
   ActivityTrace: () => ActivityTrace,
   AppShell: () => AppShell,
   ArtifactPanel: () => ArtifactPanel,
@@ -43,7 +44,10 @@ __export(index_exports, {
   MessageBubble: () => MessageBubble,
   PartRenderer: () => PartRenderer,
   applyChatEvent: () => applyChatEvent,
+  buildArtifactBlob: () => buildArtifactBlob,
+  buildArtifactTree: () => buildArtifactTree,
   buildChatScope: () => buildChatScope,
+  collectArtifacts: () => collectArtifacts,
   collectMessageText: () => collectMessageText,
   createChatComponentRegistry: () => createChatComponentRegistry,
   createChatId: () => createChatId,
@@ -52,14 +56,20 @@ __export(index_exports, {
   createManualDriver: () => createManualDriver,
   createSafeRegistry: () => createSafeRegistry,
   detectStreamingMode: () => detectStreamingMode,
+  downloadArtifact: () => downloadArtifact,
   guardChatDsl: () => guardChatDsl,
+  isImageArtifact: () => isImageArtifact,
+  mergeArtifacts: () => mergeArtifacts,
   pairToolTraces: () => pairToolTraces,
   registerCapabilityAction: () => registerCapabilityAction,
   registerChatComponent: () => registerChatComponent,
   registerChatLayout: () => registerChatLayout,
   registerChatShellComponent: () => registerChatShellComponent,
+  resolveArtifactFileType: () => resolveArtifactFileType,
+  resolveArtifactFilename: () => resolveArtifactFilename,
   runChatTurn: () => runChatTurn,
   runRegenerateTurn: () => runRegenerateTurn,
+  saveBlob: () => saveBlob,
   useChatAutoScroll: () => useChatAutoScroll,
   useChatServices: () => useChatServices,
   useSidebarDrawer: () => useSidebarDrawer,
@@ -187,35 +197,113 @@ var ConversationStore = class {
 };
 
 // src/artifact.ts
+var ARTIFACT_IMAGE_EXTENSIONS = [
+  "png",
+  "jpg",
+  "jpeg",
+  "gif",
+  "svg",
+  "webp",
+  "avif",
+  "bmp",
+  "ico"
+];
+function resolveArtifactFileType(artifact) {
+  const declared = artifact.fileType?.trim().toLowerCase().replace(/^\./, "");
+  if (declared) {
+    return declared;
+  }
+  const match = /\.([A-Za-z0-9]+)$/.exec(artifact.title.trim());
+  return match ? match[1].toLowerCase() : null;
+}
+function isImageArtifact(artifact) {
+  const ext = resolveArtifactFileType(artifact);
+  return ext !== null && ARTIFACT_IMAGE_EXTENSIONS.includes(ext);
+}
+function collectArtifacts(messages) {
+  const order = [];
+  const byId = /* @__PURE__ */ new Map();
+  for (const message of messages) {
+    for (const part of message.parts) {
+      if (part.type !== "artifact" || !part.artifact) {
+        continue;
+      }
+      if (part.status !== void 0 && part.status !== "ready") {
+        continue;
+      }
+      if (!byId.has(part.artifact.id)) {
+        order.push(part.artifact.id);
+      }
+      byId.set(part.artifact.id, part.artifact);
+    }
+  }
+  return order.map((id) => byId.get(id));
+}
+function mergeArtifacts(stream, opened) {
+  const openedById = new Map(opened.map((item) => [item.id, item]));
+  const merged = stream.map((item) => openedById.get(item.id) ?? item);
+  for (const item of opened) {
+    if (!stream.some((s) => s.id === item.id)) {
+      merged.push(item);
+    }
+  }
+  return merged;
+}
 var ArtifactStore = class {
   constructor() {
-    this.artifact = null;
+    this.artifacts = [];
+    this.activeId = null;
     this.listeners = /* @__PURE__ */ new Set();
   }
-  /** 当前产出物（未打开时为 null；引用在不变时保持稳定） */
+  /** 当前激活产出物（未打开时为 null；引用在不变时保持稳定） */
   get() {
-    return this.artifact;
+    if (this.activeId === null) {
+      return null;
+    }
+    return this.artifacts.find((item) => item.id === this.activeId) ?? null;
   }
-  /** 打开（或替换）当前产出物 */
+  /** 全部产出物（插入序；数组不可变，引用稳定） */
+  list() {
+    return this.artifacts;
+  }
+  /** 打开（或按 id 替换）产出物并激活 */
   open(artifact) {
-    this.artifact = artifact;
+    const index = this.artifacts.findIndex((item) => item.id === artifact.id);
+    this.artifacts = index === -1 ? [...this.artifacts, artifact] : this.artifacts.map((item, i) => i === index ? artifact : item);
+    this.activeId = artifact.id;
     this.notify();
   }
-  /** 部分更新当前产出物（id 不可改）；未 open 时告警并忽略 */
+  /** 切换激活项（未知 id 告警并忽略，不抛错） */
+  activate(id) {
+    if (this.activeId === id) {
+      return;
+    }
+    if (!this.artifacts.some((item) => item.id === id)) {
+      console.warn("[@pactor-app/chat] unknown artifact id, activate ignored");
+      return;
+    }
+    this.activeId = id;
+    this.notify();
+  }
+  /** 部分更新当前激活产出物（id 不可改）；未 open 时告警并忽略 */
   update(patch) {
-    if (!this.artifact) {
+    const current = this.get();
+    if (!current) {
       console.warn("[@pactor-app/chat] artifact not open, update ignored");
       return;
     }
-    this.artifact = { ...this.artifact, ...patch, id: this.artifact.id };
+    const next = { ...current, ...patch, id: current.id };
+    this.artifacts = this.artifacts.map(
+      (item) => item.id === current.id ? next : item
+    );
     this.notify();
   }
-  /** 关闭面板（未打开时幂等，不重复通知） */
+  /** 关闭面板：清空激活项，列表保留（未打开时幂等，不重复通知） */
   close() {
-    if (this.artifact === null) {
+    if (this.activeId === null) {
       return;
     }
-    this.artifact = null;
+    this.activeId = null;
     this.notify();
   }
   /** 订阅变更；返回退订函数 */
@@ -232,6 +320,94 @@ var ArtifactStore = class {
   }
 };
 
+// src/artifact-download.ts
+var KIND_EXTENSIONS = {
+  markdown: "md",
+  text: "txt",
+  code: "txt",
+  dsl: "json"
+};
+function resolveArtifactFilename(artifact) {
+  const title = artifact.title.trim() || "artifact";
+  if (/\.[A-Za-z0-9]+$/.test(title)) {
+    return title;
+  }
+  const ext = resolveArtifactFileType(artifact) ?? KIND_EXTENSIONS[artifact.kind];
+  return `${title}.${ext}`;
+}
+function dataUrlToBlob(dataUrl) {
+  const comma = dataUrl.indexOf(",");
+  const meta = dataUrl.slice(0, comma);
+  const payload = dataUrl.slice(comma + 1);
+  const mime = /^data:([^;,]+)/.exec(meta)?.[1] ?? "application/octet-stream";
+  if (meta.includes(";base64")) {
+    const binary = atob(payload);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return new Blob([bytes], { type: mime });
+  }
+  return new Blob([decodeURIComponent(payload)], { type: mime });
+}
+function isRemoteUrl(raw) {
+  return /^https?:\/\//.test(raw.trim());
+}
+function buildArtifactBlob(artifact) {
+  if (artifact.kind === "dsl" && typeof artifact.content === "object") {
+    return new Blob([JSON.stringify(artifact.content, null, 2)], {
+      type: "application/json"
+    });
+  }
+  const raw = String(artifact.content);
+  if (isImageArtifact(artifact)) {
+    const trimmed = raw.trim();
+    if (trimmed.startsWith("data:")) {
+      return dataUrlToBlob(trimmed);
+    }
+    if (trimmed.startsWith("<svg") || trimmed.startsWith("<?xml")) {
+      return new Blob([raw], { type: "image/svg+xml" });
+    }
+    if (isRemoteUrl(trimmed)) {
+      return null;
+    }
+  }
+  const ext = resolveArtifactFileType(artifact);
+  const mime = ext === "md" || artifact.kind === "markdown" ? "text/markdown" : "text/plain";
+  return new Blob([raw], { type: `${mime};charset=utf-8` });
+}
+function saveBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  document.body.appendChild(anchor);
+  anchor.click();
+  anchor.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+async function downloadArtifact(artifact) {
+  const filename = resolveArtifactFilename(artifact);
+  const raw = String(artifact.content ?? "").trim();
+  if (isImageArtifact(artifact) && isRemoteUrl(raw)) {
+    try {
+      const response = await fetch(raw);
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      saveBlob(await response.blob(), filename);
+      return;
+    } catch {
+      window.open(raw, "_blank", "noopener");
+      return;
+    }
+  }
+  const blob = buildArtifactBlob(artifact);
+  if (blob) {
+    saveBlob(blob, filename);
+  }
+}
+
 // src/events.ts
 function applyChatEvent(store, event) {
   switch (event.type) {
@@ -1104,6 +1280,12 @@ function ensureChatChromeActions(actions) {
 function invokeChatPanelClose() {
   handlers.panelClose?.();
 }
+function invokeChatPanelToggleList() {
+  handlers.panelToggleList?.();
+}
+function invokeChatPanelDownload() {
+  handlers.panelDownload?.();
+}
 
 // src/view/chrome/ChromeSlot.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -1314,10 +1496,47 @@ function ChatPanelCloseButton() {
     }
   );
 }
-var PANEL_HEADER_INTERNAL_COMPONENTS = { ChatPanelCloseButton };
+var PANEL_HEADER_INTERNAL_COMPONENTS = {
+  ChatPanelCloseButton,
+  ChatPanelDownloadButton,
+  ChatPanelListButton
+};
+function ChatPanelListButton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "pactor-chat-icon-button pactor-chat-inspector__list-toggle",
+      title: "\u4EA7\u7269\u76EE\u5F55",
+      "aria-label": "\u4EA7\u7269\u76EE\u5F55",
+      onClick: () => invokeChatPanelToggleList(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components3.Icon, { name: "arrow-left", size: 16 })
+    }
+  );
+}
+function ChatPanelDownloadButton() {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type: "button",
+      className: "pactor-chat-icon-button pactor-chat-inspector__download",
+      title: "\u4E0B\u8F7D\u4EA7\u7269",
+      "aria-label": "\u4E0B\u8F7D\u4EA7\u7269",
+      onClick: () => invokeChatPanelDownload(),
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_components3.Icon, { name: "download", size: 16 })
+    }
+  );
+}
 function buildPanelHeaderFragment(props) {
   return {
-    requires: ["Flex", "Text", "Badge", "ChatPanelCloseButton"],
+    requires: [
+      "Flex",
+      "Text",
+      "Badge",
+      "ChatPanelCloseButton",
+      "ChatPanelDownloadButton",
+      "ChatPanelListButton"
+    ],
     node: {
       type: "Flex",
       props: {
@@ -1331,6 +1550,7 @@ function buildPanelHeaderFragment(props) {
           type: "Flex",
           props: { align: "center", gap: "small" },
           children: [
+            ...props.showListButton ? [{ type: "ChatPanelListButton" }] : [],
             {
               type: "Text",
               props: {
@@ -1349,7 +1569,14 @@ function buildPanelHeaderFragment(props) {
             }
           ]
         },
-        { type: "ChatPanelCloseButton" }
+        {
+          type: "Flex",
+          props: { align: "center", gap: "small" },
+          children: [
+            ...props.showDownload ? [{ type: "ChatPanelDownloadButton" }] : [],
+            { type: "ChatPanelCloseButton" }
+          ]
+        }
       ]
     }
   };
@@ -1400,10 +1627,126 @@ function ArtifactDslContent({
   const guarded = guardChatDsl(node, runtime.context.components);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_runtime4.DslRenderer, { context: runtime.context, engine: runtime.engine, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactDslGuard, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactDslNode, { node: guarded }) }) });
 }
+function ArtifactKindIcon({ kind }) {
+  const name = kind === "code" ? "code" : kind === "dsl" ? "layout-grid" : "file-text";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name, size: 13 });
+}
+function buildArtifactTree(artifacts) {
+  const root = { name: "", path: "", children: [] };
+  for (const artifact of artifacts) {
+    const segments = artifact.id.split("/").filter(Boolean);
+    let node = root;
+    for (let i = 0; i < segments.length - 1; i++) {
+      const path = segments.slice(0, i + 1).join("/");
+      let child = node.children.find(
+        (item) => item.path === path && item.artifact === void 0
+      );
+      if (!child) {
+        child = { name: segments[i], path, children: [] };
+        node.children.push(child);
+      }
+      node = child;
+    }
+    node.children.push({
+      name: artifact.title,
+      path: artifact.id,
+      artifact,
+      children: []
+    });
+  }
+  const sortLevel = (nodes) => {
+    nodes.sort((a, b) => {
+      const dirDelta = Number(b.artifact === void 0) - Number(a.artifact === void 0);
+      return dirDelta !== 0 ? dirDelta : a.name.localeCompare(b.name);
+    });
+    for (const item of nodes) {
+      sortLevel(item.children);
+    }
+  };
+  sortLevel(root.children);
+  return root.children;
+}
+function ArtifactListView({
+  nodes,
+  activeId,
+  onSelect
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { className: "pactor-chat-inspector__list", children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ArtifactTreeRow,
+    {
+      node,
+      activeId,
+      onSelect
+    },
+    node.path
+  )) });
+}
+function ArtifactTreeRow({
+  node,
+  activeId,
+  onSelect
+}) {
+  const [open, setOpen] = (0, import_react6.useState)(true);
+  if (node.artifact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "pactor-chat-inspector__list-item",
+        "data-active": node.artifact.id === activeId,
+        onClick: () => onSelect?.(node.artifact),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactKindIcon, { kind: node.artifact.kind }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__list-item-title", children: node.artifact.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__kind", children: node.artifact.kind })
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        type: "button",
+        className: "pactor-chat-inspector__list-folder",
+        "aria-expanded": open,
+        "data-open": open,
+        onClick: () => setOpen((value) => !value),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-trace__chevron", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "chevron-right", size: 12 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "folder", size: 13 }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: node.name })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__list-children", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      ArtifactListView,
+      {
+        nodes: node.children,
+        activeId,
+        onSelect
+      }
+    ) })
+  ] });
+}
+function ArtifactImageContent({ artifact }) {
+  const raw = String(artifact.content).trim();
+  const src = raw.startsWith("<svg") || raw.startsWith("<?xml") ? `data:image/svg+xml;utf8,${encodeURIComponent(raw)}` : raw;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__image", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src, alt: artifact.title }) });
+}
 function ArtifactContent({
   artifact,
-  runtime
+  runtime,
+  viewers
 }) {
+  const ext = resolveArtifactFileType(artifact);
+  const custom = (ext ? viewers?.[ext] : void 0) ?? viewers?.[artifact.kind];
+  if (custom) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: custom(artifact) });
+  }
+  if (isImageArtifact(artifact)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactImageContent, { artifact });
+  }
   switch (artifact.kind) {
     case "markdown":
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_markdown2.MarkdownRenderer, { content: String(artifact.content) });
@@ -1422,17 +1765,41 @@ function ArtifactContent({
 }
 function ArtifactPanel({
   artifact,
+  artifacts,
+  activeArtifactId,
+  onSelectArtifact,
   inspector,
   onClose,
   safeRegistry,
   user,
+  artifactViewers,
   className
 }) {
   const runtime = useArtifactRuntime(safeRegistry, user);
+  const [view, setView] = (0, import_react6.useState)("content");
+  const activeId = activeArtifactId ?? artifact?.id;
+  (0, import_react6.useEffect)(() => {
+    setView("content");
+  }, [activeId]);
+  const showListButton = artifacts !== void 0 && artifacts.length > 0;
+  const toggleListRef = (0, import_react6.useRef)(() => {
+  });
+  toggleListRef.current = () => setView((value) => value === "list" ? "content" : "list");
   const closeRef = (0, import_react6.useRef)(onClose);
   closeRef.current = onClose;
+  const artifactRef = (0, import_react6.useRef)(artifact);
+  artifactRef.current = artifact;
   (0, import_react6.useEffect)(() => {
-    setChatChromeHandlers({ panelClose: () => closeRef.current?.() });
+    setChatChromeHandlers({
+      panelClose: () => closeRef.current?.(),
+      panelToggleList: () => toggleListRef.current(),
+      panelDownload: () => {
+        const current = artifactRef.current;
+        if (current) {
+          void downloadArtifact(current);
+        }
+      }
+    });
   }, []);
   const panelRef = (0, import_react6.useRef)(null);
   const [width, setWidth] = (0, import_react6.useState)(null);
@@ -1451,7 +1818,7 @@ function ArtifactPanel({
     document.body.style.userSelect = "none";
     const onMove = (moveEvent) => {
       const next = startWidth + (startX - moveEvent.clientX);
-      setWidth(Math.round(Math.min(Math.max(next, 240), maxWidth)));
+      setWidth(Math.round(Math.min(Math.max(next, 320), maxWidth)));
     };
     const onUp = () => {
       document.body.style.userSelect = prevUserSelect;
@@ -1484,12 +1851,36 @@ function ArtifactPanel({
           {
             fragment: buildPanelHeaderFragment({
               title: artifact?.title ?? "\u4EA7\u51FA\u7269",
-              kind: artifact?.kind ?? "text"
+              kind: artifact?.kind ?? "text",
+              showListButton,
+              showDownload: artifact != null
             }),
             components: PANEL_HEADER_INTERNAL_COMPONENTS,
             fallback: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+              showListButton ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "pactor-chat-icon-button pactor-chat-inspector__list-toggle",
+                  title: "\u4EA7\u7269\u76EE\u5F55",
+                  "aria-label": "\u4EA7\u7269\u76EE\u5F55",
+                  onClick: () => toggleListRef.current(),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "arrow-left", size: 16, strokeWidth: 1.7 })
+                }
+              ) : null,
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__title", children: artifact?.title ?? "\u4EA7\u51FA\u7269" }),
               artifact ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__kind", children: artifact.kind }) : null,
+              artifact ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "pactor-chat-icon-button pactor-chat-inspector__download",
+                  title: "\u4E0B\u8F7D\u4EA7\u7269",
+                  "aria-label": "\u4E0B\u8F7D\u4EA7\u7269",
+                  onClick: () => void downloadArtifact(artifact),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_components4.Icon, { name: "download", size: 16, strokeWidth: 1.7 })
+                }
+              ) : null,
               /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "button",
                 {
@@ -1503,7 +1894,38 @@ function ArtifactPanel({
             ] })
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__body", children: inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactContent, { artifact, runtime }) : null })
+        artifacts !== void 0 && artifacts.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__tabs", role: "tablist", children: artifacts.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "aria-selected": item.id === activeId,
+            "data-active": item.id === activeId,
+            className: "pactor-chat-inspector__tab",
+            title: item.title,
+            onClick: () => onSelectArtifact?.(item),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArtifactKindIcon, { kind: item.kind }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "pactor-chat-inspector__tab-title", children: item.title })
+            ]
+          },
+          item.id
+        )) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "pactor-chat-inspector__body", children: view === "list" && artifacts !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ArtifactListView,
+          {
+            nodes: buildArtifactTree(artifacts),
+            activeId,
+            onSelect: onSelectArtifact
+          }
+        ) : inspector !== void 0 && inspector !== null ? inspector : artifact ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          ArtifactContent,
+          {
+            artifact,
+            runtime,
+            viewers: artifactViewers
+          }
+        ) : null })
       ]
     }
   );
@@ -2529,7 +2951,11 @@ var import_react12 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function usePinnedCollapse(autoOpen) {
   const [state, setState] = (0, import_react12.useState)("auto");
-  const open = state === "auto" ? autoOpen : state === "pinned-open";
+  const autoCollapsedRef = (0, import_react12.useRef)(false);
+  if (state === "auto" && !autoOpen) {
+    autoCollapsedRef.current = true;
+  }
+  const open = state === "auto" ? autoOpen && !autoCollapsedRef.current : state === "pinned-open";
   const toggle = () => {
     setState(open ? "pinned-closed" : "pinned-open");
   };
@@ -3674,6 +4100,8 @@ function ChatComposition({
   onSend,
   artifact,
   panelOpen,
+  artifacts: artifactsProp,
+  onSelectArtifact,
   onPanelClose,
   inspector,
   onArtifact,
@@ -3694,8 +4122,28 @@ function ChatComposition({
     (listener) => artifactStore.subscribe(listener),
     () => artifactStore.get()
   );
+  const storeArtifacts = (0, import_react17.useSyncExternalStore)(
+    (listener) => artifactStore.subscribe(listener),
+    () => artifactStore.list()
+  );
+  const messages = (0, import_react17.useSyncExternalStore)(
+    (listener) => store.subscribe(listener),
+    () => store.getMessages()
+  );
+  const streamArtifacts = (0, import_react17.useMemo)(() => collectArtifacts(messages), [messages]);
+  const mergedArtifacts = (0, import_react17.useMemo)(
+    () => mergeArtifacts(streamArtifacts, storeArtifacts),
+    [streamArtifacts, storeArtifacts]
+  );
   const effectiveArtifact = panelControlled ? artifact ?? null : storeArtifact;
   const effectivePanelOpen = panelControlled ? panelOpen ?? artifact != null : storeArtifact !== null;
+  const effectiveArtifacts = artifactsProp ?? mergedArtifacts;
+  const handleSelectArtifact = (next) => {
+    onSelectArtifact?.(next);
+    if (!panelControlled) {
+      artifactStore.open(next);
+    }
+  };
   const handlePanelClose = () => {
     onPanelClose?.();
     if (!panelControlled) {
@@ -3837,10 +4285,14 @@ function ChatComposition({
         ArtifactPanel,
         {
           artifact: effectiveArtifact,
+          artifacts: effectiveArtifacts,
+          activeArtifactId: effectiveArtifact?.id,
+          onSelectArtifact: handleSelectArtifact,
           inspector,
           onClose: handlePanelClose,
           safeRegistry: services.safeRegistry,
-          user: services.user
+          user: services.user,
+          artifactViewers: services.artifactViewers
         }
       )
     ] }) : null
@@ -3883,6 +4335,7 @@ function createChatWorkspace(services) {
     inspector,
     onArtifact,
     onOpenArtifact,
+    onSelectArtifact,
     headerActions,
     editableTitle,
     onExport,
@@ -3923,6 +4376,7 @@ function createChatWorkspace(services) {
         inspector: inspector ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DslNodeSlot, { node: inspector }) : void 0,
         onArtifact,
         onOpenArtifact,
+        onSelectArtifact,
         headerActions,
         editableTitle,
         onExport,
@@ -4132,6 +4586,7 @@ function Chat({
   inspector,
   onArtifact,
   onOpenArtifact,
+  onSelectArtifact,
   className,
   onSend,
   onMenuSelect
@@ -4196,7 +4651,8 @@ function Chat({
       onPanelClose,
       inspector: resolveSlot(inspector),
       onArtifact,
-      onOpenArtifact
+      onOpenArtifact,
+      onSelectArtifact
     }
   );
 }
@@ -4207,6 +4663,7 @@ function ChatDslAdapter({
   onPanelClose,
   onArtifact,
   onOpenArtifact,
+  onSelectArtifact,
   onModelChange,
   onContextsChange,
   onMessageAction,
@@ -4225,6 +4682,7 @@ function ChatDslAdapter({
       onPanelClose: onPanelClose ? () => onPanelClose({}) : void 0,
       onArtifact: onArtifact ? (artifact) => onArtifact({ artifact }) : void 0,
       onOpenArtifact: onOpenArtifact ? (artifact) => onOpenArtifact({ artifact }) : void 0,
+      onSelectArtifact: onSelectArtifact ? (artifact) => onSelectArtifact({ artifact }) : void 0,
       onModelChange: onModelChange ? (model) => onModelChange({ model }) : void 0,
       onContextsChange: onContextsChange ? (contexts) => onContextsChange({ contexts }) : void 0,
       onMessageAction: onMessageAction ? (action, message) => onMessageAction({ action, message }) : void 0,
@@ -4263,6 +4721,7 @@ function registerChatLayout(layoutRegistry) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ARTIFACT_IMAGE_EXTENSIONS,
   ActivityTrace,
   AppShell,
   ArtifactPanel,
@@ -4286,7 +4745,10 @@ function registerChatLayout(layoutRegistry) {
   MessageBubble,
   PartRenderer,
   applyChatEvent,
+  buildArtifactBlob,
+  buildArtifactTree,
   buildChatScope,
+  collectArtifacts,
   collectMessageText,
   createChatComponentRegistry,
   createChatId,
@@ -4295,14 +4757,20 @@ function registerChatLayout(layoutRegistry) {
   createManualDriver,
   createSafeRegistry,
   detectStreamingMode,
+  downloadArtifact,
   guardChatDsl,
+  isImageArtifact,
+  mergeArtifacts,
   pairToolTraces,
   registerCapabilityAction,
   registerChatComponent,
   registerChatLayout,
   registerChatShellComponent,
+  resolveArtifactFileType,
+  resolveArtifactFilename,
   runChatTurn,
   runRegenerateTurn,
+  saveBlob,
   useChatAutoScroll,
   useChatServices,
   useSidebarDrawer,