@nextclaw/agent-chat-ui 0.2.5 → 0.2.7

package/dist/index.d.ts

@@ -23,15 +23,15 @@ type ChatSelectedItem = {
     key: string;
     label: string;
 };
-type ChatComposerTokenKind = 'skill' | 'file';
+type ChatComposerTokenKind = "skill" | "file";
 type ChatComposerTextNode = {
     id: string;
-    type: 'text';
+    type: "text";
     text: string;
 };
 type ChatComposerTokenNode = {
     id: string;
-    type: 'token';
+    type: "token";
     tokenKind: ChatComposerTokenKind;
     tokenKey: string;
     label: string;
@@ -41,8 +41,8 @@ type ChatComposerSelection = {
     start: number;
     end: number;
 };
-type ChatToolbarIcon = 'sparkles' | 'brain';
-type ChatToolbarAccessoryIcon = ChatToolbarIcon | 'paperclip';
+type ChatToolbarIcon = "sparkles" | "brain";
+type ChatToolbarAccessoryIcon = ChatToolbarIcon | "paperclip";
 type ChatToolbarSelectOption = {
     value: string;
     label: string;
@@ -106,7 +106,7 @@ type ChatInputBarToolbarProps = {
     actions: ChatInputBarActionsProps;
 };
 type ChatInlineHint = {
-    tone: 'neutral' | 'warning';
+    tone: "neutral" | "warning";
     loading?: boolean;
     text?: string;
     actionLabel?: string;
@@ -118,7 +118,7 @@ type ChatSlashMenuProps = {
     items: ChatSlashItem[];
     activeIndex: number;
     activeItem: ChatSlashItem | null;
-    texts: Pick<ChatTexts, 'slashLoadingLabel' | 'slashSectionLabel' | 'slashEmptyLabel' | 'slashHintLabel' | 'slashSkillHintLabel'>;
+    texts: Pick<ChatTexts, "slashLoadingLabel" | "slashSectionLabel" | "slashEmptyLabel" | "slashHintLabel" | "slashSkillHintLabel">;
     onSelectItem: (item: ChatSlashItem) => void;
     onOpenChange: (open: boolean) => void;
     onSetActiveIndex: (index: number) => void;
@@ -132,41 +132,47 @@ type ChatInputBarProps = {
         onFilesAdd?: (files: File[]) => Promise<void> | void;
         onSlashQueryChange?: (query: string | null) => void;
     };
-    slashMenu: Pick<ChatSlashMenuProps, 'isLoading' | 'items' | 'texts'>;
+    slashMenu: Pick<ChatSlashMenuProps, "isLoading" | "items" | "texts">;
     hint?: ChatInlineHint | null;
     toolbar: ChatInputBarToolbarProps;
 };
-type ChatMessageRole = 'user' | 'assistant' | 'tool' | 'system' | 'message';
+type ChatMessageRole = "user" | "assistant" | "tool" | "system" | "message";
 type ChatToolPartViewModel = {
-    kind: 'call' | 'result';
+    kind: "call" | "result";
     toolName: string;
     summary?: string;
     output?: string;
     hasResult: boolean;
+    statusTone: "running" | "success" | "error" | "cancelled";
+    statusLabel: string;
     titleLabel: string;
+    inputLabel: string;
     outputLabel: string;
     emptyLabel: string;
+    callIdLabel: string;
+    callId?: string;
 };
 type ChatMessagePartViewModel = {
-    type: 'markdown';
+    type: "markdown";
     text: string;
 } | {
-    type: 'reasoning';
+    type: "reasoning";
     text: string;
     label: string;
 } | {
-    type: 'tool-card';
+    type: "tool-card";
     card: ChatToolPartViewModel;
 } | {
-    type: 'file';
+    type: "file";
     file: {
         label: string;
         mimeType: string;
         dataUrl?: string;
+        sizeBytes?: number;
         isImage: boolean;
     };
 } | {
-    type: 'unknown';
+    type: "unknown";
     label: string;
     rawType: string;
     text?: string;

package/dist/index.js

@@ -2240,9 +2240,24 @@ function ChatReasoningBlock(props) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-tool-card.tsx
-import { Clock3, FileSearch, Globe, Search as Search2, SendHorizontal, Terminal, Wrench as Wrench2 } from "lucide-react";
+import { AlertCircle, CheckCircle2, CircleSlash, Clock3, FileSearch, Globe, Loader2, Search as Search2, SendHorizontal, Terminal, Wrench as Wrench2 } from "lucide-react";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var TOOL_OUTPUT_PREVIEW_MAX = 220;
+var TOOL_CALL_ID_PREVIEW_MAX = 18;
+var STATUS_STYLES = {
+  running: {
+    text: "text-amber-700/80"
+  },
+  success: {
+    text: "text-amber-700/80"
+  },
+  error: {
+    text: "text-amber-700/80"
+  },
+  cancelled: {
+    text: "text-amber-700/80"
+  }
+};
 function renderToolIcon(toolName) {
   const lowered = toolName.toLowerCase();
   if (lowered.includes("exec") || lowered.includes("shell") || lowered.includes("command")) {
@@ -2265,18 +2280,50 @@ function renderToolIcon(toolName) {
   }
   return /* @__PURE__ */ jsx17(Wrench2, { className: "h-3.5 w-3.5" });
 }
+function truncateMiddle(value, maxLength = TOOL_CALL_ID_PREVIEW_MAX) {
+  if (value.length <= maxLength) {
+    return value;
+  }
+  const head = Math.ceil((maxLength - 1) / 2);
+  const tail = Math.floor((maxLength - 1) / 2);
+  return `${value.slice(0, head)}\u2026${value.slice(value.length - tail)}`;
+}
+function renderStatusMeta(card) {
+  const style = STATUS_STYLES[card.statusTone];
+  if (card.statusTone === "running") {
+    return /* @__PURE__ */ jsxs10("span", { className: cn("inline-flex items-center gap-1 text-[11px] font-medium leading-none", style.text), children: [
+      /* @__PURE__ */ jsx17(Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+      card.statusLabel
+    ] });
+  }
+  const icon = card.statusTone === "success" ? /* @__PURE__ */ jsx17(CheckCircle2, { className: "h-3.5 w-3.5" }) : card.statusTone === "error" ? /* @__PURE__ */ jsx17(AlertCircle, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx17(CircleSlash, { className: "h-3.5 w-3.5" });
+  return /* @__PURE__ */ jsxs10("span", { className: cn("inline-flex items-center gap-1 text-[11px] font-medium leading-none", style.text), children: [
+    icon,
+    card.statusTone === "success" ? null : card.statusLabel
+  ] });
+}
 function ChatToolCard({ card }) {
   const output = card.output?.trim() ?? "";
   const showDetails = output.length > TOOL_OUTPUT_PREVIEW_MAX || output.includes("\n");
   const preview = showDetails ? `${output.slice(0, TOOL_OUTPUT_PREVIEW_MAX)}...` : output;
   const showOutputSection = card.kind === "result" || card.hasResult;
+  const statusStyle = STATUS_STYLES[card.statusTone];
   return /* @__PURE__ */ jsxs10("div", { className: "rounded-xl border border-amber-200/80 bg-amber-50/60 px-3 py-2.5", children: [
     /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2 text-xs font-semibold text-amber-800", children: [
       renderToolIcon(card.toolName),
       /* @__PURE__ */ jsx17("span", { children: card.titleLabel }),
-      /* @__PURE__ */ jsx17("span", { className: "font-mono text-[11px] text-amber-900/80", children: card.toolName })
+      /* @__PURE__ */ jsx17("span", { className: "font-mono text-[11px] text-amber-900/80", children: card.toolName }),
+      renderStatusMeta(card)
     ] }),
-    card.summary ? /* @__PURE__ */ jsx17("div", { className: "mt-1 break-words font-mono text-[11px] text-amber-800/90", children: card.summary }) : null,
+    card.summary ? /* @__PURE__ */ jsxs10("div", { className: "mt-1", children: [
+      /* @__PURE__ */ jsx17("div", { className: "text-[10px] text-amber-700/75", children: card.inputLabel }),
+      /* @__PURE__ */ jsx17("div", { className: "break-words font-mono text-[11px] text-amber-800/90", children: card.summary })
+    ] }) : null,
+    card.callId ? /* @__PURE__ */ jsxs10("div", { className: cn("mt-1 text-[10px]", statusStyle.text), children: [
+      /* @__PURE__ */ jsx17("span", { children: card.callIdLabel }),
+      /* @__PURE__ */ jsx17("span", { children: ": " }),
+      /* @__PURE__ */ jsx17("span", { className: "font-mono", children: truncateMiddle(card.callId) })
+    ] }) : null,
     showOutputSection ? /* @__PURE__ */ jsx17("div", { className: "mt-2", children: !output ? /* @__PURE__ */ jsx17("div", { className: "text-[11px] text-amber-700/80", children: card.emptyLabel }) : showDetails ? /* @__PURE__ */ jsxs10("details", { className: "group", children: [
       /* @__PURE__ */ jsx17("summary", { className: "cursor-pointer text-[11px] text-amber-700", children: card.outputLabel }),
       /* @__PURE__ */ jsx17("pre", { className: "mt-2 whitespace-pre-wrap break-words rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] text-amber-900", children: output })

package/package.json

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