@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/tool-call-visualization/window-panel/ToolCallWindowPanel.js

@@ -1,5 +1,6 @@
 "use client";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { ReadFailure } from "../../host/ui-slots.js";
 import {
   AlertTriangle,
@@ -51,82 +52,94 @@ const EntrySidebar = ({
   hasMore,
   onLoadMore
 }) => {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex h-full flex-col overflow-hidden" }, conversationScopeAvailable && /* @__PURE__ */ React.createElement("div", { className: "flex-shrink-0 border-b border-border p-2" }, /* @__PURE__ */ React.createElement(
-    ToggleGroup,
-    {
-      type: "single",
-      value: scope,
-      onValueChange: (v) => {
-        if (v === "message" || v === "conversation") onScopeChange(v);
-      },
-      className: "grid w-full grid-cols-2 gap-1 rounded-md bg-muted/60 p-0.5"
-    },
-    /* @__PURE__ */ React.createElement(
-      ToggleGroupItem,
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+    conversationScopeAvailable && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-b border-border p-2", children: /* @__PURE__ */ jsxs(
+      ToggleGroup,
       {
-        value: "message",
-        className: "h-7 whitespace-nowrap rounded px-2 text-xs font-medium data-[state=on]:bg-background data-[state=on]:shadow-sm"
-      },
-      "Current"
-    ),
-    /* @__PURE__ */ React.createElement(
-      ToggleGroupItem,
+        type: "single",
+        value: scope,
+        onValueChange: (v) => {
+          if (v === "message" || v === "conversation") onScopeChange(v);
+        },
+        className: "grid w-full grid-cols-2 gap-1 rounded-md bg-muted/60 p-0.5",
+        children: [
+          /* @__PURE__ */ jsx(
+            ToggleGroupItem,
+            {
+              value: "message",
+              className: "h-7 whitespace-nowrap rounded px-2 text-xs font-medium data-[state=on]:bg-background data-[state=on]:shadow-sm",
+              children: "Current"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToggleGroupItem,
+            {
+              value: "conversation",
+              className: "h-7 whitespace-nowrap rounded px-2 text-xs font-medium data-[state=on]:bg-background data-[state=on]:shadow-sm",
+              children: "All"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto py-1", children: loadError && entries.length === 0 ? /* @__PURE__ */ jsx(
+      ReadFailure,
       {
-        value: "conversation",
-        className: "h-7 whitespace-nowrap rounded px-2 text-xs font-medium data-[state=on]:bg-background data-[state=on]:shadow-sm"
-      },
-      "All"
-    )
-  )), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto py-1" }, loadError && entries.length === 0 ? /* @__PURE__ */ React.createElement(
-    ReadFailure,
-    {
-      error: loadError,
-      what: "this conversation's tool calls",
-      className: "m-2",
-      onRetry
-    }
-  ) : entries.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "px-3 py-4 text-xs italic text-muted-foreground" }, loadingMore ? "Loading tool calls\u2026" : "No tool entries") : entries.map((entry, idx) => {
-    const isActive = entry.callId === selectedCallId;
-    const label = getToolDisplayName(entry.toolName);
-    const isError = entry.status === "error";
-    const isRunning = entry.status === "started" || entry.status === "progress" || entry.status === "step";
-    const isComplete = entry.status === "completed";
-    return /* @__PURE__ */ React.createElement(
-      "button",
+        error: loadError,
+        what: "this conversation's tool calls",
+        className: "m-2",
+        onRetry
+      }
+    ) : entries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-4 text-xs italic text-muted-foreground", children: loadingMore ? "Loading tool calls\u2026" : "No tool entries" }) : entries.map((entry, idx) => {
+      const isActive = entry.callId === selectedCallId;
+      const label = getToolDisplayName(entry.toolName);
+      const isError = entry.status === "error";
+      const isRunning = entry.status === "started" || entry.status === "progress" || entry.status === "step";
+      const isComplete = entry.status === "completed";
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onSelect(entry.callId),
+          className: cn(
+            "mx-1 flex items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs transition-colors",
+            isActive ? "border-primary/30 bg-primary/10 text-foreground" : "border-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
+          ),
+          title: `${label} \u2014 ${entry.status}`,
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "w-4 flex-shrink-0 text-right font-mono opacity-60", children: [
+              idx + 1,
+              "."
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 truncate font-medium", children: label }),
+            /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: isError ? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-3 w-3 text-destructive" }) : isRunning ? /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin text-primary" }) : isComplete ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-3 w-3 text-success" }) : /* @__PURE__ */ jsx("span", { className: "block h-2 w-2 rounded-full bg-muted-foreground/40" }) })
+          ]
+        },
+        entry.callId
+      );
+    }) }),
+    Boolean(loadError) && entries.length > 0 && /* @__PURE__ */ jsx(
+      ReadFailure,
       {
-        key: entry.callId,
-        type: "button",
-        onClick: () => onSelect(entry.callId),
-        className: cn(
-          "mx-1 flex items-center gap-2 rounded-md border px-2 py-1.5 text-left text-xs transition-colors",
-          isActive ? "border-primary/30 bg-primary/10 text-foreground" : "border-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
-        ),
-        title: `${label} \u2014 ${entry.status}`
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "w-4 flex-shrink-0 text-right font-mono opacity-60" }, idx + 1, "."),
-      /* @__PURE__ */ React.createElement("span", { className: "flex-1 truncate font-medium" }, label),
-      /* @__PURE__ */ React.createElement("span", { className: "flex-shrink-0" }, isError ? /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-3 w-3 text-destructive" }) : isRunning ? /* @__PURE__ */ React.createElement(Loader2, { className: "h-3 w-3 animate-spin text-primary" }) : isComplete ? /* @__PURE__ */ React.createElement(CheckCircle, { className: "h-3 w-3 text-success" }) : /* @__PURE__ */ React.createElement("span", { className: "block h-2 w-2 rounded-full bg-muted-foreground/40" }))
-    );
-  })), Boolean(loadError) && entries.length > 0 && /* @__PURE__ */ React.createElement(
-    ReadFailure,
-    {
-      error: loadError,
-      what: "older tool calls",
-      className: "m-1.5",
-      onRetry: hasMore ? onLoadMore : onRetry
-    }
-  ), scope === "conversation" && (hasMore || loadingMore) && /* @__PURE__ */ React.createElement("div", { className: "flex-shrink-0 border-t border-border p-1.5" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "quiet",
-      disabled: loadingMore,
-      onClick: onLoadMore,
-      icon: loadingMore ? /* @__PURE__ */ React.createElement(LoaderCircle, { className: "animate-spin" }) : void 0,
-      meta: loadingMore ? void 0 : CONVERSATION_TOOL_CALL_PAGE_SIZE,
-      className: "w-full"
-    },
-    loadingMore ? "Loading\u2026" : "Load older"
-  )));
+        error: loadError,
+        what: "older tool calls",
+        className: "m-1.5",
+        onRetry: hasMore ? onLoadMore : onRetry
+      }
+    ),
+    scope === "conversation" && (hasMore || loadingMore) && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-t border-border p-1.5", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "quiet",
+        disabled: loadingMore,
+        onClick: onLoadMore,
+        icon: loadingMore ? /* @__PURE__ */ jsx(LoaderCircle, { className: "animate-spin" }) : void 0,
+        meta: loadingMore ? void 0 : CONVERSATION_TOOL_CALL_PAGE_SIZE,
+        className: "w-full",
+        children: loadingMore ? "Loading\u2026" : "Load older"
+      }
+    ) })
+  ] });
 };
 const ToolBrowserTabBar = ({ tabs, activeTabId, onTabClick }) => {
   const scrollRef = useRef(null);
@@ -142,35 +155,39 @@ const ToolBrowserTabBar = ({ tabs, activeTabId, onTabClick }) => {
     });
   }, [activeTabId]);
   if (tabs.length === 0) return null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: scrollRef,
       role: "tablist",
       "aria-label": "Tool result views",
       className: "flex h-[34px] min-h-[34px] shrink-0 items-stretch overflow-x-auto overflow-y-hidden border-b border-border bg-muted/40",
