@nextclaw/agent-chat-ui 0.2.19 → 0.2.20

package/dist/index.js

@@ -2752,7 +2752,7 @@ function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
 
 // 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 useState7, useEffect as useEffect7, useRef as useRef6 } from "react";
+import { useState as useState7, useEffect as useEffect8, useRef as useRef8 } from "react";
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-root.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
@@ -2833,18 +2833,230 @@ function ToolCardHeader({
   );
 }
 
+// src/components/chat/hooks/use-sticky-bottom-scroll.ts
+import { 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 queueScrollToBottom(params) {
+  const element = params.scrollRef.current;
+  if (!element) {
+    return;
+  }
+  if (params.scheduledScrollFrameRef.current !== null) {
+    cancelAnimationFrame(params.scheduledScrollFrameRef.current);
+  }
+  params.scheduledScrollFrameRef.current = requestAnimationFrame(() => {
+    params.scheduledScrollFrameRef.current = null;
+    const currentElement = params.scrollRef.current;
+    if (!currentElement) {
+      return;
+    }
+    params.isProgrammaticScrollRef.current = true;
+    scrollElementToBottom(currentElement);
+  });
+}
+function useStickyBottomScroll(params) {
+  const isStickyRef = useRef6(true);
+  const isProgrammaticScrollRef = useRef6(false);
+  const previousResetKeyRef = useRef6(null);
+  const pendingInitialScrollRef = useRef6(false);
+  const scheduledScrollFrameRef = useRef6(null);
+  const onScroll = () => {
+    if (isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+    const element = params.scrollRef.current;
+    if (!element) {
+      return;
+    }
+    const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+    isStickyRef.current = distanceFromBottom <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
+  };
+  useEffect7(() => {
+    if (previousResetKeyRef.current === params.resetKey) {
+      return;
+    }
+    previousResetKeyRef.current = params.resetKey;
+    isStickyRef.current = true;
+    pendingInitialScrollRef.current = true;
+  }, [params.resetKey]);
+  useEffect7(() => {
+    const scheduledScrollFrame = scheduledScrollFrameRef.current;
+    return () => {
+      if (scheduledScrollFrame !== null) {
+        cancelAnimationFrame(scheduledScrollFrame);
+      }
+    };
+  }, []);
+  useLayoutEffect2(() => {
+    if (!pendingInitialScrollRef.current || params.isLoading || !params.hasContent) {
+      return;
+    }
+    const element = params.scrollRef.current;
+    if (!element) {
+      return;
+    }
+    pendingInitialScrollRef.current = false;
+    queueScrollToBottom({
+      scrollRef: params.scrollRef,
+      scheduledScrollFrameRef,
+      isProgrammaticScrollRef
+    });
+  }, [params.hasContent, params.isLoading, params.scrollRef]);
+  useLayoutEffect2(() => {
+    if (!isStickyRef.current || !params.hasContent) {
+      return;
+    }
+    const element = params.scrollRef.current;
+    if (!element) {
+      return;
+    }
+    queueScrollToBottom({
+      scrollRef: params.scrollRef,
+      scheduledScrollFrameRef,
+      isProgrammaticScrollRef
+    });
+  }, [params.contentVersion, params.hasContent, params.scrollRef]);
+  return { onScroll };
+}
+
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation.tsx
-import { Fragment as Fragment4 } from "react";
+import { Fragment as Fragment4, useRef as useRef7 } from "react";
+
+// src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation-lines.tsx
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var FILE_ROW_CLASS_NAME = "h-5 font-mono text-[11px] leading-5";
+var FILE_GUTTER_NUMBER_CELL_CLASS_NAME = "sticky left-0 z-[1] flex h-5 items-center justify-center px-2.5 tabular-nums select-none";
 function formatLineNumber(value) {
   return typeof value === "number" ? String(value) : "";
 }
 function readVisibleLineNumber(line) {
   return formatLineNumber(line.newLineNumber ?? line.oldLineNumber);
 }
+function readLineKey(prefix, line, index) {
+  return `${prefix}-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`;
+}
+function hasVisibleLineNumber(line) {
+  return typeof line.newLineNumber === "number" || typeof line.oldLineNumber === "number";
+}
+function readHasBlockLineNumbers(block) {
+  return block.lines.some(hasVisibleLineNumber);
+}
+function readLineNumberColumnWidth(block) {
+  const maxDigits = block.lines.reduce((currentMax, line) => {
+    if (!hasVisibleLineNumber(line)) {
+      return currentMax;
+    }
+    return Math.max(currentMax, readVisibleLineNumber(line).length);
+  }, 0);
+  const width = Math.max(6.5, Math.min(8, maxDigits + 3.5));
+  return `${width}ch`;
+}
+function buildRowTemplateColumns(params) {
+  if (!params.showLineNumbers) {
+    return void 0;
+  }
+  return {
+    gridTemplateColumns: `${params.lineNumberColumnWidth} minmax(0, 1fr)`
+  };
+}
+function getLineNumberTone(line) {
+  if (line.kind === "remove") {
+    return "border-r border-rose-200 bg-rose-50 text-rose-700";
+  }
+  if (line.kind === "add") {
+    return "border-r border-emerald-200 bg-emerald-50 text-emerald-700";
+  }
+  return "border-r border-stone-200 bg-stone-100 text-stone-500";
+}
+function getCodeRowTone(line) {
+  if (line.kind === "remove") {
+    return "bg-rose-50 text-rose-950";
+  }
+  if (line.kind === "add") {
+    return "bg-emerald-50 text-emerald-950";
+  }
+  return "bg-white text-amber-950/80";
+}
+function FileOperationLineRow({
+  line,
+  showLineNumbers,
+  lineNumberColumnWidth
+}) {
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      "data-file-line-row": "true",
+      className: cn("grid w-max min-w-full", FILE_ROW_CLASS_NAME),
+      style: buildRowTemplateColumns({
+        showLineNumbers,
+        lineNumberColumnWidth
+      }),
+      children: [
+        showLineNumbers ? /* @__PURE__ */ jsx21(
+          "span",
+          {
+            "data-file-line-number-cell": "true",
+            style: { width: lineNumberColumnWidth },
+            className: cn(
+              FILE_GUTTER_NUMBER_CELL_CLASS_NAME,
+              getLineNumberTone(line)
+            ),
+            children: readVisibleLineNumber(line)
+          }
+        ) : null,
+        /* @__PURE__ */ jsx21(
+          "span",
+          {
+            "data-file-code-row": "true",
+            className: cn(
+              "block min-w-full whitespace-pre px-2.5",
+              getCodeRowTone(line)
+            ),
+            children: line.text || " "
+          }
+        )
+      ]
+    }
+  );
+}
+function FileOperationLinesGrid({
+  block
+}) {
+  const showLineNumbers = readHasBlockLineNumbers(block);
+  const lineNumberColumnWidth = readLineNumberColumnWidth(block);
+  return /* @__PURE__ */ jsx21("div", { className: "overflow-x-auto custom-scrollbar-amber bg-white", children: block.lines.map((line, index) => /* @__PURE__ */ jsx21(
+    FileOperationLineRow,
+    {
+      line,
+      showLineNumbers,
+      lineNumberColumnWidth
+    },
+    readLineKey("row", line, index)
+  )) });
+}
+
+// src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation.tsx
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function isPreviewBlock(block) {
   return block.display === "preview";
 }
