代码合并

2026-05-28 21:22:49 +08:00
1 parent 3632b0d726
commit ab902f948a
@@ -54,9 +54,8 @@ export default function StrategyRoutes() {
              path="qa/expert-qa"
              element={
                <GeneralQA
-                  pageTitle="专家问答"
-                  pageSubtitle="支持单轮RAG、多轮RAG、深度检索及结果对比"
-                  initialMode="general"
+                  chatHeadTitle="专家问答"
+                  chatDesign="支持单轮RAG、多轮RAG、深度检索及结果对比"
                />
              }
            />
@@ -1,4 +1,4 @@
-import type { QASingleRagTrace, QAThinkingTrace } from '../qa/QACommon';
+import type { QASingleRagTrace, QAThinkingTrace } from './QACommon';
 import type { ComparePane, KnowledgeBaseChunk, Message, QAMode, SourceItem } from './GeneralQA.types';

 /**
@@ -88,6 +88,7 @@ export const createThinkingTrace = (mode: QAMode): QAThinkingTrace => {
      title: '理解问题并拆解检索方向', // 本轮主题：理解问题并确定检索方向
      thoughtMarkdown: '用户询问 **RAG 技术工作原理**。需要先明确核心链路：\n\n- 问题理解与向量化\n- 知识库召回\n- 上下文增强\n- 大模型生成\n\n第一轮优先检索基础定义和主流程。', // 模型思考过程，展示分析步骤
      query: 'RAG 检索增强生成 工作原理 基础流程', // 发送给检索系统的查询词
+      queryShow: true,
      retrievals: [ // 第一轮检索返回的资料列表
        {
          id: 'r1-1',
@@ -114,6 +115,7 @@ export const createThinkingTrace = (mode: QAMode): QAThinkingTrace => {
      thoughtMarkdown: '基础链路已经明确，继续检索 **多轮 RAG** 和 **深度检索** 的差异：\n\n1. 是否需要 Query 改写\n2. 是否需要对子问题分别召回\n3. 是否需要结果重排与证据融合',
      query: '多轮 RAG Query 改写 子问题检索 结果重排', // 本轮发送给检索系统的查询词
      // 本轮检索返回的资料列表
+      queryShow: true,
      retrievals: [
        {
          id: 'r2-1',
@@ -144,6 +146,7 @@ export const createThinkingTrace = (mode: QAMode): QAThinkingTrace => {
      title: '综合证据并形成回答结构', // 本轮的主题：整合前面检索到的所有证据，组织成完整的回答
      thoughtMarkdown: '当前证据已覆盖定义、流程和优化机制。最后需要组织成清晰结构：\n\n- 一句话定义\n- 分阶段流程\n- 技术价值\n- 适用场景与注意事项',
      query: 'RAG 技术价值 幻觉 时效性 可追溯性 应用场景', // 本轮查询：关于 RAG 价值和应用场景的信息
+      queryShow: true,
      retrievals: [
        {
          id: 'r3-1',
@@ -181,9 +184,11 @@ export const createMultiRoundStreamTrace = (): QAThinkingTrace => ({
    title: '正在准备检索',
    thoughtMarkdown: '',
    query: '',
+    queryShow: true,
    queryLoading: true,
    retrievals: [],
  }],
+  thinkingComplete: false,
  finalAnswerMarkdown: '',
 });

@@ -196,7 +201,7 @@ export const createMultiRoundStreamTrace = (): QAThinkingTrace => ({
 export const createComparePane = (mode: QAMode): ComparePane => ({
  mode,
  loading: true,
-  singleRagTrace: mode === 'single-round'
+  singleRagTrace: (mode === 'single-round' || mode === 'single-chat')
    ? {
      title: '单轮 RAG 思考过程',
      thinkingMarkdown: '',
@@ -204,7 +209,7 @@ export const createComparePane = (mode: QAMode): ComparePane => ({
      thinkingComplete: false,
    }
    : undefined,
-  thinkingTrace: mode === 'single-round' ? undefined : createMultiRoundStreamTrace(),
+  thinkingTrace: (mode === 'single-round' || mode === 'single-chat') ? undefined : createMultiRoundStreamTrace(),
  sources: [],
 });

@@ -215,88 +220,6 @@ export const createComparePane = (mode: QAMode): ComparePane => ({
 * 拆分时完整保留原始 mock 数据，确保首屏体验不变。
 */
 export const createMockSingleRagMessages = (): Message[] => ([
-  {
-    id: 'mock-user-code-preview',
-    role: 'user',
-    content: '帮我看一下 Markdown 代码块的展示效果',
-    timestamp: new Date(),
-  },
-  {
-    id: 'mock-assistant-code-preview',
-    role: 'assistant',
-    content: '',
-    timestamp: new Date(),
-    singleRagTrace: {
-      title: '代码块渲染预览',
-      thinkingMarkdown: '这条模拟数据用于检查 MarkdownRenderer 的代码块样式：多行代码应该展示为带语言标签和复制按钮的彩色代码块，短单行代码例如 `const ok = true` 应该保持行内展示。',
-      answerMarkdown: [
-        '下面是几段模拟代码，用来预览不同语言的渲染效果。',
-        '',
-        '短单行代码：`const count = 1`，这一段应该显示为行内代码，而不是大代码块。',
-        '',
-        '### TSX 示例',
-        '',
-        '```tsx',
-        'type UserCardProps = {',
-        '  name: string;',
-        '  role: string;',
-        '};',
-        '',
-        'export function UserCard({ name, role }: UserCardProps) {',
-        '  return (',
-        '    <section className="rounded-lg border p-4">',
-        '      <h3>{name}</h3>',
-        '      <p>{role}</p>',
-        '    </section>',
-        '  );',
-        '}',
-        '```',
-        '',
-        '### Vue 示例',
-        '',
-        '```vue',
-        '<script setup lang="ts">',
-        'import { ref } from "vue";',
-        '',
-        'const keyword = ref("strategy");',
-        '</script>',
-        '',
-        '<template>',
-        '  <button @click="keyword = keyword.toUpperCase()">',
-        '    {{ keyword }}',
-        '  </button>',
-        '</template>',
-        '```',
-        '',
-        '### Java 示例',
-        '',
-        '```java',
-        'public class StrategyScore {',
-        '    public static int normalize(int value) {',
-        '        return Math.max(0, Math.min(100, value));',
-        '    }',
-        '',
-        '    public static void main(String[] args) {',
-        '        System.out.println(normalize(128));',
-        '    }',
-        '}',
-        '```',
-        '',
-        '引用按钮也顺便保留测试：[[1]]',
-      ].join('\n'),
-      thinkingComplete: true,
-    },
-    sources: [
-      {
-        title: 'MarkdownRenderer mock preview',
-        type: '本地模拟数据',
-        snippet: '用于预览 tsx、vue、java 代码块高亮，以及短单行代码的行内展示。',
-        source: 'GeneralQA.mock.ts',
-        time: '2026-04-30',
-        content: '这是一条本地模拟引用数据，用于测试 [[1]] 引用按钮点击后的详情展示。',
-      },
-    ],
-  },
  {
    id: 'mock-user-1',
    role: 'user',
@@ -382,111 +305,6 @@ export const createMockSingleRagMessages = (): Message[] => ([
      },
    ],
  },
-  {
-    id: 'mock-user-multi-1',
-    role: 'user',
-    content: '我想了解多轮检索的工作机制，以及它在大规模企业知识库中的实际表现如何？',
-    timestamp: new Date(),
-  },
-  {
-    id: 'mock-assistant-multi-1',
-    role: 'assistant',
-    content: '',
-    timestamp: new Date(),
-    thinkingTrace: createThinkingTrace('multi-round'),
-    sources: [
-      {
-        title: '多轮RAG检索白皮书',
-        type: '知识库',
-        snippet: '多轮检索通过逐轮改写查询、逐步聚焦，能在复杂问题上比单轮检索提升30%以上的召回覆盖。',
-        source: '内部架构组',
-        time: '2026-04-15',
-        content: '多轮检索的核心在于每轮检索后根据已召回内容改写查询，逐步缩小语义范围，最终实现精准覆盖。',
-      },
-      {
-        title: '企业知识库检索时延对比',
-        type: '技术报告',
-        snippet: '两轮检索在10万级文档库中平均增加40%延迟，但答案完整度提升显著。',
-        source: 'NLP团队',
-        time: '2026-03-22',
-        content: '实测数据：单轮检索平均时延1.2s，两轮检索平均时延1.7s，三轮检索平均时延2.3s。建议根据SLA选择合适轮次。',
-      },
-    ],
-  },
-  {
-    id: 'mock-user-multi-2',
-    role: 'user',
-    content: '企业知识问答系统的多轮检索需要做哪些工程化优化？',
-    timestamp: new Date(),
-  },
-  {
-    id: 'mock-assistant-multi-2',
-    role: 'assistant',
-    content: '',
-    timestamp: new Date(),
-    thinkingTrace: {
-      title: '多轮检索工程化优化思考过程',
-      rounds: [
-        {
-          id: 'round-opt-1',
-          title: '分析工程化优化方向',
-          thoughtMarkdown: '用户关心的是工程层面的优化，需要从以下几个维度回答：\n\n1. 查询改写策略的缓存与复用\n2. 检索结果去重与增量更新\n3. 并发检索与超时控制\n4. 检索质量的在线评估机制',
-          query: '多轮检索 工程化优化 查询改写 缓存 去重 并发',
-          retrievals: [
-            {
-              id: 'ro1-1',
-              title: '查询改写缓存策略实践',
-              content: '对于相似查询，可通过向量相似度匹配复用上一轮的改写结果，减少调用大模型的次数和延迟。',
-              source: '知识库 / 查询优化实践指南.md',
-            },
-            {
-              id: 'ro1-2',
-              title: '检索结果去重方案',
-              content: '多轮检索容易出现重复文档，需基于文档ID或内容哈希进行去重，并在每轮检索时排除已召回文档。',
-              source: '知识库 / 检索去重技术方案.pdf',
-            },
-          ],
-        },
-        {
-          id: 'round-opt-2',
-          title: '检索性能与质量保障',
-          thoughtMarkdown: '第二轮聚焦性能优化：\n\n1. 并发检索多个知识库以降低延迟\n2. 设置合理的检索超时防止长尾请求\n3. 引入在线相关性评分作为质量护栏',
-          query: '并发检索 超时控制 在线评估 知识库评分',
-          retrievals: [
-            {
-              id: 'ro2-1',
-              title: '知识库并发检索架构设计',
-              content: '采用异步并发查询多个索引，配合全局超时（建议3-5s），保证用户体验的同时最大化召回。',
-              source: '架构库 / 并发检索设计文档.docx',
-            },
-            {
-              id: 'ro2-2',
-              title: '检索质量在线评估方法',
-              content: '通过小模型对每轮召回结果做相关性打分，低于阈值时自动触发查询改写或切换检索策略。',
-              source: '评测库 / 在线质量评估方案.md',
-            },
-            {
-              id: 'ro2-3',
-              title: '多轮检索时延优化总结',
-              content: '工程实践中建议两轮为上限，超过时需评估能否合并为单轮。首批结果可先展示，第二轮做增量补充。',
-              source: '性能库 / 时延优化白皮书.pdf',
-            },
-          ],
-        },
-      ],
-      finalAnswerMarkdown: '多轮检索的工程化优化主要围绕四个方向：\n\n### 1. 查询改写优化\n- 缓存相似查询的改写结果，通过向量相似度匹配复用\n- 降低大模型调用频次，减少时延和成本\n\n### 2. 结果去重与增量更新\n- 基于文档ID或内容哈希去重\n- 每轮检索时排除已召回文档，避免重复返回\n- 增量模式：先返回首批结果，后续轮次做补充\n\n### 3. 并发与超时控制\n- 异步并发查询多个知识库索引\n- 设置全局超时（建议3-5秒），避免长尾请求\n- 首批结果到达后立即展示，后续增量追加\n\n### 4. 在线质量评估\n- 用小模型对召回结果做相关性打分\n- 低于阈值时自动触发查询改写或切换策略\n- 持续监控命中率和引用准确率\n\n> 建议：实际工程中两轮检索已能覆盖大多数复杂场景，超过两轮应重新评估是否可以通过更好的查询改写来合并。',
-    },
-    sources: [
-      {
-        title: '多轮检索工程化最佳实践',
-        type: '技术方案',
-        snippet: '两轮检索配合增量更新，可在延迟和完整度之间取得最优平衡。',
-        source: '工程团队',
-        time: '2026-05-01',
-        content: '总结了过去一年的多轮检索优化经验，涵盖查询改写缓存、结果去重、并发检索和在线评估四大方向。',
-      },
-    ],
-  },
 ]);

 /**
@@ -506,9 +324,10 @@ export const mapDocsToSources = (docs: KnowledgeBaseChunk['docs']): SourceItem[]
  const normalizedDocs = Array.isArray(docs) ? docs : docs ? [docs] : [];

  return normalizedDocs.map((item, idx) => {
+    console.log(item,'检索资料')
    if (typeof item === 'string') {
      return {
-        title: `参考资料 ${idx + 1}`,
+        title: '',
        type: '知识库',
        snippet: item,
        source: '',
@@ -529,6 +348,34 @@ export const mapDocsToSources = (docs: KnowledgeBaseChunk['docs']): SourceItem[]
  });
 };

+export const chatDataJSON = (chatJSON: string) => {
+    let chatJSONText = chatJSON.replace(/}{"/g, '},{"');
+    chatJSONText = '[' + chatJSONText + ']';
+    // console.log('解析chat',chatJSONText);
+    let chatData = [];
+    let chatTitle: any = '';
+    const docsList: any[] = [];
+    try {
+      chatData = JSON.parse(chatJSONText);
+      chatData.forEach((item: any) => {
+        if (item['answer']) {
+          chatTitle += item['answer'];
+        } else if (item['docs']) {
+          docsList.push(item);
+        }
+      });
+      return {
+        chatTitle,
+        docsList,
+      };
+    } catch (error) {
+      return {
+        chatTitle,
+        docsList,
+      };
+    }
+  };
+
 /**
 * 从流式文本中提取完整 JSON 对象。
 *
@@ -582,3 +429,22 @@ export const extractJsonObjects = (raw: string): { objects: string[]; rest: stri

  return { objects, rest: '' };
 };
+
+// 处理平台数据
+export const platformTypeChange = (platform: string) => {
+    let platformType: string = '';
+    if (platform.includes('fb')) {
+      platformType = 'facebook';
+    } else if (platform.includes('x')) {
+      platformType = 'x';
+    } else if (platform.includes('in')) {
+      platformType = 'instagram';
+    } else if (platform.includes('re')) {
+      platformType = 'reddit';
+    } else if (platform.includes('th')) {
+      platformType = 'threads';
+    } else {
+      platformType = 'facebook';
+    }
+    return platformType;
+  }
@@ -1,6 +1,7 @@
-import type { QASingleRagTrace, QAThinkingTrace } from '../qa/QACommon';
+import type { QASingleRagTrace, QAThinkingTrace } from './QACommon';
+import { LucideIcon } from 'lucide-react';

-export type QAMode = 'single-round' | 'multi-round' | 'deep-search';
+export type QAMode = 'single-chat' | 'single-round' | 'multi-round' | 'deep-search' | 'hx-search' | 'news-report';
 export type ViewMode = 'single' | 'compare';
 export type KnowledgeScope = 'all' | 'specific-kb' | 'specific-domain';
 export type AnswerStyle = 'concise' | 'detailed';
@@ -13,6 +14,8 @@ export interface SourceItem {
  source?: string;
  time?: string;
  url?: string;
+  keywords?: string;
+  taskDirection?: string;
  content?: string;
 }

@@ -30,7 +33,14 @@ export interface ToolCallData {
  tool_name: string;
  tool_input: {
    text?: string;
+    query?: string;
+    q?: string;
+    keyword?: string;
+    platform?: string;
+    user_fig?: string;
    result?: string;
+    s?: string;
+    e?: string;
  };
 }

@@ -56,6 +66,8 @@ export interface ComparePane {
 }

 export interface CompareResult {
+  id: string | number;
+  compareUserInput: string;
  left: ComparePane;
  right: ComparePane;
  differences?: {
@@ -72,3 +84,17 @@ export interface SearchProcessState {
  hits: number;
  queryRewrite: string;
 }
+
+export interface stateItem {
+  compareIndex: number;
+  compareId: string;
+  messageList: Message[],
+  compareResult: CompareResult[];
+}
+
+export interface qaModeItem {
+  value: QAMode;
+  label: string;
+  icon: LucideIcon;
+  desc: string;
+}
@@ -1,5 +1,6 @@
-import { BookOpen, Brain, ChevronLeft, ChevronRight, Sparkles } from 'lucide-react';
-import type { AnswerStyle, CompareLayout, KnowledgeScope, QAMode, ViewMode } from './GeneralQA.types';
+import React from 'react';
+import { BookOpen, Bot, Brain, ChevronLeft, ChevronRight, Sparkles, User2Icon } from 'lucide-react';
+import type { AnswerStyle, CompareLayout, KnowledgeScope, QAMode, qaModeItem, ViewMode } from './GeneralQA.types';

 /**
 * 左侧配置栏 Props。
@@ -21,6 +22,7 @@ type Props = {
  autoSummarizeDiff: boolean; // 对比模式下是否自动总结左右差异
  recommendBetter: boolean; // 对比模式下是否推荐更好的回答方案
  isCollapsed: boolean; // 左侧配置面板是否折叠
+  qaModeOptions?: qaModeItem[];
  setQaMode: (mode: QAMode) => void; // 设置单一模式的问答模式
  setCompareLeftMode: (mode: QAMode) => void; // 设置对比模式左侧的模式
  setCompareRightMode: (mode: QAMode) => void; // 设置对比模式右侧的模式
@@ -39,10 +41,13 @@ type Props = {
 *
 * 每个选项同时提供展示文案、图标和简短说明，便于配置栏用统一结构渲染卡片。
 */
-const qaModeOptions = [
+const qaModeList: qaModeItem[] = [
+  { value: 'single-chat' as const, label: '快速', icon: Bot, desc: '快速直接' },
  { value: 'single-round' as const, label: '单轮RAG', icon: Sparkles, desc: '快速直接' },
  { value: 'multi-round' as const, label: '多轮RAG', icon: Brain, desc: '深入理解' },
-  { value: 'deep-search' as const, label: '深度检索', icon: BookOpen, desc: '全面分析' },
+  { 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: '检索相关新闻' },
 ];

 /**
@@ -77,6 +82,7 @@ export default function GeneralQAConfigSidebar({
  autoSummarizeDiff,
  recommendBetter,
  isCollapsed,
+  qaModeOptions = qaModeList,
  setQaMode,
  setCompareLeftMode,
  setCompareRightMode,
@@ -88,7 +94,7 @@ export default function GeneralQAConfigSidebar({
  setAutoSummarizeDiff,
  setRecommendBetter,
  setIsCollapsed,
-}: Props): JSX.Element {
+}: Props): React.JSX.Element {
  /**
   * 自定义勾选图标。
   *
@@ -130,7 +136,9 @@ export default function GeneralQAConfigSidebar({
            <div className="mb-6">
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>问答模式</h3>
              <div className="space-y-2">
-                {qaModeOptions.map((mode) => (
+                {qaModeOptions.map((mode) => {
+                  const Icon = mode.icon;
+                  return (
                  <button
                    key={mode.value}
                    onClick={() => setQaMode(mode.value)}
@@ -144,13 +152,14 @@ export default function GeneralQAConfigSidebar({
                          : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50'
                    }`}
                  >
-                    <mode.icon className="w-5 h-5" />
+                    <Icon className="w-5 h-5" />
                    <div className="flex-1">
                      <div className="text-sm font-medium">{mode.label}</div>
                      <div className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{mode.desc}</div>
                    </div>
                  </button>
-                ))}
+                )
+                })}
              </div>
            </div>
          ) : (
@@ -160,18 +169,22 @@ export default function GeneralQAConfigSidebar({
                <div className="mb-4">
                  <label className={`text-xs mb-2 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>模式A</label>
                  <select value={compareLeftMode} onChange={(e) => setCompareLeftMode(e.target.value as QAMode)} className={`w-full px-3 py-2 rounded-lg text-sm ${isDark ? 'bg-slate-700/50 border border-slate-600 text-white' : 'bg-white border border-gray-200 text-gray-700'}`}>
-                    <option value="single-round">单轮RAG</option>
-                    <option value="multi-round">多轮RAG</option>
-                    <option value="deep-search">深度检索</option>
+                    {
+                      qaModeOptions.filter(item => item.value !== compareRightMode).map(item => (
+                        <option value={item.value} key={item.value}>{item.label}</option>
+                      ))
+                    }
                  </select>
                </div>
                <div className={`text-center my-2 ${isDark ? 'text-slate-500' : 'text-gray-400'}`}><span className="text-lg">VS</span></div>
                <div className="mb-4">
                  <label className={`text-xs mb-2 block ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>模式B</label>
                  <select value={compareRightMode} onChange={(e) => setCompareRightMode(e.target.value as QAMode)} className={`w-full px-3 py-2 rounded-lg text-sm ${isDark ? 'bg-slate-700/50 border border-slate-600 text-white' : 'bg-white border border-gray-200 text-gray-700'}`}>
-                    <option value="single-round">单轮RAG</option>
-                    <option value="multi-round">多轮RAG</option>
-                    <option value="deep-search">深度检索</option>
+                    {
+                      qaModeOptions.filter(item => item.value !== compareLeftMode).map(item => (
+                        <option value={item.value} key={item.value}>{item.label}</option>
+                      ))
+                    }
                  </select>
                </div>
              </div>
@@ -189,7 +202,7 @@ export default function GeneralQAConfigSidebar({
            </>
          )}

-          <div className="mb-6">
+          {/* <div className="mb-6">
            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>知识范围</h3>
            <div className="space-y-2">
              {knowledgeScopeOptions.map((option) => (
@@ -202,9 +215,9 @@ export default function GeneralQAConfigSidebar({
                </label>
              ))}
            </div>
-          </div>
+          </div> */}

-          <div className="mb-6">
+          {/* <div className="mb-6">
            <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>回答偏好</h3>
            <div className="space-y-3">
              <label className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition-all ${isDark ? 'text-slate-400 hover:bg-slate-700/30' : 'text-gray-600 hover:bg-gray-50'}`}>
@@ -223,9 +236,9 @@ export default function GeneralQAConfigSidebar({
                <span className="text-sm">展示检索过程</span>
              </label>
            </div>
-          </div>
+          </div> */}

-          {viewMode === 'compare' && (
+          {/* {viewMode === 'compare' && (
            <div className="mb-6">
              <h3 className={`text-sm font-medium mb-3 ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>对比设置</h3>
              <div className="space-y-3">
@@ -241,7 +254,7 @@ export default function GeneralQAConfigSidebar({
                </label>
              </div>
            </div>
-          )}
+          )} */}
        </>
      )}
    </div>
@@ -1,3 +1,4 @@
+import React from 'react';
 import { History } from 'lucide-react';
 import type { ViewMode } from './GeneralQA.types';

@@ -10,9 +11,11 @@ import type { ViewMode } from './GeneralQA.types';
 type Props = {
  isDark: boolean; // 当前是否为暗黑主题，用于样式适配
  viewMode: ViewMode; // 当前视图模式：'single' 单一模式 或 'compare' 对比模式
+  chatHeadTitle?: string;
+  chatDesign?: string;
+  compareShow?: boolean;
  setViewMode: (mode: ViewMode) => void; // 设置视图模式回调函数
-  pageTitle?: string;
-  pageSubtitle?: string;
+  onNavigate?: (page: string) => void; // 页面导航回调函数
 };

 /**
@@ -20,59 +23,53 @@ type Props = {
 *
 * 该组件只负责页面标题、模式切换和历史记录入口，所有业务状态仍由父组件维护。
 * 这样拆分后，顶部导航的样式和交互不会和中间问答流处理逻辑混在一起，后续如果要新增
- * “保存模板”“导出记录”等入口，也可以只改这个文件。
+ * "保存模板""导出记录"等入口，也可以只改这个文件。
 */
-export default function GeneralQAHeader({
-  isDark,
-  viewMode,
-  setViewMode,
-  pageTitle = '通用问答',
-  pageSubtitle = '支持单轮RAG、多轮RAG、深度检索及结果对比',
-}: Props): JSX.Element {
+export default function GeneralQAHeader({ isDark, viewMode, chatHeadTitle = '通用问答', chatDesign = '支持单轮RAG、多轮RAG、深度检索及结果对比', compareShow = true, setViewMode, onNavigate }: Props): React.JSX.Element {
  return (
    <div className={`flex items-center justify-between px-6 py-4 border-b ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
      <div className="flex items-center gap-4">
        <h1 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
-          {pageTitle}
+          {chatHeadTitle}
        </h1>
        <span className={`text-sm ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
-          {pageSubtitle}
+          {chatDesign}
        </span>
      </div>
+      {
+        compareShow && <div className="flex items-center gap-2">
+          <div className={`flex rounded-lg p-1 ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
+            <button
+              onClick={() => setViewMode('single')}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${viewMode === 'single'
+                  ? isDark
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-red-500 text-white'
+                  : isDark
+                    ? 'text-slate-400 hover:text-white'
+                    : 'text-gray-600 hover:text-red-600'
+                }`}
+            >
+              单一模式
+            </button>
+            <button
+              onClick={() => setViewMode('compare')}
+              className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${viewMode === 'compare'
+                  ? isDark
+                    ? 'bg-blue-600 text-white'
+                    : 'bg-red-500 text-white'
+                  : isDark
+                    ? 'text-slate-400 hover:text-white'
+                    : 'text-gray-600 hover:text-red-600'
+                }`}
+            >
+              对比模式
+            </button>
+          </div>

-      <div className="flex items-center gap-2">
-        <div className={`flex rounded-lg p-1 ${isDark ? 'bg-slate-700/50' : 'bg-red-50'}`}>
+          {onNavigate && (
          <button
-            onClick={() => setViewMode('single')}
-            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
-              viewMode === 'single'
-                ? isDark
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-red-500 text-white'
-                : isDark
-                  ? 'text-slate-400 hover:text-white'
-                  : 'text-gray-600 hover:text-red-600'
-            }`}
-          >
-            单一模式
-          </button>
-          <button
-            onClick={() => setViewMode('compare')}
-            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
-              viewMode === 'compare'
-                ? isDark
-                  ? 'bg-blue-600 text-white'
-                  : 'bg-red-500 text-white'
-                : isDark
-                  ? 'text-slate-400 hover:text-white'
-                  : 'text-gray-600 hover:text-red-600'
-            }`}
-          >
-            对比模式
-          </button>
-        </div>
-
-        <button
+          onClick={() => onNavigate('qa-records')}
          className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
            isDark
              ? 'bg-slate-700/50 text-slate-300 hover:bg-slate-600/50'
@@ -82,7 +79,9 @@ export default function GeneralQAHeader({
          <History className="w-4 h-4" />
          历史记录
        </button>
-      </div>
+        )}
+        </div>
+      }
    </div>
  );
 }
@@ -0,0 +1,933 @@
+import React, { useEffect, useState } from 'react';
+import { Dialog, Textarea } from 'tdesign-react';
+import {
+  Bookmark,
+  BrainCircuit,
+  Bot,
+  ChevronDown,
+  FileSearch,
+  Loader2,
+  RotateCcw,
+  Search,
+  Send,
+  Settings,
+  Sparkles,
+  Square,
+  Copy,
+  Trash2,
+  Edit3,
+  Upload,
+  UserRound,
+  ExternalLink,
+} from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import MarkdownRenderer from '@/strategy-components/MarkdownRenderer';
+import { SourceItem } from './GeneralQA.types';
+import '../qa/qa-animations.css';
+
+/**
+ * 单条检索结果。
+ *
+ * 多轮检索过程中每一轮可能返回多条资料，这里只保留 UI 展示所需的标题、摘要和来源。
+ */
+export interface QARetrievalItem {
+  id?: string;
+  title: string;
+  content: string;
+  keywords?: string;
+  taskDirection?: string;
+  type?: string;
+  time?: string;
+  source?: string;
+  recUuid?: string;
+  platform?: string;
+  fans?: number;
+  comment_count?: number;
+  message_id?: string;
+  hot_num?: number;
+}
+
+/**
+ * 多轮检索中的单轮思考节点。
+ *
+ * `queryLoading` 控制该轮检索结果是否仍显示 loading；retrievals 到达后再渲染资料列表。
+ */
+export interface QAThinkingRound {
+  id: string;           // 唯一标识符，用于列表渲染时的 key
+  title: string;        // 该轮检索的标题，如"第1轮检索"或"背景资料收集"
+  thoughtMarkdown: string; // 模型思考过程的 Markdown 内容，展示思考步骤和推理逻辑
+  queryTitle?: string; // 检索内容
+  query: string;        // 该轮发送给检索系统的查询语句
+  queryLoading?: boolean; // 该轮检索是否仍在进行中，true 时显示加载动画
+  textidContent?: string; // 新闻详细内容
+  retrievals: QARetrievalItem[]; // 该轮返回的检索结果列表
+  queryShow: boolean; // 检索列表为空时是否显示
+}
+
+/**
+ * 多轮/深度检索的完整思考链。
+ *
+ * rounds 展示检索过程，finalAnswerMarkdown 展示最终回答；两者分开便于流式过程中逐步更新。
+ */
+export interface QAThinkingTrace {
+  title?: string; // 整体思考链的标题
+  rounds: QAThinkingRound[]; // 多轮检索过程中的所有轮次，每轮包含思考和检索结果
+  finalAnswerMarkdown: string; // 基于多轮检索结果生成的最终回答内容
+  thinkingComplete?: boolean; // 思考过程是否已完成，true 时思考区域可折叠
+}
+
+/**
+ * 单轮 RAG 的回答结构。
+ *
+ * 后端可能把 `<think>...</think>` 和答案混在同一个 answer 流中，解析后分别放到 thinkingMarkdown 与 answerMarkdown。
+ */
+export interface QASingleRagTrace {
+  title?: string; // 思考过程的标题，如"单轮 RAG 思考过程"
+  thinkingMarkdown: string; // 模型在生成回答前的思考过程内容，使用 Markdown 格式
+  answerMarkdown: string; // 最终生成的回答内容，使用 Markdown 格式
+  thinkingComplete?: boolean; // 思考过程是否已完成，true 时思考区域可折叠
+}
+
+export interface QACommonMessage {
+  id: string; // 消息唯一标识符
+  role: 'user' | 'assistant'; // 消息发送者角色：user 为用户消息，assistant 为 AI 回复
+  content: string; // 消息的纯文本内容（当使用 thinkingTrace 或 singleRagTrace 时为空）
+  timestamp?: Date; // 消息发送时间
+  thinkingTrace?: QAThinkingTrace; // 多轮/深度检索模式的思考链，包含多轮检索过程和最终回答
+  sources?: { // 消息引用的参考资料列表
+    title: string; // 参考资料标题
+    type: string; // 资料类型，如"文档"、"网页"等
+    snippet: string; // 资料摘要内容
+    source?: string; // 来源名称或 URL
+    time?: string; // 发布时间
+    url?: string; // 资料链接
+    content?: string; // 完整内容（可能用于详情弹窗）
+  }[];
+}
+
+export interface QACommonMessage {
+  singleRagTrace?: QASingleRagTrace; // 单轮 RAG 模式的思考过程和回答结构
+}
+
+interface QAAvatarProps {
+  role: 'user' | 'assistant';
+  isActive?: boolean;
+  label?: string;
+  variant?: 'default' | 'blue' | 'purple';
+}
+
+const getAssistantAvatarClass = (variant: QAAvatarProps['variant'], isDark: boolean) => {
+  switch (variant) {
+    case 'blue':
+      return isDark
+        ? 'bg-gradient-to-br from-blue-400 via-blue-600 to-cyan-700 text-white'
+        : 'bg-gradient-to-br from-blue-300 via-blue-500 to-cyan-500 text-white';
+    case 'purple':
+      return isDark
+        ? 'bg-gradient-to-br from-purple-400 via-violet-600 to-fuchsia-700 text-white'
+        : 'bg-gradient-to-br from-purple-300 via-violet-500 to-fuchsia-500 text-white';
+    default:
+      return isDark
+        ? 'bg-gradient-to-br from-cyan-500 via-blue-600 to-violet-600 text-white'
+        : 'bg-gradient-to-br from-red-400 via-rose-500 to-orange-400 text-white';
+  }
+};
+
+/**
+ * 统一头像组件。
+ *
+ * 单一模式使用默认助手色；对比模式可通过 variant 指定蓝/紫色系，让头像与左右面板标签保持一致。
+ * `isActive` 会触发呼吸和星光动画，用来提示当前助手正在生成。
+ */
+export const QAAvatar: React.FC<QAAvatarProps> = ({ role, isActive = false, label, variant = 'default' }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const Icon = role === 'assistant' ? Bot : UserRound;
+
+  return (
+    <div
+      className={`relative w-9 h-9 rounded-2xl flex items-center justify-center flex-shrink-0 overflow-hidden shadow-sm ${role === 'assistant'
+        ? getAssistantAvatarClass(variant, isDark)
+        : isDark
+          ? 'bg-gradient-to-br from-slate-500 via-slate-700 to-slate-900 text-white'
+          : 'bg-gradient-to-br from-sky-400 via-indigo-500 to-violet-500 text-white'
+        } ${isActive ? 'qa-avatar-active' : ''}`}
+      title={label}
+    >
+      <div className="absolute inset-0 bg-white/20 opacity-0 qa-avatar-shine" />
+      <Icon className={`w-5 h-5 relative z-10 ${isActive ? 'qa-avatar-icon-active' : ''}`} />
+      {role === 'assistant' && isActive && (
+        <Sparkles className="absolute -right-0.5 -top-0.5 w-3.5 h-3.5 text-yellow-200 qa-avatar-spark" />
+      )}
+    </div>
+  );
+};
+
+interface TypingIndicatorProps {
+  label?: string;
+  assistantLabel?: string;
+}
+
+/**
+ * 助手预连接/生成中的占位提示。
+ *
+ * 用于请求已经发出但还没有生成可展示消息时，给用户明确的等待反馈。
+ */
+export const TypingIndicator: React.FC<TypingIndicatorProps> = ({ label = '正在思考并生成回复', assistantLabel = 'AI 助手' }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className="flex gap-3">
+      <QAAvatar role="assistant" isActive label={assistantLabel} />
+      <div className={`max-w-[70%] rounded-2xl px-4 py-3 shadow-sm border ${isDark ? 'bg-slate-700/60 border-slate-600/50 text-slate-200' : 'bg-white border-red-100 text-gray-700'
+        }`}>
+        <div className="flex items-center gap-3">
+          <Loader2 className={`w-4 h-4 animate-spin ${isDark ? 'text-blue-300' : 'text-red-500'}`} />
+          <span
+            className={`text-sm font-medium qa-generating-marquee ${isDark ? 'qa-generating-marquee-dark' : 'qa-generating-marquee-light'}`}
+          >
+            {label}
+          </span>
+          {/* <div className="flex gap-1">
+            {[0, 1, 2].map((idx) => (
+              <span
+                key={idx}
+                className={`w-1.5 h-1.5 rounded-full qa-typing-dot ${isDark ? 'bg-blue-300' : 'bg-red-400'}`}
+                style={{
+                  animationDelay: `${idx * 160}ms`,
+                }}
+              />
+            ))}
+          </div> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface ChatMessageProps<T extends QACommonMessage> {
+  message: T;
+  showSources?: boolean;
+  assistantLabel?: string;
+  assistantActive?: boolean;
+  onCitationClick?: (message: T, citationIndex: number) => void;
+  onCopyAssistant?: (message: T) => void;
+  onDeleteAssistant?: (message: T) => void;
+  onEditAssistant?: (message: T) => void;
+  onResendAssistant?: (message: T) => void;
+  renderAssistantExtra?: (message: T) => React.ReactNode;
+}
+
+/**
+ * 聊天消息渲染器。
+ *
+ * 根据消息类型自动选择普通文本、单轮 RAG 回答或多轮检索思考链。
+ * sources 区域独立折叠展示，避免引用资料过长时挤占主回答阅读空间。
+ */
+export function ChatMessage<T extends QACommonMessage>({
+  message,
+  showSources = true,
+  assistantLabel = 'AI 助手',
+  assistantActive = false,
+  onCitationClick,
+  onCopyAssistant,
+  onDeleteAssistant,
+  onEditAssistant,
+  onResendAssistant,
+  renderAssistantExtra,
+}: ChatMessageProps<T>) {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const isUser = message.role === 'user';
+  const hasTrace = !isUser && !!(message.singleRagTrace || message.thinkingTrace);
+  const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL;
+  const [visible, setVisible] = useState(false); // 打开详情对话框
+  const [listData, setListData] = useState<SourceItem>({
+    title: '',
+    type: '',
+    time: '',
+    snippet: '',
+    source: '',
+    content: '',
+  });
+  const showDialog = (item: SourceItem) => {
+    console.log('item', item)
+    if (item.url) {
+      window.open(`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${item.url}`);
+    } else {
+      setListData(item);
+      setVisible(true);
+    }
+  };
+  return (
+    <div className="space-y-3">
+      <div className={`flex gap-3 ${isUser ? 'justify-end' : ''}`}>
+        {!isUser && <QAAvatar role="assistant" isActive={assistantActive} label={assistantLabel} />}
+        <div className={`${hasTrace ? 'max-w-[85%] flex-1' : 'max-w-[72%]'} rounded-2xl px-4 py-3 shadow-sm ${isUser
+          ? isDark
+            ? 'bg-blue-600/70 text-white'
+            : 'bg-gradient-to-r from-red-500 to-rose-500 text-white'
+          : message.singleRagTrace || message.thinkingTrace
+            ? isDark
+              ? 'bg-slate-800/40 text-slate-100 border border-slate-600/40'
+              : 'bg-white text-gray-800 border border-transparent shadow-[0px_3px_12px_rgba(0, 0, 0, 0.12)] px-0 py-0'
+            : isDark
+              ? 'bg-slate-700/60 text-slate-100 border border-slate-600/40'
+              : 'bg-white text-gray-800 border border-gray-100'
+          }`}>
+          {message.singleRagTrace && !isUser ? (
+            <SingleRagAnswer
+              trace={message.singleRagTrace}
+              onCitationClick={(citationIndex) => onCitationClick?.(message, citationIndex)}
+            />
+          ) : message.thinkingTrace && !isUser ? (
+            <RetrievalThinkingTrace
+              trace={message.thinkingTrace}
+              onCitationClick={(citationIndex) => onCitationClick?.(message, citationIndex)}
+            />
+          ) : (
+            <p className="whitespace-pre-wrap leading-relaxed">{message.content}</p>
+          )}
+          {!isUser && (onCopyAssistant || onDeleteAssistant || onEditAssistant || onResendAssistant) && (
+            <div className={`mt-2 flex items-center justify-end gap-1.5 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              {onCopyAssistant && (
+                <button type="button" onClick={() => onCopyAssistant(message)} className={`p-1.5 rounded-md transition-colors ${isDark ? 'hover:bg-slate-700 hover:text-slate-100' : 'hover:bg-gray-100 hover:text-gray-700'}`} title="复制回答">
+                  <Copy className="w-3.5 h-3.5" />
+                </button>
+              )}
+              {onDeleteAssistant && (
+                <button type="button" onClick={() => onDeleteAssistant(message)} className={`p-1.5 rounded-md transition-colors ${isDark ? 'hover:bg-slate-700 hover:text-rose-300' : 'hover:bg-red-50 hover:text-red-600'}`} title="删除问答">
+                  <Trash2 className="w-3.5 h-3.5" />
+                </button>
+              )}
+              {onEditAssistant && (
+                <button type="button" onClick={() => onEditAssistant(message)} className={`p-1.5 rounded-md transition-colors ${isDark ? 'hover:bg-slate-700 hover:text-blue-300' : 'hover:bg-blue-50 hover:text-blue-600'}`} title="编辑回答和思考过程">
+                  <Edit3 className="w-3.5 h-3.5" />
+                </button>
+              )}
+              {onResendAssistant && (
+                <button type="button" onClick={() => onResendAssistant(message)} className={`p-1.5 rounded-md transition-colors ${isDark ? 'hover:bg-slate-700 hover:text-emerald-300' : 'hover:bg-emerald-50 hover:text-emerald-600'}`} title="重新发送">
+                  <RotateCcw className="w-3.5 h-3.5" />
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+        {isUser && <QAAvatar role="user" label="用户" />}
+      </div>
+
+
+      {!isUser && message.sources && message.sources.length > 0 && showSources && (
+        <CollapsibleSection
+          defaultOpen={false}
+          className={`ml-12 ${hasTrace ? 'max-w-[85%]' : 'max-w-[72%]'} ${isDark ? 'bg-slate-800/50 border-slate-700/50' : 'bg-gray-50 border-gray-200'}`}
+          title={(
+            <div className="flex items-center gap-2">
+              <BrainCircuit className={`w-3.5 h-3.5 ${isDark ? 'text-blue-300' : 'text-red-500'}`} />
+              <span className={`text-xs font-medium ${isDark ? 'text-slate-300' : 'text-gray-700'}`}>引用来源</span>
+              <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>({message.sources.length})</span>
+            </div>
+          )}
+        >
+          <div className="space-y-2 pt-[10px]">
+            {message.sources.map((source, idx) => (
+              <div key={idx} className={`text-xs p-2 rounded-[4px] border shadow-sm transition-all duration-200 ease-out cursor-pointer hover:-translate-y-0.5 hover:scale-[1.01] ${isDark ? 'bg-slate-700/50 border-slate-600/50 shadow-black/10 hover:bg-slate-700/80 hover:border-blue-400/40 hover:shadow-lg hover:shadow-blue-950/20' : 'bg-white border-gray-100 shadow-gray-200/60 hover:border-red-200 hover:shadow-md hover:shadow-red-100/70'}`} onClick={() => showDialog(source)}>
+                <div className="flex items-center gap-2 mb-1 min-w-0">
+                  <BrainCircuit className={`w-3 h-3 shrink-0 ${isDark ? 'text-blue-400' : 'text-red-400'}`} />
+                  <span className={`font-medium truncate min-w-0 flex-1 ${isDark ? 'text-slate-300' : 'text-gray-700'}`} title={source.title}>{source.title}</span>
+                  <span className={`shrink-0 px-1.5 py-0.5 rounded text-xs ${isDark ? 'bg-slate-600 text-slate-300' : 'bg-gray-200 text-gray-500'}`}>
+                    {source.type}
+                  </span>
+                </div>
+                <p className={`line-clamp-3 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>{source.snippet}</p>
+              </div>
+            ))}
+          </div>
+        </CollapsibleSection>
+      )}
+      <Dialog
+        visible={visible}
+        onClose={() => setVisible(false)}
+        header="提示"
+        footer={null}
+      >
+        <div>
+          <div className="pr-9">
+            <h3 className="text-base font-semibold">{listData.title || '引用内容'}</h3>
+            <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              <div>来源：{listData.source || '未知来源'}</div>
+              <div>时间：{listData.time || '未知'}</div>
+            </div>
+          </div>
+          {listData.url && (
+            <div className="mt-4">
+              <a
+                href={`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${listData.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 whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
+            }`}>
+            {listData.content || '暂无引用内容'}
+          </div>
+        </div>
+      </Dialog>
+      {!isUser && renderAssistantExtra?.(message)}
+
+    </div>
+  );
+}
+
+interface CollapsibleSectionProps {
+  title: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  className?: string;
+  headerClassName?: string;
+}
+
+/**
+ * 通用折叠面板。
+ *
+ * 思考过程、检索结果、引用来源都复用该组件，保证展开/收起动画和深浅色主题一致。
+ */
+const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  children,
+  defaultOpen = true,
+  className = '',
+  headerClassName = '',
+}) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [open, setOpen] = useState(defaultOpen);
+  // 当 defaultOpen 改变时，更新 open 状态
+  useEffect(() => {
+    setOpen(defaultOpen);
+  }, [defaultOpen]);
+  return (
+    <div className={`rounded-2xl border overflow-hidden ${isDark ? 'border-slate-700/60 bg-slate-900/30' : 'border-red-100 bg-white'} ${className}`}>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className={`w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors ${isDark ? 'hover:bg-slate-800/70' : 'hover:bg-red-50/60'
+          } ${headerClassName}`}
+      >
+        <div className="flex-1 min-w-0">{title}</div>
+        <ChevronDown
+          className={`w-4 h-4 flex-shrink-0 transition-transform duration-300 ease-out ${open ? 'rotate-0' : '-rotate-90'
+            } ${isDark ? 'text-slate-400' : 'text-gray-500'}`}
+        />
+      </button>
+      <div className={`grid transition-[grid-template-rows,opacity] duration-300 ease-out ${open ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'}`}>
+        <div className="overflow-hidden">
+          <div className={`px-4 pb-4 transition-transform duration-300 ease-out ${open ? 'translate-y-0' : '-translate-y-2'} ${isDark ? 'text-slate-200' : 'text-gray-700'}`}>
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+interface SingleRagAnswerProps {
+  trace: QASingleRagTrace;
+  onCitationClick?: (citationIndex: number) => void;
+}
+
+/**
+ * 单轮 RAG 回答展示。
+ *
+ * 思考内容和最终回答分成两个区域：思考区可折叠，回答区始终展示。
+ * 这样既保留模型推理过程，也不会影响用户优先阅读最终答案。
+ */
+export const SingleRagAnswer: React.FC<SingleRagAnswerProps> = ({ trace, onCitationClick }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className="w-full min-w-0 max-w-5xl space-y-4 overflow-hidden">
+      <CollapsibleSection
+        defaultOpen={!trace.thinkingComplete}
+        className={isDark ? 'bg-slate-800/60 shadow-lg shadow-black/10' : 'bg-white shadow-sm'}
+        title={
+          <div className="flex items-center gap-3">
+            <div className={`w-9 h-9 rounded-2xl flex items-center justify-center ${isDark ? 'bg-violet-500/15 text-violet-300' : 'bg-orange-50 text-orange-500'
+              }`}>
+              <Sparkles className="w-5 h-5" />
+            </div>
+            <div>
+              <div className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>{trace.title || '思考过程'}</div>
+              {trace.thinkingComplete ? (
+                <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                  思考已完成，可展开查看
+                </div>
+              ) : (
+                <div className={`text-xs qa-generating-marquee ${isDark ? 'qa-generating-marquee-dark text-slate-300' : 'qa-generating-marquee-light text-gray-600'}`}>
+                  正在接收 &lt;think&gt; 流式思考内容
+                </div>
+              )}
+            </div>
+          </div>
+        }
+      >
+        {trace.thinkingMarkdown ? (
+          <MarkdownRenderer
+            content={trace.thinkingMarkdown}
+            className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}
+            onCitationClick={onCitationClick}
+          />
+        ) : (
+          <div className={`text-sm flex items-center gap-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            等待模型输出思考内容...
+          </div>
+        )}
+      </CollapsibleSection>
+
+      <div className={`rounded-2xl border p-4 ${isDark ? 'bg-slate-700/60 border-slate-600/40' : 'bg-white border-gray-100'}`}>
+        {trace.answerMarkdown ? (
+          <MarkdownRenderer
+            content={trace.answerMarkdown}
+            className={`text-sm ${isDark ? 'text-slate-200' : 'text-gray-700'}`}
+            onCitationClick={onCitationClick}
+          />
+        ) : (
+          <div className={`text-sm flex items-center gap-2 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            {trace.thinkingComplete ? '正在流式生成回答...' : '思考结束后开始生成回答...'}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+interface RetrievalListProps {
+  items: QARetrievalItem[];
+}
+
+/**
+ * 检索结果列表。
+ *
+ * 每条资料默认折叠，首条默认展开，便于用户快速看到最相关资料，同时保留完整资料明细。
+ */
+const RetrievalList: React.FC<RetrievalListProps> = ({ items }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const [visible, setVisible] = useState(false); // 打开详情对话框
+  const [listData, setListData] = useState<QARetrievalItem>({
+    title: '',
+    content: '',
+  });
+  const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL;
+  const b1SearchUrl = import.meta.env.VITE_AIPI_B1COH_URL;
+  const b2SearchUrl = import.meta.env.VITE_AIPI_B2ACTOR_URL;
+  const showDialog = (item: QARetrievalItem) => {
+    console.log('item', item)
+    if (item.type === 'more') {
+      if (item.recUuid) {
+        window.open(`${knowledgeUrl}/#/knowledge/mid-detail?recUuid=${item.recUuid}`);
+      } else {
+        setListData(item);
+        setVisible(true);
+      }
+    } else if (item.type === 'task') {
+      window.open(`${b1SearchUrl}/#/task/item-aicoh/step-info-search?id=${item.id}`)
+    } else if (item.type === 'hx') {
+      window.open(`${b2SearchUrl}/fromB/toDetail?user_id=${item.id}&platform=${item.platform}`);
+    } else {
+      setListData(item);
+      setVisible(true);
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div key={index}>
+        {
+          item.type !== 'user_behavior' ? <CollapsibleSection
+            key={index}
+            defaultOpen={index === 0}
+            className={isDark ? 'bg-slate-800/40' : 'bg-gray-50/70'}
+            title={
+              <div className="flex items-center gap-2">
+                <span className={`w-6 h-6 rounded-lg flex items-center justify-center text-xs font-semibold ${isDark ? 'bg-blue-500/20 text-blue-300' : 'bg-red-100 text-red-600'
+                  }`}>{index + 1}</span>
+                <div className="min-w-0">
+                  <div className={`text-sm font-medium truncate ${isDark ? 'text-slate-100' : 'text-gray-900'}`}>{item.title}</div>
+                  {
+                    item.type === 'more' && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>时间：{item.time || '-'}</div>
+                  }
+                  {
+                    item.type === 'task' && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}>关键词：{item.keywords || '-'}</div>
+                  }
+                  {
+                    item.type === 'hx' && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}><span>平台：{item.platform || '-'}</span><span className="ml-[10px]">粉丝数:{item.fans || '-'}</span></div>
+                  }
+                  {
+                    (item.type === 'taiwan_news' || item.type === 'world_news' || item.type === 'messaage_comment' || item.type === 'america_news') && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}><span>平台：{item.platform || '-'}</span>{item.comment_count && <span className="ml-[10px]">评论数:{item.comment_count || '-'}</span>}</div>
+                  }
+                  {
+                    item.type === 'get_time_data' && <div className={`text-xs truncate ${isDark ? 'text-slate-500' : 'text-gray-500'}`}><span>时间：{item.time || '-'}</span><span className="ml-[10px]">热度:{item.hot_num || '-'}</span></div>
+                  }
+                </div>
+              </div>
+            }
+          >
+            <p className={`text-sm leading-relaxed cursor-progress line-clamp-3 hover:underline ${isDark ? 'text-slate-300' : 'text-gray-600'}`} onClick={() => showDialog(item)}>{item.content}</p>
+          </CollapsibleSection>
+          : <div className="rounded-[5px] border border-[#f5f5f5] p-[10px]" key={index + 10}>
+            <span className="font-bold mr-[10px]">{index + 1}.</span>
+            <span>{item.title}</span>
+          </div>
+        }
+        </div>
+      ))}
+      <Dialog
+        visible={visible}
+        onClose={() => setVisible(false)}
+        header="提示"
+        footer={null}
+      >
+        <div>
+          <div className="pr-9">
+            <h3 className="text-base font-semibold">{listData.title}</h3>
+            <div className={`mt-2 text-xs space-y-1 ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+              {listData.time && <span>时间：{listData.time || '未知'}</span>}
+              {listData.platform && <span className="ml-[10px]">平台：{listData.platform || '未知'}</span>}
+              {listData.comment_count && <span className="ml-[10px]">评论数：{listData.comment_count || '未知'}</span>}
+            </div>
+          </div>
+          <div className={`mt-4 rounded-xl p-3 text-sm leading-relaxed whitespace-pre-wrap ${isDark ? 'bg-slate-800/70 text-slate-200' : 'bg-gray-50 text-gray-700'
+            }`}>
+            {listData.content || '暂无引用内容'}
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+interface SearchQueryBadgeProps {
+  query: string;
+  loading?: boolean;
+  queryTitle?: string;
+}
+
+/**
+ * 检索词徽标。
+ *
+ * 多轮检索每一轮都会产生一个 query；loading 状态下展示旋转图标，表示该 query 正在召回资料。
+ */
+const SearchQueryBadge: React.FC<SearchQueryBadgeProps> = ({ query, loading = false, queryTitle = '检索词' }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className={`inline-flex max-w-full items-center gap-2 rounded-full px-3 py-1.5 border ${isDark ? 'bg-blue-500/10 border-blue-400/20 text-blue-200' : 'bg-red-50 border-red-100 text-red-600'
+      }`}>
+      {loading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Search className="w-3.5 h-3.5" />}
+      <span className="text-xs flex-shrink-0">{queryTitle}</span>
+      <span className={`text-xs font-medium truncate ${loading && 'qa-generating-marquee'} ${loading && (isDark ? 'qa-generating-marquee-dark' : 'qa-generating-marquee-light')}`}>
+        {query}
+      </span>
+    </div>
+  );
+};
+
+interface RetrievalThinkingTraceProps {
+  trace: QAThinkingTrace;
+  onCitationClick?: (citationIndex: number) => void;
+}
+
+/**
+ * 多轮/深度检索思考链展示。
+ *
+ * 组件按轮次渲染思考内容、检索词和检索结果，底部展示最终回答。
+ * 它只消费已经整理好的 trace 数据，不关心数据来自真实 SSE 还是本地模拟。
+ */
+export const RetrievalThinkingTrace: React.FC<RetrievalThinkingTraceProps> = ({ trace, onCitationClick }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className="w-full min-w-0 max-w-5xl space-y-4 overflow-hidden">
+      <CollapsibleSection
+        defaultOpen={!trace.thinkingComplete}
+        className={isDark ? 'bg-slate-800/60 shadow-lg shadow-black/10' : 'bg-white shadow-sm'}
+        title={
+          <div className="flex items-center gap-3">
+            <div className={`w-9 h-9 rounded-2xl flex items-center justify-center ${isDark ? 'bg-cyan-500/15 text-cyan-300' : 'bg-red-50 text-red-500'
+              }`}>
+              <BrainCircuit className="w-5 h-5" />
+            </div>
+            <div>
+              <div className={`text-sm font-semibold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                {trace.title || '思考过程'}
+              </div>
+              <div className={`text-xs ${isDark ? 'text-slate-400' : 'text-gray-500'}`}>
+                共 {trace.rounds.length} 轮推理与检索，可展开查看细节
+              </div>
+            </div>
+          </div>
+        }
+      >
+        <div className="space-y-3 pt-1">
+          {trace.rounds.map((round, index) => (
+            <div key={index} className={`relative pl-5 ${index < trace.rounds.length - 1 ? 'pb-2' : ''}`}>
+              {index < trace.rounds.length - 1 && (
+                <div className={`absolute left-[7px] top-8 bottom-0 w-px ${isDark ? 'bg-slate-700' : 'bg-red-100'}`} />
+              )}
+              <div className={`absolute left-0 top-4 w-3.5 h-3.5 rounded-full border-2 ${isDark ? 'bg-slate-900 border-cyan-400' : 'bg-white border-red-400'
+                }`} />
+              <CollapsibleSection
+                defaultOpen
+                className={isDark ? 'bg-slate-900/40' : 'bg-red-50/30'}
+                title={
+                  <div className="flex items-center gap-2">
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${isDark ? 'bg-cyan-500/15 text-cyan-300' : 'bg-red-100 text-red-600'
+                      }`}>第 {index + 1} 轮</span>
+                    <span className={`text-sm font-medium ${round.queryLoading && 'qa-generating-marquee'} ${round.queryLoading && (isDark ? 'text-slate-100 qa-generating-marquee-dark' : 'text-gray-900 qa-generating-marquee-light')}`}>{round.title}</span>
+                  </div>
+                }
+              >
+                <div className="space-y-3">
+                  <CollapsibleSection
+                    defaultOpen
+                    className={isDark ? 'bg-slate-800/50' : 'bg-white/80'}
+                    title={
+                      <div className="flex items-center gap-2">
+                        <Sparkles className={`w-4 h-4 ${isDark ? 'text-violet-300' : 'text-orange-500'}`} />
+                        <span className={`text-sm font-medium ${isDark ? 'text-slate-100' : 'text-gray-800'}`}>思考内容</span>
+                      </div>
+                    }
+                  >
+                    <MarkdownRenderer
+                      content={round.thoughtMarkdown}
+                      className={`text-sm ${isDark ? 'text-slate-300' : 'text-gray-700'}`}
+                      onCitationClick={onCitationClick}
+                    />
+                  </CollapsibleSection>
+                  {
+                    round.queryShow &&
+                    <div className="flex items-center">
+                      <SearchQueryBadge query={round.query} queryTitle={round.queryTitle} loading={round.queryLoading} />
+                    </div>
+                  }
+                  {
+                    round.queryShow &&
+                    <CollapsibleSection
+                      defaultOpen={!round.queryLoading}
+                      className={isDark ? 'bg-slate-800/50' : 'bg-white/80'}
+                      title={
+                        <div className="flex items-center gap-2">
+                          <FileSearch className={`w-4 h-4 ${isDark ? 'text-blue-300' : 'text-red-500'}`} />
+                          <span className={`text-sm font-medium ${isDark ? 'text-slate-100' : 'text-gray-800'}`}>检索内容</span>
+                          <span className={`text-xs ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>{round.retrievals.length} 条</span>
+                        </div>
+                      }
+                    >
+                      {round.queryLoading ? (
+                        <div className={`rounded-xl px-3 py-4 text-sm flex items-center gap-2 ${isDark ? 'bg-slate-900/60 text-slate-400' : 'bg-gray-50 text-gray-500'}`}>
+                          <Loader2 className="w-4 h-4 animate-spin" />
+                          正在召回相关内容...
+                        </div>
+                      ) : (
+                        <RetrievalList items={round.retrievals} />
+                      )}
+                    </CollapsibleSection>
+                  }
+                  {
+                    round.textidContent &&
+                    <div className="mt-[10px]">
+                      {round.textidContent}
+                    </div>
+                  }
+                </div>
+              </CollapsibleSection>
+            </div>
+          ))}
+        </div>
+      </CollapsibleSection>
+
+      <div className={`rounded-2xl border p-4 ${isDark ? 'bg-slate-700/60 border-slate-600/40' : 'bg-white border-gray-100'}`}>
+        <div className={`text-sm font-semibold mb-3 ${isDark ? 'text-white' : 'text-gray-900'}`}>最终回答</div>
+        {
+          !trace.finalAnswerMarkdown && <div className={`rounded-xl px-3 py-4 text-sm flex items-center gap-2 ${isDark ? 'bg-slate-900/60 text-slate-400' : 'bg-gray-50 text-gray-500'}`}>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            正在生成思考过程与检索内容...
+          </div>
+        }
+        <MarkdownRenderer
+          content={trace.finalAnswerMarkdown}
+          className={`text-sm ${isDark ? 'text-slate-200' : 'text-gray-700'}`}
+          onCitationClick={onCitationClick}
+        />
+      </div>
+    </div>
+  );
+};
+
+interface EmptyChatStateProps {
+  icon?: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+/**
+ * 空状态展示。
+ *
+ * 当当前模式没有任何消息时使用，提示用户可以开始输入问题。
+ */
+export const EmptyChatState: React.FC<EmptyChatStateProps> = ({ icon, title, description }) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
+  return (
+    <div className={`h-full flex flex-col items-center justify-center ${isDark ? 'text-slate-500' : 'text-gray-400'}`}>
+      <div className={`w-20 h-20 rounded-3xl mb-5 flex items-center justify-center ${isDark ? 'bg-slate-700/40' : 'bg-gradient-to-br from-red-50 to-orange-50'
+        }`}>
+        {icon ?? <Bot className="w-11 h-11 opacity-60" />}
+      </div>
+      <p className="text-lg font-medium">{title}</p>
+      <p className="text-sm mt-2">{description}</p>
+    </div>
+  );
+};
+
+interface QAComposerProps {
+  value: string;
+  placeholder: string;
+  isLoading: boolean;
+  canSubmit?: boolean;
+  onChange: (value: string) => void;
+  onSubmit: () => void;
+  onStop: () => void;
+  onKeyDown?: (val: string) => void;
+  onUpload?: () => void;
+  onReset?: () => void;
+  onSave?: () => void;
+  onCollect?: () => void;
+  onOpenSettings?: () => void;
+  showUpload?: boolean;
+  showReset?: boolean;
+  showSave?: boolean;
+  showCollect?: boolean;
+}
+
+/**
+ * 问答输入区。
+ *
+ * 负责输入、发送/停止、附件、重置、保存、收藏和模型参数设置入口。
+ * 具体业务动作通过 props 回调交给父组件处理，保证输入区本身不依赖某个问答模式。
+ */
+export const QAComposer: React.FC<QAComposerProps> = ({
+  value,
+  placeholder,
+  isLoading,
+  canSubmit,
+  onChange,
+  onSubmit,
+  onStop,
+  onKeyDown,
+  onUpload,
+  onReset,
+  onSave,
+  onCollect,
+  onOpenSettings,
+  showUpload = true,
+  showReset = false,
+  showSave = true,
+  showCollect = true,
+}) => {
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+  const submitEnabled = canSubmit ?? Boolean(value.trim());
+  const iconButtonClass = `p-2 rounded-lg transition-colors ${isDark ? 'hover:bg-slate-600 text-slate-400' : 'hover:bg-gray-200 text-gray-500'}`;
+  const handleKeyDown = (val: string, context: { e: React.KeyboardEvent }) => {
+    if (context?.e?.key === 'Enter') {
+      context.e.preventDefault();
+      onKeyDown?.(val);
+    }
+  };
+  return (
+    <div className={`border-t p-4 ${isDark ? 'border-slate-700/50' : 'border-red-100'}`}>
+      <div className={`flex items-end gap-3 rounded-2xl p-3 shadow-inner ${isDark ? 'bg-slate-700/50' : 'bg-gray-100'}`}>
+        <Textarea
+          value={value}
+          onChange={(nextValue) => onChange(String(nextValue))}
+          onKeydown={handleKeyDown}
+          placeholder={placeholder}
+          autosize={{ minRows: 1, maxRows: 15 }}
+          disabled={isLoading}
+          className={`flex-1 !bg-transparent !border-0 !shadow-none qa-composer-textarea [&]:!border-0 [&]:!shadow-none [&]:!outline-none [&]:focus:!border-0 [&]:focus:!shadow-none [&]:focus:!outline-none [&_.t-textarea]:!border-0 [&_.t-textarea]:!shadow-none [&_.t-textarea]:!outline-none [&_.t-textarea:hover]:!border-0 [&_.t-textarea:hover]:!shadow-none [&_.t-textarea--focused]:!border-0 [&_.t-textarea--focused]:!shadow-none [&_.t-is-focused]:!border-0 [&_.t-is-focused]:!shadow-none [&_.t-textarea__inner]:!bg-transparent [&_.t-textarea__inner]:!border-0 [&_.t-textarea__inner]:!shadow-none [&_.t-textarea__inner]:!outline-none [&_.t-textarea__inner]:!resize-none [&_.t-textarea__inner]:!min-h-[40px] [&_.t-textarea__inner]:!p-0 [&_.t-textarea__inner:hover]:!border-0 [&_.t-textarea__inner:hover]:!shadow-none [&_.t-textarea__inner:focus]:!border-0 [&_.t-textarea__inner:focus]:!shadow-none [&_.t-textarea__inner:focus]:!outline-none [&_.t-textarea__inner]:disabled:!cursor-not-allowed ${isDark
+            ? '[&_.t-textarea__inner]:!text-white [&_.t-textarea__inner]:placeholder:!text-slate-500'
+            : '[&_.t-textarea__inner]:!text-gray-800 [&_.t-textarea__inner]:placeholder:!text-gray-400'
+            }`}
+        />
+
+        <div className="flex items-center gap-2">
+          {/* {showUpload && (
+            <button onClick={onUpload} className={iconButtonClass} title="上传附件" type="button">
+              <Upload className="w-5 h-5" />
+            </button>
+          )}
+          {showReset && (
+            <button onClick={onReset} className={iconButtonClass} title="重新提问" type="button">
+              <RotateCcw className="w-5 h-5" />
+            </button>
+          )}
+          {showSave && (
+            <button onClick={onSave} className={iconButtonClass} title="保存记录" type="button">
+              <Bookmark className="w-5 h-5" />
+            </button>
+          )}
+          {showCollect && (
+            <button onClick={onCollect} className={iconButtonClass} title="加入收藏" type="button">
+              <Bookmark className="w-5 h-5" />
+            </button>
+          )} */}
+          {onOpenSettings && (
+            <button onClick={onOpenSettings} className={iconButtonClass} title="模型参数设置" type="button">
+              <Settings className="w-5 h-5" />
+            </button>
+          )}
+
+          <button
+            onClick={isLoading ? onStop : onSubmit}
+            disabled={!isLoading && !submitEnabled}
+            className={`px-4 py-2 rounded-xl font-medium transition-all flex items-center gap-2 shadow-sm ${isLoading
+              ? isDark
+                ? 'bg-rose-600 text-white qa-stop-breathing'
+                : 'bg-red-600 text-white qa-stop-breathing'
+              : submitEnabled
+                ? isDark
+                  ? 'bg-blue-600 hover:bg-blue-700 text-white'
+                  : 'bg-red-500 hover:bg-red-600 text-white'
+                : isDark
+                  ? 'bg-slate-600 text-slate-400 cursor-not-allowed'
+                  : 'bg-gray-300 text-gray-500 cursor-not-allowed'
+              }`}
+            type="button"
+          >
+            {isLoading ? <Square className="w-4 h-4 fill-current" /> : <Send className="w-4 h-4" />}
+            {isLoading ? '停止' : '发送'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -21,6 +21,7 @@ import {
 } from 'lucide-react';
 import { useTheme } from '../../../contexts/ThemeContext';
 import MarkdownRenderer from '../../MarkdownRenderer';
+import './qa-animations.css';

 /**
 * 单条检索结果。
@@ -0,0 +1,171 @@
+/**
+ * QA 系列共享动画与样式
+ *
+ * 这些类被 QACommon.tsx（以及通过它的 GeneralQA / AgentQA / CollaborativeQA）使用。
+ * 全部样式从 web-code/theme.css、web-code/App.css 和 web-code/index.css 迁移而来，
+ * 仅保留 QA 系列实际使用的部分。
+ */
+
+/* ── 头像扫光（生成中沿头像横扫的高光条） ───────────────────────────── */
+@keyframes qa-avatar-shine {
+  0% {
+    transform: translateX(-120%) skewX(-18deg);
+    opacity: 0;
+  }
+  45% {
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateX(120%) skewX(-18deg);
+    opacity: 0;
+  }
+}
+
+/* ── 头像整体微旋转（generating 状态） ─────────────────────────────── */
+@keyframes qa-avatar-orbit {
+  0%,
+  100% {
+    transform: rotate(0deg) scale(1);
+  }
+  50% {
+    transform: rotate(4deg) scale(1.06);
+  }
+}
+
+/* ── 头像图标脉冲 ────────────────────────────────────────────────── */
+@keyframes qa-avatar-icon-pulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.12);
+    opacity: 0.82;
+  }
+}
+
+/* ── 右上角 Sparkles 闪烁 ───────────────────────────────────────── */
+@keyframes qa-spark-twinkle {
+  0%,
+  100% {
+    transform: scale(0.85) rotate(0deg);
+    opacity: 0.65;
+  }
+  50% {
+    transform: scale(1.15) rotate(18deg);
+    opacity: 1;
+  }
+}
+
+/* ── 停止按钮呼吸 ─────────────────────────────────────────────── */
+@keyframes qa-stop-breathing {
+  0%,
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
+  }
+  50% {
+    transform: scale(1.04);
+    box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);
+  }
+}
+
+/* ── “正在生成” 跑马灯（文字渐变流动） ─────────────────────────── */
+@keyframes qa-generating-marquee {
+  0% {
+    background-position: 180% 50%;
+  }
+  100% {
+    background-position: -80% 50%;
+  }
+}
+
+/* ── 输入中三个圆点跳动 ───────────────────────────────────────── */
+@keyframes qa-typing-dot {
+  0%,
+  80%,
+  100% {
+    transform: translateY(0);
+    opacity: 0.35;
+  }
+  40% {
+    transform: translateY(-5px);
+    opacity: 1;
+  }
+}
+
+/* ── 类绑定 ───────────────────────────────────────────────────── */
+.qa-avatar-active {
+  animation: qa-avatar-orbit 1.8s ease-in-out infinite;
+}
+
+.qa-avatar-icon-active {
+  animation: qa-avatar-icon-pulse 1.1s ease-in-out infinite;
+}
+
+.qa-avatar-active .qa-avatar-shine {
+  animation: qa-avatar-shine 1.6s ease-in-out infinite;
+}
+
+.qa-avatar-spark {
+  animation: qa-spark-twinkle 1s ease-in-out infinite;
+}
+
+.qa-stop-breathing {
+  animation: qa-stop-breathing 1.25s ease-in-out infinite;
+}
+
+.qa-typing-dot {
+  animation: qa-typing-dot 1.2s ease-in-out infinite;
+}
+
+.qa-generating-marquee {
+  display: inline-block;
+  background-size: 220% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+  animation: qa-generating-marquee 1.45s linear infinite;
+}
+
+.qa-generating-marquee-light {
+  background-image: linear-gradient(
+    90deg,
+    #4b5563 0%,
+    #4b5563 34%,
+    #ef4444 48%,
+    #fb923c 55%,
+    #4b5563 68%,
+    #4b5563 100%
+  );
+}
+
+.qa-generating-marquee-dark {
+  background-image: linear-gradient(
+    90deg,
+    #cbd5e1 0%,
+    #cbd5e1 34%,
+    #67e8f9 48%,
+    #a78bfa 55%,
+    #cbd5e1 68%,
+    #cbd5e1 100%
+  );
+}
+
+/* ── 兜底：清掉 TDesign textarea 的边框/阴影/背景 ─────────────── */
+.qa-composer-textarea,
+.qa-composer-textarea .t-textarea,
+.qa-composer-textarea .t-textarea__inner {
+  background: transparent !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+.qa-composer-textarea .t-textarea__inner {
+  resize: none !important;
+  min-height: 40px !important;
+  padding: 0 !important;
+}