@nextclaw/ui 0.7.0 → 0.9.0

package/src/components/chat/chat-session-preference-sync.ts

@@ -0,0 +1,75 @@
+import type { SessionPatchUpdate, ThinkingLevel } from '@/api/types';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+
+type QueuedSessionPreferenceSync = {
+  sessionKey: string;
+  patch: SessionPatchUpdate;
+};
+
+function normalizeOptionalModel(value: string): string | null {
+  const normalized = value.trim();
+  return normalized.length > 0 ? normalized : null;
+}
+
+function normalizeOptionalThinking(value: ThinkingLevel | null): ThinkingLevel | null {
+  return value ?? null;
+}
+
+export class ChatSessionPreferenceSync {
+  private inFlight: Promise<void> | null = null;
+  private queued: QueuedSessionPreferenceSync | null = null;
+
+  constructor(
+    private readonly updateSession: (
+      sessionKey: string,
+      patch: SessionPatchUpdate
+    ) => Promise<unknown>
+  ) {}
+
+  syncSelectedSessionPreferences = (): void => {
+    const inputSnapshot = useChatInputStore.getState().snapshot;
+    const sessionSnapshot = useChatSessionListStore.getState().snapshot;
+    const sessionKey = sessionSnapshot.selectedSessionKey;
+    if (!sessionKey) {
+      return;
+    }
+
+    this.enqueue({
+      sessionKey,
+      patch: {
+        preferredModel: normalizeOptionalModel(inputSnapshot.selectedModel),
+        preferredThinking: normalizeOptionalThinking(inputSnapshot.selectedThinkingLevel)
+      }
+    });
+  };
+
+  private enqueue(next: QueuedSessionPreferenceSync): void {
+    this.queued = next;
+    if (this.inFlight) {
+      return;
+    }
+    this.startFlush();
+  }
+
+  private startFlush(): void {
+    this.inFlight = this.flush()
+      .catch((error) => {
+        console.error(`Failed to sync chat session preferences: ${String(error)}`);
+      })
+      .finally(() => {
+        this.inFlight = null;
+        if (this.queued) {
+          this.startFlush();
+        }
+      });
+  }
+
+  private async flush(): Promise<void> {
+    while (this.queued) {
+      const current = this.queued;
+      this.queued = null;
+      await this.updateSession(current.sessionKey, current.patch);
+    }
+  }
+}

package/src/components/chat/containers/chat-input-bar.container.tsx

@@ -5,7 +5,6 @@ import {
   buildModelStateHint,
   buildModelToolbarSelect,
   buildSelectedSkillItems,
-  buildSessionTypeToolbarSelect,
   buildSkillPickerModel,
   buildThinkingToolbarSelect,
   resolveSlashQuery,
@@ -136,16 +135,6 @@ export function ChatInputBarContainer() {
     canStopGeneration: snapshot.canStopGeneration
   });
 
-  const selectedSessionTypeOption =
-    snapshot.sessionTypeOptions.find((option) => option.value === snapshot.selectedSessionType) ??
-    (snapshot.selectedSessionType
-      ? { value: snapshot.selectedSessionType, label: snapshot.selectedSessionType }
-      : null);
-  const shouldShowSessionTypeSelector =
-    snapshot.canEditSessionType &&
-    (snapshot.sessionTypeOptions.length > 1 ||
-      Boolean(snapshot.selectedSessionType && snapshot.selectedSessionType !== 'native'));
-
   const selectedModelOption = modelRecords.find((option) => option.value === snapshot.selectedModel);
   const selectedModelThinkingCapability = selectedModelOption?.thinkingCapability;
   const thinkingSupportedLevels = selectedModelThinkingCapability?.supported ?? [];
