@nextclaw/agent-chat-ui 0.2.8 → 0.2.10

package/dist/index.js

@@ -2523,109 +2523,315 @@ function ChatReasoningBlock(props) {
   ] });
 }
 
-// src/components/chat/ui/chat-message-list/chat-tool-card.tsx
-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;
+// src/components/chat/ui/chat-message-list/tool-card/tool-card-views.tsx
+import { Terminal, FileText, Code2, Search as Search2, Globe } from "lucide-react";
+import { useState as useState6, useEffect as useEffect6, useRef as useRef5 } from "react";
+
+// src/components/chat/ui/chat-message-list/tool-card/tool-card-root.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function ToolCardRoot({ children, className }) {
+  return /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: cn(
+        "my-2 rounded-lg border border-amber-200/50 bg-amber-100/30 shadow-sm overflow-hidden text-[12px]",
+        "w-[280px] sm:w-[360px] md:w-[480px] min-w-full max-w-full transition-all flex flex-col",
+        className
+      ),
+      children
+    }
+  );
+}
+function ToolCardContent({ children, className }) {
+  return /* @__PURE__ */ jsx17("div", { className: cn("border-t border-amber-200/15 bg-amber-50/50 p-3 w-full overflow-hidden", className), children });
+}
+
+// src/components/chat/ui/chat-message-list/tool-card/tool-card-header.tsx
+import { 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";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 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"
-  }
+  running: { text: "text-amber-500/80", icon: Loader2, spin: true },
+  success: { text: "text-amber-500/80", icon: Check4, spin: false },
+  error: { text: "text-amber-500/80", icon: AlertTriangle, spin: false },
+  cancelled: { text: "text-amber-500/80", icon: Minus, spin: false }
 };
