@nextclaw/agent-chat-ui 0.2.20 → 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 = {
@@ -166,9 +166,18 @@ type ChatFileOperationBlockViewModel = {
     rawText?: string;
     truncated?: boolean;
 };
+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;
@@ -180,6 +189,7 @@ type ChatToolPartViewModel = {
     titleLabel: string;
     outputLabel: string;
     emptyLabel: string;
+    action?: ChatToolActionViewModel;
     fileOperation?: {
         blocks: ChatFileOperationBlockViewModel[];
     };
@@ -246,6 +256,8 @@ type ChatMessageListProps = {
     hasAssistantDraft: boolean;
     texts: ChatMessageTexts;
     className?: string;
+    onToolAction?: (action: ChatToolActionViewModel) => void;
+    renderToolAgent?: (agentId: string) => ReactNode;
 };
 
 type ChatInputBarHandle = {
@@ -320,4 +332,4 @@ declare function resolveChatComposerSlashTrigger(nodes: ChatComposerNode[], sele
     end: number;
 } | null;
 
-export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatFileOperationBlockViewModel, type ChatFileOperationLineViewModel, type ChatInlineContentSegmentViewModel, type ChatInlineHint, type ChatInlineTokenViewModel, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectGroup, type ChatToolbarSelectOption, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };
+export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatFileOperationBlockViewModel, type ChatFileOperationLineViewModel, type ChatInlineContentSegmentViewModel, type ChatInlineHint, type ChatInlineTokenViewModel, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolActionViewModel, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectGroup, type ChatToolbarSelectOption, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };

package/dist/index.js

@@ -290,13 +290,20 @@ function ChatSlashMenu(props) {
               ] })
             }
           ),
-          /* @__PURE__ */ jsx5("div", { className: "max-w-[320px] p-3.5", children: activeItem ? /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx5("div", { className: "min-w-0 p-2.5", children: activeItem ? /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx5("span", { className: "inline-flex rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary", children: activeItem.subtitle }),
               /* @__PURE__ */ jsx5("span", { className: "text-sm font-semibold text-gray-900", children: activeItem.title })
             ] }),
             /* @__PURE__ */ jsx5("p", { className: "text-xs leading-5 text-gray-600", children: activeItem.description }),
-            /* @__PURE__ */ jsx5("div", { className: "space-y-1", children: activeItem.detailLines.map((line) => /* @__PURE__ */ jsx5("div", { className: "rounded-md bg-gray-50 px-2 py-1 text-[11px] text-gray-600", children: line }, line)) }),
+            /* @__PURE__ */ jsx5("div", { className: "space-y-1", children: activeItem.detailLines.map((line) => /* @__PURE__ */ jsx5(
+              "div",
+              {
+                className: "min-w-0 break-all rounded-md bg-gray-50 px-2 py-1 text-[11px] leading-5 text-gray-600",
+                children: line
+              },
+              line
+            )) }),
             /* @__PURE__ */ jsx5("div", { className: "pt-1 text-[11px] text-gray-500", children: texts.slashSkillHintLabel })
           ] }) : /* @__PURE__ */ jsx5("div", { className: "text-xs text-gray-500", children: texts.slashHintLabel }) })
         ] })
@@ -2774,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";
@@ -2796,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, "") ?? "";
@@ -2825,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 }))
         ] })
@@ -2832,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";
@@ -3497,7 +3537,11 @@ function SearchSnippetView({ card }) {
     expanded && output && /* @__PURE__ */ jsx23(ToolCardContent, { children: /* @__PURE__ */ jsx23("pre", { className: "font-mono text-[12px] text-amber-950/70 whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber leading-relaxed", children: output }) })
   ] });
 }
-function GenericToolCard({ card }) {
+function GenericToolCard({
+  card,
+  onToolAction,
+  renderToolAgent
+}) {
   const input = card.input?.trim() ?? "";
   const output = card.output?.trim() ?? "";
   const isRunning = card.statusTone === "running";
@@ -3519,6 +3563,16 @@ function GenericToolCard({ card }) {
         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
       }
     ),
@@ -3551,7 +3605,11 @@ function isSearchTool(name) {
   const lowered = name.toLowerCase();
   return lowered === "grep_search" || lowered === "find_files" || lowered.includes("search");
 }
-function ChatToolCard({ card }) {
+function ChatToolCard({
+  card,
+  onToolAction,
+  renderToolAgent
+}) {
   if (isTerminalTool(card.toolName)) {
     return /* @__PURE__ */ jsx24(TerminalExecutionView, { card });
   }
@@ -3561,7 +3619,14 @@ function ChatToolCard({ card }) {
   if (isSearchTool(card.toolName)) {
     return /* @__PURE__ */ jsx24(SearchSnippetView, { card });
   }
-  return /* @__PURE__ */ jsx24(GenericToolCard, { card });
+  return /* @__PURE__ */ jsx24(
+    GenericToolCard,
+    {
+      card,
+      onToolAction,
+      renderToolAgent
+    }
+  );
 }
 
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
@@ -3580,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 } = props;
+  const { message, texts, onToolAction, renderToolAgent } = props;
   const { role } = message;
   const isUser = role === "user";
   const isMessageInProgress = message.status === "pending" || message.status === "streaming";
@@ -3628,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 }) }, `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(
@@ -3743,7 +3815,15 @@ function ChatMessageList(props) {
       return /* @__PURE__ */ jsxs18("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
         !isUser ? /* @__PURE__ */ jsx28(ChatMessageAvatar, { role: message.role }) : null,
         /* @__PURE__ */ jsxs18("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
-          /* @__PURE__ */ jsx28(ChatMessage, { message, texts: props.texts }),
+          /* @__PURE__ */ jsx28(
+            ChatMessage,
+            {
+              message,
+              texts: props.texts,
+              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: [
             /* @__PURE__ */ jsx28(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser }),
             !isUser ? /* @__PURE__ */ jsx28(ChatMessageActionCopy, { message, texts: props.texts }) : null

package/package.json

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