@copilotz/chat-ui 0.6.3 → 0.6.5

package/dist/index.cjs

@@ -542,6 +542,8 @@ var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 // src/components/chat/AssistantActivity.tsx
 var import_lucide_react = require("lucide-react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var ROOT_SPACING_CLASS = "mb-4 w-full max-w-full min-w-0";
+var ACTION_SLOT_CLASS = "inline-flex h-9 min-w-[132px] items-center justify-end px-2 text-xs";
 var interpolate = (template, replacements) => Object.entries(replacements).reduce(
   (output, [key, value]) => output.replaceAll(`{{${key}}}`, String(value ?? "")),
   template
@@ -569,45 +571,65 @@ var resolveSummaryLabel = (activity, labels) => {
   }
   return labels?.activityThinking || "Thinking...";
 };
-var getStatusIcon = (toolCall) => {
+var getStatusBadge = (toolCall) => {
   if (toolCall.status === "failed") {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { variant: "destructive", children: "failed" });
   }
   if (toolCall.status === "completed") {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { variant: "secondary", className: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300", children: "done" });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      Badge,
+      {
+        variant: "secondary",
+        className: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+        children: "done"
+      }
+    );
   }
   if (toolCall.status === "running") {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { variant: "secondary", className: "bg-primary/10 text-primary", children: "running" });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Badge, { variant: "secondary", children: "pending" });
 };
-var AssistantActivitySkeleton = (0, import_react.memo)(function AssistantActivitySkeleton2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mb-4 flex items-center gap-3 rounded-lg border border-border/50 bg-muted/20 px-3 py-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/80 animate-pulse" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/60 animate-pulse [animation-delay:120ms]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40 animate-pulse [animation-delay:240ms]" })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-3 w-28 rounded-full bg-muted animate-pulse" })
-  ] });
-});
-var AssistantActivitySummary = (0, import_react.memo)(function AssistantActivitySummary2({
+var ActivitySummaryCard = (0, import_react.memo)(function ActivitySummaryCard2({
   activity,
   labels
 }) {
-  const summaryLabel = (0, import_react.useMemo)(() => resolveSummaryLabel(activity, labels), [activity, labels]);
+  const label = (0, import_react.useMemo)(() => resolveSummaryLabel(activity, labels), [activity, labels]);
   const isActive = activity.isActive;
   const icon = activity.summary.kind === "using_tools" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Wrench, { className: cn("h-4 w-4 shrink-0", isActive ? "text-primary" : "text-muted-foreground") }) : activity.summary.kind === "preparing_answer" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Sparkles, { className: cn("h-4 w-4 shrink-0", isActive ? "text-primary" : "text-muted-foreground") }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.Brain, { className: cn("h-4 w-4 shrink-0", isActive ? "text-primary" : "text-muted-foreground") });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn(
-    "flex w-full min-w-0 items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors",
-    isActive ? "border-primary/30 bg-primary/5 text-foreground" : "border-border/60 bg-muted/20 text-muted-foreground"
-  ), children: [
-    icon,
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 flex-1 truncate", children: summaryLabel }),
-    isActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.LoaderCircle, { className: "h-4 w-4 shrink-0 animate-spin text-primary" })
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex w-full min-w-0 items-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors",
+        isActive ? "border-primary/30 bg-primary/5 text-foreground" : "border-border/60 bg-muted/20 text-muted-foreground"
+      ),
+      children: [
+        icon,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        isActive && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.LoaderCircle, { className: "h-4 w-4 shrink-0 animate-spin text-primary" })
+      ]
+    }
+  );
+});
+var ActivitySummaryRow = (0, import_react.memo)(function ActivitySummaryRow2({
+  activity,
+  labels,
+  hasDetails,
+  open
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActivitySummaryCard, { activity, labels }) }),
+    hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Button, { variant: "ghost", size: "sm", className: cn(ACTION_SLOT_CLASS, "shrink-0 text-muted-foreground"), children: [
+      open ? labels?.activityHideDetails || "Hide details" : labels?.activityShowDetails || "Show details",
+      open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronDown, { className: "ml-1 h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronRight, { className: "ml-1 h-3.5 w-3.5" })
+    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "aria-hidden": "true", className: cn(ACTION_SLOT_CLASS, "pointer-events-none invisible shrink-0"), children: [
+      labels?.activityShowDetails || "Show details",
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronRight, { className: "ml-1 h-3.5 w-3.5" })
+    ] })
   ] });
 });
-var AssistantActivityDetails = (0, import_react.memo)(function AssistantActivityDetails2({
+var ActivityDetails = (0, import_react.memo)(function ActivityDetails2({
   activity
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-3 pt-3", children: [
@@ -620,7 +642,7 @@ var AssistantActivityDetails = (0, import_react.memo)(function AssistantActivity
       activity.toolCalls.map((toolCall) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Card, { className: "border-border/60 bg-background/70", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardContent, { className: "space-y-2 px-3 py-3", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "truncate text-sm font-medium", children: toolCall.name }) }),
-          getStatusIcon(toolCall)
+          getStatusBadge(toolCall)
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
@@ -636,6 +658,16 @@ var AssistantActivityDetails = (0, import_react.memo)(function AssistantActivity
     ] })
   ] });
 });
