@nextclaw/agent-chat-ui 0.2.10 → 0.2.12

package/dist/index.js

@@ -1945,6 +1945,9 @@ function ChatMessageAvatar({ role }) {
   );
 }
 
+// src/components/chat/ui/chat-message-list/chat-message.tsx
+import { memo } from "react";
+
 // src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
 import { useMemo as useMemo5 } from "react";
 import ReactMarkdown from "react-markdown";
@@ -2543,7 +2546,7 @@ function ToolCardRoot({ children, className }) {
   );
 }
 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 });
+  return /* @__PURE__ */ jsx17("div", { className: cn("border-t border-amber-200/15 bg-amber-50/50 px-3 pt-1 pb-2 w-full overflow-hidden", className), children });
 }
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-header.tsx
@@ -2645,11 +2648,14 @@ function TerminalExecutionView({ card }) {
       }
     ),
     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("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__ */ 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" }) })
+        /* @__PURE__ */ jsx20("div", { className: "flex-1 min-w-0", children: commandPart ? /* @__PURE__ */ jsxs12("div", { className: "text-amber-950/80 break-words whitespace-pre-wrap tracking-tight font-medium inline-block", children: [
+          commandPart,
+          isRunning && !output && /* @__PURE__ */ jsx20("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
+        ] }) : /* @__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 && /* @__PURE__ */ jsx20(ToolCardContent, { 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 px-0", children: [
         output,
         isRunning && /* @__PURE__ */ jsx20("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
       ] }) })
@@ -2689,10 +2695,7 @@ function FileOperationView({ card }) {
         ] }, 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);
+    return /* @__PURE__ */ jsx20("div", { className: "py-0.5 text-amber-950/80 w-full break-all whitespace-pre-wrap", children: /* @__PURE__ */ jsx20("span", { children: line }) }, idx);
   };
   const lines = output.split("\n");
   const maxLines = 15;
@@ -2709,7 +2712,7 @@ function FileOperationView({ card }) {
         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) }) })
+    expanded && output && /* @__PURE__ */ jsx20(ToolCardContent, { children: /* @__PURE__ */ jsx20("div", { className: "font-mono text-[12px] leading-relaxed max-h-48 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber text-amber-950/80 w-full", children: displayLines.map(renderLine) }) })
   ] });
 }
 function SearchSnippetView({ card }) {
@@ -2740,7 +2743,7 @@ function SearchSnippetView({ card }) {
         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 }) })
+    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 leading-relaxed", children: output }) })
   ] });
 }
 function GenericToolCard({ card }) {
@@ -2772,7 +2775,7 @@ function GenericToolCard({ card }) {
         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 }) })
+    expanded && output && /* @__PURE__ */ jsx20(ToolCardContent, { children: /* @__PURE__ */ jsx20("pre", { className: "text-amber-950/80 whitespace-pre-wrap break-all overflow-y-auto overflow-x-hidden max-h-64 custom-scrollbar-amber w-full min-w-0 max-w-full leading-relaxed", children: output }) })
   ] });
 }
 
@@ -2818,7 +2821,7 @@ function ChatUnknownPart(props) {
 
 // src/components/chat/ui/chat-message-list/chat-message.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
-function ChatMessage(props) {
+var ChatMessage = memo(function ChatMessage2(props) {
   const { message, texts } = props;
   const { role } = message;
   const isUser = role === "user";
@@ -2880,7 +2883,7 @@ function ChatMessage(props) {
       }) })
     }
   );
-}
+});
 
 // src/components/chat/ui/chat-message-list/chat-message-meta.tsx
 import { jsxs as jsxs14 } from "react/jsx-runtime";
@@ -2944,17 +2947,36 @@ function ChatMessageList(props) {
 }
 
 // src/components/chat/hooks/use-sticky-bottom-scroll.ts
-import { useCallback as useCallback2, useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef6 } from "react";
+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 onScroll = useCallback2(() => {
+  const scheduledScrollFrameRef = useRef6(null);
+  const onScroll = () => {
     if (isProgrammaticScrollRef.current) {
       isProgrammaticScrollRef.current = false;
       return;
@@ -2965,7 +2987,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]);
+  };
   useEffect7(() => {
     if (previousResetKeyRef.current === params.resetKey) {
       return;
@@ -2974,6 +2996,14 @@ function useStickyBottomScroll(params) {
     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;
@@ -2983,8 +3013,11 @@ function useStickyBottomScroll(params) {
       return;
     }
     pendingInitialScrollRef.current = false;
-    isProgrammaticScrollRef.current = true;
-    scrollElementToBottom(element);
+    queueScrollToBottom({
+      scrollRef: params.scrollRef,
+      scheduledScrollFrameRef,
+      isProgrammaticScrollRef
+    });
   }, [params.hasContent, params.isLoading, params.scrollRef]);
   useLayoutEffect2(() => {
     if (!isStickyRef.current || !params.hasContent) {
@@ -2994,8 +3027,11 @@ function useStickyBottomScroll(params) {
     if (!element) {
       return;
     }
-    isProgrammaticScrollRef.current = true;
-    scrollElementToBottom(element);
+    queueScrollToBottom({
+      scrollRef: params.scrollRef,
+      scheduledScrollFrameRef,
+      isProgrammaticScrollRef
+    });
   }, [params.contentVersion, params.hasContent, params.scrollRef]);
   return { onScroll };
 }

package/package.json

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