import React, { useEffect, useRef, useState } from 'react';
import {
  GitCompare,
  MessageSquare,
  CheckCircle,
  AlertCircle,
  ArrowDown,
  ExternalLink,
  Square,
  X,
} 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, SourceItem, ToolCallData, ViewMode } from './GeneralQA.types';
import {
  chatDataJSON,
  createComparePane,
  createMockSingleRagMessages,
  createMultiRoundStreamTrace,
  createThinkingTrace,
  extractJsonObjects,
  mapDocsToSources,
  mapReferenceToSource,
  parseSingleRagStream,
} from './GeneralQA.mock';

/**
 * 通用问答组件
 * 支持单轮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 knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL
const GeneralQA: 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 | null>(null);
  // 对比模式下用户输入的问题内容，用于左右对比时的统一输入
  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: ReadableStreamDefaultReader<Uint8Array> | null;
    right: ReadableStreamDefaultReader<Uint8Array> | null;
  }>({ 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 [searchProcess, setSearchProcess] = useState({
    currentMode: '单轮RAG',
    rounds: 1,
    hits: 5,
    queryRewrite: '',
  });

  /**
   * 处理单轮 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) => {
    // 清空之前的错误信息
    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) => {
      setMessages((prev) => prev.map((msg) => {
        // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
        if (msg.id !== assistantId || !msg.singleRagTrace) return msg;

        // 获取当前消息的思考和回答内容
        let thinkingMarkdown = msg.singleRagTrace.thinkingMarkdown;
        let answerMarkdown = msg.singleRagTrace.answerMarkdown;
        let thinkingComplete = msg.singleRagTrace.thinkingComplete || false;
        // 剩余未处理的 token 内容
        let remaining = token;

        // 循环处理所有 token，直到处理完毕
        while (remaining) {
          // 当前处于 <think> 标签内（解析思考过程），查找结束标签 
          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;
            }
          }
        }

        // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
        return {
          ...msg,
          singleRagTrace: {
            ...msg.singleRagTrace,
            // 更新思考和回答的 markdown 内容
            thinkingMarkdown,
            answerMarkdown,
            // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
            thinkingComplete: thinkStarted ? thinkingComplete : true,
          },
        };
      }));
    };

    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, // 思考是否完成
      };
      // 将 assistant 消息添加到消息列表中
      setMessages((prev) => [...prev, {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        singleRagTrace: initialTrace,
        sources: [], // 初始为空，随着检索结果更新
      }]);

      // 获取响应体的流式读取器
      const reader = response.body.getReader();
      // 保存 reader 引用，用于"停止生成"功能
      readerRef.current = 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) 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 }));
                // 更新消息的来源列表
                setMessages((prev) => prev.map((msg) => (
                  msg.id === assistantId ? { ...msg, sources: mappedDocs } : msg
                )));
              }
            } 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;
    }
  };

  /**
 * 处理单轮 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) => {
    // 清空之前的错误信息
    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) => {
      setMessages((prev) => prev.map((msg) => {
        // 跳过不是当前 assistant 消息或没有 singleRagTrace 的消息
        if (msg.id !== assistantId || !msg.singleRagTrace) return msg;

        // 获取当前消息的思考和回答内容
        let thinkingMarkdown = msg.singleRagTrace.thinkingMarkdown;
        let answerMarkdown = msg.singleRagTrace.answerMarkdown;
        let thinkingComplete = msg.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;
            }
          }
        }

        // 返回更新后的消息对象，保留 singleRagTrace 中的所有字段
        return {
          ...msg,
          singleRagTrace: {
            ...msg.singleRagTrace,
            // 更新思考和回答的 markdown 内容
            thinkingMarkdown,
            answerMarkdown,
            // 只有当已经开始解析思考内容时才更新 thinkingComplete 标志
            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, // 思考是否完成
      };
      // 将 assistant 消息添加到消息列表中
      setMessages((prev) => [...prev, {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        singleRagTrace: initialTrace,
        sources: [], // 初始为空，随着检索结果更新
      }]);

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

      try {
        // 持续读取流数据，直到流结束
        while (true) {
          // 读取下一个数据块
          const { done, value } = await reader.read();
          // done 为 true 时表示流已结束
          if (done) break;
          applyAnswerToken(value);
        }
      } 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;
    }
  };

  /**
   * 解析类 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);
  });

  /**
   * 生成单轮 RAG 的本地模拟原始流。
   *
   * 返回值刻意模拟接口的“对象字符串片段”形态，例如：
   * `{answer: '，并附'}{answer: '带引用'}` 和 `{docs: [...]}`。
   * 调用方仍通过 `extractJsonObjects` 拆包，再通过 `parseKnowledgeBaseChunk` 解析，
   * 这样可以覆盖粘包、连续对象和 docs 延迟到达等真实联调场景。
   */
  const createMockSingleRoundStream = (query: string): string[] => {
    const answer = `<think>用户正在使用单轮 RAG 提问：“${query}”。\n\n先从知识库里定位与问题最相关的片段，再把证据组织成可追溯的回答。\n</think>我已基于模拟知识库完成检索，并按单轮 RAG 的方式生成回答。\n\n### 回答要点\n\n1. **先检索**：系统会围绕用户问题召回最相关的知识片段。[[1]]\n2. **再增强**：把召回内容注入上下文，约束模型只围绕证据回答。[[2]]\n3. **最后生成**：模型输出结论，并附带引用编号，方便用户核验来源。[[3]]\n\n当前内容是本地模拟的流式返回，用来验证一个一个 \`{answer: '模型输出'}\` 推送时的打字机效果。`;

    const docs: KnowledgeBaseChunk['docs'] = [
      {
        title: '单轮 RAG 接入说明',
        content: '单轮 RAG 通常包含问题输入、TopK 检索、Prompt 组装、模型生成和引用返回几个步骤。',
        source: '知识库 / RAG 接入说明.md',
        snippet: '单轮 RAG 通常包含问题输入、TopK 检索、Prompt 组装、模型生成和引用返回几个步骤。',
      },
      {
        title: '知识库问答接口协议',
        content: "流式响应会持续返回 JSON 对象，每个对象可包含 answer 字段；结束或中间节点可携带 docs 参考资料。",
        source: '接口文档 / knowledge_base_chat.json',
        snippet: '流式响应会持续返回 JSON 对象，每个对象可包含 answer 字段。',
      },
      {
        title: '引用展示规范',
        content: '回答中的引用编号应与 docs 顺序保持一致，前端可将 docs 映射为来源卡片供用户查看。',
        source: '产品规范 / 引用展示规范.docx',
        snippet: '回答中的引用编号应与 docs 顺序保持一致。',
      },
    ];

    const rawChunks: string[] = [];
    const toSingleQuotedValue = (value: string) => `'${value
      .replace(/\\/g, '\\\\')
      .replace(/\n/g, '\\n')
      .replace(/\r/g, '\\r')
      .replace(/\t/g, '\\t')
      .replace(/'/g, "\\'")}'`;
    let pendingObjectText = '';
    const pushAnswerObject = (answerToken: string) => {
      const objectText = `{answer: ${toSingleQuotedValue(answerToken)}}`;
      if (pendingObjectText) {
        rawChunks.push(`${pendingObjectText}${objectText}`);
        pendingObjectText = '';
        return;
      }
      if (answerToken === '，并附') {
        pendingObjectText = objectText;
        return;
      }
      rawChunks.push(objectText);
    };
    const thinkStart = '<think>';
    const thinkEnd = '</think>';
    const startIndex = answer.indexOf(thinkStart);
    const endIndex = answer.indexOf(thinkEnd);

    if (startIndex === -1 || endIndex === -1) {
      for (let index = 0; index < answer.length; index += 3) {
        pushAnswerObject(answer.slice(index, index + 3));
      }
    } else {
      const beforeThink = answer.slice(0, startIndex);
      const thinkingText = answer.slice(startIndex + thinkStart.length, endIndex);

      if (beforeThink) pushAnswerObject(beforeThink);
      pushAnswerObject(thinkStart);
      for (let index = 0; index < thinkingText.length; index += 3) {
        pushAnswerObject(thinkingText.slice(index, index + 3));
      }
      pushAnswerObject(thinkEnd);
      const finalAnswerTokens = [
        '我已基于模拟知识库完成检索',
        '，并附',
        '带引用',
        '带引用',
        '。\n\n### 回答要点\n\n',
        '1. **先检索**：系统会围绕用户问题召回最相关的知识片段。[[1]]\n',
        '2. **再增强**：把召回内容注入上下文，约束模型只围绕证据回答。[[2]]\n',
        '3. **最后生成**：模型输出结论，并附带引用编号，方便用户核验来源。[[3]]\n\n',
        '当前内容是本地模拟的对象字符串流式返回，用来验证连续多个 `{answer: \'模型输出\'}` 和 `{docs: ...}` 的处理效果。',
      ];
      finalAnswerTokens.forEach(pushAnswerObject);
    }

    if (pendingObjectText) {
      rawChunks.push(pendingObjectText);
    }
    rawChunks.push(`{docs: ${JSON.stringify(docs)}}`);
    return rawChunks;
  };

  /**
   * 执行单轮 RAG 本地模拟。
   *
   * 模拟过程与真实接口保持一致：先创建空 assistant 消息，再持续解析对象字符串流，
   * answer 片段进入打字机效果，docs 片段映射为引用来源。
   */
  const handleMockSingleRoundRun = async (query: string) => {
    setError(null);
    setIsLoading(true);
    setIsPreConnectLoading(true);
    mockSingleRoundStoppedRef.current = false;

    const assistantId = `assistant-${Date.now()}`;
    let inThink = false;
    let thinkStarted = false;

    const applyAnswerToken = (token: string) => {
      setMessages((prev) => prev.map((msg) => {
        if (msg.id !== assistantId || !msg.singleRagTrace) return msg;

        let thinkingMarkdown = msg.singleRagTrace.thinkingMarkdown;
        let answerMarkdown = msg.singleRagTrace.answerMarkdown;
        let thinkingComplete = msg.singleRagTrace.thinkingComplete || false;
        let remaining = token;
        console.log(remaining);
        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;
            }
          }
        }

        return {
          ...msg,
          singleRagTrace: {
            ...msg.singleRagTrace,
            thinkingMarkdown,
            answerMarkdown,
            thinkingComplete: thinkStarted ? thinkingComplete : true,
          },
        };
      }));
    };

    try {
      await sleep(300);
      if (mockSingleRoundStoppedRef.current) return;
      setIsPreConnectLoading(false);

      const initialTrace: QASingleRagTrace = {
        title: '单轮 RAG 思考过程',
        thinkingMarkdown: '',
        answerMarkdown: '',
        thinkingComplete: false,
      };
      setMessages((prev) => [...prev, {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        singleRagTrace: initialTrace,
        sources: [],
      }]);

      const streamChunks = createMockSingleRoundStream(query);
      let buffer = '';
      for (const rawChunk of streamChunks) {
        if (mockSingleRoundStoppedRef.current) break;

        buffer += rawChunk;
        const extracted = extractJsonObjects(buffer);
        buffer = extracted.rest;

        for (const jsonText of extracted.objects) {
          try {
            const chunk = parseKnowledgeBaseChunk(jsonText);
            if (typeof chunk.answer === 'string') {
              applyAnswerToken(chunk.answer);
              await sleep(45);
            }
            if (chunk.docs) {
              const mappedDocs = mapDocsToSources(chunk.docs);
              setSearchProcess((prev) => ({ ...prev, hits: prev.hits + mappedDocs.length }));
              setMessages((prev) => prev.map((msg) => (
                msg.id === assistantId ? { ...msg, sources: [...(msg.sources || []), ...mappedDocs] } : msg
              )));
            }
          } catch (parseError) {
            console.error('单轮RAG模拟流式JSON解析错误:', parseError);
          }
        }
      }
    } catch (runError) {
      console.error('单轮RAG模拟流失败:', runError);
      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
    } finally {
      setIsPreConnectLoading(false);
      setIsLoading(false);
      mockSingleRoundStoppedRef.current = false;
      submitLockRef.current = false;
    }
  };

  /**
   * 处理多轮真实接口里的工具调用事件。
   *
   * `show_text` 用于追加思考或最终回答；`local_search` / `tavily_search` 用于把检索结果填入最近一轮。
   * 这里保持事件到 UI trace 的单向映射，避免请求层和展示层互相耦合。
   */
  const handleToolCall = (toolData: ToolCallData, assistantId: string) => {
    setMessages((prevMessages) => prevMessages.map((msg) => {
      if (msg.id !== assistantId || msg.role !== 'assistant' || !msg.thinkingTrace) return msg;

      const trace = { ...msg.thinkingTrace, rounds: [...msg.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;
          }
          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;
        }
        default:
          break;
      }

      return {
        ...msg,
        thinkingTrace: trace,
      };
    }));
  };

  /**
   * 构造多轮 RAG 模拟 trace 的初始骨架。
   *
   * 每一轮先展示 thought/query/loading，随后 `handleMockMultiRoundRun` 再按轮次填充 retrievals，
   * 用来模拟“检索过程逐步展开”的体验。
   */
  const createMockMultiRoundTrace = (query: string): QAThinkingTrace => ({
    title: '多轮检索思考过程',
    rounds: [
      {
        id: `mock-round-1-${Date.now()}`,
        title: '第一轮：理解问题并确定主检索方向',
        thoughtMarkdown: `用户问题是：“${query}”。\n\n先判断问题核心意图，并抽取关键词：\n\n- 业务对象\n- 关键约束\n- 需要引用的制度或知识片段\n\n第一轮先用原始问题做宽召回，尽量覆盖相关资料。`,
        query: `${query} 相关制度 知识库 处理流程`,
        queryLoading: true,
        retrievals: [],
        queryShow: true,
      },
      {
        id: `mock-round-2-${Date.now()}`,
        title: '第二轮：基于首轮结果改写 Query',
        thoughtMarkdown: '首轮检索获得了基础资料，但仍需要补充更精确的执行口径。\n\n本轮将问题改写为更适合检索的短查询，并优先召回流程、规范和案例类资料。',
        query: `${query} 操作规范 适用条件 案例`,
        queryLoading: true,
        retrievals: [],
        queryShow: true,
      },
      {
        id: `mock-round-3-${Date.now()}`,
        title: '第三轮：补充边界条件并交叉验证',
        thoughtMarkdown: '前两轮已经覆盖主要结论，最后继续检索边界条件，避免回答过于绝对。\n\n重点确认：\n\n1. 是否存在例外场景\n2. 是否需要人工复核\n3. 引用资料之间是否一致',
        query: `${query} 例外场景 风险点 人工复核`,
        queryLoading: true,
        retrievals: [],
        queryShow: true,
      },
    ],
    finalAnswerMarkdown: '',
  });

  // 多轮 RAG 每一轮对应一组检索结果；数组下标与 trace.rounds 的下标保持一致。
  const mockMultiRoundRetrievals: QAThinkingRound['retrievals'][] = [
    [
      {
        id: 'mock-multi-r1-1',
        title: '业务知识库问答配置指南',
        content: '多轮检索适合复杂问题，系统会先宽召回，再根据首轮结果继续改写查询并补充证据。',
        source: '知识库 / 业务知识库问答配置指南.md',
      },
      {
        id: 'mock-multi-r1-2',
        title: '智能问答流程说明',
        content: '当用户问题包含多个约束条件时，需要保留原始问题，同时拆分出检索关键词用于后续召回。',
        source: '流程库 / 智能问答流程说明.pdf',
      },
    ],
    [
      {
        id: 'mock-multi-r2-1',
        title: 'RAG Query 改写最佳实践',
        content: 'Query 改写应减少口语表达，突出实体、动作、条件和目标资料类型，以提升命中率。',
        source: '技术资料 / RAG Query 改写最佳实践.docx',
      },
      {
        id: 'mock-multi-r2-2',
        title: '知识库召回与重排策略',
        content: '建议先召回 Top50，再通过重排模型筛选 Top5 至 Top8 作为最终上下文。',
        source: '算法组 / 知识库召回与重排策略.pptx',
      },
      {
        id: 'mock-multi-r2-3',
        title: '企业知识问答案例集',
        content: '复杂业务问答通常需要结合制度、FAQ、历史案例三类资料综合判断。',
        source: '案例库 / 企业知识问答案例集.xlsx',
      },
    ],
    [
      {
        id: 'mock-multi-r3-1',
        title: '回答可信度与引用规范',
        content: '生成答案时应明确结论依据，并在涉及例外条件时给出风险提示或人工复核建议。',
        source: '规范库 / 回答可信度与引用规范.md',
      },
      {
        id: 'mock-multi-r3-2',
        title: '知识库答案质检规则',
        content: '当多个资料结论不完全一致时，应优先采用发布时间较新、来源更权威的资料。',
        source: '质检库 / 知识库答案质检规则.pdf',
      },
    ],
  ];

  /**
   * 执行多轮 RAG 本地模拟。
   *
   * 该方法按轮次延迟填充检索结果，最后分段追加最终回答，模拟真实多轮检索的“思考-召回-总结”节奏。
   * 完成后把所有 retrievals 汇总为 sources，供引用来源折叠面板展示。
   */
  const handleMockMultiRoundRun = async (query: string) => {
    setError(null);
    setIsLoading(true);
    setIsPreConnectLoading(true);
    mockMultiRoundStoppedRef.current = false;

    const assistantId = `assistant-${Date.now()}`;

    try {
      await sleep(350);
      if (mockMultiRoundStoppedRef.current) return;
      setIsPreConnectLoading(false);

      const trace = createMockMultiRoundTrace(query);
      setMessages((prev) => [...prev, {
        id: assistantId,
        role: 'assistant',
        content: '',
        timestamp: new Date(),
        thinkingTrace: trace,
        sources: [],
      }]);

      for (let roundIndex = 0; roundIndex < trace.rounds.length; roundIndex += 1) {
        if (mockMultiRoundStoppedRef.current) break;
        await sleep(700);
        setMessages((prev) => prev.map((msg) => {
          if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
          const rounds = msg.thinkingTrace.rounds.map((round, idx) => (
            idx === roundIndex
              ? {
                ...round,
                queryLoading: false,
                retrievals: mockMultiRoundRetrievals[roundIndex],
              }
              : round
          ));
          return {
            ...msg,
            thinkingTrace: {
              ...msg.thinkingTrace,
              rounds,
            },
          };
        }));
      }

      const finalAnswerTokens = [
        `基于多轮检索，我对“${query}”形成如下结论：\n\n`,
        '### 综合结论\n\n',
        '1. **先做宽召回**：第一轮保留原始问题语义，覆盖相关制度、流程和 FAQ。\n',
        '2. **再做 Query 改写**：第二轮把问题拆成实体、动作、条件，提升命中文档质量。\n',
        '3. **最后做交叉验证**：第三轮补充边界条件和风险点，避免只依据单一资料下结论。\n\n',
        '### 建议\n\n',
        '如果是生产环境，可以把多轮检索结果按“相关性、权威性、时效性”排序，再把 TopK 证据注入模型生成最终回答。',
      ];

      for (const token of finalAnswerTokens) {
        if (mockMultiRoundStoppedRef.current) break;
        setMessages((prev) => prev.map((msg) => {
          if (msg.id !== assistantId || !msg.thinkingTrace) return msg;
          return {
            ...msg,
            thinkingTrace: {
              ...msg.thinkingTrace,
              finalAnswerMarkdown: `${msg.thinkingTrace.finalAnswerMarkdown}${token}`,
            },
          };
        }));
        await sleep(180);
      }

      const sources = mockMultiRoundRetrievals.flat().map((item) => ({
        title: item.title,
        type: '参考资料',
        snippet: item.content,
        source: item.source,
        content: item.content,
      }));
      setSearchProcess((prev) => ({
        ...prev,
        rounds: trace.rounds.length,
        hits: sources.length,
        queryRewrite: '原问题 → 宽召回 → Query 改写 → 边界条件补充 → 综合回答',
      }));
      setMessages((prev) => prev.map((msg) => (
        msg.id === assistantId ? { ...msg, sources } : msg
      )));
    } catch (runError) {
      console.error('多轮RAG模拟失败:', runError);
      setError(runError instanceof Error ? runError.message : '发生未知错误，请稍后重试');
    } finally {
      setIsPreConnectLoading(false);
      setIsLoading(false);
      mockMultiRoundStoppedRef.current = false;
      submitLockRef.current = false;
    }
  };

  /**
   * 处理真实多轮 RAG 请求。
   *
   * 多轮接口采用 SSE：每行 `data:` 都描述一个事件。组件根据事件类型分别更新 taskId、工具调用、
   * 最终回答和引用来源。当前用户入口暂时走本地模拟，此方法保留给接口连通后切换使用。
   */
  const handleRun = async (query: string) => {
    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(),
      };
      // 接口连通后再展示多轮检索主题与过程
      setMessages((prev) => [...prev, assistantMessage]);

      const reader = response.body.getReader();
      readerRef.current = reader;
      const decoder = new TextDecoder();
      let buffer = '';

      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) 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;
    }
  };

  /**
   * 单一模式下的发送入口。
   *
   * 这里只负责创建用户消息、重置输入框和按当前 qaMode 分发到对应执行器；
   * 具体的真实请求、模拟流和状态回填分别在各自 handler 内维护。
   */
  const handleSend = () => {
    if (submitLockRef.current || isLoading || isPreConnectLoading) return;
    if (!inputValue.trim()) return;
    submitLockRef.current = true;
    const query = inputValue.trim();

    const userMessage: Message = {
      id: Date.now().toString(),
      role: 'user',
      content: query,
      timestamp: new Date(),
    };

    if (qaMode === 'multi-round') { // 多轮检索
      setMessages((prev) => [...prev, userMessage]);
      setInputValue('');
      setSearchProcess({
        currentMode: '多轮RAG',
        rounds: 0,
        hits: 0,
        queryRewrite: '',
      });
      void handleRun(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') { // 单轮RAG
      console.log('进入了这里')
      setMessages((prev) => [...prev, userMessage]);
      setInputValue('');
      setSearchProcess({
        currentMode: '单轮RAG',
        rounds: 1,
        hits: 0,
        queryRewrite: '',
      });
      void chatRun(query);
      // handleMockSingleRoundRun(query);
      return;
    }

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

    // 模拟AI响应
    // setTimeout(() => {
    //   setMessages(prev => [...prev, {
    //     id: `assistant-${Date.now()}`,
    //     role: 'assistant',
    //     content: '已完成深度检索和综合回答。',
    //     timestamp: new Date(),
    //     thinkingTrace: createThinkingTrace(qaMode),
    //   }]);
    //   setIsLoading(false);
    //   submitLockRef.current = false;
    //   setSearchProcess({
    //     currentMode: '深度检索',
    //     rounds: 1,
    //     hits: 5,
    //     queryRewrite: qaMode === 'deep-search' ? '原问题→分解子问题→独立检索→综合回答' : '',
    //   });
    // }, 50000);
  };

  /**
   * 对比模式发送入口。
   *
   * 左右面板共享同一个用户问题，但各自按选择的模式独立运行、独立 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);
    setCompareResult({
      left: createComparePane(compareLeftMode),
      right: createComparePane(compareRightMode),
    });

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

    const runSingleForCompare = async (side: 'left' | 'right') => {
      let inThink = false;
      let thinkStarted = false;

      const response = await fetch('http://10.26.128.82:7863/chat/knowledge_base_chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          query,
          knowledge_base_name: [],
          top_k: 5,
          score_threshold: scoreThreshold,
          history: [],
          stream: true,
          model_name: modelName,
          temperature,
          prompt_name: 'default',
          local_doc_url: false,
        }),
      });
      if (!response.ok || !response.body) throw new Error(`单轮RAG接口异常: ${response.status}`);

      const reader = response.body.getReader();
      compareReaderRef.current[side] = reader;
      const decoder = new TextDecoder();
      let buffer = '';
      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) break;
          buffer += decoder.decode(value, { stream: true });
          const extracted = extractJsonObjects(buffer);
          buffer = extracted.rest;
          for (const jsonText of extracted.objects) {
            const parsed = parseKnowledgeBaseChunk(jsonText);
            if (typeof parsed.answer === 'string') {
              const token = parsed.answer;
              updatePane(side, (pane) => {
                const trace = pane.singleRagTrace || {
                  title: '单轮 RAG 思考过程',
                  thinkingMarkdown: '',
                  answerMarkdown: '',
                  thinkingComplete: false,
                };
                let thinkingMarkdown = trace.thinkingMarkdown;
                let answerMarkdown = trace.answerMarkdown;
                let thinkingComplete = trace.thinkingComplete || false;
                let remaining = token;
                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;
                    }
                  }
                }
                return {
                  ...pane,
                  singleRagTrace: {
                    ...trace,
                    thinkingMarkdown,
                    answerMarkdown,
                    thinkingComplete: thinkStarted ? thinkingComplete : true,
                  },
                };
              });
            }
            if (parsed.docs) {
              updatePane(side, (pane) => ({ ...pane, sources: [...pane.sources, ...mapDocsToSources(parsed.docs)] }));
            }
          }
        }
      } finally {
        reader.releaseLock();
        if (compareReaderRef.current[side] === reader) {
          compareReaderRef.current[side] = null;
        }
      }
    };

    const runMultiForCompare = async (side: 'left' | 'right') => {
      const response = await fetch('http://10.26.128.38:8049/api/run', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ query }),
      });
      if (!response.ok || !response.body) throw new Error(`多轮检索接口异常: ${response.status}`);

      const reader = response.body.getReader();
      compareReaderRef.current[side] = reader;
      const decoder = new TextDecoder();
      let buffer = '';

      const applyToolCall = (toolData: ToolCallData) => {
        updatePane(side, (pane) => {
          const trace = pane.thinkingTrace || createMultiRoundStreamTrace();
          const rounds = [...trace.rounds];
          const lastRound = rounds[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();
                rounds.push({
                  id: `round-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
                  title: '思考中',
                  thoughtMarkdown: thinkContent,
                  query: '',
                  queryLoading: true,
                  queryShow: true,
                  retrievals: [],
                });
              } else {
                trace.finalAnswerMarkdown += chatText;
              }
              break;
            }
            case 'tavily_search':
            case 'local_search': {
              if (toolData.tool_input.result && lastRound) {
                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 || '',
                }));
              }
              break;
            }
            default:
              break;
          }
          return {
            ...pane,
            thinkingTrace: { ...trace, rounds },
          };
        });
      };

      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) 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;
            const parsedData = JSON.parse(line.slice(6)) as { event: string; data: any };
            const { event, data } = parsedData;
            if (event === 'tool_call') applyToolCall(data as ToolCallData);
            if (event === 'message' && typeof data === 'string') {
              updatePane(side, (pane) => {
                const trace = pane.thinkingTrace || createMultiRoundStreamTrace();
                return {
                  ...pane,
                  thinkingTrace: {
                    ...trace,
                    finalAnswerMarkdown: `${trace.finalAnswerMarkdown}${data}`,
                  },
                };
              });
            }
            if (event === 'references') {
              const refs = Array.isArray(data?.references) ? data.references : [];
              updatePane(side, (pane) => ({ ...pane, sources: refs.map(mapReferenceToSource) }));
            }
          }
        }
      } finally {
        reader.releaseLock();
        if (compareReaderRef.current[side] === reader) {
          compareReaderRef.current[side] = null;
        }
      }
    };

    const runByMode = (side: 'left' | 'right', mode: QAMode) => {
      if (mode === 'single-round') return runSingleForCompare(side);
      return runMultiForCompare(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;
    });
  };

  const handleStopCompareSide = (side: 'left' | 'right') => {
    const reader = compareReaderRef.current[side];
    if (reader) {
      void reader.cancel(`用户停止${side === 'left' ? '左侧' : '右侧'}生成`);
      compareReaderRef.current[side] = null;
    }
    setCompareResult((prev) => {
      if (!prev) return prev;
      return {
        ...prev,
        [side]: {
          ...prev[side],
          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;
    console.log(e,'e')
    console.log('da')
    if (viewMode === 'compare') {
      handleCompare();
    } else {
      handleSend();
    }
    scrollToBottom();
  };

  // 获取模式标签
  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 '画像检索';
    }
  };

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

  useEffect(() => {
    setQaMode('single-round');
    setMessages(createMockSingleRagMessages());
    setSearchProcess({
      currentMode: '单轮RAG',
      rounds: 1,
      hits: 3,
      queryRewrite: '',
    });
  }, []);

  /**
   * 滚动到底部。
   *
   * 聊天区默认跟随新消息自动滚动；当用户手动上滑查看历史时会暂停自动滚动，避免打断阅读。
   */
  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]);

  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
        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}
          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 className="flex-1 overflow-y-auto p-4">
                {compareUserInput && (
                  <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">{compareUserInput}</p>
                    </div>
                  </div>
                )}
                {compareResult ? (
                  compareLayout === 'horizontal' ? (
                    <div className="grid grid-cols-2 gap-4 h-full min-w-0">
                      {/* 左侧结果 */}
                      <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={compareResult.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(compareResult.left.mode)}
                              </span>
                            </div>
                            {compareResult.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">
                            {compareResult.left.mode === 'single-round' ? (
                              <SingleRagAnswer trace={compareResult.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
                            ) : (
                              <RetrievalThinkingTrace trace={compareResult.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={compareResult.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(compareResult.right.mode)}
                              </span>
                            </div>
                            {compareResult.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">
                            {compareResult.right.mode === 'single-round' ? (
                              <SingleRagAnswer trace={compareResult.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
                            ) : (
                              <RetrievalThinkingTrace trace={compareResult.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={compareResult.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(compareResult.left.mode)}
                              </span>
                            </div>
                            {compareResult.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">
                            {compareResult.left.mode === 'single-round' ? (
                              <SingleRagAnswer trace={compareResult.left.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('left', idx)} />
                            ) : (
                              <RetrievalThinkingTrace trace={compareResult.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={compareResult.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(compareResult.right.mode)}
                              </span>
                            </div>
                            {compareResult.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">
                            {compareResult.right.mode === 'single-round' ? (
                              <SingleRagAnswer trace={compareResult.right.singleRagTrace || parseSingleRagStream([])} onCitationClick={(idx) => handleCompareCitationClick('right', idx)} />
                            ) : (
                              <RetrievalThinkingTrace trace={compareResult.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>
            </>
          )}

          {/* 底部输入区 */}
          <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 GeneralQA;