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

<template>
  <div class="chat-messages-container">
    <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>
              <div v-show="!collapsedThinking[index]">
                <div class="thinking-header">
                  <div class="thinking-header-left">
                    <div class="thinking-icon"></div>
                    <span class="thinking-title">思考过程 持续了几秒</span>
                  </div>
                </div>

                <!-- thinking_token 思考内容 -->
                <div v-if="message.thinkingContent" class="thinking-content-card">
                  <div class="thinking-content-header" @click="toggleThinkingContent(index)">
                    <span class="thinking-content-title">模型思考</span>
                    <div :class="['thinking-arrow', { expanded: !collapsedThinkingContent[index] }]">
                      <img :src="getCssUrl('--img-chat-arrow-icon')" width="10" height="10" />
                    </div>
                  </div>
                  <div v-show="!collapsedThinkingContent[index]" class="thinking-content-body">
                    {{ message.thinkingContent }}
                  </div>
                </div>

                <div class="thinking-body">
                  <div
                    v-for="(group, groupIdx) in groupStepsByAgent(message.thinkingSteps)"
                    :key="groupIdx"
                    :class="['agent-group', { expanded: expandedAgents[index + '-' + group.agent] }]"
                  >
                    <div class="agent-group-header" @click="toggleAgent(index + '-' + group.agent)">
                      <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', { expanded: expandedAgents[index + '-' + group.agent] }]">
                        <img :src="getCssUrl('--img-chat-arrow-icon')" width="10" height="10" />
                      </div>
                    </div>
                    <div v-show="expandedAgents[index + '-' + group.agent]" class="agent-group-body">
                      <div v-for="(step, stepIdx) in group.steps" :key="stepIdx" class="thinking-step">
                        <!-- agent_start -->
                        <div v-if="step.type === 'agent_start'" class="step-item step-agent-start">
                          <div class="step-content">
                            <span class="step-desc">{{ step.message }}</span>
                          </div>
                        </div>
                        <!-- tool_call -->
                        <div v-else-if="step.type === 'tool_call'" class="step-item step-tool-call">
                          <div class="step-content">
                            <span class="step-label">调用工具：</span>
                            <span class="step-tool-name">{{ step.tool }}</span>
                            <span v-if="step.message" class="step-desc">{{ step.message }}</span>
                          </div>
                        </div>
                        <!-- executing -->
                        <div v-else-if="step.type === 'executing'" class="step-item step-executing">
                          <div class="step-content">
                            <span class="step-desc">{{ step.message || '正在执行...' }}</span>
                            <span v-if="step.tool" class="step-tool-name">{{ step.tool }}</span>
                          </div>
                        </div>
                        <!-- tool_result -->
                        <div v-else-if="step.type === 'tool_result'" class="step-item step-tool-result">
                          <div class="step-content">
                            <span class="step-label">工具结果：</span>
                            <span class="step-tool-name">{{ step.tool }}</span>
                            <span class="step-desc">{{ step.message }}</span>
                          </div>
                        </div>
                        <!-- agent_done -->
                        <div v-else-if="step.type === 'agent_done'" class="step-item step-agent-done">
                          <div class="step-content">
                            <span class="step-desc">{{ step.message }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div v-if="message.content" class="message-text" v-html="renderMarkdown(message.content, tableIcons)"></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">
                <div class="file-card-info">
                  <div class="file-card-icon"></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="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="handleEditFile(file.url, file.filename)">
                    <img :src="getCssUrl('--img-chat-edit-icon')" width="14" height="14" />
                    <span>编辑</span>
                  </button>
                </div>
              </div>
            </div>
            <div v-if="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"></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 v-if="showPreviewModal" class="table-preview-overlay" @click.self="closePreview">
      <div class="table-preview-modal">
        <div class="table-preview-header">
          <span class="table-preview-title">表格预览</span>
          <div class="table-preview-close" @click="closePreview">
            <img :src="getCssUrl('--img-chat-close-icon-btn')" width="16" height="16" />
          </div>
        </div>
        <div class="table-preview-body" v-html="previewTableHtml"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, computed, watch, onMounted, onBeforeUnmount } from 'vue';
  import dayjs from 'dayjs';
  import { renderMarkdown, formatFileSize, tableHtmlToMarkdown, tableHtmlToCsv, isMdFile, isTextFile } 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';

  const getCssUrl = (varName: string) => {
    const val = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
    return val.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
  };

  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[];
  }>();

  // 自动初始化 ask_user 答案状态
  watch(
    () => props.messages,
    (msgs) => {
      msgs.forEach((msg, idx) => {
        if (msg.isPendingApproval && msg.pendingApprovalData?.ask_user?.questions) {
          initAskUserAnswers(idx, msg.pendingApprovalData.ask_user.questions);
        }
      });
    },
    { immediate: true, deep: true }
  );

  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;
  }>();

  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-${Date.now()}`,
        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('获取文件内容失败');
    }
  };

  // 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[] }[]) => {
    if (askUserAnswers[index]) return;
    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) => {
    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 expandedAgents = reactive<Record<string, boolean>>({});
  const isAtBottom = ref(true);
  const copiedMessageIndex = ref(-1);

  // 表格预览状态
  const previewTableHtml = ref('');
  const showPreviewModal = ref(false);

  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': {
        previewTableHtml.value = tableHtml;
        showPreviewModal.value = true;
        break;
      }
    }
  };

  const closePreview = () => {
    showPreviewModal.value = false;
    previewTableHtml.value = '';
  };

  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;
    }
  };

  const forceScrollToBottom = () => {
    const el = messagesRef.value;
    if (el) {
      el.scrollTop = el.scrollHeight;
    }
    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 toggleAgent = (key: string) => {
    expandedAgents[key] = !expandedAgents[key];
  };

  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;
    steps: ThinkingStep[];
  }

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

  const getAgentCount = (steps: ThinkingStep[]): number => {
    const agents = new Set(steps.map((s) => s.agent || '系统'));
    return agents.size;
  };

  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;
    }
  };

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

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

  .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;

      .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.08);
              }

              .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;
              padding: 10px 14px;

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

              .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-card {
              margin: 4px 14px 8px;
              border: 1px solid rgba(63, 80, 106, 0.25);
              border-radius: 6px;
              overflow: hidden;

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

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

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

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

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

              .thinking-content-body {
                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;
              }
            }

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

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

                &.expanded {
                  border-color: rgba(63, 80, 106, 0.25);
                }

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

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

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

                  .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;
                    transition: transform 0.2s;

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

                .agent-group-body {
                  padding: 4px 12px;
                  max-height: 300px;
                  overflow-y: auto;
                }
              }

              .thinking-step {
                .step-item {
                  display: flex;
                  align-items: flex-start;
                  padding: 6px 0;
                  border-bottom: 1px solid rgba(63, 80, 106, 0.15);

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

                  .step-content {
                    flex: 1;
                    font-size: 13px;
                    line-height: 1.5;
                    color: #b0b8c4;

                    .step-agent-name {
                      color: #0a84ff;
                      font-weight: 500;
                    }

                    .step-tool-name {
                      color: #79c0ff;
                      font-family: monospace;
                      font-size: 12px;
                      background: rgba(10, 132, 255, 0.1);
                      padding: 1px 5px;
                      border-radius: 3px;
                    }

                    .step-label {
                      color: #8b949e;
                    }

                    .step-desc {
                      color: #b0b8c4;
                    }
                  }
                }
              }
            }
          }

          .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;

          .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);
                  }
                }
              }
            }
          }
        }

        .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;
            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;
      }
    }
  }

  /* 表格预览弹窗 */
  .table-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .table-preview-modal {
    background: #1a1f2e;
    border: 1px solid rgba(63, 80, 106, 0.5);
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .table-preview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(63, 80, 106, 0.3);
      flex-shrink: 0;

      .table-preview-title {
        font-size: 15px;
        font-weight: 500;
        color: #e0e6ed;
      }

      .table-preview-close {
        width: 32px;
        height: 32px;
        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);
        }
      }
    }

    :deep(.table-preview-body) {
      padding: 20px;
      overflow: auto;
      flex: 1;

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid #3f506a;
        padding: 10px 14px;
        text-align: left;
        color: #e0e6ed;
        font-size: 14px;
      }

      th {
        background: #1e2538;
        font-weight: 600;
      }

      tbody tr {
        &:nth-child(even) td {
          background: rgba(10, 132, 255, 0.04);
        }

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

  .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>