@nextclaw/ui 0.10.4 → 0.11.0

package/dist/assets/{tabs-custom-xrIDQNF2.js → tabs-custom-DKSbDSB9.js}

@@ -1 +1 @@
-import{j as e}from"./vendor-CNhxtHCf.js";import{as as m,c as s}from"./index-B3caHNCU.js";function c({tabs:a,activeTab:i,onChange:o,className:n}){return e.jsx("div",{className:s("flex items-center gap-6 border-b border-gray-200/60 mb-6",n),children:a.map(t=>{const r=i===t.id;return e.jsxs("button",{onClick:()=>o(t.id),className:s("relative pb-3 text-[14px] font-medium transition-all duration-fast flex items-center gap-1.5",r?"text-gray-900":"text-gray-600 hover:text-gray-900"),children:[t.label,t.count!==void 0&&e.jsx("span",{className:s("text-[11px] font-medium","text-gray-500"),children:m(t.count)}),r&&e.jsx("div",{className:"absolute bottom-0 left-0 right-0 h-[2px] bg-primary rounded-full"})]},t.id)})})}export{c as T};
+import{j as e}from"./vendor-CNhxtHCf.js";import{as as m,c as s}from"./index-j6A_-1b6.js";function c({tabs:a,activeTab:i,onChange:o,className:n}){return e.jsx("div",{className:s("flex items-center gap-6 border-b border-gray-200/60 mb-6",n),children:a.map(t=>{const r=i===t.id;return e.jsxs("button",{onClick:()=>o(t.id),className:s("relative pb-3 text-[14px] font-medium transition-all duration-fast flex items-center gap-1.5",r?"text-gray-900":"text-gray-600 hover:text-gray-900"),children:[t.label,t.count!==void 0&&e.jsx("span",{className:s("text-[11px] font-medium","text-gray-500"),children:m(t.count)}),r&&e.jsx("div",{className:"absolute bottom-0 left-0 right-0 h-[2px] bg-primary rounded-full"})]},t.id)})})}export{c as T};

package/dist/assets/{useConfirmDialog-DCZbJzHW.js → useConfirmDialog-ByJ8A8n7.js}

