@nextclaw/agent-chat-ui 0.2.2 → 0.2.3

package/dist/index.d.ts

@@ -128,6 +128,7 @@ type ChatInputBarProps = {
         placeholder: string;
         disabled: boolean;
         onNodesChange: (nodes: ChatComposerNode[]) => void;
+        onFilesAdd?: (files: File[]) => Promise<void> | void;
         onSlashQueryChange?: (query: string | null) => void;
     };
     slashMenu: Pick<ChatSlashMenuProps, 'isLoading' | 'items' | 'texts'>;
@@ -155,6 +156,14 @@ type ChatMessagePartViewModel = {
 } | {
     type: 'tool-card';
     card: ChatToolPartViewModel;
+} | {
+    type: 'file';
+    file: {
+        label: string;
+        mimeType: string;
+        dataUrl?: string;
+        isImage: boolean;
+    };
 } | {
     type: 'unknown';
     label: string;

package/dist/index.js

@@ -1082,22 +1082,14 @@ var ChatComposerController = class {
       this.selection = { start: nextOffset, end: nextOffset };
       return this.getSnapshot();
     };
+    this.insertFileToken = (tokenKey, label) => {
+      return this.insertToken("file", tokenKey, label);
+    };
     this.insertSkillToken = (tokenKey, label) => {
       if (this.getSelectedSkillKeys().includes(tokenKey)) {
         return this.getSnapshot();
       }
-      const trigger = this.getSlashTrigger();
-      const documentLength = this.getDocumentLength();
-      const replaceStart = trigger?.start ?? this.selection?.start ?? documentLength;
-      const replaceEnd = trigger?.end ?? this.selection?.end ?? replaceStart;
-      this.nodes = replaceChatComposerRange(
-        this.nodes,
-        replaceStart,
-        replaceEnd,
-        [createChatComposerTokenNode({ tokenKind: "skill", tokenKey, label })]
-      );
-      this.selection = { start: replaceStart + 1, end: replaceStart + 1 };
-      return this.getSnapshot();
+      return this.insertToken("skill", tokenKey, label, this.getSlashTrigger());
     };
     this.syncSelectedSkills = (nextKeys, options) => {
       const selectedSkillKeys = this.getSelectedSkillKeys();
@@ -1150,6 +1142,19 @@ var ChatComposerController = class {
     this.getSelectedSkillKeys = () => {
       return extractChatComposerTokenKeys(this.nodes, "skill");
     };
+    this.insertToken = (tokenKind, tokenKey, label, trigger = null) => {
+      const documentLength = this.getDocumentLength();
+      const replaceStart = trigger?.start ?? this.selection?.start ?? documentLength;
+      const replaceEnd = trigger?.end ?? this.selection?.end ?? replaceStart;
+      this.nodes = replaceChatComposerRange(
+        this.nodes,
+        replaceStart,
+        replaceEnd,
+        [createChatComposerTokenNode({ tokenKind, tokenKey, label })]
+      );
+      this.selection = { start: replaceStart + 1, end: replaceStart + 1 };
+      return this.getSnapshot();
+    };
     this.getSlashTrigger = () => {
       return resolveChatComposerSlashTrigger(this.nodes, this.selection);
     };
@@ -1443,7 +1448,13 @@ var ChatComposerViewController = class {
       }
     };
     this.handlePaste = (params) => {
-      const { event, commitSnapshot } = params;
+      const { event, onFilesAdd, commitSnapshot } = params;
+      const files = Array.from(event.clipboardData.files ?? []);
+      if (files.length > 0 && onFilesAdd) {
+        event.preventDefault();
+        void onFilesAdd(files);
+        return;
+      }
       const text = event.clipboardData.getData("text/plain");
       if (!text) {
         return;
@@ -1497,6 +1508,9 @@ var ChatComposerRuntime = class {
         insertSlashItem: (item) => {
           this.viewController.insertSlashItem(item, this.commitSnapshot);
         },
+        insertFileToken: (tokenKey, label) => {
+          this.commitSnapshot(this.controller.insertFileToken(tokenKey, label));
+        },
         syncSelectedSkills: (nextKeys, options) => {
           this.viewController.syncSelectedSkills(nextKeys, options, this.commitSnapshot);
         }
@@ -1558,6 +1572,12 @@ var ChatComposerRuntime = class {
     };
     this.handleKeyDown = (event) => {
       const config = this.requireConfig();
+      if (this.rootElement && !this.isComposing) {
+        const nextSnapshot = this.viewController.syncSelectionFromRoot(this.rootElement);
+        this.selection = nextSnapshot.selection;
+        this.selectedRange = nextSnapshot.selection;
+        this.snapshot = nextSnapshot;
+      }
       const activeSlashItem = config.slashItems[config.activeSlashIndex] ?? null;
       this.viewController.handleKeyDown({
         event,
@@ -1575,6 +1595,7 @@ var ChatComposerRuntime = class {
     this.handlePaste = (event) => {
       this.viewController.handlePaste({
         event,
+        onFilesAdd: this.requireConfig().onFilesAdd,
         commitSnapshot: this.commitSnapshot
       });
     };
@@ -1605,6 +1626,7 @@ var ChatComposerRuntime = class {
     };
     this.syncSlashState = (nextSnapshot) => {
       const config = this.requireConfig();
+      config.onSlashTriggerChange?.(nextSnapshot.slashTrigger);
       config.onSlashQueryChange?.(nextSnapshot.slashTrigger?.query ?? null);
       config.onSlashOpenChange(nextSnapshot.slashTrigger !== null);
     };
@@ -1630,7 +1652,9 @@ var ChatInputBarTokenizedComposer = forwardRef6(function ChatInputBarTokenizedCo
     slashItems,
     actions,
     onNodesChange,
+    onFilesAdd,
     onSlashQueryChange,
+    onSlashTriggerChange,
     onSlashOpenChange,
     onSlashActiveIndexChange,
     activeSlashIndex
@@ -1655,7 +1679,9 @@ var ChatInputBarTokenizedComposer = forwardRef6(function ChatInputBarTokenizedCo
     slashItems,
     actions,
     onNodesChange,
+    onFilesAdd,
     onSlashQueryChange,
+    onSlashTriggerChange,
     onSlashOpenChange,
     onSlashActiveIndexChange,
     activeSlashIndex,
@@ -1722,7 +1748,9 @@ function ChatInputBar(props) {
   const composerRef = useRef4(null);
   const [slashQuery, setSlashQuery] = useState4(null);
   const [activeSlashIndex, setActiveSlashIndex] = useState4(0);
-  const isSlashPanelOpen = slashQuery !== null;
+  const [activeSlashTriggerStart, setActiveSlashTriggerStart] = useState4(null);
+  const [dismissedSlashTriggerStart, setDismissedSlashTriggerStart] = useState4(null);
+  const isSlashPanelOpen = activeSlashTriggerStart !== null && dismissedSlashTriggerStart !== activeSlashTriggerStart;
   const activeSlashItem = props.slashMenu.items[activeSlashIndex] ?? null;
   useEffect4(() => {
     setActiveSlashIndex((current) => {
@@ -1737,6 +1765,11 @@ function ChatInputBar(props) {
       setActiveSlashIndex(0);
     }
   }, [slashQuery]);
+  useEffect4(() => {
+    if (activeSlashTriggerStart === null && dismissedSlashTriggerStart !== null) {
+      setDismissedSlashTriggerStart(null);
+    }
+  }, [activeSlashTriggerStart, dismissedSlashTriggerStart]);
   const toolbar = useMemo3(() => {
     if (!props.toolbar.skillPicker) {
       return props.toolbar;
@@ -1764,13 +1797,17 @@ function ChatInputBar(props) {
           actions: props.toolbar.actions,
           activeSlashIndex,
           onNodesChange: props.composer.onNodesChange,
+          onFilesAdd: props.composer.onFilesAdd,
           onSlashQueryChange: (query) => {
             setSlashQuery(query);
             props.composer.onSlashQueryChange?.(query);
           },
+          onSlashTriggerChange: (trigger) => {
+            setActiveSlashTriggerStart(trigger?.start ?? null);
+          },
           onSlashOpenChange: (open) => {
-            if (!open) {
-              setSlashQuery(null);
+            if (!open && activeSlashTriggerStart !== null) {
+              setDismissedSlashTriggerStart(activeSlashTriggerStart);
             }
           },
           onSlashActiveIndexChange: setActiveSlashIndex
@@ -1786,11 +1823,12 @@ function ChatInputBar(props) {
           activeItem: activeSlashItem,
           texts: props.slashMenu.texts,
           onSelectItem: (item) => {
+            setDismissedSlashTriggerStart(null);
             composerRef.current?.insertSlashItem(item);
           },
           onOpenChange: (open) => {
-            if (!open) {
-              setSlashQuery(null);
+            if (!open && activeSlashTriggerStart !== null) {
+              setDismissedSlashTriggerStart(activeSlashTriggerStart);
             }
           },
           onSetActiveIndex: setActiveSlashIndex
@@ -2077,12 +2115,27 @@ function ChatMessageMarkdown(props) {
   return /* @__PURE__ */ jsx14("div", { className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"), children: /* @__PURE__ */ jsx14(ReactMarkdown, { skipHtml: true, remarkPlugins: [remarkGfm], components: markdownComponents, children: trimMarkdown(props.text) }) });
 }
 
-// src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
+// src/components/chat/ui/chat-message-list/chat-message-file.tsx
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+function ChatMessageFile({ file }) {
+  if (file.isImage && file.dataUrl) {
+    return /* @__PURE__ */ jsxs8("figure", { className: "overflow-hidden rounded-2xl border border-black/8 bg-black/6", children: [
+      /* @__PURE__ */ jsx15("img", { src: file.dataUrl, alt: file.label, className: "block max-h-80 w-full object-contain" }),
+      /* @__PURE__ */ jsx15("figcaption", { className: "border-t border-black/8 px-3 py-2 text-xs opacity-80", children: file.label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8("div", { className: "rounded-2xl border border-black/8 bg-black/6 px-3 py-2 text-sm", children: [
+    /* @__PURE__ */ jsx15("div", { className: "font-medium", children: file.label }),
+    /* @__PURE__ */ jsx15("div", { className: "text-xs opacity-75", children: file.mimeType })
+  ] });
+}
+
+// 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__ */ jsxs8("details", { className: "mt-3", open: true, children: [
-    /* @__PURE__ */ jsx15("summary", { className: cn("cursor-pointer text-xs", props.isUser ? "text-primary-100" : "text-gray-500"), children: props.label }),
-    /* @__PURE__ */ jsx15(
+  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 }),
+    /* @__PURE__ */ jsx16(
       "pre",
       {
         className: cn(
@@ -2097,87 +2150,90 @@ function ChatReasoningBlock(props) {
 
 // src/components/chat/ui/chat-message-list/chat-tool-card.tsx
 import { Clock3, FileSearch, Globe, Search as Search2, SendHorizontal, Terminal, Wrench as Wrench2 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var TOOL_OUTPUT_PREVIEW_MAX = 220;
 function renderToolIcon(toolName) {
   const lowered = toolName.toLowerCase();
   if (lowered.includes("exec") || lowered.includes("shell") || lowered.includes("command")) {
-    return /* @__PURE__ */ jsx16(Terminal, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx17(Terminal, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("search")) {
-    return /* @__PURE__ */ jsx16(Search2, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx17(Search2, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("fetch") || lowered.includes("http") || lowered.includes("web")) {
-    return /* @__PURE__ */ jsx16(Globe, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx17(Globe, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("read") || lowered.includes("file")) {
-    return /* @__PURE__ */ jsx16(FileSearch, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx17(FileSearch, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("message") || lowered.includes("send")) {
-    return /* @__PURE__ */ jsx16(SendHorizontal, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx17(SendHorizontal, { className: "h-3.5 w-3.5" });
   }
   if (lowered.includes("cron") || lowered.includes("schedule")) {
-    return /* @__PURE__ */ jsx16(Clock3, { className: "h-3.5 w-3.5" });
+    return /* @__PURE__ */ jsx17(Clock3, { className: "h-3.5 w-3.5" });
   }
-  return /* @__PURE__ */ jsx16(Wrench2, { className: "h-3.5 w-3.5" });
+  return /* @__PURE__ */ jsx17(Wrench2, { className: "h-3.5 w-3.5" });
 }
 function ChatToolCard({ card }) {
   const output = card.output?.trim() ?? "";
   const showDetails = output.length > TOOL_OUTPUT_PREVIEW_MAX || output.includes("\n");
   const preview = showDetails ? `${output.slice(0, TOOL_OUTPUT_PREVIEW_MAX)}...` : output;
   const showOutputSection = card.kind === "result" || card.hasResult;
-  return /* @__PURE__ */ jsxs9("div", { className: "rounded-xl border border-amber-200/80 bg-amber-50/60 px-3 py-2.5", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center gap-2 text-xs font-semibold text-amber-800", children: [
+  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__ */ jsx16("span", { children: card.titleLabel }),
-      /* @__PURE__ */ jsx16("span", { className: "font-mono text-[11px] text-amber-900/80", children: card.toolName })
+      /* @__PURE__ */ jsx17("span", { children: card.titleLabel }),
+      /* @__PURE__ */ jsx17("span", { className: "font-mono text-[11px] text-amber-900/80", children: card.toolName })
     ] }),
-    card.summary ? /* @__PURE__ */ jsx16("div", { className: "mt-1 break-words font-mono text-[11px] text-amber-800/90", children: card.summary }) : null,
-    showOutputSection ? /* @__PURE__ */ jsx16("div", { className: "mt-2", children: !output ? /* @__PURE__ */ jsx16("div", { className: "text-[11px] text-amber-700/80", children: card.emptyLabel }) : showDetails ? /* @__PURE__ */ jsxs9("details", { className: "group", children: [
-      /* @__PURE__ */ jsx16("summary", { className: "cursor-pointer text-[11px] text-amber-700", children: card.outputLabel }),
-      /* @__PURE__ */ jsx16("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__ */ jsx16("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
+    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
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
-import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function ChatUnknownPart(props) {
-  return /* @__PURE__ */ jsxs10("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "font-semibold text-gray-700", children: [
+  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: [
       props.label,
       ": ",
       props.rawType
     ] }),
-    props.text ? /* @__PURE__ */ jsx17("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
+    props.text ? /* @__PURE__ */ jsx18("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 jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function ChatMessage(props) {
   const { message, texts } = props;
   const { role } = message;
   const isUser = role === "user";
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "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__ */ jsx18("div", { className: "space-y-2", children: message.parts.map((part, index) => {
+      children: /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: message.parts.map((part, index) => {
         if (part.type === "markdown") {
-          return /* @__PURE__ */ jsx18(ChatMessageMarkdown, { text: part.text, role, texts }, `markdown-${index}`);
+          return /* @__PURE__ */ jsx19(ChatMessageMarkdown, { text: part.text, role, texts }, `markdown-${index}`);
         }
         if (part.type === "reasoning") {
-          return /* @__PURE__ */ jsx18(ChatReasoningBlock, { label: part.label, text: part.text, isUser }, `reasoning-${index}`);
+          return /* @__PURE__ */ jsx19(ChatReasoningBlock, { label: part.label, text: part.text, isUser }, `reasoning-${index}`);
         }
         if (part.type === "tool-card") {
-          return /* @__PURE__ */ jsx18("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx18(ChatToolCard, { card: part.card }) }, `tool-${index}`);
+          return /* @__PURE__ */ jsx19("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx19(ChatToolCard, { card: part.card }) }, `tool-${index}`);
+        }
+        if (part.type === "file") {
+          return /* @__PURE__ */ jsx19(ChatMessageFile, { file: part.file }, `file-${index}`);
         }
         if (part.type === "unknown") {
-          return /* @__PURE__ */ jsx18(ChatUnknownPart, { label: part.label, rawType: part.rawType, text: part.text }, `unknown-${index}`);
+          return /* @__PURE__ */ jsx19(ChatUnknownPart, { label: part.label, rawType: part.rawType, text: part.text }, `unknown-${index}`);
         }
         return null;
       }) })
@@ -2186,9 +2242,9 @@ function ChatMessage(props) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-meta.tsx
-import { jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsxs as jsxs12 } from "react/jsx-runtime";
 function ChatMessageMeta(props) {
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: cn(
@@ -2205,7 +2261,7 @@ function ChatMessageMeta(props) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-list.tsx
-import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
 function hasRenderableText(value) {
   const trimmed = value.trim();
@@ -2227,21 +2283,21 @@ function ChatMessageList(props) {
   const hasRenderableAssistantDraft = visibleMessages.some(
     (message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending")
   );
-  return /* @__PURE__ */ jsxs12("div", { className: cn("space-y-5", props.className), children: [
+  return /* @__PURE__ */ jsxs13("div", { className: cn("space-y-5", props.className), children: [
     visibleMessages.map((message) => {
       const isUser = message.role === "user";
-      return /* @__PURE__ */ jsxs12("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
-        !isUser ? /* @__PURE__ */ jsx19(ChatMessageAvatar, { role: message.role }) : null,
-        /* @__PURE__ */ jsxs12("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
-          /* @__PURE__ */ jsx19(ChatMessage, { message, texts: props.texts }),
-          /* @__PURE__ */ jsx19(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser })
+      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 })
         ] }),
-        isUser ? /* @__PURE__ */ jsx19(ChatMessageAvatar, { role: message.role }) : null
+        isUser ? /* @__PURE__ */ jsx20(ChatMessageAvatar, { role: message.role }) : null
       ] }, message.id);
     }),
-    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs12("div", { className: "flex justify-start gap-3", children: [
-      /* @__PURE__ */ jsx19(ChatMessageAvatar, { role: "assistant" }),
-      /* @__PURE__ */ jsx19("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__ */ 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 })
     ] }) : null
   ] });
 }

package/package.json

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