mky-vent-base/src/views/ventAI/manageAssistent/components/chatModal/ChatMessages.vue

<template>
  <div class="chat-messages-container">
    <!-- 左侧对话缩略导航 -->
    <div
      v-if="qaPairs.length > 0"
      class="conversation-nav"
      ref="navRef"
      @mouseenter="onNavMove"
      @mousemove="onNavMove"
      @mouseleave="onNavLeave"
      @scroll="onNavScroll"
    >
      <div
        v-for="(pair, pIdx) in qaPairs"
        :key="pIdx"
        :class="['nav-line', { 'nav-line-hot': nearestLineIndex === pIdx, active: activeMessage && activeMessage === messages[pair.startIndex] }]"
        :style="{ width: `${navLineWidth(pIdx)}px` }"
        @click="scrollToPair(pair)"
      ></div>
    </div>
    <Transition name="tooltip-fade">
      <div v-if="hoveredPair" ref="tooltipRef" class="conversation-tooltip" :style="{ top: `${tooltipTop}px` }">
        <span class="tooltip-arrow" :style="{ top: `${tooltipArrowTop}px` }"></span>
        <div v-if="hoveredPair.question" class="tooltip-row">
          <span class="tooltip-label tooltip-label-q">问</span>
          <span class="tooltip-text">{{ hoveredPair.question }}</span>
        </div>
        <div v-if="hoveredPair.answer" class="tooltip-row">
          <span class="tooltip-label tooltip-label-a">答</span>
          <span class="tooltip-text">{{ hoveredPair.answer }}</span>
        </div>
      </div>
    </Transition>
    <div class="chat-messages" ref="messagesRef">
      <!-- 新对话缺省图 -->
      <div v-if="messages.length === 0" class="welcome-empty">
        <img :src="getCssUrl('--img-chat-welcome-img')" class="welcome-img" />
      </div>
      <div v-for="(message, index) in messages" :key="index" :class="['message-wrapper', message.type]" @mouseleave="copiedMessageIndex = -1">
        <!-- AI消息 -->
        <div v-if="message.type === 'ai'" class="ai-message">
          <div class="message-body">
            <!-- 思考过程折叠卡片 -->
            <div v-if="message.thinkingSteps && message.thinkingSteps.length > 0" class="thinking-card">
              <div class="thinking-duration-bar" @click="toggleThinkingCard(index)">
                <span v-if="getDurationText(message)" class="thinking-duration">{{ getDurationText(message) }}</span>
                <div :class="['thinking-arrow', { expanded: !collapsedThinking[index] }]">
                  <img :src="getCssUrl('--img-chat-arrow-icon')" width="12" height="12" />
                </div>
              </div>
              <Transition name="collapse">
                <div v-show="!collapsedThinking[index]" class="thinking-collapse-wrap">
                  <div class="thinking-header" @click="toggleThinkingContent(index)">
                    <div class="thinking-header-left">
                      <div class="thinking-icon"></div>
                      <span class="thinking-title">思考过程</span>
                    </div>
                    <div v-if="message.thinkingContent" :class="['thinking-arrow', { expanded: !collapsedThinkingContent[index] }]">
                      <img :src="getCssUrl('--img-chat-arrow-icon')" width="10" height="10" />
                    </div>
                  </div>

                  <!-- thinking_token 思考内容 -->
                  <Transition name="collapse">
                    <div v-if="message.thinkingContent && !collapsedThinkingContent[index]" class="thinking-content-body">
                      {{ message.thinkingContent }}
                    </div>
                  </Transition>

                  <div class="thinking-body">
                    <div
                      v-for="(group, groupIdx) in groupStepsByAgent(message.thinkingSteps)"
                      :key="groupIdx"
                      class="agent-group"
                      @click="handleAgentGroupClick(index, group)"
                    >
                      <div class="agent-group-header">
                        <div class="agent-group-header-left">
                          <div class="agent-group-icon"></div>
                          <span class="agent-group-name">{{ group.agent }}</span>
                        </div>
                        <span v-if="getLatestStepMessage(group)" class="agent-group-latest">
                          {{ getLatestStepMessage(group) }}
                        </span>
                        <div class="thinking-arrow agent-arrow">
                          <img :src="getCssUrl('--img-chat-next-icon')" width="10" height="10" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Transition>
            </div>

            <div
              v-if="message.content"
              class="message-text"
              v-html="
                renderMarkdown(
                  message.content,
                  tableIcons,
                  message.citations?.items?.length ? Math.max(...message.citations.items.map((i) => i.id)) : undefined
                )
              "
              @click="handleFootnoteClick($event, index)"
            ></div>

            <!-- 数据来源卡片 citations -->
            <div v-if="message.citations" class="citations-card">
              <div v-if="message.citations.model_only" class="citations-header citations-header-simple">
                <span class="citations-title">本回答依据模型知识生成，仅供参考</span>
              </div>
              <template v-else-if="message.citations.items?.length">
                <div class="citations-header" @click="toggleCitations(index)">
                  <div class="citations-header-left">
                    <span class="citations-title">数据来源</span>
                    <span class="citations-count">{{ message.citations.items.length }}</span>
                  </div>
                  <div :class="['thinking-arrow', { expanded: !collapsedCitations[index] }]">
                    <img :src="getCssUrl('--img-chat-arrow-icon')" width="10" height="10" />
                  </div>
                </div>
                <div v-show="!collapsedCitations[index]" class="citations-body">
                  <div v-for="item in message.citations.items" :key="item.id" :id="`citation-${index}-${item.id}`" class="citation-item">
                    <div class="citation-item-row">
                      <span :class="['citation-badge', `citation-badge-${item.type}`]">{{ item.type_cn }}</span>
                      <span class="citation-title-text">{{ item.title }}</span>
                      <span v-if="item.search_url" class="citation-link">知识库检索</span>
                      <span v-if="item.url" class="citation-link">链接</span>
                    </div>
                    <div class="citation-item-attrs">
                      <span v-if="item.source_system" class="citation-attr">{{ item.source_system }}</span>
                      <span v-if="item.fetched_at" class="citation-attr">{{ item.fetched_at }}</span>
                    </div>
                    <div v-if="item.snippet" class="citation-snippet" :title="item.snippet">{{ item.snippet }}</div>
                  </div>
                </div>
              </template>
            </div>

            <div v-if="message.wordDownloadUrl" class="word-download-area">
              <a-button type="link" @click="emit('download-word', message.wordDownloadUrl)"> 下载报告文件 (.docx) </a-button>
            </div>

            <!-- 文件操作卡片 -->
            <div v-if="message.downloadFiles?.length" class="download-file-cards">
              <div v-for="(file, fIdx) in message.downloadFiles" :key="fIdx" class="download-file-card" @click="handlePreviewFile(file)">
                <div class="file-card-info">
                  <div class="file-card-icon" :style="{ backgroundImage: getFileIconVar(file.filename) }"></div>
                  <div class="file-card-text">
                    <span class="file-card-name">{{ file.filename }}</span>
                    <span class="file-card-hint">点击预览文件</span>
                  </div>
                </div>
                <div class="file-card-actions">
                  <button class="file-action-btn download-btn" @click.stop="handleDownloadFile(file.url, file.filename)">
                    <img :src="getCssUrl('--img-chat-download-icon-btn')" width="14" height="14" />
                    <span>下载</span>
                  </button>
                  <button v-if="isEditableFile(file.filename)" class="file-action-btn edit-btn" @click.stop="handleEditFile(file.url, file.filename)">
                    <img :src="getCssUrl('--img-chat-edit-icon')" width="14" height="14" />
                    <span>编辑</span>
                  </button>
                </div>
              </div>
            </div>
            <div v-show="message.isLoading" class="loading-dots">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>

            <!-- ask_user 交互提问 UI（分步向导） -->
            <div v-if="message.isPendingApproval && message.pendingApprovalData?.ask_user" class="approval-card">
              <div class="approval-icon"></div>
              <div class="approval-content">
                <div class="approval-title">{{ message.pendingApprovalData?.message }}</div>

                <!-- 计划内容 -->
                <div v-if="message.pendingApprovalData?.plan" class="approval-plan">
                  <div class="approval-plan-label">执行计划</div>
                  <div class="approval-plan-content">{{ message.pendingApprovalData.plan }}</div>
                </div>

                <!-- 步骤指示器 -->
                <div v-if="message.pendingApprovalData.ask_user.questions.length > 1" class="ask-user-stepper">
                  <div
                    v-for="(_, sIdx) in message.pendingApprovalData.ask_user.questions"
                    :key="sIdx"
                    :class="[
                      'ask-user-step-dot',
                      {
                        active: sIdx === (askUserCurrentStep[index] ?? 0),
                        completed: sIdx < (askUserCurrentStep[index] ?? 0) || !!(askUserAnswers[index]?.[sIdx] && askUserAnswers[index][sIdx].trim()),
                      },
                    ]"
                    @click="askUserCurrentStep[index] = sIdx"
                  ></div>
                  <span class="ask-user-step-text"
                    >{{ (askUserCurrentStep[index] ?? 0) + 1 }} / {{ message.pendingApprovalData.ask_user.questions.length }}</span
                  >
                </div>

                <!-- 当前问题 -->
                <div v-if="message.pendingApprovalData.ask_user.questions[askUserCurrentStep[index] ?? 0]" class="ask-user-question">
                  <div class="ask-user-question-text">
                    {{ message.pendingApprovalData.ask_user.questions[askUserCurrentStep[index] ?? 0].question }}
                    <span
                      v-if="message.pendingApprovalData.ask_user.questions[askUserCurrentStep[index] ?? 0].required !== false"
                      class="ask-user-required"
                      >*</span
                    >
                  </div>

                  <!-- multiple_choice 类型 -->
                  <div
                    v-if="message.pendingApprovalData.ask_user.questions[askUserCurrentStep[index] ?? 0].type === 'multiple_choice'"
                    class="ask-user-choices"
                  >
                    <div
                      v-for="(choice, cIdx) in message.pendingApprovalData.ask_user.questions[askUserCurrentStep[index] ?? 0].choices"
                      :key="cIdx"
                      :class="[
                        'ask-user-choice',
                        {
                          selected:
                            askUserAnswers[index]?.[askUserCurrentStep[index] ?? 0] === getChoiceValue(choice) &&
                            !askUserOtherSelected[index]?.[askUserCurrentStep[index] ?? 0],
                        },
                      ]"
                      @click="selectChoice(index, askUserCurrentStep[index] ?? 0, choice, message.pendingApprovalData.ask_user.questions.length)"
                    >
                      <span>{{ getChoiceValue(choice) }}</span>
                    </div>
                    <!-- Other 选项 -->
                    <div
                      :class="['ask-user-choice', { selected: askUserOtherSelected[index]?.[askUserCurrentStep[index] ?? 0] }]"
                      @click="selectOther(index, askUserCurrentStep[index] ?? 0)"
                    >
                      <span>其他</span>
                    </div>
                    <input
                      v-if="askUserOtherSelected[index]?.[askUserCurrentStep[index] ?? 0]"
                      class="ask-user-other-input"
                      placeholder="请输入..."
                      :value="askUserAnswers[index]?.[askUserCurrentStep[index] ?? 0]"
                      @input="askUserAnswers[index][askUserCurrentStep[index] ?? 0] = ($event.target as HTMLInputElement).value"
                    />
                  </div>

                  <!-- text 类型 -->
                  <div
                    v-else-if="message.pendingApprovalData.ask_user.questions[askUserCurrentStep[index] ?? 0].type === 'text'"
                    class="ask-user-text"
                  >
                    <textarea
                      class="ask-user-textarea"
                      placeholder="请输入..."
                      :value="askUserAnswers[index]?.[askUserCurrentStep[index] ?? 0]"
                      @input="askUserAnswers[index][askUserCurrentStep[index] ?? 0] = ($event.target as HTMLTextAreaElement).value"
                    ></textarea>
                  </div>
                </div>

                <!-- 操作按钮 -->
                <div class="approval-actions">
                  <button v-if="(askUserCurrentStep[index] ?? 0) > 0" class="approval-btn nav-btn" @click="goPrevStep(index)">上一步</button>
                  <button
                    v-if="(askUserCurrentStep[index] ?? 0) < message.pendingApprovalData.ask_user.questions.length - 1"
                    class="approval-btn approve-btn"
                    :disabled="
                      !isCurrentStepAnswered(
                        index,
                        askUserCurrentStep[index] ?? 0,
                        message.pendingApprovalData.ask_user.questions[askUserCurrentStep[index] ?? 0]
                      )
                    "
                    @click="goNextStep(index, message.pendingApprovalData.ask_user.questions.length)"
                    >下一步</button
                  >
                  <button
                    v-if="(askUserCurrentStep[index] ?? 0) === message.pendingApprovalData.ask_user.questions.length - 1"
                    class="approval-btn approve-btn"
                    :disabled="
                      !isCurrentStepAnswered(
                        index,
                        askUserCurrentStep[index] ?? 0,
                        message.pendingApprovalData.ask_user.questions[askUserCurrentStep[index] ?? 0]
                      )
                    "
                    @click="handleSubmitAskUser(index)"
                    >提交</button
                  >
                  <button class="approval-btn reject-btn" @click="handleCancelAskUser">取消</button>
                </div>
              </div>
            </div>
          </div>
          <!-- AI消息操作栏 -->
          <div class="message-actions">
            <div class="action-btn" @click="copyMessageContent(message.content, index)" :title="copiedMessageIndex === index ? '复制成功' : '复制'">
              <img :src="copyIconUrl(index)" width="14" height="14" />
            </div>
            <span v-if="message.createdAt" class="action-time">{{ formatFullTime(message.createdAt) }}</span>
          </div>
        </div>

        <!-- 用户消息 -->
        <div v-else class="user-message">
          <div class="message-body">
            <div class="message-text" v-html="renderMarkdown(message.content, tableIcons)"></div>
            <div v-if="message.attachedFile" class="attached-file-card" @click="emit('file-preview', message.attachedFile)">
              <div class="file-icon-card" :style="{ backgroundImage: getFileIconVar(message.attachedFile.name) }"></div>
              <div class="file-info-card">
                <div class="file-name-card">{{ message.attachedFile.name }}</div>
                <div class="file-size-card">{{ formatFileSize(message.attachedFile.size) }}</div>
              </div>
            </div>
          </div>
          <!-- 用户消息操作栏 -->
          <div class="message-actions">
            <div class="action-btn" @click="copyMessageContent(message.content, index)" :title="copiedMessageIndex === index ? '复制成功' : '复制'">
              <img :src="copyIconUrl(index)" width="14" height="14" />
            </div>
            <span v-if="message.createdAt" class="action-time">{{ formatFullTime(message.createdAt) }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 回到底部按钮 -->
    <div v-if="!isAtBottom" class="scroll-to-bottom" @click="scrollToBottom">
      <div class="scroll-to-bottom-icon"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
  import dayjs from 'dayjs';
  import {
    renderMarkdown,
    formatFileSize,
    tableHtmlToMarkdown,
    tableHtmlToCsv,
    isMdFile,
    isTextFile,
    isWordFile,
    isExcelFile,
    isImageFile,
    isPdfFile,
    getFileIconVar,
  } from './utils';
  import { getToken } from '/@/utils/auth';
  import { message } from 'ant-design-vue';
  import type { Message, AttachedFile, ThinkingStep } from './types';
  // import katex from 'katex';
  // import 'katex/dist/katex.min.css';

  // Cache CSS variable lookups to avoid repeated getComputedStyle calls on every render
  const cssUrlCache = new Map<string, string>();
  const getCssUrl = (varName: string) => {
    if (!cssUrlCache.has(varName)) {
      const val = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
      cssUrlCache.set(varName, val.replace(/^url\(["']?/, '').replace(/["']?\)$/, ''));
    }
    return cssUrlCache.get(varName)!;
  };

  // Clear cache when theme changes (observed via MutationObserver on html class)
  const themeObserver = new MutationObserver(() => cssUrlCache.clear());
  themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
  onBeforeUnmount(() => themeObserver.disconnect());

  const tableIcons = {
    copy: getCssUrl('--img-chat-copy-icon'),
    download: getCssUrl('--img-chat-download-icon-btn'),
    preview: getCssUrl('--img-chat-preview-icon'),
    copySuccess: getCssUrl('--img-chat-copy-success-icon'),
  };

  const copyIconUrl = computed(() => {
    const icon = getCssUrl('--img-chat-copy-icon');
    const successIcon = getCssUrl('--img-chat-copy-success-icon');
    return (index: number) => (copiedMessageIndex.value === index ? successIcon : icon);
  });

  // 全局计时器 - 每秒刷新一次，用于实时显示思考耗时
  const nowTs = ref(Date.now());
  let timerInterval: ReturnType<typeof setInterval> | null = null;

  const getDurationText = (message: Message): string => {
    // 优先使用后端返回的 duration_ms（已包含 baseDurationMs 累加）
    if (message.durationMs) {
      const totalSec = Math.round(message.durationMs / 1000);
      const min = Math.floor(totalSec / 60);
      const sec = totalSec % 60;
      return `已工作 ${min}分${sec.toString().padStart(2, '0')}秒`;
    }
    // 审批等待中 - 暂停显示中断前的累计时长
    if (message.isPendingApproval && message.pendingApprovalData?.elapsedMs) {
      const totalSec = Math.round(message.pendingApprovalData.elapsedMs / 1000);
      const min = Math.floor(totalSec / 60);
      const sec = totalSec % 60;
      return `已工作 ${min}分${sec.toString().padStart(2, '0')}秒`;
    }
    // 前端实时计时（含中断前累计时长）
    if (message.generateStartTime && message.isLoading) {
      const baseMs = message.baseDurationMs || 0;
      const elapsed = Math.floor((nowTs.value - message.generateStartTime + baseMs) / 1000);
      const min = Math.floor(elapsed / 60);
      const sec = elapsed % 60;
      return `已工作 ${min}分${sec.toString().padStart(2, '0')}秒`;
    }
    return '';
  };

  const props = defineProps<{
    messages: Message[];
  }>();

  // Track the last pendingApprovalData reference to detect new interrupts
  const lastApprovalDataRef = new Map<number, any>();

  // 自动初始化 ask_user 答案状态
  watch(
    () => props.messages,
    (msgs) => {
      msgs.forEach((msg, idx) => {
        if (msg.isPendingApproval && msg.pendingApprovalData?.ask_user?.questions) {
          // Only reinitialize if pendingApprovalData object reference changed (new interrupt)
          const lastRef = lastApprovalDataRef.get(idx);
          if (lastRef !== msg.pendingApprovalData) {
            lastApprovalDataRef.set(idx, msg.pendingApprovalData);
            initAskUserAnswers(idx, msg.pendingApprovalData.ask_user.questions);
          }
        } else {
          lastApprovalDataRef.delete(idx);
        }
      });
    },
    { immediate: true, deep: true }
  );

  export interface AgentDetailData {
    messageIndex: number;
    agent: string;
    agentId?: string;
  }

  const emit = defineEmits<{
    (e: 'file-preview', file: AttachedFile): void;
    (e: 'download-word', url: string): void;
    (e: 'open-file-preview', file: AttachedFile): void;
    (e: 'ask-user-submit', answers: string[]): void;
    (e: 'ask-user-cancel'): void;
    (e: 'agent-detail-click', data: AgentDetailData): void;
    (e: 'open-markdown-tab', payload: { title: string; content: string }): void;
  }>();

  const isEditableFile = (filename: string) => isMdFile(filename) || isTextFile(filename);

  const handleDownloadFile = (url: string, filename: string) => {
    if (!url) return;
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };

  const handleEditFile = async (url: string, filename: string) => {
    try {
      const resp = await fetch(url, { headers: { 'X-Access-Token': getToken() } });
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      const content = await resp.text();
      const ext = filename.split('.').pop()?.toLowerCase() || '';
      const mimeMap: Record<string, string> = {
        md: 'text/markdown',
        txt: 'text/plain',
        json: 'application/json',
        xml: 'text/xml',
        yaml: 'text/yaml',
        yml: 'text/yaml',
        csv: 'text/csv',
      };
      const file: AttachedFile = {
        id: `report-${url}`,
        name: filename,
        size: content.length,
        type: mimeMap[ext] || 'text/plain',
        content,
        uploadTime: new Date().toISOString(),
      };
      emit('open-file-preview', file);
    } catch (err) {
      console.error('获取文件内容失败:', err);
      message.error('获取文件内容失败');
    }
  };

  // 点击文件卡片：按类型拉取内容并在右侧辅助面板打开预览标签
  const handlePreviewFile = async (file: { url: string; filename: string }) => {
    if (!file.url) return;
    try {
      const resp = await fetch(file.url, { headers: { 'X-Access-Token': getToken() } });
      if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
      const ext = file.filename.split('.').pop()?.toLowerCase() || '';
      const mimeMap: Record<string, string> = {
        md: 'text/markdown',
        txt: 'text/plain',
        json: 'application/json',
        xml: 'text/xml',
        yaml: 'text/yaml',
        yml: 'text/yaml',
        csv: 'text/csv',
      };
      const id = `report-${file.url}`;
      const uploadTime = new Date().toISOString();

      let previewFile: AttachedFile;
      if (mimeMap[ext]) {
        const content = await resp.text();
        previewFile = { id, name: file.filename, size: content.length, type: mimeMap[ext], content, uploadTime };
      } else if (isWordFile(file.filename) || isExcelFile(file.filename)) {
        const arrayBuffer = await resp.arrayBuffer();
        previewFile = { id, name: file.filename, size: arrayBuffer.byteLength, type: 'application/octet-stream', arrayBuffer, uploadTime };
      } else if (isImageFile(file.filename) || isPdfFile(file.filename)) {
        const blob = await resp.blob();
        const dataUrl = await new Promise<string>((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => resolve(reader.result as string);
          reader.onerror = () => reject(reader.error);
          reader.readAsDataURL(blob);
        });
        previewFile = { id, name: file.filename, size: blob.size, type: blob.type, preview: dataUrl, uploadTime };
      } else {
        // 不支持的格式回退为直接下载
        handleDownloadFile(file.url, file.filename);
        return;
      }
      emit('file-preview', previewFile);
    } catch (err) {
      console.error('获取文件内容失败:', err);
      message.error('文件预览失败，请尝试下载查看');
    }
  };

  // ask_user 答案状态（按消息索引存储）
  const askUserAnswers = reactive<Record<number, string[]>>({});
  const askUserOtherSelected = reactive<Record<number, boolean[]>>({});
  const askUserCurrentStep = reactive<Record<number, number>>({});

  // choice 可能是字符串或 { value: "..." } 对象，统一提取字符串
  const getChoiceValue = (choice: any): string => {
    if (typeof choice === 'string') return choice;
    if (choice && typeof choice === 'object' && 'value' in choice) return choice.value;
    return String(choice);
  };

  const initAskUserAnswers = (index: number, questions: { question: string; type: string; choices?: any[] }[]) => {
    // Always reinitialize when called - handles repeated interrupts from backend
    askUserAnswers[index] = questions.map(() => '');
    askUserOtherSelected[index] = questions.map(() => false);
    askUserCurrentStep[index] = 0;
  };

  const isCurrentStepAnswered = (msgIndex: number, qIndex: number, question: { required?: boolean; type: string }) => {
    const answers = askUserAnswers[msgIndex];
    if (!answers) return false;
    if (question.required === false && !answers[qIndex]) return true;
    return !!(answers[qIndex] && answers[qIndex].trim() !== '');
  };

  const goNextStep = (msgIndex: number, totalQuestions: number) => {
    if (askUserCurrentStep[msgIndex] < totalQuestions - 1) {
      askUserCurrentStep[msgIndex]++;
    }
  };

  const goPrevStep = (msgIndex: number) => {
    if (askUserCurrentStep[msgIndex] > 0) {
      askUserCurrentStep[msgIndex]--;
    }
  };

  const selectChoice = (msgIndex: number, qIndex: number, choice: any, totalQuestions: number) => {
    if (!askUserAnswers[msgIndex]) return;
    askUserAnswers[msgIndex][qIndex] = getChoiceValue(choice);
    askUserOtherSelected[msgIndex][qIndex] = false;
    // 单选自动跳到下一题（非最后一题时）
    if (qIndex < totalQuestions - 1) {
      goNextStep(msgIndex, totalQuestions);
    }
  };

  const selectOther = (msgIndex: number, qIndex: number) => {
    if (!askUserOtherSelected[msgIndex]) return;
    askUserOtherSelected[msgIndex][qIndex] = true;
    askUserAnswers[msgIndex][qIndex] = '';
  };

  const handleSubmitAskUser = (index: number) => {
    // 防御性初始化：如果答案数组未初始化，从 pendingApprovalData 回退
    if (!askUserAnswers[index]) {
      const msg = props.messages[index];
      if (msg?.pendingApprovalData?.ask_user?.questions) {
        initAskUserAnswers(index, msg.pendingApprovalData.ask_user.questions);
      } else {
        return;
      }
    }
    const answers = askUserAnswers[index];
    if (!answers) return;
    emit('ask-user-submit', [...answers]);
  };

  const handleCancelAskUser = () => {
    emit('ask-user-cancel');
  };

  const messagesRef = ref<HTMLElement>();
  const collapsedThinking = reactive<Record<number, boolean>>({});
  const collapsedThinkingContent = reactive<Record<number, boolean>>({});
  const collapsedCitations = reactive<Record<number, boolean>>({});
  const isAtBottom = ref(true);
  const copiedMessageIndex = ref(-1);

  const handleTableAction = (e: Event) => {
    const target = (e.target as HTMLElement).closest('.table-action-btn') as HTMLElement;
    if (!target) return;

    const action = target.dataset.action;
    const encodedTable = target.dataset.table;
    if (!action || !encodedTable) return;

    const tableHtml = decodeURIComponent(encodedTable);

    switch (action) {
      case 'copy': {
        const markdown = tableHtmlToMarkdown(tableHtml);
        const doCopy = async () => {
          try {
            await navigator.clipboard.writeText(markdown);
          } catch {
            const ta = document.createElement('textarea');
            ta.value = markdown;
            ta.style.position = 'fixed';
            ta.style.opacity = '0';
            document.body.appendChild(ta);
            ta.select();
            document.execCommand('copy');
            document.body.removeChild(ta);
          }
        };
        doCopy().then(() => {
          const btn = target;
          const img = btn.querySelector('img');
          const successIcon = btn.dataset.iconSuccess;
          const originalIcon = btn.dataset.icon;
          if (img && successIcon) {
            img.src = successIcon;
            btn.title = '复制成功';
            const reset = () => {
              img.src = originalIcon!;
              btn.title = '复制Markdown';
              wrapper.removeEventListener('mouseleave', reset);
            };
            const wrapper = btn.closest('.markdown-table-wrapper')!;
            wrapper.addEventListener('mouseleave', reset);
          }
        });
        break;
      }
      case 'csv': {
        const csv = tableHtmlToCsv(tableHtml);
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `table_${Date.now()}.csv`;
        a.click();
        URL.revokeObjectURL(url);
        break;
      }
      case 'preview': {
        // 在右侧面板新建标签页展示表格渲染效果
        emit('open-markdown-tab', { title: '表格预览', content: tableHtmlToMarkdown(tableHtml) });
        break;
      }
    }
  };

  const checkScrollBottom = () => {
    const el = messagesRef.value;
    if (!el) return;
    const threshold = 50;
    isAtBottom.value = el.scrollHeight - el.scrollTop - el.clientHeight < threshold;
  };

  const scrollToBottom = () => {
    const el = messagesRef.value;
    if (el) {
      el.scrollTop = el.scrollHeight - el.clientHeight;
    }
  };

  const forceScrollToBottom = () => {
    const el = messagesRef.value;
    if (el) {
      el.scrollTop = el.scrollHeight - el.clientHeight;
      // 使用 requestAnimationFrame 确保 DOM 渲染完成后再滚动一次
      requestAnimationFrame(() => {
        el.scrollTop = el.scrollHeight - el.clientHeight;
      });
    }
    isAtBottom.value = true;
  };

  onMounted(() => {
    messagesRef.value?.addEventListener('click', handleTableAction);
    messagesRef.value?.addEventListener('scroll', checkScrollBottom);
    timerInterval = setInterval(() => {
      nowTs.value = Date.now();
    }, 1000);
  });

  onBeforeUnmount(() => {
    messagesRef.value?.removeEventListener('click', handleTableAction);
    messagesRef.value?.removeEventListener('scroll', checkScrollBottom);
    if (timerInterval) {
      clearInterval(timerInterval);
      timerInterval = null;
    }
  });

  const toggleThinkingCard = (index: number) => {
    collapsedThinking[index] = !collapsedThinking[index];
  };

  const toggleThinkingContent = (index: number) => {
    collapsedThinkingContent[index] = !collapsedThinkingContent[index];
  };

  const handleAgentGroupClick = (messageIndex: number, group: AgentGroup) => {
    emit('agent-detail-click', {
      messageIndex,
      agent: group.agent,
      agentId: group.agentId,
    });
  };

  const toggleCitations = (index: number) => {
    collapsedCitations[index] = !collapsedCitations[index];
  };

  const handleFootnoteClick = (e: Event, msgIndex: number) => {
    const target = (e.target as HTMLElement).closest('.footnote-ref') as HTMLElement;
    if (!target) return;
    const n = target.dataset.n;
    if (!n) return;
    const el = document.getElementById(`citation-${msgIndex}-${n}`);
    if (el) {
      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
      el.classList.add('citation-highlight');
      setTimeout(() => el.classList.remove('citation-highlight'), 1500);
    }
  };

  const getLatestStepMessage = (group: AgentGroup): string => {
    if (group.steps.length === 0) return '';
    const last = group.steps[group.steps.length - 1];
    if (last.type === 'executing') return last.message || '正在执行...';
    if (last.type === 'tool_call') return last.message || last.tool || '';
    if (last.type === 'tool_result') return last.message || '';
    if (last.type === 'agent_start') return last.message || '';
    if (last.type === 'agent_done') return last.message || '';
    if (last.type === 'updated_todo_list') return '任务列表已更新';
    return '';
  };

  interface AgentGroup {
    agent: string;
    agentId?: string;
    steps: ThinkingStep[];
  }

  const groupStepsByAgent = (steps: ThinkingStep[]): AgentGroup[] => {
    const groupMap = new Map<string, AgentGroup>();
    for (const step of steps) {
      const agentName = step.agent || '系统';
      const groupKey = step.agentId || agentName;
      if (!groupMap.has(groupKey)) {
        groupMap.set(groupKey, { agent: agentName, agentId: step.agentId, steps: [] });
      }
      groupMap.get(groupKey)!.steps.push(step);
    }
    return Array.from(groupMap.values());
  };

  const formatFullTime = (createdAt: string) => {
    return dayjs(createdAt).format('YYYY-MM-DD HH:mm:ss');
  };

  const copyMessageContent = async (content: string, index: number) => {
    if (!content) return;
    try {
      await navigator.clipboard.writeText(content);
      copiedMessageIndex.value = index;
    } catch {
      const textarea = document.createElement('textarea');
      textarea.value = content;
      textarea.style.position = 'fixed';
      textarea.style.opacity = '0';
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
      copiedMessageIndex.value = index;
    }
  };

  // ===== 左侧对话缩略导航 =====
  interface QaPair {
    startIndex: number;
    question: string;
    answer: string;
  }

  const toPlainText = (md: string): string =>
    md
      .replace(/```[\s\S]*?```/g, ' [代码] ')
      .replace(/`[^`]*`/g, ' ')
      .replace(/<[^>]+>/g, '')
      .replace(/!\[[^\]]*\]\([^)]*\)/g, '')
      .replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
      .replace(/^#{1,6}\s*/gm, '')
      .replace(/[*_~>|]/g, '')
      .replace(/\s+/g, ' ')
      .trim();

  const truncateText = (text: string, max = 50): string => (text.length > max ? `${text.slice(0, max)}…` : text);

  // 一轮问答 = 一条用户消息 + 其后的连续 AI 消息
  const qaPairs = computed<QaPair[]>(() => {
    const pairs: QaPair[] = [];
    let current: QaPair | null = null;
    props.messages.forEach((msg, index) => {
      if (msg.type === 'user') {
        if (current) pairs.push(current);
        current = { startIndex: index, question: truncateText(toPlainText(msg.content)), answer: '' };
      } else {
        if (!current) current = { startIndex: index, question: '', answer: '' };
        const part = msg.isLoading && !msg.content ? '正在生成...' : toPlainText(msg.content);
        if (part) current.answer = truncateText(current.answer ? `${current.answer} ${part}` : part);
      }
    });
    if (current) pairs.push(current);
    return pairs;
  });

  const navRef = ref<HTMLElement>();
  const tooltipRef = ref<HTMLElement>();
  const hoveredPair = ref<QaPair | null>(null);
  const tooltipTop = ref(0);
  const tooltipArrowTop = ref(0);
  const activeMessage = ref<Message | null>(null);

  // 鼠标在导航列内的 Y 坐标（导航列内容坐标系，随滚动补偿）；null 表示未悬浮
  const navMouseY = ref<number | null>(null);
  // 各横线中心 Y（导航列内容坐标系），消息变化/列滚动后重建
  const lineCenters = ref<number[]>([]);

  const updateLineCenters = () => {
    const nav = navRef.value;
    if (!nav) {
      lineCenters.value = [];
      return;
    }
    const centers: number[] = [];
    nav.querySelectorAll<HTMLElement>('.nav-line').forEach((line) => centers.push(line.offsetTop + line.offsetHeight / 2));
    lineCenters.value = centers;
  };

  // 宽度随与鼠标的距离连续衰减（高斯），形成平滑的"长-中-短"波形
  const navLineWidth = (pIdx: number): number => {
    const mouseY = navMouseY.value;
    if (mouseY === null) return 10;
    const dist = Math.abs((lineCenters.value[pIdx] ?? 0) - mouseY);
    return 10 + 8 * Math.exp(-(dist * dist) / (2 * 14 * 14));
  };

  const nearestLineIndex = computed(() => {
    const mouseY = navMouseY.value;
    if (mouseY === null) return -1;
    let best = -1;
    let bestDist = Infinity;
    lineCenters.value.forEach((center, i) => {
      const dist = Math.abs(center - mouseY);
      if (dist < bestDist) {
        bestDist = dist;
        best = i;
      }
    });
    return best;
  });

  let lastTooltipIndex = -1;

  const applyTooltip = async (pIdx: number) => {
    const pair = qaPairs.value[pIdx];
    if (!pair) {
      hoveredPair.value = null;
      return;
    }
    hoveredPair.value = pair;
    await nextTick();
    const tooltip = tooltipRef.value;
    const nav = navRef.value;
    const container = nav?.parentElement as HTMLElement | null;
    if (!tooltip || !nav || !container) return;
    const lineCenterY = nav.offsetTop + (lineCenters.value[pIdx] ?? 0) - nav.scrollTop;
    const tooltipH = tooltip.offsetHeight;
    const maxTop = Math.max(8, container.clientHeight - tooltipH - 8);
    tooltipTop.value = Math.max(8, Math.min(maxTop, lineCenterY - tooltipH / 2));
    tooltipArrowTop.value = Math.max(6, Math.min(tooltipH - 16, lineCenterY - tooltipTop.value - 5));
  };

  const onNavMove = (e: MouseEvent) => {
    const nav = navRef.value;
    if (!nav) return;
    // 横线数量变化（新增问答/首次悬浮）时重建坐标
    if (lineCenters.value.length !== qaPairs.value.length) updateLineCenters();
    navMouseY.value = e.clientY - nav.getBoundingClientRect().top + nav.scrollTop;
    const nearest = nearestLineIndex.value;
    if (nearest >= 0 && nearest !== lastTooltipIndex) {
      lastTooltipIndex = nearest;
      applyTooltip(nearest);
    }
  };

  const onNavLeave = () => {
    navMouseY.value = null;
    hoveredPair.value = null;
    lastTooltipIndex = -1;
  };

  const onNavScroll = () => {
    updateLineCenters();
    if (lastTooltipIndex >= 0) applyTooltip(lastTooltipIndex);
  };

  const scrollToPair = (pair: QaPair) => {
    activeMessage.value = props.messages[pair.startIndex];
    const wrappers = messagesRef.value?.querySelectorAll('.message-wrapper');
    const el = wrappers?.[pair.startIndex] as HTMLElement | undefined;
    if (!el) return;
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    el.classList.add('nav-located-highlight');
    setTimeout(() => el.classList.remove('nav-located-highlight'), 1500);
  };

  defineExpose({ messagesRef, isAtBottom, forceScrollToBottom, initAskUserAnswers });
</script>

<style scoped lang="less">
  .chat-messages-container {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;
  }

  .conversation-nav {
    position: relative;
    width: 28px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding: 6px 0;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .nav-line {
      width: 10px;
      height: 3px;
      border-radius: 2px;
      background: rgba(139, 148, 158, 0.4);
      margin: 5px 0;
      flex-shrink: 0;
      cursor: pointer;
      transition:
        width 0.15s ease-out,
        background 0.2s;

      &:first-child {
        margin-top: auto;
      }

      &:last-child {
        margin-bottom: auto;
      }

      &.nav-line-hot {
        background: #0a84ff;
      }

      &.active {
        background: #0a84ff;
      }
    }
  }

  .conversation-tooltip {
    position: absolute;
    left: 36px;
    width: 260px;
    background: linear-gradient(135deg, #0a1628 0%, #0d2137 50%, #0a1e35 100%);
    border: 1px solid #1a4a6f;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    padding: 10px 12px;
    z-index: 20;
    pointer-events: none;

    .tooltip-arrow {
      position: absolute;
      left: -6px;
      width: 10px;
      height: 10px;
      transform: rotate(45deg);
      background: #0d2137;
      border-left: 1px solid #1a4a6f;
      border-bottom: 1px solid #1a4a6f;
    }

    .tooltip-row {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      line-height: 1.5;

      & + .tooltip-row {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid rgba(63, 80, 106, 0.3);
      }

      .tooltip-label {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        line-height: 16px;
        margin-top: 1px;
        text-align: center;
        border-radius: 3px;
        font-size: 11px;

        &-q {
          color: #79c0ff;
          background: rgba(10, 132, 255, 0.15);
        }

        &-a {
          color: #8b949e;
          background: rgba(139, 148, 158, 0.15);
        }
      }

      .tooltip-text {
        color: #c9d1d9;
        word-break: break-word;
      }
    }
  }

  .tooltip-fade-enter-active,
  .tooltip-fade-leave-active {
    transition: opacity 0.15s ease;
  }

  .tooltip-fade-enter-from,
  .tooltip-fade-leave-to {
    opacity: 0;
  }

  .chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    position: relative;

    .welcome-empty {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      justify-content: center;

      .welcome-img {
        max-width: 300px;
        max-height: 300px;
        object-fit: contain;
      }
    }

    .message-wrapper {
      // margin-bottom: 20px;

      &.nav-located-highlight {
        background: rgba(10, 132, 255, 0.08);
        border-radius: 6px;
      }

      .ai-message {
        display: flex;
        flex-wrap: wrap;
        .message-agent {
          display: flex;
          margin-bottom: 8px;
          opacity: 0;
        }

        .message-body {
          padding: 12px 12px 4px 12px;
          border-radius: 6px;
          width: 100%;
          min-width: 0;
          overflow: hidden;

          /* 思考过程卡片 */
          .thinking-card {
            margin-bottom: 12px;
            overflow: hidden;

            .thinking-duration-bar {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 8px 14px;
              border-bottom: 1px solid rgba(63, 80, 106, 0.3);
              cursor: pointer;
              user-select: none;
              transition: background 0.2s;

              &:hover {
                background: rgba(10, 132, 255, 0.12);
              }

              .thinking-duration {
                font-size: 16px;
                color: #8b949e;
              }

              .thinking-arrow {
                color: #8b949e;
                display: flex;
                align-items: center;
                transition: transform 0.2s;

                &.expanded {
                  transform: rotate(180deg);
                }
              }
            }

            .thinking-header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 10px 14px;
              cursor: pointer;
              user-select: none;
              transition: background 0.2s;

              &:hover {
                background: rgba(10, 132, 255, 0.05);
              }

              .thinking-header-left {
                display: flex;
                align-items: center;
                gap: 8px;
              }

              .thinking-arrow {
                display: flex;
                align-items: center;
                transition: transform 0.2s;

                &.expanded {
                  transform: rotate(180deg);
                }
              }

              .thinking-icon {
                width: 16px;
                height: 16px;
                background-image: var(--img-chat-thinking-icon);
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }

              .thinking-title {
                font-size: 13px;
                font-weight: 500;
                color: #8b949e;
              }

              .thinking-count {
                font-size: 12px;
                color: #8b949e;
                background: rgba(10, 132, 255, 0.1);
                padding: 1px 6px;
                border-radius: 10px;
              }
            }

            .thinking-content-body {
              margin: 0 14px 8px;
              padding: 8px 12px;
              max-height: 200px;
              overflow-y: auto;
              font-size: 13px;
              line-height: 1.6;
              color: #8b949e;
              white-space: pre-wrap;
              word-break: break-word;
              background: rgba(10, 13, 23, 0.3);
              border-radius: 6px;
            }

            .thinking-body {
              padding: 8px 14px;

              .agent-group {
                margin-bottom: 8px;
                border: 1px solid transparent;
                border-radius: 6px;
                overflow: hidden;
                transition: border-color 0.2s;
                cursor: pointer;

                &:hover {
                  border-color: rgba(63, 80, 106, 0.25);
                  background: rgba(10, 132, 255, 0.05);
                }

                &:last-child {
                  margin-bottom: 0;
                }

                .agent-group-header {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 8px 12px;
                  user-select: none;

                  .agent-group-header-left {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                  }

                  .agent-group-icon {
                    width: 14px;
                    height: 14px;
                    background-image: var(--img-chat-agent-icon);
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    flex-shrink: 0;
                  }

                  .agent-group-name {
                    font-size: 13px;
                    font-weight: 500;
                    color: #fff;
                  }

                  .agent-group-latest {
                    font-size: 12px;
                    color: #8b949e;
                    margin-left: 8px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    flex: 1;
                    min-width: 0;
                  }

                  .agent-arrow {
                    margin-left: 8px;
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                  }
                }
              }
            }
          }

          .collapse-enter-active,
          .collapse-leave-active {
            transition: all 0.25s ease;
            overflow: hidden;
          }

          .collapse-enter-from,
          .collapse-leave-to {
            opacity: 0;
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            margin-top: 0;
            margin-bottom: 0;
          }

          .collapse-enter-to,
          .collapse-leave-from {
            opacity: 1;
            max-height: 500px;
          }

          .message-text {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.6;
            color: #e0e6ed;
            word-break: break-word;
            overflow-wrap: break-word;

            :deep(.session-ref-icon) {
              width: 14px;
              height: 14px;
              vertical-align: -2px;
            }

            :deep(h1),
            :deep(h2),
            :deep(h3),
            :deep(h4),
            :deep(h5),
            :deep(h6) {
              color: #fff;
            }
            :deep(p) {
              margin: 0;
            }
            :deep(code) {
              background: rgba(10, 132, 255, 0.1);
              padding: 1px 4px;
              border-radius: 3px;
              font-size: 12px;
            }
            :deep(pre) {
              background: rgba(10, 132, 255, 0.1);
              padding: 8px;
              border-radius: 4px;
              overflow-x: auto;
              margin: 6px 0;
              white-space: pre-wrap;
            }
            :deep(pre code) {
              background: transparent;
              padding: 0;
            }
            :deep(ul),
            :deep(ol) {
              padding-left: 18px;
              margin: 4px 0;
            }
            :deep(blockquote) {
              border-left: 3px solid rgba(10, 132, 255, 0.3);
              padding-left: 10px;
              margin: 6px 0;
              color: #8b949e;
            }
            :deep(table) {
              border-collapse: collapse;
              margin: 6px 0;
            }
            :deep(th),
            :deep(td) {
              border: 1px solid rgba(63, 80, 106, 0.5);
              padding: 4px 8px;
            }
            :deep(th) {
              background: rgba(10, 132, 255, 0.1);
            }
            :deep(strong) {
              font-weight: 600;
            }

            :deep(.markdown-table-wrapper) {
              position: relative;
              margin: 6px 0;
              max-width: 100%;
              overflow-x: auto;

              .table-actions {
                position: absolute;
                top: 4px;
                right: 4px;
                display: flex;
                gap: 2px;
                opacity: 0;
                transition: opacity 0.2s;
                z-index: 1;
              }

              &:hover .table-actions {
                opacity: 1;
              }

              .table-action-btn {
                width: 26px;
                height: 26px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                color: #8b949e;
                cursor: pointer;
                background: rgba(22, 27, 34, 0.8);
                backdrop-filter: blur(4px);
                transition: all 0.2s;

                &:hover {
                  color: #e0e6ed;
                  background: rgba(10, 132, 255, 0.3);
                }
              }
            }
          }
        }
        .loading-dots {
          display: flex;
          align-items: center;
          gap: 6px;
          padding: 4px 0;
          min-height: 16px;

          .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(10, 132, 255, 0.4);
            animation: dot-bounce 1.4s ease-in-out infinite both;

            &:nth-child(1) {
              animation-delay: 0s;
            }
            &:nth-child(2) {
              animation-delay: 0.2s;
            }
            &:nth-child(3) {
              animation-delay: 0.4s;
            }
          }
        }

        @keyframes dot-bounce {
          0%,
          80%,
          100% {
            transform: scale(0.6);
            opacity: 0.4;
          }
          40% {
            transform: scale(1);
            opacity: 1;
          }
        }

        .approval-card {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 14px 16px;
          margin-top: 12px;
          background: #002f4a;
          border: 1px solid #005482;
          border-radius: 8px;

          .approval-icon {
            width: 36px;
            height: 36px;
            background-image: var(--img-chat-session-approve-icon);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            flex-shrink: 0;
          }

          .approval-content {
            flex: 1;

            .approval-title {
              font-size: 14px;
              font-weight: 600;
              color: #e0e6ed;
              margin-bottom: 6px;
            }

            .approval-plan {
              margin-bottom: 14px;
              padding: 10px 12px;
              background: rgba(10, 132, 255, 0.08);
              border: 1px solid rgba(10, 132, 255, 0.2);
              border-radius: 6px;

              .approval-plan-label {
                font-size: 12px;
                color: #0a84ff;
                font-weight: 600;
                margin-bottom: 6px;
              }

              .approval-plan-content {
                font-size: 13px;
                color: #c9d1d9;
                line-height: 1.6;
                white-space: pre-wrap;
              }
            }

            .ask-user-question {
              margin-bottom: 14px;

              .ask-user-question-text {
                font-size: 13px;
                color: #c9d1d9;
                margin-bottom: 8px;
                line-height: 1.5;

                .ask-user-required {
                  color: #f85149;
                  margin-left: 2px;
                }
              }

              .ask-user-choices {
                display: flex;
                flex-direction: column;
                gap: 6px;

                .ask-user-choice {
                  display: flex;
                  align-items: center;
                  padding: 8px 12px;
                  background: rgba(255, 255, 255, 0.04);
                  border: 1px solid rgba(63, 80, 106, 0.4);
                  border-radius: 6px;
                  cursor: pointer;
                  font-size: 13px;
                  color: #c9d1d9;
                  transition: all 0.2s;

                  &:hover {
                    background: rgba(10, 132, 255, 0.1);
                    border-color: rgba(10, 132, 255, 0.4);
                  }

                  &.selected {
                    background: rgba(10, 132, 255, 0.15);
                    border-color: #0a84ff;
                    color: #fff;
                  }
                }

                .ask-user-other-input {
                  margin-top: 4px;
                  padding: 8px 12px;
                  font-size: 13px;
                  color: #e0e6ed;
                  background: rgba(255, 255, 255, 0.06);
                  border: 1px solid rgba(63, 80, 106, 0.5);
                  border-radius: 6px;
                  outline: none;
                  width: 100%;

                  &:focus {
                    border-color: #0a84ff;
                    background: rgba(10, 132, 255, 0.08);
                  }

                  &::placeholder {
                    color: #6e7681;
                  }
                }
              }

              .ask-user-text {
                .ask-user-textarea {
                  width: 100%;
                  min-height: 60px;
                  padding: 8px 12px;
                  font-size: 13px;
                  color: #e0e6ed;
                  background: rgba(255, 255, 255, 0.06);
                  border: 1px solid rgba(63, 80, 106, 0.5);
                  border-radius: 6px;
                  outline: none;
                  resize: vertical;
                  font-family: inherit;

                  &:focus {
                    border-color: #0a84ff;
                    background: rgba(10, 132, 255, 0.08);
                  }

                  &::placeholder {
                    color: #6e7681;
                  }
                }
              }
            }

            .ask-user-stepper {
              display: flex;
              align-items: center;
              gap: 6px;
              margin-bottom: 14px;

              .ask-user-step-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: rgba(63, 80, 106, 0.5);
                cursor: pointer;
                transition: all 0.2s;

                &.active {
                  background: #0a84ff;
                  width: 20px;
                  border-radius: 4px;
                }

                &.completed {
                  background: rgba(10, 132, 255, 0.5);
                }
              }

              .ask-user-step-text {
                margin-left: 6px;
                font-size: 12px;
                color: #6e7681;
              }
            }

            .approval-actions {
              display: flex;
              gap: 10px;

              .approval-btn {
                padding: 6px 20px;
                border-radius: 6px;
                font-size: 13px;
                font-weight: 500;
                cursor: pointer;
                border: none;
                transition: all 0.2s;

                &.approve-btn {
                  background: #0a84ff;
                  color: #fff;

                  &:hover:not(:disabled) {
                    background: #3a9bfd;
                  }

                  &:disabled {
                    opacity: 0.4;
                    cursor: not-allowed;
                  }
                }

                &.nav-btn {
                  background: rgba(255, 255, 255, 0.08);
                  color: #c9d1d9;
                  border: 1px solid rgba(63, 80, 106, 0.5);

                  &:hover {
                    background: rgba(255, 255, 255, 0.15);
                  }
                }

                &.reject-btn {
                  background: rgba(255, 255, 255, 0.08);
                  color: #e0e6ed;
                  border: 1px solid rgba(63, 80, 106, 0.5);

                  &:hover {
                    background: rgba(255, 255, 255, 0.15);
                  }
                }
              }
            }
          }
        }

        .citations-card {
          margin-bottom: 12px;
          overflow: hidden;

          .citations-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 14px;
            border-bottom: 1px solid rgba(63, 80, 106, 0.3);
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;

            &:hover {
              background: rgba(10, 132, 255, 0.08);
            }

            &.citations-header-simple {
              cursor: default;

              &:hover {
                background: transparent;
              }
            }

            .citations-header-left {
              display: flex;
              align-items: center;
              gap: 8px;
            }

            .citations-title {
              font-size: 13px;
              font-weight: 500;
              color: #8b949e;
            }

            .citations-count {
              font-size: 12px;
              color: #8b949e;
              background: rgba(10, 132, 255, 0.1);
              padding: 1px 6px;
              border-radius: 10px;
            }

            .thinking-arrow {
              display: flex;
              align-items: center;
              transition: transform 0.2s;

              &.expanded {
                transform: rotate(180deg);
              }
            }
          }

          .citations-body {
            padding: 4px 14px;

            .citation-item {
              padding: 6px 0;
              border-bottom: 1px solid rgba(63, 80, 106, 0.15);

              &:last-child {
                border-bottom: none;
              }

              &.citation-highlight {
                background: rgba(10, 132, 255, 0.08);
                border-radius: 4px;
                padding: 6px 8px;
                margin: 0 -8px;
              }

              .citation-item-row {
                display: flex;
                align-items: center;
                gap: 8px;
                line-height: 1.5;

                .citation-badge {
                  font-size: 12px;
                  color: #79c0ff;
                  font-family: monospace;
                  background: rgba(10, 132, 255, 0.1);
                  padding: 1px 5px;
                  border-radius: 3px;
                  white-space: nowrap;
                  flex-shrink: 0;
                }

                .citation-badge-knowledge_base {
                  color: #3fb950;
                  background: rgba(46, 160, 67, 0.1);
                }

                .citation-badge-web {
                  color: #d29922;
                  background: rgba(210, 153, 34, 0.1);
                }

                .citation-badge-calc {
                  color: #a371f7;
                  background: rgba(163, 113, 247, 0.1);
                }

                .citation-title-text {
                  font-size: 13px;
                  color: #b0b8c4;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  min-width: 0;
                }

                .citation-link {
                  font-size: 12px;
                  color: #0a84ff;
                  text-decoration: none;
                  white-space: nowrap;
                  flex-shrink: 0;
                }
              }

              .citation-item-attrs {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 4px 10px;
                padding-left: 0;
                margin-top: 2px;

                .citation-attr {
                  font-size: 12px;
                  color: #8b949e;
                  white-space: nowrap;
                }

                .citation-low-score {
                  color: #d29922;
                }
              }

              .citation-snippet {
                margin-top: 4px;
                font-size: 12px;
                color: #8b949e;
                line-height: 1.5;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
          }
        }

        .download-file-cards {
          display: flex;
          flex-direction: column;
          gap: 8px;
          margin-top: 12px;

          .download-file-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            background: linear-gradient(135deg, rgba(0, 47, 74, 0.8) 0%, rgba(0, 60, 90, 0.6) 100%);
            border: 1px solid rgba(0, 84, 130, 0.6);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;

            &:hover {
              border-color: rgba(10, 132, 255, 0.4);
              box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
            }

            .file-card-info {
              display: flex;
              align-items: center;
              gap: 12px;
              min-width: 0;
              flex: 1;

              .file-card-icon {
                width: 36px;
                height: 36px;
                background-image: var(--img-chat-download-icon);
                background-repeat: no-repeat;
                background-size: 100% 100%;
                flex-shrink: 0;
                opacity: 0.9;
              }

              .file-card-text {
                display: flex;
                flex-direction: column;
                gap: 2px;
                min-width: 0;

                .file-card-name {
                  font-size: 13px;
                  font-weight: 500;
                  color: #e0e6ed;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }

                .file-card-hint {
                  font-size: 11px;
                  color: #6e7681;
                }
              }
            }

            .file-card-actions {
              display: flex;
              gap: 8px;
              flex-shrink: 0;

              .file-action-btn {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                padding: 6px 14px;
                border-radius: 7px;
                font-size: 12px;
                font-weight: 500;
                cursor: pointer;
                border: none;
                transition: all 0.2s ease;
                white-space: nowrap;

                &.download-btn {
                  background: rgba(255, 255, 255, 0.08);
                  color: #c9d1d9;
                  border: 1px solid rgba(63, 80, 106, 0.5);

                  &:hover {
                    background: rgba(255, 255, 255, 0.14);
                    color: #e0e6ed;
                    border-color: rgba(63, 80, 106, 0.8);
                  }
                }

                &.edit-btn {
                  background: linear-gradient(135deg, #0a84ff 0%, #0066cc 100%);
                  color: #fff;
                  border: 1px solid rgba(10, 132, 255, 0.5);
                  box-shadow: 0 2px 6px rgba(10, 132, 255, 0.2);

                  &:hover {
                    background: linear-gradient(135deg, #3a9bfd 0%, #0a84ff 100%);
                    box-shadow: 0 3px 10px rgba(10, 132, 255, 0.35);
                  }
                }
              }
            }
          }
        }
      }

      .user-message {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-start;

        .message-agent {
          display: flex;
          margin-bottom: 8px;
          margin-left: 5px;
        }

        .message-body {
          background: rgba(10, 132, 255, 0.15);
          padding: 12px;
          border-radius: 6px 0 6px 6px;
          max-width: 700px;
          min-width: 0;
          overflow: hidden;

          .message-text {
            font-size: 14px;
            font-weight: 400;
            line-height: 1.6;
            color: #e0e6ed;
            word-break: break-word;
            overflow-wrap: break-word;

            :deep(.session-ref-icon) {
              width: 14px;
              height: 14px;
              vertical-align: -2px;
            }

            :deep(h1, h2, h3, h4, h5, h6) {
              color: #fff;
            }
            :deep(p) {
              margin: 0;
            }
            :deep(code) {
              background: rgba(0, 0, 0, 0.2);
              padding: 1px 4px;
              border-radius: 3px;
              font-size: 12px;
            }
            :deep(pre) {
              background: rgba(0, 0, 0, 0.2);
              padding: 8px;
              border-radius: 4px;
              overflow-x: auto;
              margin: 6px 0;
              white-space: pre-wrap;
            }
            :deep(pre code) {
              background: transparent;
              padding: 0;
            }
          }

          .attached-file-card {
            margin-top: 10px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 6px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              background: rgba(255, 255, 255, 0.15);
            }

            .file-icon-card {
              width: 32px;
              height: 32px;
              background-image: var(--img-chat-attach-icon);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              flex-shrink: 0;
            }

            .file-info-card {
              flex: 1;
              min-width: 0;

              .file-name-card {
                font-size: 12px;
                font-weight: 400;
                line-height: 1.4;
                color: #e0e6ed;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 2px;
              }

              .file-size-card {
                font-size: 11px;
                font-weight: 400;
                line-height: 1.3;
                color: #8b949e;
              }
            }
          }
        }
      }

      .ai-message,
      .user-message {
        .message-actions {
          display: flex;
          align-items: center;
          gap: 8px;
          width: 100%;
          opacity: 0;
          transition: opacity 0.2s;

          .action-btn {
            width: 26px;
            height: 26px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            color: #8b949e;
            cursor: pointer;
            transition: all 0.2s;

            &:hover {
              color: #e0e6ed;
              background: rgba(10, 132, 255, 0.15);
            }
          }

          .action-time {
            font-size: 12px;
            color: #8b949e;
          }
        }

        &:hover .message-actions {
          opacity: 1;
        }
      }

      .ai-message .message-actions {
        padding: 0 0 0 10px;
      }

      .user-message .message-actions {
        padding: 4px 0 0 0;
        justify-content: flex-end;
      }
    }
  }

  .scroll-to-bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;

    .scroll-to-bottom-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(4px);
      background-image: var(--img-chat-scroll-bottom);
      background-repeat: no-repeat;
      background-size: 20px 20px;
      background-position: center;
      cursor: pointer;
      transition: all 0.2s;

      &:hover {
        background-color: rgba(255, 255, 255, 0.25);
      }
    }
  }
</style>