@nextclaw/agent-chat-ui 0.2.7 → 0.2.8

package/dist/index.d.ts

@@ -146,11 +146,8 @@ type ChatToolPartViewModel = {
     statusTone: "running" | "success" | "error" | "cancelled";
     statusLabel: string;
     titleLabel: string;
-    inputLabel: string;
     outputLabel: string;
     emptyLabel: string;
-    callIdLabel: string;
-    callId?: string;
 };
 type ChatMessagePartViewModel = {
     type: "markdown";

package/dist/index.js

@@ -2186,39 +2186,323 @@ function ChatMessageMarkdown(props) {
   return /* @__PURE__ */ jsx14("div", { className: cn("chat-markdown", isUser ? "chat-markdown-user" : "chat-markdown-assistant"), children: /* @__PURE__ */ jsx14(ReactMarkdown, { skipHtml: true, remarkPlugins: [remarkGfm], components: markdownComponents, children: trimMarkdown(props.text) }) });
 }
 
-// src/components/chat/ui/chat-message-list/chat-message-file.tsx
+// src/components/chat/ui/chat-message-list/chat-message-file/meta.ts
+var FILE_CATEGORY_LABELS = {
+  archive: "Archive",
+  audio: "Audio",
+  code: "Code",
+  data: "Data",
+  document: "Document",
+  generic: "File",
+  image: "Image",
+  pdf: "PDF",
+  sheet: "Sheet",
+  video: "Video"
+};
+var FILE_CATEGORY_TILE_CLASSES = {
+  archive: "border-amber-200/80 bg-amber-100 text-amber-700",
+  audio: "border-fuchsia-200/80 bg-fuchsia-100 text-fuchsia-700",
+  code: "border-cyan-200/80 bg-cyan-100 text-cyan-700",
+  data: "border-slate-200/80 bg-slate-100 text-slate-700",
+  document: "border-blue-200/80 bg-blue-100 text-blue-700",
+  generic: "border-slate-200/80 bg-slate-100 text-slate-700",
+  image: "border-emerald-200/80 bg-emerald-100 text-emerald-700",
+  pdf: "border-rose-200/80 bg-rose-100 text-rose-700",
+  sheet: "border-lime-200/80 bg-lime-100 text-lime-700",
+  video: "border-violet-200/80 bg-violet-100 text-violet-700"
+};
+var CODE_EXTENSIONS = /* @__PURE__ */ new Set([
+  "c",
+  "cpp",
+  "css",
+  "go",
+  "html",
+  "java",
+  "js",
+  "jsx",
+  "md",
+  "php",
+  "py",
+  "rb",
+  "rs",
+  "sh",
+  "sql",
+  "svg",
+  "ts",
+  "tsx"
+]);
+var DATA_EXTENSIONS = /* @__PURE__ */ new Set([
+  "graphql",
+  "json",
+  "toml",
+  "xml",
+  "yaml",
+  "yml"
+]);
+var DOCUMENT_EXTENSIONS = /* @__PURE__ */ new Set([
+  "doc",
+  "docx",
+  "odt",
+  "pages",
+  "rtf",
+  "txt"
+]);
+var SHEET_EXTENSIONS = /* @__PURE__ */ new Set([
+  "csv",
+  "numbers",
+  "ods",
+  "tsv",
+  "xls",
+  "xlsx"
+]);
+var ARCHIVE_EXTENSIONS = /* @__PURE__ */ new Set([
+  "7z",
+  "bz2",
+  "gz",
+  "rar",
+  "tar",
+  "tgz",
+  "zip"
+]);
+function formatFileSize(sizeBytes) {
+  if (!Number.isFinite(sizeBytes) || sizeBytes == null || sizeBytes < 0) {
+    return null;
+  }
+  if (sizeBytes === 0) {
+    return "0 B";
+  }
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let value = sizeBytes;
+  let unitIndex = 0;
+  while (value >= 1024 && unitIndex < units.length - 1) {
+    value /= 1024;
+    unitIndex += 1;
+  }
+  const digits = value >= 10 || unitIndex === 0 ? 0 : 1;
+  return `${value.toFixed(digits).replace(/\.0$/, "")} ${units[unitIndex]}`;
+}
+function getFileExtension(label, mimeType) {
+  const match = /\.([a-z0-9]{1,12})$/i.exec(label.trim());
+  if (match?.[1]) {
+    return match[1].toUpperCase();
+  }
+  const subtype = mimeType.split("/")[1] ?? "";
+  const cleaned = subtype.split(/[+.;-]/)[0]?.trim();
+  if (!cleaned) {
+    return "FILE";
+  }
+  return cleaned.slice(0, 6).toUpperCase();
+}
+function resolveFileCategory(label, mimeType) {
+  const extension = /\.([a-z0-9]{1,12})$/i.exec(label.trim())?.[1]?.toLowerCase() ?? "";
+  const normalizedMimeType = mimeType.toLowerCase();
+  if (normalizedMimeType.startsWith("image/")) {
+    return "image";
+  }
+  if (normalizedMimeType.startsWith("audio/")) {
+    return "audio";
+  }
+  if (normalizedMimeType.startsWith("video/")) {
+    return "video";
+  }
+  if (normalizedMimeType.includes("pdf") || extension === "pdf") {
+    return "pdf";
+  }
+  if (ARCHIVE_EXTENSIONS.has(extension) || /(zip|tar|gzip|rar|compressed|archive)/.test(normalizedMimeType)) {
+    return "archive";
+  }
+  if (SHEET_EXTENSIONS.has(extension) || /(spreadsheet|sheet|excel|csv)/.test(normalizedMimeType)) {
+    return "sheet";
+  }
+  if (DATA_EXTENSIONS.has(extension) || /(json|xml|yaml|toml)/.test(normalizedMimeType)) {
+    return "data";
+  }
+  if (CODE_EXTENSIONS.has(extension) || /(javascript|typescript|jsx|tsx|css|html)/.test(normalizedMimeType)) {
+    return "code";
+  }
+  if (DOCUMENT_EXTENSIONS.has(extension) || /(msword|document|opendocument|rtf|text\/)/.test(normalizedMimeType)) {
+    return "document";
+  }
+  return "generic";
+}
+function buildChatMessageFileMeta(file) {
+  const category = resolveFileCategory(file.label, file.mimeType);
+  const sizeLabel = formatFileSize(file.sizeBytes);
+  return {
+    category,
+    extension: getFileExtension(file.label, file.mimeType),
+    sizeLabel,
+    metaBadges: [FILE_CATEGORY_LABELS[category], sizeLabel].filter(
+      (value) => Boolean(value)
+    )
+  };
+}
+
+// src/components/chat/ui/chat-message-list/chat-message-file/index.tsx
 import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
-function ChatMessageFile({ file }) {
+function renderMetaBadge(label, isUser) {
+  return /* @__PURE__ */ jsx15(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium",
+        isUser ? "border-white/12 bg-white/10 text-white/82" : "border-slate-200/80 bg-slate-950/[0.04] text-slate-600"
+      ),
+      children: label
+    },
+    label
+  );
+}
+function renderMimeType(mimeType, isUser) {
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: cn(
+        "truncate text-[11px]",
+        isUser ? "text-white/58" : "text-slate-500"
+      ),
+      children: mimeType
+    }
+  );
+}
+function renderActionPill(label, isUser, isInteractive) {
+  return /* @__PURE__ */ jsx15(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium",
+        isInteractive ? isUser ? "border-white/14 bg-white/12 text-white" : "border-slate-200/80 bg-white text-slate-700" : isUser ? "border-white/10 bg-white/6 text-white/62" : "border-slate-200/70 bg-slate-100/80 text-slate-500"
+      ),
+      children: label
+    }
+  );
+}
+function ChatMessageFile({
+  file,
+  isUser = false
+}) {
+  const { category, extension, metaBadges, sizeLabel } = buildChatMessageFileMeta(file);
+  const isInteractive = Boolean(file.dataUrl);
+  const actionLabel = isInteractive ? file.isImage ? "Open preview" : "Open file" : "Attached";
+  const tileLabel = extension.slice(0, 4);
+  const shellClasses = cn(
+    "block overflow-hidden rounded-[1.25rem] border transition duration-200",
+    isUser ? "border-white/12 bg-white/10 text-white shadow-[0_18px_40px_-28px_rgba(15,23,42,0.85)]" : "border-slate-200/80 bg-white/95 text-slate-900 shadow-[0_20px_45px_-30px_rgba(15,23,42,0.28)]",
+    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(
-      "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 })
-        ]
+        "aria-label": `Open preview: ${file.label}`,
+        className: cn(shellClasses, "group"),
+        children: /* @__PURE__ */ jsxs8("figure", { children: [
+          /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: cn(
+                "relative overflow-hidden p-2",
+                isUser ? "bg-white/[0.04]" : "bg-gradient-to-br from-slate-100 via-white to-slate-100"
+              ),
+              children: [
+                /* @__PURE__ */ jsx15(
+                  "img",
+                  {
+                    src: file.dataUrl,
+                    alt: file.label,
+                    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(
+                    "span",
+                    {
+                      className: cn(
+                        "inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-semibold tracking-[0.22em]",
+                        isUser ? "border-white/12 bg-slate-950/20 text-white" : FILE_CATEGORY_TILE_CLASSES[category]
+                      ),
+                      children: tileLabel
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs8("figcaption", { className: "flex items-start gap-3 p-4", children: [
+            /* @__PURE__ */ jsx15(
+              "div",
+              {
+                className: cn(
+                  "flex h-11 w-11 shrink-0 items-center justify-center rounded-[1rem] border text-[11px] font-semibold tracking-[0.22em]",
+                  isUser ? "border-white/12 bg-white/10 text-white" : FILE_CATEGORY_TILE_CLASSES[category]
+                ),
+                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) })
+            ] }),
+            renderActionPill(actionLabel, isUser, true)
+          ] })
+        ] })
       }
     );
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "rounded-2xl border border-black/8 bg-black/6 px-3 py-2 text-sm", children: [
-    /* @__PURE__ */ jsx15("div", { className: "font-medium", children: file.label }),
-    /* @__PURE__ */ jsx15("div", { className: "text-xs opacity-75", children: file.mimeType })
+  const content = /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-3 p-3.5", children: [
+    /* @__PURE__ */ jsx15(
+      "div",
+      {
+        className: cn(
+          "flex h-14 w-14 shrink-0 items-center justify-center rounded-[1rem] border text-xs font-semibold tracking-[0.22em]",
+          isUser ? "border-white/12 bg-white/10 text-white" : FILE_CATEGORY_TILE_CLASSES[category]
+        ),
+        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(
+            "div",
+            {
+              className: cn(
+                "mt-1 text-xs",
+                isUser ? "text-white/68" : "text-slate-500"
+              ),
+              children: [
+                FILE_CATEGORY_LABELS[category],
+                " attachment"
+              ]
+            }
+          )
+        ] }),
+        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) })
+    ] })
   ] });
