@invergent/agent-chat-react 1.4.9 → 1.4.11

package/dist/index.d.cts

@@ -371,7 +371,8 @@ interface SessionTreePanelProps {
     /** Treat the root as hidden, so its children appear as top-level rows. */
     hideRoot?: boolean;
     onSessionSelect?: (sessionId: string) => void;
+    onSessionDelete?: (sessionId: string) => void;
 }
-declare function SessionTreePanel({ adapter, sessionId, activeSessionId, agentId, title, sessionListLimit, hideRoot, onSessionSelect, }: SessionTreePanelProps): react_jsx_runtime.JSX.Element | null;
+declare function SessionTreePanel({ adapter, sessionId, activeSessionId, agentId, title, sessionListLimit, hideRoot, onSessionSelect, onSessionDelete, }: SessionTreePanelProps): react_jsx_runtime.JSX.Element | null;
 
 export { AgentChat, type AgentChatAdapter, type AgentChatAdapterContextValue, AgentChatAdapterProvider, type AgentChatArtifactKind, type AgentChatArtifactMeta, type AgentChatArtifactPayload, type AgentChatChartArtifactSpec, type AgentChatClarifyAnswer, type AgentChatClarifyArgs, type AgentChatClarifyChoice, type AgentChatClarifyQuestion, type AgentChatErrorCategory, type AgentChatErrorInfo, type AgentChatEventStream, type AgentChatEventType, type AgentChatExpertFeedbackRating, type AgentChatHtmlArtifactSpec, type AgentChatMarkdownArtifactSpec, type AgentChatMessage, type AgentChatMessageStatus, type AgentChatProps, type AgentChatRole, type AgentChatRuntimeApi, type AgentChatRuntimeEvent, type AgentChatSession, type AgentChatSessionList, type AgentChatSessionTree, type AgentChatSessionTreeNode, type AgentChatSlashCommand, type AgentChatSseMessageEvent, type AgentChatState, type AgentChatSvgArtifactSpec, type AgentChatSystemKind, type AgentChatTableArtifactSpec, type AgentChatTokenUsage, type AgentChatToolCallInfo, type AgentChatWorkspaceEntry, type AgentChatWorkspaceFile, type AgentChatWorkspaceTree, type AgentChatWorkspaceUpload, type ArtifactKind, type ArtifactPayload, type ChartArtifactSpec, type ChatMessage, type ClarifyAnswer, type ClarifyArgs, type ClarifyChoice, type ClarifyQuestion, type ErrorInfo, type HtmlArtifactSpec, type MarkdownArtifactSpec, MessageResponse, type MessageResponseProps, type RetryIndicator, type SessionTree, type SessionTreeNode, SessionTreePanel, type SessionTreePanelProps, type SvgArtifactSpec, type TableArtifactSpec, type TokenUsage, type ToolCallInfo, type WorkspaceEntry, type WorkspaceFile, type WorkspaceTree, type WorkspaceUpload, useAgentChatAdapterContext, useAgentChatRuntime };

package/dist/index.d.ts

@@ -371,7 +371,8 @@ interface SessionTreePanelProps {
     /** Treat the root as hidden, so its children appear as top-level rows. */
     hideRoot?: boolean;
     onSessionSelect?: (sessionId: string) => void;
+    onSessionDelete?: (sessionId: string) => void;
 }
-declare function SessionTreePanel({ adapter, sessionId, activeSessionId, agentId, title, sessionListLimit, hideRoot, onSessionSelect, }: SessionTreePanelProps): react_jsx_runtime.JSX.Element | null;
+declare function SessionTreePanel({ adapter, sessionId, activeSessionId, agentId, title, sessionListLimit, hideRoot, onSessionSelect, onSessionDelete, }: SessionTreePanelProps): react_jsx_runtime.JSX.Element | null;
 
 export { AgentChat, type AgentChatAdapter, type AgentChatAdapterContextValue, AgentChatAdapterProvider, type AgentChatArtifactKind, type AgentChatArtifactMeta, type AgentChatArtifactPayload, type AgentChatChartArtifactSpec, type AgentChatClarifyAnswer, type AgentChatClarifyArgs, type AgentChatClarifyChoice, type AgentChatClarifyQuestion, type AgentChatErrorCategory, type AgentChatErrorInfo, type AgentChatEventStream, type AgentChatEventType, type AgentChatExpertFeedbackRating, type AgentChatHtmlArtifactSpec, type AgentChatMarkdownArtifactSpec, type AgentChatMessage, type AgentChatMessageStatus, type AgentChatProps, type AgentChatRole, type AgentChatRuntimeApi, type AgentChatRuntimeEvent, type AgentChatSession, type AgentChatSessionList, type AgentChatSessionTree, type AgentChatSessionTreeNode, type AgentChatSlashCommand, type AgentChatSseMessageEvent, type AgentChatState, type AgentChatSvgArtifactSpec, type AgentChatSystemKind, type AgentChatTableArtifactSpec, type AgentChatTokenUsage, type AgentChatToolCallInfo, type AgentChatWorkspaceEntry, type AgentChatWorkspaceFile, type AgentChatWorkspaceTree, type AgentChatWorkspaceUpload, type ArtifactKind, type ArtifactPayload, type ChartArtifactSpec, type ChatMessage, type ClarifyAnswer, type ClarifyArgs, type ClarifyChoice, type ClarifyQuestion, type ErrorInfo, type HtmlArtifactSpec, type MarkdownArtifactSpec, MessageResponse, type MessageResponseProps, type RetryIndicator, type SessionTree, type SessionTreeNode, SessionTreePanel, type SessionTreePanelProps, type SvgArtifactSpec, type TableArtifactSpec, type TokenUsage, type ToolCallInfo, type WorkspaceEntry, type WorkspaceFile, type WorkspaceTree, type WorkspaceUpload, useAgentChatAdapterContext, useAgentChatRuntime };

