@nextclaw/ui 0.6.10 → 0.6.12

package/src/components/chat/ChatPage.tsx

@@ -1,97 +1,20 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { ComponentProps, Dispatch, MutableRefObject, SetStateAction } from 'react';
-import type { SessionEntryView, SessionEventView } from '@/api/types';
-import {
-  useChatCapabilities,
-  useConfig,
-  useConfigMeta,
-  useDeleteSession,
-  useSessionHistory,
-  useSessions,
-  useChatRuns,
-} from '@/hooks/useConfig';
-import { useMarketplaceInstalled } from '@/hooks/useMarketplace';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import { useConfirmDialog } from '@/hooks/useConfirmDialog';
-import type { ChatModelOption } from '@/components/chat/ChatInputBar';
 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 { useChatStreamController } from '@/components/chat/useChatStreamController';
-import { buildFallbackEventsFromMessages } from '@/lib/chat-message';
-import { buildProviderModelCatalog, composeProviderModel } from '@/lib/provider-models';
-import { buildActiveRunBySessionKey, buildSessionRunStatusByKey } from '@/lib/session-run-status';
-import { t } from '@/lib/i18n';
+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';
 
-const SESSION_ROUTE_PREFIX = 'sid_';
-
-function resolveAgentIdFromSessionKey(sessionKey: string): string | null {
-  const match = /^agent:([^:]+):/i.exec(sessionKey.trim());
-  if (!match) {
-    return null;
-  }
-  const value = match[1]?.trim();
-  return value ? value : null;
-}
-
-function buildNewSessionKey(agentId: string): string {
-  const slug = Math.random().toString(36).slice(2, 8);
-  return `agent:${agentId}:ui:direct:web-${Date.now().toString(36)}${slug}`;
-}
-
-function encodeSessionRouteId(sessionKey: string): string {
-  const bytes = new TextEncoder().encode(sessionKey);
-  let binary = '';
-  for (const byte of bytes) {
-    binary += String.fromCharCode(byte);
-  }
-  const base64 = btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
-  return `${SESSION_ROUTE_PREFIX}${base64}`;
-}
-
-function decodeSessionRouteId(routeValue: string): string | null {
-  if (!routeValue.startsWith(SESSION_ROUTE_PREFIX)) {
-    return null;
-  }
-  const encoded = routeValue.slice(SESSION_ROUTE_PREFIX.length).replace(/-/g, '+').replace(/_/g, '/');
-  const padding = encoded.length % 4 === 0 ? '' : '='.repeat(4 - (encoded.length % 4));
-  try {
-    const binary = atob(encoded + padding);
-    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
-    return new TextDecoder().decode(bytes);
-  } catch {
-    return null;
-  }
-}
-
-function parseSessionKeyFromRoute(routeValue?: string): string | null {
-  if (!routeValue) {
-    return null;
-  }
-  const decodedToken = decodeSessionRouteId(routeValue);
-  if (decodedToken) {
-    return decodedToken;
-  }
-  try {
-    return decodeURIComponent(routeValue);
-  } catch {
-    return routeValue;
-  }
-}
-
-function buildSessionPath(sessionKey: string): string {
-  return `/chat/${encodeSessionRouteId(sessionKey)}`;
-}
-
-function sessionDisplayName(session: SessionEntryView): string {
-  if (session.label && session.label.trim()) {
-    return session.label.trim();
-  }
-  const chunks = session.key.split(':');
-  return chunks[chunks.length - 1] || session.key;
-}
-
 type MainPanelView = 'chat' | 'cron' | 'skills';
 
 type ChatPageProps = {
@@ -106,7 +29,6 @@ type UseSessionSyncParams = {
   setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
   setSelectedAgentId: Dispatch<SetStateAction<string>>;
   selectedSessionKeyRef: MutableRefObject<string | null>;
-  isUserScrollingRef: MutableRefObject<boolean>;
   resetStreamState: () => void;
 };
 
@@ -119,7 +41,6 @@ function useChatSessionSync(params: UseSessionSyncParams): void {
     setSelectedSessionKey,
     setSelectedAgentId,
     selectedSessionKeyRef,
-    isUserScrollingRef,
     resetStreamState
   } = params;
 
@@ -151,62 +72,21 @@ function useChatSessionSync(params: UseSessionSyncParams): void {
 
   useEffect(() => {
     selectedSessionKeyRef.current = selectedSessionKey;
-    isUserScrollingRef.current = false;
-  }, [isUserScrollingRef, selectedSessionKey, selectedSessionKeyRef]);
-}
-
-type UseThreadScrollParams = {
-  threadRef: MutableRefObject<HTMLDivElement | null>;
-  isUserScrollingRef: MutableRefObject<boolean>;
-  mergedEvents: SessionEventView[];
-  isSending: boolean;
-};
-
-function useChatThreadScroll(params: UseThreadScrollParams): { handleScroll: () => void } {
-  const { threadRef, isUserScrollingRef, mergedEvents, isSending } = params;
-
-  const isNearBottom = useCallback(() => {
-    const element = threadRef.current;
-    if (!element) {
-      return true;
-    }
-    const threshold = 50;
-    return element.scrollHeight - element.scrollTop - element.clientHeight < threshold;
-  }, [threadRef]);
-
-  const handleScroll = useCallback(() => {
-    if (isNearBottom()) {
-      isUserScrollingRef.current = false;
-    } else {
-      isUserScrollingRef.current = true;
-    }
-  }, [isNearBottom, isUserScrollingRef]);
-
-  useEffect(() => {
-    const element = threadRef.current;
-    if (!element || isUserScrollingRef.current) {
-      return;
-    }
-    element.scrollTop = element.scrollHeight;
-  }, [isSending, isUserScrollingRef, mergedEvents, threadRef]);
-
-  return { handleScroll };
+  }, [selectedSessionKey, selectedSessionKeyRef]);
 }
 
 type ChatPageLayoutProps = {
   view: MainPanelView;
-  sidebarProps: ComponentProps<typeof ChatSidebar>;
-  conversationProps: ComponentProps<typeof ChatConversationPanel>;
   confirmDialog: JSX.Element;
 };
 
