Function ChatPage

packages/studio/src/pages/ChatPage.tsx:364–1161

({ activeBookId, mode = activeBookId ? "book" : "book-create", nav, theme, t, sse: _sse }: ChatPageProps)

// -- Component --

export function ChatPage({ activeBookId, mode = activeBookId ? "book" : "book-create", nav, theme, t, sse: _sse }: ChatPageProps) {
  // -- Store selectors --
  const messages = useChatStore(chatSelectors.activeMessages);
  const activeSession = useChatStore(chatSelectors.activeSession);
  const activeSessionId = useChatStore((s) => s.activeSessionId);
  const input = useChatStore((s) => s.input);
  const loading = useChatStore(chatSelectors.isActiveSessionStreaming);
  const selectedModel = useChatStore((s) => s.selectedModel);
  const selectedService = useChatStore((s) => s.selectedService);
  // -- Store actions --
  const setInput = useChatStore((s) => s.setInput);
  const sendMessage = useChatStore((s) => s.sendMessage);
  const setSelectedModel = useChatStore((s) => s.setSelectedModel);
  const loadSessionList = useChatStore((s) => s.loadSessionList);
  const createSession = useChatStore((s) => s.createSession);
  const markProposalResolved = useChatStore((s) => s.markProposalResolved);
  const loadSessionDetail = useChatStore((s) => s.loadSessionDetail);
  const activateSession = useChatStore((s) => s.activateSession);
  const setSessionPlayMode = useChatStore((s) => s.setSessionPlayMode);

  const scrollRef = useRef<HTMLDivElement>(null);
  const scrollFrameRef = useRef<ScrollFrameId | null>(null);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const autoScrollPinnedRef = useRef(true);

  const isZh = t("nav.connected") === "\u5DF2\u8FDE\u63A5";
  const hasBook = Boolean(activeBookId);
  const currentSessionKind: ChatSessionKind = activeSession?.sessionKind
    ?? (mode === "interactive-film-authoring" ? "interactive-film-authoring"
      : mode === "book-create" ? "book-create"
      : activeBookId ? "book" : "chat");
  const playMode = activeSession?.playMode;
  // A play session must pick its playstyle (点着玩 / 自由玩) before chatting.
  const needsPlayModeChoice = currentSessionKind === "play" && !playMode;
  // Even in 点着玩 the world is shaped by free typing first; the choice panel
  // only replaces the input once play has actually started (a play tool
  // produced choices).
  const playChoiceSet = useMemo(
    () => (currentSessionKind === "play" && playMode === "guided" ? latestPlayChoiceSet(messages) : null),
    [currentSessionKind, playMode, messages],
  );
  const [consumedPlayChoiceKey, setConsumedPlayChoiceKey] = useState<string | null>(null);
  const playChoices = playChoiceSet?.choices ?? [];
  const showChoicePanel = shouldShowPlayChoicePanel({
    playMode,
    choiceSetKey: playChoiceSet?.key ?? null,
    consumedChoiceKey: consumedPlayChoiceKey,
    choiceCount: playChoices.length,
  });
  // World panel (holdings / state / relations) defaults collapsed; the scene
  // image and choices live in the chat center now, opened on demand.
  const [worldPanelOpen, setWorldPanelOpen] = useState(false);
  const [playImageError, setPlayImageError] = useState<string | null>(null);
  const [playImageMenuOpen, setPlayImageMenuOpen] = useState(false);
  const [playImageSettings, setPlayImageSettings] = useState<PlayImageSettings>({ actors: false, moments: false, inventory: false });
  const [playImageCoverReady, setPlayImageCoverReady] = useState(false);
  const [skillPanelOpen, setSkillPanelOpen] = useState(false);
  const [selectedSkillIds, setSelectedSkillIds] = useState<string[]>([]);