@nextclaw/agent-chat-ui 0.2.21 → 0.3.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ChatTexts = {
@@ -170,12 +170,14 @@ type ChatToolActionViewModel = {
     kind: "open-session";
     sessionId: string;
     sessionKind: "child" | "session";
+    agentId?: string;
     label?: string;
     parentSessionId?: string;
 };
 type ChatToolPartViewModel = {
     kind: "call" | "result";
     toolName: string;
+    agentId?: string;
     summary?: string;
     inputLabel?: string;
     input?: string;
@@ -255,6 +257,7 @@ type ChatMessageListProps = {
     texts: ChatMessageTexts;
     className?: string;
     onToolAction?: (action: ChatToolActionViewModel) => void;
+    renderToolAgent?: (agentId: string) => ReactNode;
 };
 
 type ChatInputBarHandle = {

package/dist/index.js

@@ -2781,7 +2781,7 @@ function ToolCardContent({ children, className }) {
 }
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-header.tsx
-import { ChevronDown as ChevronDown2, ChevronRight } from "lucide-react";
+import { ArrowUpRight, ChevronDown as ChevronDown2, ChevronRight } from "lucide-react";
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-status.tsx
 import { Check as Check4, Loader2, AlertTriangle, Minus } from "lucide-react";
@@ -2803,12 +2803,38 @@ function ToolStatusLabel({ card }) {
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-header.tsx
 import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+function ToolCardSessionActionButton({
+  action,
+  onAction
+}) {
+  const isChildSession = action.sessionKind === "child";
+  const label = isChildSession ? "Open child session" : "Open session";
+  const handleClick = (event) => {
+    event.stopPropagation();
+    onAction(action);
+  };
+  return /* @__PURE__ */ jsx20(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className: cn(
+        "inline-flex items-center gap-1.5 rounded-full border px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] transition-colors",
+        "border-amber-200/80 bg-white/80 text-amber-800 hover:bg-amber-50"
+      ),
+      "aria-label": label,
+      title: label,
+      children: /* @__PURE__ */ jsx20(ArrowUpRight, { className: "h-3 w-3", strokeWidth: 2.5 })
+    }
+  );
+}
 function ToolCardHeader({
   card,
   icon: Icon2,
   expanded,
   canExpand,
   hideSummary = false,
+  actionSlot,
   onToggle
 }) {
   const summaryPart = hideSummary ? "" : card.summary?.replace(/^(command|path|args|query|input):\s*/i, "") ?? "";
@@ -2832,6 +2858,7 @@ function ToolCardHeader({
           ] })
         ] }),
         /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3 shrink-0", children: [
+          actionSlot,
           /* @__PURE__ */ jsx20(ToolStatusLabel, { card }),
           canExpand && (expanded ? /* @__PURE__ */ jsx20(ChevronDown2, { className: "h-4 w-4 text-amber-400/80", strokeWidth: 3 }) : /* @__PURE__ */ jsx20(ChevronRight, { className: "h-4 w-4 text-amber-400/80", strokeWidth: 3 }))
         ] })
@@ -2839,6 +2866,12 @@ function ToolCardHeader({
     }
   );
 }
+function ToolCardHeaderSessionAction({
+  action,
+  onAction
+}) {
+  return /* @__PURE__ */ jsx20(ToolCardSessionActionButton, { action, onAction });
+}
 
 // src/components/chat/hooks/use-sticky-bottom-scroll.ts
 import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef6 } from "react";
@@ -3506,7 +3539,8 @@ function SearchSnippetView({ card }) {
 }
 function GenericToolCard({
   card,
-  onToolAction
+  onToolAction,
+  renderToolAgent
 }) {
   const input = card.input?.trim() ?? "";
   const output = card.output?.trim() ?? "";
@@ -3529,6 +3563,16 @@ function GenericToolCard({
         icon: Globe,
         expanded,
         canExpand: hasContent || isRunning,
+        actionSlot: card.agentId || card.action && onToolAction ? /* @__PURE__ */ jsxs15(Fragment5, { children: [
+          card.agentId && renderToolAgent ? renderToolAgent(card.agentId) : null,
+          card.action && onToolAction ? /* @__PURE__ */ jsx23(
+            ToolCardHeaderSessionAction,
+            {
+              action: card.action,
+              onAction: onToolAction
+            }
+          ) : null
+        ] }) : void 0,
         onToggle
       }
     ),
@@ -3542,16 +3586,7 @@ function GenericToolCard({
           tone: card.statusTone === "error" ? "error" : "output",
           children: output
         }
-      ),
-      card.action && onToolAction ? /* @__PURE__ */ jsx23("div", { className: "pt-2", children: /* @__PURE__ */ jsx23(
-        "button",
-        {
-          type: "button",
-          onClick: () => onToolAction(card.action),
-          className: "rounded-md border border-amber-300/70 bg-white/80 px-3 py-1.5 text-[11px] font-semibold text-amber-900 transition-colors hover:bg-amber-100/70",
-          children: card.action.sessionKind === "child" ? "Open child session" : "Open session"
-        }
-      ) }) : null
+      )
     ] })
   ] });
 }
@@ -3572,7 +3607,8 @@ function isSearchTool(name) {
 }
 function ChatToolCard({
   card,
-  onToolAction
+  onToolAction,
+  renderToolAgent
 }) {
   if (isTerminalTool(card.toolName)) {
     return /* @__PURE__ */ jsx24(TerminalExecutionView, { card });
@@ -3583,7 +3619,14 @@ function ChatToolCard({
   if (isSearchTool(card.toolName)) {
     return /* @__PURE__ */ jsx24(SearchSnippetView, { card });
   }
-  return /* @__PURE__ */ jsx24(GenericToolCard, { card, onToolAction });
+  return /* @__PURE__ */ jsx24(
+    GenericToolCard,
+    {
+      card,
+      onToolAction,
+      renderToolAgent
+    }
+  );
 }
 
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
@@ -3602,7 +3645,7 @@ function ChatUnknownPart(props) {
 // src/components/chat/ui/chat-message-list/chat-message.tsx
 import { jsx as jsx26 } from "react/jsx-runtime";
 var ChatMessage = memo(function ChatMessage2(props) {
-  const { message, texts, onToolAction } = props;
+  const { message, texts, onToolAction, renderToolAgent } = props;
   const { role } = message;
   const isUser = role === "user";
   const isMessageInProgress = message.status === "pending" || message.status === "streaming";
@@ -3650,7 +3693,14 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "tool-card") {
-          return /* @__PURE__ */ jsx26("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx26(ChatToolCard, { card: part.card, onToolAction }) }, `tool-${index}`);
+          return /* @__PURE__ */ jsx26("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx26(
+            ChatToolCard,
+            {
+              card: part.card,
+              onToolAction,
+              renderToolAgent
+            }
+          ) }, `tool-${index}`);
         }
         if (type === "file") {
           return /* @__PURE__ */ jsx26(
@@ -3770,7 +3820,8 @@ function ChatMessageList(props) {
             {
               message,
               texts: props.texts,
-              onToolAction: props.onToolAction
+              onToolAction: props.onToolAction,
+              renderToolAgent: props.renderToolAgent
             }
           ),
           /* @__PURE__ */ jsx28("div", { className: cn("flex items-center gap-2", isUser && "justify-end"), children: isGenerating ? /* @__PURE__ */ jsx28(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs18(Fragment6, { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/agent-chat-ui",
-  "version": "0.2.21",
+  "version": "0.3.0",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",