-      style: { scrollbarWidth: "none" }
-    },
-    tabs.map((tab) => {
-      const isActive = tab.id === activeTabId;
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: tab.id,
-          role: "tab",
-          "aria-selected": isActive,
-          "data-active": isActive,
-          onClick: () => onTabClick(tab.id),
-          className: cn(
-            "relative flex h-full shrink-0 cursor-pointer select-none items-center gap-1.5 border-r border-border px-3 transition-colors",
-            isActive ? "bg-background text-foreground" : "bg-transparent text-muted-foreground hover:bg-muted/60 hover:text-foreground"
-          )
-        },
-        isActive && /* @__PURE__ */ React.createElement("span", { className: "absolute inset-x-0 top-0 h-[2px] bg-primary" }),
-        /* @__PURE__ */ React.createElement("span", { className: "max-w-[160px] truncate text-xs font-medium leading-none" }, tab.label)
-      );
-    }),
-    /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1" })
+      style: { scrollbarWidth: "none" },
+      children: [
+        tabs.map((tab) => {
+          const isActive = tab.id === activeTabId;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "tab",
+              "aria-selected": isActive,
+              "data-active": isActive,
+              onClick: () => onTabClick(tab.id),
+              className: cn(
+                "relative flex h-full shrink-0 cursor-pointer select-none items-center gap-1.5 border-r border-border px-3 transition-colors",
+                isActive ? "bg-background text-foreground" : "bg-transparent text-muted-foreground hover:bg-muted/60 hover:text-foreground"
+              ),
+              children: [
+                isActive && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-0 h-[2px] bg-primary" }),
+                /* @__PURE__ */ jsx("span", { className: "max-w-[160px] truncate text-xs font-medium leading-none", children: tab.label })
+              ]
+            },
+            tab.id
+          );
+        }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1" })
+      ]
+    }
   );
 };
 const LiveEntriesProvider = ({ requestId, callIds, render }) => {
@@ -180,7 +197,7 @@ const LiveEntriesProvider = ({ requestId, callIds, render }) => {
     const allowed = new Set(callIds);
     return all.filter((e) => allowed.has(e.callId));
   }, [all, callIds]);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, render(filtered));
