@nextclaw/ui 0.10.0 → 0.10.2

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

@@ -1,127 +1,9 @@
-import { API_BASE } from '@/api/api-base';
-import { appClient } from '@/transport';
-
 type FetchLike = typeof fetch;
 
 export function createNcpAppClientFetch(): FetchLike {
-  return async (input, init) => {
-    const request = toRequestSnapshot(input, init);
-    if (isSseRequest(request)) {
-      return createSseResponse(request);
-    }
-
-    try {
-      const data = await appClient.request<unknown>({
-        method: request.method,
-        path: request.path,
-        ...(request.body !== undefined ? { body: request.body } : {})
-      });
-      return new Response(JSON.stringify(data ?? {}), {
-        status: 200,
-        headers: {
-          'content-type': 'application/json'
-        }
-      });
-    } catch (error) {
-      return new Response(error instanceof Error ? error.message : String(error), {
-        status: 500,
-        headers: {
-          'content-type': 'text/plain; charset=utf-8'
-        }
-      });
-    }
-  };
-}
-
-type RequestSnapshot = {
-  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-  path: string;
-  body?: unknown;
-  signal?: AbortSignal;
-  headers: Headers;
-};
-
-function toRequestSnapshot(input: URL | string | Request, init?: RequestInit): RequestSnapshot {
-  const request = input instanceof Request ? input : null;
-  const url = new URL(
-    typeof input === 'string'
-      ? input
-      : input instanceof URL
-        ? input.toString()
-        : input.url,
-    API_BASE
-  );
-  const headers = new Headers(init?.headers ?? request?.headers);
-  const method = ((init?.method ?? request?.method ?? 'GET').toUpperCase()) as RequestSnapshot['method'];
-  return {
-    method,
-    path: `${url.pathname}${url.search}`,
-    body: parseRequestBody(init?.body),
-    signal: init?.signal ?? request?.signal ?? undefined,
-    headers
-  };
-}
-
-function parseRequestBody(body: BodyInit | null | undefined): unknown {
-  if (body === undefined || body === null) {
-    return undefined;
-  }
-  if (typeof body === 'string') {
-    try {
-      return JSON.parse(body);
-    } catch {
-      return body;
-    }
-  }
-  return body;
-}
-
-function isSseRequest(request: RequestSnapshot): boolean {
-  const accept = request.headers.get('accept')?.toLowerCase() ?? '';
-  return accept.includes('text/event-stream');
-}
-
-function createSseResponse(request: RequestSnapshot): Response {
-  const encoder = new TextEncoder();
-  let session: ReturnType<typeof appClient.openStream<unknown>> | null = null;
-
-  const stream = new ReadableStream<Uint8Array>({
-    start(controller) {
-      session = appClient.openStream<unknown>({
-        method: request.method === 'GET' ? 'GET' : 'POST',
-        path: request.path,
-        ...(request.body !== undefined ? { body: request.body } : {}),
-        signal: request.signal,
-        onEvent: (event) => {
-          controller.enqueue(encoder.encode(encodeSseFrame(event.name, event.payload)));
-        }
-      });
-
-      void session.finished
-        .then(() => {
-          controller.close();
-        })
-        .catch((error) => {
-          controller.enqueue(encoder.encode(encodeSseFrame('error', {
-            message: error instanceof Error ? error.message : String(error)
-          })));
-          controller.close();
-        });
-    },
-    cancel() {
-      session?.cancel();
-    }
-  });
-
-  return new Response(stream, {
-    status: 200,
-    headers: {
-      'content-type': 'text/event-stream'
-    }
-  });
-}
-
-function encodeSseFrame(event: string, payload: unknown): string {
-  const data = payload === undefined ? '' : JSON.stringify(payload);
-  return `event: ${event}\ndata: ${data}\n\n`;
+  return (input, init) =>
+    fetch(input, {
+      credentials: 'include',
+      ...init
+    });
 }

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-page-data.test.ts

