@nextclaw/ui 0.10.0 → 0.10.2

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

@@ -14,6 +14,12 @@ export type ChatMessagePartSource =
       type: 'text';
       text: string;
     }
+  | {
+      type: 'file';
+      mimeType: string;
+      data: string;
+      name?: string;
+    }
   | {
       type: 'reasoning';
       reasoning: string;
@@ -58,6 +64,8 @@ export type ChatMessageAdapterTexts = {
   toolResultLabel: string;
   toolNoOutputLabel: string;
   toolOutputLabel: string;
+  imageAttachmentLabel: string;
+  fileAttachmentLabel: string;
   unknownPartLabel: string;
 };
 
@@ -77,6 +85,16 @@ function isReasoningPart(
   return part.type === 'reasoning' && typeof part.reasoning === 'string';
 }
 
+function isFilePart(
+  part: ChatMessagePartSource
+): part is Extract<ChatMessagePartSource, { type: 'file' }> {
+  return (
+    part.type === 'file' &&
+    typeof part.mimeType === 'string' &&
+    typeof part.data === 'string'
+  );
+}
+
 function isToolInvocationPart(
   part: ChatMessagePartSource
 ): part is Extract<ChatMessagePartSource, { type: 'tool-invocation' }> {
@@ -182,6 +200,23 @@ export function adaptChatMessages(params: {
             label: params.texts.reasoningLabel
           };
         }
+        if (isFilePart(part)) {
+          const isImage = part.mimeType.startsWith('image/');
+          return {
+            type: 'file' as const,
+            file: {
+              label:
+                typeof part.name === 'string' && part.name.trim()
+                  ? part.name.trim()
+                  : isImage
+                    ? params.texts.imageAttachmentLabel
+                    : params.texts.fileAttachmentLabel,
+              mimeType: part.mimeType,
+              dataUrl: `data:${part.mimeType};base64,${part.data}`,
+              isImage
+            }
+          };
+        }
         if (isToolInvocationPart(part)) {
           const invocation = part.toolInvocation;
           const detail = summarizeToolArgs(invocation.parsedArgs ?? invocation.args);

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

@@ -1,4 +1,5 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import {
   createChatComposerTokenNode,
   createChatComposerNodesFromText,
@@ -25,6 +26,10 @@ export function deriveSelectedSkillsFromComposer(nodes: ChatComposerNode[]): str
   return extractChatComposerTokenKeys(nodes, 'skill');
 }
 
+export function deriveSelectedAttachmentIdsFromComposer(nodes: ChatComposerNode[]): string[] {
+  return extractChatComposerTokenKeys(nodes, 'file');
+}
+
 export function syncComposerSkills(
   nodes: ChatComposerNode[],
   nextSkills: string[],
@@ -51,3 +56,36 @@ export function syncComposerSkills(
     ? prunedNodes
     : normalizeChatComposerNodes([...prunedNodes, ...appendedNodes]);
 }
+
+export function syncComposerAttachments(
+  nodes: ChatComposerNode[],
+  attachments: readonly NcpDraftAttachment[]
+): ChatComposerNode[] {
+  const nextAttachmentIds = new Set(attachments.map((attachment) => attachment.id));
+  const prunedNodes = removeChatComposerTokenNodes(
+    nodes,
+    (node) => node.tokenKind === 'file' && !nextAttachmentIds.has(node.tokenKey)
+  );
+  const existingAttachmentIds = extractChatComposerTokenKeys(prunedNodes, 'file');
+  const appendedNodes = attachments
+    .filter((attachment) => !existingAttachmentIds.includes(attachment.id))
+    .map((attachment) =>
+      createChatComposerTokenNode({
+        tokenKind: 'file',
+        tokenKey: attachment.id,
+        label: attachment.name
+      })
+    );
+
+  return appendedNodes.length === 0
+    ? prunedNodes
+    : normalizeChatComposerNodes([...prunedNodes, ...appendedNodes]);
+}
+
+export function pruneComposerAttachments(
+  nodes: ChatComposerNode[],
+  attachments: readonly NcpDraftAttachment[]
+): NcpDraftAttachment[] {
+  const selectedIds = new Set(deriveSelectedAttachmentIdsFromComposer(nodes));
+  return attachments.filter((attachment) => selectedIds.has(attachment.id));
+}

package/src/components/chat/chat-stream/types.ts

@@ -1,4 +1,5 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import type {
   ChatRunView,
@@ -18,6 +19,7 @@ export type SendMessageParams = {
   model?: string;
   thinkingLevel?: ThinkingLevel;
   requestedSkills?: string[];
+  attachments?: NcpDraftAttachment[];
   stopSupported?: boolean;
   stopReason?: string;
   restoreDraftOnError?: boolean;

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

@@ -1,5 +1,10 @@
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { ChatInputBar } from '@nextclaw/agent-chat-ui';
+import {
+  DEFAULT_NCP_IMAGE_ATTACHMENT_ACCEPT,
+  DEFAULT_NCP_IMAGE_ATTACHMENT_MAX_BYTES,
+  readFilesAsNcpDraftAttachments
+} from '@nextclaw/ncp-react';
 import {
   buildChatSlashItems,
   buildModelStateHint,
@@ -14,6 +19,7 @@ import { usePresenter } from '@/components/chat/presenter/chat-presenter-context
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { t } from '@/lib/i18n';
+import { toast } from 'sonner';
 
 function buildThinkingLabels(): Record<ChatThinkingLevel, string> {
   return {
@@ -70,6 +76,7 @@ export function ChatInputBarContainer() {
   const { language } = useI18n();
   const snapshot = useChatInputStore((state) => state.snapshot);
   const [slashQuery, setSlashQuery] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
 
   const officialSkillBadgeLabel = useMemo(() => {
     // Keep memo reactive to locale switches even though `t` is imported as a stable function.
@@ -102,6 +109,7 @@ export function ChatInputBarContainer() {
   const isModelOptionsEmpty = snapshot.isProviderStateResolved && !hasModelOptions;
   const inputDisabled =
     ((isModelOptionsLoading || isModelOptionsEmpty) && !snapshot.isSending) || snapshot.sessionTypeUnavailable;
+  const attachmentSupported = typeof presenter.chatInputManager.addAttachments === 'function';
   const textareaPlaceholder = isModelOptionsLoading
     ? ''
     : hasModelOptions
@@ -122,6 +130,33 @@ export function ChatInputBarContainer() {
       ? t('chatStopPreparing')
       : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
 
+  const showAttachmentError = useCallback((reason: 'unsupported-type' | 'too-large' | 'read-failed') => {
+    if (reason === 'unsupported-type') {
+      toast.error(t('chatInputImageUnsupported'));
+      return;
+    }
+    if (reason === 'too-large') {
+      toast.error(
+        t('chatInputImageTooLarge').replace('{maxMb}', String(DEFAULT_NCP_IMAGE_ATTACHMENT_MAX_BYTES / (1024 * 1024)))
+      );
+      return;
+    }
+    toast.error(t('chatInputImageReadFailed'));
+  }, []);
+
+  const handleFilesAdd = useCallback(async (files: File[]) => {
+    if (!attachmentSupported || files.length === 0) {
+      return;
+    }
+    const result = await readFilesAsNcpDraftAttachments(files);
+    if (result.attachments.length > 0) {
+      presenter.chatInputManager.addAttachments?.(result.attachments);
+    }
+    if (result.rejected.length > 0) {
+      showAttachmentError(result.rejected[0].reason);
+    }
+  }, [attachmentSupported, presenter.chatInputManager, showAttachmentError]);
+
   const toolbarSelects = [
     buildModelToolbarSelect({
       modelOptions: modelRecords,
@@ -160,60 +195,86 @@ export function ChatInputBarContainer() {
   });
 
   return (
-    <ChatInputBar
-      composer={{
-        nodes: snapshot.composerNodes,
-        placeholder: textareaPlaceholder,
-        disabled: inputDisabled,
-        onNodesChange: presenter.chatInputManager.setComposerNodes,
-        onSlashQueryChange: setSlashQuery
-      }}
-      slashMenu={{
-        isLoading: snapshot.isSkillsLoading,
-        items: slashItems,
-        texts: {
-          slashLoadingLabel: t('chatSlashLoading'),
-          slashSectionLabel: t('chatSlashSectionSkills'),
-          slashEmptyLabel: t('chatSlashNoResult'),
-          slashHintLabel: t('chatSlashHint'),
-          slashSkillHintLabel: t('chatSlashSkillHint')
-        }
-      }}
-      hint={buildModelStateHint({
-        isModelOptionsLoading,
-        isModelOptionsEmpty,
-        onGoToProviders: presenter.chatInputManager.goToProviders,
-        texts: {
-          noModelOptionsLabel: t('chatModelNoOptions'),
-          configureProviderLabel: t('chatGoConfigureProvider')
-        }
-      })}
-      toolbar={{
-        selects: toolbarSelects,
-        accessories: [
-          {
-            key: 'attach',
-            label: t('chatInputAttach'),
-            icon: 'paperclip',
-            iconOnly: true,
-            disabled: true,
-            tooltip: t('chatInputAttachComingSoon')
+    <>
+      <ChatInputBar
+        composer={{
+          nodes: snapshot.composerNodes,
+          placeholder: textareaPlaceholder,
+          disabled: inputDisabled,
+          onNodesChange: presenter.chatInputManager.setComposerNodes,
+          ...(attachmentSupported ? { onFilesAdd: handleFilesAdd } : {}),
+          onSlashQueryChange: setSlashQuery
+        }}
+        slashMenu={{
+          isLoading: snapshot.isSkillsLoading,
+          items: slashItems,
+          texts: {
+            slashLoadingLabel: t('chatSlashLoading'),
+            slashSectionLabel: t('chatSlashSectionSkills'),
+            slashEmptyLabel: t('chatSlashNoResult'),
+            slashHintLabel: t('chatSlashHint'),
+            slashSkillHintLabel: t('chatSlashSkillHint')
           }
-        ],
-        skillPicker,
-        actions: {
-          sendError: snapshot.sendError,
-          isSending: snapshot.isSending,
-          canStopGeneration: snapshot.canStopGeneration,
-          sendDisabled: snapshot.draft.trim().length === 0 || !hasModelOptions || snapshot.sessionTypeUnavailable,
-          stopDisabled: !snapshot.canStopGeneration,
-          stopHint: resolvedStopHint,
-          sendButtonLabel: t('chatSend'),
-          stopButtonLabel: t('chatStop'),
-          onSend: presenter.chatInputManager.send,
-          onStop: presenter.chatInputManager.stop
-        }
-      }}
-    />
+        }}
+        hint={buildModelStateHint({
+          isModelOptionsLoading,
+          isModelOptionsEmpty,
+          onGoToProviders: presenter.chatInputManager.goToProviders,
+          texts: {
+            noModelOptionsLabel: t('chatModelNoOptions'),
+            configureProviderLabel: t('chatGoConfigureProvider')
+          }
+        })}
+        toolbar={{
+          selects: toolbarSelects,
+          accessories: [
+            {
+              key: 'attach',
+              label: t('chatInputAttach'),
+              icon: 'paperclip',
+              iconOnly: true,
+              disabled: !attachmentSupported || inputDisabled || snapshot.isSending,
+              ...(attachmentSupported
+                ? {
+                    onClick: () => fileInputRef.current?.click()
+                  }
+                : {
+                    tooltip: t('chatInputAttachComingSoon')
+                  })
+            }
+          ],
+          skillPicker,
+          actions: {
+            sendError: snapshot.sendError,
+            isSending: snapshot.isSending,
+            canStopGeneration: snapshot.canStopGeneration,
+            sendDisabled:
+              (snapshot.draft.trim().length === 0 && snapshot.attachments.length === 0) ||
+              !hasModelOptions ||
+              snapshot.sessionTypeUnavailable,
+            stopDisabled: !snapshot.canStopGeneration,
+            stopHint: resolvedStopHint,
+            sendButtonLabel: t('chatSend'),
+            stopButtonLabel: t('chatStop'),
+            onSend: presenter.chatInputManager.send,
+            onStop: presenter.chatInputManager.stop
+          }
+        }}
+      />
+      {attachmentSupported ? (
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept={DEFAULT_NCP_IMAGE_ATTACHMENT_ACCEPT}
+          multiple
+          className="hidden"
+          onChange={async (event) => {
+            const files = Array.from(event.target.files ?? []);
+            event.currentTarget.value = '';
+            await handleFilesAdd(files);
+          }}
+        />
+      ) : null}
+    </>
   );
 }

package/src/components/chat/containers/chat-message-list.container.tsx

@@ -48,6 +48,8 @@ export function ChatMessageListContainer(props: ChatMessageListContainerProps) {
           toolResultLabel: t("chatToolResult"),
           toolNoOutputLabel: t("chatToolNoOutput"),
           toolOutputLabel: t("chatToolOutput"),
+          imageAttachmentLabel: t("chatImageAttachment"),
+          fileAttachmentLabel: t("chatFileAttachment"),
           unknownPartLabel: t("chatUnknownPart"),
         },
       }),

package/src/components/chat/managers/chat-session-list.manager.test.ts

@@ -33,7 +33,22 @@ describe('ChatSessionListManager', () => {
 
     expect(streamActionsManager.resetStreamState).toHaveBeenCalledTimes(1);
     expect(uiManager.goToChatRoot).toHaveBeenCalledTimes(1);
-    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
     expect(useChatInputStore.getState().snapshot.pendingSessionType).toBe('codex');
   });
+
+  it('delegates existing-session selection to routing without eagerly mutating the selected session state', () => {
+    const uiManager = {
+      goToSession: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+    const streamActionsManager = {
+      resetStreamState: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
+
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    manager.selectSession('session-2');
+
+    expect(uiManager.goToSession).toHaveBeenCalledWith('session-2');
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+  });
 });

package/src/components/chat/managers/chat-session-list.manager.ts

@@ -62,13 +62,11 @@ export class ChatSessionListManager {
         ? sessionType.trim()
         : defaultSessionType;
     this.streamActionsManager.resetStreamState();
-    this.setSelectedSessionKey(null);
     useChatInputStore.getState().setSnapshot({ pendingSessionType: nextSessionType });
     this.uiManager.goToChatRoot();
   };
 
   selectSession = (sessionKey: string) => {
-    this.setSelectedSessionKey(sessionKey);
     this.uiManager.goToSession(sessionKey);
   };
 

package/src/components/chat/managers/chat-thread.manager.ts

@@ -78,7 +78,6 @@ export class ChatThreadManager {
     try {
       await deleteSessionApi(selectedSessionKey);
       this.streamActionsManager.resetStreamState();
-      useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: null });
       this.uiManager.goToChatRoot({ replace: true });
       await this.actions.refetchSessions();
     } finally {

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -1,6 +1,10 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { NcpHttpAgentClientEndpoint } from '@nextclaw/ncp-http-agent-client';
-import { useHydratedNcpAgent, type NcpConversationSeed } from '@nextclaw/ncp-react';
+import {
+  buildNcpRequestEnvelope,
+  useHydratedNcpAgent,
+  type NcpConversationSeed
+} from '@nextclaw/ncp-react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { API_BASE } from '@/api/api-base';
 import { fetchNcpSessionMessages } from '@/api/ncp-session';
@@ -186,29 +190,25 @@ export function NcpChatPage({ view }: ChatPageProps) {
           sessionType: payload.sessionType,
           requestedSkills: payload.requestedSkills
         });
+        const envelope = buildNcpRequestEnvelope({
+          sessionId: payload.sessionKey,
+          text: payload.message,
+          attachments: payload.attachments,
+          metadata
+        });
+        if (!envelope) {
+          return;
+        }
         try {
           void sessionsQuery.refetch();
-          await agent.send({
-            sessionId: payload.sessionKey,
-            message: {
-              id: `user-${Date.now().toString(36)}`,
-              sessionId: payload.sessionKey,
-              role: 'user',
-              status: 'final',
-              parts: [{ type: 'text', text: payload.message }],
-              timestamp: new Date().toISOString(),
-              ...(Object.keys(metadata).length > 0 ? { metadata } : {})
-            },
-            ...(Object.keys(metadata).length > 0 ? { metadata } : {})
-          });
+          await agent.send(envelope);
           await sessionsQuery.refetch();
         } catch (error) {
           if (payload.restoreDraftOnError) {
             if (payload.composerNodes && payload.composerNodes.length > 0) {
-              presenter.chatInputManager.setComposerNodes((currentNodes) =>
-                currentNodes.length === 1 && currentNodes[0]?.type === 'text' && currentNodes[0].text.length === 0
-                  ? payload.composerNodes ?? currentNodes
-                  : currentNodes
+              presenter.chatInputManager.restoreComposerState?.(
+                payload.composerNodes,
+                payload.attachments ?? []
               );
             } else {
               presenter.chatInputManager.setDraft((currentDraft) =>

package/src/components/chat/ncp/ncp-app-client-fetch.test.ts

@@ -1,25 +1,25 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { createNcpAppClientFetch } from '@/components/chat/ncp/ncp-app-client-fetch';
 
-const mocks = vi.hoisted(() => ({
-  request: vi.fn(),
-  openStream: vi.fn()
-}));
-
-vi.mock('@/transport', () => ({
-  appClient: {
-    request: mocks.request,
-    openStream: mocks.openStream
-  }
-}));
+const fetchMock = vi.fn<typeof fetch>();
 
 describe('ncp-app-client-fetch', () => {
   beforeEach(() => {
-    mocks.request.mockReset();
-    mocks.openStream.mockReset();
+    fetchMock.mockReset();
+    vi.stubGlobal('fetch', fetchMock);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
   });
 
-  it('routes JSON requests through appClient.request', async () => {
-    mocks.request.mockResolvedValue({ stopped: true });
+  it('keeps native fetch semantics and only injects credentials', async () => {
+    fetchMock.mockResolvedValue(new Response(JSON.stringify({ ok: true }), {
+      status: 200,
+      headers: {
+        'content-type': 'application/json'
+      }
+    }));
     const fetchImpl = createNcpAppClientFetch();
 
     const response = await fetchImpl('http://127.0.0.1:55667/api/ncp/agent/abort', {
@@ -31,22 +31,40 @@ describe('ncp-app-client-fetch', () => {
       body: JSON.stringify({ sessionId: 's1' })
     });
 
-    expect(mocks.request).toHaveBeenCalledWith({
+    expect(fetchMock).toHaveBeenCalledWith('http://127.0.0.1:55667/api/ncp/agent/abort', {
       method: 'POST',
-      path: '/api/ncp/agent/abort',
-      body: { sessionId: 's1' }
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({ sessionId: 's1' }),
+      credentials: 'include'
     });
     expect(response.ok).toBe(true);
+    expect(await response.json()).toEqual({ ok: true });
   });
 
-  it('re-encodes appClient stream events as SSE frames', async () => {
-    mocks.openStream.mockImplementation(({ onEvent }) => {
-      onEvent({ name: 'ncp-event', payload: { type: 'message.chunk', payload: { text: 'hello' } } });
-      return {
-        finished: Promise.resolve(undefined),
-        cancel: vi.fn()
-      };
-    });
+  it('does not synthesize fake HTTP 500 responses for fetch failures', async () => {
+    fetchMock.mockRejectedValue(new Error('Failed to fetch'));
+    const fetchImpl = createNcpAppClientFetch();
+
+    await expect(fetchImpl('http://127.0.0.1:55667/api/ncp/agent/abort', {
+      method: 'POST',
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({ sessionId: 's1' })
+    })).rejects.toThrow('Failed to fetch');
+  });
+
+  it('preserves native SSE request headers', async () => {
+    fetchMock.mockResolvedValue(new Response('event: ncp-event\ndata: {"ok":true}\n\n', {
+      status: 200,
+      headers: {
+        'content-type': 'text/event-stream'
+      }
+    }));
     const fetchImpl = createNcpAppClientFetch();
 
     const response = await fetchImpl('http://127.0.0.1:55667/api/ncp/agent/stream?sessionId=s1', {
@@ -55,15 +73,14 @@ describe('ncp-app-client-fetch', () => {
         accept: 'text/event-stream'
       }
     });
-    const text = await response.text();
 
-    expect(mocks.openStream).toHaveBeenCalledWith({
+    expect(fetchMock).toHaveBeenCalledWith('http://127.0.0.1:55667/api/ncp/agent/stream?sessionId=s1', {
       method: 'GET',
-      path: '/api/ncp/agent/stream?sessionId=s1',
-      signal: undefined,
-      onEvent: expect.any(Function)
+      headers: {
+        accept: 'text/event-stream'
+      },
+      credentials: 'include'
     });
-    expect(text).toContain('event: ncp-event');
-    expect(text).toContain('"text":"hello"');
+    expect(await response.text()).toContain('event: ncp-event');
   });
 });