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

@nextclaw/ui 0.7.0 → 0.9.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 (80) 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-CsvP4CER.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-CkJHmX1g.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-D-bXl7qL.css">
 </head>
 <body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.7.0",
+  "version": "0.9.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/agent-chat-ui": "0.2.0",
+    "@nextclaw/ncp-react": "0.3.1",
+    "@nextclaw/ncp": "0.3.0",
     "@nextclaw/agent-chat": "0.1.1"
   },
   "devDependencies": {

package/src/api/config.ts CHANGED Viewed

@@ -601,6 +601,15 @@ export async function fetchChatSessionTypes(): Promise<ChatSessionTypesView> {
   return response.data;
 }
+// GET /api/ncp/session-types
+export async function fetchNcpChatSessionTypes(): Promise<ChatSessionTypesView> {
+  const response = await api.get<ChatSessionTypesView>('/api/ncp/session-types');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
 // POST /api/chat/turn/stop
 export async function stopChatTurn(data: ChatTurnStopRequest): Promise<ChatTurnStopResult> {
   const response = await api.post<ChatTurnStopResult>('/api/chat/turn/stop', data);

package/src/api/ncp-session.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import { api } from './client';
+import type { NcpSessionMessagesView, NcpSessionsListView, NcpSessionSummaryView, SessionPatchUpdate } from './types';
+// 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;
+}
+// PUT /api/ncp/sessions/:sessionId
+export async function updateNcpSession(
+  sessionId: string,
+  data: SessionPatchUpdate
+): Promise<NcpSessionSummaryView> {
+  const response = await api.put<NcpSessionSummaryView>(`/api/ncp/sessions/${encodeURIComponent(sessionId)}`, data);
+  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;
+}

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,9 +263,27 @@ 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;
+  preferredThinking?: ThinkingLevel | null;
   sessionType?: string | null;
   clearHistory?: boolean;
 };

package/src/components/chat/ChatConversationPanel.test.tsx ADDED Viewed

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatConversationPanel } from '@/components/chat/ChatConversationPanel';
+import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
+const mocks = vi.hoisted(() => ({
+  deleteSession: vi.fn(),
+  goToProviders: vi.fn()
+}));
+vi.mock('@nextclaw/agent-chat-ui', () => ({
+  useStickyBottomScroll: () => ({
+    onScroll: vi.fn()
+  })
+}));
+vi.mock('@/components/chat/nextclaw', () => ({
+  ChatInputBarContainer: () => <div data-testid="chat-input-bar" />,
+  ChatMessageListContainer: () => <div data-testid="chat-message-list" />
+}));
+vi.mock('@/components/chat/ChatWelcome', () => ({
+  ChatWelcome: () => <div data-testid="chat-welcome" />
+}));
+vi.mock('@/components/chat/presenter/chat-presenter-context', () => ({
+  usePresenter: () => ({
+    chatThreadManager: {
+      deleteSession: mocks.deleteSession,
+      goToProviders: mocks.goToProviders,
+      createSession: vi.fn()
+    }
+  })
+}));
+describe('ChatConversationPanel', () => {
+  beforeEach(() => {
+    mocks.deleteSession.mockReset();
+    mocks.goToProviders.mockReset();
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        isProviderStateResolved: true,
+        modelOptions: [{ value: 'openai/gpt-5.1', modelLabel: 'gpt-5.1', providerLabel: 'OpenAI' } as never],
+        sessionTypeLabel: 'Codex',
+        selectedSessionKey: null,
+        sessionDisplayName: undefined,
+        canDeleteSession: false,
+        isDeletePending: false,
+        isHistoryLoading: false,
+        uiMessages: [],
+        isSending: false,
+        isAwaitingAssistantOutput: false
+      }
+    });
+  });
+  it('shows the draft session type in the conversation header', () => {
+    render(<ChatConversationPanel />);
+    expect(screen.getByText('New Task')).toBeTruthy();
+    expect(screen.getByText('Codex')).toBeTruthy();
+    expect(screen.queryByRole('button')).toBeNull();
+  });
+});

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

@@ -42,6 +42,8 @@ export function ChatConversationPanel() {
   const snapshot = useChatThreadStore((state) => state.snapshot);
   const fallbackThreadRef = useRef<HTMLDivElement | null>(null);
   const threadRef = snapshot.threadRef ?? fallbackThreadRef;
+  const shouldShowSessionHeader = Boolean(snapshot.selectedSessionKey || snapshot.sessionTypeLabel);
+  const sessionHeaderTitle = snapshot.sessionDisplayName || snapshot.selectedSessionKey || t('chatSidebarNewTask');
   const showWelcome = !snapshot.selectedSessionKey && snapshot.uiMessages.length === 0 && !snapshot.isSending;
   const hasConfiguredModel = snapshot.modelOptions.length > 0;
@@ -68,22 +70,29 @@ export function ChatConversationPanel() {
     <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
       <div className={cn(
         "px-5 border-b border-gray-200/60 bg-white/80 backdrop-blur-sm flex items-center justify-between shrink-0 overflow-hidden transition-all duration-200",
-        snapshot.selectedSessionKey ? "py-3 opacity-100" : "h-0 py-0 opacity-0 border-b-0"
+        shouldShowSessionHeader ? "py-3 opacity-100" : "h-0 py-0 opacity-0 border-b-0"
       )}>
-        <div className="min-w-0 flex-1">
+        <div className="min-w-0 flex-1 flex items-center gap-2">
           <span className="text-sm font-medium text-gray-700 truncate">
-            {snapshot.sessionDisplayName || snapshot.selectedSessionKey}
+            {sessionHeaderTitle}
           </span>
+          {snapshot.sessionTypeLabel ? (
+            <span className="shrink-0 rounded-full border border-gray-200 bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-600">
+              {snapshot.sessionTypeLabel}
+            </span>
+          ) : null}
         </div>
-        <Button
-          variant="ghost"
-          size="icon"
-          className="rounded-lg shrink-0 text-gray-400 hover:text-destructive"
-          onClick={presenter.chatThreadManager.deleteSession}
-          disabled={!snapshot.canDeleteSession || snapshot.isDeletePending}
-        >
-          <Trash2 className="h-4 w-4" />
-        </Button>
+        {snapshot.selectedSessionKey ? (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="rounded-lg shrink-0 text-gray-400 hover:text-destructive"
+            onClick={presenter.chatThreadManager.deleteSession}
+            disabled={!snapshot.canDeleteSession || snapshot.isDeletePending}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+        ) : null}
       </div>
       {shouldShowProviderHint && (

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} />;
 }