@nextclaw/agent-chat-ui 0.2.14 → 0.2.16

package/dist/index.d.ts

@@ -48,6 +48,11 @@ type ChatToolbarSelectOption = {
     label: string;
     description?: string;
 };
+type ChatToolbarSelectGroup = {
+    key: string;
+    label?: string;
+    options: ChatToolbarSelectOption[];
+};
 type ChatToolbarSelect = {
     key: string;
     value?: string;
@@ -55,6 +60,7 @@ type ChatToolbarSelect = {
     selectedLabel?: string;
     icon?: ChatToolbarIcon;
     options: ChatToolbarSelectOption[];
+    groups?: ChatToolbarSelectGroup[];
     disabled?: boolean;
     loading?: boolean;
     emptyLabel?: string;
@@ -185,6 +191,8 @@ type ChatMessageViewModel = {
 type ChatMessageTexts = {
     copyCodeLabel: string;
     copiedCodeLabel: string;
+    copyMessageLabel: string;
+    copiedMessageLabel: string;
     typingLabel: string;
 };
 type ChatMessageListProps = {
@@ -267,4 +275,4 @@ declare function resolveChatComposerSlashTrigger(nodes: ChatComposerNode[], sele
     end: number;
 } | null;
 
-export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatInlineHint, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectOption, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };
+export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatInlineHint, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectGroup, type ChatToolbarSelectOption, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };

package/dist/index.js

@@ -100,6 +100,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var ChatSelect = SelectPrimitive.Root;
+var ChatSelectGroup = SelectPrimitive.Group;
 var ChatSelectValue = SelectPrimitive.Value;
 var ChatSelectTrigger = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
@@ -146,6 +147,8 @@ var ChatSelectContent = React3.forwardRef(({ className, children, position = "po
   }
 ) }));
 ChatSelectContent.displayName = SelectPrimitive.Content.displayName;
+var ChatSelectLabel = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(SelectPrimitive.Label, { ref, className: cn("px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-gray-500", className), ...props }));
+ChatSelectLabel.displayName = SelectPrimitive.Label.displayName;
 var ChatSelectItem = React3.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
