deerflow-code/frontend-web/src/pages/ChatPage.tsx

"use client";

import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";

import { type PromptInputMessage } from "@/components/ai-elements/prompt-input";
import { getAPIClient } from "@/core/api";
import { usePromptPrefixSettings } from "@/core/system-settings/hooks";
import { useUserPreferencesQuery } from "@/core/user-preferences";
import { ArtifactTrigger, useArtifacts } from "@/components/workspace/artifacts";
import {
  ChatBox,
  useSpecificChatMode,
  useThreadChat,
} from "@/components/workspace/chats";
import { ExportTrigger } from "@/components/workspace/export-trigger";
import { KnowledgeSaveTrigger } from "@/components/workspace/knowledge-save-trigger";
import { LlmWikiKnowledgeSelector } from "@/components/workspace/llmwiki-knowledge-selector";
import { InputBox } from "@/components/workspace/input-box";
import {
  MessageList,
  MESSAGE_LIST_DEFAULT_PADDING_BOTTOM,
  MESSAGE_LIST_FOLLOWUPS_EXTRA_PADDING_BOTTOM,
} from "@/components/workspace/messages";
import { ThreadContext } from "@/components/workspace/messages/context";
import { QuestionNavigator } from "@/components/workspace/question-navigator";
import { ThreadTitle } from "@/components/workspace/thread-title";
import { TodoList } from "@/components/workspace/todo-list";
import {
  CompactShortcutButtons,
  LayoutModeSwitcher,
  ThemeSwitcher,
} from "@/components/workspace/appearance-controls";
import { TokenUsageIndicator } from "@/components/workspace/token-usage-indicator";
import { UserIdentityBadge } from "@/components/workspace/user-identity-badge";
import { CompactModeGuide } from "@/components/workspace/compact-mode-guide";
import { Welcome } from "@/components/workspace/welcome";
import { CompactWelcome } from "@/components/workspace/compact-welcome";
import { readSidebarEnabled } from "@/core/page-layout/sidebar-enabled";
import { isChatsIframeWorkspacePath } from "@/core/page-layout/chats-iframe-route";
import { isEmbedActive, isHideChromeActive } from "@/core/embed/embed-session";
import { isWujieEnv } from "@/core/embed/wujie";
import { useSidebar } from "@/components/ui/sidebar";
import { Button } from "@/components/ui/button";
import { PanelLeftOpen } from "lucide-react";
import { useAgentSelector, useAgentsPaginated } from "@/core/agents";
import { useI18n } from "@/core/i18n/hooks";
import { useModels } from "@/core/models/hooks";
import {
  isFrontendRagProfile,
  isMultiRoundRagProfile,
  isSingleRoundRagProfile,
  SINGLE_ROUND_RAG_MODELS,
} from "@/core/models/single-round-rag";
import { useNotification } from "@/core/notification/hooks";
import {
  getLastAgentId,
  saveLastAgentId,
  useKnowledgeRagEnabled,
  useThreadSettings,
} from "@/core/settings";
import { useThreadStream, stopActiveThreadBeforeClarificationReply } from "@/core/threads/hooks";
import { useResearchWritingFeed } from "@/core/threads/use-research-writing-feed";
import { clearResearchReportStream } from "@/core/threads/use-research-report-stream";
import { resolveWritingModeReportPath } from "@/core/threads/writing-mode";
import { queueLlmWikiConversationDeposit } from "@/core/llmwiki/conversation-deposit";
import { useSingleRoundRagMessages } from "@/core/threads/use-single-round-rag";
import { useMultiRoundRagMessages } from "@/core/threads/use-multi-round-rag";
import { useLayoutMode } from "@/core/system-settings/hooks";
import { useRouteBase } from "@/core/route-base";
import { textOfMessage } from "@/core/threads/utils";
import { OptType, writeYLog } from "@/core/log/y-log";
import { env } from "@/env";
import { cn } from "@/lib/utils";

const BROWSER_CONTEXT_PARAM_KEYS = [
  "browser_context",
  "bc_filename",
  "bc_size",
  "bc_path",
  "bc_prompt",
] as const;

