@nextclaw/ui 0.14.1 → 0.14.3

package/src/features/chat/features/conversation/components/__tests__/session-conversation-input.streaming.test.tsx

@@ -0,0 +1,199 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type MutableRefObject,
+} from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import {
+  createChatComposerTextNode,
+  type ChatComposerNode,
+} from '@nextclaw/agent-chat-ui';
+
+import { I18nProvider } from '@/app/components/i18n-provider';
+import { ChatPresenterProvider, type ChatPresenterLike } from '@/features/chat/components/providers/chat-presenter.provider';
+import {
+  SessionConversationInput,
+  type SessionConversationInputController,
+} from '@/features/chat/features/conversation/components/session-conversation-input';
+import type {
+  SessionConversationInputActions,
+  SessionConversationInputPatch,
+  SessionConversationInputSnapshot,
+} from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
+
+vi.mock('@/app/hooks/use-viewport-layout', () => ({
+  useViewportLayout: () => ({ isDesktop: true, isMobile: false }),
+}));
+
+vi.mock('@/features/panel-apps', () => ({
+  usePanelApps: () => ({
+    data: { entries: [] },
+    isFetching: false,
+    isLoading: false,
+  }),
+}));
+
+vi.mock('@/features/chat/features/input/hooks/use-chat-model-favorites', () => ({
+  useChatModelFavorites: () => ({
+    favoriteModelValues: [],
+    isLoading: false,
+    setModelFavorite: vi.fn(),
+  }),
+}));
+
+vi.mock('@/shared/lib/api', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...(actual as object),
+    updateNcpSession: vi.fn(),
+  };
+});
+
+type StreamingInputControl = {
+  bumpStream: () => void;
+};
+
+const presenter = {
+  chatThreadManager: {
+    openSideChatDraft: vi.fn(),
+  },
+  chatUiManager: {
+    goToProviders: vi.fn(),
+  },
+} as unknown as ChatPresenterLike;
+
+const controller: SessionConversationInputController = {
+  canStopGeneration: true,
+  isSending: true,
+  send: vi.fn(),
+  sendDisabled: true,
+  stop: vi.fn(),
+  stopDisabled: false,
+};
+
+function createStreamingInputSnapshot(
+  nodes: readonly ChatComposerNode[],
+): SessionConversationInputSnapshot {
+  return {
+    attachments: [],
+    composerFocusRequestId: 0,
+    nodes,
+    pendingProjectRoot: null,
+    pendingSessionType: 'default',
+    selectedModel: undefined,
+    selectedSessionType: 'default',
+    selectedSkills: [],
+    selectedThinkingLevel: null,
+    sendError: null,
+    skillRecords: [],
+    text: nodes
+      .map((node) => (node.type === 'text' ? node.text : ''))
+      .join(''),
+  };
+}
+
+function StreamingSessionConversationInputHarness({
+  controlRef,
+}: {
+  controlRef: MutableRefObject<StreamingInputControl | null>;
+}) {
+  const [nodes, setNodes] = useState<readonly ChatComposerNode[]>([
+    createChatComposerTextNode(''),
+  ]);
+  const [streamChunk, setStreamChunk] = useState(0);
+  const bumpStream = useCallback(() => setStreamChunk((chunk) => chunk + 1), []);
+
+  useEffect(() => {
+    controlRef.current = { bumpStream };
+    return () => {
+      controlRef.current = null;
+    };
+  }, [bumpStream, controlRef]);
+
+  const inputSnapshot = useMemo(() => createStreamingInputSnapshot(nodes), [nodes]);
+  const inputActions: SessionConversationInputActions = useMemo(() => ({
+    addAttachments: vi.fn(() => []),
+    applyPromptSuggestion: vi.fn(),
+    consumeComposerFocusRequest: vi.fn(),
+    removeAttachment: vi.fn(),
+    requestComposerFocusAtEnd: vi.fn(),
+    resetComposer: vi.fn(),
+    restoreComposer: vi.fn(),
+    setAttachments: vi.fn(),
+    setPendingProjectRoot: vi.fn(),
+    setPendingSessionType: vi.fn(),
+    setSelectedModel: vi.fn(),
+    setSelectedSkills: vi.fn(),
+    setSelectedThinkingLevel: vi.fn(),
+    setSendError: vi.fn(),
+    syncComposer: vi.fn(),
+    update: (patch: SessionConversationInputPatch) => {
+      setNodes((currentNodes) => {
+        const resolvedPatch = typeof patch === 'function'
+          ? patch(createStreamingInputSnapshot(currentNodes))
+          : patch;
+        return resolvedPatch.nodes ?? currentNodes;
+      });
+    },
+  }), []);
+  const inputQuery = useMemo(() => ({
+    defaultModel: undefined,
+    defaultProjectRoot: null,
+    fallbackPreferredModel: undefined,
+    fallbackPreferredThinking: undefined,
+    isProviderStateResolved: true,
+    isSkillsLoading: false,
+    modelOptions: [],
+    selectedSession: null,
+    selectedSessionKey: null,
+    sessionTypeState: {
+      canEditSessionType: true,
+      defaultSessionType: 'default',
+      selectedSessionType: 'default',
+      selectedSessionTypeOption: null,
+      sessionTypeOptions: [],
+      sessionTypeUnavailable: false,
+      sessionTypeUnavailableMessage: null,
+    },
+    skillRecords: [],
+  }), []);
+
+  return (
+    <I18nProvider>
+      <ChatPresenterProvider presenter={presenter}>
+        <div data-testid="stream-chunk">{streamChunk}</div>
+        <SessionConversationInput
+          contextWindow={null}
+          controller={controller}
+          inputActions={inputActions}
+          inputQuery={inputQuery}
+          inputSnapshot={inputSnapshot}
+        />
+      </ChatPresenterProvider>
+    </I18nProvider>
+  );
+}
+
+describe('SessionConversationInput streaming stability', () => {
+  it('keeps IME composition stable while simulated streamed output rerenders the owner', async () => {
+    const controlRef: MutableRefObject<StreamingInputControl | null> = { current: null };
+    render(<StreamingSessionConversationInputHarness controlRef={controlRef} />);
+
+    const textbox = screen.getByRole('textbox');
+    fireEvent.focus(textbox);
+    fireEvent.compositionStart(textbox);
+
+    act(() => {
+      controlRef.current?.bumpStream();
+      controlRef.current?.bumpStream();
+    });
+    expect(screen.getByTestId('stream-chunk').textContent).toBe('2');
+
+    fireEvent.compositionEnd(textbox, { data: '你' });
+
+    await waitFor(() => expect(textbox.textContent).toBe('你'));
+  });
+});