-function ChatPageLayout({ view, sidebarProps, conversationProps, confirmDialog }: ChatPageLayoutProps) {
+function ChatPageLayout({ view, confirmDialog }: ChatPageLayoutProps) {
   return (
     <div className="h-full flex">
-      <ChatSidebar {...sidebarProps} />
+      <ChatSidebar />
 
       {view === 'chat' ? (
-        <ChatConversationPanel {...conversationProps} />
+        <ChatConversationPanel />
       ) : (
         <section className="flex-1 min-h-0 overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
           {view === 'cron' ? (
@@ -231,356 +111,204 @@ function ChatPageLayout({ view, sidebarProps, conversationProps, confirmDialog }
 }
 
 export function ChatPage({ view }: ChatPageProps) {
-  const [query, setQuery] = useState('');
-  const [draft, setDraft] = useState('');
-  const [selectedSessionKey, setSelectedSessionKey] = useState<string | null>(null);
-  const [selectedAgentId, setSelectedAgentId] = useState('main');
-  const [selectedModel, setSelectedModel] = useState('');
-  const [selectedSkills, setSelectedSkills] = useState<string[]>([]);
-
+  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 isUserScrollingRef = useRef(false);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
   const routeSessionKey = useMemo(
     () => parseSessionKeyFromRoute(routeSessionIdParam),
     [routeSessionIdParam]
   );
-
-  const configQuery = useConfig();
-  const configMetaQuery = useConfigMeta();
-  const isProviderStateResolved =
-    (configQuery.isFetched || configQuery.isSuccess) &&
-    (configMetaQuery.isFetched || configMetaQuery.isSuccess);
-  const sessionsQuery = useSessions({ q: query.trim() || undefined, limit: 120, activeMinutes: 0 });
-  const installedSkillsQuery = useMarketplaceInstalled('skill');
-  const chatCapabilitiesQuery = useChatCapabilities({
-    sessionKey: selectedSessionKey,
-    agentId: selectedAgentId
+  const {
+    sessionsQuery,
+    installedSkillsQuery,
+    chatCapabilitiesQuery,
+    historyQuery,
+    isProviderStateResolved,
+    modelOptions,
+    sessions,
+    skillRecords,
+    selectedSession,
+    historyMessages,
+    sessionTypeOptions,
+    defaultSessionType,
+    selectedSessionType,
+    canEditSessionType,
+    sessionTypeUnavailable,
+    sessionTypeUnavailableMessage
+  } = useChatPageData({
+    query,
+    selectedSessionKey,
+    selectedAgentId,
+    pendingSessionType,
+    setPendingSessionType: presenter.chatInputManager.setPendingSessionType,
+    setSelectedModel: presenter.chatInputManager.setSelectedModel
   });
-  const historyQuery = useSessionHistory(selectedSessionKey, 300);
-  const deleteSession = useDeleteSession();
-
-  const modelOptions = useMemo<ChatModelOption[]>(() => {
-    const providers = buildProviderModelCatalog({
-      meta: configMetaQuery.data,
-      config: configQuery.data,
-      onlyConfigured: true
-    });
-    const seen = new Set<string>();
-    const options: ChatModelOption[] = [];
-    for (const provider of providers) {
-      for (const localModel of provider.models) {
-        const value = composeProviderModel(provider.prefix, localModel);
-        if (!value || seen.has(value)) {
-          continue;
-        }
-        seen.add(value);
-        options.push({
-          value,
-          modelLabel: localModel,
-          providerLabel: provider.displayName
-        });
-      }
-    }
-    return options.sort((left, right) => {
-      const providerCompare = left.providerLabel.localeCompare(right.providerLabel);
-      if (providerCompare !== 0) {
-        return providerCompare;
-      }
-      return left.modelLabel.localeCompare(right.modelLabel);
-    });
-  }, [configMetaQuery.data, configQuery.data]);
-
-  const sessions = useMemo(() => sessionsQuery.data?.sessions ?? [], [sessionsQuery.data?.sessions]);
-  const skillRecords = useMemo(() => installedSkillsQuery.data?.records ?? [], [installedSkillsQuery.data?.records]);
-
-  const selectedSession = useMemo(
-    () => sessions.find((session) => session.key === selectedSessionKey) ?? null,
-    [selectedSessionKey, sessions]
-  );
-
-  useEffect(() => {
-    if (modelOptions.length === 0) {
-      setSelectedModel('');
-      return;
-    }
-    setSelectedModel((prev) => {
-      if (modelOptions.some((option) => option.value === prev)) {
-        return prev;
-      }
-      const sessionPreferred = selectedSession?.preferredModel?.trim();
-      if (sessionPreferred && modelOptions.some((option) => option.value === sessionPreferred)) {
-        return sessionPreferred;
-      }
-      const fallback = configQuery.data?.agents.defaults.model?.trim();
-      if (fallback && modelOptions.some((option) => option.value === fallback)) {
-        return fallback;
-      }
-      return modelOptions[0]?.value ?? '';
-    });
-  }, [configQuery.data?.agents.defaults.model, modelOptions, selectedSession?.preferredModel]);
-
-  const historyData = historyQuery.data;
-  const historyMessages = historyData?.messages ?? [];
-  const historyEvents =
-    historyData?.events && historyData.events.length > 0
-      ? historyData.events
-      : buildFallbackEventsFromMessages(historyMessages);
-  const nextOptimisticUserSeq = useMemo(
-    () => historyEvents.reduce((max, event) => (Number.isFinite(event.seq) ? Math.max(max, event.seq) : max), 0) + 1,
-    [historyEvents]
-  );
-
   const {
-    optimisticUserEvent,
-    streamingSessionEvents,
-    streamingAssistantText,
-    streamingAssistantTimestamp,
+    uiMessages,
     isSending,
     isAwaitingAssistantOutput,
-    queuedCount,
     canStopCurrentRun,
     stopDisabledReason,
     lastSendError,
-    sendMessage,
-    resumeRun,
     activeBackendRunId,
+    sendMessage,
     stopCurrentRun,
-    resetStreamState
-  } = useChatStreamController({
-    nextOptimisticUserSeq,
-    selectedSessionKeyRef,
-    setSelectedSessionKey,
-    setDraft,
-    refetchSessions: sessionsQuery.refetch,
-    refetchHistory: historyQuery.refetch
-  });
-
-  const sessionStatusRunsQuery = useChatRuns(
-    view === 'chat'
-      ? {
-          states: ['queued', 'running'],
-          limit: 200
-        }
-      : undefined
-  );
-  const activeRunBySessionKey = useMemo(
-    () => buildActiveRunBySessionKey(sessionStatusRunsQuery.data?.runs ?? []),
-    [sessionStatusRunsQuery.data?.runs]
-  );
-  const sessionRunStatusByKey = useMemo(
-    () => buildSessionRunStatusByKey(activeRunBySessionKey),
-    [activeRunBySessionKey]
+    resumeRun,
+    resetStreamState,
+    applyHistoryMessages
+  } = useChatRuntimeController(
+    {
+      selectedSessionKeyRef,
+      setSelectedSessionKey: presenter.chatSessionListManager.setSelectedSessionKey,
+      setDraft: presenter.chatInputManager.setDraft,
+      refetchSessions: sessionsQuery.refetch,
+      refetchHistory: historyQuery.refetch
+    },
+    presenter.chatController
   );
-  const activeRun = useMemo(() => {
-    if (!selectedSessionKey) {
-      return null;
-    }
-    return activeRunBySessionKey.get(selectedSessionKey) ?? null;
-  }, [activeRunBySessionKey, selectedSessionKey]);
 
+  console.log('[ChatPage] uiMessages', { uiMessages, historyMessages });
   useEffect(() => {
-    if (view !== 'chat' || !selectedSessionKey || !activeRun) {
-      return;
-    }
-    if (activeBackendRunId === activeRun.runId) {
-      return;
-    }
-    void resumeRun(activeRun);
-  }, [activeBackendRunId, activeRun, resumeRun, selectedSessionKey, view]);
-
-  const mergedEvents = useMemo(() => {
-    const bySeq = new Map<number, SessionEventView>();
-    const append = (event: SessionEventView) => {
-      if (!Number.isFinite(event.seq)) {
-        return;
-      }
-      bySeq.set(event.seq, event);
-    };
-
-    historyEvents.forEach(append);
-    if (optimisticUserEvent) {
-      append(optimisticUserEvent);
-    }
-    streamingSessionEvents.forEach(append);
+    presenter.chatStreamActionsManager.bind({
+      sendMessage,
+      stopCurrentRun,
+      resumeRun,
+      resetStreamState,
+      applyHistoryMessages
+    });
+  }, [applyHistoryMessages, presenter, resetStreamState, resumeRun, sendMessage, stopCurrentRun]);
 
-    const next = [...bySeq.values()].sort((left, right) => left.seq - right.seq);
-    if (streamingAssistantText.trim()) {
-      const maxSeq = next.reduce((max, event) => (event.seq > max ? event.seq : max), 0);
-      next.push({
-        seq: maxSeq + 1,
-        type: 'stream.assistant_delta',
-        timestamp: streamingAssistantTimestamp ?? new Date().toISOString(),
-        message: {
-          role: 'assistant',
-          content: streamingAssistantText,
-          timestamp: streamingAssistantTimestamp ?? new Date().toISOString()
-        }
-      });
-    }
-    return next;
-  }, [historyEvents, optimisticUserEvent, streamingAssistantText, streamingAssistantTimestamp, streamingSessionEvents]);
+  const { sessionRunStatusByKey } = useSessionRunStatus({
+    view,
+    selectedSessionKey,
+    activeBackendRunId,
+    isLocallyRunning: isSending || Boolean(activeBackendRunId),
+    resumeRun: presenter.chatStreamActionsManager.resumeRun
+  });
 
   useChatSessionSync({
     view,
     routeSessionKey,
     selectedSessionKey,
     selectedAgentId,
-    setSelectedSessionKey,
-    setSelectedAgentId,
+    setSelectedSessionKey: presenter.chatSessionListManager.setSelectedSessionKey,
+    setSelectedAgentId: presenter.chatSessionListManager.setSelectedAgentId,
     selectedSessionKeyRef,
-    isUserScrollingRef,
-    resetStreamState
-  });
-
-  const { handleScroll } = useChatThreadScroll({
-    threadRef,
-    isUserScrollingRef,
-    mergedEvents,
-    isSending
+    resetStreamState: presenter.chatStreamActionsManager.resetStreamState
   });
 
-  const createNewSession = useCallback(() => {
-    resetStreamState();
-    setSelectedSessionKey(null);
-    if (location.pathname !== '/chat') {
-      navigate('/chat');
-    }
-  }, [location.pathname, navigate, resetStreamState]);
-
-  const goToProviders = useCallback(() => {
-    if (location.pathname !== '/providers') {
-      navigate('/providers');
-    }
-  }, [location.pathname, navigate]);
+  useEffect(() => {
+    presenter.chatStreamActionsManager.applyHistoryMessages(historyMessages, {
+      isLoading: historyQuery.isLoading
+    });
+  }, [historyMessages, historyQuery.isLoading, presenter]);
 
-  const handleDeleteSession = useCallback(async () => {
-    if (!selectedSessionKey) {
-      return;
-    }
-    const confirmed = await confirm({
-      title: t('chatDeleteSessionConfirm'),
-      variant: 'destructive',
-      confirmLabel: t('delete')
+  useEffect(() => {
+    presenter.chatUiManager.syncState({
+      pathname: location.pathname
     });
-    if (!confirmed) {
-      return;
-    }
-    deleteSession.mutate(
-      { key: selectedSessionKey },
-      {
-        onSuccess: async () => {
-          resetStreamState();
-          setSelectedSessionKey(null);
-          navigate('/chat', { replace: true });
-          await sessionsQuery.refetch();
-        }
-      }
-    );
-  }, [confirm, deleteSession, navigate, resetStreamState, selectedSessionKey, sessionsQuery]);
+    presenter.chatUiManager.bindActions({
+      navigate,
+      confirm
+    });
+  }, [confirm, location.pathname, navigate, presenter]);
+  const currentSessionDisplayName = selectedSession ? sessionDisplayName(selectedSession) : undefined;
 
-  const handleSend = useCallback(async () => {
-    const message = draft.trim();
-    if (!message) {
-      return;
-    }
-    const requestedSkills = selectedSkills;
+  useEffect(() => {
+    presenter.chatThreadManager.bindActions({
+      refetchSessions: sessionsQuery.refetch
+    });
+  }, [
+    presenter,
+    sessionsQuery.refetch,
+  ]);
 
-    const sessionKey = selectedSessionKey ?? buildNewSessionKey(selectedAgentId);
-    if (!selectedSessionKey) {
-      navigate(buildSessionPath(sessionKey), { replace: true });
-    }
-    setDraft('');
-    setSelectedSkills([]);
-    await sendMessage({
-      message,
-      sessionKey,
-      agentId: selectedAgentId,
-      model: selectedModel || undefined,
+  useEffect(() => {
+    presenter.chatInputManager.syncSnapshot({
+      isProviderStateResolved,
+      defaultSessionType,
+      canStopGeneration: canStopCurrentRun,
+      stopDisabledReason,
       stopSupported: chatCapabilitiesQuery.data?.stopSupported ?? false,
       stopReason: chatCapabilitiesQuery.data?.stopReason,
-      requestedSkills,
-      restoreDraftOnError: true
+      sendError: lastSendError,
+      isSending,
+      modelOptions,
+      sessionTypeOptions,
+      selectedSessionType,
+      canEditSessionType,
+      sessionTypeUnavailable,
+      skillRecords,
+      isSkillsLoading: installedSkillsQuery.isLoading
+    });
+    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,
-    draft,
-    selectedAgentId,
-    selectedModel,
-    navigate,
-    selectedSessionKey,
-    selectedSkills,
-    sendMessage
-  ]);
-
-  const currentSessionDisplayName = selectedSession ? sessionDisplayName(selectedSession) : undefined;
-  const handleSelectSession = useCallback((nextSessionKey: string) => {
-    const target = buildSessionPath(nextSessionKey);
-    if (location.pathname !== target) {
-      navigate(target);
-    }
-  }, [location.pathname, navigate]);
-
-  const sidebarProps: ComponentProps<typeof ChatSidebar> = {
-    sessions,
-    sessionRunStatusByKey,
-    selectedSessionKey,
-    onSelectSession: handleSelectSession,
-    onCreateSession: createNewSession,
-    sessionTitle: sessionDisplayName,
-    isLoading: sessionsQuery.isLoading,
-    query,
-    onQueryChange: setQuery
-  };
-
-  const conversationProps: ComponentProps<typeof ChatConversationPanel> = {
+    defaultSessionType,
+    historyQuery.isLoading,
+    installedSkillsQuery.isLoading,
+    isAwaitingAssistantOutput,
     isProviderStateResolved,
+    isSending,
+    lastSendError,
+    uiMessages,
     modelOptions,
-    selectedModel,
-    onSelectedModelChange: setSelectedModel,
-    onGoToProviders: goToProviders,
-    skillRecords,
-    isSkillsLoading: installedSkillsQuery.isLoading,
-    selectedSkills,
-    onSelectedSkillsChange: setSelectedSkills,
+    presenter,
+    query,
+    selectedSession,
     selectedSessionKey,
-    sessionDisplayName: currentSessionDisplayName,
-    canDeleteSession: Boolean(selectedSession),
-    isDeletePending: deleteSession.isPending,
-    onDeleteSession: () => {
-      void handleDeleteSession();
-    },
-    onCreateSession: createNewSession,
-    threadRef,
-    onThreadScroll: handleScroll,
-    isHistoryLoading: historyQuery.isLoading,
-    mergedEvents,
-    isSending,
-    isAwaitingAssistantOutput,
-    streamingAssistantText,
-    draft,
-    onDraftChange: setDraft,
-    onSend: handleSend,
-    onStop: () => {
-      void stopCurrentRun();
-    },
-    canStopGeneration: canStopCurrentRun,
+    selectedAgentId,
+    selectedSessionType,
+    sessionRunStatusByKey,
+    sessionTypeOptions,
+    sessionTypeUnavailable,
+    sessionTypeUnavailableMessage,
+    sessions,
+    sessionsQuery.isLoading,
     stopDisabledReason,
-    sendError: lastSendError,
-    queuedCount
-  };
+    threadRef,
+    skillRecords
+  ]);
 
   return (
-    <ChatPageLayout
-      view={view}
-      sidebarProps={sidebarProps}
-      conversationProps={conversationProps}
-      confirmDialog={<ConfirmDialog />}
-    />
+    <ChatPresenterProvider presenter={presenter}>
+      <ChatPageLayout view={view} confirmDialog={<ConfirmDialog />} />
+    </ChatPresenterProvider>
   );
 }