@@ -1 +1 @@
-import{j as a,r as t}from"./vendor-CNhxtHCf.js";import{am as p,an as C,ao as h,ap as x,aq as g,ar as D,B as d,t as i}from"./index-B3caHNCU.js";const j=({open:l,onOpenChange:r,title:c,description:o,confirmLabel:s=i("confirm"),cancelLabel:e=i("cancel"),variant:n="default",onConfirm:u,onCancel:f})=>{const m=()=>{u(),r(!1)},v=()=>{f(),r(!1)};return a.jsx(p,{open:l,onOpenChange:r,children:a.jsxs(C,{className:"[&>:last-child]:hidden",onCloseAutoFocus:b=>b.preventDefault(),children:[a.jsxs(h,{children:[a.jsx(x,{children:c}),o?a.jsx(g,{children:o}):null]}),a.jsxs(D,{className:"gap-2 sm:gap-0",children:[a.jsx(d,{type:"button",variant:"outline",onClick:v,children:e}),a.jsx(d,{type:"button",variant:n==="destructive"?"destructive":"default",onClick:m,children:s})]})]})})},L={open:!1,title:"",description:"",confirmLabel:i("confirm"),cancelLabel:i("cancel"),variant:"default",resolve:null};function y(){const[l,r]=t.useState(L),c=t.useCallback(e=>new Promise(n=>{r({open:!0,title:e.title,description:e.description??"",confirmLabel:e.confirmLabel??i("confirm"),cancelLabel:e.cancelLabel??i("cancel"),variant:e.variant??"default",resolve:u=>{n(u),r(f=>({...f,open:!1,resolve:null}))}})}),[]),o=t.useCallback(e=>{r(n=>(!e&&n.resolve&&n.resolve(!1),{...n,open:e,resolve:e?n.resolve:null}))},[]),s=t.useCallback(()=>a.jsx(j,{open:l.open,onOpenChange:o,title:l.title,description:l.description||void 0,confirmLabel:l.confirmLabel,cancelLabel:l.cancelLabel,variant:l.variant,onConfirm:()=>{var e;return(e=l.resolve)==null?void 0:e.call(l,!0)},onCancel:()=>{var e;return(e=l.resolve)==null?void 0:e.call(l,!1)}}),[l,o]);return{confirm:c,ConfirmDialog:s}}export{y as u};
+import{j as a,r as t}from"./vendor-CNhxtHCf.js";import{am as p,an as C,ao as h,ap as x,aq as g,ar as D,B as d,t as i}from"./index-j6A_-1b6.js";const j=({open:l,onOpenChange:r,title:c,description:o,confirmLabel:s=i("confirm"),cancelLabel:e=i("cancel"),variant:n="default",onConfirm:u,onCancel:f})=>{const m=()=>{u(),r(!1)},v=()=>{f(),r(!1)};return a.jsx(p,{open:l,onOpenChange:r,children:a.jsxs(C,{className:"[&>:last-child]:hidden",onCloseAutoFocus:b=>b.preventDefault(),children:[a.jsxs(h,{children:[a.jsx(x,{children:c}),o?a.jsx(g,{children:o}):null]}),a.jsxs(D,{className:"gap-2 sm:gap-0",children:[a.jsx(d,{type:"button",variant:"outline",onClick:v,children:e}),a.jsx(d,{type:"button",variant:n==="destructive"?"destructive":"default",onClick:m,children:s})]})]})})},L={open:!1,title:"",description:"",confirmLabel:i("confirm"),cancelLabel:i("cancel"),variant:"default",resolve:null};function y(){const[l,r]=t.useState(L),c=t.useCallback(e=>new Promise(n=>{r({open:!0,title:e.title,description:e.description??"",confirmLabel:e.confirmLabel??i("confirm"),cancelLabel:e.cancelLabel??i("cancel"),variant:e.variant??"default",resolve:u=>{n(u),r(f=>({...f,open:!1,resolve:null}))}})}),[]),o=t.useCallback(e=>{r(n=>(!e&&n.resolve&&n.resolve(!1),{...n,open:e,resolve:e?n.resolve:null}))},[]),s=t.useCallback(()=>a.jsx(j,{open:l.open,onOpenChange:o,title:l.title,description:l.description||void 0,confirmLabel:l.confirmLabel,cancelLabel:l.cancelLabel,variant:l.variant,onConfirm:()=>{var e;return(e=l.resolve)==null?void 0:e.call(l,!0)},onCancel:()=>{var e;return(e=l.resolve)==null?void 0:e.call(l,!1)}}),[l,o]);return{confirm:c,ConfirmDialog:s}}export{y as u};

package/dist/index.html

@@ -6,7 +6,7 @@
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/index-B3caHNCU.js"></script>
+  <script type="module" crossorigin src="/assets/index-j6A_-1b6.js"></script>
   <link rel="modulepreload" crossorigin href="/assets/vendor-CNhxtHCf.js">
   <link rel="stylesheet" crossorigin href="/assets/index-kaPUhd-8.css">
 </head>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.10.4",
+  "version": "0.11.0",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,11 +28,11 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/ncp-react": "0.3.5",
-    "@nextclaw/ncp": "0.3.2",
-    "@nextclaw/ncp-http-agent-client": "0.3.2",
-    "@nextclaw/agent-chat-ui": "0.2.4",
-    "@nextclaw/agent-chat": "0.1.2"
+    "@nextclaw/ncp": "0.4.0",
+    "@nextclaw/ncp-react": "0.4.0",
+    "@nextclaw/ncp-http-agent-client": "0.3.4",
+    "@nextclaw/agent-chat-ui": "0.2.5",
+    "@nextclaw/agent-chat": "0.1.3"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/api/ncp-attachments.ts

@@ -0,0 +1,41 @@
+import type { NcpDraftAttachment } from "@nextclaw/ncp-react";
+import { API_BASE } from "./api-base";
+import type { ApiResponse, NcpAssetPutView } from "./types";
+
+function readErrorMessage(payload: unknown, fallback: string): string {
+  if (!payload || typeof payload !== "object" || Array.isArray(payload)) {
+    return fallback;
+  }
+  const error = (payload as { error?: unknown }).error;
+  if (!error || typeof error !== "object" || Array.isArray(error)) {
+    return fallback;
+  }
+  const message = (error as { message?: unknown }).message;
+  return typeof message === "string" && message.trim().length > 0 ? message : fallback;
+}
+
+export async function uploadNcpAssets(files: File[]): Promise<NcpDraftAttachment[]> {
+  const formData = new FormData();
+  for (const file of files) {
+    formData.append("files", file);
+  }
+
+  const response = await fetch(`${API_BASE}/api/ncp/assets`, {
+    method: "POST",
+    body: formData,
+    credentials: "include",
+  });
+  const payload = (await response.json()) as ApiResponse<NcpAssetPutView>;
+  if (!response.ok || !payload.ok) {
+    throw new Error(readErrorMessage(payload, "Failed to put assets."));
+  }
+
+  return payload.data.assets.map((asset) => ({
+    id: asset.id,
+    name: asset.name,
+    mimeType: asset.mimeType,
+    sizeBytes: asset.sizeBytes,
+    assetUri: asset.assetUri,
+    url: asset.url,
+  }));
+}