package/dist/index.js

@@ -18,6 +18,7 @@ import Ansi from 'ansi-to-react';
 import { getUsage } from 'tokenlens';
 import { Command as Command$1 } from 'cmdk';
 import { nanoid } from 'nanoid';
+import { formatDistanceToNow } from 'date-fns';
 
 // src/agent-chat.tsx
 var AgentChatAdapterContext = createContext(null);
@@ -7822,32 +7823,31 @@ function mergeTreeNodes(groups) {
   }
   return Array.from(byId.values());
 }
-function statusColor(status) {
-  switch (status) {
-    case "active":
-      return "default";
-    case "completed":
-      return "secondary";
-    case "failed":
-      return "destructive";
-    default:
-      return "outline";
-  }
+function formatSessionTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return formatDistanceToNow(date, { addSuffix: true });
 }
 function TreeNodeRow({
   entry,
   depth,
   activeSessionId,
   canStop,
+  canDelete,
+  deletingSessionId,
   onSelect,
-  onStop
+  onStop,
+  onDelete
 }) {
   const [expanded, setExpanded] = useState(true);
   const hasChildren = entry.children.length > 0;
   const isActive = entry.id === activeSessionId;
   const isRunning = entry.status === "active";
-  const messageCount = entry.messageCount ?? 0;
-  const toolCallCount = entry.toolCallCount ?? 0;
+  const title = entry.title ?? "New session";
+  const subtitle = [
+    entry.model ?? "default",
+    formatSessionTime(entry.updatedAt)
+  ].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -7859,16 +7859,16 @@ function TreeNodeRow({
           if (e.key === "Enter" || e.key === " ") onSelect(entry.id);
         },
         className: cn(
-          "group flex items-center gap-1.5 py-1.5 pr-1 rounded cursor-pointer text-sm transition-colors",
-          isActive ? "bg-line text-foreground" : "hover:bg-input text-subtle hover:text-foreground"
+          "group flex items-center gap-2 w-full py-2 pr-2 text-left cursor-pointer transition-colors border-l-2",
+          isActive ? "bg-line text-foreground border-l-primary" : "bg-transparent text-subtle hover:bg-input hover:text-foreground border-l-transparent"
         ),
-        style: { paddingLeft: `${depth * 12 + 4}px` },
+        style: { paddingLeft: `${depth * 12 + 12}px` },
         children: [
           hasChildren ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "p-0.5 rounded hover:bg-line",
+              className: "p-0.5 rounded hover:bg-line shrink-0",
               onClick: (e) => {
                 e.stopPropagation();
                 setExpanded(!expanded);
@@ -7878,32 +7878,10 @@ function TreeNodeRow({
               children: expanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })
             }
           ) : /* @__PURE__ */ jsx("span", { className: "w-4 h-4 shrink-0" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: entry.title ?? entry.channel ?? "session" }),
-            entry.agentType && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "h-4 px-1.5 text-[10px]", children: entry.agentType }),
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: statusColor(entry.status),
-                className: "h-4 px-1.5 text-[10px]",
-                children: entry.status
-              }
-            )
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm truncate", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-faint truncate", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsxs(
-            "span",
-            {
-              className: "text-xs text-faint shrink-0 tabular-nums",
-              "aria-label": `${messageCount} messages, ${toolCallCount} tool calls`,
-              title: `${messageCount} messages, ${toolCallCount} tool calls`,
-              children: [
-                messageCount,
-                "m/",
-                toolCallCount,
-                "t"
-              ]
-            }
-          ),
           isRunning && canStop && /* @__PURE__ */ jsx(
             "button",
             {
@@ -7917,6 +7895,21 @@ function TreeNodeRow({
               title: "Stop sub-agent",
               children: /* @__PURE__ */ jsx(SquareIcon, { className: "w-3 h-3", fill: "currentColor" })
             }
+          ),
+          canDelete && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "p-1 rounded opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-50 transition-all",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete(entry.id);
+              },
+              "aria-label": "Delete session",
+              title: "Delete session",
+              disabled: deletingSessionId === entry.id,
+              children: /* @__PURE__ */ jsx(Trash2Icon, { className: "w-3 h-3" })
+            }
           )
         ]
       }