@@ -156,17 +145,6 @@ export function ChatInputBarContainer() {
       : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
 
   const toolbarSelects = [
-    buildSessionTypeToolbarSelect({
-      selectedSessionType: snapshot.selectedSessionType,
-      selectedSessionTypeOption,
-      sessionTypeOptions: snapshot.sessionTypeOptions,
-      onValueChange: presenter.chatInputManager.selectSessionType,
-      canEditSessionType: snapshot.canEditSessionType,
-      shouldShow: shouldShowSessionTypeSelector,
-      texts: {
-        sessionTypePlaceholder: t('chatSessionTypeLabel')
-      }
-    }),
     buildModelToolbarSelect({
       modelOptions: modelRecords,
       selectedModel: snapshot.selectedModel,

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

@@ -1,9 +1,12 @@
-import { useMemo } from 'react';
-import { type UiMessage } from '@nextclaw/agent-chat';
-import { ChatMessageList } from '@nextclaw/agent-chat-ui';
-import { adaptChatMessages, type ChatMessageSource } from '@/components/chat/adapters/chat-message.adapter';
-import { useI18n } from '@/components/providers/I18nProvider';
-import { formatDateTime, t } from '@/lib/i18n';
+import { useMemo } from "react";
+import { type UiMessage } from "@nextclaw/agent-chat";
+import { ChatMessageList } from "@nextclaw/agent-chat-ui";
+import {
+  adaptChatMessages,
+  type ChatMessageSource,
+} from "@/components/chat/adapters/chat-message.adapter";
+import { useI18n } from "@/components/providers/I18nProvider";
+import { formatDateTime, t } from "@/lib/i18n";
 
 type ChatMessageListContainerProps = {
   uiMessages: UiMessage[];
@@ -20,11 +23,11 @@ export function ChatMessageListContainer(props: ChatMessageListContainerProps) {
         role: message.role,
         meta: {
           timestamp: message.meta?.timestamp,
-          status: message.meta?.status
+          status: message.meta?.status,
         },
-        parts: message.parts as unknown as ChatMessageSource['parts']
+        parts: message.parts as unknown as ChatMessageSource["parts"],
       })),
-    [props.uiMessages]
+    [props.uiMessages],
   );
 
   const messages = useMemo(
@@ -34,33 +37,38 @@ export function ChatMessageListContainer(props: ChatMessageListContainerProps) {
         formatTimestamp: (value) => formatDateTime(value, language),
         texts: {
           roleLabels: {
-            user: t('chatRoleUser'),
-            assistant: t('chatRoleAssistant'),
-            tool: t('chatRoleTool'),
-            system: t('chatRoleSystem'),
-            fallback: t('chatRoleMessage')
+            user: t("chatRoleUser"),
+            assistant: t("chatRoleAssistant"),
+            tool: t("chatRoleTool"),
+            system: t("chatRoleSystem"),
+            fallback: t("chatRoleMessage"),
           },
-          reasoningLabel: t('chatReasoning'),
-          toolCallLabel: t('chatToolCall'),
-          toolResultLabel: t('chatToolResult'),
-          toolNoOutputLabel: t('chatToolNoOutput'),
-          toolOutputLabel: t('chatToolOutput'),
-          unknownPartLabel: t('chatUnknownPart')
-        }
+          reasoningLabel: t("chatReasoning"),
+          toolCallLabel: t("chatToolCall"),
+          toolResultLabel: t("chatToolResult"),
+          toolNoOutputLabel: t("chatToolNoOutput"),
+          toolOutputLabel: t("chatToolOutput"),
+          unknownPartLabel: t("chatUnknownPart"),
+        },
       }),
-    [language, sourceMessages]
+    [language, sourceMessages],
   );
 
   return (
     <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'),
-        copiedCodeLabel: t('chatCodeCopied'),
-        typingLabel: t('chatTyping')
+        copyCodeLabel: t("chatCodeCopy"),
+        copiedCodeLabel: t("chatCodeCopied"),
+        typingLabel: t("chatTyping"),
       }}
     />
   );

package/src/components/chat/legacy/LegacyChatPage.tsx

