import React, { useEffect, useRef, useState } from 'react';
import {
  GitCompare,
  MessageSquare,
  CheckCircle,
  AlertCircle,
  ArrowDown,
  ExternalLink,
  Square,
  X,
  BookOpen,
  User2Icon,
} from 'lucide-react';
import { Dialog, Select, Slider } from 'tdesign-react';
import { useTheme } from '../../contexts/ThemeContext';
import { PageType } from '../../components/Sidebar';
import { ChatMessage, EmptyChatState, QAAvatar, QAComposer, QASingleRagTrace, QAThinkingRound, QAThinkingTrace, RetrievalThinkingTrace, SingleRagAnswer, TypingIndicator } from './QACommon';
import GeneralQAHeader from './GeneralQAHeader';
import GeneralQAConfigSidebar from './GeneralQAConfigSidebar';
import type { ComparePane, CompareResult, KnowledgeBaseChunk, Message, QAMode, qaModeItem, SourceItem, stateItem, ToolCallData, ViewMode } from './GeneralQA.types';
import {
  chatDataJSON,
  createComparePane,
  createMockSingleRagMessages,
  createMultiRoundStreamTrace,
  createThinkingTrace,
  extractJsonObjects,
  mapDocsToSources,
  mapReferenceToSource,
  parseSingleRagStream,
  platformTypeChange,
} from './GeneralQA.mock';
import { requestCrudService } from '@/service/request-axios-service';

/**
 * 通用问答组件
 * 支持单轮RAG、多轮RAG、深度检索及结果对比功能
 * @param onNavigate - 页面导航函数
 * @param initialMode - 初始模式（可选）
 */