package/src/features/chat/features/conversation/components/session-conversation-area.tsx

@@ -0,0 +1,308 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { useAppPresenter } from '@/app/components/app-presenter-provider';
+import { ChatConversationContent } from '@/features/chat/components/conversation/chat-conversation-content';
+import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
+import {
+  isNcpAgentStartupUnavailableErrorMessage,
+  useNcpSessionConversation,
+} from '@/features/chat/features/ncp/hooks/use-ncp-session-conversation';
+import { isNcpChatRuntimeBlocked, resolveNcpChatSendErrorMessage } from '@/features/chat/features/runtime/utils/ncp-chat-runtime-availability.utils';
+import { buildChatContextWindowIndicator } from '@/features/chat/features/session/utils/chat-context-window-indicator.utils';
+import { readNcpContextWindowValue } from '@/features/chat/features/session/utils/ncp-session-context-metadata.utils';
+import { ChatConversationWelcome } from '@/features/chat/features/welcome/components/chat-conversation-welcome';
+import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
+import { useSystemStatus } from '@/features/system-status';
+import { t } from '@/shared/lib/i18n';
+
+import {
+  useSessionConversationController,
+  type SessionConversationMaterializationContext,
+} from '@/features/chat/features/conversation/hooks/use-session-conversation-controller';
+import { useSessionConversationInputQuery } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-query';
+import { useSessionConversationInputState } from '@/features/chat/features/conversation/hooks/use-session-conversation-input-state';
+import {
+  SessionConversationInput,
+  type SessionConversationInputController,
+} from './session-conversation-input';
+
+type SessionConversationAreaProps = {
+  readonly consumeDraftIntent?: boolean;
+  readonly materializationContext?: SessionConversationMaterializationContext | null;
+  readonly onSessionMaterialized?: (sessionKey: string) => void;
+  readonly sessionKey: string | null;
+  readonly showWelcomeForDraft?: boolean;
+};
+
+function useSessionConversationDraftIntent(params: {
+  readonly consumeDraftIntent: boolean;
+  readonly applyPromptSuggestion: (prompt: string) => void;
+}) {
+  const { applyPromptSuggestion, consumeDraftIntent } = params;
+  const appPresenter = useAppPresenter();
+  const presenter = usePresenter();
+  useEffect(() => {
+    if (!consumeDraftIntent) {
+      return undefined;
+    }
+    const applyIntent = (intent: { id: number; prompt: string }) => {
+      presenter.chatSessionListManager.createSession();
+      presenter.chatSessionListManager.setSelectedAgentId('main');
+      applyPromptSuggestion(intent.prompt);
+      appPresenter.chatDraftIntentManager.markConsumed(intent.id);
+    };
+    const unsubscribe = appPresenter.chatDraftIntentManager.subscribe(applyIntent);
+    const pendingIntent = appPresenter.chatDraftIntentManager.consumePending();
+    if (pendingIntent) {
+      applyIntent(pendingIntent);
+    }
+    return unsubscribe;
+  }, [
+    appPresenter,
+    applyPromptSuggestion,
+    consumeDraftIntent,
+    presenter,
+  ]);
+}
+
+type ChatDraftRouteState = {
+  readonly sessionType?: unknown;
+  readonly projectRoot?: unknown;
+};
+
+function readChatDraftRouteState(value: unknown): ChatDraftRouteState | null {
+  if (!value || typeof value !== 'object') {
+    return null;
+  }
+  const draft = (value as { chatDraft?: unknown }).chatDraft;
+  if (!draft || typeof draft !== 'object') {
+    return null;
+  }
+  return draft as ChatDraftRouteState;
+}
+
+function useSessionConversationDraftRouteState(params: {
+  readonly sessionKey: string | null;
+  readonly setPendingProjectRoot: (projectRoot: string | null) => void;
+  readonly setPendingSessionType: (sessionType: string) => void;
+}) {
+  const {
+    sessionKey,
+    setPendingProjectRoot,
+    setPendingSessionType,
+  } = params;
+  const location = useLocation();
+  const appliedRouteStateKeyRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (sessionKey) {
+      return;
+    }
+    const draftState = readChatDraftRouteState(location.state);
+    if (!draftState) {
+      return;
+    }
+    const signature = [
+      location.key,
+      typeof draftState.sessionType === 'string' ? draftState.sessionType : '',
+      typeof draftState.projectRoot === 'string' ? draftState.projectRoot : '',
+    ].join(':');
+    if (appliedRouteStateKeyRef.current === signature) {
+      return;
+    }
+    appliedRouteStateKeyRef.current = signature;
+    if (typeof draftState.sessionType === 'string' && draftState.sessionType.trim()) {
+      setPendingSessionType(draftState.sessionType);
+    }
+    setPendingProjectRoot(
+      typeof draftState.projectRoot === 'string' && draftState.projectRoot.trim()
+        ? draftState.projectRoot
+        : null,
+    );
+  }, [
+    location.key,
+    location.state,
+    sessionKey,
+    setPendingProjectRoot,
+    setPendingSessionType,
+  ]);
+}
+
+function SessionConversationAlerts({
+  inputQuery,
+}: {
+  readonly inputQuery: ReturnType<typeof useSessionConversationInputQuery>;
+}) {
+  const presenter = usePresenter();
+  const shouldShowProviderHint =
+    inputQuery.isProviderStateResolved && inputQuery.modelOptions.length === 0;
+  const sessionTypeUnavailableMessage =
+    inputQuery.sessionTypeState.sessionTypeUnavailableMessage?.trim() || null;
+
+  return (
+    <>
+      {shouldShowProviderHint ? (
+        <div className="px-4 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0 sm:px-5">
+          <span className="text-xs text-amber-800">
+            {t('chatModelNoOptions')}
+          </span>
+          <button
+            type="button"
+            onClick={presenter.chatUiManager.goToProviders}
+            className="text-xs font-semibold text-amber-900 underline-offset-2 hover:underline"
+          >
+            {t('chatGoConfigureProvider')}
+          </button>
+        </div>
+      ) : null}
+      {inputQuery.sessionTypeState.sessionTypeUnavailable && sessionTypeUnavailableMessage ? (
+        <div className="px-4 py-2.5 border-b border-amber-200/70 bg-amber-50/70 shrink-0 sm:px-5">
+          <span className="text-xs text-amber-800">
+            {sessionTypeUnavailableMessage}
+          </span>
+        </div>
+      ) : null}
+    </>
+  );
+}
+
+export function SessionConversationArea(props: SessionConversationAreaProps) {
+  const {
+    consumeDraftIntent = false,
+    materializationContext = null,
+    onSessionMaterialized,
+    sessionKey,
+    showWelcomeForDraft = true,
+  } = props;
+  const systemStatus = useSystemStatus();
+  const selectedAgentId = useChatSessionListStore(
+    (state) => state.snapshot.selectedAgentId,
+  );
+  const agent = useNcpSessionConversation(sessionKey ?? undefined);
+  const {
+    inputActions,
+    inputSnapshot,
+  } = useSessionConversationInputState();
+  const inputQuery = useSessionConversationInputQuery({
+    sessionKey,
+    inputSnapshot,
+    setPendingSessionType: inputActions.setPendingSessionType,
+  });
+  useSessionConversationDraftRouteState({
+    sessionKey,
+    setPendingProjectRoot: inputActions.setPendingProjectRoot,
+    setPendingSessionType: inputActions.setPendingSessionType,
+  });
+  const isRuntimeBlocked = isNcpChatRuntimeBlocked(systemStatus);
+  const currentSessionRunning = agent.isRunning || inputQuery.selectedSession?.status === 'running';
+  const rawLastSendError =
+    agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
+  const filteredLastSendError =
+    systemStatus.phase === 'ready' &&
+    isNcpAgentStartupUnavailableErrorMessage(rawLastSendError)
+      ? null
+      : rawLastSendError;
+  const lastSendError =
+    isRuntimeBlocked
+      ? null
+      : systemStatus.phase === 'ready'
+      ? filteredLastSendError
+      : resolveNcpChatSendErrorMessage({
+          message: filteredLastSendError,
+          status: systemStatus,
+        });
+  const controllerAgent = useMemo(() => ({
+    ...agent,
+    isRunning: currentSessionRunning,
+    isSending: agent.isSending || currentSessionRunning,
+  }), [agent, currentSessionRunning]);
+  const controller = useSessionConversationController({
+    agent: controllerAgent,
+    inputSnapshot,
+    inputQuery,
+    isRuntimeBlocked,
+    materializationContext,
+    selectedAgentId,
+    sessionKey,
+    onSessionMaterialized,
+    resetComposer: inputActions.resetComposer,
+    restoreComposer: inputActions.restoreComposer,
+    setSendError: inputActions.setSendError,
+  });
+  const controllerRef = useRef(controller);
+  useEffect(() => {
+    controllerRef.current = controller;
+  }, [controller]);
+  const inputController = useMemo<SessionConversationInputController>(() => ({
+    canStopGeneration: controller.canStopGeneration,
+    isSending: controller.isSending,
+    send: () => controllerRef.current.send(),
+    sendDisabled: controller.sendDisabled,
+    stop: () => controllerRef.current.stop(),
+    stopDisabled: controller.stopDisabled,
+  }), [
+    controller.canStopGeneration,
+    controller.isSending,
+    controller.sendDisabled,
+    controller.stopDisabled,
+  ]);
+  const contextWindow = useMemo(
+    () => buildChatContextWindowIndicator(readNcpContextWindowValue(agent.snapshot.contextWindow)),
+    [agent.snapshot.contextWindow],
+  );
+  const displayInputSnapshot = useMemo(() => ({
+    ...inputSnapshot,
+    sendError: lastSendError ?? inputSnapshot.sendError,
+  }), [inputSnapshot, lastSendError]);
+  useSessionConversationDraftIntent({
+    consumeDraftIntent,
+    applyPromptSuggestion: inputActions.applyPromptSuggestion,
+  });
+  const renderInput = useCallback((surface: 'default' | 'embedded') => (
+    <SessionConversationInput
+      contextWindow={contextWindow}
+      controller={inputController}
+      inputActions={inputActions}
+      inputQuery={inputQuery}
+      inputSnapshot={displayInputSnapshot}
+      surface={surface}
+    />
+  ), [
+    contextWindow,
+    displayInputSnapshot,
+    inputController,
+    inputActions,
+    inputQuery,
+  ]);
+  const showWelcome =
+    showWelcomeForDraft &&
+    !sessionKey &&
+    agent.visibleMessages.length === 0 &&
+    !agent.isHydrating;
+
+  return (
+    <>
+      <SessionConversationAlerts inputQuery={inputQuery} />
+      <ChatConversationContent
+        isAwaitingAssistantOutput={controller.isSending && currentSessionRunning}
+        isHistoryLoading={agent.isHydrating}
+        isSending={controller.isSending}
+        messages={agent.visibleMessages}
+        sessionKey={sessionKey}
+        showWelcome={showWelcome}
+        welcomeSlot={
+          <ChatConversationWelcome
+            inputSlot={renderInput('embedded')}
+            pendingProjectRoot={inputSnapshot.pendingProjectRoot}
+            pendingSessionType={inputSnapshot.pendingSessionType}
+            selectedSessionTypeValue={inputSnapshot.selectedSessionType}
+            onSelectProjectRoot={inputActions.setPendingProjectRoot}
+            onSelectPrompt={inputActions.applyPromptSuggestion}
+            onSelectSessionType={inputActions.setPendingSessionType}
+          />
+        }
+      />
+      {showWelcome ? null : renderInput('default')}
+    </>
+  );
+}