@@ -0,0 +1,252 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { useConfirmDialog } from '@/hooks/useConfirmDialog';
+import { useSessionRunStatus } from '@/components/chat/chat-page-runtime';
+import { useChatPageData, 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 { ChatPresenterProvider } from '@/components/chat/presenter/chat-presenter-context';
+import { ChatPresenter } from '@/components/chat/presenter/chat.presenter';
+import { useChatRuntimeController } from '@/components/chat/useChatRuntimeController';
+import { resolveSessionTypeLabel } from '@/components/chat/useChatSessionTypeState';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+
+export function LegacyChatPage({ 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 modelHydratedSessionKeyRef = useRef<string | null>(null);
+  const thinkingHydratedSessionKeyRef = useRef<string | null>(null);
+  const routeSessionKey = useMemo(
+    () => parseSessionKeyFromRoute(routeSessionIdParam),
+    [routeSessionIdParam]
+  );
+  const {
+    sessionsQuery,
+    installedSkillsQuery,
+    chatCapabilitiesQuery,
+    historyQuery,
+    isProviderStateResolved,
+    modelOptions,
+    sessions,
+    skillRecords,
+    selectedSession,
+    hydratedSessionModel,
+    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
+  );
+
+  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,
+    resolveAgentIdFromSessionKey
+  });
+
+  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;
+  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 shouldHydrateThinkingFromHistory =
+      !isSending &&
+      !isAwaitingAssistantOutput &&
+      !historyQuery.isLoading &&
+      isProviderStateResolved &&
+      modelOptions.length > 0 &&
+      selectedSessionKey !== thinkingHydratedSessionKeyRef.current;
+
+    presenter.chatInputManager.syncSnapshot({
+      isProviderStateResolved,
+      defaultSessionType,
+      canStopGeneration: canStopCurrentRun,
+      stopDisabledReason,
+      stopSupported: chatCapabilitiesQuery.data?.stopSupported ?? false,
+      stopReason: chatCapabilitiesQuery.data?.stopReason,
+      sendError: lastSendError,
+      isSending,
+      modelOptions,
+      ...(shouldHydrateModelFromSession ? { selectedModel: hydratedSessionModel } : {}),
+      sessionTypeOptions,
+      selectedSessionType,
+      ...(shouldHydrateThinkingFromHistory ? { selectedThinkingLevel: selectedSessionThinkingLevel } : {}),
+      canEditSessionType,
+      sessionTypeUnavailable,
+      skillRecords,
+      isSkillsLoading: installedSkillsQuery.isLoading
+    });
+    if (shouldHydrateModelFromSession) {
+      modelHydratedSessionKeyRef.current = selectedSessionKey;
+    }
+    if (shouldHydrateThinkingFromHistory) {
+      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: historyQuery.isLoading,
+      uiMessages,
+      isSending,
+      isAwaitingAssistantOutput
+    });
+  }, [
+    activeBackendRunId,
+    canEditSessionType,
+    canStopCurrentRun,
+    currentSessionDisplayName,
+    currentSessionTypeLabel,
+    chatCapabilitiesQuery.data?.stopReason,
+    chatCapabilitiesQuery.data?.stopSupported,
+    defaultSessionType,
+    historyQuery.isLoading,
+    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/managers/chat-input.manager.ts

@@ -5,12 +5,15 @@ import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import { normalizeSessionType } from '@/components/chat/useChatSessionTypeState';
 import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
+import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
 import type { SetStateAction } from 'react';
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
 import type { ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 
 export class ChatInputManager {
+  private readonly sessionPreferenceSync = new ChatSessionPreferenceSync(updateSession);
+
   constructor(
     private uiManager: ChatUiManager,
     private streamActionsManager: ChatStreamActionsManager
@@ -139,10 +142,12 @@ export class ChatInputManager {
 
   selectModel = (value: string) => {
     this.setSelectedModel(value);
+    this.sessionPreferenceSync.syncSelectedSessionPreferences();
   };
 
   selectThinkingLevel = (value: ThinkingLevel) => {
     this.setSelectedThinkingLevel(value);
+    this.sessionPreferenceSync.syncSelectedSessionPreferences();
   };
 
   selectSkills = (next: string[]) => {

package/src/components/chat/managers/chat-session-list.manager.test.ts

@@ -0,0 +1,39 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ChatSessionListManager } from '@/components/chat/managers/chat-session-list.manager';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+
+describe('ChatSessionListManager', () => {
+  beforeEach(() => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        defaultSessionType: 'native',
+        pendingSessionType: 'native'
+      }
+    });
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: 'session-1'
+      }
+    });
+  });
+
+  it('applies the requested session type when creating a session', () => {
+    const uiManager = {
+      goToChatRoot: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+    const streamActionsManager = {
+      resetStreamState: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
+
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    manager.createSession('codex');
+
+    expect(streamActionsManager.resetStreamState).toHaveBeenCalledTimes(1);
+    expect(uiManager.goToChatRoot).toHaveBeenCalledTimes(1);
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
+    expect(useChatInputStore.getState().snapshot.pendingSessionType).toBe('codex');
+  });
+});

package/src/components/chat/managers/chat-session-list.manager.ts

@@ -53,11 +53,17 @@ export class ChatSessionListManager {
     useChatSessionListStore.getState().setSnapshot({ selectedSessionKey: value });
   };
 
-  createSession = () => {
-    const defaultSessionType = useChatInputStore.getState().snapshot.defaultSessionType || 'native';
+  createSession = (sessionType?: string) => {
+    const { snapshot } = useChatInputStore.getState();
+    const { defaultSessionType: configuredDefaultSessionType } = snapshot;
+    const defaultSessionType = configuredDefaultSessionType || 'native';
+    const nextSessionType =
+      typeof sessionType === 'string' && sessionType.trim().length > 0
+        ? sessionType.trim()
+        : defaultSessionType;
     this.streamActionsManager.resetStreamState();
     this.setSelectedSessionKey(null);
-    useChatInputStore.getState().setSnapshot({ pendingSessionType: defaultSessionType });
+    useChatInputStore.getState().setSnapshot({ pendingSessionType: nextSessionType });
     this.uiManager.goToChatRoot();
   };