+function readFileOperationContentVersion(block) {
+  if (block.rawText) {
+    return block.rawText;
+  }
+  return block.lines.map(
+    (line) => [
+      line.kind,
+      line.oldLineNumber ?? "",
+      line.newLineNumber ?? "",
+      line.text
+    ].join(":")
+  ).join("\n");
+}
 function getCaptionTone(part) {
   if (/^\+\d+$/.test(part)) {
     return "text-emerald-700";
@@ -2859,54 +3071,39 @@ function renderCaption(caption) {
   if (parts.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx21("div", { className: "flex shrink-0 items-center gap-x-1 whitespace-nowrap text-[10px] font-medium uppercase tracking-[0.08em]", children: parts.map((part, index) => /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    index > 0 ? /* @__PURE__ */ jsx21("span", { className: "text-stone-300", children: "\xB7" }) : null,
-    /* @__PURE__ */ jsx21("span", { className: cn(getCaptionTone(part)), children: part })
+  return /* @__PURE__ */ jsx22("div", { className: "flex shrink-0 items-center gap-x-1 whitespace-nowrap text-[10px] font-medium uppercase tracking-[0.08em]", children: parts.map((part, index) => /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    index > 0 ? /* @__PURE__ */ jsx22("span", { className: "text-stone-300", children: "\xB7" }) : null,
+    /* @__PURE__ */ jsx22("span", { className: cn(getCaptionTone(part)), children: part })
   ] }, `${part}-${index}`)) });
 }
-function renderDiffGutterRow(line, index) {
-  const gutterTone = line.kind === "add" ? "border-r border-emerald-200 bg-emerald-100 text-emerald-700" : line.kind === "remove" ? "border-r border-rose-200 bg-rose-100 text-rose-700" : "border-r border-stone-200 bg-stone-100 text-stone-500";
-  return /* @__PURE__ */ jsx21(
-    "div",
-    {
-      className: "font-mono text-[11px] leading-relaxed",
-      children: /* @__PURE__ */ jsx21("span", { className: cn("flex h-full w-11 items-center justify-center px-1 py-1 tabular-nums", gutterTone), children: readVisibleLineNumber(line) })
-    },
-    `diff-gutter-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`
-  );
-}
-function renderPreviewGutterRow(line, index) {
-  return /* @__PURE__ */ jsx21(
-    "div",
-    {
-      className: "font-mono text-[11px] leading-relaxed",
-      children: /* @__PURE__ */ jsx21("span", { className: "flex h-full w-11 items-center justify-center border-r border-stone-200 bg-stone-100 px-1 py-1.5 tabular-nums text-stone-500", children: readVisibleLineNumber(line) })
-    },
-    `preview-gutter-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`
-  );
-}
-function renderDiffCodeRow(line, index) {
-  const rowTone = line.kind === "add" ? "border-l-2 border-emerald-300 bg-emerald-50 text-emerald-950" : line.kind === "remove" ? "border-l-2 border-rose-300 bg-rose-50 text-rose-950" : "border-l-2 border-transparent text-amber-950/80";
-  return /* @__PURE__ */ jsx21(
+function StickyFileOperationScrollArea({
+  children,
+  contentVersion,
+  resetKey,
+  className,
+  scrollKind
+}) {
+  const scrollRef = useRef7(null);
+  const { onScroll } = useStickyBottomScroll({
+    scrollRef,
+    resetKey,
+    isLoading: false,
+    hasContent: true,
+    contentVersion,
+    stickyThresholdPx: 20
+  });
+  return /* @__PURE__ */ jsx22(
     "div",
     {
+      ref: scrollRef,
+      onScroll,
+      "data-file-scroll-kind": scrollKind,
       className: cn(
-        "min-w-full whitespace-pre px-3 py-1 font-mono text-[11px] leading-relaxed",
-        rowTone
+        "overflow-y-auto overscroll-contain bg-white custom-scrollbar-amber",
+        className
       ),
-      children: line.text || " "
-    },
-    `diff-code-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`
-  );
-}
-function renderPreviewCodeRow(line, index) {
-  return /* @__PURE__ */ jsx21(
-    "div",
-    {
-      className: "min-w-full whitespace-pre px-3 py-1.5 font-mono text-[11px] leading-relaxed text-amber-950/85",
-      children: line.text || " "
-    },
-    `preview-code-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`
+      children
+    }
   );
 }
 function FileOperationBlock({
@@ -2917,45 +3114,67 @@ function FileOperationBlock({
   const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
   const previewBlock = isPreviewBlock(block);
   const showMetaRow = showPathRow || Boolean(block.caption);
-  return /* @__PURE__ */ jsxs13("section", { className: cn("overflow-hidden bg-white", !isFirst && "border-t border-stone-200/80"), children: [
-    showMetaRow ? /* @__PURE__ */ jsxs13(
-      "div",
-      {
-        className: cn(
-          "flex items-center justify-between gap-4 border-b border-stone-200/80 px-4 text-stone-700",
-          showPathRow ? "py-3" : "py-2"
-        ),
-        children: [
-          /* @__PURE__ */ jsx21("div", { className: "min-w-0 flex-1", children: showPathRow ? /* @__PURE__ */ jsx21(TooltipProvider, { delayDuration: 250, children: /* @__PURE__ */ jsxs13(Tooltip, { children: [
-            /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx21(
-              "div",
-              {
-                className: "truncate whitespace-nowrap font-mono text-[12px] font-medium text-stone-700",
-                title: block.path,
-                children: block.path
-              }
-            ) }),
-            /* @__PURE__ */ jsx21(TooltipContent, { side: "top", className: "max-w-[420px] text-xs font-mono break-all", children: block.path })
-          ] }) }) : null }),
-          block.caption ? renderCaption(block.caption) : null
-        ]
-      }
-    ) : null,
-    block.lines.length > 0 ? /* @__PURE__ */ jsx21("div", { className: "max-h-72 overflow-auto bg-white custom-scrollbar-amber", children: /* @__PURE__ */ jsxs13(
-      "div",
-      {
-        className: cn(
-          "grid min-w-0 max-w-full",
-          "grid-cols-[2.75rem_minmax(0,1fr)]"
-        ),
-        children: [
-          /* @__PURE__ */ jsx21("div", { className: "overflow-hidden", children: block.lines.map(previewBlock ? renderPreviewGutterRow : renderDiffGutterRow) }),
-          /* @__PURE__ */ jsx21("div", { className: "overflow-x-auto custom-scrollbar-amber bg-white", children: /* @__PURE__ */ jsx21("div", { className: "min-w-max", children: block.lines.map(previewBlock ? renderPreviewCodeRow : renderDiffCodeRow) }) })
-        ]
-      }
-    ) }) : block.rawText ? /* @__PURE__ */ jsx21("pre", { className: "max-h-72 min-w-full w-max overflow-auto bg-white px-4 py-3 font-mono text-[11px] leading-relaxed text-amber-950/80 whitespace-pre custom-scrollbar-amber", children: block.rawText }) : null,
-    block.truncated && !previewBlock ? /* @__PURE__ */ jsx21("div", { className: "border-t border-stone-200/85 bg-stone-50 px-4 py-2 text-[10px] text-stone-500", children: "Showing a shortened diff preview." }) : null
-  ] });
+  return /* @__PURE__ */ jsxs14(
+    "section",
+    {
+      className: cn(
+        "overflow-hidden bg-white",
+        !isFirst && "border-t border-stone-200/80"
+      ),
+      children: [
+        showMetaRow ? /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-4 border-b border-stone-200/80 px-4 text-stone-700",
+              showPathRow ? "py-2" : "py-1.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx22("div", { className: "min-w-0 flex-1", children: showPathRow ? /* @__PURE__ */ jsx22(TooltipProvider, { delayDuration: 250, children: /* @__PURE__ */ jsxs14(Tooltip, { children: [
+                /* @__PURE__ */ jsx22(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx22(
+                  "div",
+                  {
+                    className: "truncate whitespace-nowrap font-mono text-[12px] font-medium text-stone-700",
+                    title: block.path,
+                    children: block.path
+                  }
+                ) }),
+                /* @__PURE__ */ jsx22(
+                  TooltipContent,
+                  {
+                    side: "top",
+                    className: "max-w-[420px] text-xs font-mono break-all",
+                    children: block.path
+                  }
+                )
+              ] }) }) : null }),
+              block.caption ? renderCaption(block.caption) : null
+            ]
+          }
+        ) : null,
+        block.lines.length > 0 ? /* @__PURE__ */ jsx22(
+          StickyFileOperationScrollArea,
+          {
+            resetKey: `block:${block.key}`,
+            contentVersion: readFileOperationContentVersion(block),
+            className: "max-h-72",
+            scrollKind: "block",
+            children: /* @__PURE__ */ jsx22(FileOperationLinesGrid, { block })
+          }
+        ) : block.rawText ? /* @__PURE__ */ jsx22(
+          StickyFileOperationScrollArea,
+          {
+            resetKey: `raw:${block.key}`,
+            contentVersion: block.rawText,
+            className: "max-h-72",
+            scrollKind: "raw",
+            children: /* @__PURE__ */ jsx22("div", { className: "overflow-x-auto custom-scrollbar-amber", children: /* @__PURE__ */ jsx22("pre", { className: "min-w-max whitespace-pre bg-white px-4 py-2 font-mono text-[11px] leading-5 text-amber-950/80", children: block.rawText }) })
+          }
+        ) : null,
+        block.truncated && !previewBlock ? /* @__PURE__ */ jsx22("div", { className: "border-t border-stone-200/85 bg-stone-50 px-4 py-2 text-[10px] text-stone-500", children: "Showing a shortened diff preview." }) : null
+      ]
+    }
+  );
 }
 function ToolCardFileOperationContent({
   card,
@@ -2966,9 +3185,9 @@ function ToolCardFileOperationContent({
   if (blocks.length === 0 && !output) {
     return null;
   }
-  return /* @__PURE__ */ jsxs13("div", { className: cn("overflow-hidden bg-white", className), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: cn("overflow-hidden bg-white", className), children: [
     blocks.map((block, index) => {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         FileOperationBlock,
         {
           block,
@@ -2978,15 +3197,24 @@ function ToolCardFileOperationContent({
         block.key
       );
     }),
-    output ? /* @__PURE__ */ jsx21("pre", { className: cn(
-      "max-h-56 min-w-full w-max overflow-auto bg-white px-4 py-3 font-mono text-[11px] leading-relaxed text-amber-950/80 whitespace-pre custom-scrollbar-amber",
-      blocks.length > 0 && "border-t border-stone-200/80"
-    ), children: output }) : null
+    output ? /* @__PURE__ */ jsx22(
+      StickyFileOperationScrollArea,
+      {
+        resetKey: `output:${card.toolName}:${card.summary ?? "none"}`,
+        contentVersion: output,
+        className: cn(
+          "max-h-56",
+          blocks.length > 0 && "border-t border-stone-200/80"
+        ),
+        scrollKind: "output",
+        children: /* @__PURE__ */ jsx22("div", { className: "overflow-x-auto custom-scrollbar-amber", children: /* @__PURE__ */ jsx22("pre", { className: "min-w-max whitespace-pre bg-white px-4 py-2 font-mono text-[11px] leading-5 text-amber-950/80", children: output }) })
+      }
+    ) : null
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-views.tsx
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var TOOL_CARD_AUTO_EXPAND_DELAY_MS = 200;
 var ANSI_ESCAPE_PREFIX = String.fromCharCode(27);
 var ANSI_ESCAPE_PATTERN = new RegExp(`${ANSI_ESCAPE_PREFIX}\\[[0-?]*[ -/]*[@-~]`, "g");
@@ -3060,17 +3288,17 @@ function useToolCardExpandedState({
 }) {
   const [expanded, setExpanded] = useState7(false);
   const [hasUserToggled, setHasUserToggled] = useState7(false);
-  const expandTimerRef = useRef6(null);
-  const prevRunningRef = useRef6(isRunning);
-  const isFirstRenderRef = useRef6(true);
-  useEffect7(() => {
+  const expandTimerRef = useRef8(null);
+  const prevRunningRef = useRef8(isRunning);
+  const isFirstRenderRef = useRef8(true);
+  useEffect8(() => {
     return () => {
       if (expandTimerRef.current !== null) {
         window.clearTimeout(expandTimerRef.current);
       }
     };
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (expandOnError && statusTone === "error" && canExpand && !hasUserToggled) {
       if (expandTimerRef.current !== null) {
         window.clearTimeout(expandTimerRef.current);
@@ -3138,7 +3366,7 @@ function GenericToolSection({
     }
   };
   const style = tones[tone];
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "section",
     {
       className: cn(
@@ -3146,7 +3374,7 @@ function GenericToolSection({
         style.shell
       ),
       children: [
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             className: cn(
@@ -3154,12 +3382,12 @@ function GenericToolSection({
               style.header
             ),
             children: [
-              /* @__PURE__ */ jsx22("span", { className: cn("h-1.5 w-1.5 rounded-full", style.dot) }),
-              /* @__PURE__ */ jsx22("span", { children: label })
+              /* @__PURE__ */ jsx23("span", { className: cn("h-1.5 w-1.5 rounded-full", style.dot) }),
+              /* @__PURE__ */ jsx23("span", { children: label })
             ]
           }
         ),
-        /* @__PURE__ */ jsx22("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx23(
           "pre",
           {
             className: cn(
@@ -3184,8 +3412,8 @@ function TerminalExecutionView({ card }) {
     statusTone: card.statusTone
   });
   const commandPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
-  return /* @__PURE__ */ jsxs14(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
@@ -3195,17 +3423,17 @@ function TerminalExecutionView({ card }) {
         onToggle
       }
     ),
-    expanded && /* @__PURE__ */ jsxs14(Fragment5, { children: [
-      /* @__PURE__ */ jsx22("div", { className: "px-3 pb-2 font-mono w-full max-h-48 overflow-y-auto custom-scrollbar-amber min-h-0 text-[12px]", children: /* @__PURE__ */ jsxs14("div", { className: "flex items-start gap-2 leading-relaxed", children: [
-        /* @__PURE__ */ jsx22("span", { className: "text-amber-500/50 font-medium shrink-0 select-none mt-[1px]", children: "$" }),
-        /* @__PURE__ */ jsx22("div", { className: "flex-1 min-w-0", children: commandPart ? /* @__PURE__ */ jsxs14("div", { className: "text-amber-950/80 break-words whitespace-pre-wrap tracking-tight font-medium inline-block", children: [
+    expanded && /* @__PURE__ */ jsxs15(Fragment5, { children: [
+      /* @__PURE__ */ jsx23("div", { className: "px-3 pb-2 font-mono w-full max-h-48 overflow-y-auto custom-scrollbar-amber min-h-0 text-[12px]", children: /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-2 leading-relaxed", children: [
+        /* @__PURE__ */ jsx23("span", { className: "text-amber-500/50 font-medium shrink-0 select-none mt-[1px]", children: "$" }),
+        /* @__PURE__ */ jsx23("div", { className: "flex-1 min-w-0", children: commandPart ? /* @__PURE__ */ jsxs15("div", { className: "text-amber-950/80 break-words whitespace-pre-wrap tracking-tight font-medium inline-block", children: [
           commandPart,
-          isRunning && !output && /* @__PURE__ */ jsx22("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
-        ] }) : /* @__PURE__ */ jsx22("div", { className: "h-3 w-32 bg-amber-200/30 rounded animate-pulse mt-2" }) })
+          isRunning && !output && /* @__PURE__ */ jsx23("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
+        ] }) : /* @__PURE__ */ jsx23("div", { className: "h-3 w-32 bg-amber-200/30 rounded animate-pulse mt-2" }) })
       ] }) }),
-      output && /* @__PURE__ */ jsx22(ToolCardContent, { children: /* @__PURE__ */ jsxs14("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 px-0", children: [
+      output && /* @__PURE__ */ jsx23(ToolCardContent, { children: /* @__PURE__ */ jsxs15("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 px-0", children: [
         output,
-        isRunning && /* @__PURE__ */ jsx22("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
+        isRunning && /* @__PURE__ */ jsx23("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
       ] }) })
     ] })
   ] });
@@ -3232,8 +3460,8 @@ function FileOperationView({ card }) {
     statusTone: card.statusTone
   });
   const isEdit = card.toolName === "edit_file" || card.toolName === "write_file" || card.toolName === "apply_patch" || card.toolName === "file_change";
-  return /* @__PURE__ */ jsxs14(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
@@ -3244,7 +3472,7 @@ function FileOperationView({ card }) {
         onToggle
       }
     ),
-    expanded && hasContent && /* @__PURE__ */ jsx22(ToolCardContent, { className: "border-t border-amber-200/20 bg-transparent px-0 pt-0 pb-0", children: /* @__PURE__ */ jsx22(ToolCardFileOperationContent, { card }) })
+    expanded && hasContent && /* @__PURE__ */ jsx23(ToolCardContent, { className: "border-t border-amber-200/20 bg-transparent px-0 pt-0 pb-0", children: /* @__PURE__ */ jsx23(ToolCardFileOperationContent, { card }) })
   ] });
 }
 function SearchSnippetView({ card }) {
@@ -3255,8 +3483,8 @@ function SearchSnippetView({ card }) {
     isRunning,
     statusTone: card.statusTone
   });
-  return /* @__PURE__ */ jsxs14(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
@@ -3266,7 +3494,7 @@ function SearchSnippetView({ card }) {
         onToggle
       }
     ),
-    expanded && output && /* @__PURE__ */ jsx22(ToolCardContent, { children: /* @__PURE__ */ jsx22("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 }) })
+    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 }) {
@@ -3283,8 +3511,8 @@ function GenericToolCard({ card }) {
     isRunning,
     statusTone: card.statusTone
   });
-  return /* @__PURE__ */ jsxs14(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
@@ -3294,10 +3522,10 @@ function GenericToolCard({ card }) {
         onToggle
       }
     ),
-    expanded && hasContent && /* @__PURE__ */ jsxs14(ToolCardContent, { className: "bg-transparent px-2.5 py-2.5", children: [
-      hasInputSection && /* @__PURE__ */ jsx22(GenericToolSection, { label: inputLabel, tone: "input", children: input }),
-      hasInputSection && hasOutputSection && /* @__PURE__ */ jsx22("div", { className: "h-2" }),
-      hasOutputSection && /* @__PURE__ */ jsx22(
+    expanded && hasContent && /* @__PURE__ */ jsxs15(ToolCardContent, { className: "bg-transparent px-2.5 py-2.5", children: [
+      hasInputSection && /* @__PURE__ */ jsx23(GenericToolSection, { label: inputLabel, tone: "input", children: input }),
+      hasInputSection && hasOutputSection && /* @__PURE__ */ jsx23("div", { className: "h-2" }),
+      hasOutputSection && /* @__PURE__ */ jsx23(
         GenericToolSection,
         {
           label: outputLabel,
@@ -3310,7 +3538,7 @@ function GenericToolCard({ card }) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-tool-card.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function isTerminalTool(name) {
   const lowered = name.toLowerCase();
   return lowered === "exec" || lowered === "exec_command" || lowered === "execute_command" || lowered === "command_execution" || lowered === "bash" || lowered === "shell" || lowered.includes("run_");
@@ -3325,48 +3553,48 @@ function isSearchTool(name) {
 }
 function ChatToolCard({ card }) {
   if (isTerminalTool(card.toolName)) {
-    return /* @__PURE__ */ jsx23(TerminalExecutionView, { card });
+    return /* @__PURE__ */ jsx24(TerminalExecutionView, { card });
   }
   if (isFileEditTool(card.toolName)) {
-    return /* @__PURE__ */ jsx23(FileOperationView, { card });
+    return /* @__PURE__ */ jsx24(FileOperationView, { card });
   }
   if (isSearchTool(card.toolName)) {
-    return /* @__PURE__ */ jsx23(SearchSnippetView, { card });
+    return /* @__PURE__ */ jsx24(SearchSnippetView, { card });
   }
-  return /* @__PURE__ */ jsx23(GenericToolCard, { card });
+  return /* @__PURE__ */ jsx24(GenericToolCard, { card });
 }
 
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function ChatUnknownPart(props) {
-  return /* @__PURE__ */ jsxs15("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "font-semibold text-gray-700", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "font-semibold text-gray-700", children: [
       props.label,
       ": ",
       props.rawType
     ] }),
-    props.text ? /* @__PURE__ */ jsx24("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
+    props.text ? /* @__PURE__ */ jsx25("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 jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ChatMessage = memo(function ChatMessage2(props) {
   const { message, texts } = props;
   const { role } = message;
   const isUser = role === "user";
   const isMessageInProgress = message.status === "pending" || message.status === "streaming";
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: cn(
         "inline-block w-fit max-w-full rounded-2xl border px-4 shadow-sm",
         isUser ? "border-primary bg-primary py-3 text-white" : role === "assistant" ? "border-gray-200 bg-white pb-3 pt-4 text-gray-900" : "border-orange-200/80 bg-orange-50/70 py-3 text-gray-900"
       ),
-      children: /* @__PURE__ */ jsx25("div", { className: "space-y-2", children: message.parts.map((part, index) => {
+      children: /* @__PURE__ */ jsx26("div", { className: "space-y-2", children: message.parts.map((part, index) => {
         const { type } = part;
         if (type === "markdown") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatMessageMarkdown,
             {
               text: part.text,
@@ -3377,7 +3605,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "inline-content") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatMessageInlineContent,
             {
               segments: part.segments,
@@ -3388,7 +3616,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "reasoning") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatReasoningBlock,
             {
               label: part.label,
@@ -3400,10 +3628,10 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "tool-card") {
-          return /* @__PURE__ */ jsx25("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx25(ChatToolCard, { card: part.card }) }, `tool-${index}`);
+          return /* @__PURE__ */ jsx26("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx26(ChatToolCard, { card: part.card }) }, `tool-${index}`);
         }
         if (type === "file") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatMessageFile,
             {
               file: part.file,
@@ -3413,7 +3641,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "unknown") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatUnknownPart,
             {
               label: part.label,
@@ -3430,9 +3658,9 @@ var ChatMessage = memo(function ChatMessage2(props) {
 });
 
 // src/components/chat/ui/chat-message-list/chat-message-meta.tsx
-import { jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsxs as jsxs17 } from "react/jsx-runtime";
 function ChatMessageMeta(props) {
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: cn(
@@ -3451,7 +3679,7 @@ function ChatMessageMeta(props) {
 // src/components/chat/ui/chat-message-list/chat-message-action-copy.tsx
 import { useMemo as useMemo6 } from "react";
 import { Check as Check5, Copy as Copy2 } from "lucide-react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function ChatMessageActionCopy({
   message,
   texts
@@ -3465,7 +3693,7 @@ function ChatMessageActionCopy({
   }, [message.parts]);
   const { copied, copy } = useCopyFeedback({ text: messageText });
   if (!messageText) return null;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "button",
     {
       type: "button",
@@ -3473,13 +3701,13 @@ function ChatMessageActionCopy({
       className: "text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-md hover:bg-gray-100 flex items-center justify-center",
       "aria-label": copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
       title: copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
-      children: copied ? /* @__PURE__ */ jsx26(Check5, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx26(Copy2, { className: "h-3.5 w-3.5" })
+      children: copied ? /* @__PURE__ */ jsx27(Check5, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx27(Copy2, { className: "h-3.5 w-3.5" })
     }
   );
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-list.tsx
-import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
 function hasRenderableText(value) {
   const trimmed = value.trim();
@@ -3497,10 +3725,10 @@ function hasRenderableMessageContent(message) {
   });
 }
 function ChatMessageTypingFooter() {
-  return /* @__PURE__ */ jsx27("div", { className: "flex items-center gap-2 px-1 py-0.5 text-[11px] text-gray-400", children: /* @__PURE__ */ jsxs17("div", { className: "flex space-x-1 items-center h-full", children: [
-    /* @__PURE__ */ jsx27("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" }),
-    /* @__PURE__ */ jsx27("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:200ms]" }),
-    /* @__PURE__ */ jsx27("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:400ms]" })
+  return /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-2 px-1 py-0.5 text-[11px] text-gray-400", children: /* @__PURE__ */ jsxs18("div", { className: "flex space-x-1 items-center h-full", children: [
+    /* @__PURE__ */ jsx28("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" }),
+    /* @__PURE__ */ jsx28("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:200ms]" }),
+    /* @__PURE__ */ jsx28("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:400ms]" })
   ] }) });
 }
 function ChatMessageList(props) {
@@ -3508,118 +3736,28 @@ function ChatMessageList(props) {
   const hasRenderableAssistantDraft = visibleMessages.some(
     (message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending")
   );
-  return /* @__PURE__ */ jsxs17("div", { className: cn("space-y-5", props.className), children: [
+  return /* @__PURE__ */ jsxs18("div", { className: cn("space-y-5", props.className), children: [
     visibleMessages.map((message) => {
       const isUser = message.role === "user";
       const isGenerating = !isUser && (message.status === "streaming" || message.status === "pending");
-      return /* @__PURE__ */ jsxs17("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
-        !isUser ? /* @__PURE__ */ jsx27(ChatMessageAvatar, { role: message.role }) : null,
-        /* @__PURE__ */ jsxs17("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
-          /* @__PURE__ */ jsx27(ChatMessage, { message, texts: props.texts }),
-          /* @__PURE__ */ jsx27("div", { className: cn("flex items-center gap-2", isUser && "justify-end"), children: isGenerating ? /* @__PURE__ */ jsx27(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs17(Fragment6, { children: [
-            /* @__PURE__ */ jsx27(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser }),
-            !isUser ? /* @__PURE__ */ jsx27(ChatMessageActionCopy, { message, texts: props.texts }) : null
+      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("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
           ] }) })
         ] }),
-        isUser ? /* @__PURE__ */ jsx27(ChatMessageAvatar, { role: message.role }) : null
+        isUser ? /* @__PURE__ */ jsx28(ChatMessageAvatar, { role: message.role }) : null
       ] }, message.id);
     }),
-    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs17("div", { className: "flex justify-start gap-3", children: [
-      /* @__PURE__ */ jsx27(ChatMessageAvatar, { role: "assistant" }),
-      /* @__PURE__ */ jsx27("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__ */ jsxs18("div", { className: "flex justify-start gap-3", children: [
+      /* @__PURE__ */ jsx28(ChatMessageAvatar, { role: "assistant" }),
+      /* @__PURE__ */ jsx28("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 { useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef7 } from "react";
-var DEFAULT_STICKY_THRESHOLD_PX = 10;
-function scrollElementToBottom(element) {
-  element.scrollTop = element.scrollHeight;
-}
-function queueScrollToBottom(params) {
-  const element = params.scrollRef.current;
-  if (!element) {
-    return;
-  }
-  if (params.scheduledScrollFrameRef.current !== null) {
-    cancelAnimationFrame(params.scheduledScrollFrameRef.current);
-  }
-  params.scheduledScrollFrameRef.current = requestAnimationFrame(() => {
-    params.scheduledScrollFrameRef.current = null;
-    const currentElement = params.scrollRef.current;
-    if (!currentElement) {
-      return;
-    }
-    params.isProgrammaticScrollRef.current = true;
-    scrollElementToBottom(currentElement);
-  });
-}
-function useStickyBottomScroll(params) {
-  const isStickyRef = useRef7(true);
-  const isProgrammaticScrollRef = useRef7(false);
-  const previousResetKeyRef = useRef7(null);
-  const pendingInitialScrollRef = useRef7(false);
-  const scheduledScrollFrameRef = useRef7(null);
-  const onScroll = () => {
-    if (isProgrammaticScrollRef.current) {
-      isProgrammaticScrollRef.current = false;
-      return;
-    }
-    const element = params.scrollRef.current;
-    if (!element) {
-      return;
-    }
-    const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
-    isStickyRef.current = distanceFromBottom <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
-  };
-  useEffect8(() => {
-    if (previousResetKeyRef.current === params.resetKey) {
-      return;
-    }
-    previousResetKeyRef.current = params.resetKey;
-    isStickyRef.current = true;
-    pendingInitialScrollRef.current = true;
-  }, [params.resetKey]);
-  useEffect8(() => {
-    const scheduledScrollFrame = scheduledScrollFrameRef.current;
-    return () => {
-      if (scheduledScrollFrame !== null) {
-        cancelAnimationFrame(scheduledScrollFrame);
-      }
-    };
-  }, []);
-  useLayoutEffect2(() => {
-    if (!pendingInitialScrollRef.current || params.isLoading || !params.hasContent) {
-      return;
-    }
-    const element = params.scrollRef.current;
-    if (!element) {
-      return;
-    }
-    pendingInitialScrollRef.current = false;
-    queueScrollToBottom({
-      scrollRef: params.scrollRef,
-      scheduledScrollFrameRef,
-      isProgrammaticScrollRef
-    });
-  }, [params.hasContent, params.isLoading, params.scrollRef]);
-  useLayoutEffect2(() => {
-    if (!isStickyRef.current || !params.hasContent) {
-      return;
-    }
-    const element = params.scrollRef.current;
-    if (!element) {
-      return;
-    }
-    queueScrollToBottom({
-      scrollRef: params.scrollRef,
-      scheduledScrollFrameRef,
-      isProgrammaticScrollRef
-    });
-  }, [params.contentVersion, params.hasContent, params.scrollRef]);
-  return { onScroll };
-}
 export {
   ChatInputBar,
   ChatMessageList,

package/package.json

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