function clearBrowserContextParamsFromHash() {
  if (typeof window === "undefined") return;
  const hash = window.location.hash;
  if (!hash.startsWith("#")) return;
  const hashBody = hash.slice(1);
  const queryStart = hashBody.indexOf("?");
  if (queryStart < 0) return;

  const path = hashBody.slice(0, queryStart);
  const search = hashBody.slice(queryStart + 1);
  const params = new URLSearchParams(search);
  let changed = false;
  for (const key of BROWSER_CONTEXT_PARAM_KEYS) {
    if (params.has(key)) {
      params.delete(key);
      changed = true;
    }
  }
  if (!changed) return;

  const nextSearch = params.toString();
  const nextHash = nextSearch ? `#${path}?${nextSearch}` : `#${path}`;
  window.history.replaceState(
    null,
    "",
    `${window.location.pathname}${window.location.search}${nextHash}`,
  );
}

export default function ChatPage() {
  const routeBase = useRouteBase();
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();
  // `chatMode=full` is used by an embedded standard chat. It intentionally
  // overrides the user's compact-layout preference for this route only, so
  // the page keeps the full landing composition and its agent/history sidebar.
  const fullChatMode =
    searchParams.get("chatMode")?.trim().toLowerCase() === "full";
  const { open: historySidebarOpen, toggleSidebar: toggleHistorySidebar } =
    useSidebar();
  const { t } = useI18n();
  // 有效界面模式：用户自选 > 管理员系统默认 > （下方再回退会话级 sidebarEnabled）
  const [effectiveLayoutMode] = useLayoutMode();
  const [showFollowups, setShowFollowups] = useState(false);
  const [hasStartedConversation, setHasStartedConversation] = useState(false);
  const { threadId, setThreadId, isNewThread, setIsNewThread, isMock } =
    useThreadChat();
  const [settings, setSettings] = useThreadSettings(threadId);
  // Sidebar session toggle: while on, every message in every chat carries
  // knowledge_rag_enabled so the backend injects knowledge-base recall.
  // In-memory only — explicitly overrides any value persisted by the old
  // per-thread header toggle so stale localStorage can't re-enable it.
  const [knowledgeRagEnabled] = useKnowledgeRagEnabled();
  const [selectedKnowledgeBaseIds, setSelectedKnowledgeBaseIds] = useState<string[]>([]);
  const [knowledgeSelectionReady, setKnowledgeSelectionReady] = useState(false);
  const [knowledgeSelectionLoading, setKnowledgeSelectionLoading] = useState(false);
  const knowledgeSelectionThread = useRef<string | null>(null);
  const activeThreadIdRef = useRef<string | null | undefined>(threadId);
  const changeKnowledgeSelection = useCallback((ids: string[]) => {
    setSelectedKnowledgeBaseIds(ids);
    setKnowledgeSelectionReady(true);
  }, []);
  const streamContext = useMemo(
    () => ({
      ...settings.context,
      knowledge_rag_enabled: knowledgeRagEnabled,
      ...(knowledgeSelectionReady
        ? { llmwiki_knowledge_base_ids: selectedKnowledgeBaseIds }
        : {}),
    }),
    [
      settings.context,
      knowledgeRagEnabled,
      knowledgeSelectionReady,
      selectedKnowledgeBaseIds,
    ],
  );
  const [mounted, setMounted] = useState(false);
  const { tokenUsageEnabled } = useModels();
  const { data: promptPrefixSettings } = usePromptPrefixSettings();
  // Personal opt-out: when set, hide the admin prompt-prefix switch entirely and
  // never apply the prefix — the user uses only their own prompts.
  const { data: userPreferences, isLoading: preferencesLoading } =
    useUserPreferencesQuery();
  const hideAdminPrompt = userPreferences?.hide_admin_prompt_prefix === true;
  const [promptPrefixOn, setPromptPrefixOn] = useState(false);
  const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
  const [agentHandoffPending, setAgentHandoffPending] = useState(false);
  const agentHandoffPendingRef = useRef(false);
  const browserContextAutoSubmitRef = useRef<string | null>(null);
  const { agents: selectorAgents, isLoading: selectorLoading } =
    useAgentSelector();
  // 已选 agent 的存在性校验需要更宽的来源：侧边栏可选未配置进管理弹窗的 agent
  // （用户自己的智能体），这些也算有效，故把「我的 / 广场」一并纳入校验集（缓存共享）。
  const { agents: mineAgents } = useAgentsPaginated({ scope: "mine", page: 1, pageSize: 20 });
  const { agents: squareAgents } = useAgentsPaginated({ scope: "square", page: 1, pageSize: 20 });
  const { selectedArtifact } = useArtifacts();
  useSpecificChatMode();

  useEffect(() => {
    activeThreadIdRef.current = threadId;
  }, [threadId]);

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (isNewThread) {
      setHasStartedConversation(false);
      setPromptPrefixOn(false);
      setSelectedKnowledgeBaseIds([]);
      setKnowledgeSelectionReady(false);
      setKnowledgeSelectionLoading(false);
      knowledgeSelectionThread.current = "__new__";
      // Pre-select the agent the user last started a conversation with so a
      // fresh chat defaults to it. Validated against the known agent list below.
      setSelectedAgentId(getLastAgentId());
    }
  }, [isNewThread, threadId]);

  // The knowledge-base choice belongs to the conversation, not to a browser
  // component instance. Restore it from LangGraph thread metadata whenever an
  // existing conversation is opened. An explicit empty array means the user
  // deliberately disabled LLMWiki retrieval for that conversation.
  useEffect(() => {
    if (isNewThread || !threadId || knowledgeSelectionThread.current === threadId) {
      return;
    }
    knowledgeSelectionThread.current = threadId;
    setKnowledgeSelectionLoading(true);
    void getAPIClient(isMock)
      .threads.get(threadId)
      .then((record) => {
        if (knowledgeSelectionThread.current !== threadId) return;
        const metadata = record.metadata as Record<string, unknown> | undefined;
        const raw = metadata?.llmwiki_knowledge_base_ids;
        if (Array.isArray(raw)) {
          setSelectedKnowledgeBaseIds(
            raw.map((item) => String(item).trim()).filter(Boolean),
          );
          setKnowledgeSelectionReady(true);
        } else {
          setSelectedKnowledgeBaseIds([]);
          setKnowledgeSelectionReady(false);
        }
      })
      .catch(() => {
        if (knowledgeSelectionThread.current === threadId) {
          setKnowledgeSelectionReady(false);
        }
      })
      .finally(() => {
        if (knowledgeSelectionThread.current === threadId) {
          setKnowledgeSelectionLoading(false);
        }
      });
  }, [isMock, isNewThread, threadId]);

  // Drop a restored last-used agent that is no longer in the selector list
  // (deleted / unpublished / no longer curated), so we never hand off to a
  // dead agent. Wait for the list to load before deciding.
  useEffect(() => {
    if (selectorLoading || !selectedAgentId) return;
    // 校验集 = 管理弹窗 ∪ 我的 ∪ 广场；任一存在即视为有效（含用户未配置进管理弹窗
    // 的自有智能体）。三者都还没加载出来时不做清除，避免把恢复值误删。
    const known = [...selectorAgents, ...mineAgents, ...squareAgents];
    if (known.length === 0) return;
    if (!known.some((a) => a.id === selectedAgentId)) {
      setSelectedAgentId(null);
      setSelectedKnowledgeBaseIds([]);
      setKnowledgeSelectionReady(false);
    }
  }, [selectedAgentId, selectorAgents, mineAgents, squareAgents, selectorLoading]);

  const { showNotification } = useNotification();

  const [thread, sendMessage, isUploading] = useThreadStream({
    threadId: isNewThread ? undefined : threadId,
    context: streamContext,
    threadMetadata: knowledgeSelectionReady
      ? { llmwiki_knowledge_base_ids: selectedKnowledgeBaseIds }
      : undefined,
    isMock,
    onStart: (createdThreadId) => {
      knowledgeSelectionThread.current = createdThreadId;
      activeThreadIdRef.current = createdThreadId;
      setThreadId(createdThreadId);
      setIsNewThread(false);
      // Keep the current component mounted while updating the hash route.
      history.replaceState(
        null,
        "",
        `${window.location.pathname}${window.location.search}#${routeBase}/chats/${createdThreadId}`,
      );
    },
    onFinish: (state) => {
      // 操作日志(Y-Log)：问答完成（成功）后，用最终汇总文本上报一条。
      try {
        const msgs = state.messages ?? [];
        const lastAi = [...msgs].reverse().find((m) => (m as { type?: string }).type === "ai");
        const lastHuman = [...msgs].reverse().find((m) => (m as { type?: string }).type === "human");
        writeYLog({
          optType: OptType.other,
          optDetail: "CM助手-全量-专家代理问答",
          url: `/api/threads/${threadId ?? ""}/runs/stream`,
          reqParam: { agent_id: selectedAgentId, question: lastHuman ? textOfMessage(lastHuman) : "" },
          returnParam: { data: lastAi ? textOfMessage(lastAi) : "" },
        });
      } catch {
        /* 上报绝不影响问答 */
      }
      queueLlmWikiConversationDeposit({
        threadId: activeThreadIdRef.current,
        messages: state.messages,
        assistantId: selectedAgentId,
        knowledgeBaseIds: selectedKnowledgeBaseIds,
      });
      if (document.hidden || !document.hasFocus()) {
        let body = "Conversation finished";
        const lastMessage = state.messages.at(-1);
        if (lastMessage) {
          const textContent = textOfMessage(lastMessage);
          if (textContent) {
            body =
              textContent.length > 200
                ? textContent.substring(0, 200) + "..."
                : textContent;
          }
        }
        showNotification(state.title, { body });
      }
    },
  });
  const singleRoundRag = useSingleRoundRagMessages(threadId);
  const multiRoundRag = useMultiRoundRagMessages(threadId);
  const singleRoundRagSelected = isSingleRoundRagProfile(settings.context);
  const multiRoundRagSelected = isMultiRoundRagProfile(settings.context);
  const frontendRagSelected = isFrontendRagProfile(settings.context);
  // 写作模式深度研究进度：注入 displayThread 尾部（进度步骤条 + report.md
  // 流式 stub），成功且真实产物落地后自动撤出。
  const { displayThread: researchDisplayThread } = useResearchWritingFeed(threadId, thread);
  const displayThread = useMemo(() => {
    const base = researchDisplayThread;
    if (
      singleRoundRag.messages.length === 0 &&
      multiRoundRag.messages.length === 0 &&
      !singleRoundRag.isLoading &&
      !multiRoundRag.isLoading
    ) {
      return base;
    }
    const messages = [
      ...base.messages,
      ...singleRoundRag.messages,
      ...multiRoundRag.messages,
    ];
    return {
      ...base,
      values: { ...base.values, messages },
      messages,
      isLoading:
        base.isLoading || singleRoundRag.isLoading || multiRoundRag.isLoading,
    } as typeof base;
  }, [
    multiRoundRag.isLoading,
    multiRoundRag.messages,
    singleRoundRag.isLoading,
    singleRoundRag.messages,
    researchDisplayThread,
  ]);

  const writingArtifactPath = useMemo(
    () =>
      resolveWritingModeReportPath(thread.values.artifacts, selectedArtifact),
    [selectedArtifact, thread.values.artifacts],
  );

  const handleSubmit = useCallback(
    (message: PromptInputMessage) => {
      if (frontendRagSelected) {
        if (message.files && message.files.length > 0) {
          toast.error("RAG 问答暂不支持附件，请移除附件后重试。");
          return;
        }
        setHasStartedConversation(true);
        window.dispatchEvent(
          new CustomEvent("workspace:sandbox-resume-autoscroll"),
        );
        void (async () => {
          try {
            let targetThreadId = threadId;
            if (isNewThread) {
              const created = await getAPIClient(isMock).threads.create({});
              targetThreadId = created.thread_id;
              setThreadId(targetThreadId);
              setIsNewThread(false);
              history.replaceState(
                null,
                "",
                `${window.location.pathname}${window.location.search}#${routeBase}/chats/${targetThreadId}`,
              );
              const title = message.text.trim().replace(/\s+/g, " ").slice(0, 60);
              if (title) {
                void getAPIClient(isMock).threads
                  .updateState(targetThreadId, { values: { title } })
                  .catch(() => undefined);
              }
            }
            if (multiRoundRagSelected) {
              await multiRoundRag.submit({ targetThreadId, query: message.text });
            } else {
              await singleRoundRag.submit({
                targetThreadId,
                query: message.text,
                modelName: settings.context.model_name ?? "OpenAI3",
              });
            }
          } catch (error) {
            toast.error(
              error instanceof Error
                ? error.message
                : multiRoundRagSelected
                  ? "多轮 RAG 问答失败。"
                  : "单轮 RAG 问答失败。",
            );
          }
        })();
        return;
      }
      // If the user picked an agent before sending the opening turn, hand off
      // to AgentChatPage so the conversation runs against that agent. We stash
      // the pending text in sessionStorage because the next/navigation shim
      // doesn't carry router state across hash-route pushes. File attachments
      // are bound to the current thread upload directory and would not match
      // the new thread, so we skip the handoff when files are present and let
      // the message run on Lead Agent instead.
      if (
        selectedAgentId &&
        isNewThread &&
        !hasStartedConversation &&
        message.text &&
        (!message.files || message.files.length === 0)
      ) {
        if (agentHandoffPendingRef.current) return;
        const text = message.text.trim();
        agentHandoffPendingRef.current = true;
        setAgentHandoffPending(true);
        setHasStartedConversation(true);
        void (async () => {
          try {
            const created = await getAPIClient(isMock).threads.create({
              metadata: {
                agent_id: selectedAgentId,
                ...(knowledgeSelectionReady
                  ? { llmwiki_knowledge_base_ids: selectedKnowledgeBaseIds }
                  : {}),
              },
            });
            sessionStorage.setItem(
              "pendingAgentMessage",
              JSON.stringify({
                agentId: selectedAgentId,
                threadId: created.thread_id,
                text,
                ...(knowledgeSelectionReady
                  ? { knowledgeBaseIds: selectedKnowledgeBaseIds }
                  : {}),
              }),
            );
            saveLastAgentId(selectedAgentId);
            router.push(
              `/page/workspace/agents/${selectedAgentId}/chats/${created.thread_id}`,
            );
          } catch (err) {
            agentHandoffPendingRef.current = false;
            setAgentHandoffPending(false);
            setHasStartedConversation(false);
            toast.error(
              err instanceof Error ? err.message : "创建智能体对话失败",
            );
          }
        })();
        return;
      }

      // Only the opening turn of a brand-new thread may carry the prefix.
      const shouldApplyPrefix =
        isNewThread &&
        !hasStartedConversation &&
        promptPrefixOn &&
        !preferencesLoading &&
        !hideAdminPrompt &&
        promptPrefixSettings?.enabled === true;
      setHasStartedConversation(true);
      window.dispatchEvent(
        new CustomEvent("workspace:sandbox-resume-autoscroll"),
      );
      // The prefix is intentionally NOT concatenated into the message text:
      // doing so would make the user see it. We only flag the request via
      // context; the backend tags the message and PromptPrefixMiddleware
      // injects the prefix into the LLM request only. Writing mode adds the
      // active markdown artifact path so the agent keeps editing the canvas.
      const extraContext: Record<string, unknown> = {};
      if (shouldApplyPrefix) {
        extraContext.prompt_prefix_enabled = true;
      }
      if (settings.context.writing_mode && writingArtifactPath) {
        extraContext.writing_artifact_path = writingArtifactPath;
      }
      // 新一轮提问：清掉上一轮深度研究报告的注入状态（中断态步骤条等）。
      if (threadId) clearResearchReportStream(threadId);
      void sendMessage(
        threadId,
        message,
        Object.keys(extraContext).length > 0 ? extraContext : undefined,
      );
    },
    [
      sendMessage,
      threadId,
      isNewThread,
      hasStartedConversation,
      promptPrefixOn,
      promptPrefixSettings,
      hideAdminPrompt,
      preferencesLoading,
      selectedAgentId,
      selectedKnowledgeBaseIds,
      knowledgeSelectionReady,
      agentHandoffPending,
      isMock,
      router,
      settings.context.writing_mode,
      settings.context.model_name,
      writingArtifactPath,
      singleRoundRag,
      singleRoundRagSelected,
      multiRoundRag,
      multiRoundRagSelected,
      frontendRagSelected,
      routeBase,
      setIsNewThread,
      setThreadId,
    ],
  );

  const handleClarificationSubmit = useCallback(
    async (answer: string) => {
      setHasStartedConversation(true);
      await stopActiveThreadBeforeClarificationReply(threadId, thread);
      await sendMessage(threadId, { text: answer, files: [] });
    },
    [sendMessage, thread, threadId],
  );

  useEffect(() => {
    const token = searchParams.get("browser_context")?.trim();
    if (!token || browserContextAutoSubmitRef.current === token) {
      return;
    }
    if (!threadId || isNewThread || thread.isLoading || agentHandoffPending) {
      return;
    }

    const consumedKey = `deerflow.browser-context.consumed.${token}`;
    if (window.sessionStorage.getItem(consumedKey)) {
      browserContextAutoSubmitRef.current = token;
      clearBrowserContextParamsFromHash();
      return;
    }

    const filename = searchParams.get("bc_filename")?.trim();
    const path = searchParams.get("bc_path")?.trim();
    const size = Number(searchParams.get("bc_size") ?? "0");
    const prompt =
      searchParams.get("bc_prompt")?.trim() ||
      "请基于刚刚发送的网页内容，先用中文总结要点，并等待我继续提问。";

    if (!filename || !path || !Number.isFinite(size) || size < 0) {
      browserContextAutoSubmitRef.current = token;
      clearBrowserContextParamsFromHash();
      toast.error("网页上下文参数不完整，无法自动发送到 Deer");
      return;
    }

    browserContextAutoSubmitRef.current = token;
    window.sessionStorage.setItem(consumedKey, "1");
    clearBrowserContextParamsFromHash();
    setHasStartedConversation(true);

    void sendMessage(
      threadId,
      { text: prompt, files: [] },
      undefined,
      {
        additionalKwargs: {
          browser_context: {
            source: "chrome-extension",
            token,
          },
          files: [
            {
              filename,
              size,
              path,
              status: "uploaded",
            },
          ],
        },
      },
    ).catch((err) => {
      toast.error(
        err instanceof Error ? err.message : "网页上下文发送失败，请重试",
      );
    });
  }, [
    searchParams,
    threadId,
    isNewThread,
    thread.isLoading,
    agentHandoffPending,
    sendMessage,
  ]);

  // Persist the picked agent the moment it changes so the next new chat
  // defaults to it — even if the user never sends a message this session.
  // Passing null (the ✕ clear) wipes the stored preference.
  const handleAgentChange = useCallback((agentId: string | null) => {
    setSelectedAgentId(agentId);
    setSelectedKnowledgeBaseIds([]);
    setKnowledgeSelectionReady(false);
    saveLastAgentId(agentId);
  }, []);
  const handleStop = useCallback(async () => {
    if (singleRoundRag.isLoading) {
      singleRoundRag.stop();
      return;
    }
    if (multiRoundRag.isLoading) {
      multiRoundRag.stop();
      return;
    }
    await thread.stop();
  }, [multiRoundRag, singleRoundRag, thread]);

  const promptPrefixProp = useMemo(() => {
    if (!promptPrefixSettings?.enabled) return undefined;
    if (preferencesLoading) return undefined;
    // Personal opt-out hides the admin prompt-prefix switch entirely.
    if (hideAdminPrompt) return undefined;
    // The prefix toggle is offered only on the opening turn of a new thread.
    if (!isNewThread || hasStartedConversation) return undefined;
    return {
      label: promptPrefixSettings.switch_label || "前缀",
      on: promptPrefixOn,
      onToggle: () => setPromptPrefixOn((v) => !v),
    };
  }, [
    promptPrefixSettings,
    hideAdminPrompt,
    preferencesLoading,
    isNewThread,
    hasStartedConversation,
    promptPrefixOn,
  ]);

  const messageListPaddingBottom = showFollowups
    ? MESSAGE_LIST_DEFAULT_PADDING_BOTTOM +
      MESSAGE_LIST_FOLLOWUPS_EXTRA_PADDING_BOTTOM
    : undefined;
  const isLandingState = isNewThread && !hasStartedConversation;
  // 紧凑模式（正常 App，有外层页面侧栏）落地态：用 CM 参考图样式重画；
  // 判定与 PageRoutes 的 compactWorkspaceSidebar(pageSidebarAllowed) 保持一致 ——
  // 优先看外观设置的「全量/简洁」，未设置过才回退到会话级 sidebarEnabled。否则用户显式
  // 选「全量」时 PageRoutes 已挂出顶栏+侧栏，这里却还按旧 sidebarEnabled 判定，导致深蓝
  // 主题底图(workspace-chat-bg)不生效。非紧凑（嵌入/standalone）保持原样。
  const layoutMode = effectiveLayoutMode;
  const chromeByPreference =
    fullChatMode || layoutMode === "full"
      ? true
      : layoutMode === "compact"
        ? false
        : readSidebarEnabled();
  const compactChrome =
    chromeByPreference && !isChatsIframeWorkspacePath(pathname);
  const compactLanding = isLandingState && compactChrome;
  const compactActionsHidden = isHideChromeActive();
  // 简洁模式新手引导：仅面向「无全局导航栏/侧边栏」的正常简洁布局。iframe 嵌入
  // （embed=1）、去 chrome（hideChrome=1）、强制收起侧栏（无界部署）等环境同样没有
  // 全局 chrome，但不该在外部系统里弹引导。
  const compactGuideEligible =
    !compactChrome &&
    !fullChatMode &&
    !isChatsIframeWorkspacePath(pathname) &&
    !compactActionsHidden &&
    !env.FORCE_COLLAPSED_SIDEBAR &&
    !isEmbedActive() &&
    !isWujieEnv();

  return (
    <ThreadContext.Provider
      value={{
        thread: displayThread,
        isMock,
        knowledgeReferencesEnabled:
          knowledgeSelectionReady && selectedKnowledgeBaseIds.length > 0,
      }}
    >
      <ChatBox threadId={threadId}>
        <div
          className={cn(
            "relative flex size-full min-h-0 justify-between",
            // 紧凑模式（有顶栏+左侧页面侧栏）下，深色背景换成设计稿深蓝主题底图
            compactChrome && "workspace-chat-bg",
          )}
        >
          <header
            className={cn(
              "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center border-b px-4",
              isLandingState
                ? "border-transparent bg-transparent"
                : "bg-card/90 border-border/70 shadow-sm backdrop-blur-md",
            )}
          >
            <div className="flex min-w-0 flex-1 items-center overflow-hidden text-sm font-medium">
              <ThreadTitle threadId={threadId} thread={displayThread} />
            </div>
            <div className="flex shrink-0 items-center gap-2">
              {/* 仅在收起态显示「展开历史」钮；展开后由侧栏内（新对话右侧）的收起钮负责收起。 */}
              {compactChrome && !historySidebarOpen && !compactActionsHidden && (
                <Button
                  type="button"
                  variant="ghost"
                  size="icon-sm"
                  onClick={toggleHistorySidebar}
                  title="打开历史记录"
                  aria-label="打开历史记录"
                  className="text-muted-foreground hover:text-foreground"
                >
                  <PanelLeftOpen className="size-4" />
                </Button>
              )}
              <TokenUsageIndicator
                enabled={tokenUsageEnabled}
                messages={displayThread.messages}
              />
              <ExportTrigger threadId={threadId} />
              <KnowledgeSaveTrigger threadId={threadId} />
              <ArtifactTrigger />
              {/* 不带全局顶栏（紧凑模式）时，名称+岗位回落到聊天页顶栏右侧，
                  与全量模式 Header 右上角保持一致。全量模式已有顶栏则不重复展示。 */}
              {/* 简洁模式无全局顶栏：把换肤 + 界面模式切换搬到页面级顶栏右上角，
                  与全量模式 Header 右上角保持一致（content 配色贴浅底顶栏）。 */}
              {!compactChrome && !compactActionsHidden && (
                <>
                  <CompactShortcutButtons tone="content" />
                  <ThemeSwitcher tone="content" />
                  <LayoutModeSwitcher tone="content" />
                  <div
                    className="bg-border/70 mx-1 h-6 w-px shrink-0"
                    aria-hidden
                  />
                  <UserIdentityBadge />
                </>
              )}
            </div>
          </header>
          <main className="flex min-h-0 max-w-full grow flex-col">
            <div className="flex size-full justify-center">
              {/*
                Landing state covers two cases: (a) a brand-new chat that
                hasn't sent anything yet, and (b) the user clicking 「新对话」
                mid-stream. In (b) the underlying useStream's internal
                stream.values takes one or two effect ticks to clear, so
                rendering MessageList unconditionally would leak the previous
                conversation under the welcome card. Skip rendering during
                the landing state to guarantee a clean slate.
              */}
              {!isLandingState && (
                <MessageList
                  className={cn("size-full", "pt-10")}
                  threadId={threadId}
                  thread={displayThread}
                  paddingBottom={messageListPaddingBottom}
                  tokenUsageEnabled={tokenUsageEnabled}
                  // 输入框为底部绝对浮层（约 160px 高），按钮上移到其上方居中。
                  scrollButtonClassName="bottom-40"
                  onClarificationSubmit={handleClarificationSubmit}
                  onEditResubmit={(text) =>
                    handleSubmit({ text, files: [] })
                  }
                />
              )}
            </div>
            <div
              className={cn(
                // 外层居中容器不吃指针事件：空白区域（尤其落地态铺满 inset-0 时盖住的
                // 右上角「展开历史」按钮）让点击穿透，仅真正的内容块（下方 pointer-events-auto）
                // 接收交互。否则该透明层会吞掉顶栏按钮的 hover/光标/点击。
                "pointer-events-none absolute z-30 flex justify-center px-4",
                // 紧凑落地态：整块垂直+水平居中于对话区
                compactLanding
                  ? "inset-0 items-center"
                  : "right-0 bottom-0 left-0",
              )}
            >
              <div
                className={cn(
                  "pointer-events-auto relative w-full",
                  // 非紧凑落地态沿用上移居中；紧凑态由外层 items-center 居中，无需位移
                  isLandingState &&
                    !compactLanding &&
                    "-translate-y-[calc(50vh-96px)]",
                  compactLanding
                    ? "max-w-[calc(var(--container-width-xl)+150px)]"
                    : isLandingState
                      ? "max-w-[calc(var(--container-width-md)+150px)]"
                      : "max-w-(--container-width-lg)",
                )}
              >
                <div className="absolute -top-4 right-0 left-0 z-0">
                  <div className="absolute right-0 bottom-0 left-0">
                    <TodoList
                      className="bg-background/5"
                      todos={displayThread.values.todos ?? []}
                      hidden={
                        !displayThread.values.todos || displayThread.values.todos.length === 0
                      }
                    />
                  </div>
                </div>
                {isLandingState && mounted &&
                  (compactLanding ? (
                    <CompactWelcome className="mb-6 -translate-y-4" />
                  ) : (
                    <Welcome
                      mode={settings.context.mode}
                      className="mb-6 -translate-y-4"
                    />
                  ))}
                {mounted ? (
                  <div
                    className="w-full -translate-y-4"
                    data-compact-guide="prompt-input"
                  >
                    <InputBox
                      className="w-full"
                      isNewThread={isLandingState}
                      compact={compactLanding}
                      threadId={threadId}
                      autoFocus={isLandingState}
                      status={
                        thread.error
                          ? "error"
                          : displayThread.isLoading
                            ? "streaming"
                            : "ready"
                      }
                      context={settings.context}
                      extraModels={SINGLE_ROUND_RAG_MODELS}
                      disabled={
                        env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
                        isUploading ||
                        agentHandoffPending ||
                        knowledgeSelectionLoading ||
                        singleRoundRag.isLoading ||
                        multiRoundRag.isLoading
                      }
                      onContextChange={(context) =>
                        setSettings("context", context)
                      }
                      promptPrefix={promptPrefixProp}
                      agentSelector={
                        isLandingState
                          ? {
                              selectedAgentId,
                              onAgentChange: handleAgentChange,
                            }
                          : undefined
                      }
                      knowledgeSelector={
                        <LlmWikiKnowledgeSelector
                          source={selectedAgentId ? "agent" : "all"}
                          agentId={selectedAgentId}
                          value={selectedKnowledgeBaseIds}
                          onChange={changeKnowledgeSelection}
                          autoSelectAll={isLandingState && !!selectedAgentId}
                          disabled={
                            env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" ||
                            knowledgeSelectionLoading
                          }
                          readOnly={!isLandingState}
                          label="知识空间"
                        />
                      }
                      onFollowupsVisibilityChange={setShowFollowups}
                      onSubmit={handleSubmit}
                      onStop={handleStop}
                    />
                  </div>
                ) : (
                  <div
                    aria-hidden="true"
                    className={cn(
                      "bg-background/5 h-32 w-full -translate-y-4 rounded-3xl border",
                    )}
                  />
                )}
                {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && (
                  <div className="text-muted-foreground/67 w-full translate-y-12 text-center text-xs">
                    {t.common.notAvailableInDemoMode}
                  </div>
                )}
              </div>
            </div>
          </main>
          {/*
            ChatGPT-style question index. Anchored to the chat column (this
            relative wrapper), not the browser edge; insets keep it below the
            overlay header (h-12) and above the docked input box, and it is
            pointer-events-none outside its own cards so it never blocks the
            header buttons or input.
          */}
          {!isLandingState && (
            <QuestionNavigator
              messages={displayThread.messages}
              className="top-16 right-0 bottom-48 left-0"
            />
          )}
          <CompactModeGuide
            eligible={compactGuideEligible}
            autoStart={mounted && isLandingState}
          />
        </div>
      </ChatBox>
    </ThreadContext.Provider>
  );
}