@nextclaw/agent-chat-ui 0.2.16 → 0.2.18

package/dist/index.d.ts

@@ -81,6 +81,11 @@ type ChatSkillPickerOption = {
     description?: string;
     badgeLabel?: string;
 };
+type ChatSkillPickerOptionGroup = {
+    key: string;
+    label?: string;
+    options: ChatSkillPickerOption[];
+};
 type ChatSkillPickerProps = {
     title: string;
     searchPlaceholder: string;
@@ -90,6 +95,7 @@ type ChatSkillPickerProps = {
     manageLabel?: string;
     manageHref?: string;
     options: ChatSkillPickerOption[];
+    groups?: ChatSkillPickerOptionGroup[];
     selectedKeys: string[];
     onSelectedKeysChange: (next: string[]) => void;
 };
@@ -138,7 +144,9 @@ type ChatInputBarProps = {
         onFilesAdd?: (files: File[]) => Promise<void> | void;
         onSlashQueryChange?: (query: string | null) => void;
     };
-    slashMenu: Pick<ChatSlashMenuProps, "isLoading" | "items" | "texts">;
+    slashMenu: Pick<ChatSlashMenuProps, "isLoading" | "items" | "texts"> & {
+        onSelectItem?: (item: ChatSlashItem) => void;
+    };
     hint?: ChatInlineHint | null;
     toolbar: ChatInputBarToolbarProps;
 };
@@ -155,9 +163,25 @@ type ChatToolPartViewModel = {
     outputLabel: string;
     emptyLabel: string;
 };
