@invergent/agent-chat-react 1.4.13 → 1.5.0

package/dist/index.js

@@ -4,7 +4,7 @@ import { Collapsible as Collapsible$1, Slot, Dialog as Dialog$1, ScrollArea as S
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, ChevronRightIcon, GitBranchIcon, XIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, Loader2Icon, ListTodoIcon, Code, CheckIcon, CopyIcon, TerminalIcon, Trash2Icon, CircleDotIcon, CircleCheckIcon, CircleXIcon, SkullIcon, ClockIcon, CheckCircle2Icon, XCircleIcon, CheckCircleIcon, CircleIcon, UsersIcon, MessageSquareIcon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, SquareIcon, ArrowDownIcon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, Maximize2Icon, FolderIcon, FileIcon, PlusIcon, CornerDownLeftIcon } from 'lucide-react';
+import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, ChevronRightIcon, GitBranchIcon, XIcon, ThumbsUpIcon, ThumbsDownIcon, ActivityIcon, Loader2Icon, GlobeIcon, SearchIcon, ListTodoIcon, XCircleIcon, CheckCircle2Icon, Code, CheckIcon, CopyIcon, TerminalIcon, Trash2Icon, CircleDotIcon, CircleCheckIcon, CircleXIcon, SkullIcon, ClockIcon, CheckCircleIcon, CircleIcon, UsersIcon, MessageSquareIcon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, SquareIcon, ArrowDownIcon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, Maximize2Icon, FolderIcon, FileIcon, PlusIcon, CornerDownLeftIcon } from 'lucide-react';
 import { StickToBottom, useStickToBottomContext } from 'use-stick-to-bottom';
 import { cjk } from '@streamdown/cjk';
 import { code } from '@streamdown/code';
@@ -86,7 +86,7 @@ function Button({
 var Conversation = ({ className, ...props }) => /* @__PURE__ */ jsx(
   StickToBottom,
   {
-    className: cn("relative flex-1 overflow-y-hidden", className),
+    className: cn("relative flex-1 overflow-y-auto", className),
     initial: "smooth",
     resize: "smooth",
     role: "log",
@@ -99,7 +99,7 @@ var ConversationContent = ({
 }) => /* @__PURE__ */ jsx(
   StickToBottom.Content,
   {
-    className: cn("flex flex-col gap-4 py-4 px-8", className),
+    className: cn("flex flex-col gap-6 py-6 px-6", className),
     ...props
   }
 );
@@ -114,15 +114,15 @@ var ConversationEmptyState = ({
   "div",
   {
     className: cn(
-      "flex size-full flex-col items-center justify-center gap-3 p-8 text-center",
+      "flex size-full flex-col items-center justify-center gap-4 p-8 text-center",
       className
     ),
     ...props,
     children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-      icon && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: icon }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx("h3", { className: "font-medium text-sm", children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: description })
+      icon && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center size-14 rounded-2xl bg-muted/60 text-muted-foreground/60", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-base text-foreground/80", children: title }),
+        description && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/60 text-sm max-w-sm", children: description })
       ] })
     ] })
   }
