@nextclaw/ui 0.7.0 → 0.9.0

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

@@ -0,0 +1,381 @@
+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 { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { API_BASE } from '@/api/client';
+import { fetchNcpSessionMessages } from '@/api/ncp-session';
+import type { ChatRunView } from '@/api/types';
+import { sessionDisplayName } from '@/components/chat/chat-page-data';
+import { ChatPageLayout, type ChatPageProps, useChatSessionSync } from '@/components/chat/chat-page-shell';
+import { parseSessionKeyFromRoute, resolveAgentIdFromSessionKey } from '@/components/chat/chat-session-route';
+import { useNcpChatPageData } from '@/components/chat/ncp/ncp-chat-page-data';
+import { NcpChatPresenter } from '@/components/chat/ncp/ncp-chat.presenter';
+import { adaptNcpMessagesToUiMessages, buildNcpSessionRunStatusByKey, createNcpSessionId } from '@/components/chat/ncp/ncp-session-adapter';
+import { ChatPresenterProvider } from '@/components/chat/presenter/chat-presenter-context';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import { resolveSessionTypeLabel } from '@/components/chat/useChatSessionTypeState';
+import { useConfirmDialog } from '@/hooks/useConfirmDialog';
+import { normalizeRequestedSkills } from '@/lib/chat-runtime-utils';
+
+function createFetchWithCredentials(): typeof fetch {
+  return (input, init) =>
+    fetch(input, {
+      credentials: 'include',
+      ...init
+    });
+}
+
+function buildNcpSendMetadata(payload: {
+  model?: string;
+  thinkingLevel?: string;
+  sessionType?: string;
+  requestedSkills?: string[];
+}): Record<string, unknown> {
+  const metadata: Record<string, unknown> = {};
+  if (payload.model?.trim()) {
+    metadata.model = payload.model.trim();
+    metadata.preferred_model = payload.model.trim();
+  }
+  if (payload.thinkingLevel?.trim()) {
+    metadata.thinking = payload.thinkingLevel.trim();
+    metadata.preferred_thinking = payload.thinkingLevel.trim();
+  }
+  if (payload.sessionType?.trim()) {
+    metadata.session_type = payload.sessionType.trim();
+  }
+  const requestedSkills = normalizeRequestedSkills(payload.requestedSkills);
+  if (requestedSkills.length > 0) {
+    metadata.requested_skills = requestedSkills;
+  }
+  return metadata;
+}
+
+function isMissingNcpSessionError(error: unknown): boolean {
+  if (!(error instanceof Error)) {
+    return false;
+  }
+  return error.message.includes('ncp session not found:');
+}
+
+export function NcpChatPage({ view }: ChatPageProps) {
+  const [presenter] = useState(() => new NcpChatPresenter());
+  const [draftSessionId, setDraftSessionId] = useState(() => createNcpSessionId());
+  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 modelHydratedSessionKeyRef = useRef<string | null>(null);
+  const thinkingHydratedSessionKeyRef = useRef<string | null>(null);
+  const routeSessionKey = useMemo(
+    () => parseSessionKeyFromRoute(routeSessionIdParam),
+    [routeSessionIdParam]
+  );
+  const {
+    sessionsQuery,
+    installedSkillsQuery,
+    isProviderStateResolved,
+    modelOptions,
+    sessionSummaries,
+    sessions,
+    skillRecords,
+    selectedSession,
+    hydratedSessionModel,
+    selectedSessionThinkingLevel,
+    sessionTypeOptions,
+    defaultSessionType,
+    selectedSessionType,
+    canEditSessionType,
+    sessionTypeUnavailable,
+    sessionTypeUnavailableMessage
+  } = useNcpChatPageData({
+    query,
+    selectedSessionKey,
+    pendingSessionType,
+    setPendingSessionType: presenter.chatInputManager.setPendingSessionType,
+    setSelectedModel: presenter.chatInputManager.setSelectedModel
+  });
+  const refetchSessions = sessionsQuery.refetch;
+
+  const activeSessionId = selectedSessionKey ?? draftSessionId;
+  const sessionSummariesRef = useRef(sessionSummaries);
+  useEffect(() => {
+    sessionSummariesRef.current = sessionSummaries;
+  }, [sessionSummaries]);
+
+  const [ncpClient] = useState(
+    () =>
+      new NcpHttpAgentClientEndpoint({
+      baseUrl: API_BASE,
+      basePath: '/api/ncp/agent',
+      fetchImpl: createFetchWithCredentials()
+      })
+  );
+
+  const loadSeed = useCallback(async (sessionId: string, signal: AbortSignal): Promise<NcpConversationSeed> => {
+    signal.throwIfAborted();
+    let history: Awaited<ReturnType<typeof fetchNcpSessionMessages>> | null = null;
+    try {
+      history = await fetchNcpSessionMessages(sessionId, 300);
+    } catch (error) {
+      if (!isMissingNcpSessionError(error)) {
+        throw error;
+      }
+    }
+    signal.throwIfAborted();
+
+    const sessionSummary = sessionSummariesRef.current.find((item) => item.sessionId === sessionId) ?? null;
+    return {
+      messages: history?.messages ?? [],
+      status: sessionSummary?.status === 'running' ? 'running' : 'idle'
+    };
+  }, []);
+
+  const agent = useHydratedNcpAgent({
+    sessionId: activeSessionId,
+    client: ncpClient,
+    loadSeed
+  });
+
+  useEffect(() => {
+    presenter.setDraftSessionId(draftSessionId);
+  }, [draftSessionId, presenter]);
+
+  useEffect(() => {
+    if (selectedSessionKey === null) {
+      const nextDraftSessionId = createNcpSessionId();
+      setDraftSessionId(nextDraftSessionId);
+      presenter.setDraftSessionId(nextDraftSessionId);
+    }
+  }, [presenter, selectedSessionKey]);
+
+  const uiMessages = useMemo(
+    () => adaptNcpMessagesToUiMessages(agent.visibleMessages),
+    [agent.visibleMessages]
+  );
+  const isSending = agent.isSending || agent.isRunning;
+  const isAwaitingAssistantOutput = agent.isRunning;
+  const canStopCurrentRun = agent.isRunning;
+  const stopDisabledReason = agent.isRunning ? null : '__preparing__';
+  const lastSendError = agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
+  const activeBackendRunId = agent.activeRunId;
+  const sessionRunStatusByKey = useMemo(
+    () =>
+      buildNcpSessionRunStatusByKey({
+        summaries: sessionSummaries,
+        activeSessionId,
+        isLocallyRunning: isSending || Boolean(activeBackendRunId)
+      }),
+    [activeBackendRunId, activeSessionId, isSending, sessionSummaries]
+  );
+
+  useEffect(() => {
+    if (!isSending && !activeBackendRunId) {
+      return;
+    }
+    void refetchSessions();
+  }, [activeBackendRunId, isSending, refetchSessions]);
+
+  useEffect(() => {
+    presenter.chatStreamActionsManager.bind({
+      sendMessage: async (payload) => {
+        if (payload.sessionKey !== activeSessionId) {
+          return;
+        }
+        const metadata = buildNcpSendMetadata({
+          model: payload.model,
+          thinkingLevel: payload.thinkingLevel,
+          sessionType: payload.sessionType,
+          requestedSkills: payload.requestedSkills
+        });
+        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 sessionsQuery.refetch();
+        } catch (error) {
+          if (payload.restoreDraftOnError) {
+            presenter.chatInputManager.setDraft((currentDraft) =>
+              currentDraft.trim().length === 0 ? payload.message : currentDraft
+            );
+          }
+          throw error;
+        }
+      },
+      stopCurrentRun: async () => {
+        await agent.abort();
+        await sessionsQuery.refetch();
+      },
+      resumeRun: async (run: ChatRunView) => {
+        if (run.sessionKey !== activeSessionId) {
+          return;
+        }
+        await agent.streamRun();
+      },
+      resetStreamState: () => {
+        selectedSessionKeyRef.current = null;
+      },
+      applyHistoryMessages: () => {}
+    });
+  }, [activeSessionId, agent, presenter, sessionsQuery]);
+
+  useChatSessionSync({
+    view,
+    routeSessionKey,
+    selectedSessionKey,
+    selectedAgentId,
+    setSelectedSessionKey: presenter.chatSessionListManager.setSelectedSessionKey,
+    setSelectedAgentId: presenter.chatSessionListManager.setSelectedAgentId,
+    selectedSessionKeyRef,
+    resetStreamState: presenter.chatStreamActionsManager.resetStreamState,
+    resolveAgentIdFromSessionKey
+  });
+
+  useEffect(() => {
+    presenter.chatUiManager.syncState({
+      pathname: location.pathname
+    });
+    presenter.chatUiManager.bindActions({
+      navigate,
+      confirm
+    });
+  }, [confirm, location.pathname, navigate, presenter]);
+
+  const currentSessionDisplayName = selectedSession ? sessionDisplayName(selectedSession) : undefined;
+  const currentSessionTypeLabel =
+    sessionTypeOptions.find((option) => option.value === selectedSessionType)?.label ??
+    resolveSessionTypeLabel(selectedSessionType);
+
+  useEffect(() => {
+    presenter.chatThreadManager.bindActions({
+      refetchSessions: sessionsQuery.refetch
+    });
+  }, [presenter, sessionsQuery.refetch]);
+
+  useEffect(() => {
+    const shouldHydrateModelFromSession =
+      !isSending &&
+      !isAwaitingAssistantOutput &&
+      !sessionsQuery.isLoading &&
+      isProviderStateResolved &&
+      modelOptions.length > 0 &&
+      selectedSessionKey !== modelHydratedSessionKeyRef.current;
+    const shouldHydrateThinkingFromSession =
+      !isSending &&
+      !isAwaitingAssistantOutput &&
+      !agent.isHydrating &&
+      isProviderStateResolved &&
+      modelOptions.length > 0 &&
+      selectedSessionKey !== thinkingHydratedSessionKeyRef.current;
+
+    presenter.chatInputManager.syncSnapshot({
+      isProviderStateResolved,
+      defaultSessionType,
+      canStopGeneration: canStopCurrentRun,
+      stopDisabledReason,
+      stopSupported: true,
+      stopReason: undefined,
+      sendError: lastSendError,
+      isSending,
+      modelOptions,
+      ...(shouldHydrateModelFromSession ? { selectedModel: hydratedSessionModel } : {}),
+      sessionTypeOptions,
+      selectedSessionType,
+      ...(shouldHydrateThinkingFromSession ? { selectedThinkingLevel: selectedSessionThinkingLevel } : {}),
+      canEditSessionType,
+      sessionTypeUnavailable,
+      skillRecords,
+      isSkillsLoading: installedSkillsQuery.isLoading
+    });
+    if (shouldHydrateModelFromSession) {
+      modelHydratedSessionKeyRef.current = selectedSessionKey;
+    }
+    if (shouldHydrateThinkingFromSession) {
+      thinkingHydratedSessionKeyRef.current = selectedSessionKey;
+    }
+    if (!selectedSessionKey) {
+      modelHydratedSessionKeyRef.current = null;
+      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,
+      sessionTypeLabel: currentSessionTypeLabel,
+      selectedSessionKey,
+      sessionDisplayName: currentSessionDisplayName,
+      canDeleteSession: Boolean(selectedSession),
+      threadRef,
+      isHistoryLoading: agent.isHydrating,
+      uiMessages,
+      isSending,
+      isAwaitingAssistantOutput
+    });
+  }, [
+    activeBackendRunId,
+    agent.isHydrating,
+    canEditSessionType,
+    canStopCurrentRun,
+    currentSessionDisplayName,
+    currentSessionTypeLabel,
+    defaultSessionType,
+    installedSkillsQuery.isLoading,
+    isAwaitingAssistantOutput,
+    hydratedSessionModel,
+    isProviderStateResolved,
+    isSending,
+    lastSendError,
+    modelOptions.length,
+    modelOptions,
+    presenter,
+    query,
+    selectedSession,
+    selectedSessionKey,
+    selectedSessionThinkingLevel,
+    selectedSessionType,
+    sessionRunStatusByKey,
+    sessionTypeOptions,
+    sessionTypeUnavailable,
+    sessionTypeUnavailableMessage,
+    sessions,
+    sessionsQuery.isLoading,
+    skillRecords,
+    stopDisabledReason,
+    threadRef,
+    uiMessages
+  ]);
+
+  return (
+    <ChatPresenterProvider presenter={presenter}>
+      <ChatPageLayout view={view} confirmDialog={<ConfirmDialog />} />
+    </ChatPresenterProvider>
+  );
+}

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