-function renderToolIcon(toolName) {
-  const lowered = toolName.toLowerCase();
-  if (lowered.includes("exec") || lowered.includes("shell") || lowered.includes("command")) {
-    return /* @__PURE__ */ jsx17(Terminal, { className: "h-3.5 w-3.5" });
-  }
-  if (lowered.includes("search")) {
-    return /* @__PURE__ */ jsx17(Search2, { className: "h-3.5 w-3.5" });
-  }
-  if (lowered.includes("fetch") || lowered.includes("http") || lowered.includes("web")) {
-    return /* @__PURE__ */ jsx17(Globe, { className: "h-3.5 w-3.5" });
-  }
-  if (lowered.includes("read") || lowered.includes("file")) {
-    return /* @__PURE__ */ jsx17(FileSearch, { className: "h-3.5 w-3.5" });
-  }
-  if (lowered.includes("message") || lowered.includes("send")) {
-    return /* @__PURE__ */ jsx17(SendHorizontal, { className: "h-3.5 w-3.5" });
-  }
-  if (lowered.includes("cron") || lowered.includes("schedule")) {
-    return /* @__PURE__ */ jsx17(Clock3, { className: "h-3.5 w-3.5" });
-  }
-  return /* @__PURE__ */ jsx17(Wrench2, { className: "h-3.5 w-3.5" });
+function ToolStatusLabel({ card }) {
+  const style = STATUS_STYLES[card.statusTone] || STATUS_STYLES.cancelled;
+  const Icon2 = style.icon;
+  return /* @__PURE__ */ jsxs10("span", { className: cn("inline-flex items-center gap-1.5 text-[11px] font-medium leading-none shrink-0", style.text), children: [
+    /* @__PURE__ */ jsx18(Icon2, { className: cn("h-3.5 w-3.5", style.spin && "animate-spin"), strokeWidth: 3 }),
+    card.statusTone === "running" ? card.statusLabel : null
+  ] });
 }
-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
+
+// src/components/chat/ui/chat-message-list/tool-card/tool-card-header.tsx
+import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+function ToolCardHeader({
+  card,
+  icon: Icon2,
+  expanded,
+  canExpand,
+  onToggle
+}) {
+  const summaryPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between px-3 py-2.5 transition-colors bg-transparent",
+        canExpand ? "cursor-pointer hover:bg-amber-100/30" : ""
+      ),
+      onClick: onToggle,
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 font-mono min-w-0 max-w-[calc(100%-80px)] text-amber-950/80", children: [
+          /* @__PURE__ */ jsx19(Icon2, { className: "h-4 w-4 text-amber-600/80 shrink-0", strokeWidth: 3 }),
+          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ jsx19("span", { className: "font-bold shrink-0 tracking-tight", children: card.toolName }),
+            summaryPart && /* @__PURE__ */ jsxs11(Fragment2, { children: [
+              /* @__PURE__ */ jsx19("span", { className: "text-amber-300 font-bold select-none shrink-0", children: "\u203A" }),
+              /* @__PURE__ */ jsx19("span", { className: "truncate flex-1 min-w-0 font-normal", title: summaryPart, children: summaryPart })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3 shrink-0", children: [
+          /* @__PURE__ */ jsx19(ToolStatusLabel, { card }),
+          canExpand && (expanded ? /* @__PURE__ */ jsx19(ChevronDown2, { className: "h-4 w-4 text-amber-400/80", strokeWidth: 3 }) : /* @__PURE__ */ jsx19(ChevronRight, { className: "h-4 w-4 text-amber-400/80", strokeWidth: 3 }))
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/chat/ui/chat-message-list/tool-card/tool-card-views.tsx
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+function TerminalExecutionView({ card }) {
+  const output = card.output?.trim() ?? "";
+  const isRunning = card.statusTone === "running";
+  const hasContent = !!(card.summary?.trim() || output.length > 0);
+  const wasEmptyRef = useRef5(!hasContent);
+  const [expanded, setExpanded] = useState6(hasContent && (isRunning || card.statusTone === "error" || output.length < 500));
+  const [hasUserToggled, setHasUserToggled] = useState6(false);
+  const prevRunningRef = useRef5(isRunning);
+  useEffect6(() => {
+    if (wasEmptyRef.current && hasContent && isRunning) {
+      setExpanded(true);
+      wasEmptyRef.current = false;
+    }
+  }, [hasContent, isRunning]);
+  useEffect6(() => {
+    if (prevRunningRef.current && !isRunning && !hasUserToggled) {
+      setExpanded(false);
+    }
+    prevRunningRef.current = isRunning;
+  }, [isRunning, hasUserToggled]);
+  const onToggle = () => {
+    if (!output && !isRunning) return;
+    setExpanded(!expanded);
+    setHasUserToggled(true);
+  };
+  const commandPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
+  return /* @__PURE__ */ jsxs12(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx20(
+      ToolCardHeader,
+      {
+        card,
+        icon: Terminal,
+        expanded,
+        canExpand: !!output || isRunning,
+        onToggle
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs12(Fragment3, { children: [
+      /* @__PURE__ */ jsx20("div", { className: "px-3 pb-0.5 font-mono w-full max-h-48 overflow-y-auto custom-scrollbar-amber min-h-0 text-[12px]", children: /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-2 leading-relaxed", children: [
+        /* @__PURE__ */ jsx20("span", { className: "text-amber-500/50 font-medium shrink-0 select-none mt-[1px]", children: "$" }),
+        /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: commandPart ? /* @__PURE__ */ jsx20("span", { className: "text-amber-950/80 break-words whitespace-pre-wrap tracking-tight font-medium", children: commandPart }) : /* @__PURE__ */ jsx20("div", { className: "h-3 w-32 bg-amber-200/30 rounded animate-pulse mt-2" }) })
+      ] }) }),
+      (output || isRunning && hasContent) && /* @__PURE__ */ jsx20(ToolCardContent, { className: "mt-2", children: /* @__PURE__ */ jsxs12("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,
+        isRunning && /* @__PURE__ */ jsx20("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
+      ] }) })
+    ] })
   ] });
 }
