@nextclaw/agent-chat-ui 0.2.3 → 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;
@@ -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,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;
     };
@@ -1290,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");
@@ -1463,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);
     };
@@ -1510,6 +1557,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 +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
       });
@@ -1613,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;
@@ -1633,6 +1698,20 @@ 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;
+      }
+      this.rootElement.focus();
+      this.viewController.restoreSelectionIfFocused(this.rootElement, this.selection);
+    };
     this.requireConfig = () => {
       if (!this.config) {
         throw new Error("ChatComposerRuntime is not configured.");
@@ -1744,7 +1823,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 +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(
@@ -1838,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";

package/package.json

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