@@ -139,7 +139,7 @@ var ConversationScrollButton = ({
     Button,
     {
       className: cn(
-        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full dark:bg-background dark:hover:bg-muted",
+        "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full shadow-lg border-border/50 dark:bg-background dark:hover:bg-muted",
         className
       ),
       onClick: handleScrollToBottom,
@@ -201,8 +201,8 @@ var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
     className: cn(
-      "group flex w-full max-w-[95%] flex-col gap-2",
-      from === "user" ? "is-user" : "is-assistant",
+      "group flex w-full flex-col gap-2",
+      from === "user" ? "is-user max-w-[85%]" : "is-assistant max-w-full",
       className
     ),
     ...props
@@ -216,8 +216,8 @@ var MessageContent = ({
   "div",
   {
     className: cn(
-      "is-user:dark flex w-full min-w-0 max-w-full flex-col gap-2 overflow-hidden",
-      "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+      "flex w-full min-w-0 max-w-full flex-col gap-2 overflow-hidden break-words",
+      "group-[.is-user]:ml-auto group-[.is-user]:rounded-2xl group-[.is-user]:bg-primary/10 group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground group-[.is-user]:border group-[.is-user]:border-primary/15",
       "group-[.is-assistant]:text-foreground",
       className
     ),
@@ -485,7 +485,7 @@ function Timeline({
         "div",
         {
           className: cn(
-            "group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+            "group/timeline flex flex-col",
             className
           ),
           "data-orientation": orientation,
@@ -504,7 +504,7 @@ function TimelineContent({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("text-foreground text-sm", className),
+      className: cn("text-foreground text-sm min-w-0 overflow-hidden", className),
       "data-slot": "timeline-content",
       ...props
     }
@@ -528,7 +528,7 @@ function TimelineIndicator({
     {
       "aria-hidden": "true",
       className: cn(
-        "border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-0 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:top-1.25 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2",
+        "border-primary/20 group-data-completed/timeline-item:border-primary absolute size-4 rounded-full border-2 top-1.25 -left-6 -translate-x-1/2",
         className
       ),
       "data-slot": "timeline-indicator",
@@ -543,7 +543,7 @@ function TimelineItem({ step, className, ...props }) {
     "div",
     {
       className: cn(
-        "group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-1 flex-col gap-0.5 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=vertical]/timeline:not-last:pb-6",
+        "group/timeline-item has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary relative flex flex-col gap-0.5 ms-8 not-last:pb-6",
         className
       ),
       "data-completed": step <= activeStep || void 0,
@@ -561,7 +561,7 @@ function TimelineSeparator({
     {
       "aria-hidden": "true",
       className: cn(
-        "bg-primary/10 absolute self-start group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=vertical]/timeline:translate-y-4.5",
+        "bg-primary/10 absolute self-start group-last/timeline-item:hidden -left-6 h-[calc(100%-1rem-0.25rem)] w-0.5 -translate-x-1/2 translate-y-4.5",
         className
       ),
       "data-slot": "timeline-separator",
@@ -1503,9 +1503,14 @@ function SessionSearchBlock({ tc }) {
     query = args.query ?? "";
   } catch {
   }
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm ", children: [
-    /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: "Session Search" }),
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate", children: query ? `"${query}"` : "" })
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm py-0.5", children: [
+    /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5 text-muted-foreground/60 shrink-0" }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: "Session Search" }),
+    query && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/70 truncate text-xs italic", children: [
+      "\u201C",
+      query,
+      "\u201D"
+    ] })
   ] });
 }
 function WebToolBlock({ tc }) {
@@ -1522,14 +1527,15 @@ function WebToolBlock({ tc }) {
     }
   } catch {
   }
-  const toolLabel = {
+  const toolLabel2 = {
     web_extract: "Web Fetch",
     web_search: "Web Search",
     web_crawl: "Web Crawl"
   }[tc.toolName] ?? tc.toolName;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm ", children: [
-    /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: toolLabel }),
-    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground truncate", children: displayText })
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm py-0.5", children: [
+    /* @__PURE__ */ jsx(GlobeIcon, { className: "size-3.5 text-muted-foreground/60 shrink-0" }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: toolLabel2 }),
+    displayText && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 truncate text-xs", children: displayText })
   ] });
 }
 function Dialog({
@@ -3543,38 +3549,74 @@ function CoordinatorToolBlock({ tc }) {
     ] })
   ] });
 }