package/src/api/types.ts

@@ -259,6 +259,19 @@ export type NcpSessionMessagesView = {
   total: number;
 };
 
+export type NcpAssetView = {
+  id: string;
+  name: string;
+  mimeType: string;
+  sizeBytes: number;
+  assetUri: string;
+  url: string;
+};
+
+export type NcpAssetPutView = {
+  assets: NcpAssetView[];
+};
+
 export type NcpSessionStatusView = NcpSessionStatus;
 
 export type SessionPatchUpdate = {

package/src/components/chat/adapters/chat-message.adapter.test.ts

@@ -164,3 +164,69 @@ it("maps file parts into previewable attachment view models", () => {
     },
   });
 });
+
+it("keeps named non-image files as downloadable attachments", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-doc",
+      role: "assistant",
+      parts: [
+        {
+          type: "file",
+          name: "spec.pdf",
+          mimeType: "application/pdf",
+          data: "cGRm",
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toEqual({
+    type: "file",
+    file: {
+      label: "spec.pdf",
+      mimeType: "application/pdf",
+      dataUrl: "data:application/pdf;base64,cGRm",
+      isImage: false,
+    },
+  });
+});
+
+it("renders asset tool results as previewable files", () => {
+  const adapted = adapt([
+    {
+      id: "assistant-asset",
+      role: "assistant",
+      parts: [
+        {
+          type: "tool-invocation",
+          toolInvocation: {
+            status: ToolInvocationStatus.RESULT,
+            toolCallId: "call-asset-1",
+            toolName: "asset_put",
+            args: { path: "/tmp/output.png" },
+            result: {
+              ok: true,
+              asset: {
+                uri: "asset://store/2026/03/27/asset_1",
+                name: "output.png",
+                mimeType: "image/png",
+                url: "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2F2026%2F03%2F27%2Fasset_1",
+              },
+            },
+          },
+        },
+      ],
+    },
+  ] as unknown as ChatMessageSource[]);
+
+  expect(adapted[0]?.parts[0]).toEqual({
+    type: "file",
+    file: {
+      label: "output.png",
+      mimeType: "image/png",
+      dataUrl: "/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2F2026%2F03%2F27%2Fasset_1",
+      isImage: true,
+    },
+  });
+});

package/src/components/chat/adapters/chat-message.adapter.ts

@@ -18,6 +18,7 @@ export type ChatMessagePartSource =
       type: 'file';
       mimeType: string;
       data: string;
+      url?: string;
       name?: string;
     }
   | {
@@ -75,6 +76,58 @@ function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null;
 }
 
+function readOptionalString(value: unknown): string | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+function extractAssetFileView(
+  value: unknown,
+  texts: ChatMessageAdapterTexts
+):
+  | {
+      type: 'file';
+      file: {
+        label: string;
+        mimeType: string;
+        dataUrl: string;
+        isImage: boolean;
+      };
+    }
+  | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+  const assetCandidate = isRecord(value.asset)
+    ? value.asset
+    : Array.isArray(value.assets) && value.assets.length > 0 && isRecord(value.assets[0])
+      ? value.assets[0]
+      : null;
+  if (!assetCandidate) {
+    return null;
+  }
+  const url = readOptionalString(assetCandidate.url);
+  const mimeType = readOptionalString(assetCandidate.mimeType) ?? 'application/octet-stream';
+  if (!url) {
+    return null;
+  }
+  const label =
+    readOptionalString(assetCandidate.name) ??
+    (mimeType.startsWith('image/') ? texts.imageAttachmentLabel : texts.fileAttachmentLabel);
+  return {
+    type: 'file',
+    file: {
+      label,
+      mimeType,
+      dataUrl: url,
+      isImage: mimeType.startsWith('image/')
+    }
+  };
+}
+
 function isTextPart(part: ChatMessagePartSource): part is Extract<ChatMessagePartSource, { type: 'text' }> {
   return part.type === 'text' && typeof part.text === 'string';
 }