+  return /* @__PURE__ */ jsx(Fragment, { children: render(filtered) });
 };
 function useConversationToolEntries(conversationId, enabled) {
   const dispatch = useAppDispatch();
@@ -328,31 +345,31 @@ const ToolCallWindowPanelBody = ({
   }, [entries.length, selectedEntry]);
   const conversationReadFailed = scope === "conversation" && conversationLoadError != null;
   const tabs = useMemo(() => {
-    const noEntryView = conversationReadFailed ? /* @__PURE__ */ React.createElement(
+    const noEntryView = conversationReadFailed ? /* @__PURE__ */ jsx(
       ReadFailure,
       {
         error: conversationLoadError,
         what: "this conversation's tool calls",
         onRetry: retryConversationEntries
       }
-    ) : /* @__PURE__ */ React.createElement("div", { className: "p-8 text-center text-muted-foreground" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "No tool data available"));
+    ) : /* @__PURE__ */ jsx("div", { className: "p-8 text-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: "No tool data available" }) });
     const adminTabs = [
       {
         id: "input",
         label: "Input",
-        content: selectedEntry ? /* @__PURE__ */ React.createElement(InputView, { entry: selectedEntry }) : noEntryView
+        content: selectedEntry ? /* @__PURE__ */ jsx(InputView, { entry: selectedEntry }) : noEntryView
       },
       {
         id: "raw",
         label: "Raw",
-        content: selectedEntry ? /* @__PURE__ */ React.createElement(RawDataView, { entry: selectedEntry }) : noEntryView
+        content: selectedEntry ? /* @__PURE__ */ jsx(RawDataView, { entry: selectedEntry }) : noEntryView
       }
     ];
     if (customOverlayTabs && selectedEntry) {
       const customTabDefs = customOverlayTabs.map((spec) => ({
         id: spec.id,
         label: spec.label,
-        content: /* @__PURE__ */ React.createElement(CustomOverlayBody, { entry: selectedEntry, Component: spec.Component, conversationId })
+        content: /* @__PURE__ */ jsx(CustomOverlayBody, { entry: selectedEntry, Component: spec.Component, conversationId })
       }));
       return [...customTabDefs, ...adminTabs];
     }
@@ -360,7 +377,7 @@ const ToolCallWindowPanelBody = ({
       {
         id: "results",
         label: "Results",
-        content: /* @__PURE__ */ React.createElement(EntryResultsBody, { entry: selectedEntry, conversationId })
+        content: /* @__PURE__ */ jsx(EntryResultsBody, { entry: selectedEntry, conversationId })
       },
       ...adminTabs
     ];
@@ -386,7 +403,7 @@ const ToolCallWindowPanelBody = ({
     }
     return getToolDisplayName(selectedEntry.toolName);
   }, [entries.length, selectedEntry]);
-  const copyAllActions = entries.length > 0 ? /* @__PURE__ */ React.createElement(
+  const copyAllActions = entries.length > 0 ? /* @__PURE__ */ jsx(
     CopyButtons,
     {
       label: scope === "conversation" ? `All ${entries.length} tools in conversation` : `All ${entries.length} tools in this message`,
@@ -405,7 +422,7 @@ const ToolCallWindowPanelBody = ({
       })
     }
   ) : null;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     WindowPanel,
     {
       id: `tool-call-window-${instanceId}`,
@@ -417,7 +434,7 @@ const ToolCallWindowPanelBody = ({
       width: 1100,
       height: 700,
       actionsRight: copyAllActions,
-      sidebar: /* @__PURE__ */ React.createElement(
+      sidebar: /* @__PURE__ */ jsx(
         EntrySidebar,
         {
           entries,
@@ -439,16 +456,19 @@ const ToolCallWindowPanelBody = ({
       sidebarDefaultSize: 168,
       sidebarMinSize: 120,
       defaultSidebarOpen: true,
-      bodyClassName: "p-0 overflow-hidden"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex h-full flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement(
-      ToolBrowserTabBar,
-      {
-        tabs,
-        activeTabId: activeTab?.id ?? "",
-        onTabClick: setUserTabId
-      }
-    ), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-auto" }, activeTab?.content ?? null))
+      bodyClassName: "p-0 overflow-hidden",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          ToolBrowserTabBar,
+          {
+            tabs,
+            activeTabId: activeTab?.id ?? "",
+            onTabClick: setUserTabId
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: activeTab?.content ?? null })
+      ] })
+    }
   );
 };
 const ToolCallWindowPanel = ({
@@ -464,12 +484,12 @@ const ToolCallWindowPanel = ({
 }) => {
   if (!isOpen) return null;
   if (requestId) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       LiveEntriesProvider,
       {
         requestId,
         callIds,
-        render: (liveEntries) => /* @__PURE__ */ React.createElement(
+        render: (liveEntries) => /* @__PURE__ */ jsx(
           ToolCallWindowPanelBody,
           {
             instanceId,
@@ -483,7 +503,7 @@ const ToolCallWindowPanel = ({
       }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ToolCallWindowPanelBody,
     {
       instanceId,

package/dist/ui/AudioOutputBlockSkeleton.js

@@ -1,35 +1,75 @@
 "use client";
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Music } from "lucide-react";
 function Bar({ className = "" }) {
-  return /* @__PURE__ */ React.createElement("div", { className: `rounded-full bg-muted/70 animate-pulse ${className}` });
+  return /* @__PURE__ */ jsx("div", { className: `rounded-full bg-muted/70 animate-pulse ${className}` });
 }
 const AudioOutputBlockSkeleton = ({
   label = "Generating audio\u2026"
 }) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "relative rounded-xl border border-border bg-card p-4 my-2 shadow-sm overflow-hidden",
       role: "status",
-      "aria-label": label
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "pointer-events-none absolute inset-0 animate-[audio-shimmer_1.6s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-primary/10 to-transparent" }),
-    /* @__PURE__ */ React.createElement("div", { className: "relative flex gap-4 items-start" }, /* @__PURE__ */ React.createElement("div", { className: "w-16 h-16 rounded-xl flex-shrink-0 bg-gradient-to-br from-[hsl(var(--primary)/0.15)] to-[hsl(var(--secondary)/0.15)] border border-border flex items-center justify-center" }, /* @__PURE__ */ React.createElement(
-      Music,
-      {
-        size: 24,
-        className: "text-primary/60 animate-pulse",
-        strokeWidth: 1.5
-      }
-    )), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between mb-2" }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1 space-y-1.5" }, /* @__PURE__ */ React.createElement(Bar, { className: "h-3 w-2/3" }), /* @__PURE__ */ React.createElement(Bar, { className: "h-2.5 w-1/3" })), /* @__PURE__ */ React.createElement("div", { className: "flex items-end gap-[2px] h-5 w-8", "aria-hidden": true }, [60, 90, 45, 75].map((h, i) => /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        key: i,
-        className: "w-[3px] rounded-full bg-primary/50 animate-pulse",
-        style: { height: `${h}%` }
-      }
-    )))), /* @__PURE__ */ React.createElement("div", { className: "mb-2" }, /* @__PURE__ */ React.createElement(Bar, { className: "h-1.5 w-full" }), /* @__PURE__ */ React.createElement("div", { className: "flex justify-between mt-1" }, /* @__PURE__ */ React.createElement(Bar, { className: "h-2 w-8" }), /* @__PURE__ */ React.createElement(Bar, { className: "h-2 w-8" }))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement(Bar, { className: "h-7 w-7 !rounded-full" }), /* @__PURE__ */ React.createElement(Bar, { className: "h-9 w-9 !rounded-full bg-primary/30" }), /* @__PURE__ */ React.createElement(Bar, { className: "h-7 w-7 !rounded-full" }), /* @__PURE__ */ React.createElement(Bar, { className: "h-7 w-7 !rounded-full" })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 w-28" }, /* @__PURE__ */ React.createElement(Bar, { className: "h-4 w-4 !rounded-full" }), /* @__PURE__ */ React.createElement(Bar, { className: "h-1.5 flex-1" }))), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 mt-2 pt-2 border-t border-border" }, /* @__PURE__ */ React.createElement(Bar, { className: "h-4 w-20" }), /* @__PURE__ */ React.createElement(Bar, { className: "h-4 w-16" }), /* @__PURE__ */ React.createElement("span", { className: "ml-auto inline-flex items-center gap-1.5 text-[11px] text-muted-foreground" }, /* @__PURE__ */ React.createElement(Music, { size: 11, className: "text-primary/60" }), label))))
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 animate-[audio-shimmer_1.6s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-primary/10 to-transparent" }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex gap-4 items-start", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-xl flex-shrink-0 bg-gradient-to-br from-[hsl(var(--primary)/0.15)] to-[hsl(var(--secondary)/0.15)] border border-border flex items-center justify-center", children: /* @__PURE__ */ jsx(
+            Music,
+            {
+              size: 24,
+              className: "text-primary/60 animate-pulse",
+              strokeWidth: 1.5
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [
+                /* @__PURE__ */ jsx(Bar, { className: "h-3 w-2/3" }),
+                /* @__PURE__ */ jsx(Bar, { className: "h-2.5 w-1/3" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex items-end gap-[2px] h-5 w-8", "aria-hidden": true, children: [60, 90, 45, 75].map((h, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "w-[3px] rounded-full bg-primary/50 animate-pulse",
+                  style: { height: `${h}%` }
+                },
+                i
+              )) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-2", children: [
+              /* @__PURE__ */ jsx(Bar, { className: "h-1.5 w-full" }),
+              /* @__PURE__ */ jsxs("div", { className: "flex justify-between mt-1", children: [
+                /* @__PURE__ */ jsx(Bar, { className: "h-2 w-8" }),
+                /* @__PURE__ */ jsx(Bar, { className: "h-2 w-8" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(Bar, { className: "h-7 w-7 !rounded-full" }),
+                /* @__PURE__ */ jsx(Bar, { className: "h-9 w-9 !rounded-full bg-primary/30" }),
+                /* @__PURE__ */ jsx(Bar, { className: "h-7 w-7 !rounded-full" }),
+                /* @__PURE__ */ jsx(Bar, { className: "h-7 w-7 !rounded-full" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 w-28", children: [
+                /* @__PURE__ */ jsx(Bar, { className: "h-4 w-4 !rounded-full" }),
+                /* @__PURE__ */ jsx(Bar, { className: "h-1.5 flex-1" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-2 pt-2 border-t border-border", children: [
+              /* @__PURE__ */ jsx(Bar, { className: "h-4 w-20" }),
+              /* @__PURE__ */ jsx(Bar, { className: "h-4 w-16" }),
+              /* @__PURE__ */ jsxs("span", { className: "ml-auto inline-flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(Music, { size: 11, className: "text-primary/60" }),
+                label
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
   );
 };
 var AudioOutputBlockSkeleton_default = AudioOutputBlockSkeleton;

package/dist/ui/chat-panel/ChatPanel.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
 import {
   useDraggablePanel,
@@ -12,38 +13,46 @@ function HeaderRow({
   listToggle,
   dragHandleProps
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "flex h-10 shrink-0 items-center gap-2 border-b border-border px-2",
       "data-chat-panel-header": "",
-      ...dragHandleProps ?? {}
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-sm font-medium text-foreground" }, header?.title ? /* @__PURE__ */ React.createElement("span", { className: "min-w-0 truncate" }, header.title) : null, header?.badge ?? null, header?.working ?? null),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "flex shrink-0 items-center gap-1",
-        onPointerDown: (event) => event.stopPropagation()
-      },
-      listToggle,
-      header?.actions ?? null
-    )
+      ...dragHandleProps ?? {},
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 text-sm font-medium text-foreground", children: [
+          header?.title ? /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: header.title }) : null,
+          header?.badge ?? null,
+          header?.working ?? null
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex shrink-0 items-center gap-1",
+            onPointerDown: (event) => event.stopPropagation(),
+            children: [
+              listToggle,
+              header?.actions ?? null
+            ]
+          }
+        )
+      ]
+    }
   );
 }
 function useListToggle(list) {
   const [open, setOpen] = useState(false);
   const id = useId();
-  const toggle = list === void 0 ? null : /* @__PURE__ */ React.createElement(
+  const toggle = list === void 0 ? null : /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       className: "rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
       "aria-expanded": open,
       "aria-controls": id,
-      onClick: () => setOpen((v) => !v)
-    },
-    "Conversations"
+      onClick: () => setOpen((v) => !v),
+      children: "Conversations"
+    }
   );
   return { open, id, toggle };
 }
@@ -52,7 +61,10 @@ function ListArea({
   listHeader,
   list
 }) {
-  return /* @__PURE__ */ React.createElement("div", { id, className: "max-h-[45%] shrink-0 overflow-y-auto border-b border-border", "data-chat-panel-list": "" }, listHeader ? /* @__PURE__ */ React.createElement("div", { className: "px-3 pt-2 text-xs text-muted-foreground" }, listHeader) : null, list);
+  return /* @__PURE__ */ jsxs("div", { id, className: "max-h-[45%] shrink-0 overflow-y-auto border-b border-border", "data-chat-panel-list": "", children: [
+    listHeader ? /* @__PURE__ */ jsx("div", { className: "px-3 pt-2 text-xs text-muted-foreground", children: listHeader }) : null,
+    list
+  ] });
 }
 function ChatDockPanel({
   header,
@@ -75,7 +87,7 @@ function ChatDockPanel({
     edge: side === "start" ? "end" : "start",
     ...onWidthChange === void 0 ? {} : { onWidthChange }
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "aside",
     {
       ref: resize.panelRef,
@@ -85,19 +97,21 @@ function ChatDockPanel({
       "data-resizing": resize.resizing,
       style: { width },
       role: "complementary",
-      "aria-label": label ?? "Chat"
-    },
-    onWidthChange === void 0 ? null : /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `absolute inset-y-0 z-10 w-1.5 cursor-col-resize hover:bg-primary/30 focus-visible:bg-primary/40 focus-visible:outline-none ${side === "start" ? "-right-0.5" : "-left-0.5"}`,
-        "aria-label": "Resize the chat panel",
-        ...resize.handleProps
-      }
-    ),
-    /* @__PURE__ */ React.createElement(HeaderRow, { header, listToggle: listToggle.toggle }),
-    list !== void 0 && listToggle.open ? /* @__PURE__ */ React.createElement(ListArea, { id: listToggle.id, listHeader, list }) : null,
-    /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 flex-1 flex-col" }, children)
+      "aria-label": label ?? "Chat",
+      children: [
+        onWidthChange === void 0 ? null : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `absolute inset-y-0 z-10 w-1.5 cursor-col-resize hover:bg-primary/30 focus-visible:bg-primary/40 focus-visible:outline-none ${side === "start" ? "-right-0.5" : "-left-0.5"}`,
+            "aria-label": "Resize the chat panel",
+            ...resize.handleProps
+          }
+        ),
+        /* @__PURE__ */ jsx(HeaderRow, { header, listToggle: listToggle.toggle }),
+        list !== void 0 && listToggle.open ? /* @__PURE__ */ jsx(ListArea, { id: listToggle.id, listHeader, list }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children })
+      ]
+    }
   );
 }
 function ChatWindowPanel({
@@ -122,7 +136,7 @@ function ChatWindowPanel({
     initial: initialPosition ?? fallback,
     ...onPositionCommit === void 0 ? {} : { onCommit: onPositionCommit }
   });
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: drag.panelRef,
@@ -138,18 +152,20 @@ function ChatWindowPanel({
         width,
         height,
         transform: "translate(var(--mx-chat-panel-dx, 0px), var(--mx-chat-panel-dy, 0px))"
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      HeaderRow,
-      {
-        header,
-        listToggle: listToggle.toggle,
-        dragHandleProps: drag.dragHandleProps
-      }
-    ),
-    list !== void 0 && listToggle.open ? /* @__PURE__ */ React.createElement(ListArea, { id: listToggle.id, listHeader, list }) : null,
-    /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 flex-1 flex-col" }, children)
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          HeaderRow,
+          {
+            header,
+            listToggle: listToggle.toggle,
+            dragHandleProps: drag.dragHandleProps
+          }
+        ),
+        list !== void 0 && listToggle.open ? /* @__PURE__ */ jsx(ListArea, { id: listToggle.id, listHeader, list }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col", children })
+      ]
+    }
   );
 }
 export {