@nextclaw/agent-chat-ui 0.2.3 → 0.2.5

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;
@@ -191,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;
 
@@ -255,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";
@@ -1251,32 +1251,53 @@ 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-700" : "truncate";
+      label.textContent = node.label;
+      element.append(label);
+      return element;
+    };
+    this.buildTokenClassName = (tokenKind, isSelected) => {
+      if (tokenKind === "file") {
+        return [
+          "mx-[2px]",
+          "inline-flex",
+          "h-7",
+          "max-w-[min(100%,17rem)]",
+          "items-center",
+          "gap-1.5",
+          "rounded-lg",
+          "border",
+          "px-2",
+          "align-baseline",
+          "transition-[border-color,background-color,box-shadow,color]",
+          "duration-150",
+          isSelected ? "border-slate-300 bg-slate-100 text-slate-800 shadow-[0_0_0_2px_rgba(148,163,184,0.14)]" : "border-slate-200/80 bg-slate-50 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-4.5 w-4.5 shrink-0 items-center justify-center rounded-md bg-white text-slate-500 ring-1 ring-black/5" : "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;
     };
@@ -1290,10 +1311,9 @@ 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.createSvgIcon = (children) => {
@@ -1463,8 +1483,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);
     };
@@ -1510,6 +1530,20 @@ var ChatComposerRuntime = class {
         },
         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);
@@ -1603,7 +1637,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
       });
@@ -1613,6 +1647,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;
@@ -1633,6 +1671,33 @@ var ChatComposerRuntime = class {
     this.requestRender = () => {
       this.requireConfig().requestRender();
     };
+    this.focusComposerSoon = () => {
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(() => this.focusComposer());
+        return;
+      }
+      this.focusComposer();
+    };
+    this.focusComposer = () => {
+      if (!this.rootElement) {
+        return;
+      }
+      const targetSelection = this.selection;
+      this.rootElement.focus();
+      const restoreSelection2 = () => {
+        if (!this.rootElement) {
+          return;
+        }
+        this.selection = targetSelection;
+        this.selectedRange = targetSelection;
+        this.viewController.restoreSelectionIfFocused(this.rootElement, targetSelection);
+      };
+      if (typeof requestAnimationFrame === "function") {
+        requestAnimationFrame(restoreSelection2);
+        return;
+      }
+      restoreSelection2();
+    };
     this.requireConfig = () => {
       if (!this.config) {
         throw new Error("ChatComposerRuntime is not configured.");
@@ -1744,7 +1809,7 @@ 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);
@@ -1784,6 +1849,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(
@@ -1838,7 +1908,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";
@@ -2119,10 +2190,30 @@ function ChatMessageMarkdown(props) {
 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__ */ jsx15(
+      "img",
+      {
+        src: file.dataUrl,
+        alt: file.label,
+        className: "block max-h-80 max-w-full rounded-2xl object-contain"
+      }
+    );
+  }
+  if (file.dataUrl) {
+    return /* @__PURE__ */ jsxs8(
+      "a",
+      {
+        href: file.dataUrl,
+        download: file.label,
+        target: "_blank",
+        rel: "noreferrer",
+        className: "block rounded-2xl border border-black/8 bg-black/6 px-3 py-2 text-sm transition hover:bg-black/8",
+        children: [
+          /* @__PURE__ */ jsx15("div", { className: "font-medium", children: file.label }),
+          /* @__PURE__ */ jsx15("div", { className: "text-xs opacity-75", children: file.mimeType })
+        ]
+      }
+    );
   }
   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 }),

package/package.json

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