+  if (!isInteractive) {
+    return /* @__PURE__ */ jsx15("div", { className: shellClasses, children: content });
+  }
+  return /* @__PURE__ */ jsx15(
+    "a",
+    {
+      href: file.dataUrl,
+      target: "_blank",
+      rel: "noreferrer",
+      "aria-label": `Open file: ${file.label}`,
+      className: cn(shellClasses, "group"),
+      children: content
+    }
+  );
 }
 
 // src/components/chat/ui/chat-message-list/chat-reasoning-block.tsx
@@ -2243,7 +2527,6 @@ function ChatReasoningBlock(props) {
 import { AlertCircle, CheckCircle2, CircleSlash, Clock3, FileSearch, Globe, Loader2, Search as Search2, SendHorizontal, Terminal, Wrench as Wrench2 } from "lucide-react";
 import { jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 var TOOL_OUTPUT_PREVIEW_MAX = 220;
-var TOOL_CALL_ID_PREVIEW_MAX = 18;
 var STATUS_STYLES = {
   running: {
     text: "text-amber-700/80"
@@ -2280,14 +2563,6 @@ function renderToolIcon(toolName) {
   }
   return /* @__PURE__ */ jsx17(Wrench2, { className: "h-3.5 w-3.5" });
 }
-function truncateMiddle(value, maxLength = TOOL_CALL_ID_PREVIEW_MAX) {
-  if (value.length <= maxLength) {
-    return value;
-  }
-  const head = Math.ceil((maxLength - 1) / 2);
-  const tail = Math.floor((maxLength - 1) / 2);
-  return `${value.slice(0, head)}\u2026${value.slice(value.length - tail)}`;
-}
 function renderStatusMeta(card) {
   const style = STATUS_STYLES[card.statusTone];
   if (card.statusTone === "running") {
@@ -2307,7 +2582,6 @@ function ChatToolCard({ card }) {
   const showDetails = output.length > TOOL_OUTPUT_PREVIEW_MAX || output.includes("\n");
   const preview = showDetails ? `${output.slice(0, TOOL_OUTPUT_PREVIEW_MAX)}...` : output;
   const showOutputSection = card.kind === "result" || card.hasResult;
-  const statusStyle = STATUS_STYLES[card.statusTone];
   return /* @__PURE__ */ jsxs10("div", { className: "rounded-xl border border-amber-200/80 bg-amber-50/60 px-3 py-2.5", children: [
     /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2 text-xs font-semibold text-amber-800", children: [
       renderToolIcon(card.toolName),
@@ -2315,15 +2589,7 @@ function ChatToolCard({ card }) {
       /* @__PURE__ */ jsx17("span", { className: "font-mono text-[11px] text-amber-900/80", children: card.toolName }),
       renderStatusMeta(card)
     ] }),
-    card.summary ? /* @__PURE__ */ jsxs10("div", { className: "mt-1", children: [
-      /* @__PURE__ */ jsx17("div", { className: "text-[10px] text-amber-700/75", children: card.inputLabel }),
-      /* @__PURE__ */ jsx17("div", { className: "break-words font-mono text-[11px] text-amber-800/90", children: card.summary })
-    ] }) : null,
-    card.callId ? /* @__PURE__ */ jsxs10("div", { className: cn("mt-1 text-[10px]", statusStyle.text), children: [
-      /* @__PURE__ */ jsx17("span", { children: card.callIdLabel }),
-      /* @__PURE__ */ jsx17("span", { children: ": " }),
-      /* @__PURE__ */ jsx17("span", { className: "font-mono", children: truncateMiddle(card.callId) })
-    ] }) : null,
+    card.summary ? /* @__PURE__ */ jsx17("div", { className: "mt-1 break-words font-mono text-[11px] text-amber-800/90", children: card.summary }) : null,
     showOutputSection ? /* @__PURE__ */ jsx17("div", { className: "mt-2", children: !output ? /* @__PURE__ */ jsx17("div", { className: "text-[11px] text-amber-700/80", children: card.emptyLabel }) : showDetails ? /* @__PURE__ */ jsxs10("details", { className: "group", children: [
       /* @__PURE__ */ jsx17("summary", { className: "cursor-pointer text-[11px] text-amber-700", children: card.outputLabel }),
       /* @__PURE__ */ jsx17("pre", { className: "mt-2 whitespace-pre-wrap break-words rounded-lg border border-amber-200 bg-amber-100/40 p-2 text-[11px] text-amber-900", children: output })
@@ -2359,19 +2625,50 @@ function ChatMessage(props) {
       ),
       children: /* @__PURE__ */ jsx19("div", { className: "space-y-2", children: message.parts.map((part, index) => {
         if (part.type === "markdown") {
-          return /* @__PURE__ */ jsx19(ChatMessageMarkdown, { text: part.text, role, texts }, `markdown-${index}`);
+          return /* @__PURE__ */ jsx19(
+            ChatMessageMarkdown,
+            {
+              text: part.text,
+              role,
+              texts
+            },
+            `markdown-${index}`
+          );
         }
         if (part.type === "reasoning") {
-          return /* @__PURE__ */ jsx19(ChatReasoningBlock, { label: part.label, text: part.text, isUser }, `reasoning-${index}`);
+          return /* @__PURE__ */ jsx19(
+            ChatReasoningBlock,
+            {
+              label: part.label,
+              text: part.text,
+              isUser
+            },
+            `reasoning-${index}`
+          );
         }
         if (part.type === "tool-card") {
           return /* @__PURE__ */ jsx19("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx19(ChatToolCard, { card: part.card }) }, `tool-${index}`);
         }
         if (part.type === "file") {
-          return /* @__PURE__ */ jsx19(ChatMessageFile, { file: part.file }, `file-${index}`);
+          return /* @__PURE__ */ jsx19(
+            ChatMessageFile,
+            {
+              file: part.file,
+              isUser
+            },
+            `file-${index}`
+          );
         }
         if (part.type === "unknown") {
-          return /* @__PURE__ */ jsx19(ChatUnknownPart, { label: part.label, rawType: part.rawType, text: part.text }, `unknown-${index}`);
+          return /* @__PURE__ */ jsx19(
+            ChatUnknownPart,
+            {
+              label: part.label,
+              rawType: part.rawType,
+              text: part.text
+            },
+            `unknown-${index}`
+          );
         }
         return null;
       }) })

package/package.json

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