@copilotz/chat-ui 0.6.2 → 0.6.4

package/dist/index.js

@@ -501,6 +501,7 @@ var CollapsibleContent2 = CollapsiblePrimitive.CollapsibleContent;
 // src/components/chat/AssistantActivity.tsx
 import { Brain, ChevronDown, ChevronRight, LoaderCircle, Sparkles, Wrench } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var ROOT_SPACING_CLASS = "mb-4 w-full max-w-full min-w-0";
 var interpolate = (template, replacements) => Object.entries(replacements).reduce(
   (output, [key, value]) => output.replaceAll(`{{${key}}}`, String(value ?? "")),
   template
@@ -528,45 +529,65 @@ var resolveSummaryLabel = (activity, labels) => {
   }
   return labels?.activityThinking || "Thinking...";
 };
-var getStatusIcon = (toolCall) => {
+var getStatusBadge = (toolCall) => {
   if (toolCall.status === "failed") {
     return /* @__PURE__ */ jsx7(Badge, { variant: "destructive", children: "failed" });
   }
   if (toolCall.status === "completed") {
-    return /* @__PURE__ */ jsx7(Badge, { variant: "secondary", className: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300", children: "done" });
+    return /* @__PURE__ */ jsx7(
+      Badge,
+      {
+        variant: "secondary",
+        className: "bg-emerald-500/10 text-emerald-700 dark:text-emerald-300",
+        children: "done"
+      }
+    );
   }
   if (toolCall.status === "running") {
     return /* @__PURE__ */ jsx7(Badge, { variant: "secondary", className: "bg-primary/10 text-primary", children: "running" });
   }
   return /* @__PURE__ */ jsx7(Badge, { variant: "secondary", children: "pending" });
 };
-var AssistantActivitySkeleton = memo(function AssistantActivitySkeleton2() {
-  return /* @__PURE__ */ jsxs2("div", { className: "mb-3 flex items-center gap-3 rounded-lg border border-border/50 bg-muted/20 px-3 py-2", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx7("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/80 animate-pulse" }),
-      /* @__PURE__ */ jsx7("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/60 animate-pulse [animation-delay:120ms]" }),
-      /* @__PURE__ */ jsx7("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40 animate-pulse [animation-delay:240ms]" })
-    ] }),
-    /* @__PURE__ */ jsx7("div", { className: "h-3 w-28 rounded-full bg-muted animate-pulse" })
-  ] });
-});
-var AssistantActivitySummary = memo(function AssistantActivitySummary2({
+var ActivitySummaryCard = memo(function ActivitySummaryCard2({
   activity,
   labels
 }) {
-  const summaryLabel = useMemo(() => resolveSummaryLabel(activity, labels), [activity, labels]);
+  const label = useMemo(() => resolveSummaryLabel(activity, labels), [activity, labels]);
   const isActive = activity.isActive;
   const icon = activity.summary.kind === "using_tools" ? /* @__PURE__ */ jsx7(Wrench, { className: cn("h-4 w-4 shrink-0", isActive ? "text-primary" : "text-muted-foreground") }) : activity.summary.kind === "preparing_answer" ? /* @__PURE__ */ jsx7(Sparkles, { className: cn("h-4 w-4 shrink-0", isActive ? "text-primary" : "text-muted-foreground") }) : /* @__PURE__ */ jsx7(Brain, { className: cn("h-4 w-4 shrink-0", isActive ? "text-primary" : "text-muted-foreground") });
-  return /* @__PURE__ */ jsxs2("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__ */ jsx7("span", { className: "min-w-0 flex-1 truncate", children: summaryLabel }),
-    isActive && /* @__PURE__ */ jsx7(LoaderCircle, { className: "h-4 w-4 shrink-0 animate-spin text-primary" })
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsx7("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        isActive && /* @__PURE__ */ jsx7(LoaderCircle, { className: "h-4 w-4 shrink-0 animate-spin text-primary" })
+      ]
+    }
+  );
+});
+var ActivitySummaryRow = memo(function ActivitySummaryRow2({
+  activity,
+  labels,
+  hasDetails,
+  open
+}) {
+  if (!hasDetails) {
+    return /* @__PURE__ */ jsx7("div", { className: "block w-full min-w-0", children: /* @__PURE__ */ jsx7(ActivitySummaryCard, { activity, labels }) });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: "grid w-full min-w-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2", children: [
+    /* @__PURE__ */ jsx7("div", { className: "min-w-0", children: /* @__PURE__ */ jsx7(ActivitySummaryCard, { activity, labels }) }),
+    /* @__PURE__ */ jsx7(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs2(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__ */ jsx7(ChevronDown, { className: "ml-1 h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(ChevronRight, { className: "ml-1 h-3.5 w-3.5" })
+    ] }) })
   ] });
 });
