@nextclaw/agent-chat-ui 0.2.20 → 0.2.21

package/dist/index.d.ts

@@ -166,6 +166,13 @@ type ChatFileOperationBlockViewModel = {
     rawText?: string;
     truncated?: boolean;
 };
+type ChatToolActionViewModel = {
+    kind: "open-session";
+    sessionId: string;
+    sessionKind: "child" | "session";
+    label?: string;
+    parentSessionId?: string;
+};
 type ChatToolPartViewModel = {
     kind: "call" | "result";
     toolName: string;
@@ -180,6 +187,7 @@ type ChatToolPartViewModel = {
     titleLabel: string;
     outputLabel: string;
     emptyLabel: string;
+    action?: ChatToolActionViewModel;
     fileOperation?: {
         blocks: ChatFileOperationBlockViewModel[];
     };
@@ -246,6 +254,7 @@ type ChatMessageListProps = {
     hasAssistantDraft: boolean;
     texts: ChatMessageTexts;
     className?: string;
+    onToolAction?: (action: ChatToolActionViewModel) => void;
 };
 
 type ChatInputBarHandle = {
@@ -320,4 +329,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 }) })
         ] })
@@ -3497,7 +3504,10 @@ 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
+}) {
   const input = card.input?.trim() ?? "";
   const output = card.output?.trim() ?? "";
   const isRunning = card.statusTone === "running";
@@ -3532,7 +3542,16 @@ function GenericToolCard({ card }) {
           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
     ] })
   ] });
 }
@@ -3551,7 +3570,10 @@ function isSearchTool(name) {
   const lowered = name.toLowerCase();
   return lowered === "grep_search" || lowered === "find_files" || lowered.includes("search");
 }
-function ChatToolCard({ card }) {
+function ChatToolCard({
+  card,
+  onToolAction
+}) {
   if (isTerminalTool(card.toolName)) {
     return /* @__PURE__ */ jsx24(TerminalExecutionView, { card });
   }
@@ -3561,7 +3583,7 @@ function ChatToolCard({ card }) {
   if (isSearchTool(card.toolName)) {
     return /* @__PURE__ */ jsx24(SearchSnippetView, { card });
   }
-  return /* @__PURE__ */ jsx24(GenericToolCard, { card });
+  return /* @__PURE__ */ jsx24(GenericToolCard, { card, onToolAction });
 }
 
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
@@ -3580,7 +3602,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 } = props;
   const { role } = message;
   const isUser = role === "user";
   const isMessageInProgress = message.status === "pending" || message.status === "streaming";
@@ -3628,7 +3650,7 @@ 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 }) }, `tool-${index}`);
         }
         if (type === "file") {
           return /* @__PURE__ */ jsx26(
@@ -3743,7 +3765,14 @@ 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
+            }
+          ),
           /* @__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.2.21",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",