@nextclaw/agent-chat-ui 0.2.4 → 0.2.5

package/dist/index.js

@@ -1255,30 +1255,9 @@ var ChatComposerSurfaceRenderer = class {
       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.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);
-      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) => {
@@ -1286,19 +1265,17 @@ var ChatComposerSurfaceRenderer = class {
         return [
           "mx-[2px]",
           "inline-flex",
-          "h-8",
-          "max-w-[min(100%,19rem)]",
+          "h-7",
+          "max-w-[min(100%,17rem)]",
           "items-center",
-          "gap-2",
-          "rounded-xl",
+          "gap-1.5",
+          "rounded-lg",
           "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"
+          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 [
@@ -1320,7 +1297,7 @@ var ChatComposerSurfaceRenderer = class {
     };
     this.createTokenIcon = (tokenKind) => {
       const wrapper = document.createElement("span");
-      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.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;
     };
@@ -1339,10 +1316,6 @@ var ChatComposerSurfaceRenderer = class {
         { 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");
@@ -1709,8 +1682,21 @@ var ChatComposerRuntime = class {
       if (!this.rootElement) {
         return;
       }
+      const targetSelection = this.selection;
       this.rootElement.focus();
-      this.viewController.restoreSelectionIfFocused(this.rootElement, this.selection);
+      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) {
@@ -2204,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.4",
+  "version": "0.2.5",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",