@@ -212,13 +265,20 @@ export function adaptChatMessages(params: {
                     ? params.texts.imageAttachmentLabel
                     : params.texts.fileAttachmentLabel,
               mimeType: part.mimeType,
-              dataUrl: `data:${part.mimeType};base64,${part.data}`,
+              dataUrl:
+                typeof part.url === 'string' && part.url.trim().length > 0
+                  ? part.url.trim()
+                  : `data:${part.mimeType};base64,${part.data}`,
               isImage
             }
           };
         }
         if (isToolInvocationPart(part)) {
           const invocation = part.toolInvocation;
+          const assetFileView = extractAssetFileView(invocation.result, params.texts);
+          if (assetFileView) {
+            return assetFileView;
+          }
           const detail = summarizeToolArgs(invocation.parsedArgs ?? invocation.args);
           const rawResult =
             typeof invocation.error === 'string' && invocation.error.trim()

package/src/components/chat/chat-composer-state.test.ts

@@ -71,4 +71,37 @@ describe('deriveNcpMessagePartsFromComposer', () => {
       }
     ]);
   });
+
+  it('preserves uploaded attachment references when the attachment has a server uri', () => {
+    const parts = deriveNcpMessagePartsFromComposer(
+      [
+        createChatComposerTokenNode({
+          tokenKind: 'file',
+          tokenKey: 'config',
+          label: 'config.json'
+        })
+      ],
+      [
+        {
+          id: 'config',
+          name: 'config.json',
+          mimeType: 'application/json',
+          sizeBytes: 18,
+          assetUri: 'asset://store/2026/03/26/asset_123',
+          url: '/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2F2026%2F03%2F26%2Fasset_123'
+        }
+      ]
+    );
+
+    expect(parts).toEqual([
+      {
+        type: 'file',
+        name: 'config.json',
+        mimeType: 'application/json',
+        assetUri: 'asset://store/2026/03/26/asset_123',
+        url: '/api/ncp/assets/content?uri=asset%3A%2F%2Fstore%2F2026%2F03%2F26%2Fasset_123',
+        sizeBytes: 18
+      }
+    ]);
+  });
 });

package/src/components/chat/chat-composer-state.ts

@@ -108,7 +108,9 @@ export function deriveNcpMessagePartsFromComposer(
       type: 'file',
       name: attachment.name,
       mimeType: attachment.mimeType,
-      contentBase64: attachment.contentBase64,
+      ...(attachment.assetUri ? { assetUri: attachment.assetUri } : {}),
+      ...(attachment.url ? { url: attachment.url } : {}),
+      ...(attachment.contentBase64 ? { contentBase64: attachment.contentBase64 } : {}),
       sizeBytes: attachment.sizeBytes
     });
   }

package/src/components/chat/containers/chat-input-bar.container.tsx

@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { ChatInputBar, type ChatInputBarHandle } from '@nextclaw/agent-chat-ui';
 import {
-  DEFAULT_NCP_IMAGE_ATTACHMENT_ACCEPT,
-  DEFAULT_NCP_IMAGE_ATTACHMENT_MAX_BYTES,
-  readFilesAsNcpDraftAttachments
+  DEFAULT_NCP_ATTACHMENT_MAX_BYTES,
+  uploadFilesAsNcpDraftAttachments
 } from '@nextclaw/ncp-react';