+var TOOL_LABELS = {
+  kb_list_pages: "Knowledge Base",
+  kb_read_page: "Read KB Page",
+  consult_expert: "Expert",
+  delegate_task: "Delegate",
+  memory: "Memory",
+  skills_list: "Skills",
+  skill_view: "Skill",
+  create_artifact: "Artifact",
+  process: "Process"
+};
+function toolLabel(name) {
+  return TOOL_LABELS[name] ?? name.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function toolSummary(tc) {
+  try {
+    const args = JSON.parse(tc.args);
+    if (tc.toolName === "kb_list_pages") return args.kb_id ? `Listing pages` : "";
+    if (tc.toolName === "kb_read_page") return args.path ?? "";
+    if (tc.toolName === "consult_expert") return args.question?.slice(0, 60) ?? "";
+    if (tc.toolName === "memory") return args.action ?? "";
+    return "";
+  } catch {
+    return "";
+  }
+}
+function StatusIcon({ tc }) {
+  const status = effectiveStatus(tc);
+  if (status === "running") return /* @__PURE__ */ jsx(Loader2Icon, { className: "size-3.5 animate-spin text-primary" });
+  if (status === "error") return /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3.5 text-red-500" });
+  if (status === "cancelled") return /* @__PURE__ */ jsx(XCircleIcon, { className: "size-3.5 text-muted-foreground/40" });
+  return /* @__PURE__ */ jsx(CheckCircle2Icon, { className: "size-3.5 text-emerald-500" });
+}
 function DefaultToolBlock({ tc }) {
   const [expanded, setExpanded] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { children: [
+  const summary = toolSummary(tc);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border/60 bg-muted/20 overflow-hidden", children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick: () => setExpanded(!expanded),
         className: cn(
-          "flex w-full items-center gap-1.5 rounded-md px-2 py-1",
-          "text-sm text-muted-foreground hover:bg-muted/50 transition-colors"
+          "flex w-full items-center gap-2 px-3 py-2",
+          "text-sm hover:bg-muted/40 transition-colors cursor-pointer"
         ),
         children: [
+          /* @__PURE__ */ jsx(StatusIcon, { tc }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: toolLabel(tc.toolName) }),
+          summary && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/70 truncate text-xs flex-1 text-left", children: summary }),
           /* @__PURE__ */ jsx(
             ChevronRightIcon,
             {
               className: cn(
-                "size-3 shrink-0 transition-transform duration-150",
+                "size-3.5 shrink-0 text-muted-foreground/50 transition-transform duration-150 ml-auto",
                 expanded && "rotate-90"
               )
             }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/80", children: tc.toolName })
+          )
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxs("div", { className: "ml-6 mt-0.5 space-y-1 text-sm ", children: [
-      /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded bg-muted/40 px-2 py-1 text-muted-foreground whitespace-pre-wrap break-all", children: formatArgs(tc.args) }),
-      tc.result && /* @__PURE__ */ jsxs("pre", { className: "overflow-x-auto rounded bg-muted/40 px-2 py-1 text-muted-foreground whitespace-pre-wrap break-all max-h-64 overflow-y-auto", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-emerald-600 dark:text-emerald-400", children: "Result:" }),
+    expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-border/40 px-3 py-2 space-y-2", children: [
+      /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-md bg-muted/50 px-3 py-2 text-xs text-muted-foreground font-mono whitespace-pre-wrap break-all", children: formatArgs(tc.args) }),
+      tc.result && /* @__PURE__ */ jsxs("pre", { className: "overflow-x-auto rounded-md bg-muted/50 px-3 py-2 text-xs font-mono whitespace-pre-wrap break-all max-h-48 overflow-y-auto", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-emerald-600 dark:text-emerald-400 font-semibold", children: "Result" }),
         "\n",
-        truncate(tc.result, 2e3)
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: truncate(tc.result, 2e3) })
       ] })
     ] })
   ] });
@@ -6033,14 +6075,14 @@ function ChatThread({
     }
     return null;
   }, [messages]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden bg-card text-sm", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-background text-sm", children: [
     /* @__PURE__ */ jsxs(Conversation, { className: "relative flex-1 min-h-0", children: [
-      /* @__PURE__ */ jsx(ConversationContent, { className: "mx-auto", children: messages.length === 0 && !disabled ? /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(ConversationContent, { className: "mx-auto w-full max-w-3xl", children: messages.length === 0 && !disabled ? /* @__PURE__ */ jsx(
         ConversationEmptyState,
         {
-          icon: /* @__PURE__ */ jsx(MessageSquareIcon, { className: "size-6" }),
-          title: "Hello there!",
-          description: "How can I help you today?"
+          icon: /* @__PURE__ */ jsx(MessageSquareIcon, { className: "size-8 opacity-40" }),
+          title: "Start a conversation",
+          description: "Ask me anything \u2014 I can search, analyze, write code, and more."
         }
       ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         groups.map((group) => {
@@ -6088,7 +6130,7 @@ function ChatThread({
       ] }) }),
       /* @__PURE__ */ jsx(ConversationScrollButton, {})
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-4xl px-4 pb-4 pt-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl px-6 pb-5 pt-3", children: [
       retryIndicator && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(RetryBanner, { indicator: retryIndicator }) }),
       /* @__PURE__ */ jsx(
         ChatComposer,
@@ -7730,8 +7772,8 @@ function AgentChat({
         sessionId,
         onFileSelect: handleFileSelect
       },
-      children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("section", { className: "flex h-full min-h-0 bg-card text-sm text-foreground", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs("section", { className: "flex flex-1 min-h-0 overflow-hidden bg-background text-sm text-foreground", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsx(
           ChatThread,
           {
             sessionId,