+type ChatInlineTokenViewModel = {
+    kind: string;
+    key: string;
+    label: string;
+    rawText: string;
+};
+type ChatInlineContentSegmentViewModel = {
+    type: "markdown";
+    text: string;
+} | {
+    type: "token";
+    token: ChatInlineTokenViewModel;
+};
 type ChatMessagePartViewModel = {
     type: "markdown";
     text: string;
+} | {
+    type: "inline-content";
+    segments: ChatInlineContentSegmentViewModel[];
 } | {
     type: "reasoning";
     text: string;
@@ -275,4 +299,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 ChatToolbarSelectGroup, 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 ChatInlineContentSegmentViewModel, type ChatInlineHint, type ChatInlineTokenViewModel, 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

@@ -424,23 +424,36 @@ function ChatInputBarSkillPicker(props) {
   const [activeIndex, setActiveIndex] = useState2(0);
   const selectedSet = useMemo2(() => new Set(picker.selectedKeys), [picker.selectedKeys]);
   const selectedCount = picker.selectedKeys.length;
-  const filteredOptions = useMemo2(() => filterOptions(picker.options, query), [picker.options, query]);
+  const isSearchActive = query.trim().length > 0;
+  const groupedOptions = useMemo2(() => {
+    if (isSearchActive) {
+      return null;
+    }
+    const groups = picker.groups?.filter((group) => group.options.length > 0) ?? [];
+    return groups.length > 0 ? groups : null;
+  }, [isSearchActive, picker.groups]);
+  const visibleOptions = useMemo2(() => {
+    if (groupedOptions) {
+      return groupedOptions.flatMap((group) => group.options);
+    }
+    return filterOptions(picker.options, query);
+  }, [groupedOptions, picker.options, query]);
   useEffect3(() => {
     setActiveIndex(0);
   }, [query]);
   useEffect3(() => {
     setActiveIndex((current) => {
-      if (filteredOptions.length === 0) {
+      if (visibleOptions.length === 0) {
         return 0;
       }
-      return Math.min(current, filteredOptions.length - 1);
+      return Math.min(current, visibleOptions.length - 1);
     });
-  }, [filteredOptions.length]);
+  }, [visibleOptions.length]);
   useActiveItemScroll({
     containerRef: listRef,
     activeIndex,
-    itemCount: filteredOptions.length,
-    isEnabled: filteredOptions.length > 0,
+    itemCount: visibleOptions.length,
+    isEnabled: visibleOptions.length > 0,
     getItemSelector: (index) => `[data-skill-index="${index}"]`
   });
   const onToggleOption = (optionKey) => {
@@ -451,12 +464,12 @@ function ChatInputBarSkillPicker(props) {
     picker.onSelectedKeysChange([...picker.selectedKeys, optionKey]);
   };
   const onSearchKeyDown = (event) => {
-    if (filteredOptions.length === 0) {
+    if (visibleOptions.length === 0) {
       return;
     }
     if (event.key === "ArrowDown") {
       event.preventDefault();
-      setActiveIndex((current) => Math.min(current + 1, filteredOptions.length - 1));
+      setActiveIndex((current) => Math.min(current + 1, visibleOptions.length - 1));
       return;
     }
     if (event.key === "ArrowUp") {
@@ -466,7 +479,7 @@ function ChatInputBarSkillPicker(props) {
     }
     if (event.key === "Enter") {
       event.preventDefault();
-      const activeOption = filteredOptions[activeIndex];
+      const activeOption = visibleOptions[activeIndex];
       if (activeOption) {
         onToggleOption(activeOption.key);
       }
@@ -502,7 +515,7 @@ function ChatInputBarSkillPicker(props) {
               "aria-controls": listId,
               "aria-expanded": "true",
               "aria-autocomplete": "list",
-              "aria-activedescendant": filteredOptions[activeIndex] ? `${listId}-option-${activeIndex}` : void 0,
+              "aria-activedescendant": visibleOptions[activeIndex] ? `${listId}-option-${activeIndex}` : void 0,
               className: "h-8 rounded-lg pl-8 text-xs"
             }
           )
@@ -516,41 +529,50 @@ function ChatInputBarSkillPicker(props) {
           role: "listbox",
           "aria-multiselectable": "true",
           className: "custom-scrollbar max-h-[320px] overflow-y-auto",
-          children: picker.isLoading ? /* @__PURE__ */ jsx8("div", { className: "p-4 text-xs text-gray-500", children: picker.loadingLabel }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "p-4 text-center text-xs text-gray-500", children: picker.emptyLabel }) : /* @__PURE__ */ jsx8("div", { className: "py-1", children: filteredOptions.map((option, index) => {
-            const isSelected = selectedSet.has(option.key);
-            const isActive = index === activeIndex;
-            return /* @__PURE__ */ jsxs4(
-              "button",
-              {
-                type: "button",
-                id: `${listId}-option-${index}`,
-                role: "option",
-                "aria-selected": isSelected,
-                "data-skill-index": index,
-                onClick: () => onToggleOption(option.key),
-                onMouseEnter: () => setActiveIndex(index),
-                className: `flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors ${isActive ? "bg-gray-50" : "hover:bg-gray-50"}`,
-                children: [
-                  /* @__PURE__ */ jsx8("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500", children: /* @__PURE__ */ jsx8(Puzzle, { className: "h-4 w-4" }) }),
-                  /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5", children: [
-                      /* @__PURE__ */ jsx8("span", { className: "truncate text-sm text-gray-900", children: option.label }),
-                      option.badgeLabel ? /* @__PURE__ */ jsx8("span", { className: "shrink-0 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary", children: option.badgeLabel }) : null
-                    ] }),
-                    /* @__PURE__ */ jsx8("div", { className: "mt-0.5 truncate text-xs text-gray-500", children: option.description || option.key })
-                  ] }),
-                  /* @__PURE__ */ jsx8("div", { className: "ml-3 shrink-0", children: /* @__PURE__ */ jsx8(
-                    "span",
-                    {
-                      className: isSelected ? "inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white" : "inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-white",
-                      children: isSelected ? /* @__PURE__ */ jsx8(Check2, { className: "h-3 w-3" }) : null
-                    }
-                  ) })
-                ]
-              },
-              option.key
-            );
-          }) })
+          children: picker.isLoading ? /* @__PURE__ */ jsx8("div", { className: "p-4 text-xs text-gray-500", children: picker.loadingLabel }) : visibleOptions.length === 0 ? /* @__PURE__ */ jsx8("div", { className: "p-4 text-center text-xs text-gray-500", children: picker.emptyLabel }) : /* @__PURE__ */ jsx8("div", { className: "py-1", children: (() => {
+            const groups = groupedOptions ?? [{ key: "all-skills", options: visibleOptions }];
+            let visibleIndex = 0;
+            return groups.map((group) => /* @__PURE__ */ jsxs4("div", { children: [
+              group.label ? /* @__PURE__ */ jsx8("div", { className: "px-4 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500", children: group.label }) : null,
+              group.options.map((option) => {
+                const index = visibleIndex;
+                visibleIndex += 1;
+                const isSelected = selectedSet.has(option.key);
+                const isActive = index === activeIndex;
+                return /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    type: "button",
+                    id: `${listId}-option-${index}`,
+                    role: "option",
+                    "aria-selected": isSelected,
+                    "data-skill-index": index,
+                    onClick: () => onToggleOption(option.key),
+                    onMouseEnter: () => setActiveIndex(index),
+                    className: `flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors ${isActive ? "bg-gray-50" : "hover:bg-gray-50"}`,
+                    children: [
+                      /* @__PURE__ */ jsx8("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500", children: /* @__PURE__ */ jsx8(Puzzle, { className: "h-4 w-4" }) }),
+                      /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5", children: [
+                          /* @__PURE__ */ jsx8("span", { className: "truncate text-sm text-gray-900", children: option.label }),
+                          option.badgeLabel ? /* @__PURE__ */ jsx8("span", { className: "shrink-0 rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary", children: option.badgeLabel }) : null
+                        ] }),
+                        /* @__PURE__ */ jsx8("div", { className: "mt-0.5 truncate text-xs text-gray-500", children: option.description || option.key })
+                      ] }),
+                      /* @__PURE__ */ jsx8("div", { className: "ml-3 shrink-0", children: /* @__PURE__ */ jsx8(
+                        "span",
+                        {
+                          className: isSelected ? "inline-flex h-5 w-5 items-center justify-center rounded-full bg-primary text-white" : "inline-flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-white",
+                          children: isSelected ? /* @__PURE__ */ jsx8(Check2, { className: "h-3 w-3" }) : null
+                        }
+                      ) })
+                    ]
+                  },
+                  option.key
+                );
+              })
+            ] }, group.key));
+          })() })
         }
       ),
       picker.manageHref && picker.manageLabel ? /* @__PURE__ */ jsx8("div", { className: "border-t border-gray-100 px-4 py-2.5", children: /* @__PURE__ */ jsxs4(
@@ -1189,6 +1211,9 @@ function resolveChatComposerKeyboardAction(params) {
     isSending,
     canStopGeneration
   } = params;
+  if (key === "Enter" && !shiftKey && isSending) {
+    return { type: "consume" };
+  }
   if (isSlashMenuOpen && slashItemCount > 0) {
     if (key === "ArrowDown") {
       return {
@@ -1433,6 +1458,7 @@ var ChatComposerViewController = class {
         actions,
         commitSnapshot,
         insertSkillToken,
+        onSlashItemSelect,
         onSlashActiveIndexChange,
         onSlashQueryChange,
         onSlashOpenChange
@@ -1452,36 +1478,17 @@ var ChatComposerViewController = class {
         return;
       }
       event.preventDefault();
-      if (action.type === "move-slash-index") {
-        onSlashActiveIndexChange(action.index);
-        return;
-      }
-      if (action.type === "insert-active-slash-item") {
-        if (activeSlashItem) {
-          insertSkillToken(activeSlashItem.value ?? activeSlashItem.key, activeSlashItem.title);
-        }
-        return;
-      }
-      if (action.type === "close-slash") {
-        onSlashQueryChange?.(null);
-        onSlashOpenChange(false);
-        return;
-      }
-      if (action.type === "stop-generation") {
-        void actions.onStop();
-        return;
-      }
-      if (action.type === "insert-line-break") {
-        commitSnapshot(this.controller.insertText("\n"));
-        return;
-      }
-      if (action.type === "send-message") {
-        void actions.onSend();
-        return;
-      }
-      if (action.type === "delete-content") {
-        commitSnapshot(this.controller.deleteContent(action.direction));
-      }
+      this.applyKeyboardAction({
+        action,
+        activeSlashItem,
+        actions,
+        commitSnapshot,
+        insertSkillToken,
+        onSlashItemSelect,
+        onSlashActiveIndexChange,
+        onSlashQueryChange,
+        onSlashOpenChange
+      });
     };
     this.handlePaste = (params) => {
       const { event, onFilesAdd, commitSnapshot } = params;
@@ -1504,6 +1511,60 @@ var ChatComposerViewController = class {
       onSlashQueryChange?.(null);
       onSlashOpenChange(false);
     };
+    this.applyKeyboardAction = (params) => {
+      const {
+        action,
+        activeSlashItem,
+        actions,
+        commitSnapshot,
+        insertSkillToken,
+        onSlashItemSelect,
+        onSlashActiveIndexChange,
+        onSlashQueryChange,
+        onSlashOpenChange
+      } = params;
+      switch (action.type) {
+        case "move-slash-index": {
+          onSlashActiveIndexChange(action.index);
+          return;
+        }
+        case "insert-active-slash-item": {
+          if (!activeSlashItem) {
+            return;
+          }
+          onSlashItemSelect?.(activeSlashItem);
+          insertSkillToken(activeSlashItem.value ?? activeSlashItem.key, activeSlashItem.title);
+          return;
+        }
+        case "close-slash": {
+          onSlashQueryChange?.(null);
+          onSlashOpenChange(false);
+          return;
+        }
+        case "consume": {
+          return;
+        }
+        case "stop-generation": {
+          void actions.onStop();
+          return;
+        }
+        case "insert-line-break": {
+          commitSnapshot(this.controller.insertText("\n"));
+          return;
+        }
+        case "send-message": {
+          void actions.onSend();
+          return;
+        }
+        case "delete-content": {
+          commitSnapshot(this.controller.deleteContent(action.direction));
+          return;
+        }
+        case "noop": {
+          return;
+        }
+      }
+    };
   }
 };
 
@@ -1542,6 +1603,7 @@ var ChatComposerRuntime = class {
     this.createHandle = () => {
       return {
         insertSlashItem: (item) => {
+          this.config?.onSlashItemSelect?.(item);
           this.viewController.insertSlashItem(item, this.commitSnapshot);
         },
         insertFileToken: (tokenKey, label) => {
@@ -1637,6 +1699,7 @@ var ChatComposerRuntime = class {
         actions: config.actions,
         commitSnapshot: this.commitSnapshot,
         insertSkillToken: this.insertSkillToken,
+        onSlashItemSelect: config.onSlashItemSelect,
         onSlashActiveIndexChange: config.onSlashActiveIndexChange,
         onSlashQueryChange: config.onSlashQueryChange,
         onSlashOpenChange: config.onSlashOpenChange
@@ -1731,6 +1794,7 @@ var ChatInputBarTokenizedComposer = forwardRef6(function ChatInputBarTokenizedCo
     placeholder,
     disabled,
     slashItems,
+    onSlashItemSelect,
     actions,
     onNodesChange,
     onFilesAdd,
@@ -1758,6 +1822,7 @@ var ChatInputBarTokenizedComposer = forwardRef6(function ChatInputBarTokenizedCo
     nodes,
     disabled,
     slashItems,
+    onSlashItemSelect,
     actions,
     onNodesChange,
     onFilesAdd,
@@ -1880,6 +1945,7 @@ var ChatInputBar = forwardRef7(function ChatInputBar2(props, ref) {
           placeholder: props.composer.placeholder,
           disabled: props.composer.disabled,
           slashItems: props.slashMenu.items,
+          onSlashItemSelect: props.slashMenu.onSelectItem,
           actions: props.toolbar.actions,
           activeSlashIndex,
           onNodesChange: props.composer.onNodesChange,
@@ -2131,7 +2197,7 @@ function ChatCodeBlock(props) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-markdown.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx14 } from "react/jsx-runtime";
 var MARKDOWN_MAX_CHARS = 14e4;
 var SAFE_LINK_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
 function trimMarkdown(value) {
@@ -2159,9 +2225,15 @@ function resolveSafeHref(href) {
 function isExternalHref(href) {
   return /^https?:\/\//i.test(href);
 }
-function ChatMessageMarkdown(props) {
-  const isUser = props.role === "user";
+function ChatMessageMarkdown({
+  text,
+  role,
+  texts,
+  inline = false
+}) {
+  const isUser = role === "user";
   const markdownComponents = useMemo5(() => ({
+    p: ({ children }) => inline ? /* @__PURE__ */ jsx14(Fragment2, { children }) : /* @__PURE__ */ jsx14("p", { children }),
     a: ({ href, children, ...rest }) => {
       const safeHref = resolveSafeHref(href);
       if (!safeHref) {
@@ -2199,10 +2271,101 @@ function ChatMessageMarkdown(props) {
       if (isInlineCode) {
         return /* @__PURE__ */ jsx14("code", { ...rest, className: cn("chat-inline-code", className), children });
       }
-      return /* @__PURE__ */ jsx14(ChatCodeBlock, { className, texts: props.texts, children });
+      return /* @__PURE__ */ jsx14(ChatCodeBlock, { className, texts, children });
     }
-  }), [props.texts]);
-  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) }) });
+  }), [inline, texts]);
+  const WrapperTag = inline ? "span" : "div";
+  return /* @__PURE__ */ jsx14(WrapperTag, { className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"), children: /* @__PURE__ */ jsx14(ReactMarkdown, { skipHtml: true, remarkPlugins: [remarkGfm], components: markdownComponents, children: trimMarkdown(text) }) });
+}
+
+// src/components/chat/ui/chat-message-list/chat-message-inline-content.tsx
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+function hasVisibleInlineText(value) {
+  return value.split("\u200B").join("").split("\u200C").join("").split("\u200D").join("").split("\u2060").join("").split("\uFEFF").join("").length > 0;
+}
+function ChatInlineSkillIcon() {
+  return /* @__PURE__ */ jsxs8(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className: "h-3 w-3",
+      children: [
+        /* @__PURE__ */ jsx15("path", { d: "M8.5 2.75 2.75 6l5.75 3.25L14.25 6 8.5 2.75Z" }),
+        /* @__PURE__ */ jsx15("path", { d: "M2.75 10 8.5 13.25 14.25 10" }),
+        /* @__PURE__ */ jsx15("path", { d: "M2.75 6v4l5.75 3.25V9.25L2.75 6Z" }),
+        /* @__PURE__ */ jsx15("path", { d: "M14.25 6v4L8.5 13.25V9.25L14.25 6Z" })
+      ]
+    }
+  );
+}
+function ChatInlineTokenBadge({
+  kind,
+  label,
+  isUser
+}) {
+  const isSkill = kind === "skill";
+  return /* @__PURE__ */ jsxs8(
+    "span",
+    {
+      className: cn(
+        "mx-[2px] inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border px-2 align-baseline text-[11px] font-medium",
+        isSkill ? isUser ? "border-white/25 bg-white/16 text-white" : "border-primary/12 bg-primary/8 text-primary" : isUser ? "border-white/20 bg-white/12 text-white" : "border-slate-200/80 bg-slate-50 text-slate-700"
+      ),
+      title: label,
+      children: [
+        /* @__PURE__ */ jsx15(
+          "span",
+          {
+            className: cn(
+              "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
+              isSkill ? isUser ? "text-white/75" : "text-primary/70" : isUser ? "text-white/70" : "text-slate-500"
+            ),
+            children: /* @__PURE__ */ jsx15(ChatInlineSkillIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx15("span", { className: "truncate", children: label })
+      ]
+    }
+  );
+}
+function ChatMessageInlineContent({
+  segments,
+  role,
+  texts
+}) {
+  const isUser = role === "user";
+  return /* @__PURE__ */ jsx15("div", { className: "whitespace-pre-wrap break-words leading-6", children: segments.map((segment, index) => {
+    if (segment.type === "token") {
+      return /* @__PURE__ */ jsx15(
+        ChatInlineTokenBadge,
+        {
+          kind: segment.token.kind,
+          label: segment.token.label,
+          isUser
+        },
+        `token-${index}-${segment.token.kind}-${segment.token.key}`
+      );
+    }
+    if (!hasVisibleInlineText(segment.text)) {
+      return /* @__PURE__ */ jsx15("span", { className: "whitespace-pre-wrap", children: segment.text }, `space-${index}`);
+    }
+    return /* @__PURE__ */ jsx15(
+      ChatMessageMarkdown,
+      {
+        text: segment.text,
+        role,
+        texts,
+        inline: true
+      },
+      `markdown-${index}`
+    );
+  }) });
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-file/meta.ts
@@ -2358,9 +2521,9 @@ function buildChatMessageFileMeta(file) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-file/index.tsx
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function renderMetaBadge(label, isUser) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "span",
     {
       className: cn(
@@ -2373,7 +2536,7 @@ function renderMetaBadge(label, isUser) {
   );
 }
 function renderMimeType(mimeType, isUser) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       className: cn(
@@ -2385,7 +2548,7 @@ function renderMimeType(mimeType, isUser) {
   );
 }
 function renderActionPill(label, isUser, isInteractive) {
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "span",
     {
       className: cn(
@@ -2410,7 +2573,7 @@ function ChatMessageFile({
     isInteractive && (isUser ? "hover:border-white/18 hover:bg-white/13" : "hover:border-slate-300 hover:bg-white hover:shadow-[0_24px_50px_-30px_rgba(15,23,42,0.3)]")
   );
   if (file.isImage && file.dataUrl) {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       "a",
       {
         href: file.dataUrl,
@@ -2418,8 +2581,8 @@ function ChatMessageFile({
         rel: "noreferrer",
         "aria-label": `Open preview: ${file.label}`,
         className: cn(shellClasses, "group"),
-        children: /* @__PURE__ */ jsxs8("figure", { children: [
-          /* @__PURE__ */ jsxs8(
+        children: /* @__PURE__ */ jsxs9("figure", { children: [
+          /* @__PURE__ */ jsxs9(
             "div",
             {
               className: cn(
@@ -2427,7 +2590,7 @@ function ChatMessageFile({
                 isUser ? "bg-white/[0.04]" : "bg-gradient-to-br from-slate-100 via-white to-slate-100"
               ),
               children: [
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16(
                   "img",
                   {
                     src: file.dataUrl,
@@ -2435,9 +2598,9 @@ function ChatMessageFile({
                     className: "block max-h-[22rem] w-full rounded-[1rem] object-cover shadow-[0_18px_40px_-26px_rgba(15,23,42,0.55)] transition duration-300 group-hover:scale-[1.01]"
                   }
                 ),
-                /* @__PURE__ */ jsxs8("div", { className: "pointer-events-none absolute inset-x-4 top-4 flex items-center justify-between", children: [
-                  sizeLabel ? renderMetaBadge(sizeLabel, isUser) : /* @__PURE__ */ jsx15("span", {}),
-                  /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsxs9("div", { className: "pointer-events-none absolute inset-x-4 top-4 flex items-center justify-between", children: [
+                  sizeLabel ? renderMetaBadge(sizeLabel, isUser) : /* @__PURE__ */ jsx16("span", {}),
+                  /* @__PURE__ */ jsx16(
                     "span",
                     {
                       className: cn(
@@ -2451,8 +2614,8 @@ function ChatMessageFile({
               ]
             }
           ),
-          /* @__PURE__ */ jsxs8("figcaption", { className: "flex items-start gap-3 p-4", children: [
-            /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsxs9("figcaption", { className: "flex items-start gap-3 p-4", children: [
+            /* @__PURE__ */ jsx16(
               "div",
               {
                 className: cn(
@@ -2462,10 +2625,10 @@ function ChatMessageFile({
                 children: tileLabel
               }
             ),
-            /* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx15("div", { className: "truncate text-sm font-semibold leading-5", children: file.label }),
-              /* @__PURE__ */ jsx15("div", { className: "mt-2 flex flex-wrap gap-2", children: metaBadges.map((label) => renderMetaBadge(label, isUser)) }),
-              /* @__PURE__ */ jsx15("div", { className: "mt-2", children: renderMimeType(file.mimeType, isUser) })
+            /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx16("div", { className: "truncate text-sm font-semibold leading-5", children: file.label }),
+              /* @__PURE__ */ jsx16("div", { className: "mt-2 flex flex-wrap gap-2", children: metaBadges.map((label) => renderMetaBadge(label, isUser)) }),
+              /* @__PURE__ */ jsx16("div", { className: "mt-2", children: renderMimeType(file.mimeType, isUser) })
             ] }),
             renderActionPill(actionLabel, isUser, true)
           ] })
@@ -2473,8 +2636,8 @@ function ChatMessageFile({
       }
     );
   }
-  const content = /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-3 p-3.5", children: [
-    /* @__PURE__ */ jsx15(
+  const content = /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3 p-3.5", children: [
+    /* @__PURE__ */ jsx16(
       "div",
       {
         className: cn(
@@ -2484,11 +2647,11 @@ function ChatMessageFile({
         children: tileLabel
       }
     ),
-    /* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx15("div", { className: "truncate text-sm font-semibold leading-5", children: file.label }),
-          /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx16("div", { className: "truncate text-sm font-semibold leading-5", children: file.label }),
+          /* @__PURE__ */ jsxs9(
             "div",
             {
               className: cn(
@@ -2504,14 +2667,14 @@ function ChatMessageFile({
         ] }),
         renderActionPill(actionLabel, isUser, isInteractive)
       ] }),
-      /* @__PURE__ */ jsx15("div", { className: "mt-3 flex flex-wrap gap-2", children: metaBadges.map((label) => renderMetaBadge(label, isUser)) }),
-      /* @__PURE__ */ jsx15("div", { className: "mt-2", children: renderMimeType(file.mimeType, isUser) })
+      /* @__PURE__ */ jsx16("div", { className: "mt-3 flex flex-wrap gap-2", children: metaBadges.map((label) => renderMetaBadge(label, isUser)) }),
+      /* @__PURE__ */ jsx16("div", { className: "mt-2", children: renderMimeType(file.mimeType, isUser) })
     ] })
   ] });
   if (!isInteractive) {
-    return /* @__PURE__ */ jsx15("div", { className: shellClasses, children: content });
+    return /* @__PURE__ */ jsx16("div", { className: shellClasses, children: content });
   }
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "a",
     {
       href: file.dataUrl,
@@ -2560,13 +2723,13 @@ function useReasoningBlockOpenState(params) {
 }
 
 // src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
-import { jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
   const { isOpen, onSummaryClick } = useReasoningBlockOpenState({
     isInProgress
   });
-  return /* @__PURE__ */ jsxs9("details", { className: "mt-2", open: isOpen, children: [
-    /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs10("details", { className: "mt-2", open: isOpen, children: [
+    /* @__PURE__ */ jsx17(
       "summary",
       {
         className: cn("cursor-pointer text-xs", isUser ? "text-primary-100" : "text-gray-500"),
@@ -2574,7 +2737,7 @@ function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
         children: label
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       "pre",
       {
         className: cn(
@@ -2592,9 +2755,9 @@ import { Terminal, FileText, Code2, Search as Search2, Globe } from "lucide-reac
 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";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function ToolCardRoot({ children, className }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: cn(
@@ -2607,7 +2770,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 px-3 pt-1 pb-2 w-full overflow-hidden", className), children });
+  return /* @__PURE__ */ jsx18("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
@@ -2615,7 +2778,7 @@ import { ChevronDown as ChevronDown2, ChevronRight } from "lucide-react";
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-status.tsx
 import { Check as Check4, Loader2, AlertTriangle, Minus } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 var STATUS_STYLES = {
   running: { text: "text-amber-500/80", icon: Loader2, spin: true },
   success: { text: "text-amber-500/80", icon: Check4, spin: false },
@@ -2625,14 +2788,14 @@ var STATUS_STYLES = {
 function ToolStatusLabel({ card }) {
   const style = STATUS_STYLES[card.statusTone] || STATUS_STYLES.cancelled;
   const Icon2 = style.icon;
-  return /* @__PURE__ */ jsxs10("span", { className: cn("inline-flex items-center gap-1.5 text-[11px] font-medium leading-none shrink-0", style.text), children: [
-    /* @__PURE__ */ jsx18(Icon2, { className: cn("h-3.5 w-3.5", style.spin && "animate-spin"), strokeWidth: 3 }),
+  return /* @__PURE__ */ jsxs11("span", { className: cn("inline-flex items-center gap-1.5 text-[11px] font-medium leading-none shrink-0", style.text), children: [
+    /* @__PURE__ */ jsx19(Icon2, { className: cn("h-3.5 w-3.5", style.spin && "animate-spin"), strokeWidth: 3 }),
     card.statusTone === "running" ? card.statusLabel : null
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-header.tsx
-import { Fragment as Fragment2, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function ToolCardHeader({
   card,
   icon: Icon2,
@@ -2641,7 +2804,7 @@ function ToolCardHeader({
   onToggle
 }) {
   const summaryPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: cn(
@@ -2650,19 +2813,19 @@ function ToolCardHeader({
       ),
       onClick: onToggle,
       children: [
-        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 font-mono min-w-0 max-w-[calc(100%-80px)] text-amber-950/80", children: [
-          /* @__PURE__ */ jsx19(Icon2, { className: "h-4 w-4 text-amber-600/80 shrink-0", strokeWidth: 3 }),
-          /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1.5 min-w-0", children: [
-            /* @__PURE__ */ jsx19("span", { className: "font-bold shrink-0 tracking-tight", children: card.toolName }),
-            summaryPart && /* @__PURE__ */ jsxs11(Fragment2, { children: [
-              /* @__PURE__ */ jsx19("span", { className: "text-amber-300 font-bold select-none shrink-0", children: "\u203A" }),
-              /* @__PURE__ */ jsx19("span", { className: "truncate flex-1 min-w-0 font-normal", title: summaryPart, children: summaryPart })
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 font-mono min-w-0 max-w-[calc(100%-80px)] text-amber-950/80", children: [
+          /* @__PURE__ */ jsx20(Icon2, { className: "h-4 w-4 text-amber-600/80 shrink-0", strokeWidth: 3 }),
+          /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5 min-w-0", children: [
+            /* @__PURE__ */ jsx20("span", { className: "font-bold shrink-0 tracking-tight", children: card.toolName }),
+            summaryPart && /* @__PURE__ */ jsxs12(Fragment3, { children: [
+              /* @__PURE__ */ jsx20("span", { className: "text-amber-300 font-bold select-none shrink-0", children: "\u203A" }),
+              /* @__PURE__ */ jsx20("span", { className: "truncate flex-1 min-w-0 font-normal", title: summaryPart, children: summaryPart })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-3 shrink-0", children: [
-          /* @__PURE__ */ jsx19(ToolStatusLabel, { card }),
-          canExpand && (expanded ? /* @__PURE__ */ jsx19(ChevronDown2, { className: "h-4 w-4 text-amber-400/80", strokeWidth: 3 }) : /* @__PURE__ */ jsx19(ChevronRight, { className: "h-4 w-4 text-amber-400/80", strokeWidth: 3 }))
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-3 shrink-0", children: [
+          /* @__PURE__ */ jsx20(ToolStatusLabel, { card }),
+          canExpand && (expanded ? /* @__PURE__ */ jsx20(ChevronDown2, { className: "h-4 w-4 text-amber-400/80", strokeWidth: 3 }) : /* @__PURE__ */ jsx20(ChevronRight, { className: "h-4 w-4 text-amber-400/80", strokeWidth: 3 }))
         ] })
       ]
     }
@@ -2670,7 +2833,7 @@ function ToolCardHeader({
 }
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-views.tsx
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function TerminalExecutionView({ card }) {
   const output = card.output?.trim() ?? "";
   const isRunning = card.statusTone === "running";
@@ -2697,8 +2860,8 @@ function TerminalExecutionView({ card }) {
     setHasUserToggled(true);
   };
   const commandPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
-  return /* @__PURE__ */ jsxs12(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs13(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx21(
       ToolCardHeader,
       {
         card,
@@ -2708,17 +2871,17 @@ function TerminalExecutionView({ card }) {
         onToggle
       }
     ),
-    expanded && /* @__PURE__ */ jsxs12(Fragment3, { 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__ */ jsxs12("div", { className: "text-amber-950/80 break-words whitespace-pre-wrap tracking-tight font-medium inline-block", children: [
+    expanded && /* @__PURE__ */ jsxs13(Fragment4, { children: [
+      /* @__PURE__ */ jsx21("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__ */ jsxs13("div", { className: "flex items-start gap-2 leading-relaxed", children: [
+        /* @__PURE__ */ jsx21("span", { className: "text-amber-500/50 font-medium shrink-0 select-none mt-[1px]", children: "$" }),
+        /* @__PURE__ */ jsx21("div", { className: "flex-1 min-w-0", children: commandPart ? /* @__PURE__ */ jsxs13("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" }) })
+          isRunning && !output && /* @__PURE__ */ jsx21("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
+        ] }) : /* @__PURE__ */ jsx21("div", { className: "h-3 w-32 bg-amber-200/30 rounded animate-pulse mt-2" }) })
       ] }) }),
-      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 && /* @__PURE__ */ jsx21(ToolCardContent, { children: /* @__PURE__ */ jsxs13("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" })
+        isRunning && /* @__PURE__ */ jsx21("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
       ] }) })
     ] })
   ] });
@@ -2744,26 +2907,26 @@ function FileOperationView({ card }) {
   const renderLine = (line, idx) => {
     if (isEdit) {
       if (line.startsWith("+") && !line.startsWith("+++")) {
-        return /* @__PURE__ */ jsxs12("div", { className: "bg-emerald-500/10 text-emerald-700 px-2 py-0.5 w-full break-all whitespace-pre-wrap", children: [
-          /* @__PURE__ */ jsx20("span", { className: "select-none opacity-40 mr-2 w-3 inline-block shrink-0", children: "+" }),
-          /* @__PURE__ */ jsx20("span", { children: line.slice(1) })
+        return /* @__PURE__ */ jsxs13("div", { className: "bg-emerald-500/10 text-emerald-700 px-2 py-0.5 w-full break-all whitespace-pre-wrap", children: [
+          /* @__PURE__ */ jsx21("span", { className: "select-none opacity-40 mr-2 w-3 inline-block shrink-0", children: "+" }),
+          /* @__PURE__ */ jsx21("span", { children: line.slice(1) })
         ] }, idx);
       }
       if (line.startsWith("-") && !line.startsWith("---")) {
-        return /* @__PURE__ */ jsxs12("div", { className: "bg-rose-500/10 text-rose-700 px-2 py-0.5 w-full break-all whitespace-pre-wrap", children: [
-          /* @__PURE__ */ jsx20("span", { className: "select-none opacity-40 mr-2 w-3 inline-block shrink-0", children: "-" }),
-          /* @__PURE__ */ jsx20("span", { className: "line-through decoration-rose-400/50", children: line.slice(1) })
+        return /* @__PURE__ */ jsxs13("div", { className: "bg-rose-500/10 text-rose-700 px-2 py-0.5 w-full break-all whitespace-pre-wrap", children: [
+          /* @__PURE__ */ jsx21("span", { className: "select-none opacity-40 mr-2 w-3 inline-block shrink-0", children: "-" }),
+          /* @__PURE__ */ jsx21("span", { className: "line-through decoration-rose-400/50", children: line.slice(1) })
         ] }, 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);
+    return /* @__PURE__ */ jsx21("div", { className: "py-0.5 text-amber-950/80 w-full break-all whitespace-pre-wrap", children: /* @__PURE__ */ jsx21("span", { children: line }) }, idx);
   };
   const lines = output.split("\n");
   const maxLines = 15;
   const isLong = lines.length > maxLines;
   const displayLines = !expanded && isLong ? lines.slice(0, maxLines) : lines;
-  return /* @__PURE__ */ jsxs12(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs13(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx21(
       ToolCardHeader,
       {
         card,
@@ -2773,7 +2936,7 @@ function FileOperationView({ card }) {
         onToggle
       }
     ),
-    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) }) })
+    expanded && output && /* @__PURE__ */ jsx21(ToolCardContent, { children: /* @__PURE__ */ jsx21("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 }) {
@@ -2793,8 +2956,8 @@ function SearchSnippetView({ card }) {
     setExpanded(!expanded);
     setHasUserToggled(true);
   };
-  return /* @__PURE__ */ jsxs12(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs13(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx21(
       ToolCardHeader,
       {
         card,
@@ -2804,7 +2967,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 leading-relaxed", children: output }) })
+    expanded && output && /* @__PURE__ */ jsx21(ToolCardContent, { children: /* @__PURE__ */ jsx21("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 }) {
@@ -2825,8 +2988,8 @@ function GenericToolCard({ card }) {
     setExpanded(!expanded);
     setHasUserToggled(true);
   };
-  return /* @__PURE__ */ jsxs12(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs13(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx21(
       ToolCardHeader,
       {
         card,
@@ -2836,12 +2999,12 @@ function GenericToolCard({ card }) {
         onToggle
       }
     ),
-    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 }) })
+    expanded && output && /* @__PURE__ */ jsx21(ToolCardContent, { children: /* @__PURE__ */ jsx21("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 }) })
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/chat-tool-card.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function isTerminalTool(name) {
   const lowered = name.toLowerCase();
   return lowered === "exec" || lowered === "execute_command" || lowered === "bash" || lowered === "shell" || lowered.includes("run_");
@@ -2856,47 +3019,48 @@ function isSearchTool(name) {
 }
 function ChatToolCard({ card }) {
   if (isTerminalTool(card.toolName)) {
-    return /* @__PURE__ */ jsx21(TerminalExecutionView, { card });
+    return /* @__PURE__ */ jsx22(TerminalExecutionView, { card });
   }
   if (isFileEditTool(card.toolName)) {
-    return /* @__PURE__ */ jsx21(FileOperationView, { card });
+    return /* @__PURE__ */ jsx22(FileOperationView, { card });
   }
   if (isSearchTool(card.toolName)) {
-    return /* @__PURE__ */ jsx21(SearchSnippetView, { card });
+    return /* @__PURE__ */ jsx22(SearchSnippetView, { card });
   }
-  return /* @__PURE__ */ jsx21(GenericToolCard, { card });
+  return /* @__PURE__ */ jsx22(GenericToolCard, { card });
 }
 
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function ChatUnknownPart(props) {
-  return /* @__PURE__ */ jsxs13("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "font-semibold text-gray-700", children: [
+  return /* @__PURE__ */ jsxs14("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "font-semibold text-gray-700", children: [
       props.label,
       ": ",
       props.rawType
     ] }),
-    props.text ? /* @__PURE__ */ jsx22("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
+    props.text ? /* @__PURE__ */ jsx23("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 jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ChatMessage = memo(function ChatMessage2(props) {
   const { message, texts } = props;
   const { role } = message;
   const isUser = role === "user";
   const isMessageInProgress = message.status === "pending" || message.status === "streaming";
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: cn(
         "inline-block w-fit max-w-full rounded-2xl border px-4 shadow-sm",
         isUser ? "border-primary bg-primary py-3 text-white" : role === "assistant" ? "border-gray-200 bg-white pb-3 pt-4 text-gray-900" : "border-orange-200/80 bg-orange-50/70 py-3 text-gray-900"
       ),
-      children: /* @__PURE__ */ jsx23("div", { className: "space-y-2", children: message.parts.map((part, index) => {
-        if (part.type === "markdown") {
-          return /* @__PURE__ */ jsx23(
+      children: /* @__PURE__ */ jsx24("div", { className: "space-y-2", children: message.parts.map((part, index) => {
+        const { type } = part;
+        if (type === "markdown") {
+          return /* @__PURE__ */ jsx24(
             ChatMessageMarkdown,
             {
               text: part.text,
@@ -2906,8 +3070,19 @@ var ChatMessage = memo(function ChatMessage2(props) {
             `markdown-${index}`
           );
         }
-        if (part.type === "reasoning") {
-          return /* @__PURE__ */ jsx23(
+        if (type === "inline-content") {
+          return /* @__PURE__ */ jsx24(
+            ChatMessageInlineContent,
+            {
+              segments: part.segments,
+              role,
+              texts
+            },
+            `inline-content-${index}`
+          );
+        }
+        if (type === "reasoning") {
+          return /* @__PURE__ */ jsx24(
             ChatReasoningBlock,
             {
               label: part.label,
@@ -2918,11 +3093,11 @@ var ChatMessage = memo(function ChatMessage2(props) {
             `reasoning-${index}`
           );
         }
-        if (part.type === "tool-card") {
-          return /* @__PURE__ */ jsx23("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx23(ChatToolCard, { card: part.card }) }, `tool-${index}`);
+        if (type === "tool-card") {
+          return /* @__PURE__ */ jsx24("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx24(ChatToolCard, { card: part.card }) }, `tool-${index}`);
         }
-        if (part.type === "file") {
-          return /* @__PURE__ */ jsx23(
+        if (type === "file") {
+          return /* @__PURE__ */ jsx24(
             ChatMessageFile,
             {
               file: part.file,
@@ -2931,8 +3106,8 @@ var ChatMessage = memo(function ChatMessage2(props) {
             `file-${index}`
           );
         }
-        if (part.type === "unknown") {
-          return /* @__PURE__ */ jsx23(
+        if (type === "unknown") {
+          return /* @__PURE__ */ jsx24(
             ChatUnknownPart,
             {
               label: part.label,
@@ -2949,9 +3124,9 @@ var ChatMessage = memo(function ChatMessage2(props) {
 });
 
 // src/components/chat/ui/chat-message-list/chat-message-meta.tsx
-import { jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsxs as jsxs15 } from "react/jsx-runtime";
 function ChatMessageMeta(props) {
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cn(
@@ -2970,7 +3145,7 @@ function ChatMessageMeta(props) {
 // src/components/chat/ui/chat-message-list/chat-message-action-copy.tsx
 import { useMemo as useMemo6 } from "react";
 import { Check as Check5, Copy as Copy2 } from "lucide-react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function ChatMessageActionCopy({
   message,
   texts
@@ -2984,7 +3159,7 @@ function ChatMessageActionCopy({
   }, [message.parts]);
   const { copied, copy } = useCopyFeedback({ text: messageText });
   if (!messageText) return null;
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "button",
     {
       type: "button",
@@ -2992,13 +3167,13 @@ function ChatMessageActionCopy({
       className: "text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-md hover:bg-gray-100 flex items-center justify-center",
       "aria-label": copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
       title: copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
-      children: copied ? /* @__PURE__ */ jsx24(Check5, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx24(Copy2, { className: "h-3.5 w-3.5" })
+      children: copied ? /* @__PURE__ */ jsx25(Check5, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx25(Copy2, { className: "h-3.5 w-3.5" })
     }
   );
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-list.tsx
-import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx26, jsxs as jsxs16 } from "react/jsx-runtime";
 var INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
 function hasRenderableText(value) {
   const trimmed = value.trim();
@@ -3016,10 +3191,10 @@ function hasRenderableMessageContent(message) {
   });
 }
 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]" })
+  return /* @__PURE__ */ jsx26("div", { className: "flex items-center gap-2 px-1 py-0.5 text-[11px] text-gray-400", children: /* @__PURE__ */ jsxs16("div", { className: "flex space-x-1 items-center h-full", children: [
+    /* @__PURE__ */ jsx26("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" }),
+    /* @__PURE__ */ jsx26("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:200ms]" }),
+    /* @__PURE__ */ jsx26("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:400ms]" })
   ] }) });
 }
 function ChatMessageList(props) {
@@ -3027,25 +3202,25 @@ function ChatMessageList(props) {
   const hasRenderableAssistantDraft = visibleMessages.some(
     (message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending")
   );
-  return /* @__PURE__ */ jsxs15("div", { className: cn("space-y-5", props.className), children: [
+  return /* @__PURE__ */ jsxs16("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__ */ 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__ */ 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
+      return /* @__PURE__ */ jsxs16("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
+        !isUser ? /* @__PURE__ */ jsx26(ChatMessageAvatar, { role: message.role }) : null,
+        /* @__PURE__ */ jsxs16("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
+          /* @__PURE__ */ jsx26(ChatMessage, { message, texts: props.texts }),
+          /* @__PURE__ */ jsx26("div", { className: cn("flex items-center gap-2", isUser && "justify-end"), children: isGenerating ? /* @__PURE__ */ jsx26(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs16(Fragment5, { children: [
+            /* @__PURE__ */ jsx26(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser }),
+            !isUser ? /* @__PURE__ */ jsx26(ChatMessageActionCopy, { message, texts: props.texts }) : null
           ] }) })
         ] }),
-        isUser ? /* @__PURE__ */ jsx25(ChatMessageAvatar, { role: message.role }) : null
+        isUser ? /* @__PURE__ */ jsx26(ChatMessageAvatar, { role: message.role }) : null
       ] }, message.id);
     }),
-    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs15("div", { className: "flex justify-start gap-3", children: [
-      /* @__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 })
+    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs16("div", { className: "flex justify-start gap-3", children: [
+      /* @__PURE__ */ jsx26(ChatMessageAvatar, { role: "assistant" }),
+      /* @__PURE__ */ jsx26("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.16",
+  "version": "0.2.18",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",