-function ChatToolCard({ card }) {
+function FileOperationView({ card }) {
+  const output = card.output?.trim() ?? "";
+  const isRunning = card.statusTone === "running";
+  const [expanded, setExpanded] = useState6(false);
+  const [hasUserToggled, setHasUserToggled] = useState6(false);
+  const prevRunningRef = useRef5(isRunning);
+  useEffect6(() => {
+    if (prevRunningRef.current && !isRunning && !hasUserToggled) {
+      setExpanded(false);
+    }
+    prevRunningRef.current = isRunning;
+  }, [isRunning, hasUserToggled]);
+  const onToggle = () => {
+    if (!output && !isRunning) return;
+    setExpanded(!expanded);
+    setHasUserToggled(true);
+  };
+  const isEdit = card.toolName === "edit_file" || card.toolName === "write_file";
+  const renderLine = (line, idx) => {
+    if (isEdit) {
+      if (line.startsWith("+") && !line.startsWith("+++")) {
+        return /* @__PURE__ */ jsxs12("div", { className: "bg-emerald-500/10 text-emerald-700 px-2 py-0.5 w-full break-all whitespace-pre-wrap", children: [
+          /* @__PURE__ */ jsx20("span", { className: "select-none opacity-40 mr-2 w-3 inline-block shrink-0", children: "+" }),
+          /* @__PURE__ */ jsx20("span", { children: line.slice(1) })
+        ] }, idx);
+      }
+      if (line.startsWith("-") && !line.startsWith("---")) {
+        return /* @__PURE__ */ jsxs12("div", { className: "bg-rose-500/10 text-rose-700 px-2 py-0.5 w-full break-all whitespace-pre-wrap", children: [
+          /* @__PURE__ */ jsx20("span", { className: "select-none opacity-40 mr-2 w-3 inline-block shrink-0", children: "-" }),
+          /* @__PURE__ */ jsx20("span", { className: "line-through decoration-rose-400/50", children: line.slice(1) })
+        ] }, idx);
+      }
+    }
+    return /* @__PURE__ */ jsxs12("div", { className: "px-2 py-0.5 text-amber-950/80 w-full break-all whitespace-pre-wrap", children: [
+      /* @__PURE__ */ jsx20("span", { className: "select-none opacity-0 mr-2 w-3 inline-block shrink-0", children: " " }),
+      /* @__PURE__ */ jsx20("span", { children: line })
+    ] }, idx);
+  };
+  const lines = output.split("\n");
+  const maxLines = 15;
+  const isLong = lines.length > maxLines;
+  const displayLines = !expanded && isLong ? lines.slice(0, maxLines) : lines;
+  return /* @__PURE__ */ jsxs12(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx20(
+      ToolCardHeader,
+      {
+        card,
+        icon: isEdit ? Code2 : FileText,
+        expanded,
+        canExpand: !!output || isRunning,
+        onToggle
+      }
+    ),
+    expanded && output && /* @__PURE__ */ jsx20(ToolCardContent, { children: /* @__PURE__ */ jsx20("div", { className: "font-mono text-[12px] leading-relaxed py-2 max-h-48 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber text-amber-950/80 w-full px-1", children: displayLines.map(renderLine) }) })
+  ] });
+}
+function SearchSnippetView({ card }) {
+  const isRunning = card.statusTone === "running";
+  const [expanded, setExpanded] = useState6(isRunning);
+  const [hasUserToggled, setHasUserToggled] = useState6(false);
+  const prevRunningRef = useRef5(isRunning);
   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;
+  useEffect6(() => {
+    if (prevRunningRef.current && !isRunning && !hasUserToggled) {
+      setExpanded(false);
+    }
+    prevRunningRef.current = isRunning;
+  }, [isRunning, hasUserToggled]);
+  const onToggle = () => {
+    if (!output && !isRunning) return;
+    setExpanded(!expanded);
+    setHasUserToggled(true);
+  };
+  return /* @__PURE__ */ jsxs12(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx20(
+      ToolCardHeader,
+      {
+        card,
+        icon: Search2,
+        expanded,
+        canExpand: !!output || isRunning,
+        onToggle
+      }
+    ),
+    expanded && output && /* @__PURE__ */ jsx20(ToolCardContent, { children: /* @__PURE__ */ jsx20("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 py-2 leading-relaxed", children: output }) })
+  ] });
+}
+function GenericToolCard({ card }) {
+  const output = card.output?.trim() ?? "";
+  const isRunning = card.statusTone === "running";
+  const [expanded, setExpanded] = useState6(isRunning);
+  const [hasUserToggled, setHasUserToggled] = useState6(false);
+  const prevRunningRef = useRef5(isRunning);
   const showOutputSection = card.kind === "result" || card.hasResult;
-  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 }),
-      renderStatusMeta(card)
-    ] }),
-    card.summary ? /* @__PURE__ */ jsx17("div", { className: "mt-1 break-words font-mono text-[11px] text-amber-800/90", children: card.summary }) : 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 })
-    ] }) : /* @__PURE__ */ jsx17("pre", { className: "rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] whitespace-pre-wrap break-words text-amber-900", children: preview }) }) : null
+  useEffect6(() => {
+    if (prevRunningRef.current && !isRunning && !hasUserToggled) {
+      setExpanded(false);
+    }
+    prevRunningRef.current = isRunning;
+  }, [isRunning, hasUserToggled]);
+  const onToggle = () => {
+    if (!showOutputSection) return;
+    setExpanded(!expanded);
+    setHasUserToggled(true);
+  };
+  return /* @__PURE__ */ jsxs12(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx20(
+      ToolCardHeader,
+      {
+        card,
+        icon: Globe,
+        expanded,
+        canExpand: showOutputSection,
+        onToggle
+      }
+    ),
+    expanded && output && /* @__PURE__ */ jsx20(ToolCardContent, { children: /* @__PURE__ */ jsx20("pre", { className: "mt-1 text-amber-950/80 whitespace-pre-wrap break-all overflow-y-auto overflow-x-hidden max-h-64 custom-scrollbar-amber py-1 w-full min-w-0 max-w-full leading-relaxed", children: output }) })
   ] });
 }
 