@@ -0,0 +1,179 @@
+import type { SetStateAction } from 'react';
+import type { ThinkingLevel } from '@/api/types';
+import { updateNcpSession } from '@/api/ncp-session';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
+import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
+import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
+import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
+import type { ChatModelOption } from '@/components/chat/chat-input.types';
+import { normalizeSessionType } from '@/components/chat/useChatSessionTypeState';
+
+export class NcpChatInputManager {
+  private readonly sessionPreferenceSync = new ChatSessionPreferenceSync(updateNcpSession);
+
+  constructor(
+    private uiManager: ChatUiManager,
+    private streamActionsManager: ChatStreamActionsManager,
+    private getDraftSessionId: () => string
+  ) {}
+
+  private hasSnapshotChanges = (patch: Partial<ChatInputSnapshot>): boolean => {
+    const current = useChatInputStore.getState().snapshot;
+    for (const [key, value] of Object.entries(patch) as Array<[keyof ChatInputSnapshot, ChatInputSnapshot[keyof ChatInputSnapshot]]>) {
+      if (!Object.is(current[key], value)) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  private resolveUpdateValue = <T>(prev: T, next: SetStateAction<T>): T => {
+    if (typeof next === 'function') {
+      return (next as (value: T) => T)(prev);
+    }
+    return next;
+  };
+
+  syncSnapshot = (patch: Partial<ChatInputSnapshot>) => {
+    if (!this.hasSnapshotChanges(patch)) {
+      return;
+    }
+    useChatInputStore.getState().setSnapshot(patch);
+    if (
+      Object.prototype.hasOwnProperty.call(patch, 'modelOptions') ||
+      Object.prototype.hasOwnProperty.call(patch, 'selectedModel') ||
+      Object.prototype.hasOwnProperty.call(patch, 'selectedThinkingLevel')
+    ) {
+      const snapshot = useChatInputStore.getState().snapshot;
+      this.reconcileThinkingForModel(snapshot.selectedModel);
+    }
+  };
+
+  setDraft = (next: SetStateAction<string>) => {
+    const prev = useChatInputStore.getState().snapshot.draft;
+    const value = this.resolveUpdateValue(prev, next);
+    if (value === prev) {
+      return;
+    }
+    useChatInputStore.getState().setSnapshot({ draft: value });
+  };
+
+  setPendingSessionType = (next: SetStateAction<string>) => {
+    const prev = useChatInputStore.getState().snapshot.pendingSessionType;
+    const value = this.resolveUpdateValue(prev, next);
+    if (value === prev) {
+      return;
+    }
+    useChatInputStore.getState().setSnapshot({ pendingSessionType: value });
+  };
+
+  send = async () => {
+    const inputSnapshot = useChatInputStore.getState().snapshot;
+    const sessionSnapshot = useChatSessionListStore.getState().snapshot;
+    const message = inputSnapshot.draft.trim();
+    if (!message) {
+      return;
+    }
+    const requestedSkills = inputSnapshot.selectedSkills;
+    const sessionKey = sessionSnapshot.selectedSessionKey ?? this.getDraftSessionId();
+    if (!sessionSnapshot.selectedSessionKey) {
+      this.uiManager.goToSession(sessionKey, { replace: true });
+    }
+    this.setDraft('');
+    this.setSelectedSkills([]);
+    await this.streamActionsManager.sendMessage({
+      message,
+      sessionKey,
+      agentId: sessionSnapshot.selectedAgentId,
+      sessionType: inputSnapshot.selectedSessionType,
+      model: inputSnapshot.selectedModel || undefined,
+      thinkingLevel: inputSnapshot.selectedThinkingLevel ?? undefined,
+      stopSupported: true,
+      requestedSkills,
+      restoreDraftOnError: true
+    });
+  };
+
+  stop = async () => {
+    await this.streamActionsManager.stopCurrentRun();
+  };
+
+  goToProviders = () => {
+    this.uiManager.goToProviders();
+  };
+
+  setSelectedModel = (next: SetStateAction<string>) => {
+    const prev = useChatInputStore.getState().snapshot.selectedModel;
+    const value = this.resolveUpdateValue(prev, next);
+    if (value === prev) {
+      return;
+    }
+    useChatInputStore.getState().setSnapshot({ selectedModel: value });
+    this.reconcileThinkingForModel(value);
+  };
+
+  setSelectedThinkingLevel = (next: SetStateAction<ThinkingLevel | null>) => {
+    const prev = useChatInputStore.getState().snapshot.selectedThinkingLevel;
+    const value = this.resolveUpdateValue(prev, next);
+    if (value === prev) {
+      return;
+    }
+    useChatInputStore.getState().setSnapshot({ selectedThinkingLevel: value });
+  };
+
+  selectSessionType = (value: string) => {
+    const normalized = normalizeSessionType(value);
+    useChatInputStore.getState().setSnapshot({ selectedSessionType: normalized, pendingSessionType: normalized });
+  };
+
+  setSelectedSkills = (next: SetStateAction<string[]>) => {
+    const prev = useChatInputStore.getState().snapshot.selectedSkills;
+    const value = this.resolveUpdateValue(prev, next);
+    if (Object.is(value, prev)) {
+      return;
+    }
+    useChatInputStore.getState().setSnapshot({ selectedSkills: value });
+  };
+
+  selectModel = (value: string) => {
+    this.setSelectedModel(value);
+    this.sessionPreferenceSync.syncSelectedSessionPreferences();
+  };
+
+  selectThinkingLevel = (value: ThinkingLevel) => {
+    this.setSelectedThinkingLevel(value);
+    this.sessionPreferenceSync.syncSelectedSessionPreferences();
+  };
+
+  selectSkills = (next: string[]) => {
+    this.setSelectedSkills(next);
+  };
+
+  private resolveThinkingForModel(modelOption: ChatModelOption | undefined, current: ThinkingLevel | null): ThinkingLevel | null {
+    const capability = modelOption?.thinkingCapability;
+    if (!capability || capability.supported.length === 0) {
+      return null;
+    }
+    if (current === 'off') {
+      return 'off';
+    }
+    if (current && capability.supported.includes(current)) {
+      return current;
+    }
+    if (capability.default && capability.supported.includes(capability.default)) {
+      return capability.default;
+    }
+    return 'off';
+  }
+
+  private reconcileThinkingForModel(model: string): void {
+    const snapshot = useChatInputStore.getState().snapshot;
+    const modelOption = snapshot.modelOptions.find((option) => option.value === model);
+    const nextThinking = this.resolveThinkingForModel(modelOption, snapshot.selectedThinkingLevel);
+    if (nextThinking !== snapshot.selectedThinkingLevel) {
+      useChatInputStore.getState().setSnapshot({ selectedThinkingLevel: nextThinking });
+    }
+  }
+}