npm - @nextclaw/ui - Versions diffs - 0.7.0 → 0.8.0 - Mend

@nextclaw/ui 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (56) hide show

package/dist/index.html CHANGED Viewed

@@ -6,9 +6,9 @@
   <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-DK4TS5ev.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/vendor-B7ozqnFC.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-BLeJkJ0o.css">
+  <script type="module" crossorigin src="/assets/index-CzkY1reu.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-psXJBy9u.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-RZ0kHHRI.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -27,7 +27,10 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat-ui": "0.1.1",
+    "@nextclaw/ncp-http-agent-client": "0.3.0",
+    "@nextclaw/ncp-react": "0.3.0",
+    "@nextclaw/agent-chat-ui": "0.2.0",
+    "@nextclaw/ncp": "0.3.0",
     "@nextclaw/agent-chat": "0.1.1"
   },
   "devDependencies": {

package/src/api/config.ts CHANGED Viewed

@@ -24,6 +24,8 @@ import type {
   ProviderCreateRequest,
   ProviderCreateResult,
   ProviderDeleteResult,
+  NcpSessionMessagesView,
+  NcpSessionsListView,
   RuntimeConfigUpdate,
   SecretsConfigUpdate,
   SecretsView,
@@ -369,6 +371,42 @@ export async function deleteSession(key: string): Promise<{ deleted: boolean }>
   return response.data;
 }
+// GET /api/ncp/sessions
+export async function fetchNcpSessions(params?: { limit?: number }): Promise<NcpSessionsListView> {
+  const query = new URLSearchParams();
+  if (typeof params?.limit === 'number' && Number.isFinite(params.limit)) {
+    query.set('limit', String(Math.max(1, Math.trunc(params.limit))));
+  }
+  const suffix = query.toString();
+  const response = await api.get<NcpSessionsListView>(suffix ? `/api/ncp/sessions?${suffix}` : '/api/ncp/sessions');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// GET /api/ncp/sessions/:sessionId/messages
+export async function fetchNcpSessionMessages(sessionId: string, limit = 200): Promise<NcpSessionMessagesView> {
+  const response = await api.get<NcpSessionMessagesView>(
+    `/api/ncp/sessions/${encodeURIComponent(sessionId)}/messages?limit=${Math.max(1, Math.trunc(limit))}`
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+// DELETE /api/ncp/sessions/:sessionId
+export async function deleteNcpSession(sessionId: string): Promise<{ deleted: boolean; sessionId: string }> {
+  const response = await api.delete<{ deleted: boolean; sessionId: string }>(
+    `/api/ncp/sessions/${encodeURIComponent(sessionId)}`
+  );
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
 // POST /api/chat/turn
 export async function sendChatTurn(data: ChatTurnRequest): Promise<ChatTurnView> {
   const response = await api.post<ChatTurnView>('/api/chat/turn', data);

package/src/api/types.ts CHANGED Viewed

@@ -1,3 +1,5 @@
+import type { NcpMessage, NcpSessionStatus, NcpSessionSummary } from '@nextclaw/ncp';
 // API Types - matching backend response format
 export type ApiError = {
   code: string;
@@ -261,6 +263,23 @@ export type SessionHistoryView = {
   events: SessionEventView[];
 };
+export type NcpSessionSummaryView = NcpSessionSummary;
+export type NcpSessionsListView = {
+  sessions: NcpSessionSummaryView[];
+  total: number;
+};
+export type NcpMessageView = NcpMessage;
+export type NcpSessionMessagesView = {
+  sessionId: string;
+  messages: NcpMessageView[];
+  total: number;
+};
+export type NcpSessionStatusView = NcpSessionStatus;
 export type SessionPatchUpdate = {
   label?: string | null;
   preferredModel?: string | null;

package/src/components/chat/ChatPage.tsx CHANGED Viewed

@@ -1,330 +1,16 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
-import { useConfirmDialog } from '@/hooks/useConfirmDialog';
-import { ChatSidebar } from '@/components/chat/ChatSidebar';
-import { ChatConversationPanel } from '@/components/chat/ChatConversationPanel';
-import { CronConfig } from '@/components/config/CronConfig';
-import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
-import { useSessionRunStatus } from '@/components/chat/chat-page-runtime';
-import { useChatRuntimeController } from '@/components/chat/useChatRuntimeController';
-import { parseSessionKeyFromRoute, resolveAgentIdFromSessionKey } from '@/components/chat/chat-session-route';
-import { useChatPageData, sessionDisplayName } from '@/components/chat/chat-page-data';
-import { ChatPresenterProvider } from '@/components/chat/presenter/chat-presenter-context';
-import { ChatPresenter } from '@/components/chat/presenter/chat.presenter';
-import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
-import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
-import { useLocation, useNavigate, useParams } from 'react-router-dom';
-type MainPanelView = 'chat' | 'cron' | 'skills';
-type ChatPageProps = {
-  view: MainPanelView;
-};
-type UseSessionSyncParams = {
-  view: MainPanelView;
-  routeSessionKey: string | null;
-  selectedSessionKey: string | null;
-  selectedAgentId: string;
-  setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
-  setSelectedAgentId: Dispatch<SetStateAction<string>>;
-  selectedSessionKeyRef: MutableRefObject<string | null>;
-  resetStreamState: () => void;
-};
-function useChatSessionSync(params: UseSessionSyncParams): void {
-  const {
-    view,
-    routeSessionKey,
-    selectedSessionKey,
-    selectedAgentId,
-    setSelectedSessionKey,
-    setSelectedAgentId,
-    selectedSessionKeyRef,
-    resetStreamState
-  } = params;
-  useEffect(() => {
-    if (view !== 'chat') {
-      return;
-    }
-    if (routeSessionKey) {
-      if (selectedSessionKey !== routeSessionKey) {
-        setSelectedSessionKey(routeSessionKey);
-      }
-      return;
-    }
-    if (selectedSessionKey !== null) {
-      setSelectedSessionKey(null);
-      resetStreamState();
-    }
-  }, [resetStreamState, routeSessionKey, selectedSessionKey, setSelectedSessionKey, view]);
-  useEffect(() => {
-    const inferred = selectedSessionKey ? resolveAgentIdFromSessionKey(selectedSessionKey) : null;
-    if (!inferred) {
-      return;
-    }
-    if (selectedAgentId !== inferred) {
-      setSelectedAgentId(inferred);
-    }
-  }, [selectedAgentId, selectedSessionKey, setSelectedAgentId]);
-  useEffect(() => {
-    selectedSessionKeyRef.current = selectedSessionKey;
-  }, [selectedSessionKey, selectedSessionKeyRef]);
-}
-type ChatPageLayoutProps = {
-  view: MainPanelView;
-  confirmDialog: JSX.Element;
-};
-function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
-  return (
-    <div className="h-full flex">
-      <ChatSidebar />
-      {view === 'chat' ? (
-        <ChatConversationPanel />
-      ) : (
-        <section className="flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
-          {view === 'cron' ? (
-            <div className="h-full overflow-auto custom-scrollbar">
-              <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
-                <CronConfig />
-              </div>
-            </div>
-          ) : (
-            <div className="h-full overflow-hidden">
-              <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">
-                <MarketplacePage forcedType="skills" />
-              </div>
-            </div>
-          )}
-        </section>
-      )}
-      {confirmDialog}
-    </div>
-  );
-}
+import { useLocation } from 'react-router-dom';
+import { resolveChatChain } from '@/components/chat/chat-chain';
+import type { ChatPageProps } from '@/components/chat/chat-page-shell';
+import { LegacyChatPage } from '@/components/chat/legacy/LegacyChatPage';
+import { NcpChatPage } from '@/components/chat/ncp/NcpChatPage';
 export function ChatPage({ view }: ChatPageProps) {
-  const [presenter] = useState(() => new ChatPresenter());
-  const query = useChatSessionListStore((state) => state.snapshot.query);
-  const selectedSessionKey = useChatSessionListStore((state) => state.snapshot.selectedSessionKey);
-  const selectedAgentId = useChatSessionListStore((state) => state.snapshot.selectedAgentId);
-  const pendingSessionType = useChatInputStore((state) => state.snapshot.pendingSessionType);
-  const { confirm, ConfirmDialog } = useConfirmDialog();
   const location = useLocation();
-  const navigate = useNavigate();
-  const { sessionId: routeSessionIdParam } = useParams<{ sessionId?: string }>();
-  const threadRef = useRef<HTMLDivElement | null>(null);
-  const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
-  const thinkingHydratedSessionKeyRef = useRef<string | null>(null);
-  const routeSessionKey = useMemo(
-    () => parseSessionKeyFromRoute(routeSessionIdParam),
-    [routeSessionIdParam]
-  );
-  const {
-    sessionsQuery,
-    installedSkillsQuery,
-    chatCapabilitiesQuery,
-    historyQuery,
-    isProviderStateResolved,
-    modelOptions,
-    sessions,
-    skillRecords,
-    selectedSession,
-    historyMessages,
-    selectedSessionThinkingLevel,
-    sessionTypeOptions,
-    defaultSessionType,
-    selectedSessionType,
-    canEditSessionType,
-    sessionTypeUnavailable,
-    sessionTypeUnavailableMessage
-  } = useChatPageData({
-    query,
-    selectedSessionKey,
-    selectedAgentId,
-    pendingSessionType,
-    setPendingSessionType: presenter.chatInputManager.setPendingSessionType,
-    setSelectedModel: presenter.chatInputManager.setSelectedModel
-  });
-  const {
-    uiMessages,
-    isSending,
-    isAwaitingAssistantOutput,
-    canStopCurrentRun,
-    stopDisabledReason,
-    lastSendError,
-    activeBackendRunId,
-    sendMessage,
-    stopCurrentRun,
-    resumeRun,
-    resetStreamState,
-    applyHistoryMessages
-  } = useChatRuntimeController(
-    {
-      selectedSessionKeyRef,
-      setSelectedSessionKey: presenter.chatSessionListManager.setSelectedSessionKey,
-      setDraft: presenter.chatInputManager.setDraft,
-      refetchSessions: sessionsQuery.refetch,
-      refetchHistory: historyQuery.refetch
-    },
-    presenter.chatController
-  );
-  console.log('[ChatPage] uiMessages', { uiMessages, historyMessages });
-  useEffect(() => {
-    presenter.chatStreamActionsManager.bind({
-      sendMessage,
-      stopCurrentRun,
-      resumeRun,
-      resetStreamState,
-      applyHistoryMessages
-    });
-  }, [applyHistoryMessages, presenter, resetStreamState, resumeRun, sendMessage, stopCurrentRun]);
-  const { sessionRunStatusByKey } = useSessionRunStatus({
-    view,
-    selectedSessionKey,
-    activeBackendRunId,
-    isLocallyRunning: isSending || Boolean(activeBackendRunId),
-    resumeRun: presenter.chatStreamActionsManager.resumeRun
-  });
-  useChatSessionSync({
-    view,
-    routeSessionKey,
-    selectedSessionKey,
-    selectedAgentId,
-    setSelectedSessionKey: presenter.chatSessionListManager.setSelectedSessionKey,
-    setSelectedAgentId: presenter.chatSessionListManager.setSelectedAgentId,
-    selectedSessionKeyRef,
-    resetStreamState: presenter.chatStreamActionsManager.resetStreamState
-  });
-  useEffect(() => {
-    presenter.chatStreamActionsManager.applyHistoryMessages(historyMessages, {
-      isLoading: historyQuery.isLoading
-    });
-  }, [historyMessages, historyQuery.isLoading, presenter]);
-  useEffect(() => {
-    presenter.chatUiManager.syncState({
-      pathname: location.pathname
-    });
-    presenter.chatUiManager.bindActions({
-      navigate,
-      confirm
-    });
-  }, [confirm, location.pathname, navigate, presenter]);
-  const currentSessionDisplayName = selectedSession ? sessionDisplayName(selectedSession) : undefined;
-  useEffect(() => {
-    presenter.chatThreadManager.bindActions({
-      refetchSessions: sessionsQuery.refetch
-    });
-  }, [
-    presenter,
-    sessionsQuery.refetch,
-  ]);
-  useEffect(() => {
-    const shouldHydrateThinkingFromHistory =
-      !isSending &&
-      !isAwaitingAssistantOutput &&
-      !historyQuery.isLoading &&
-      selectedSessionKey !== thinkingHydratedSessionKeyRef.current;
+  const chatChain = resolveChatChain(location.search);
-    presenter.chatInputManager.syncSnapshot({
-      isProviderStateResolved,
-      defaultSessionType,
-      canStopGeneration: canStopCurrentRun,
-      stopDisabledReason,
-      stopSupported: chatCapabilitiesQuery.data?.stopSupported ?? false,
-      stopReason: chatCapabilitiesQuery.data?.stopReason,
-      sendError: lastSendError,
-      isSending,
-      modelOptions,
-      sessionTypeOptions,
-      selectedSessionType,
-      ...(shouldHydrateThinkingFromHistory ? { selectedThinkingLevel: selectedSessionThinkingLevel } : {}),
-      canEditSessionType,
-      sessionTypeUnavailable,
-      skillRecords,
-      isSkillsLoading: installedSkillsQuery.isLoading
-    });
-    if (shouldHydrateThinkingFromHistory) {
-      thinkingHydratedSessionKeyRef.current = selectedSessionKey;
-    }
-    if (!selectedSessionKey) {
-      thinkingHydratedSessionKeyRef.current = null;
-    }
-    presenter.chatSessionListManager.syncSnapshot({
-      sessions,
-      query,
-      isLoading: sessionsQuery.isLoading
-    });
-    presenter.chatRunStatusManager.syncSnapshot({
-      sessionRunStatusByKey,
-      isLocallyRunning: isSending || Boolean(activeBackendRunId),
-      activeBackendRunId
-    });
-    presenter.chatThreadManager.syncSnapshot({
-      isProviderStateResolved,
-      modelOptions,
-      sessionTypeUnavailable,
-      sessionTypeUnavailableMessage,
-      selectedSessionKey,
-      sessionDisplayName: currentSessionDisplayName,
-      canDeleteSession: Boolean(selectedSession),
-      threadRef,
-      isHistoryLoading: historyQuery.isLoading,
-      uiMessages,
-      isSending,
-      isAwaitingAssistantOutput
-    });
-  }, [
-    activeBackendRunId,
-    canEditSessionType,
-    canStopCurrentRun,
-    currentSessionDisplayName,
-    chatCapabilitiesQuery.data?.stopReason,
-    chatCapabilitiesQuery.data?.stopSupported,
-    defaultSessionType,
-    historyQuery.isLoading,
-    installedSkillsQuery.isLoading,
-    isAwaitingAssistantOutput,
-    isProviderStateResolved,
-    isSending,
-    lastSendError,
-    uiMessages,
-    modelOptions,
-    presenter,
-    query,
-    selectedSession,
-    selectedSessionThinkingLevel,
-    selectedSessionKey,
-    selectedAgentId,
-    selectedSessionType,
-    sessionRunStatusByKey,
-    sessionTypeOptions,
-    sessionTypeUnavailable,
-    sessionTypeUnavailableMessage,
-    sessions,
-    sessionsQuery.isLoading,
-    stopDisabledReason,
-    threadRef,
-    skillRecords
-  ]);
+  if (chatChain === 'ncp') {
+    return <NcpChatPage view={view} />;
+  }
-  return (
-    <ChatPresenterProvider presenter={presenter}>
-      <ChatPageLayout view={view} confirmDialog={<ConfirmDialog />} />
-    </ChatPresenterProvider>
-  );
+  return <LegacyChatPage view={view} />;
 }

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

@@ -61,6 +61,7 @@ describe('adaptChatMessages', () => {
     expect(adapted[0]?.roleLabel).toBe('Assistant');
     expect(adapted[0]?.timestampLabel).toBe('formatted:2026-03-17T10:00:00.000Z');
     expect(adapted[0]?.parts.map((part) => part.type)).toEqual(['markdown', 'reasoning', 'tool-card']);
+    expect(adapted[0]?.parts[1]).toMatchObject({ type: 'reasoning', label: 'Reasoning', text: 'internal reasoning' });
     expect(adapted[0]?.parts[2]).toMatchObject({
       type: 'tool-card',
       card: {

package/src/components/chat/chat-chain.test.ts ADDED Viewed

@@ -0,0 +1,22 @@
+import { describe, expect, it, vi } from 'vitest';
+import { resolveChatChain } from '@/components/chat/chat-chain';
+describe('resolveChatChain', () => {
+  it('defaults to ncp when no query or env override is provided', () => {
+    vi.stubEnv('VITE_CHAT_CHAIN', '');
+    expect(resolveChatChain('')).toBe('ncp');
+  });
+  it('allows explicit legacy rollback from query string', () => {
+    vi.stubEnv('VITE_CHAT_CHAIN', 'ncp');
+    expect(resolveChatChain('?chatChain=legacy')).toBe('legacy');
+  });
+  it('accepts env override when query string is absent', () => {
+    vi.stubEnv('VITE_CHAT_CHAIN', 'legacy');
+    expect(resolveChatChain('')).toBe('legacy');
+  });
+});

package/src/components/chat/chat-chain.ts ADDED Viewed

@@ -0,0 +1,23 @@
+export type ChatChain = 'legacy' | 'ncp';
+const DEFAULT_CHAT_CHAIN: ChatChain = 'ncp';
+function normalizeChatChain(value: string | null | undefined): ChatChain | null {
+  if (typeof value !== 'string') {
+    return null;
+  }
+  const normalized = value.trim().toLowerCase();
+  if (normalized === 'legacy' || normalized === 'ncp') {
+    return normalized;
+  }
+  return null;
+}
+export function resolveChatChain(search: string): ChatChain {
+  const fromSearch = normalizeChatChain(new URLSearchParams(search).get('chatChain'));
+  if (fromSearch) {
+    return fromSearch;
+  }
+  const fromEnv = normalizeChatChain(import.meta.env.VITE_CHAT_CHAIN);
+  return fromEnv ?? DEFAULT_CHAT_CHAIN;
+}

package/src/components/chat/chat-page-shell.tsx ADDED Viewed

@@ -0,0 +1,103 @@
+import { useEffect } from 'react';
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { ChatSidebar } from '@/components/chat/ChatSidebar';
+import { ChatConversationPanel } from '@/components/chat/ChatConversationPanel';
+import { CronConfig } from '@/components/config/CronConfig';
+import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
+export type MainPanelView = 'chat' | 'cron' | 'skills';
+export type ChatPageProps = {
+  view: MainPanelView;
+};
+type UseChatSessionSyncParams = {
+  view: MainPanelView;
+  routeSessionKey: string | null;
+  selectedSessionKey: string | null;
+  selectedAgentId: string;
+  setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
+  setSelectedAgentId: Dispatch<SetStateAction<string>>;
+  selectedSessionKeyRef: MutableRefObject<string | null>;
+  resetStreamState: () => void;
+  resolveAgentIdFromSessionKey: (sessionKey: string) => string | null;
+};
+export function useChatSessionSync(params: UseChatSessionSyncParams): void {
+  const {
+    view,
+    routeSessionKey,
+    selectedSessionKey,
+    selectedAgentId,
+    setSelectedSessionKey,
+    setSelectedAgentId,
+    selectedSessionKeyRef,
+    resetStreamState,
+    resolveAgentIdFromSessionKey
+  } = params;
+  useEffect(() => {
+    if (view !== 'chat') {
+      return;
+    }
+    if (routeSessionKey) {
+      if (selectedSessionKey !== routeSessionKey) {
+        setSelectedSessionKey(routeSessionKey);
+      }
+      return;
+    }
+    if (selectedSessionKey !== null) {
+      setSelectedSessionKey(null);
+      resetStreamState();
+    }
+  }, [resetStreamState, routeSessionKey, selectedSessionKey, setSelectedSessionKey, view]);
+  useEffect(() => {
+    const inferred = selectedSessionKey ? resolveAgentIdFromSessionKey(selectedSessionKey) : null;
+    if (!inferred) {
+      return;
+    }
+    if (selectedAgentId !== inferred) {
+      setSelectedAgentId(inferred);
+    }
+  }, [resolveAgentIdFromSessionKey, selectedAgentId, selectedSessionKey, setSelectedAgentId]);
+  useEffect(() => {
+    selectedSessionKeyRef.current = selectedSessionKey;
+  }, [selectedSessionKey, selectedSessionKeyRef]);
+}
+type ChatPageLayoutProps = {
+  view: MainPanelView;
+  confirmDialog: JSX.Element;
+};
+export function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
+  return (
+    <div className="h-full flex">
+      <ChatSidebar />
+      {view === 'chat' ? (
+        <ChatConversationPanel />
+      ) : (
+        <section className="flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
+          {view === 'cron' ? (
+            <div className="h-full overflow-auto custom-scrollbar">
+              <div className="mx-auto w-full max-w-[min(1120px,100%)] px-6 py-5">
+                <CronConfig />
+              </div>
+            </div>
+          ) : (
+            <div className="h-full overflow-hidden">
+              <div className="mx-auto flex h-full min-h-0 w-full max-w-[min(1120px,100%)] flex-col px-6 py-5">
+                <MarketplacePage forcedType="skills" />
+              </div>
+            </div>
+          )}
+        </section>
+      )}
+      {confirmDialog}
+    </div>
+  );
+}

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

@@ -55,7 +55,11 @@ export function ChatMessageListContainer(props: ChatMessageListContainerProps) {
     <ChatMessageList
       messages={messages}
       isSending={props.isSending}
-      hasStreamingDraft={props.uiMessages.some((message) => message.meta?.status === 'streaming')}
+      hasAssistantDraft={props.uiMessages.some(
+        (message) =>
+          message.role === 'assistant' &&
+          (message.meta?.status === 'streaming' || message.meta?.status === 'pending')
+      )}
       className={props.className}
       texts={{
         copyCodeLabel: t('chatCodeCopy'),