@invergent/agent-chat-react 1.4.13 → 1.5.0

package/dist/index.cjs

@@ -191,7 +191,7 @@ function Button({
 var Conversation = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   useStickToBottom.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",
@@ -204,7 +204,7 @@ var ConversationContent = ({
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   useStickToBottom.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
   }
 );
@@ -219,15 +219,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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-sm", children: title }),
-        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground text-sm", children: description })
+      icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center size-14 rounded-2xl bg-muted/60 text-muted-foreground/60", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-base text-foreground/80", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground/60 text-sm max-w-sm", children: description })
       ] })
     ] })
   }
@@ -244,7 +244,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,
@@ -306,8 +306,8 @@ var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsxRuntime.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
@@ -321,8 +321,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
     ),
@@ -590,7 +590,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,
@@ -609,7 +609,7 @@ function TimelineContent({
   return /* @__PURE__ */ jsxRuntime.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
     }
@@ -633,7 +633,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",
@@ -648,7 +648,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,
@@ -666,7 +666,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",
@@ -1608,9 +1608,14 @@ function SessionSearchBlock({ tc }) {
     query = args.query ?? "";
   } catch {
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-sm ", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: "Session Search" }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground truncate", children: query ? `"${query}"` : "" })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm py-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-3.5 text-muted-foreground/60 shrink-0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: "Session Search" }),
+    query && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-muted-foreground/70 truncate text-xs italic", children: [
+      "\u201C",
+      query,
+      "\u201D"
+    ] })
   ] });
 }
 function WebToolBlock({ tc }) {
@@ -1627,14 +1632,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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-sm ", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-semibold text-foreground", children: toolLabel }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground truncate", children: displayText })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm py-0.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GlobeIcon, { className: "size-3.5 text-muted-foreground/60 shrink-0" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: toolLabel2 }),
+    displayText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/70 truncate text-xs", children: displayText })
   ] });
 }
 function Dialog({
@@ -3648,38 +3654,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__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "size-3.5 animate-spin text-primary" });
+  if (status === "error") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircleIcon, { className: "size-3.5 text-red-500" });
+  if (status === "cancelled") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircleIcon, { className: "size-3.5 text-muted-foreground/40" });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2Icon, { className: "size-3.5 text-emerald-500" });
+}
 function DefaultToolBlock({ tc }) {
   const [expanded, setExpanded] = react.useState(false);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+  const summary = toolSummary(tc);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border/60 bg-muted/20 overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StatusIcon, { tc }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground", children: toolLabel(tc.toolName) }),
+          summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/70 truncate text-xs flex-1 text-left", children: summary }),
           /* @__PURE__ */ jsxRuntime.jsx(
             lucideReact.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__ */ jsxRuntime.jsx("span", { className: "font-medium text-foreground/80", children: tc.toolName })
+          )
         ]
       }
     ),
-    expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-6 mt-0.5 space-y-1 text-sm ", children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-emerald-600 dark:text-emerald-400", children: "Result:" }),
+    expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-border/40 px-3 py-2 space-y-2", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-emerald-600 dark:text-emerald-400 font-semibold", children: "Result" }),
         "\n",
-        truncate(tc.result, 2e3)
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: truncate(tc.result, 2e3) })
       ] })
     ] })
   ] });
@@ -6138,14 +6180,14 @@ function ChatThread({
     }
     return null;
   }, [messages]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden bg-card text-sm", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-background text-sm", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Conversation, { className: "relative flex-1 min-h-0", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ConversationContent, { className: "mx-auto", children: messages.length === 0 && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(ConversationContent, { className: "mx-auto w-full max-w-3xl", children: messages.length === 0 && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
         ConversationEmptyState,
         {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareIcon, { className: "size-6" }),
-          title: "Hello there!",
-          description: "How can I help you today?"
+          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareIcon, { className: "size-8 opacity-40" }),
+          title: "Start a conversation",
+          description: "Ask me anything \u2014 I can search, analyze, write code, and more."
         }
       ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         groups.map((group) => {
@@ -6193,7 +6235,7 @@ function ChatThread({
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(ConversationScrollButton, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-4xl px-4 pb-4 pt-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-3xl px-6 pb-5 pt-3", children: [
       retryIndicator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(RetryBanner, { indicator: retryIndicator }) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         ChatComposer,
@@ -7835,8 +7877,8 @@ function AgentChat({
         sessionId,
         onFileSelect: handleFileSelect
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex h-full min-h-0 bg-card text-sm text-foreground", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-1 min-h-0 overflow-hidden bg-background text-sm text-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
           ChatThread,
           {
             sessionId,