@nextclaw/agent-chat-ui 0.2.4 → 0.2.6

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

@@ -1255,30 +1255,9 @@ var ChatComposerSurfaceRenderer = class {
       element.className = this.buildTokenClassName(node.tokenKind, isSelected);
       element.append(this.createTokenIcon(node.tokenKind));
       const label = document.createElement("span");
-      label.className = node.tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-slate-800" : "truncate";
+      label.className = node.tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-slate-700" : "truncate";
       label.textContent = node.label;
       element.append(label);
-      if (node.tokenKind === "file") {
-        const badge = document.createElement("span");
-        badge.className = [
-          "hidden",
-          "shrink-0",
-          "rounded-md",
-          "border",
-          "border-sky-100",
-          "bg-sky-50",
-          "px-1.5",
-          "py-0.5",
-          "text-[9px]",
-          "font-semibold",
-          "uppercase",
-          "tracking-[0.12em]",
-          "text-sky-700",
-          "sm:inline-flex"
-        ].join(" ");
-        badge.textContent = this.resolveFileBadgeLabel(node.label);
-        element.append(badge);
-      }
       return element;
     };
     this.buildTokenClassName = (tokenKind, isSelected) => {
@@ -1286,19 +1265,17 @@ var ChatComposerSurfaceRenderer = class {
         return [
           "mx-[2px]",
           "inline-flex",
-          "h-8",
-          "max-w-[min(100%,19rem)]",
+          "h-7",
+          "max-w-[min(100%,17rem)]",
           "items-center",
-          "gap-2",
-          "rounded-xl",
+          "gap-1.5",
+          "rounded-lg",
           "border",
           "px-2",
-          "pr-2.5",
           "align-baseline",
-          "shadow-[0_1px_2px_rgba(15,23,42,0.06)]",
           "transition-[border-color,background-color,box-shadow,color]",
           "duration-150",
-          isSelected ? "border-sky-300 bg-sky-50 text-slate-900 shadow-[0_0_0_3px_rgba(14,165,233,0.14)]" : "border-slate-200 bg-[linear-gradient(180deg,rgba(255,255,255,1),rgba(248,250,252,0.98))] text-slate-700"
+          isSelected ? "border-slate-300 bg-slate-100 text-slate-800 shadow-[0_0_0_2px_rgba(148,163,184,0.14)]" : "border-slate-200/80 bg-slate-50 text-slate-700"
         ].join(" ");
       }
       return [
@@ -1320,7 +1297,7 @@ var ChatComposerSurfaceRenderer = class {
     };
     this.createTokenIcon = (tokenKind) => {
       const wrapper = document.createElement("span");
-      wrapper.className = tokenKind === "file" ? "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-lg bg-sky-100 text-sky-700" : "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary/70";
+      wrapper.className = tokenKind === "file" ? "inline-flex h-4.5 w-4.5 shrink-0 items-center justify-center rounded-md bg-white text-slate-500 ring-1 ring-black/5" : "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary/70";
       wrapper.append(tokenKind === "file" ? this.createFileIcon() : this.createSkillIcon());
       return wrapper;
     };
@@ -1339,10 +1316,6 @@ var ChatComposerSurfaceRenderer = class {
         { tag: "path", attrs: { d: "M9.75 6.25h.01" } }
       ]);
     };
-    this.resolveFileBadgeLabel = (label) => {
-      const match = /\.([a-z0-9]+)$/i.exec(label.trim());
-      return match?.[1]?.slice(0, 4).toUpperCase() || "IMG";
-    };
     this.createSvgIcon = (children) => {
       const svg = document.createElementNS(SVG_NAMESPACE, "svg");
       svg.setAttribute("viewBox", "0 0 16 16");
@@ -1709,8 +1682,21 @@ var ChatComposerRuntime = class {
       if (!this.rootElement) {
         return;
       }
+      const targetSelection = this.selection;
       this.rootElement.focus();
-      this.viewController.restoreSelectionIfFocused(this.rootElement, this.selection);
+      const restoreSelection2 = () => {
+        if (!this.rootElement) {
+          return;
+        }
+        this.selection = targetSelection;
+        this.selectedRange = targetSelection;
+        this.viewController.restoreSelectionIfFocused(this.rootElement, targetSelection);
+      };
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(restoreSelection2);
+        return;
+      }
+      restoreSelection2();
     };
     this.requireConfig = () => {
       if (!this.config) {
@@ -2204,10 +2190,30 @@ function ChatMessageMarkdown(props) {
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function ChatMessageFile({ file }) {
   if (file.isImage && file.dataUrl) {
-    return /* @__PURE__ */ jsxs8("figure", { className: "overflow-hidden rounded-2xl border border-black/8 bg-black/6", children: [
-      /* @__PURE__ */ jsx15("img", { src: file.dataUrl, alt: file.label, className: "block max-h-80 w-full object-contain" }),
-      /* @__PURE__ */ jsx15("figcaption", { className: "border-t border-black/8 px-3 py-2 text-xs opacity-80", children: file.label })
-    ] });
+    return /* @__PURE__ */ jsx15(
+      "img",
+      {
+        src: file.dataUrl,
+        alt: file.label,
+        className: "block max-h-80 max-w-full rounded-2xl object-contain"
+      }
+    );
+  }
+  if (file.dataUrl) {
+    return /* @__PURE__ */ jsxs8(
+      "a",
+      {
+        href: file.dataUrl,
+        download: file.label,
+        target: "_blank",
+        rel: "noreferrer",
+        className: "block rounded-2xl border border-black/8 bg-black/6 px-3 py-2 text-sm transition hover:bg-black/8",
+        children: [
+          /* @__PURE__ */ jsx15("div", { className: "font-medium", children: file.label }),
+          /* @__PURE__ */ jsx15("div", { className: "text-xs opacity-75", children: file.mimeType })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsxs8("div", { className: "rounded-2xl border border-black/8 bg-black/6 px-3 py-2 text-sm", children: [
     /* @__PURE__ */ jsx15("div", { className: "font-medium", children: file.label }),
@@ -2234,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")) {
@@ -2259,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.4",
+  "version": "0.2.6",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",