'use client'; import { useEffect, useCallback } from 'react'; import { useSearchParams } from 'next/navigation'; import { useQuery } from '@tanstack/react-query'; import { Box, Flex, IconButton } from '@chakra-ui/react'; import { ChatHeader } from './_components/ChatHeader'; import { ChatConfig } from './_components/ChatConfig'; import { ChatMessages } from './_components/ChatMessages'; import { ErrorBoundary } from './_components/ErrorBoundary'; import { ChatInput } from './_components/ChatInput'; import { SignInModal } from './_components/SignInModal'; import { ConversationSidebar } from './_components/ConversationSidebar'; import { useChatStore } from './_store/useChatStore'; import { fetchConversationHistory } from './_lib/conversation-api'; import { effectiveToken, effectiveBrandName } from './_lib/iframeSelectors'; import { useAppConfig } from './_hooks/useAppConfig'; import { useIframeParams } from './_hooks/useIframeParams'; export default function ChatPage() { const searchParams = useSearchParams(); useIframeParams(); useAppConfig(); const apiBase = useChatStore((s) => s.apiBase); const setAppConfig = useChatStore((s) => s.setAppConfig); const isAuthenticated = useChatStore((s) => s.isAuthenticated); const googleClientId = useChatStore((s) => s.googleClientId); const passwordAuthEnabled = useChatStore((s) => s.passwordAuthEnabled); const selectedEnvironment = useChatStore((s) => s.selectedEnvironment); const sidebarOpen = useChatStore((s) => s.sidebarOpen); const setSidebarOpen = useChatStore((s) => s.setSidebarOpen); const iframeMode = useChatStore((s) => s.iframeMode); const urlConvId = searchParams.get('conversation'); // Fetch + cache conversation history. Re-runs automatically when URL conversation id changes. // gcTime: 0 discards cached data immediately when navigating away, so returning to a // conversation always triggers a fresh fetch (messages may have been added since last visit). const { data: historyData, error: historyError } = useQuery({ queryKey: ['conversation', urlConvId], queryFn: () => { const s = useChatStore.getState(); return fetchConversationHistory(urlConvId!, apiBase, effectiveToken(s), effectiveBrandName(s)); }, enabled: !!urlConvId && !!selectedEnvironment && isAuthenticated, gcTime: 0, retry: 2, }); // Sync server data into the Zustand store (messages + conversationId). // Sidebar navigation triggers this the same way as initial load. useEffect(() => { if (!urlConvId) return; const store = useChatStore.getState(); // True when the URL was seeded client-side (router.replace) before any server conversation // exists — skip the loading state so the optimistic user message is not wiped. const isFreshConv = store.conversationId === urlConvId; store.setConversationId(urlConvId); if (historyError) { store.hydrateMessages([], {}); store.addMessage('error', 'Failed to load conversation history. The server may be temporarily unavailable — please try again.'); store.setHistoryLoading(false); } else if (historyData) { const msgs = historyData.messages ?? []; const convEnv = historyData.environment || undefined; store.hydrateMessages(msgs, { environment: convEnv }); // Auto-switch env to match the conversation. hydrateMessages already set // conversationEnvironment = convEnv, so setSelectedEnvironment skips the banner. if (convEnv && convEnv !== store.selectedEnvironment && !store.iframeMode) { store.setSelectedEnvironment(convEnv); } store.setHistoryLoading(false); } else if (historyData === null) { // 404 — conversation not persisted yet (WS still processing the first message). // Do not wipe the optimistic user message that useSendChat already added. store.setHistoryLoading(false); } else if (!isFreshConv) { store.setHistoryLoading(true); } // selectedEnvironment intentionally omitted — re-hydrating on env switch shows stale data // eslint-disable-next-line react-hooks/exhaustive-deps }, [urlConvId, historyData, historyError]); const handleAuthenticated = useCallback( (config: object) => { setAppConfig(config as Parameters[0]); }, [setAppConfig], ); if (iframeMode) { return ( } size="sm" variant="ghost" color="gray.300" _hover={{ bg: 'gray.700' }} onClick={() => setSidebarOpen(!sidebarOpen)} /> ); } return ( {!isAuthenticated && (!!googleClientId || passwordAuthEnabled) && ( )} {/* Sidebar: on desktop pushes content (width transition); hidden on mobile */} ); }