+import { uploadNcpAssets } from '@/api/ncp-attachments';
 import {
   buildChatSlashItems,
   buildModelStateHint,
@@ -133,23 +133,25 @@ export function ChatInputBarContainer() {
 
   const showAttachmentError = useCallback((reason: 'unsupported-type' | 'too-large' | 'read-failed') => {
     if (reason === 'unsupported-type') {
-      toast.error(t('chatInputImageUnsupported'));
+      toast.error(t('chatInputAttachmentUnsupported'));
       return;
     }
     if (reason === 'too-large') {
       toast.error(
-        t('chatInputImageTooLarge').replace('{maxMb}', String(DEFAULT_NCP_IMAGE_ATTACHMENT_MAX_BYTES / (1024 * 1024)))
+        t('chatInputAttachmentTooLarge').replace('{maxMb}', String(DEFAULT_NCP_ATTACHMENT_MAX_BYTES / (1024 * 1024)))
       );
       return;
     }
-    toast.error(t('chatInputImageReadFailed'));
+    toast.error(t('chatInputAttachmentReadFailed'));
   }, []);
 
   const handleFilesAdd = useCallback(async (files: File[]) => {
     if (!attachmentSupported || files.length === 0) {
       return;
     }
-    const result = await readFilesAsNcpDraftAttachments(files);
+    const result = await uploadFilesAsNcpDraftAttachments(files, {
+      uploadBatch: uploadNcpAssets,
+    });
     if (result.attachments.length > 0) {
       const insertedAttachments = presenter.chatInputManager.addAttachments?.(result.attachments) ?? [];
       if (insertedAttachments.length > 0) {
@@ -275,7 +277,6 @@ export function ChatInputBarContainer() {
         <input
           ref={fileInputRef}
           type="file"
-          accept={DEFAULT_NCP_IMAGE_ATTACHMENT_ACCEPT}
           multiple
           className="hidden"
           onChange={async (event) => {

package/src/components/chat/ncp/ncp-chat-input.manager.ts

@@ -27,10 +27,12 @@ export class NcpChatInputManager {
 
   private buildAttachmentSignature = (attachment: NcpDraftAttachment): string =>
     [
+      attachment.assetUri ?? '',
+      attachment.url ?? '',
       attachment.name,
       attachment.mimeType,
       String(attachment.sizeBytes),
-      attachment.contentBase64,
+      attachment.contentBase64 ?? '',
     ].join(':');
 
   constructor(

package/src/components/chat/ncp/ncp-session-adapter.test.ts

@@ -69,8 +69,10 @@ describe('adaptNcpMessageToUiMessage', () => {
       },
       {
         type: 'file',
+        name: 'sample.png',
         mimeType: 'image/png',
-        data: 'ZmFrZS1pbWFnZQ=='
+        data: 'ZmFrZS1pbWFnZQ==',
+        sizeBytes: 10
       },
       {
         type: 'text',

package/src/components/chat/ncp/ncp-session-adapter.ts

@@ -121,8 +121,22 @@ function toUiParts(parts: NcpMessagePart[]): UIMessage['parts'] {
     if (part.type === 'file' && part.contentBase64) {
       uiParts.push({
         type: 'file',
+        ...(part.name ? { name: part.name } : {}),
         mimeType: part.mimeType ?? 'application/octet-stream',
-        data: part.contentBase64
+        data: part.contentBase64,
+        ...(part.url ? { url: part.url } : {}),
+        ...(typeof part.sizeBytes === 'number' ? { sizeBytes: part.sizeBytes } : {})
+      });
+      continue;
+    }
+    if (part.type === 'file' && part.url) {
+      uiParts.push({
+        type: 'file',
+        ...(part.name ? { name: part.name } : {}),
+        mimeType: part.mimeType ?? 'application/octet-stream',
+        data: '',
+        url: part.url,
+        ...(typeof part.sizeBytes === 'number' ? { sizeBytes: part.sizeBytes } : {})
       });
       continue;
     }

package/src/lib/i18n.chat.ts

@@ -104,14 +104,14 @@ export const CHAT_LABELS: Record<string, { zh: string; en: string }> = {
   chatSkillsPickerOfficial: { zh: '官方', en: 'Official' },
   chatSkillsPickerManage: { zh: '管理技能', en: 'Manage Skills' },
   chatInputAttach: { zh: '添加附件', en: 'Attach file' },
-  chatInputImageUnsupported: {
-    zh: '当前仅支持 PNG、JPEG、WEBP、GIF 图片。',
-    en: 'Only PNG, JPEG, WEBP, and GIF images are supported.'
+  chatInputAttachmentUnsupported: {
+    zh: '当前上传流程不支持该文件类型。',
+    en: 'This file type is not supported in the current upload flow.'
   },
-  chatInputImageTooLarge: {
-    zh: '图片不能超过 {maxMb} MB。',
-    en: 'Images must be {maxMb} MB or smaller.'
+  chatInputAttachmentTooLarge: {
+    zh: '文件不能超过 {maxMb} MB。',
+    en: 'Files must be {maxMb} MB or smaller.'
   },
-  chatInputImageReadFailed: { zh: '读取图片失败，请重试。', en: 'Failed to read the image. Please try again.' },
+  chatInputAttachmentReadFailed: { zh: '读取文件失败，请重试。', en: 'Failed to read the file. Please try again.' },
   chatInputAttachComingSoon: { zh: '即将支持', en: 'Coming soon' }
 };