@@ -162,6 +165,8 @@ var ChatSelectItem = React3.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 ChatSelectItem.displayName = SelectPrimitive.Item.displayName;
+var ChatSelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(SelectPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-gray-100", className), ...props }));
+ChatSelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/components/chat/default-skin/tooltip.tsx
 import * as React4 from "react";
@@ -193,7 +198,10 @@ var ChatUiPrimitives = {
   Input: ChatInput,
   Select: ChatSelect,
   SelectContent: ChatSelectContent,
+  SelectGroup: ChatSelectGroup,
   SelectItem: ChatSelectItem,
+  SelectLabel: ChatSelectLabel,
+  SelectSeparator: ChatSelectSeparator,
   SelectTrigger: ChatSelectTrigger,
   SelectValue: ChatSelectValue,
   Tooltip: ChatTooltip,
@@ -602,7 +610,9 @@ function resolveContentWidth(key) {
   return "";
 }
 function ToolbarSelect({ item }) {
-  const { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } = ChatUiPrimitives;
+  const { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } = ChatUiPrimitives;
+  const groups = item.groups?.filter((group) => group.options.length > 0) ?? (item.options.length > 0 ? [{ key: `${item.key}-default`, options: item.options }] : []);
+  const hasOptions = groups.some((group) => group.options.length > 0);
   return /* @__PURE__ */ jsxs5(Select, { value: item.value, onValueChange: item.onValueChange, disabled: item.disabled, children: [
     /* @__PURE__ */ jsx9(
       SelectTrigger,
@@ -615,15 +625,21 @@ function ToolbarSelect({ item }) {
       }
     ),
     /* @__PURE__ */ jsxs5(SelectContent, { className: resolveContentWidth(item.key), children: [
-      item.options.length === 0 ? item.loading ? /* @__PURE__ */ jsxs5("div", { className: "space-y-2 px-3 py-2", children: [
+      !hasOptions ? item.loading ? /* @__PURE__ */ jsxs5("div", { className: "space-y-2 px-3 py-2", children: [
         /* @__PURE__ */ jsx9("div", { className: "h-3 w-36 animate-pulse rounded bg-gray-200" }),
         /* @__PURE__ */ jsx9("div", { className: "h-3 w-28 animate-pulse rounded bg-gray-200" }),
         /* @__PURE__ */ jsx9("div", { className: "h-3 w-32 animate-pulse rounded bg-gray-200" })
       ] }) : item.emptyLabel ? /* @__PURE__ */ jsx9("div", { className: "px-3 py-2 text-xs text-gray-500", children: item.emptyLabel }) : null : null,
-      item.options.map((option) => /* @__PURE__ */ jsx9(SelectItem, { value: option.value, className: "py-2", children: option.description ? /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
-        /* @__PURE__ */ jsx9("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }),
-        /* @__PURE__ */ jsx9("span", { className: "truncate text-[11px] text-gray-500", children: option.description })
-      ] }) : /* @__PURE__ */ jsx9("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }) }, option.value))
+      groups.map((group, groupIndex) => /* @__PURE__ */ jsxs5("div", { children: [
+        groupIndex > 0 ? /* @__PURE__ */ jsx9(SelectSeparator, {}) : null,
+        /* @__PURE__ */ jsxs5(SelectGroup, { children: [
+          group.label ? /* @__PURE__ */ jsx9(SelectLabel, { children: group.label }) : null,
+          group.options.map((option) => /* @__PURE__ */ jsx9(SelectItem, { value: option.value, className: "py-2", children: option.description ? /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
+            /* @__PURE__ */ jsx9("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }),
+            /* @__PURE__ */ jsx9("span", { className: "truncate text-[11px] text-gray-500", children: option.description })
+          ] }) : /* @__PURE__ */ jsx9("span", { className: "truncate text-xs font-semibold text-gray-800", children: option.label }) }, option.value))
+        ] })
+      ] }, group.key))
     ] })
   ] });
 }
@@ -1939,8 +1955,8 @@ function ChatMessageAvatar({ role }) {
     "div",
     {
       "data-testid": "chat-message-avatar-assistant",
-      className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-gray-200/80 bg-gray-900 text-white shadow-sm",
-      children: /* @__PURE__ */ jsx12(Bot, { className: "h-4 w-4" })
+      className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gradient-to-b from-gray-700 to-gray-950 text-white shadow-md ring-1 ring-inset ring-white/20",
+      children: /* @__PURE__ */ jsx12(Bot, { className: "h-[18px] w-[18px] text-white/95", strokeWidth: 2.5 })
     }
   );
 }
@@ -2508,19 +2524,64 @@ function ChatMessageFile({
   );
 }
 
+// src/components/chat/hooks/use-reasoning-block-open-state.ts
+import { useEffect as useEffect6, useRef as useRef5, useState as useState6 } from "react";
+function useReasoningBlockOpenState(params) {
+  const { isInProgress } = params;
+  const [isOpen, setIsOpen] = useState6(isInProgress);
+  const [keepOpenAfterCompletion, setKeepOpenAfterCompletion] = useState6(false);
+  const previousInProgressRef = useRef5(isInProgress);
+  useEffect6(() => {
+    const wasInProgress = previousInProgressRef.current;
+    if (!wasInProgress && isInProgress) {
+      setIsOpen(true);
+      setKeepOpenAfterCompletion(false);
+    } else if (wasInProgress && !isInProgress && !keepOpenAfterCompletion) {
+      setIsOpen(false);
+    }
+    previousInProgressRef.current = isInProgress;
+  }, [isInProgress, keepOpenAfterCompletion]);
+  function onSummaryClick(event) {
+    event.preventDefault();
+    const nextOpen = !isOpen;
+    setIsOpen(nextOpen);
+    if (!nextOpen) {
+      setKeepOpenAfterCompletion(false);
+      return;
+    }
+    if (isInProgress) {
+      setKeepOpenAfterCompletion(true);
+    }
+  }
+  return {
+    isOpen,
+    onSummaryClick
+  };
+}
+
 // src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
 import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
-function ChatReasoningBlock(props) {
-  return /* @__PURE__ */ jsxs9("details", { className: "mt-3", open: true, children: [
-    /* @__PURE__ */ jsx16("summary", { className: cn("cursor-pointer text-xs", props.isUser ? "text-primary-100" : "text-gray-500"), children: props.label }),
+function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
+  const { isOpen, onSummaryClick } = useReasoningBlockOpenState({
+    isInProgress
+  });
+  return /* @__PURE__ */ jsxs9("details", { className: "mt-2", open: isOpen, children: [
+    /* @__PURE__ */ jsx16(
+      "summary",
+      {
+        className: cn("cursor-pointer text-xs", isUser ? "text-primary-100" : "text-gray-500"),
+        onClick: onSummaryClick,
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsx16(
       "pre",
       {
         className: cn(
-          "mt-2 whitespace-pre-wrap break-words rounded-lg p-2 text-[11px]",
-          props.isUser ? "bg-primary-700/60" : "bg-gray-100"
+          "mt-2 w-fit max-w-[500px] whitespace-pre-wrap break-all rounded-lg p-2 text-[11px]",
+          isUser ? "bg-primary-700/60" : "bg-gray-100"
         ),
-        children: props.text
+        children: text
       }
     )
   ] });
@@ -2528,7 +2589,7 @@ function ChatReasoningBlock(props) {
 
 // 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";
+import { useState as useState7, useEffect as useEffect7, useRef as useRef6 } from "react";
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-root.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -2614,17 +2675,17 @@ 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(() => {
+  const wasEmptyRef = useRef6(!hasContent);
+  const [expanded, setExpanded] = useState7(hasContent && (isRunning || card.statusTone === "error"));
+  const [hasUserToggled, setHasUserToggled] = useState7(false);
+  const prevRunningRef = useRef6(isRunning);
+  useEffect7(() => {
     if (wasEmptyRef.current && hasContent && isRunning) {
       setExpanded(true);
       wasEmptyRef.current = false;
     }
   }, [hasContent, isRunning]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (prevRunningRef.current && !isRunning && !hasUserToggled) {
       setExpanded(false);
     }
@@ -2665,10 +2726,10 @@ function TerminalExecutionView({ 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(() => {
+  const [expanded, setExpanded] = useState7(false);
+  const [hasUserToggled, setHasUserToggled] = useState7(false);
+  const prevRunningRef = useRef6(isRunning);
+  useEffect7(() => {
     if (prevRunningRef.current && !isRunning && !hasUserToggled) {
       setExpanded(false);
     }
@@ -2717,11 +2778,11 @@ function FileOperationView({ card }) {
 }
 function SearchSnippetView({ card }) {
   const isRunning = card.statusTone === "running";
-  const [expanded, setExpanded] = useState6(isRunning);
-  const [hasUserToggled, setHasUserToggled] = useState6(false);
-  const prevRunningRef = useRef5(isRunning);
+  const [expanded, setExpanded] = useState7(isRunning);
+  const [hasUserToggled, setHasUserToggled] = useState7(false);
+  const prevRunningRef = useRef6(isRunning);
   const output = card.output?.trim() ?? "";
-  useEffect6(() => {
+  useEffect7(() => {
     if (prevRunningRef.current && !isRunning && !hasUserToggled) {
       setExpanded(false);
     }
@@ -2749,11 +2810,11 @@ function SearchSnippetView({ card }) {
 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 [expanded, setExpanded] = useState7(isRunning);
+  const [hasUserToggled, setHasUserToggled] = useState7(false);
+  const prevRunningRef = useRef6(isRunning);
   const showOutputSection = card.kind === "result" || card.hasResult;
-  useEffect6(() => {
+  useEffect7(() => {
     if (prevRunningRef.current && !isRunning && !hasUserToggled) {
       setExpanded(false);
     }
@@ -2825,12 +2886,13 @@ 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__ */ 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"
+        "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__ */ jsx23("div", { className: "space-y-2", children: message.parts.map((part, index) => {
         if (part.type === "markdown") {
@@ -2850,7 +2912,8 @@ var ChatMessage = memo(function ChatMessage2(props) {
             {
               label: part.label,
               text: part.text,
-              isUser
+              isUser,
+              isInProgress: isMessageInProgress && index === message.parts.length - 1
             },
             `reasoning-${index}`
           );
@@ -2904,8 +2967,38 @@ 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 jsx24 } from "react/jsx-runtime";
+function ChatMessageActionCopy({
+  message,
+  texts
+}) {
+  const messageText = useMemo6(() => {
+    return message.parts.map((part) => {
+      if (part.type === "markdown") return part.text;
+      if (part.type === "unknown") return part.text;
+      return "";
+    }).filter((text) => !!text && text.trim().length > 0).join("\n\n");
+  }, [message.parts]);
+  const { copied, copy } = useCopyFeedback({ text: messageText });
+  if (!messageText) return null;
+  return /* @__PURE__ */ jsx24(
+    "button",
+    {
+      type: "button",
+      onClick: () => void copy(),
+      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__ */ jsx24(Check5, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx24(Copy2, { className: "h-3.5 w-3.5" })
+    }
+  );
+}
+
 // src/components/chat/ui/chat-message-list/chat-message-list.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25, 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();
@@ -2922,6 +3015,13 @@ function hasRenderableMessageContent(message) {
     return true;
   });
 }
+function ChatMessageTypingFooter() {
+  return /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2 px-1 py-0.5 text-[11px] text-gray-400", children: /* @__PURE__ */ jsxs15("div", { className: "flex space-x-1 items-center h-full", children: [
+    /* @__PURE__ */ jsx25("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" }),
+    /* @__PURE__ */ jsx25("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:200ms]" }),
+    /* @__PURE__ */ jsx25("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:400ms]" })
+  ] }) });
+}
 function ChatMessageList(props) {
   const visibleMessages = props.messages.filter(hasRenderableMessageContent);
   const hasRenderableAssistantDraft = visibleMessages.some(
@@ -2930,24 +3030,28 @@ function ChatMessageList(props) {
   return /* @__PURE__ */ jsxs15("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__ */ jsxs15("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
-        !isUser ? /* @__PURE__ */ jsx24(ChatMessageAvatar, { role: message.role }) : null,
+        !isUser ? /* @__PURE__ */ jsx25(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 })
+          /* @__PURE__ */ jsx25(ChatMessage, { message, texts: props.texts }),
+          /* @__PURE__ */ jsx25("div", { className: cn("flex items-center gap-2", isUser && "justify-end"), children: isGenerating ? /* @__PURE__ */ jsx25(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs15(Fragment4, { children: [
+            /* @__PURE__ */ jsx25(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser }),
+            !isUser ? /* @__PURE__ */ jsx25(ChatMessageActionCopy, { message, texts: props.texts }) : null
+          ] }) })
         ] }),
-        isUser ? /* @__PURE__ */ jsx24(ChatMessageAvatar, { role: message.role }) : null
+        isUser ? /* @__PURE__ */ jsx25(ChatMessageAvatar, { role: message.role }) : null
       ] }, message.id);
     }),
     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 })
+      /* @__PURE__ */ jsx25(ChatMessageAvatar, { role: "assistant" }),
+      /* @__PURE__ */ jsx25("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 useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef6 } from "react";
+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;
@@ -2971,11 +3075,11 @@ function queueScrollToBottom(params) {
   });
 }
 function useStickyBottomScroll(params) {
-  const isStickyRef = useRef6(true);
-  const isProgrammaticScrollRef = useRef6(false);
-  const previousResetKeyRef = useRef6(null);
-  const pendingInitialScrollRef = useRef6(false);
-  const scheduledScrollFrameRef = useRef6(null);
+  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;
@@ -2988,7 +3092,7 @@ function useStickyBottomScroll(params) {
     const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
     isStickyRef.current = distanceFromBottom <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
   };
-  useEffect7(() => {
+  useEffect8(() => {
     if (previousResetKeyRef.current === params.resetKey) {
       return;
     }
@@ -2996,7 +3100,7 @@ function useStickyBottomScroll(params) {
     isStickyRef.current = true;
     pendingInitialScrollRef.current = true;
   }, [params.resetKey]);
-  useEffect7(() => {
+  useEffect8(() => {
     const scheduledScrollFrame = scheduledScrollFrameRef.current;
     return () => {
       if (scheduledScrollFrame !== null) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/agent-chat-ui",
-  "version": "0.2.14",
+  "version": "0.2.16",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",
@@ -45,15 +45,16 @@
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
+    "@types/node": "^20.19.33",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^6.0.1",
     "jsdom": "^25.0.1",
     "prettier": "^3.3.3",
     "tsup": "^8.3.5",
     "typescript": "^5.6.3",
-    "vite": "^6.0.1",
-    "vitest": "^2.1.2"
+    "vite": "^8.0.3",
+    "vitest": "^4.1.2"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm --dts --out-dir dist",