+var ActivitySkeleton = (0, import_react.memo)(function ActivitySkeleton2() {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: ROOT_SPACING_CLASS, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex w-full min-w-0 items-center gap-3 rounded-lg border border-border/50 bg-muted/20 px-3 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/80 animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/60 animate-pulse [animation-delay:120ms]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40 animate-pulse [animation-delay:240ms]" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-3 w-28 rounded-full bg-muted animate-pulse" })
+  ] }) });
+});
 var AssistantActivity = (0, import_react.memo)(function AssistantActivity2({
   activity,
   displayMode,
@@ -643,30 +675,41 @@ var AssistantActivity = (0, import_react.memo)(function AssistantActivity2({
 }) {
   if (!activity) return null;
   if (displayMode === "hidden") {
-    return activity.isActive ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AssistantActivitySkeleton, {}) : null;
+    return activity.isActive ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActivitySkeleton, {}) : null;
   }
   if (displayMode === "summary") {
-    if (!activity.isActive && activity.isComplete) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mb-4 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AssistantActivitySummary, { activity, labels }) });
+    if (!activity.isActive && activity.isComplete) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: ROOT_SPACING_CLASS, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActivitySummaryCard, { activity, labels }) });
   }
   const hasDetails = Boolean(activity.reasoning) || Boolean(activity.toolCalls?.length);
-  const defaultOpen = activity.isActive && hasDetails;
-  const [open, setOpen] = (0, import_react.useState)(defaultOpen);
+  const [open, setOpen] = (0, import_react.useState)(activity.isActive && hasDetails);
   (0, import_react.useEffect)(() => {
     if (activity.isActive && hasDetails) {
       setOpen(true);
     }
   }, [activity.isActive, hasDetails]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mb-4 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "grid w-full grid-cols-[minmax(0,1fr)_auto] items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-w-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AssistantActivitySummary, { activity, labels }) }),
-      hasDetails && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Button, { variant: "ghost", size: "sm", className: "h-9 shrink-0 px-2 text-xs text-muted-foreground", children: [
-        open ? labels?.activityHideDetails || "Hide details" : labels?.activityShowDetails || "Show details",
-        open ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronDown, { className: "ml-1 h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react.ChevronRight, { className: "ml-1 h-3.5 w-3.5" })
-      ] }) })
-    ] }),
-    hasDetails && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapsibleContent2, { className: "overflow-hidden rounded-lg border border-border/60 bg-muted/10 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AssistantActivityDetails, { activity }) })
-  ] }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    Collapsible,
+    {
+      open: hasDetails ? open : false,
+      onOpenChange: hasDetails ? setOpen : void 0,
+      className: ROOT_SPACING_CLASS,
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          ActivitySummaryRow,
+          {
+            activity,
+            labels,
+            hasDetails,
+            open
+          }
+        ),
+        hasDetails && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CollapsibleContent2, { className: "w-full overflow-hidden rounded-lg border border-border/60 bg-muted/10 px-3", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ActivityDetails, { activity }) })
+      ] })
+    }
+  );
 });
 
 // src/components/chat/Message.tsx
@@ -5004,6 +5047,25 @@ function getMessageSpeakerKey(message) {
   }
   return message.role;
 }
+function getAssistantSpeakerTokens(message) {
+  if (!message || message.role !== "assistant") return [];
+  const rawTokens = [message.senderAgentId, message.senderName].filter((value) => typeof value === "string" && value.trim().length > 0).map((value) => value.trim().toLowerCase());
+  if (rawTokens.length > 0) {
+    return Array.from(new Set(rawTokens));
+  }
+  return ["assistant"];
+}
+function canGroupMessages(previous, next) {
+  if (previous.role !== next.role) {
+    return false;
+  }
+  if (previous.role !== "assistant") {
+    return getMessageSpeakerKey(previous) === getMessageSpeakerKey(next);
+  }
+  const previousTokens = getAssistantSpeakerTokens(previous);
+  const nextTokens = getAssistantSpeakerTokens(next);
+  return previousTokens.some((token) => nextTokens.includes(token));
+}
 var mergeToolCalls = (activities) => {
   const merged = /* @__PURE__ */ new Map();
   for (const activity of activities) {
@@ -5069,7 +5131,7 @@ var groupMessagesForRender = (messages) => {
   for (let index = 1; index < messages.length; index++) {
     const previous = currentGroup[currentGroup.length - 1];
     const next = messages[index];
-    if (previous.role === next.role && getMessageSpeakerKey(previous) === getMessageSpeakerKey(next)) {
+    if (canGroupMessages(previous, next)) {
       currentGroup.push(next);
       continue;
     }