@@ -16,6 +16,14 @@ const modelOptions: ChatModelOption[] = [
 ];
 
 describe('filterModelOptionsBySessionType', () => {
+  it('keeps the full model catalog when the session type does not publish a supportedModels whitelist', () => {
+    expect(
+      filterModelOptionsBySessionType({
+        modelOptions
+      })
+    ).toEqual(modelOptions);
+  });
+
   it('keeps only session-type-supported models when the runtime publishes a filtered list', () => {
     expect(
       filterModelOptionsBySessionType({

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/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: () => ({

package/src/components/layout/Sidebar.tsx

@@ -5,9 +5,10 @@ import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOp
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { BrandHeader } from '@/components/common/BrandHeader';
+import { SidebarActionItem, SidebarNavLinkItem, SidebarSelectItem } from '@/components/layout/sidebar-items';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
-import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
+import { SelectItem } from '@/components/ui/select';
 import { useRemoteStatus } from '@/hooks/useRemoteAccess';
 import { useAppPresenter } from '@/presenter/app-presenter-context';
 
@@ -23,6 +24,7 @@ export function Sidebar({ mode }: SidebarProps) {
   const remoteStatus = useRemoteStatus();
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
+  const isSettingsMode = mode === 'settings';
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ?? language;
   const currentThemeLabel = t(THEME_OPTIONS.find((option) => option.value === theme)?.labelKey ?? 'themeWarm');
   const accountEmail = remoteStatus.data?.account.email?.trim();
@@ -119,11 +121,12 @@ export function Sidebar({ mode }: SidebarProps) {
       icon: Wrench,
     }
   ];
-  const navItems = mode === 'main' ? mainNavItems : settingsNavItems;
+  const navItems = isSettingsMode ? settingsNavItems : mainNavItems;
+  const sidebarDensity = isSettingsMode ? 'compact' : 'default';
 
   return (
     <aside className="w-[240px] shrink-0 flex h-full min-h-0 flex-col overflow-hidden bg-secondary px-4 py-6">
-      {mode === 'settings' ? (
+      {isSettingsMode ? (
         <div className="shrink-0 px-2 pb-3">
           <div
             className="flex items-center gap-2 px-1 py-1"
@@ -131,7 +134,7 @@ export function Sidebar({ mode }: SidebarProps) {
           >
             <NavLink
               to="/chat"
-              className="group inline-flex min-w-0 items-center gap-1.5 rounded-lg px-1 py-1 text-[12px] font-medium text-gray-500 transition-colors hover:text-gray-900"
+              className="group inline-flex min-w-0 items-center gap-1.5 rounded-lg px-1 py-1 text-[12px] font-medium text-gray-500 transition-colors hover:bg-gray-200/60 hover:text-gray-900"
             >
               <ArrowLeft className="h-3.5 w-3.5 shrink-0 text-gray-400 group-hover:text-gray-700" />
               <span className="truncate">{t('backToMain')}</span>
@@ -149,35 +152,16 @@ export function Sidebar({ mode }: SidebarProps) {
       <div className="flex min-h-0 flex-1 flex-col">
         {/* Navigation */}
         <nav className="custom-scrollbar min-h-0 flex-1 overflow-y-auto pr-1">
-          <ul className="space-y-1 pb-4">
+          <ul className={cn(isSettingsMode ? 'space-y-0.5 pb-3' : 'space-y-1 pb-4')}>
             {navItems.map((item) => {
-              const Icon = item.icon;
-
               return (
                 <li key={item.target}>
-                  <NavLink
+                  <SidebarNavLinkItem
                     to={item.target}
-                    className={({ isActive }) =>
-                      cn(
-                        'group w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium transition-all duration-base',
-                        isActive
-                          ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                          : 'text-gray-600 hover:bg-gray-200/60 hover:text-gray-900'
-                      )
-                    }
-                  >
-                    {({ isActive }) => (
-                      <>
-                        <Icon
-                          className={cn(
-                            'h-[17px] w-[17px] transition-colors',
-                            isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800'
-                          )}
-                        />
-                        <span className="flex-1 text-left">{item.label}</span>
-                      </>
-                    )}
-                  </NavLink>
+                    label={item.label}
+                    icon={item.icon}
+                    density={sidebarDensity}
+                  />
                 </li>
               );
             })}
@@ -185,91 +169,67 @@ export function Sidebar({ mode }: SidebarProps) {
         </nav>
 
         {/* Footer actions stay reachable while the nav scrolls independently. */}
-        <div className="mt-3 shrink-0 border-t border-[#dde0ea] bg-secondary pt-3">
-          {mode === 'settings' ? (
-            <button
+        <div className={cn('shrink-0 border-t border-[#dde0ea] bg-secondary', isSettingsMode ? 'mt-2 pt-3' : 'mt-3 pt-3')}>
+          {isSettingsMode ? (
+            <SidebarActionItem
               onClick={() => presenter.accountManager.openAccountPanel()}
-              className="mb-2 w-full rounded-xl px-3 py-2.5 text-left text-gray-600 transition-all duration-base hover:bg-[#e4e7ef] hover:text-gray-900"
-              data-testid="settings-sidebar-account-entry"
-            >
-              <div className="flex items-start gap-3">
-                <KeyRound className="mt-0.5 h-[17px] w-[17px] shrink-0 text-gray-400" />
-                <div className="min-w-0 flex-1">
-                  <p className="truncate text-[14px] font-medium text-gray-600">
-                    {t('remoteAccountEntryManage')}
-                  </p>
-                  <p className="mt-1 truncate text-xs text-gray-500">
-                    {accountConnected ? accountEmail || t('remoteAccountEntryConnected') : t('remoteAccountEntryDisconnected')}
-                  </p>
-                </div>
-              </div>
-            </button>
+              icon={KeyRound}
+              label={t('remoteAccountEntryManage')}
+              density="compact"
+              className="mb-1.5"
+              trailing={accountConnected ? accountEmail || t('remoteAccountEntryConnected') : t('remoteAccountEntryDisconnected')}
+              trailingClassName="max-w-[92px] truncate text-right"
+              testId="settings-sidebar-account-entry"
+              trailingTestId="settings-sidebar-account-status"
+            />
           ) : null}
           {mode === 'main' && (
             <div className="mb-2">
-              <NavLink
+              <SidebarNavLinkItem
                 to="/settings"
-                className={({ isActive }) =>
-                  cn(
-                    'group w-full flex items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium transition-all duration-base',
-                    isActive
-                      ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
-                      : 'text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-900'
-                  )
-                }
-              >
-                {({ isActive }) => (
-                  <>
-                    <Settings className={cn('h-[17px] w-[17px] transition-colors', isActive ? 'text-gray-900' : 'text-gray-500 group-hover:text-gray-800')} />
-                    <span className="flex-1 text-left">{t('settings')}</span>
-                  </>
-                )}
-              </NavLink>
+                label={t('settings')}
+                icon={Settings}
+              />
             </div>
           )}
           <div className="mb-2">
-            <Select value={theme} onValueChange={(value) => handleThemeSwitch(value as UiTheme)}>
-              <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent px-3 py-2.5 text-[14px] font-medium text-gray-600 shadow-none hover:bg-[#e4e7ef] focus:ring-0">
-                <div className="flex min-w-0 items-center gap-3">
-                  <Palette className="h-[17px] w-[17px] text-gray-400" />
-                  <span className="text-left">{t('theme')}</span>
-                </div>
-                <span className="ml-auto text-xs text-gray-500">{currentThemeLabel}</span>
-              </SelectTrigger>
-              <SelectContent>
-                {THEME_OPTIONS.map((option) => (
-                  <SelectItem key={option.value} value={option.value} className="text-xs">
-                    {t(option.labelKey)}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <SidebarSelectItem
+              value={theme}
+              onValueChange={(value) => handleThemeSwitch(value as UiTheme)}
+              icon={Palette}
+              label={t('theme')}
+              valueLabel={currentThemeLabel}
+              density={sidebarDensity}
+            >
+              {THEME_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value} className="text-xs">
+                  {t(option.labelKey)}
+                </SelectItem>
+              ))}
+            </SidebarSelectItem>
           </div>
           <div className="mb-2">
-            <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
-              <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent px-3 py-2.5 text-[14px] font-medium text-gray-600 shadow-none hover:bg-[#e4e7ef] focus:ring-0">
-                <div className="flex min-w-0 items-center gap-3">
-                  <Languages className="h-[17px] w-[17px] text-gray-400" />
-                  <span className="text-left">{t('language')}</span>
-                </div>
-                <span className="ml-auto text-xs text-gray-500">{currentLanguageLabel}</span>
-              </SelectTrigger>
-              <SelectContent>
-                {LANGUAGE_OPTIONS.map((option) => (
-                  <SelectItem key={option.value} value={option.value} className="text-xs">
-                    {option.label}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+            <SidebarSelectItem
+              value={language}
+              onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}
+              icon={Languages}
+              label={t('language')}
+              valueLabel={currentLanguageLabel}
+              density={sidebarDensity}
+            >
+              {LANGUAGE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value} className="text-xs">
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SidebarSelectItem>
           </div>
-          <button
+          <SidebarActionItem
             onClick={() => docBrowser.open(undefined, { kind: 'docs', newTab: true, title: 'Docs' })}
-            className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-[14px] font-medium text-gray-600 transition-all duration-base hover:bg-[#e4e7ef] hover:text-gray-800"
-          >
-            <BookOpen className="h-[17px] w-[17px] text-gray-400" />
-            <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
-          </button>
+            icon={BookOpen}
+            label={t('docBrowserHelp')}
+            density={sidebarDensity}
+          />
         </div>
       </div>
     </aside>