@nextclaw/ui 0.9.18 → 0.10.1

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-chat-input.manager.ts

@@ -1,4 +1,5 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import type { SetStateAction } from 'react';
 import type { ThinkingLevel } from '@/api/types';
 import { updateNcpSession } from '@/api/ncp-session';
@@ -7,6 +8,8 @@ import {
   createInitialChatComposerNodes,
   deriveChatComposerDraft,
   deriveSelectedSkillsFromComposer,
+  pruneComposerAttachments,
+  syncComposerAttachments,
   syncComposerSkills
 } from '@/components/chat/chat-composer-state';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
@@ -48,13 +51,47 @@ export class NcpChatInputManager {
     left.length === right.length && left.every((value, index) => value === right[index]);
 
   private syncComposerSnapshot = (nodes: ChatComposerNode[]) => {
+    const currentAttachments = useChatInputStore.getState().snapshot.attachments;
+    const attachments = pruneComposerAttachments(nodes, currentAttachments);
     useChatInputStore.getState().setSnapshot({
       composerNodes: nodes,
+      attachments,
       draft: deriveChatComposerDraft(nodes),
       selectedSkills: deriveSelectedSkillsFromComposer(nodes)
     });
   };
 
+  private syncComposerSnapshotWithAttachments = (
+    nodes: ChatComposerNode[],
+    attachments: NcpDraftAttachment[]
+  ) => {
+    useChatInputStore.getState().setSnapshot({
+      composerNodes: nodes,
+      attachments,
+      draft: deriveChatComposerDraft(nodes),
+      selectedSkills: deriveSelectedSkillsFromComposer(nodes)
+    });
+  };
+
+  private dedupeAttachments = (attachments: NcpDraftAttachment[]): NcpDraftAttachment[] => {
+    const seen = new Set<string>();
+    const output: NcpDraftAttachment[] = [];
+    for (const attachment of attachments) {
+      const signature = [
+        attachment.name,
+        attachment.mimeType,
+        String(attachment.sizeBytes),
+        attachment.contentBase64,
+      ].join(':');
+      if (seen.has(signature)) {
+        continue;
+      }
+      seen.add(signature);
+      output.push(attachment);
+    }
+    return output;
+  };
+
   syncSnapshot = (patch: Partial<ChatInputSnapshot>) => {
     if (!this.hasSnapshotChanges(patch)) {
       return;
@@ -88,6 +125,22 @@ export class NcpChatInputManager {
     this.syncComposerSnapshot(value);
   };
 
+  addAttachments = (attachments: NcpDraftAttachment[]) => {
+    if (attachments.length === 0) {
+      return;
+    }
+    const snapshot = useChatInputStore.getState().snapshot;
+    const nextAttachments = this.dedupeAttachments([...snapshot.attachments, ...attachments]);
+    const nextNodes = syncComposerAttachments(snapshot.composerNodes, nextAttachments);
+    this.syncComposerSnapshotWithAttachments(nextNodes, nextAttachments);
+  };
+
+  restoreComposerState = (nodes: ChatComposerNode[], attachments: NcpDraftAttachment[]) => {
+    const nextAttachments = this.dedupeAttachments(attachments);
+    const nextNodes = syncComposerAttachments(nodes, nextAttachments);
+    this.syncComposerSnapshotWithAttachments(nextNodes, nextAttachments);
+  };
+
   setPendingSessionType = (next: SetStateAction<string>) => {
     const prev = useChatInputStore.getState().snapshot.pendingSessionType;
     const value = this.resolveUpdateValue(prev, next);
@@ -101,7 +154,8 @@ export class NcpChatInputManager {
     const inputSnapshot = useChatInputStore.getState().snapshot;
     const sessionSnapshot = useChatSessionListStore.getState().snapshot;
     const message = inputSnapshot.draft.trim();
-    if (!message) {
+    const attachments = inputSnapshot.attachments;
+    if (!message && attachments.length === 0) {
       return;
     }
     const { selectedSkills: requestedSkills, composerNodes } = inputSnapshot;
@@ -119,6 +173,7 @@ export class NcpChatInputManager {
       thinkingLevel: inputSnapshot.selectedThinkingLevel ?? undefined,
       stopSupported: true,
       requestedSkills,
+      attachments,
       restoreDraftOnError: true,
       composerNodes
     });

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

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

package/src/components/chat/presenter/chat-presenter-context.tsx

@@ -1,4 +1,5 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import { createContext, useContext } from 'react';
 import type { ReactNode } from 'react';
 import type { SetStateAction } from 'react';
@@ -13,6 +14,11 @@ export type ChatInputManagerLike = {
   syncSnapshot: (patch: Record<string, unknown>) => void;
   setDraft: (next: SetStateAction<string>) => void;
   setComposerNodes: (next: SetStateAction<ChatComposerNode[]>) => void;
+  addAttachments?: (attachments: NcpDraftAttachment[]) => void;
+  restoreComposerState?: (
+    nodes: ChatComposerNode[],
+    attachments: NcpDraftAttachment[]
+  ) => void;
   setPendingSessionType: (next: SetStateAction<string>) => void;
   send: () => Promise<void>;
   stop: () => Promise<void>;

package/src/components/chat/stores/chat-input.store.ts

@@ -1,5 +1,6 @@
 import { create } from 'zustand';
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
 import type { MarketplaceInstalledRecord } from '@/api/types';
 import type { ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
@@ -8,6 +9,7 @@ import { createInitialChatComposerNodes } from '@/components/chat/chat-composer-
 export type ChatInputSnapshot = {
   isProviderStateResolved: boolean;
   composerNodes: ChatComposerNode[];
+  attachments: NcpDraftAttachment[];
   draft: string;
   pendingSessionType: string;
   defaultSessionType: string;
@@ -50,6 +52,7 @@ type ChatInputStore = {
 const initialSnapshot: ChatInputSnapshot = {
   isProviderStateResolved: false,
   composerNodes: createInitialChatComposerNodes(),
+  attachments: [],
   draft: '',
   pendingSessionType: 'native',
   defaultSessionType: 'native',

package/src/components/config/ChannelsList.test.tsx

@@ -1,5 +1,6 @@
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type * as ReactQueryModule from '@tanstack/react-query';
 import { ChannelsList } from '@/components/config/ChannelsList';
 
 const mocks = vi.hoisted(() => ({
@@ -58,7 +59,7 @@ vi.mock('qrcode', () => ({
 }));
 
 vi.mock('@tanstack/react-query', async () => {
-  const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
+  const actual = await vi.importActual<typeof ReactQueryModule>('@tanstack/react-query');
   return {
     ...actual,
     useQueryClient: () => ({

package/src/components/config/channel-form-fields.ts

@@ -70,7 +70,15 @@ export function buildChannelFields(): Record<string, ChannelField[]> {
       { name: 'appSecret', type: 'password', label: t('appSecret') },
       { name: 'encryptKey', type: 'password', label: t('encryptKey') },
       { name: 'verificationToken', type: 'password', label: t('verificationToken') },
-      { name: 'allowFrom', type: 'tags', label: t('allowFrom') }
+      { name: 'domain', type: 'text', label: 'Domain' },
+      { name: 'allowFrom', type: 'tags', label: t('allowFrom') },
+      { name: 'dmPolicy', type: 'select', label: t('dmPolicy'), options: DM_POLICY_OPTIONS },
+      { name: 'groupPolicy', type: 'select', label: t('groupPolicy'), options: GROUP_POLICY_OPTIONS },
+      { name: 'groupAllowFrom', type: 'tags', label: t('groupAllowFrom') },
+      { name: 'requireMention', type: 'boolean', label: t('requireMention') },
+      { name: 'mentionPatterns', type: 'tags', label: t('mentionPatterns') },
+      { name: 'groups', type: 'json', label: t('groupRulesJson') },
+      { name: 'accounts', type: 'json', label: t('accountsJson') }
     ],
     dingtalk: [
       { name: 'enabled', type: 'boolean', label: t('enabled') },

package/src/components/config/weixin-channel-auth-section.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type * as ReactQueryModule from '@tanstack/react-query';
 import { WeixinChannelAuthSection } from './weixin-channel-auth-section';
 
 const mocks = vi.hoisted(() => ({
@@ -9,7 +10,7 @@ const mocks = vi.hoisted(() => ({
 }));
 
 vi.mock('@tanstack/react-query', async () => {
-  const actual = await vi.importActual<typeof import('@tanstack/react-query')>('@tanstack/react-query');
+  const actual = await vi.importActual<typeof ReactQueryModule>('@tanstack/react-query');
   return {
     ...actual,
     useQueryClient: () => ({