+// src/components/chat/ui/chat-message-list/chat-tool-card.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function isTerminalTool(name) {
+  const lowered = name.toLowerCase();
+  return lowered === "exec" || lowered === "execute_command" || lowered === "bash" || lowered === "shell" || lowered.includes("run_");
+}
+function isFileEditTool(name) {
+  const lowered = name.toLowerCase();
+  return lowered === "read_file" || lowered === "write_file" || lowered === "edit_file" || lowered === "apply_patch";
+}
+function isSearchTool(name) {
+  const lowered = name.toLowerCase();
+  return lowered === "grep_search" || lowered === "find_files" || lowered.includes("search");
+}
+function ChatToolCard({ card }) {
+  if (isTerminalTool(card.toolName)) {
+    return /* @__PURE__ */ jsx21(TerminalExecutionView, { card });
+  }
+  if (isFileEditTool(card.toolName)) {
+    return /* @__PURE__ */ jsx21(FileOperationView, { card });
+  }
+  if (isSearchTool(card.toolName)) {
+    return /* @__PURE__ */ jsx21(SearchSnippetView, { card });
+  }
+  return /* @__PURE__ */ jsx21(GenericToolCard, { card });
+}
+
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
-import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function ChatUnknownPart(props) {
-  return /* @__PURE__ */ jsxs11("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "font-semibold text-gray-700", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "font-semibold text-gray-700", children: [
       props.label,
       ": ",
       props.rawType
     ] }),
