Function Chat

frontend/src/components/chat/index.tsx:20–197

()

import { useChatList } from '@/hooks/useChatList';
import { useChatStream } from '@/hooks/useChatStream';
import { CodeEngine } from './code-engine/code-engine';
import { useProjectStatusMonitor } from '@/hooks/useProjectStatusMonitor';
import { useIsMobile } from '@/hooks/useIsMobile';
import { cn } from '@/lib/utils';
import { extractQuestions } from '@/components/chat/question-card';
import { useAuthContext } from '@/providers/AuthProvider';

export default function Chat() {
  // Initialize state, refs, and custom hooks
  const { isAuthorized } = useAuthContext();
  const urlParams = new URLSearchParams(window.location.search);
  const [chatId, setChatId] = useState('');
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const formRef = useRef<HTMLFormElement>(null);
  const { models } = useModels();
  // useModels resolves asynchronously, so seeding state from models[0] at mount
  // pins whatever the fallback was. Adopt the first real model once it lands;
  // until then send '' and let the backend apply its configured default.
  const [selectedModel, setSelectedModel] = useState('');
  useEffect(() => {
    if (!selectedModel && models.length > 0) setSelectedModel(models[0]);
  }, [models, selectedModel]);
  const { refetchChats } = useChatList();
  // A 18/82 horizontal split has no meaning on a phone: one pane at a time,
  // with a slim switcher on top.
  const isMobile = useIsMobile();
  const [mobilePane, setMobilePane] = useState<'chat' | 'preview'>('chat');

  // Project status monitoring for the current chat
  const { isReady, projectId, chatModel, error } =
    useProjectStatusMonitor(chatId);

  // The chat remembers which model it was created with; prefer that over the
  // head of the configured list, so the first turn runs on what was picked.
  useEffect(() => {
    if (chatModel) setSelectedModel(chatModel);
  }, [chatModel]);

  // Switching mid-chat sticks: the choice is written back to the chat so a
  // reload does not silently revert to the creation-time model.
  const [updateChatModel] = useMutation(UPDATE_CHAT_MODEL);
  const changeModel = useCallback(
    (model: string) => {
      setSelectedModel(model);
      if (chatId) {
        updateChatModel({ variables: { chatId, model } }).catch(() =>
          toast.error('Could not save the model choice')
        );
      }
    },
    [chatId, updateChatModel]
  );

  // Apollo query to fetch chat history
  useQuery(GET_CHAT_HISTORY, {
    variables: { chatId },
    skip: !isAuthorized || !chatId,