const zncmUrl = import.meta.env.VITE_API_BASE_URL || '';
const chatUrl = import.meta.env.VITE_AIPI_CHAT_URL || '';
const generateUrl = import.meta.env.VITE_AIPI_GENERATE_CHAT_URL || '';
const taskChatUrl = import.meta.env.VITE_AIPI_TASK_CHAT_URL || '';
const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL;
const service = requestCrudService;
const qaModeList: qaModeItem[] = [
  { value: 'deep-search' as const, label: '任务检索', icon: BookOpen, desc: '检索相关任务' },
  { value: 'hx-search' as const, label: '画像检索', icon: User2Icon, desc: '检索相关账号' },
  { value: 'news-report' as const, label: '新闻报告生成', icon: User2Icon, desc: '检索相关新闻' },
];
const TopicResearch: React.FC<{ onNavigate: (page: PageType) => void; initialMode?: string }> = ({ onNavigate }) => {
  const { theme } = useTheme();
  const isDark = theme === 'dark';

  // 状态管理
  // 视图模式：单一模式或对比模式
  const [viewMode, setViewMode] = useState<ViewMode>('single');
  // 问答模式：单轮RAG、多轮RAG、深度检索
  const [qaMode, setQaMode] = useState<QAMode>('single-round');
  // 对比模式下的左侧模式
  const [compareLeftMode, setCompareLeftMode] = useState<QAMode>('single-round');
  // 对比模式下的右侧模式
  const [compareRightMode, setCompareRightMode] = useState<QAMode>('multi-round');

  // 知识范围设置
  const [knowledgeScope, setKnowledgeScope] = useState<'all' | 'specific-kb' | 'specific-domain'>('all');

  // 回答偏好设置
  const [answerStyle, setAnswerStyle] = useState<'concise' | 'detailed'>('detailed');
  const [showSources, setShowSources] = useState(true);
  const [showProcess, setShowProcess] = useState(false);

  // 对比设置
  const [compareLayout, setCompareLayout] = useState<'horizontal' | 'vertical'>('horizontal');
  const [autoSummarizeDiff, setAutoSummarizeDiff] = useState(true);
  const [recommendBetter, setRecommendBetter] = useState(true);

  // 消息和结果状态
  // `messages` 驱动单一模式聊天区；`compareResult` 驱动对比模式左右面板。
  // `isPreConnectLoading` 表示请求已发起但还没拿到可展示的 assistant 消息，用于显示“正在连接/生成”的占位状态。
  const [messages, setMessages] = useState<Message[]>([]);
  // 用户当前输入的文本内容，用于绑定输入框
  const [inputValue, setInputValue] = useState('');
  // 是否正在处理请求（包含真实请求和模拟请求）
  const [isLoading, setIsLoading] = useState(false);
  // 是否处于"连接中"状态，表示已发起请求但还未收到可展示的响应
  const [isPreConnectLoading, setIsPreConnectLoading] = useState(false);
  // 存储发生的错误信息，用于显示错误提示
  const [error, setError] = useState<string | null>(null);
  // 对比模式下的结果数据，包含左右两侧的回答和来源信息
  const [compareResult, setCompareResult] = useState<CompareResult[]>([]);
  // 对比模式下用户输入的问题内容，用于左右对比时的统一输入
  const [compareUserInput, setCompareUserInput] = useState('');
  // 是否折叠左侧配置面板，true 为折叠，false 为展开
  const [isLeftSidebarCollapsed, setIsLeftSidebarCollapsed] = useState(false);
  // 是否启用自动滚动，当用户手动滚动时会自动关闭
  const [isAutoScrollEnabled, setIsAutoScrollEnabled] = useState(true);
  // 是否显示"滚动到底部"按钮，当有未读消息且用户已滚动时显示
  const [showScrollToBottom, setShowScrollToBottom] = useState(false);
  // 当前选中的引用来源，用于显示引用详情弹窗
  const [selectedCitation, setSelectedCitation] = useState<SourceItem | null>(null);
  const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
  const [editingThinking, setEditingThinking] = useState('');
  const [editingAnswer, setEditingAnswer] = useState('');
  // 模型参数设置弹窗状态。
  // 这些值会进入单轮 RAG 的真实请求体；模拟流仍复用同一套 UI，方便接口恢复后无缝切换。
  const [isModelSettingsOpen, setIsModelSettingsOpen] = useState(false);
  const [modelName, setModelName] = useState('OpenAI3');
  const [scoreThreshold, setScoreThreshold] = useState(0.5);
  const [temperature, setTemperature] = useState(0.3);

  // 当模型正在生成时，如果用户切换模式或跳转页面，先把原动作暂存到 ref，待用户确认停止后再执行。
  // 使用 ref 而不是 state 可以避免弹窗确认过程触发额外渲染，也不会被闭包中的旧状态影响。
  const pendingActionRef = useRef<(() => void) | null>(null);

  // 防止 Enter keydown 和按钮 click 在 React 状态更新前重复触发提交。
  const submitLockRef = useRef(false);

  // 真实流式请求的 reader 句柄，用于“停止生成”时取消浏览器流读取。
  const readerRef = useRef<any>(null);
  // 对比模式会同时启动左右两路请求，因此分别保存 reader，保证可以单独停止某一侧生成。
  const compareReaderRef = useRef<{
    left: any;
    right: any;
  }>({ left: null, right: null });
  // 多轮接口创建任务后会返回 task_id，这里预留给后续“按任务取消/查询状态”等能力。
  const taskIdRef = useRef<string | null>(null);

  // 本地模拟流没有真实 reader，因此用停止标记在异步循环中主动中断。
  const mockSingleRoundStoppedRef = useRef(false);
  const mockMultiRoundStoppedRef = useRef(false);
  const chatListRef = useRef<HTMLDivElement | null>(null);
  const userId = useRef(387); // 用户id
  const qaType = useRef('TOPICResearch'); // 问答类型
  const chatDataId = useRef(); // 聊天窗口id
  const compareChatId = useRef(); // 对比对话记录id

  // 检索过程展示状态
  const [searchProcess, setSearchProcess] = useState({
    currentMode: '单轮RAG',
    rounds: 1,
    hits: 5,
    queryRewrite: '',
  });

  const state = useRef<stateItem>({
    compareIndex: 0,
    compareId: '',
    messageList: [],
    compareResult: []
  })

  /**
   * 处理单轮 RAG 问答请求
   * 
   * 单轮 RAG 的处理流程：
   * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
   * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
   * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
   * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
   * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
   * 
   * @param query - 用户输入的问题文本
   */
  const handleSingleRoundRun = async (query: string, side: 'left' | 'right' | null = null) => {
    // 清空之前的错误信息
    setError(null);
    // 标记开始加载，禁用提交按钮防止重复点击
    setIsLoading(true);
    // 标记"连接中"状态，显示加载占位符
    setIsPreConnectLoading(true);
    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
    let assistantId = '';

    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
    let inThink = false;
    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
    let thinkStarted = false;

    /**
     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
     * @param token - 从流中接收到的文本片段
     */
    const applyAnswerToken = (token: string) => {
      const mesItem = state.current.messageList[1];
      // 获取当前消息的思考和回答内容
      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
      // 剩余未处理的 token 内容
      let remaining = token;
      console.log('remaining', remaining)
      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
      while (remaining) {
        if (inThink) {
          const endIdx = remaining.indexOf('</think>');
          if (endIdx === -1) {
            thinkingMarkdown += remaining;
            remaining = '';
          } else {
            thinkingMarkdown += remaining.slice(0, endIdx);
            remaining = remaining.slice(endIdx + '</think>'.length);
            inThink = false;
            thinkingComplete = true;
          }
        } else {
          const startIdx = remaining.indexOf('<think>');
          console.log('startIdx', startIdx)
          if (startIdx === -1) {
            answerMarkdown += remaining;
            remaining = '';
          } else {
            answerMarkdown += remaining.slice(0, startIdx);
            remaining = remaining.slice(startIdx + '<think>'.length);
            inThink = true;
            thinkStarted = true;
          }
        }
      }
      state.current.messageList[1] = {
        ...mesItem,
        singleRagTrace: {
          ...mesItem.singleRagTrace,
          // 更新思考和回答的 markdown 内容
          thinkingMarkdown,
          answerMarkdown,
          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
          thinkingComplete: thinkStarted ? thinkingComplete : true,
        },
      }
      if (!side) {
        setMessages((prev) => prev.map((msg) => {
          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
          return {
            ...state.current.messageList[1],
          };
        }));
      } else {
        updatePane(side, (pane) => {
          return {
            ...pane,
            singleRagTrace: {
              title: '大模型',
              thinkingMarkdown,
              answerMarkdown,
              thinkingComplete: thinkStarted ? thinkingComplete : true,
            },
          };
        });
      }
    };

    const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
      setCompareResult((prev) => {
        if (!prev) return prev;
        return {
          ...prev,
          [side]: updater(prev[side]),
        };
      });
    };

    try {
      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
      const response = await fetch(`${chatUrl}/chat/knowledge_base_chat_tiaoshi`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
        body: JSON.stringify({
          query,                        // 用户输入的问题
          knowledge_base_name: [],      // 知识库名称列表，空数组表示使用所有知识库
          top_k: 5,                     // 返回最相似的 5 条结果
          score_threshold: scoreThreshold, // 相似度阈值，过滤低质量检索结果
          history: [],                  // 对话历史，用于多轮对话
          stream: true,                 // 启用流式响应
          model_name: modelName,         // 使用的模型名称
          temperature,                   // 生成温度，控制随机性
          prompt_name: 'default',        // 使用的提示词模板
          local_doc_url: false,         // 是否返回本地文档 URL
        }),
      });

      // 检查 HTTP 响应状态
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      // 确保响应体存在（SSE 流需要 body）
      if (!response.body) {
        throw new Error('Response body is null');
      }
      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
      setIsPreConnectLoading(false);

      // 生成唯一 ID 用于标识这条 assistant 消息
      assistantId = `assistant-${Date.now()}`;
      // 初始化思考过程追踪对象
      const initialTrace: QASingleRagTrace = {
        title: '单轮 RAG 思考过程',
        thinkingMarkdown: '', // 思考过程内容
        answerMarkdown: '',    // 最终回答内容
        thinkingComplete: false, // 思考是否完成
      };
      const messageItem: Message = {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        singleRagTrace: initialTrace,
        sources: [], // 初始为空，随着检索结果更新
      }
      state.current.messageList.push(messageItem); // 数据存储
      // 将 assistant 消息添加到消息列表中
      setMessages((prev) => [...prev, messageItem]);

      // 获取响应体的流式读取器
      const reader = response.body.getReader();
      // 保存 reader 引用，用于"停止生成"功能
      if (!side) {
        readerRef.current = reader;
      } else {
        compareReaderRef.current[side] = reader;
      }
      // 创建文本解码器，将二进制数据转换为字符串
      const decoder = new TextDecoder();
      // buffer 用于暂存未完成的 JSON 片段
      let buffer = '';
      let docsList: any[] = [];
      try {
        // 持续读取流数据，直到流结束
        while (true) {
          // 读取下一个数据块
          const { done, value } = await reader.read();
          // done 为 true 时表示流已结束
          if (done) {
            console.log('聊天记录', state.current.messageList);
            chatHistoryAddSearch();
            break;
          }

          // 将二进制数据解码并追加到 buffer
          buffer += decoder.decode(value, { stream: true });
          // 从 buffer 中提取完整的 JSON 对象
          const extracted = extractJsonObjects(buffer);
          if (buffer.includes('docs')) {
            try {
              docsList = chatDataJSON(buffer).docsList || [];
            } catch (error: any) {
              console.log(error);
            }
          }
          // 剩余无法解析的内容保留到下次处理
          buffer = extracted.rest;

          // 遍历所有提取到的 JSON 对象
          for (const jsonText of extracted.objects) {
            try {
              // 解析知识库返回的 JSON 片段
              const parsed = parseKnowledgeBaseChunk(jsonText);
              // 如果有回答内容，追加到消息的 answerMarkdown
              if (typeof parsed.answer === 'string') {
                applyAnswerToken(parsed.answer);
              }
              // 如果有检索文档，更新消息的来源信息
              if (parsed.docs) {
                // 将 docs 转换为 sources 格式
                const mappedDocs = docsList.map((item: any) => ({
                  title: item.m_title,
                  type: item.source1,
                  snippet: item.m_content,
                  source: item.source1,
                  time: item.m_publish,
                  url: item.recUuid,
                  content: item.m_content || '',
                }));
                // 更新检索统计信息
                setSearchProcess((prev) => ({ ...prev, hits: prev.hits + mappedDocs.length }));
                state.current.messageList[1].sources = mappedDocs;
                // 更新消息的来源列表
                if (!side) {
                  setMessages((prev) => prev.map((msg) => (
                    msg.id === assistantId ? { ...msg, sources: mappedDocs } : msg
                  )));
                } else {
                  updatePane(side, (pane) => ({ ...pane, sources: mappedDocs }));
                }
              }
            } catch (parseError) {
              // 解析错误不影响主流程，记录日志继续处理
              console.error('单轮RAG流式JSON解析错误:', parseError);
            }
          }
        }
      } finally {
        // 流读取完成后，释放 reader 锁并清空引用
        if (readerRef.current) {
          readerRef.current.releaseLock();
          readerRef.current = null;
        }
      }
    } catch (runError) {
      // 请求失败处理
      console.error('单轮RAG请求失败:', runError);
      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
    } finally {
      // 无论成功还是失败，都要重置加载状态和解锁提交
      setIsPreConnectLoading(false);
      setIsLoading(false);
      submitLockRef.current = false;
      state.current.messageList = [];
    }
  };

  /**
 * 处理单轮 RAG 问答请求
 * 
 * 单轮 RAG 的处理流程：
 * 1. 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
 * 2. API 返回 SSE 流式响应，包含多个 JSON 对象
 * 3. 逐个解析流式 JSON，提取 answer 和 docs 字段
 * 4. 通过 applyAnswerToken 将流式 token 追加到消息的 thinkingMarkdown/answerMarkdown
 * 5. 实时更新消息来源（sources）和检索统计（searchProcess）
 * 
 * @param query - 用户输入的问题文本
 */
  const chatRun = async (query: string, side: 'left' | 'right' | null = null) => {
    // 清空之前的错误信息
    setError(null);
    // 标记开始加载，禁用提交按钮防止重复点击
    setIsLoading(true);
    // 标记"连接中"状态，显示加载占位符
    setIsPreConnectLoading(true);
    // 用于存储当前 assistant 消息的 ID，以便后续更新该消息内容
    let assistantId = '';

    // 标志位：当前处理的 token 是否处于 <think>... 标签内（解析思考过程）
    let inThink = false;
    // 标志位：是否已经遇到过 <think> 标签开始解析思考内容
    let thinkStarted = false;

    /**
     * 将流式接收到的 token 应用到对应消息的 singleRagTrace 中
     * 该函数会解析 token 中的 <think>... 标签，将思考过程和回答分开存储
     * @param token - 从流中接收到的文本片段
     */
    const applyAnswerToken = (token: string, side: 'left' | 'right' | null = null) => {
      let mesItem: any = state.current.messageList[1];
      if (side === 'left' || side === 'right') {
        mesItem = state.current.compareResult[state.current.compareIndex][side];
      }
      // 获取当前消息的思考和回答内容
      let thinkingMarkdown = mesItem.singleRagTrace.thinkingMarkdown;
      let answerMarkdown = mesItem.singleRagTrace.answerMarkdown;
      let thinkingComplete = mesItem.singleRagTrace.thinkingComplete || false;
      // 剩余未处理的 token 内容
      let remaining = token;
      // console.log('remaining', remaining)
      // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
      while (remaining) {
        if (inThink) {
          const endIdx = remaining.indexOf('</think>');
          if (endIdx === -1) {
            thinkingMarkdown += remaining;
            remaining = '';
          } else {
            thinkingMarkdown += remaining.slice(0, endIdx);
            remaining = remaining.slice(endIdx + '</think>'.length);
            inThink = false;
            thinkingComplete = true;
          }
        } else {
          const startIdx = remaining.indexOf('<think>');
          if (startIdx === -1) {
            answerMarkdown += remaining;
            remaining = '';
          } else {
            answerMarkdown += remaining.slice(0, startIdx);
            remaining = remaining.slice(startIdx + '<think>'.length);
            inThink = true;
            thinkStarted = true;
          }
        }
      }
      if (!side) {
        state.current.messageList[1] = {
          ...mesItem,
          singleRagTrace: {
            ...mesItem.singleRagTrace,
            // 更新思考和回答的 markdown 内容
            thinkingMarkdown,
            answerMarkdown,
            // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
            thinkingComplete: thinkStarted ? thinkingComplete : true,
          },
        }
        setMessages((prev) => prev.map((msg) => {
          // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
          if (msg.id !== assistantId || !msg.singleRagTrace) return msg;
          // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
          return {
            ...state.current.messageList[1],
          };
        }));
      } else {
        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = {
          ...mesItem.singleRagTrace,
          // 更新思考和回答的 markdown 内容
          thinkingMarkdown,
          answerMarkdown,
          // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
          thinkingComplete: thinkStarted ? thinkingComplete : true,
        }
        updatePane(side, (pane) => {
          return {
            ...pane,
            singleRagTrace: {
              title: '大模型',
              thinkingMarkdown,
              answerMarkdown,
              thinkingComplete: thinkStarted ? thinkingComplete : true,
            },
          };
        });
      }
    };

    try {
      // 向知识库问答 API 发送 POST 请求，携带用户问题和检索参数
      const response = await fetch(`${chatUrl}/chat/chat`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        // 请求体包含查询内容、知识库名称、检索参数、模型配置等
        body: JSON.stringify({
          query,                        // 用户输入的问题
          history: [],                  // 对话历史，用于多轮对话
          stream: true,                 // 启用流式响应
          model_name: modelName,         // 使用的模型名称
          temperature,                   // 生成温度，控制随机性
          prompt_name: 'default',        // 使用的提示词模板
          max_tokens: 1000
        }),
      });

      // 检查 HTTP 响应状态
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      // 确保响应体存在（SSE 流需要 body）
      if (!response.body) {
        throw new Error('Response body is null');
      }
      // 收到有效响应后，关闭"连接中"状态，开始显示实际内容
      setIsPreConnectLoading(false);

      // 生成唯一 ID 用于标识这条 assistant 消息
      assistantId = `assistant-${Date.now()}`;
      // 初始化思考过程追踪对象
      const initialTrace: QASingleRagTrace = {
        title: '大模型思考过程',
        thinkingMarkdown: '', // 思考过程内容
        answerMarkdown: '',    // 最终回答内容
        thinkingComplete: false, // 思考是否完成
      };
      const messageItem: Message = {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        singleRagTrace: initialTrace,
        sources: [], // 初始为空，随着检索结果更新
      }
      if (!side) {
        state.current.messageList.push(messageItem);
        // 将 assistant 消息添加到消息列表中
        setMessages((prev) => [...prev, messageItem]);
      } else if (side === 'left' || side === 'right') {
        state.current.compareResult[state.current.compareIndex][side].singleRagTrace = initialTrace;
        updatePane(side, (pane) => {
          return {
            ...pane,
            singleRagTrace: initialTrace,
          };
        });
      }

      // 获取响应体的流式读取器
      const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
      // 保存 reader 引用，用于"停止生成"功能
      if (!side) {
        readerRef.current = reader;
      } else {
        compareReaderRef.current[side] = reader;
      }
      // 创建文本解码器，将二进制数据转换为字符串
      const decoder = new TextDecoder();
      // buffer 用于暂存未完成的 JSON 片段

      try {
        // 持续读取流数据，直到流结束
        while (true) {
          // 读取下一个数据块
          const { done, value } = await reader.read();
          // done 为 true 时表示流已结束
          if (done) {
            console.log('聊天记录', state.current.messageList);
            if (!side) {
              chatHistoryAddSearch();
            }
            break;
          }
          applyAnswerToken(value, side);
        }
      } finally {
        // 流读取完成后，释放 reader 锁并清空引用
        if (readerRef.current) {
          // readerRef.current.releaseLock();
          readerRef.current = null;
        }
      }
    } catch (runError) {
      // 请求失败处理
      console.error('单轮RAG请求失败:', runError);
      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
    } finally {
      // 无论成功还是失败，都要重置加载状态和解锁提交
      setIsPreConnectLoading(false);
      setIsLoading(false);
      submitLockRef.current = false;
      state.current.messageList = [];
    }
  };

  /**
   * 解析类 JavaScript 对象字符串中的字符串值。
   *
   * 后端单轮 RAG 流有时不是严格 JSON，而是 `{answer: '...'}` 这种对象片段。
   * 该函数只负责把单/双引号包裹的 answer 内容还原成普通字符串，保留换行和转义字符。
   */
  const parseLooseStringValue = (rawValue: string): string => {
    try {
      return JSON.parse(rawValue) as string;
    } catch {
      const trimmedValue = rawValue.trim();
      if (trimmedValue.startsWith("'") && trimmedValue.endsWith("'")) {
        return trimmedValue
          .slice(1, -1)
          .replace(/\\n/g, '\n')
          .replace(/\\r/g, '\r')
          .replace(/\\t/g, '\t')
          .replace(/\\'/g, "'")
          .replace(/\\\\/g, '\\');
      }
      throw new Error(`无法解析字符串值: ${rawValue}`);
    }
  };

  const parseLooseValue = (rawValue: string): unknown => {
    try {
      return JSON.parse(rawValue);
    } catch {
      return parseLooseStringValue(rawValue);
    }
  };

  /**
   * 将单轮知识库流中的一个对象片段转换为统一数据结构。
   *
   * 兼容两类返回：
   * - 严格 JSON：`{"answer":"..."}` / `{"docs":[...]}`
   * - 宽松对象：`{answer: '...'}` / `{docs: [...]}`
   *
   * 真实接口和本地模拟都走同一个解析函数，确保联调时只需要替换数据源，不需要改 UI 更新逻辑。
   */
  const parseKnowledgeBaseChunk = (jsonText: string): KnowledgeBaseChunk => {
    try {
      return JSON.parse(jsonText) as KnowledgeBaseChunk;
    } catch {
      const objectText = jsonText.trim();
      const answerMatch = objectText.match(/^\{\s*answer\s*:\s*([\s\S]*)\s*\}$/);
      if (answerMatch) {
        const rawValue = answerMatch[1].trim();
        return { answer: parseLooseStringValue(rawValue) };
      }

      const docsMatch = objectText.match(/^\{\s*docs\s*:\s*([\s\S]*)\s*\}$/);
      if (docsMatch) {
        return { docs: parseLooseValue(docsMatch[1]) as KnowledgeBaseChunk['docs'] };
      }

      const normalizedText = objectText.replace(/([{,]\s*)(answer|docs)(\s*:)/g, '$1"$2"$3');
      return JSON.parse(normalizedText) as KnowledgeBaseChunk;
    }
  };

  const sleep = (ms: number) => new Promise((resolve) => {
    window.setTimeout(resolve, ms);
  });
  const updatePane = (side: 'left' | 'right', updater: (pane: ComparePane) => ComparePane) => {
    setCompareResult((prev) => prev.map((msg) => {
      if (msg.id !== state.current.compareId) return msg
      return {
        ...msg,
        [side]: updater(msg[side]),
      };
    }));
  };
  /**
   * 处理多轮真实接口里的工具调用事件。
   *
   * `show_text` 用于追加思考或最终回答；`local_search` / `tavily_search` 用于把检索结果填入最近一轮。
   * 这里保持事件到 UI trace 的单向映射，避免请求层和展示层互相耦合。
   */
  const handleToolCall = (toolData: ToolCallData, assistantId: string, side: 'left' | 'right' | null = null) => {
    let mesItem: any = state.current.messageList[1];
    if (side === 'left' || side === 'right') {
      mesItem = state.current.compareResult[state.current.compareIndex][side];
      console.log('mesItem', mesItem)
    }
    const trace = { ...mesItem.thinkingTrace, rounds: [...mesItem.thinkingTrace.rounds] };
    const lastRound = trace.rounds[trace.rounds.length - 1];
    switch (toolData.tool_name) {
      case 'show_text': {
        const chatText = toolData.tool_input.text || '';
        if (chatText.includes('<think>')) {
          const thinkContent = chatText.replace('<think>', '').replace('</think>', '').trim();
          if (trace.rounds[0].title !== '正在准备检索') {
            lastRound.queryLoading = false;
            lastRound.queryShow = lastRound.retrievals.length > 0;
            trace.rounds.push({
              id: `round-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
              title: '思考中',
              thoughtMarkdown: thinkContent,
              query: '',
              queryLoading: true,
              queryShow: true,
              retrievals: [],
            });
          } else {
            // lastRound.queryLoading = false;
            trace.rounds[0].title = '思考过程'
            trace.rounds[0].thoughtMarkdown = thinkContent;
          }
        } else {
          lastRound.queryLoading = false;
          trace.finalAnswerMarkdown += chatText;
          trace.thinkingComplete = true;
        }
        break;
      }
      case 'tavily_search':
      case 'local_search': {
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result) as {
              query?: string;
              results?: Array<{ title?: string; content?: string; url?: string }>;
            };

            lastRound.query = result.query || lastRound.query;
            lastRound.queryLoading = false;
            lastRound.title = toolData.tool_name === 'local_search' ? '本地知识检索' : '联网检索';
            lastRound.retrievals = (result.results || []).map((item, idx) => ({
              id: `${toolData.tool_name}-${idx}`,
              title: item.title || '未命名结果',
              content: item.content || '',
              source: item.url || '',
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        }
        break;
      }
      case 'google_search': { // 处理多轮检索
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result) as {
              organic: Array<{ title?: string; content?: string; url?: string; recUuid?: string; publish_time?: string }>;
            };
            lastRound.queryLoading = false;
            lastRound.title = '思考过程';
            lastRound.retrievals = (result.organic || []).map((item, idx) => ({
              id: item.recUuid,
              title: item.title || '未命名结果',
              content: item.content || '',
              source: item.recUuid || '',
              time: item.publish_time,
              recUuid: item.recUuid,
              type: 'more'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.q) {
          lastRound.query = toolData.tool_input.q;
        }
        break;
      }
      case 'getTaskLikeTop': { // 任务检索
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result) as {
              data: Array<{ taskName?: string; overview?: string; id?: number; keywords?: string; taskDirection?: string; taskLevel?: number; taskStartDate: string; taskEndDate: string }>;
            }
            console.log('result', result);
            lastRound.queryLoading = false;
            lastRound.title = '思考过程';
            lastRound.retrievals = (result.data || []).map((item, idx) => ({
              id: String(item.id),
              title: item.taskName || '未命名结果',
              content: item.overview || '',
              keywords: item.keywords,
              taskDirection: item.taskDirection,
              time: `${item.taskStartDate}-${item.taskEndDate}`,
              type: 'task'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.keyword) {
          lastRound.query = toolData.tool_input.keyword;
        }
        break;
      }
      case 'search_user_profile': { // 画像检索
        lastRound.title = '靶标平台画像库';
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; page_content?: string; 平台?: string; 类型?: string; 粉丝数?: number; }>;
            console.log('result', result);
            lastRound.queryLoading = false;
            lastRound.retrievals = (result || []).map((item, idx) => ({
              id: item.user_id,
              title: item.user_name || item.user_id || '-',
              content: item.page_content || '',
              platform: platformTypeChange(item.平台) || '',
              fans: item.粉丝数 || 0,
              type: 'hx'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
          lastRound.queryTitle = '检索词';
          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.user_fig;
        }
        break;
      }
      case 'get_taiwan_news': { // 查找台湾热点新闻
        lastRound.title = '台湾热点新闻';
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
            console.log('get_taiwan_news', result);
            lastRound.queryLoading = false;
            lastRound.retrievals = (result || []).map((item, idx) => ({
              id: item.user_id,
              title: item.user_name || item.user_id || '-',
              content: item.content || '',
              platform: platformTypeChange(item.platform) || '',
              comment_count: item.comment_count,
              message_id: item.message_id,
              time: item.publish_time,
              type: 'taiwan_news'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
          lastRound.queryTitle = '搜索台湾新闻';
          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
        }
        break;
      }
      case 'search_keyword_taiwan_news': { // 查找台湾热点新闻
        lastRound.title = '台湾热点新闻';
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
            console.log('get_taiwan_news', result);
            lastRound.queryLoading = false;
            lastRound.retrievals = (result || []).map((item, idx) => ({
              id: item.user_id,
              title: item.user_name || item.user_id || '-',
              content: item.content || '',
              platform: platformTypeChange(item.platform) || '',
              comment_count: item.comment_count,
              message_id: item.message_id,
              time: item.publish_time,
              type: 'taiwan_news'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
          lastRound.queryTitle = '搜索台湾新闻';
          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
        }
        break;
      }
      case 'get_world_news': {
        lastRound.title = '世界热点新闻';
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
            console.log('get_taiwan_news', result);
            lastRound.queryLoading = false;
            lastRound.retrievals = (result || []).map((item, idx) => ({
              id: item.user_id,
              title: item.user_name || item.user_id || '-',
              content: item.content || '',
              platform: platformTypeChange(item.platform) || '',
              comment_count: item.comment_count,
              message_id: item.message_id,
              time: item.publish_time,
              type: 'world_news'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
          lastRound.queryTitle = '搜索世界新闻';
          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
        }
        break;
      }
      case 'get_root_messaage_comment': { // 获取某条消息的全部评论
        lastRound.title = '获取该消息的全部评论';
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
            console.log('get_taiwan_news', result);
            lastRound.queryLoading = false;
            lastRound.retrievals = (result || []).map((item, idx) => ({
              id: item.user_id,
              title: item.user_name || item.user_id || '-',
              content: item.content || '',
              platform: platformTypeChange(item.platform) || '',
              comment_count: item.comment_count,
              message_id: item.message_id,
              time: item.publish_time,
              type: 'messaage_comment'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
          lastRound.queryTitle = '查找平台';
          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
        }
        break;
      }
      case 'search_user_behavior': { // 查询该用户的历史行为
        lastRound.title = '查询该用户的历史行为';
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result);
            console.log('search_user_behavior', result);
            lastRound.queryLoading = false;
            lastRound.retrievals = (result.slice(0, 10) || []).map((item, idx) => ({
              id: item,
              title: item,
              content: item,
              type: 'user_behavior'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.platform) {
          lastRound.queryTitle = '查找平台';
          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query || platformTypeChange(toolData.tool_input.platform);
        }
        break;
      }
      case 'get_america_news': { // 根据关键词获取美国热点新闻
        lastRound.title = '美国热点新闻';
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result) as Array<{ user_name?: string; user_id?: string; content?: string; publish_time?: string; message_id?: string; platform?: string; comment_count?: number; }>
            console.log('get_taiwan_news', result);
            lastRound.queryLoading = false;
            lastRound.retrievals = (result || []).map((item, idx) => ({
              id: item.user_id,
              title: item.user_name || item.user_id || '-',
              content: item.content || '',
              platform: platformTypeChange(item.platform) || '',
              comment_count: item.comment_count,
              message_id: item.message_id,
              time: item.publish_time,
              type: 'america_news'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.keyword || toolData.tool_input.query) {
          lastRound.queryTitle = '查询美国热点新闻';
          lastRound.query = toolData.tool_input.keyword || toolData.tool_input.query;
        }
        break;
      }
      case 'get_time_data': { // 态势新闻搜索
        lastRound.title = '态势新闻搜索';
        console.log('get_time_data', toolData.tool_input)
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result)  as Array<{ title?: string; textid?: string; hot_num?: number; date?: string; content?: string }>
            console.log('get_time_data', result);
            lastRound.queryLoading = false;
            lastRound.queryTitle = '查询态势新闻';
            lastRound.retrievals = (result || []).map((item, idx) => ({
              id: item.textid,
              title: item.title,
              content: item.content || '',
              time: item.date,
              hot_num: item.hot_num,
              type: 'get_time_data'
            }));
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        } else if (toolData.tool_input.keyword || toolData.tool_input.query || toolData.tool_input.s || toolData.tool_input.e) {
          lastRound.query = `${toolData.tool_input.s} - ${toolData.tool_input.e}`;
        }
        break;
      }
       case 'get_textid_content': { // 获取新闻详细内容
        lastRound.title = '获取新闻详细内容';
        if (toolData.tool_input.result && lastRound) {
          try {
            const result = JSON.parse(toolData.tool_input.result)
            console.log('get_textid_content', result);
            lastRound.queryLoading = false;
            lastRound.textidContent = result.content;
          } catch (parseError) {
            console.error('搜索结果JSON解析错误:', parseError);
          }
        }
        break;
      }
      default:
        break;
    }
    if (!side) {
      state.current.messageList[1] = {
        ...mesItem,
        thinkingTrace: trace,
      }
      setMessages((prevMessages) => prevMessages.map((msg) => {
        if (msg.id !== assistantId || msg.role !== 'assistant' || !msg.thinkingTrace) return msg;
        return {
          ...msg,
          thinkingTrace: trace,
        };
      }));
    } else {
      state.current.compareResult[state.current.compareIndex][side].thinkingTrace = trace;
      updatePane(side, (pane) => {
        return {
          ...pane,
          thinkingTrace: trace,
        };
      });
    }
  };

  /**
   * 处理真实多轮 RAG 请求。
   *
   * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
   * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
   */
  const handleRun = async (query: string, side: 'left' | 'right' | null = null) => {
    setError(null);
    setIsLoading(true);
    setIsPreConnectLoading(true);
    try {
      const response = await fetch(`${generateUrl}/generate`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: query }),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      if (!response.body) {
        throw new Error('Response body is null');
      }
      setIsPreConnectLoading(false);

      const assistantId = `assistant-${Date.now()}`;
      const assistantMessage: Message = {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        thinkingTrace: createMultiRoundStreamTrace(),
      };
      if (!side) {
        state.current.messageList.push(assistantMessage); // 数据存储
        // 接口连通后再展示多轮检索主题与过程
        setMessages((prev) => [...prev, assistantMessage]);
      } else if (side === 'left' || side === 'right') {
        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
        updatePane(side, (pane) => {
          return {
            ...pane,
            thinkingTrace: createMultiRoundStreamTrace(),
          };
        });
      }

      const reader = response.body.getReader();
      // 保存 reader 引用，用于"停止生成"功能
      if (!side) {
        readerRef.current = reader;
      } else {
        compareReaderRef.current[side] = reader;
      }
      const decoder = new TextDecoder();
      let buffer = '';

      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) {
            console.log('聊天记录', state.current.compareResult);
            if (!side) {
              chatHistoryAddSearch();
            }
            break;
          }

          buffer += decoder.decode(value, { stream: true });
          const lines = buffer.split('\n');
          const lastLine = lines.pop();
          buffer = lastLine || '';

          for (const line of lines) {
            if (!line.startsWith('data: ')) continue;

            try {
              const parsedData = JSON.parse(line.slice(6)) as {
                event: string;
                data: any;
              };
              const { event, data } = parsedData;

              switch (event) {
                case 'task_created': {
                  taskIdRef.current = data?.task_id || null;
                  break;
                }
                case 'tool_call': {
                  handleToolCall(data as ToolCallData, assistantId, side);
                  break;
                }
                case 'message': {
                  if (typeof data === 'string') {
                    setMessages((prevMessages) => prevMessages.map((msg) => {
                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
                      return {
                        ...msg,
                        thinkingTrace: {
                          ...msg.thinkingTrace,
                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
                        },
                      };
                    }));
                  }
                  break;
                }
                case 'references': {
                  const refs = Array.isArray(data?.references) ? data.references : [];
                  const mappedRefs = refs.map(mapReferenceToSource);
                  setSearchProcess((prev) => ({
                    ...prev,
                    hits: mappedRefs.length,
                  }));
                  setMessages((prevMessages) => prevMessages.map((msg) => (
                    msg.id === assistantId
                      ? { ...msg, sources: mappedRefs }
                      : msg
                  )));
                  break;
                }
                case 'done': {
                  setIsLoading(false);
                  break;
                }
                default:
                  console.log(`未知事件类型: ${event}`, data);
              }
            } catch (parseError) {
              console.error('JSON解析错误:', parseError);
              console.error('原始数据:', line.slice(6));
            }
          }
        }
      } finally {
        if (readerRef.current) {
          readerRef.current.releaseLock();
          readerRef.current = null;
        }
      }
    } catch (runError) {
      console.error('处理请求时发生错误:', runError);
      setIsLoading(false);
      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
      setIsPreConnectLoading(false);
    } finally {
      // 无论成功还是失败，都要重置加载状态和解锁提交
      setIsPreConnectLoading(false);
      setIsLoading(false);
      submitLockRef.current = false;
      handleStopCompareSide(side);
    }
  };

  /**
 * 处理任务检索 请求。
 *
 * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
 * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
 */
  const handleTaskRun = async (query: string, side: 'left' | 'right' | null = null) => {
    setError(null);
    setIsLoading(true);
    setIsPreConnectLoading(true);

    try {
      const response = await fetch(`${taskChatUrl}/generate`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: query }),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      if (!response.body) {
        throw new Error('Response body is null');
      }
      setIsPreConnectLoading(false);

      const assistantId = `assistant-${Date.now()}`;
      const assistantMessage: Message = {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        thinkingTrace: createMultiRoundStreamTrace(),
      };
      if (!side) {
        state.current.messageList.push(assistantMessage); // 数据存储
        // 接口连通后再展示多轮检索主题与过程
        setMessages((prev) => [...prev, assistantMessage]);
      } else if (side === 'left' || side === 'right') {
        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
        updatePane(side, (pane) => {
          return {
            ...pane,
            thinkingTrace: createMultiRoundStreamTrace(),
          };
        });
      }

      const reader = response.body.getReader();
      if (!side) {
        readerRef.current = reader;
      } else {
        compareReaderRef.current[side] = reader;
      }
      const decoder = new TextDecoder();
      let buffer = '';

      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) {
            console.log('聊天记录', state.current.messageList);
            chatHistoryAddSearch();
            break;
          }

          buffer += decoder.decode(value, { stream: true });
          const lines = buffer.split('\n');
          const lastLine = lines.pop();
          buffer = lastLine || '';

          for (const line of lines) {
            if (!line.startsWith('data: ')) continue;

            try {
              const parsedData = JSON.parse(line.slice(6)) as {
                event: string;
                data: any;
              };
              const { event, data } = parsedData;

              switch (event) {
                case 'task_created': {
                  taskIdRef.current = data?.task_id || null;
                  break;
                }
                case 'tool_call': {
                  handleToolCall(data as ToolCallData, assistantId, side);
                  break;
                }
                case 'message': {
                  if (typeof data === 'string') {
                    setMessages((prevMessages) => prevMessages.map((msg) => {
                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
                      return {
                        ...msg,
                        thinkingTrace: {
                          ...msg.thinkingTrace,
                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
                        },
                      };
                    }));
                  }
                  break;
                }
                case 'references': {
                  const refs = Array.isArray(data?.references) ? data.references : [];
                  const mappedRefs = refs.map(mapReferenceToSource);
                  setSearchProcess((prev) => ({
                    ...prev,
                    hits: mappedRefs.length,
                  }));
                  setMessages((prevMessages) => prevMessages.map((msg) => (
                    msg.id === assistantId
                      ? { ...msg, sources: mappedRefs }
                      : msg
                  )));
                  break;
                }
                case 'done': {
                  setIsLoading(false);
                  break;
                }
                default:
                  console.log(`未知事件类型: ${event}`, data);
              }
            } catch (parseError) {
              console.error('JSON解析错误:', parseError);
              console.error('原始数据:', line.slice(6));
            }
          }
        }
      } finally {
        if (readerRef.current) {
          readerRef.current.releaseLock();
          readerRef.current = null;
        }
      }
    } catch (runError) {
      console.error('处理请求时发生错误:', runError);
      setIsLoading(false);
      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
      setIsPreConnectLoading(false);
    } finally {
      // 无论成功还是失败，都要重置加载状态和解锁提交
      setIsPreConnectLoading(false);
      setIsLoading(false);
      submitLockRef.current = false;
      handleStopCompareSide(side);
    }
  };

  /**
* 处理画像检索 请求。
*
* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
*/
  const handleHxRun = async (query: string, side: 'left' | 'right' | null = null) => {
    setError(null);
    setIsLoading(true);
    setIsPreConnectLoading(true);

    try {
      const response = await fetch(`${taskChatUrl}/generate_b2`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: query }),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      if (!response.body) {
        throw new Error('Response body is null');
      }
      setIsPreConnectLoading(false);

      const assistantId = `assistant-${Date.now()}`;
      const assistantMessage: Message = {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        thinkingTrace: createMultiRoundStreamTrace(),
      };
      if (!side) {
        state.current.messageList.push(assistantMessage); // 数据存储
        // 接口连通后再展示多轮检索主题与过程
        setMessages((prev) => [...prev, assistantMessage]);
      } else if (side === 'left' || side === 'right') {
        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
        updatePane(side, (pane) => {
          return {
            ...pane,
            thinkingTrace: createMultiRoundStreamTrace(),
          };
        });
      }

      const reader = response.body.getReader();
      if (!side) {
        readerRef.current = reader;
      } else {
        compareReaderRef.current[side] = reader;
      }
      const decoder = new TextDecoder();
      let buffer = '';

      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) {
            console.log('聊天记录', state.current.messageList);
            chatHistoryAddSearch();
            break;
          }

          buffer += decoder.decode(value, { stream: true });
          const lines = buffer.split('\n');
          const lastLine = lines.pop();
          buffer = lastLine || '';

          for (const line of lines) {
            if (!line.startsWith('data: ')) continue;

            try {
              const parsedData = JSON.parse(line.slice(6)) as {
                event: string;
                data: any;
              };
              const { event, data } = parsedData;

              switch (event) {
                case 'task_created': {
                  taskIdRef.current = data?.task_id || null;
                  break;
                }
                case 'tool_call': {
                  handleToolCall(data as ToolCallData, assistantId);
                  break;
                }
                case 'message': {
                  if (typeof data === 'string') {
                    setMessages((prevMessages) => prevMessages.map((msg) => {
                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
                      return {
                        ...msg,
                        thinkingTrace: {
                          ...msg.thinkingTrace,
                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
                        },
                      };
                    }));
                  }
                  break;
                }
                case 'references': {
                  const refs = Array.isArray(data?.references) ? data.references : [];
                  const mappedRefs = refs.map(mapReferenceToSource);
                  setSearchProcess((prev) => ({
                    ...prev,
                    hits: mappedRefs.length,
                  }));
                  setMessages((prevMessages) => prevMessages.map((msg) => (
                    msg.id === assistantId
                      ? { ...msg, sources: mappedRefs }
                      : msg
                  )));
                  break;
                }
                case 'done': {
                  setIsLoading(false);
                  break;
                }
                default:
                  console.log(`未知事件类型: ${event}`, data);
              }
            } catch (parseError) {
              console.error('JSON解析错误:', parseError);
              console.error('原始数据:', line.slice(6));
            }
          }
        }
      } finally {
        if (readerRef.current) {
          readerRef.current.releaseLock();
          readerRef.current = null;
        }
      }
    } catch (runError) {
      console.error('处理请求时发生错误:', runError);
      setIsLoading(false);
      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
      setIsPreConnectLoading(false);
    } finally {
      // 无论成功还是失败，都要重置加载状态和解锁提交
      setIsPreConnectLoading(false);
      setIsLoading(false);
      submitLockRef.current = false;
      handleStopCompareSide(side);
    }
  };

   /**
* 处理画像检索 请求。
*
* 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
* 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
*/
  const newsReportRun = async (query: string, side: 'left' | 'right' | null = null) => {
    setError(null);
    setIsLoading(true);
    setIsPreConnectLoading(true);

    try {
      const response = await fetch(`${taskChatUrl}/generate_report`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt: query }),
      });

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }

      if (!response.body) {
        throw new Error('Response body is null');
      }
      setIsPreConnectLoading(false);

      const assistantId = `assistant-${Date.now()}`;
      const assistantMessage: Message = {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        thinkingTrace: createMultiRoundStreamTrace(),
      };
      if (!side) {
        state.current.messageList.push(assistantMessage); // 数据存储
        // 接口连通后再展示多轮检索主题与过程
        setMessages((prev) => [...prev, assistantMessage]);
      } else if (side === 'left' || side === 'right') {
        state.current.compareResult[state.current.compareIndex][side].thinkingTrace = createMultiRoundStreamTrace();
        updatePane(side, (pane) => {
          return {
            ...pane,
            thinkingTrace: createMultiRoundStreamTrace(),
          };
        });
      }

      const reader = response.body.getReader();
      if (!side) {
        readerRef.current = reader;
      } else {
        compareReaderRef.current[side] = reader;
      }
      const decoder = new TextDecoder();
      let buffer = '';

      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) {
            console.log('聊天记录', state.current.messageList);
            chatHistoryAddSearch();
            break;
          }

          buffer += decoder.decode(value, { stream: true });
          const lines = buffer.split('\n');
          const lastLine = lines.pop();
          buffer = lastLine || '';

          for (const line of lines) {
            if (!line.startsWith('data: ')) continue;

            try {
              const parsedData = JSON.parse(line.slice(6)) as {
                event: string;
                data: any;
              };
              const { event, data } = parsedData;

              switch (event) {
                case 'task_created': {
                  taskIdRef.current = data?.task_id || null;
                  break;
                }
                case 'tool_call': {
                  handleToolCall(data as ToolCallData, assistantId);
                  break;
                }
                case 'message': {
                  if (typeof data === 'string') {
                    setMessages((prevMessages) => prevMessages.map((msg) => {
                      if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
                      return {
                        ...msg,
                        thinkingTrace: {
                          ...msg.thinkingTrace,
                          finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${data}`,
                        },
                      };
                    }));
                  }
                  break;
                }
                case 'references': {
                  const refs = Array.isArray(data?.references) ? data.references : [];
                  const mappedRefs = refs.map(mapReferenceToSource);
                  setSearchProcess((prev) => ({
                    ...prev,
                    hits: mappedRefs.length,
                  }));
                  setMessages((prevMessages) => prevMessages.map((msg) => (
                    msg.id === assistantId
                      ? { ...msg, sources: mappedRefs }
                      : msg
                  )));
                  break;
                }
                case 'done': {
                  setIsLoading(false);
                  break;
                }
                default:
                  console.log(`未知事件类型: ${event}`, data);
              }
            } catch (parseError) {
              console.error('JSON解析错误:', parseError);
              console.error('原始数据:', line.slice(6));
            }
          }
        }
      } finally {
        if (readerRef.current) {
          readerRef.current.releaseLock();
          readerRef.current = null;
        }
      }
    } catch (runError) {
      console.error('处理请求时发生错误:', runError);
      setIsLoading(false);
      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
      setIsPreConnectLoading(false);
    } finally {
      // 无论成功还是失败，都要重置加载状态和解锁提交
      setIsPreConnectLoading(false);
      setIsLoading(false);
      submitLockRef.current = false;
      handleStopCompareSide(side);
    }
  };

  /**
   * 单一模式下的发送入口。
   *
   * 这里只负责创建用户消息、重置输入框和按当前 qaMode 分发到对应执行器；
   * 具体的真实请求、模拟流和状态回填分别在各自 handler 内维护。
   */
  const handleSend = () => {
    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
    if (!inputValue.trim()) return;
    submitLockRef.current = true;
    const query = inputValue.trim();
    state.current.messageList = [];
    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: query,
      timestamp: new Date(),
    };
    state.current.messageList.push(userMessage);
    if (qaMode === 'multi-round') { // 多轮检索
      setMessages((prev) => [...prev, userMessage]);
      setInputValue('');
      setSearchProcess({
        currentMode: '多轮RAG',
        rounds: 0,
        hits: 0,
        queryRewrite: '',
      });
      void handleRun(query);
      return;
    }

    if (qaMode === 'deep-search') { // 任务检索
      setMessages((prev) => [...prev, userMessage]);
      setInputValue('');
      setSearchProcess({
        currentMode: '任务检索',
        rounds: 0,
        hits: 0,
        queryRewrite: '',
      });
      void handleTaskRun(query);
      return;
    }

    if (qaMode === 'hx-search') { // 任务检索
      setMessages((prev) => [...prev, userMessage]);
      setInputValue('');
      setSearchProcess({
        currentMode: '画像检索',
        rounds: 0,
        hits: 0,
        queryRewrite: '',
      });
      void handleHxRun(query);
      return;
    }

    if (qaMode === 'news-report') { // 新闻报告生成
      setMessages((prev) => [...prev, userMessage]);
      setInputValue('');
      setSearchProcess({
        currentMode: '新闻报告生成',
        rounds: 0,
        hits: 0,
        queryRewrite: '',
      });
      void newsReportRun(query);
      return;
    }

    if (qaMode === 'single-round') { // 单轮RAG
      setMessages((prev) => [...prev, userMessage]);
      setInputValue('');
      setSearchProcess({
        currentMode: '单轮RAG',
        rounds: 1,
        hits: 0,
        queryRewrite: '',
      });
      void handleSingleRoundRun(query);
      return;
    }

    if (qaMode === 'single-chat') { // 大模型问答
      console.log('进入了这里')
      setMessages((prev) => [...prev, userMessage]);
      setInputValue('');
      setSearchProcess({
        currentMode: '大模型问答',
        rounds: 1,
        hits: 0,
        queryRewrite: '',
      });
      void chatRun(query);
      // handleMockSingleRoundRun(query);
      return;
    }

    setIsLoading(true);
    setMessages((prev) => [...prev, userMessage]);
    setInputValue('');
  };

  /**
   * 对比模式发送入口。
   *
   * 左右面板共享同一个用户问题，但各自按选择的模式独立运行、独立 loading、独立 sources。
   * 通过 `updatePane` 将左右面板更新收敛到一个函数，避免并发请求互相覆盖状态。
   */
  const handleCompare = () => {
    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
    if (!inputValue.trim()) return;
    submitLockRef.current = true;
    const query = inputValue.trim();
    setInputValue('');
    setCompareUserInput(query);
    setError(null);
    setIsLoading(true);
    const compareId = Date.now().toString();
    console.log('compareLeftMode',compareLeftMode)
    const compareItem = {
      id: compareId,
      compareUserInput: query,
      left: createComparePane(compareLeftMode),
      right: createComparePane(compareRightMode),
    }
    setCompareResult((pev) => [...pev, compareItem]);
    state.current.compareResult = [];
    state.current.compareId = compareId;
    state.current.compareResult.push(compareItem);
    state.current.compareIndex = state.current.compareResult.length - 1;
    console.log('compareItem', compareItem)
    const runByMode = (side: 'left' | 'right', mode: QAMode) => {
      if (mode === 'single-chat') { // 大模型问答
        return chatRun(query, side);
      } else if (mode === 'single-round') { // 单轮rag检索
        return handleSingleRoundRun(query, side);
      } else if (mode === 'multi-round') { // 多轮检索
        return handleRun(query, side);
      } else if (mode === 'deep-search') { // 任务检索
        return handleTaskRun(query, side);
      } else if (mode === 'hx-search') { // 画像检索
        return handleHxRun(query, side); 
      } else if (mode === 'news-report') { // 新闻检索
        return handleHxRun(query, side);
      }
    };

    Promise.allSettled([
      runByMode('left', compareLeftMode).finally(() => updatePane('left', (pane) => ({ ...pane, loading: false }))),
      runByMode('right', compareRightMode).finally(() => updatePane('right', (pane) => ({ ...pane, loading: false }))),
    ]).finally(() => {
      setIsLoading(false);
      submitLockRef.current = false;
      chatHistoryAddSearch();
    });
  };

  const handleStopCompareSide = (side: 'left' | 'right') => {
    const reader = compareReaderRef.current[side];
    if (reader) {
      void reader.cancel(`用户停止${side === 'left' ? '左侧' : '右侧'}生成`);
      compareReaderRef.current[side] = null;
    }
    updatePane(side, (pane) => ({ ...pane, loading: false }))
  };

  /**
   * 停止当前生成。
   *
   * 真实请求通过 reader.cancel() 中断读取；本地模拟通过 ref 标记让异步循环自行退出。
   * 对比模式需要同时停止左右两侧，单一模式只处理当前主 reader。
   */
  const handleStop = () => {
    if (viewMode === 'compare') {
      handleStopCompareSide('left');
      handleStopCompareSide('right');
      setIsLoading(false);
      submitLockRef.current = false;
      return;
    }
    mockSingleRoundStoppedRef.current = true;
    mockMultiRoundStoppedRef.current = true;
    if (readerRef.current) {
      void readerRef.current.cancel('用户手动停止');
      readerRef.current = null;
    }
    setIsPreConnectLoading(false);
    setIsLoading(false);
    submitLockRef.current = false;
  };

  /**
   * 对“生成中切换页面/模式/布局”进行统一保护。
   *
   * 如果当前没有生成任务，直接执行目标操作；否则弹出确认框。
   * 用户确认后先停止生成，再执行原操作，避免生成流继续写入已经切换的 UI 状态。
   */
  const runAfterGenerationConfirm = (action: () => void) => {
    if (!isLoading) {
      action();
      return;
    }
    pendingActionRef.current = action;
    // Dialog.confirm({
    //   header: '模型正在生成',
    //   body: '当前模型仍在生成内容。确认后将停止生成，并继续执行你的操作。',
    //   confirmBtn: '确认停止并继续',
    //   cancelBtn: '取消',
    //   onConfirm: () => {
    //     handleStop();
    //     pendingActionRef.current?.();
    //     pendingActionRef.current = null;
    //   },
    //   onClose: () => {
    //     pendingActionRef.current = null;
    //   },
    // });
  };

  const handleSafeViewModeChange = (mode: ViewMode) => {
    if (mode === viewMode) return;
    runAfterGenerationConfirm(() => setViewMode(mode));
  };

  const handleSafeNavigate = (page: PageType) => {
    runAfterGenerationConfirm(() => onNavigate(page));
  };

  const handleSafeReset = () => {
    runAfterGenerationConfirm(() => {
      setMessages([]);
      setCompareResult(null);
    });
  };

  const handleSafeModeChange = (mode: QAMode) => {
    runAfterGenerationConfirm(() => setQaMode(mode));
  };

  const handleSafeCompareLeftModeChange = (mode: QAMode) => {
    runAfterGenerationConfirm(() => setCompareLeftMode(mode));
  };

  const handleSafeCompareRightModeChange = (mode: QAMode) => {
    runAfterGenerationConfirm(() => setCompareRightMode(mode));
  };

  const handleSafeCompareLayoutChange = (layout: 'horizontal' | 'vertical') => {
    runAfterGenerationConfirm(() => setCompareLayout(layout));
  };

  const handleSaveRecord = () => {
    alert('问答记录已保存');
  };

  const handleCollect = () => {
    alert('已添加到收藏');
  };

  const handleKeyDown = (e) => {
    // if (e.key === 'Enter' && !e.shiftKey) {
    //   console.log('回车了')
    //   e.preventDefault();
    //   if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
    //   if (viewMode === 'compare') {
    //     handleCompare();
    //   } else {
    //     handleSend();
    //   }
    // }
    // console.log('e',e)
    // if ((e.metaKey || e.ctrlKey || e.shiftKey) && e.key === "Enter") {
    //   e.preventDefault();
    // } else if (e.keyCode === 13) {
    //   e.preventDefault();
    //   console.log('回车了')
    // } else if (e.key === "/") {
    //   e.preventDefault();
    // }
    // if (e.repeat || submitLockRef.current || isLoading || isPreConnectLoading) return;
    state.current.messageList = [];
    if (viewMode === 'compare') {
      handleCompare();
    } else {
      handleSend();
    }
    setIsAutoScrollEnabled(true);
    setShowScrollToBottom(false);
    scrollToBottom(true);
  };

  // 获取模式标签
  const getModeLabel = (mode: QAMode) => {
    switch (mode) {
      case 'single-chat': return '大模型';
      case 'single-round': return '单轮RAG';
      case 'multi-round': return '多轮RAG';
      case 'deep-search': return '任务检索';
      case 'hx-search': return '画像检索';
      case 'news-report': return '新闻报告生成';
    }
  };

  const activeAssistantMessageId = isLoading
    ? [...messages].reverse().find((msg) => msg.role === 'assistant')?.id
    : undefined;

  useEffect(() => {
    setQaMode('news-report');
    // setMessages(createMockSingleRagMessages());
    // setSearchProcess({
    //   currentMode: '单轮RAG',
    //   rounds: 1,
    //   hits: 3,
    //   queryRewrite: '',
    // });
    chatDataSearch();
  }, [viewMode]);

  // 创建聊天窗口
  const addChatDataChange = async () => {
    let qaMode = 'SINGLE_RAG';
    if (viewMode === 'compare') {
      qaMode = 'MULTI_RAG'
    }
    const parmy = {
      userId: userId.current,
      qaType: qaType.current,
      questionTitle: '新建问答',
      qaMode: qaMode,
    }
    const res = await service.post(`${zncmUrl}/llm/qa/history/create`, parmy);
    console.log(res);
    const result = res.data;
    chatDataId.current = result.id;
    if (viewMode === 'compare') {
      compareChatId.current = result.id;
    } else {
      chatDataId.current = result.id;
    }
  }

  // 查找聊天记录窗口
  const chatDataSearch = async () => {
    let qaMode = 'SINGLE_RAG';
    console.log('viewMode', viewMode)
    if (viewMode === 'compare') {
      qaMode = 'MULTI_RAG'
    }

    const parmy = {
      userId: userId.current,
      qaType: qaType.current,
      qaMode: qaMode,
      current: 1,
      size: 10
    }
    const res = await service.post(`${zncmUrl}/llm/qa/history/page`, parmy);
    console.log('res', res);
    const result = res.data;
    if (result.length === 0) {
      await addChatDataChange();
    } else if (result.length > 0) {
      if (viewMode === 'compare') {
        compareChatId.current = result[0].id;
      } else {
        chatDataId.current = result[0].id;
      }
    }
    await chatHistorySearch();
    console.log('chatDataId', chatDataId.current, compareChatId.current)
  }

  // 根据对话记录窗口查找对话记录
  const chatHistorySearch = async () => {
    let chatHistoryId = chatDataId.current;
    if (viewMode === 'compare') {
      chatHistoryId = compareChatId.current;
    }
    const res = await service.get(`${zncmUrl}/llm/qa/history/pairs/${chatHistoryId}`, '');
    console.log('问答记录', res);
    // 1. 修正变量名 result
    const result = res.data;
    if (viewMode !== 'compare') {
      // 2. 使用 flatMap 将二维数组拍平，并生成新的消息列表
      const messageList: Message[] = result.flatMap((item, itemIndex) => {
        // 3. 安全解析 JSON，使用 ?? 提供空数组兜底
        const parsedAnswers = JSON.parse(item.answer ?? '[]');

        // 4. map 处理每一条 answer，生成新的对象（不修改原对象）
        return parsedAnswers.map((aItem: any, aIndex: number) => {
          return {
            ...aItem,
            // 优化 ID 赋值逻辑：建议不管是不是索引 1，都补全 ID，防止遗漏
            // 如果必须只针对第二条，保留原逻辑，但增加安全性
            id: aIndex === 1 ? String(item.id) : (aItem.id || `temp-${itemIndex}-${aIndex}`),

            // 如果后端返回的数据缺少 timestamp 或 role，最好在这里补全默认值
            timestamp: aItem.timestamp ? new Date(aItem.timestamp) : new Date(),
            role: aItem.role || 'assistant',
          } as Message;
        });
      });
      console.log('result', messageList); // 此时 result 保持纯净，未被修改
      setMessages(messageList);
    } else {
      console.log(result);
      const messageList = result.flatMap(item => {
        const parsedAnswers = JSON.parse(item.answer ?? '[]');
        return parsedAnswers.map(aItem => ({
          ...aItem,
          left: {
            ...aItem.left,
            loading: false,
          },
          right: {
            ...aItem.right,
            loading: false,
          },
          id: item.id,
        }));
      });
      console.log('messageList', messageList)
      setCompareResult(messageList);
    }
    // state.current.messageList = reuslt || [];
  }

  // 创建记录窗口
  const chatHistoryAddSearch = async () => {
    let historyId = chatDataId.current;
    let answer = '';
    let question = '';
    if (viewMode === 'compare') {
      historyId = compareChatId.current;
      answer = JSON.stringify(state.current.compareResult);
      question = state.current.compareResult[0].compareUserInput;
    } else {
      answer = JSON.stringify(state.current.messageList);
      question = state.current.messageList[0].content;
    }
    const param = {
      historyId: historyId,
      userId: userId.current,
      answer: answer,
      question: question,
    }
    const res = await service.post(`${zncmUrl}/llm/qa/history/pair/add`, param);
    console.log('添加聊天记录窗口', res);
  }

  /**
   * 滚动到底部。
   *
   * 聊天区默认跟随新消息自动滚动；当用户手动上滑查看历史时会暂停自动滚动，避免打断阅读。
   */
  const scrollToBottom = (smooth = false) => {
    if (!chatListRef.current) return;
    chatListRef.current.scrollTo({
      top: chatListRef.current.scrollHeight,
      behavior: smooth ? 'smooth' : 'auto',
    });
  };

  useEffect(() => {
    if (isAutoScrollEnabled) {
      scrollToBottom(false);
    }
  }, [messages, isLoading, isAutoScrollEnabled, compareResult]);

  const handleChatScroll = () => {
    if (!chatListRef.current) return;
    const { scrollTop, scrollHeight, clientHeight } = chatListRef.current;
    const isNearBottom = scrollHeight - (scrollTop + clientHeight) < 80;
    setIsAutoScrollEnabled(isNearBottom);
    setShowScrollToBottom(!isNearBottom);
  };

  const getAssistantAnswerText = (message: Message) => (
    message.singleRagTrace?.answerMarkdown || message.thinkingTrace?.finalAnswerMarkdown || message.content
  );

  const getAssistantThinkingText = (message: Message) => {
    if (message.singleRagTrace) return message.singleRagTrace.thinkingMarkdown;
    if (message.thinkingTrace) {
      return message.thinkingTrace.rounds.map((round, index) => (
        `## 第 ${index + 1} 轮：${round.title}\n${round.thoughtMarkdown}`
      )).join('\n\n');
    }
    return '';
  };

  const handleCopyAssistantMessage = async (message: Message) => {
    const answerText = getAssistantAnswerText(message);
    try {
      await navigator.clipboard.writeText(answerText);
    } catch (copyError) {
      console.error('复制模型回答失败:', copyError);
    }
  };

  const handleDeleteAssistantMessage = (message: Message) => {
    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
    setMessages((prev) => prev.filter((msg) => msg.id !== message.id && msg.id !== previousUserMessage?.id));
  };

  const handleEditAssistantMessage = (message: Message) => {
    setEditingMessageId(message.id);
    setEditingThinking(getAssistantThinkingText(message));
    setEditingAnswer(getAssistantAnswerText(message));
  };

  const handleCancelAssistantEdit = () => {
    setEditingMessageId(null);
    setEditingThinking('');
    setEditingAnswer('');
  };

  const handleSaveAssistantEdit = () => {
    if (!editingMessageId) return;
    setMessages((prev) => prev.map((msg) => {
      if (msg.id !== editingMessageId) return msg;
      if (msg.singleRagTrace) {
        return {
          ...msg,
          content: editingAnswer,
          singleRagTrace: {
            ...msg.singleRagTrace,
            thinkingMarkdown: editingThinking,
            answerMarkdown: editingAnswer,
            thinkingComplete: true,
          },
        };
      }
      if (msg.thinkingTrace) {
        const rounds = msg.thinkingTrace.rounds.length > 0
          ? msg.thinkingTrace.rounds.map((round, index) => (
            index === 0 ? { ...round, thoughtMarkdown: editingThinking } : round
          ))
          : msg.thinkingTrace.rounds;
        return {
          ...msg,
          content: editingAnswer,
          thinkingTrace: {
            ...msg.thinkingTrace,
            rounds,
            finalAnswerMarkdown: editingAnswer,
          },
        };
      }
      return { ...msg, content: editingAnswer };
    }));
    handleCancelAssistantEdit();
  };

  const handleResendAssistantMessage = (message: Message) => {
    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
    const messageIndex = messages.findIndex((msg) => msg.id === message.id);
    const previousUserMessage = [...messages.slice(0, messageIndex)].reverse().find((msg) => msg.role === 'user');
    if (!previousUserMessage) return;

    submitLockRef.current = true;
    setMessages((prev) => prev.filter((msg) => msg.id !== message.id));
    setInputValue('');

    if (message.singleRagTrace) {
      setSearchProcess({ currentMode: '单轮RAG', rounds: 1, hits: 0, queryRewrite: '' });
      void handleSingleRoundRun(previousUserMessage.content);
      return;
    }

    setSearchProcess({ currentMode: '多轮RAG', rounds: 0, hits: 0, queryRewrite: '' });
    void handleRun(previousUserMessage.content);
  };

  /**
   * 点击答案中的引用编号后打开引用详情弹窗。
   *
   * Markdown 中的 `[[1]]` 与 sources 数组采用 1-based 对齐，因此这里需要减 1 取数组下标。
   */
  const handleCitationClick = (message: Message, citationIndex: number) => {
    const source = message.sources?.[citationIndex - 1];
    if (!source) return;
    setSelectedCitation(source);
  };

  const handleCompareCitationClick = (side: 'left' | 'right', citationIndex: number) => {
    const source = compareResult?.[side]?.sources?.[citationIndex - 1];
    if (!source) return;
    setSelectedCitation(source);
  };

  useEffect(() => {
    if (viewMode === 'compare') {
      setCompareLeftMode('single-round');
      setCompareRightMode('multi-round');
    }
  }, [viewMode]);

  useEffect(() => {
    if (viewMode !== 'compare' || !compareResult) return;
    // setIsLoading(compareResult.left.loading || compareResult.right.loading);
  }, [viewMode, compareResult]);

  // 离开浏览器页面时无法展示自定义 Dialog，因此使用原生 beforeunload 提醒用户生成会被中断。
  // useEffect(() => {
  //   const handleBeforeUnload = (event: BeforeUnloadEvent) => {
  //     if (!isLoading) return;
  //     event.preventDefault();
  //     event.returnValue = '模型正在生成，离开页面将停止当前生成。';
  //   };

  //   window.addEventListener('beforeunload', handleBeforeUnload);
  //   return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  // }, [isLoading]);

  return (
    <div className={`h-[calc(100vh-120px)] flex flex-col theme-bg rounded-xl ${isDark ? 'bg-slate-800/50' : 'bg-white'} border ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
      <GeneralQAHeader
        chatHeadTitle={'课题研究'}
        chatDesign={'支持任务检索，画像检索，新闻报告生成'}
        compareShow={false}
        isDark={isDark}
        viewMode={viewMode}
        setViewMode={handleSafeViewModeChange}
        onNavigate={handleSafeNavigate}
      />

      {/* 主体内容区 */}
      <div className="flex-1 flex overflow-hidden">
        <GeneralQAConfigSidebar
          isDark={isDark}
          viewMode={viewMode}
          qaMode={qaMode}
          compareLeftMode={compareLeftMode}
          compareRightMode={compareRightMode}
          compareLayout={compareLayout}
          knowledgeScope={knowledgeScope}
          answerStyle={answerStyle}
          showSources={showSources}
          showProcess={showProcess}
          autoSummarizeDiff={autoSummarizeDiff}
          recommendBetter={recommendBetter}
          isCollapsed={isLeftSidebarCollapsed}
          qaModeOptions={qaModeList}
          setQaMode={handleSafeModeChange}
          setCompareLeftMode={handleSafeCompareLeftModeChange}
          setCompareRightMode={handleSafeCompareRightModeChange}
          setCompareLayout={handleSafeCompareLayoutChange}
          setKnowledgeScope={setKnowledgeScope}
          setAnswerStyle={setAnswerStyle}
          setShowSources={setShowSources}
          setShowProcess={setShowProcess}
          setAutoSummarizeDiff={setAutoSummarizeDiff}
          setRecommendBetter={setRecommendBetter}
          setIsCollapsed={setIsLeftSidebarCollapsed}
        />

        {/* 中间结果区 */}
        <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
          {viewMode === 'single' ? (
            <>
              {/* 聊天消息区 */}
              <div
                ref={chatListRef}
                onScroll={handleChatScroll}
                className="relative flex-1 overflow-y-auto p-4 space-y-4"
              >
                {messages.length === 0 ? (
                  <EmptyChatState
                    icon={<MessageSquare className="w-11 h-11 opacity-60" />}
                    title="开始你的问答"
                    description="输入问题，获取基于知识库的智能回答"
                  />
                ) : (
                  messages.map((msg) => (
                    <ChatMessage
                      key={msg.id}
                      message={msg}
                      showSources={showSources}
                      assistantLabel="知识库助手"
                      assistantActive={msg.id === activeAssistantMessageId}
                      onCitationClick={handleCitationClick}
                      onCopyAssistant={handleCopyAssistantMessage}
                      onDeleteAssistant={handleDeleteAssistantMessage}
                      onEditAssistant={handleEditAssistantMessage}
                      onResendAssistant={handleResendAssistantMessage}
                    />
                  ))
                )}

                {isPreConnectLoading && (
                  <TypingIndicator
                    label={qaMode === 'single-round' ? '正在流式生成单轮 RAG 回复' : '正在生成思考过程与检索内容'}
                    assistantLabel="知识库助手"
                  />
                )}

                {error && (
                  <div className={`ml-12 max-w-[70%] rounded-xl border px-4 py-3 text-sm ${isDark
                    ? 'bg-red-900/20 border-red-700/50 text-red-300'
                    : 'bg-red-50 border-red-200 text-red-700'
                    }`}>
                    {error}
                  </div>
                )}

                {showScrollToBottom && (
                  <button
                    type="button"
                    onClick={() => {
                      setIsAutoScrollEnabled(true);
                      setShowScrollToBottom(false);
                      scrollToBottom(true);
                    }}
                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
                      }`}
                    title="滚动到底部"
                  >
                    <ArrowDown className="w-5 h-5 mx-auto" />
                  </button>
                )}
              </div>
            </>
          ) : (
            <div ref={chatListRef} onScroll={handleChatScroll} className="flex-1 overflow-y-auto p-4">
              {/* 对比结果区 */}
              {
                compareResult.length === 0 && <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                  <GitCompare className="w-16 h-16 mb-4 opacity-50" />
                  <p className="text-lg">对比模式</p>
                  <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
                </div>
              }
              {
                compareResult.map((compare: CompareResult, index: number) => (
                  <div className="mb-[10px]" key={index}>
                    <div className="mb-4 flex justify-end">
                      <div className={`max-w-[72%] rounded-2xl px-4 py-3 shadow-sm ${isDark
                        ? 'bg-blue-600/70 text-white'
                        : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
                        }`}>
                        <p className="whitespace-pre-wrap leading-relaxed">{compare.compareUserInput}</p>
                      </div>
                    </div>
                    {compareResult ? (
                      compareLayout === 'horizontal' ? (
                        <div className="grid grid-cols-2 gap-4 min-w-0">
                          {/* 左侧结果 */}
                          <div className={`min-w-0 rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
                              <div className="flex items-center justify-between gap-2">
                                <div className="flex items-center gap-2">
                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
                                    }`}>
                                    {getModeLabel(compare.left.mode)}
                                  </span>
                                </div>
                                {compare.left.loading && (
                                  <button
                                    type="button"
                                    onClick={() => handleStopCompareSide('left')}
                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
                                      }`}
                                  >
                                    <Square className="w-3 h-3 fill-current" />
                                    停止
                                  </button>
                                )}
                              </div>
                            </div>
                            <div className="p-4 min-w-0">
                              <div className="flex-1 min-w-0">
                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat')? (
                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
                                ) : (
                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
                                )}
                              </div>
                            </div>
                          </div>

                          {/* 右侧结果 */}
                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
                              <div className="flex items-center justify-between gap-2">
                                <div className="flex items-center gap-2">
                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
                                    }`}>
                                    {getModeLabel(compare.right.mode)}
                                  </span>
                                </div>
                                {compare.right.loading && (
                                  <button
                                    type="button"
                                    onClick={() => handleStopCompareSide('right')}
                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
                                      }`}
                                  >
                                    <Square className="w-3 h-3 fill-current" />
                                    停止
                                  </button>
                                )}
                              </div>
                            </div>
                            <div className="p-4 min-w-0 overflow-hidden">
                              <div className="flex-1 min-w-0">
                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
                                ) : (
                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
                                )}
                              </div>
                            </div>
                          </div>
                        </div>
                      ) : (
                        <div className="space-y-4">
                          {/* 上方结果 */}
                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
                              <div className="flex items-center justify-between gap-2">
                                <div className="flex items-center gap-2">
                                  <QAAvatar role="assistant" variant="blue" isActive={compare.left.loading} label="知识库助手" />
                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-blue-600/30 text-blue-400' : 'bg-blue-100 text-blue-600'
                                    }`}>
                                    {getModeLabel(compare.left.mode)}
                                  </span>
                                </div>
                                {compare.left.loading && (
                                  <button
                                    type="button"
                                    onClick={() => handleStopCompareSide('left')}
                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
                                      }`}
                                  >
                                    <Square className="w-3 h-3 fill-current" />
                                    停止
                                  </button>
                                )}
                              </div>
                            </div>
                            <div className="p-4 min-w-0 overflow-hidden">
                              <div className="flex-1 min-w-0">
                                {(compare.left.mode === 'single-round' || compare.left.mode === 'single-chat') ? (
                                  <SingleRagAnswer trace={compare.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
                                ) : (
                                  <RetrievalThinkingTrace trace={compare.left.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
                                )}
                              </div>
                            </div>
                          </div>

                          {/* 下方结果 */}
                          <div className={`min-w-0 overflow-hidden rounded-xl border ${isDark ? 'border-slate-700/50' : 'border-red-200'}`}>
                            <div className={`px-4 py-3 border-b ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-red-50/50'}`}>
                              <div className="flex items-center justify-between gap-2">
                                <div className="flex items-center gap-2">
                                  <QAAvatar role="assistant" variant="purple" isActive={compare.right.loading} label="知识库助手" />
                                  <span className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-purple-600/30 text-purple-400' : 'bg-purple-100 text-purple-600'
                                    }`}>
                                    {getModeLabel(compare.right.mode)}
                                  </span>
                                </div>
                                {compare.right.loading && (
                                  <button
                                    type="button"
                                    onClick={() => handleStopCompareSide('right')}
                                    className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs ${isDark ? 'bg-rose-600/80 hover:bg-rose-600 text-white' : 'bg-red-500 hover:bg-red-600 text-white'
                                      }`}
                                  >
                                    <Square className="w-3 h-3 fill-current" />
                                    停止
                                  </button>
                                )}
                              </div>
                            </div>
                            <div className="p-4 min-w-0 overflow-hidden">
                              <div className="flex-1 min-w-0">
                                {(compare.right.mode === 'single-round' || compare.right.mode === 'single-chat') ? (
                                  <SingleRagAnswer trace={compare.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
                                ) : (
                                  <RetrievalThinkingTrace trace={compare.right.thinkingTrace || createMultiRoundStreamTrace()} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
                                )}
                              </div>
                            </div>
                          </div>
                        </div>
                      )
                    ) : (
                      <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
                        <GitCompare className="w-16 h-16 mb-4 opacity-50" />
                        <p className="text-lg">对比模式</p>
                        <p className="text-sm mt-2">输入问题，对比不同模式的回答效果</p>
                      </div>
                    )}
                  </div>
                ))
              }
              {showScrollToBottom && (
                  <button
                    type="button"
                    onClick={() => {
                      setIsAutoScrollEnabled(true);
                      setShowScrollToBottom(false);
                      scrollToBottom(true);
                    }}
                    className={`fixed left-1/2 -translate-x-1/2 bottom-36 z-20 w-11 h-11 rounded-full backdrop-blur-sm border shadow-lg transition-all ${isDark
                      ? 'bg-slate-800/65 border-slate-500/60 text-slate-100 hover:bg-slate-700/70'
                      : 'bg-white/70 border-gray-300 text-gray-700 hover:bg-white/85'
                      }`}
                    title="滚动到底部"
                  >
                    <ArrowDown className="w-5 h-5 mx-auto" />
                  </button>
                )}
            </div>
          )}

          {/* 底部输入区 */}
          <QAComposer
            value={inputValue}
            onChange={setInputValue}
            onKeyDown={handleKeyDown}
            onSubmit={viewMode === 'compare' ? handleCompare : handleSend}
            onStop={handleStop}
            canSubmit={!isLoading && Boolean(inputValue.trim())}
            onReset={handleSafeReset}
            onSave={handleSaveRecord}
            onCollect={handleCollect}
            onOpenSettings={() => setIsModelSettingsOpen(true)}
            isLoading={isLoading}
            placeholder={viewMode === 'compare' ? '输入问题进行对比分析...' : '输入你的问题...'}
            showReset
          />
        </div>

        {/* 右侧辅助区 */}
        {viewMode === 'single' && showProcess && (
          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
            }`}>
            {/* 检索过程 */}
            <div className="mb-6">
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                检索过程
              </h3>
              <div className={`p-4 rounded-xl ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>当前模式</span>
                    <span className={`text-sm font-medium ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
                      {searchProcess.currentMode}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>检索轮次</span>
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      {searchProcess.rounds}
                    </span>
                  </div>
                  <div className="flex items-center justify-between">
                    <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>命中数</span>
                    <span className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
                      {searchProcess.hits}
                    </span>
                  </div>
                  {searchProcess.queryRewrite && (
                    <div>
                      <span className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>Query改写</span>
                      <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                        {searchProcess.queryRewrite}
                      </p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        )}

        {/* 对比模式的差异总结 */}
        {/* {viewMode === 'compare' && compareResult?.differences && (
          <div className={`w-72 border-l flex-shrink-0 overflow-y-auto p-4 ${isDark ? 'border-slate-700/50 bg-slate-800/30' : 'border-red-100 bg-gray-50/50'
            }`}>
            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>
              差异总结
            </h3>
            <div className={`p-4 rounded-xl space-y-4 ${isDark ? 'bg-slate-700/50' : 'bg-white'}`}>
              <div>
                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-green-400' : 'text-green-600'}`}>
                  <CheckCircle className="w-3 h-3" />
                  一致观点
                </span>
                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                  {compareResult.differences.consensus}
                </p>
              </div>
              <div>
                <span className={`text-xs flex items-center gap-1 ${isDark ? 'text-yellow-400' : 'text-yellow-600'}`}>
                  <AlertCircle className="w-3 h-3" />
                  差异观点
                </span>
                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                  {compareResult.differences.differences}
                </p>
              </div>
              <div>
                <span className={`text-xs ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
                  {getModeLabel(compareResult.left.mode)}优势
                </span>
                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                  {compareResult.differences.leftAdvantage}
                </p>
              </div>
              <div>
                <span className={`text-xs ${isDark ? 'text-purple-400' : 'text-purple-600'}`}>
                  {getModeLabel(compareResult.right.mode)}优势
                </span>
                <p className={`text-xs mt-1 ${isDark ? 'text-slate-300' : 'text-gray-600'}`}>
                  {compareResult.differences.rightAdvantage}
                </p>
              </div>
            </div>
          </div>
        )} */}
      </div>

      {editingMessageId && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="absolute inset-0 bg-black/45 backdrop-blur-[1px]" onClick={handleCancelAssistantEdit} />
          <div className={`relative w-full max-w-3xl rounded-2xl border shadow-2xl p-5 ${isDark ? 'bg-slate-900 border-slate-700 text-slate-100' : 'bg-white border-gray-200 text-gray-900'
            }`}>
            <button
              type="button"
              onClick={handleCancelAssistantEdit}
              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
                }`}
              title="关闭"
            >
              <X className="w-4 h-4" />
            </button>
            <div className="pr-9">
              <h3 className="text-base font-semibold">编辑模型生成内容</h3>
              <p className={`mt-1 text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                可同时修改模型回答和思考过程，多轮检索会把思考过程写回第一轮思考内容。
              </p>
            </div>
            <div className="mt-4 grid gap-4 md:grid-cols-2">
              <label className="space-y-2">
                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>思考过程</span>
                <textarea
                  value={editingThinking}
                  onChange={(event) => setEditingThinking(event.target.value)}
                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
                    }`}
                />
              </label>
              <label className="space-y-2">
                <span className={`text-sm font-medium ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>最终回答</span>
                <textarea
                  value={editingAnswer}
                  onChange={(event) => setEditingAnswer(event.target.value)}
                  className={`h-80 w-full resize-none rounded-xl border p-3 text-sm focus:outline-none ${isDark ? 'border-slate-700 bg-slate-800 text-slate-100' : 'border-gray-200 bg-gray-50 text-gray-800'
                    }`}
                />
              </label>
            </div>
            <div className="mt-4 flex justify-end gap-2">
              <button type="button" onClick={handleCancelAssistantEdit} className={`px-4 py-2 rounded-xl text-sm ${isDark ? 'bg-slate-800 hover:bg-slate-700 text-slate-200' : 'bg-gray-100 hover:bg-gray-200 text-gray-700'}`}>
                取消
              </button>
              <button type="button" onClick={handleSaveAssistantEdit} className="px-4 py-2 rounded-xl text-sm bg-red-500 hover:bg-red-600 text-white">
                保存
              </button>
            </div>
          </div>
        </div>
      )}

      {selectedCitation && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div
            className="absolute inset-0 bg-black/45 backdrop-blur-[1px]"
            onClick={() => setSelectedCitation(null)}
          />
          <div className={`relative w-full max-w-xl rounded-2xl border shadow-2xl p-5 ${isDark
            ? 'bg-slate-900 border-slate-700 text-slate-100'
            : 'bg-white border-gray-200 text-gray-900'
            }`}>
            <button
              type="button"
              onClick={() => setSelectedCitation(null)}
              className={`absolute top-3 right-3 p-1.5 rounded-lg transition-all ${isDark ? 'hover:bg-slate-700 text-slate-300' : 'hover:bg-gray-100 text-gray-500'
                }`}
              title="关闭"
            >
              <X className="w-4 h-4" />
            </button>

            <div className="pr-9">
              <h3 className="text-base font-semibold">{selectedCitation.title || '引用内容'}</h3>
              <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
                <div>来源：{selectedCitation.source || selectedCitation.type || '未知来源'}</div>
                <div>时间：{selectedCitation.time || '未知'}</div>
              </div>
            </div>

            {selectedCitation.url && (
              <div className="mt-4">
                <a
                  href={`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${selectedCitation.url}`}
                  target="_blank"
                  rel="noreferrer"
                  className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm transition-all ${isDark
                    ? 'border-slate-600 text-slate-200 hover:bg-slate-800'
                    : 'border-gray-300 text-gray-700 hover:bg-gray-50'
                    }`}
                  title="打开原始链接"
                >
                  <ExternalLink className="w-4 h-4" />
                  查看原文链接
                </a>
              </div>
            )}

            <div className={`mt-4 rounded-xl p-3 text-sm leading-relaxed max-h-[500px] overflow-auto pr-[10px] whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
              }`}>
              {selectedCitation.content || selectedCitation.snippet || '暂无引用内容'}
            </div>
          </div>
        </div>
      )}

      <Dialog
        visible={isModelSettingsOpen}
        header="模型参数设置"
        width="520px"
        confirmBtn="保存"
        cancelBtn="取消"
        onConfirm={() => setIsModelSettingsOpen(false)}
        onClose={() => setIsModelSettingsOpen(false)}
      >
        <div className="space-y-6 py-2">
          <div>
            <label className={`block text-sm font-medium mb-2 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
              模型
            </label>
            <Select
              value={modelName}
              onChange={(value) => setModelName(String(value))}
              options={[
                { label: 'Qwen3-32B: 效果与速度均衡（推荐）', value: 'OpenAI3' },
                { label: 'Qwen3-235B：效果与速度均衡（推荐）', value: 'OpenAI4' },
                { label: 'GLM-5：逻辑性强，长上下文', value: 'OpenAI5' },
                { label: 'Qwen3.5-27B：深度思考过程长', value: 'OpenAI6' },
                { label: 'Qwen3-8B：速度快，效果较差', value: 'OpenAI7' },
                // { label: 'Qwen2.5-72B：老模型，发散性差', value: 'OpenAI8' },
                { label: '四季7B：速度快，效果较差', value: 'OpenAI9' },
              ]}
              style={{ width: '100%' }}
            />
          </div>
          <div>
            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
              相似度阈值 score_threshold：{scoreThreshold.toFixed(2)}
            </div>
            <Slider
              label
              layout="horizontal"
              min={0}
              max={1}
              step={0.01}
              value={scoreThreshold}
              onChange={(value) => setScoreThreshold(Number(value))}
            />
          </div>
          <div>
            <div className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
              温度 temperature：{temperature.toFixed(2)}
            </div>
            <Slider
              label
              layout="horizontal"
              min={0}
              max={1}
              step={0.01}
              value={temperature}
              onChange={(value) => setTemperature(Number(value))}
            />
          </div>
        </div>
      </Dialog>
    </div>
  );
};

export default TopicResearch;