-    props.text ? /* @__PURE__ */ jsx18("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
+    props.text ? /* @__PURE__ */ jsx22("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/chat-message.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function ChatMessage(props) {
   const { message, texts } = props;
   const { role } = message;
   const isUser = role === "user";
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       className: cn(
         "inline-block w-fit max-w-full rounded-2xl border px-4 py-3 shadow-sm",
         isUser ? "border-primary bg-primary text-white" : role === "assistant" ? "border-gray-200 bg-white text-gray-900" : "border-orange-200/80 bg-orange-50/70 text-gray-900"
       ),
-      children: /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: message.parts.map((part, index) => {
+      children: /* @__PURE__ */ jsx23("div", { className: "space-y-2", children: message.parts.map((part, index) => {
         if (part.type === "markdown") {
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx23(
             ChatMessageMarkdown,
             {
               text: part.text,
@@ -2636,7 +2842,7 @@ function ChatMessage(props) {
           );
         }
         if (part.type === "reasoning") {
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx23(
             ChatReasoningBlock,
             {
               label: part.label,
@@ -2647,10 +2853,10 @@ function ChatMessage(props) {
           );
         }
         if (part.type === "tool-card") {
-          return /* @__PURE__ */ jsx19("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx19(ChatToolCard, { card: part.card }) }, `tool-${index}`);
+          return /* @__PURE__ */ jsx23("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx23(ChatToolCard, { card: part.card }) }, `tool-${index}`);
         }
         if (part.type === "file") {
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx23(
             ChatMessageFile,
             {
               file: part.file,
@@ -2660,7 +2866,7 @@ function ChatMessage(props) {
           );
         }
         if (part.type === "unknown") {
-          return /* @__PURE__ */ jsx19(
+          return /* @__PURE__ */ jsx23(
             ChatUnknownPart,
             {
               label: part.label,
@@ -2677,9 +2883,9 @@ function ChatMessage(props) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-meta.tsx
-import { jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsxs as jsxs14 } from "react/jsx-runtime";
 function ChatMessageMeta(props) {
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       className: cn(
@@ -2696,7 +2902,7 @@ function ChatMessageMeta(props) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-list.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
 function hasRenderableText(value) {
   const trimmed = value.trim();
@@ -2718,36 +2924,36 @@ function ChatMessageList(props) {
   const hasRenderableAssistantDraft = visibleMessages.some(
     (message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending")
   );
-  return /* @__PURE__ */ jsxs13("div", { className: cn("space-y-5", props.className), children: [
+  return /* @__PURE__ */ jsxs15("div", { className: cn("space-y-5", props.className), children: [
     visibleMessages.map((message) => {
       const isUser = message.role === "user";
-      return /* @__PURE__ */ jsxs13("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
-        !isUser ? /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: message.role }) : null,
-        /* @__PURE__ */ jsxs13("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
-          /* @__PURE__ */ jsx20(ChatMessage, { message, texts: props.texts }),
-          /* @__PURE__ */ jsx20(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser })
+      return /* @__PURE__ */ jsxs15("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
+        !isUser ? /* @__PURE__ */ jsx24(ChatMessageAvatar, { role: message.role }) : null,
+        /* @__PURE__ */ jsxs15("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
+          /* @__PURE__ */ jsx24(ChatMessage, { message, texts: props.texts }),
+          /* @__PURE__ */ jsx24(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser })
         ] }),
-        isUser ? /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: message.role }) : null
+        isUser ? /* @__PURE__ */ jsx24(ChatMessageAvatar, { role: message.role }) : null
       ] }, message.id);
     }),
-    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs13("div", { className: "flex justify-start gap-3", children: [
-      /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: "assistant" }),
-      /* @__PURE__ */ jsx20("div", { className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm", children: props.texts.typingLabel })
+    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs15("div", { className: "flex justify-start gap-3", children: [
+      /* @__PURE__ */ jsx24(ChatMessageAvatar, { role: "assistant" }),
+      /* @__PURE__ */ jsx24("div", { className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm", children: props.texts.typingLabel })
     ] }) : null
   ] });
 }
 
 // src/components/chat/hooks/use-sticky-bottom-scroll.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useRef as useRef5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef6 } from "react";
 var DEFAULT_STICKY_THRESHOLD_PX = 10;
 function scrollElementToBottom(element) {
   element.scrollTop = element.scrollHeight;
 }
 function useStickyBottomScroll(params) {
-  const isStickyRef = useRef5(true);
-  const isProgrammaticScrollRef = useRef5(false);
-  const previousResetKeyRef = useRef5(null);
-  const pendingInitialScrollRef = useRef5(false);
+  const isStickyRef = useRef6(true);
+  const isProgrammaticScrollRef = useRef6(false);
+  const previousResetKeyRef = useRef6(null);
+  const pendingInitialScrollRef = useRef6(false);
   const onScroll = useCallback2(() => {
     if (isProgrammaticScrollRef.current) {
       isProgrammaticScrollRef.current = false;
@@ -2760,7 +2966,7 @@ function useStickyBottomScroll(params) {
     const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
     isStickyRef.current = distanceFromBottom <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
   }, [params.scrollRef, params.stickyThresholdPx]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (previousResetKeyRef.current === params.resetKey) {
       return;
     }

package/package.json

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