@@ -7928,8 +7921,11 @@ function TreeNodeRow({
         depth: depth + 1,
         activeSessionId,
         canStop,
+        canDelete,
+        deletingSessionId,
         onSelect,
-        onStop
+        onStop,
+        onDelete
       },
       child.id
     ))
@@ -7943,15 +7939,20 @@ function SessionTreePanel({
   title = "Running",
   sessionListLimit = DEFAULT_SESSION_LIST_LIMIT,
   hideRoot = false,
-  onSessionSelect
+  onSessionSelect,
+  onSessionDelete
 }) {
   const [nodes, setNodes] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [hasEverLoaded, setHasEverLoaded] = useState(false);
+  const [deletingSessionId, setDeletingSessionId] = useState(
+    null
+  );
   const mounted = useRef(true);
   const requestId = useRef(0);
   const lastFingerprint = useRef("");
+  const resetContext = useRef(null);
   const refetch = useCallback(
     async (opts) => {
       const canLoadSessionList = Boolean(agentId && adapter.listSessions);
@@ -8006,12 +8007,17 @@ function SessionTreePanel({
     };
   }, []);
   useEffect(() => {
-    setNodes([]);
+    const previous = resetContext.current;
+    const shouldReset = !previous || previous.adapter !== adapter || previous.agentId !== agentId || previous.sessionListLimit !== sessionListLimit;
+    resetContext.current = { adapter, agentId, sessionListLimit };
+    if (shouldReset) {
+      setNodes([]);
+      setHasEverLoaded(false);
+      lastFingerprint.current = "";
+    }
     setError(null);
-    setHasEverLoaded(false);
-    lastFingerprint.current = "";
     void refetch();
-  }, [refetch, sessionId]);
+  }, [adapter, agentId, refetch, sessionListLimit]);
   const runningCount = useMemo(
     () => nodes.filter((n) => n.status === "active").length,
     [nodes]
@@ -8042,17 +8048,44 @@ function SessionTreePanel({
     },
     [adapter, refetch]
   );
+  const handleDelete = useCallback(
+    async (id) => {
+      if (!adapter.deleteSession || deletingSessionId) return;
+      setDeletingSessionId(id);
+      try {
+        await adapter.deleteSession({ sessionId: id });
+        onSessionDelete?.(id);
+        await refetch({ silent: true });
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to delete session");
+      } finally {
+        if (mounted.current) setDeletingSessionId(null);
+      }
+    },
+    [adapter, deletingSessionId, onSessionDelete, refetch]
+  );
   if (!hasEverLoaded) return null;
   if (nodes.length === 0) return null;
   const topLevel = hideRoot ? roots.flatMap((r) => r.children) : roots;
   if (topLevel.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: "border-t border-line", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-faint", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 text-xs font-semibold uppercase tracking-wide", children: [
       /* @__PURE__ */ jsx(UsersIcon, { className: "w-3.5 h-3.5" }),
       /* @__PURE__ */ jsx("span", { children: title }),
       runningCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "h-4 px-1.5 text-[10px] ml-auto", children: runningCount })
     ] }),
-    loading && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-faint", children: "Loading..." }),
+    loading && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "px-3 py-2",
+        role: "status",
+        "aria-label": "Loading sessions",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-28" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+        ] })
+      }
+    ),
     error && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-destructive", children: error }),
     !error && /* @__PURE__ */ jsx("div", { className: "px-1 pb-2", children: topLevel.map((entry) => /* @__PURE__ */ jsx(
       TreeNodeRow,
@@ -8061,8 +8094,11 @@ function SessionTreePanel({
         depth: 0,
         activeSessionId: activeSessionId ?? "",
         canStop: Boolean(adapter.stopSession),
+        canDelete: Boolean(adapter.deleteSession),
+        deletingSessionId,
         onSelect: handleSelect,
-        onStop: handleStop
+        onStop: handleStop,
+        onDelete: handleDelete
       },
       entry.id
     )) })