@nextclaw/agent-chat-ui 0.2.2 → 0.2.4

package/dist/index.d.ts

@@ -1,5 +1,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
 import { RefObject } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type ChatTexts = {
     slashLoadingLabel: string;
@@ -128,6 +129,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 +157,14 @@ type ChatMessagePartViewModel = {
 } | {
     type: 'tool-card';
     card: ChatToolPartViewModel;
+} | {
+    type: 'file';
+    file: {
+        label: string;
+        mimeType: string;
+        dataUrl?: string;
+        isImage: boolean;
+    };
 } | {
     type: 'unknown';
     label: string;
@@ -182,7 +192,15 @@ type ChatMessageListProps = {
     className?: string;
 };
 
-declare function ChatInputBar(props: ChatInputBarProps): react_jsx_runtime.JSX.Element;
+type ChatInputBarHandle = {
+    insertFileToken: (tokenKey: string, label: string) => void;
+    insertFileTokens: (tokens: Array<{
+        tokenKey: string;
+        label: string;
+    }>) => void;
+    focusComposer: () => void;
+};
+declare const ChatInputBar: react.ForwardRefExoticComponent<ChatInputBarProps & react.RefAttributes<ChatInputBarHandle>>;
 
 declare function ChatMessageList(props: ChatMessageListProps): react_jsx_runtime.JSX.Element;
 
@@ -246,4 +264,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 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 ChatToolbarSelectOption, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/chat/ui/chat-input-bar/chat-input-bar.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
+import { forwardRef as forwardRef7, useEffect as useEffect4, useImperativeHandle as useImperativeHandle2, useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
 
 // src/components/chat/ui/chat-input-bar/chat-slash-menu.tsx
 import { useMemo, useRef as useRef2 } from "react";
@@ -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);
     };
@@ -1246,32 +1251,76 @@ var ChatComposerSurfaceRenderer = class {
       element.dataset.composerTokenKind = node.tokenKind;
       element.dataset.composerTokenKey = node.tokenKey;
       element.dataset.composerLabel = node.label;
-      element.className = [
+      element.title = node.label;
+      element.className = this.buildTokenClassName(node.tokenKind, isSelected);
+      element.append(this.createTokenIcon(node.tokenKind));
+      const label = document.createElement("span");
+      label.className = node.tokenKind === "file" ? "min-w-0 flex-1 truncate text-[12px] font-medium text-slate-800" : "truncate";
+      label.textContent = node.label;
+      element.append(label);
+      if (node.tokenKind === "file") {
+        const badge = document.createElement("span");
+        badge.className = [
+          "hidden",
+          "shrink-0",
+          "rounded-md",
+          "border",
+          "border-sky-100",
+          "bg-sky-50",
+          "px-1.5",
+          "py-0.5",
+          "text-[9px]",
+          "font-semibold",
+          "uppercase",
+          "tracking-[0.12em]",
+          "text-sky-700",
+          "sm:inline-flex"
+        ].join(" ");
+        badge.textContent = this.resolveFileBadgeLabel(node.label);
+        element.append(badge);
+      }
+      return element;
+    };
+    this.buildTokenClassName = (tokenKind, isSelected) => {
+      if (tokenKind === "file") {
+        return [
+          "mx-[2px]",
+          "inline-flex",
+          "h-8",
+          "max-w-[min(100%,19rem)]",
+          "items-center",
+          "gap-2",
+          "rounded-xl",
+          "border",
+          "px-2",
+          "pr-2.5",
+          "align-baseline",
+          "shadow-[0_1px_2px_rgba(15,23,42,0.06)]",
+          "transition-[border-color,background-color,box-shadow,color]",
+          "duration-150",
+          isSelected ? "border-sky-300 bg-sky-50 text-slate-900 shadow-[0_0_0_3px_rgba(14,165,233,0.14)]" : "border-slate-200 bg-[linear-gradient(180deg,rgba(255,255,255,1),rgba(248,250,252,0.98))] text-slate-700"
+        ].join(" ");
+      }
+      return [
         "mx-[2px]",
         "inline-flex",
-        "h-6",
+        "h-7",
         "max-w-full",
         "items-center",
-        "gap-1",
-        "rounded-md",
+        "gap-1.5",
+        "rounded-lg",
         "border",
-        "px-1.5",
+        "px-2",
         "align-baseline",
         "text-[11px]",
         "font-medium",
         "transition",
         isSelected ? "border-primary/30 bg-primary/18 text-primary" : "border-primary/12 bg-primary/8 text-primary"
       ].join(" ");
-      element.append(this.createTokenIcon(node.tokenKind));
-      const label = document.createElement("span");
-      label.className = "truncate";
-      label.textContent = node.label;
-      element.append(label);
-      return element;
     };
     this.createTokenIcon = (tokenKind) => {
       const wrapper = document.createElement("span");
-      wrapper.className = "inline-flex h-3 w-3 shrink-0 items-center justify-center text-primary/70";
+      wrapper.className = tokenKind === "file" ? "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-lg bg-sky-100 text-sky-700" : "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center text-primary/70";
       wrapper.append(tokenKind === "file" ? this.createFileIcon() : this.createSkillIcon());
       return wrapper;
     };
@@ -1285,12 +1334,15 @@ var ChatComposerSurfaceRenderer = class {
     };
     this.createFileIcon = () => {
       return this.createSvgIcon([
-        { tag: "path", attrs: { d: "M5.25 2.75h4.5L13 6v7.25A1.75 1.75 0 0 1 11.25 15h-6.5A1.75 1.75 0 0 1 3 13.25v-8.75A1.75 1.75 0 0 1 4.75 2.75Z" } },
-        { tag: "path", attrs: { d: "M9.75 2.75V6H13" } },
-        { tag: "path", attrs: { d: "M5.75 8.75h4.5" } },
-        { tag: "path", attrs: { d: "M5.75 10.75h4.5" } }
+        { tag: "path", attrs: { d: "M3.25 4.25A1.5 1.5 0 0 1 4.75 2.75h6.5a1.5 1.5 0 0 1 1.5 1.5v7.5a1.5 1.5 0 0 1-1.5 1.5h-6.5a1.5 1.5 0 0 1-1.5-1.5v-7.5Z" } },
+        { tag: "path", attrs: { d: "m4.75 10 2.25-2.5 1.75 1.75 1.25-1.25 2 2" } },
+        { tag: "path", attrs: { d: "M9.75 6.25h.01" } }
       ]);
     };
+    this.resolveFileBadgeLabel = (label) => {
+      const match = /\.([a-z0-9]+)$/i.exec(label.trim());
+      return match?.[1]?.slice(0, 4).toUpperCase() || "IMG";
+    };
     this.createSvgIcon = (children) => {
       const svg = document.createElementNS(SVG_NAMESPACE, "svg");
       svg.setAttribute("viewBox", "0 0 16 16");
@@ -1443,7 +1495,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;
@@ -1452,8 +1510,8 @@ var ChatComposerViewController = class {
       commitSnapshot(this.controller.insertText(text));
     };
     this.handleBlur = (params) => {
-      const { setSelectedRange, onSlashQueryChange, onSlashOpenChange } = params;
-      setSelectedRange(null);
+      const { clearSelectedRange, onSlashQueryChange, onSlashOpenChange } = params;
+      clearSelectedRange();
       onSlashQueryChange?.(null);
       onSlashOpenChange(false);
     };
@@ -1497,6 +1555,23 @@ var ChatComposerRuntime = class {
         insertSlashItem: (item) => {
           this.viewController.insertSlashItem(item, this.commitSnapshot);
         },
+        insertFileToken: (tokenKey, label) => {
+          this.commitSnapshot(this.controller.insertFileToken(tokenKey, label));
+          this.focusComposerSoon();
+        },
+        insertFileTokens: (tokens) => {
+          let nextSnapshot = null;
+          for (const token of tokens) {
+            nextSnapshot = this.controller.insertFileToken(token.tokenKey, token.label);
+          }
+          if (nextSnapshot) {
+            this.commitSnapshot(nextSnapshot);
+            this.focusComposerSoon();
+          }
+        },
+        focusComposer: () => {
+          this.focusComposer();
+        },
         syncSelectedSkills: (nextKeys, options) => {
           this.viewController.syncSelectedSkills(nextKeys, options, this.commitSnapshot);
         }
@@ -1558,6 +1633,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 +1656,7 @@ var ChatComposerRuntime = class {
     this.handlePaste = (event) => {
       this.viewController.handlePaste({
         event,
+        onFilesAdd: this.requireConfig().onFilesAdd,
         commitSnapshot: this.commitSnapshot
       });
     };
@@ -1582,7 +1664,7 @@ var ChatComposerRuntime = class {
       const config = this.requireConfig();
       this.isComposing = false;
       this.viewController.handleBlur({
-        setSelectedRange: this.setSelectedRange,
+        clearSelectedRange: this.clearSelectedRange,
         onSlashQueryChange: config.onSlashQueryChange,
         onSlashOpenChange: config.onSlashOpenChange
       });
@@ -1592,6 +1674,10 @@ var ChatComposerRuntime = class {
       this.selection = selection;
       this.requestRender();
     };
+    this.clearSelectedRange = () => {
+      this.selectedRange = null;
+      this.requestRender();
+    };
     this.commitSnapshot = (nextSnapshot) => {
       const config = this.requireConfig();
       this.selection = nextSnapshot.selection;
@@ -1605,12 +1691,27 @@ 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);
     };
     this.requestRender = () => {
       this.requireConfig().requestRender();
     };
+    this.focusComposerSoon = () => {
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => this.focusComposer());
+        return;
+      }
+      this.focusComposer();
+    };
+    this.focusComposer = () => {
+      if (!this.rootElement) {
+        return;
+      }
+      this.rootElement.focus();
+      this.viewController.restoreSelectionIfFocused(this.rootElement, this.selection);
+    };
     this.requireConfig = () => {
       if (!this.config) {
         throw new Error("ChatComposerRuntime is not configured.");
@@ -1630,7 +1731,9 @@ var ChatInputBarTokenizedComposer = forwardRef6(function ChatInputBarTokenizedCo
     slashItems,
     actions,
     onNodesChange,
+    onFilesAdd,
     onSlashQueryChange,
+    onSlashTriggerChange,
     onSlashOpenChange,
     onSlashActiveIndexChange,
     activeSlashIndex
@@ -1655,7 +1758,9 @@ var ChatInputBarTokenizedComposer = forwardRef6(function ChatInputBarTokenizedCo
     slashItems,
     actions,
     onNodesChange,
+    onFilesAdd,
     onSlashQueryChange,
+    onSlashTriggerChange,
     onSlashOpenChange,
     onSlashActiveIndexChange,
     activeSlashIndex,
@@ -1718,11 +1823,13 @@ function InputBarHint({ hint }) {
     ) : null
   ] }) });
 }
-function ChatInputBar(props) {
+var ChatInputBar = forwardRef7(function ChatInputBar2(props, ref) {
   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 +1844,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;
@@ -1751,6 +1863,11 @@ function ChatInputBar(props) {
       }
     };
   }, [props.toolbar]);
+  useImperativeHandle2(ref, () => ({
+    insertFileToken: (tokenKey, label) => composerRef.current?.insertFileToken(tokenKey, label),
+    insertFileTokens: (tokens) => composerRef.current?.insertFileTokens(tokens),
+    focusComposer: () => composerRef.current?.focusComposer()
+  }), []);
   return /* @__PURE__ */ jsx11("div", { className: "border-t border-gray-200/80 bg-white p-4", children: /* @__PURE__ */ jsx11("div", { className: "mx-auto w-full max-w-[min(1120px,100%)]", children: /* @__PURE__ */ jsxs6("div", { className: "overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-card", children: [
     /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
       /* @__PURE__ */ jsx11(
@@ -1764,13 +1881,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 +1907,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
@@ -1800,7 +1922,8 @@ function ChatInputBar(props) {
     /* @__PURE__ */ jsx11(InputBarHint, { hint: props.hint }),
     /* @__PURE__ */ jsx11(ChatInputBarToolbar, { ...toolbar })
   ] }) }) });
-}
+});
+ChatInputBar.displayName = "ChatInputBar";
 
 // src/components/chat/ui/chat-message-list/chat-message-avatar.tsx
 import { Bot, User, Wrench } from "lucide-react";
@@ -2077,12 +2200,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 +2235,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 +2327,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 +2346,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 +2368,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.4",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",