-var AssistantActivityDetails = memo(function AssistantActivityDetails2({
+var ActivityDetails = memo(function ActivityDetails2({
   activity
 }) {
   return /* @__PURE__ */ jsxs2("div", { className: "space-y-3 pt-3", children: [
@@ -579,7 +600,7 @@ var AssistantActivityDetails = memo(function AssistantActivityDetails2({
       activity.toolCalls.map((toolCall) => /* @__PURE__ */ jsx7(Card, { className: "border-border/60 bg-background/70", children: /* @__PURE__ */ jsxs2(CardContent, { className: "space-y-2 px-3 py-3", children: [
         /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-3", children: [
           /* @__PURE__ */ jsx7("div", { className: "min-w-0", children: /* @__PURE__ */ jsx7("div", { className: "truncate text-sm font-medium", children: toolCall.name }) }),
-          getStatusIcon(toolCall)
+          getStatusBadge(toolCall)
         ] }),
         /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsxs2("div", { children: [
@@ -595,6 +616,16 @@ var AssistantActivityDetails = memo(function AssistantActivityDetails2({
     ] })
   ] });
 });
+var ActivitySkeleton = memo(function ActivitySkeleton2() {
+  return /* @__PURE__ */ jsx7("div", { className: ROOT_SPACING_CLASS, children: /* @__PURE__ */ jsxs2("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__ */ jsxs2("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx7("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/80 animate-pulse" }),
+      /* @__PURE__ */ jsx7("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/60 animate-pulse [animation-delay:120ms]" }),
+      /* @__PURE__ */ jsx7("span", { className: "inline-block h-2 w-2 rounded-full bg-primary/40 animate-pulse [animation-delay:240ms]" })
+    ] }),
+    /* @__PURE__ */ jsx7("div", { className: "h-3 w-28 rounded-full bg-muted animate-pulse" })
+  ] }) });
+});
 var AssistantActivity = memo(function AssistantActivity2({
   activity,
   displayMode,
@@ -602,30 +633,36 @@ var AssistantActivity = memo(function AssistantActivity2({
 }) {
   if (!activity) return null;
   if (displayMode === "hidden") {
-    return activity.isActive ? /* @__PURE__ */ jsx7(AssistantActivitySkeleton, {}) : null;
+    return activity.isActive ? /* @__PURE__ */ jsx7(ActivitySkeleton, {}) : null;
   }
   if (displayMode === "summary") {
-    if (!activity.isActive && activity.isComplete) return null;
-    return /* @__PURE__ */ jsx7("div", { className: "mb-3 w-full", children: /* @__PURE__ */ jsx7(AssistantActivitySummary, { activity, labels }) });
+    if (!activity.isActive && activity.isComplete) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx7("div", { className: ROOT_SPACING_CLASS, children: /* @__PURE__ */ jsx7(ActivitySummaryCard, { activity, labels }) });
   }
   const hasDetails = Boolean(activity.reasoning) || Boolean(activity.toolCalls?.length);
-  const defaultOpen = activity.isActive && hasDetails;
-  const [open, setOpen] = useState(defaultOpen);
+  const [open, setOpen] = useState(activity.isActive && hasDetails);
   useEffect(() => {
     if (activity.isActive && hasDetails) {
       setOpen(true);
     }
   }, [activity.isActive, hasDetails]);
-  return /* @__PURE__ */ jsx7("div", { className: "mb-3 w-full", children: /* @__PURE__ */ jsx7(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex w-full items-center gap-2", children: [
-      /* @__PURE__ */ jsx7("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx7(AssistantActivitySummary, { activity, labels }) }),
-      hasDetails && /* @__PURE__ */ jsx7(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs2(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__ */ jsx7(ChevronDown, { className: "ml-1 h-3.5 w-3.5" }) : /* @__PURE__ */ jsx7(ChevronRight, { className: "ml-1 h-3.5 w-3.5" })
-      ] }) })
-    ] }),
-    hasDetails && /* @__PURE__ */ jsx7(CollapsibleContent2, { className: "overflow-hidden rounded-lg border border-border/60 bg-muted/10 px-3", children: /* @__PURE__ */ jsx7(AssistantActivityDetails, { activity }) })
-  ] }) }) });
+  if (!hasDetails) {
+    return /* @__PURE__ */ jsx7("div", { className: ROOT_SPACING_CLASS, children: /* @__PURE__ */ jsx7(ActivitySummaryCard, { activity, labels }) });
+  }
+  return /* @__PURE__ */ jsx7(Collapsible, { open, onOpenChange: setOpen, className: ROOT_SPACING_CLASS, children: /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx7(
+      ActivitySummaryRow,
+      {
+        activity,
+        labels,
+        hasDetails,
+        open
+      }
+    ),
+    /* @__PURE__ */ jsx7(CollapsibleContent2, { className: "w-full overflow-hidden rounded-lg border border-border/60 bg-muted/10 px-3", children: /* @__PURE__ */ jsx7(ActivityDetails, { activity }) })
+  ] }) });
 });
 
 // src/components/chat/Message.tsx