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

<template>
  <div class="chat-messages-container">
    <!-- 左侧对话缩略导航（悬浮提示与滚动跟随内聚在组件内部） -->
    <ConversationNav
      ref="conversationNavRef"
      :messages="messages"
      :is-at-bottom="isAtBottom"
      :get-container="() => messagesRef"
      :scroll-to-message="scrollToMessage"
    />

    <div class="chat-messages" ref="messagesRef">
      <!-- 历史加载中：切换任务后新任务的 messages 要等接口返回才填充，
           这里必须先占位，否则会先闪一屏「新对话缺省图」再突然出现内容 -->
      <div v-if="messages.length === 0 && historyLoading" class="history-loading">
        <a-spin size="large" />
      </div>
      <!-- 新对话缺省图 -->
      <div v-else-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="getMessageKey(message)"
        :class="['message-wrapper', message.type, { 'answer-hidden': isHiddenAnswer(index) }]"
        @mouseleave="copiedMessageKey = ''"
      >
        <!-- AI消息 -->
        <div v-if="message.type === 'ai'" class="ai-message">
          <div class="message-body">
            <ThinkingCard
              v-if="message.thinkingSteps && message.thinkingSteps.length > 0"
              :message="message"
              :collapsed="!!collapsedThinking[getMessageKey(message)]"
              :content-collapsed="!!collapsedThinkingContent[getMessageKey(message)]"
              @update:collapsed="collapsedThinking[getMessageKey(message)] = $event"
              @update:content-collapsed="collapsedThinkingContent[getMessageKey(message)] = $event"
              @agent-click="handleAgentGroupClick(index, $event)"
            />

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

            <!-- 数据来源卡片 -->
            <CitationsCard
              v-if="message.citations"
              :message="message"
              :index="index"
              :collapsed="collapsedCitations[getMessageKey(message)] ?? true"
              @update:collapsed="collapsedCitations[getMessageKey(message)] = $event"
            />

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

            <!-- 文件操作卡片 -->
            <DownloadFiles
              v-if="message.downloadFiles?.length"
              :files="message.downloadFiles"
              @file-preview="emit('file-preview', $event)"
              @open-file-preview="emit('open-file-preview', $event)"
            />

            <div v-show="message.isLoading" class="loading-dots">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </div>

            <!-- ask_user 交互提问 UI（分步向导）：ask_user 存在但 questions 缺失时不渲染，避免模板访问异常 -->
            <AskUserCard
              v-if="message.isPendingApproval && message.pendingApprovalData?.ask_user?.questions?.length"
              :ref="(el) => setAskCardRef(message, el)"
              :data="message.pendingApprovalData"
              @submit="emit('ask-user-submit', $event)"
              @cancel="emit('ask-user-cancel')"
            />
          </div>
          <!-- AI消息操作栏 -->
          <MessageActions
            :message="message"
            :copied="copiedMessageKey === getMessageKey(message)"
            :can-regenerate="canRegenerate(index, message)"
            :show-answer-switcher="showAnswerSwitcher(index)"
            :can-prev="canPrevAnswer(index)"
            :can-next="canNextAnswer(index)"
            :answer-position="answerPositionText(index)"
            @copy="copyMessageContent(message.content, getMessageKey(message))"
            @delete="emit('delete-message', message)"
            @regenerate="emit('regenerate')"
            @prev-answer="prevAnswer(index)"
            @next-answer="nextAnswer(index)"
          />
        </div>

        <!-- 用户消息 -->
        <div v-else class="user-message">
          <div class="message-body">
            <template v-if="editingKey === getMessageKey(message)">
              <textarea
                v-model="editDraft"
                class="message-edit-textarea"
                spellcheck="false"
                @keydown.enter.exact.prevent="submitEdit(index)"
                @keydown.escape.prevent="cancelEdit"
              ></textarea>
              <div class="message-edit-actions">
                <button class="message-edit-btn confirm" @click="submitEdit(index)">重发</button>
                <button class="message-edit-btn cancel" @click="cancelEdit">取消</button>
              </div>
            </template>
            <template v-else>
              <div class="message-text" v-html="renderMarkdownCached(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>
            </template>
          </div>
          <!-- 用户消息操作栏 -->
          <MessageActions
            :message="message"
            :copied="copiedMessageKey === getMessageKey(message)"
            :can-edit="canEdit(index, message)"
            @copy="copyMessageContent(message.content, getMessageKey(message))"
            @delete="emit('delete-message', message)"
            @edit="startEdit(index)"
          />
        </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, onMounted, onBeforeUnmount } from 'vue';
  import ConversationNav from './ConversationNav.vue';
  import CitationsCard from './CitationsCard.vue';
  import AskUserCard from './AskUserCard.vue';
  import DownloadFiles from './DownloadFiles.vue';
  import MessageActions from './MessageActions.vue';
  import ThinkingCard from './ThinkingCard.vue';
  import {
    renderMarkdownCached,
    formatFileSize,
    tableHtmlToMarkdown,
    tableHtmlToCsv,
    getFileIconVar,
    getCssUrl,
    getMessageKey,
    getTableIcons,
    copyToClipboard,
    flashCopySuccess,
    getUserInputText,
  } from '/@/views/ventAI/manageAssistent/lib/index';
  import type { AgentGroup } from '/@/views/ventAI/manageAssistent/lib/index';
  import type { AgentDetailData, AskUserQuestion, Message, AttachedFile } from '/@/views/ventAI/manageAssistent/types/index';
  export type { AgentDetailData };

  const tableIcons = getTableIcons();

  const props = defineProps<{
    messages: Message[];
    /** 当前任务的历史是否正在拉取：为真且暂无消息时显示加载态，而不是空会话缺省图 */
    historyLoading?: boolean;
  }>();

  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;
    (e: 'delete-message', message: Message): void;
    (e: 'regenerate'): void;
    (e: 'edit-resend', index: number, newContent: string): void;
  }>();

  // 用户消息内联编辑状态
  const editingKey = ref('');
  const editDraft = ref('');

  // ===== 多回答折叠：重新生成产生的连续多条 AI 消息在视觉上合并为一条，可通过 prev/next 切换查看 =====
  interface AnswerGroup {
    indices: number[];
  }

  // 将连续的 AI 消息划分为若干“回答组”
  const answerGroups = computed<AnswerGroup[]>(() => {
    const groups: AnswerGroup[] = [];
    let current: AnswerGroup | null = null;
    props.messages.forEach((msg, index) => {
      if (msg.type === 'ai') {
        if (!current) {
          current = { indices: [] };
          groups.push(current);
        }
        current.indices.push(index);
      } else {
        current = null;
      }
    });
    return groups;
  });

  // 每条 AI 消息 → 所属组 key（组首条 index）、组内偏移、组大小
  const aiGroupMeta = computed(() => {
    const meta = new Map<number, { groupKey: string; offset: number; groupLen: number }>();
    for (const group of answerGroups.value) {
      const groupKey = getMessageKey(props.messages[group.indices[0]]);
      const groupLen = group.indices.length;
      group.indices.forEach((idx, offset) => {
        meta.set(idx, { groupKey, offset, groupLen });
      });
    }
    return meta;
  });

  // 每个回答组当前选中的回答偏移（默认组内最后一条，即最新生成）
  const activeAnswerOffset = reactive<Record<string, number>>({});

  const currentAnswerOffset = (groupKey: string, groupLen: number): number => {
    const val = activeAnswerOffset[groupKey];
    if (val == null) return groupLen - 1;
    return Math.min(Math.max(val, 0), groupLen - 1);
  };

  // 末尾回答组内是否存在正在生成（isLoading）的消息
  const lastAnswerGroupHasLoading = computed(() => {
    const msgs = props.messages;
    if (!msgs.length || msgs[msgs.length - 1].type !== 'ai') return false;
    let start = msgs.length - 1;
    while (start - 1 >= 0 && msgs[start - 1].type === 'ai') start--;
    for (let i = start; i < msgs.length; i++) {
      if (msgs[i].isLoading) return true;
    }
    return false;
  });

  // 新回答开始生成（false → true）时，自动切换到最新一条正在生成的消息
  watch(lastAnswerGroupHasLoading, (loading, wasLoading) => {
    if (loading && !wasLoading) {
      const msgs = props.messages;
      let start = msgs.length - 1;
      while (start - 1 >= 0 && msgs[start - 1].type === 'ai') start--;
      delete activeAnswerOffset[getMessageKey(msgs[start])];
    }
  });

  // 该 AI 消息是否应被折叠隐藏（属于多回答组且非当前选中项）
  const isHiddenAnswer = (index: number): boolean => {
    const meta = aiGroupMeta.value.get(index);
    if (!meta || meta.groupLen <= 1) return false;
    return currentAnswerOffset(meta.groupKey, meta.groupLen) !== meta.offset;
  };

  // 该消息是否为当前选中显示的回答（供父组件标记折叠回答中的条目，如胶囊面板的智能体记录）
  const isAnswerVisible = (index: number): boolean => !isHiddenAnswer(index);

  // 该 AI 消息是否显示回答切换器（多回答组且为当前选中项）
  const showAnswerSwitcher = (index: number): boolean => {
    const meta = aiGroupMeta.value.get(index);
    if (!meta || meta.groupLen <= 1) return false;
    return currentAnswerOffset(meta.groupKey, meta.groupLen) === meta.offset;
  };

  const answerPositionText = (index: number): string => {
    const meta = aiGroupMeta.value.get(index);
    if (!meta) return '';
    return `${currentAnswerOffset(meta.groupKey, meta.groupLen) + 1}/${meta.groupLen}`;
  };

  const canPrevAnswer = (index: number): boolean => {
    const meta = aiGroupMeta.value.get(index);
    if (!meta) return false;
    return currentAnswerOffset(meta.groupKey, meta.groupLen) > 0;
  };

  const canNextAnswer = (index: number): boolean => {
    const meta = aiGroupMeta.value.get(index);
    if (!meta) return false;
    return currentAnswerOffset(meta.groupKey, meta.groupLen) < meta.groupLen - 1;
  };

  const prevAnswer = (index: number) => {
    const meta = aiGroupMeta.value.get(index);
    if (!meta) return;
    const cur = currentAnswerOffset(meta.groupKey, meta.groupLen);
    if (cur > 0) activeAnswerOffset[meta.groupKey] = cur - 1;
  };

  const nextAnswer = (index: number) => {
    const meta = aiGroupMeta.value.get(index);
    if (!meta) return;
    const cur = currentAnswerOffset(meta.groupKey, meta.groupLen);
    if (cur < meta.groupLen - 1) activeAnswerOffset[meta.groupKey] = cur + 1;
  };

  // 该消息是否属于“末尾连续 AI 组”：重新生成按钮只对最新一轮回答（含折叠组内任意一条）显示
  const isInLastAnswerGroup = (index: number): boolean => {
    const msgs = props.messages;
    if (!msgs.length || msgs[msgs.length - 1].type !== 'ai') return false;
    if (msgs[index]?.type !== 'ai') return false;
    let start = msgs.length - 1;
    while (start - 1 >= 0 && msgs[start - 1].type === 'ai') start--;
    return index >= start;
  };

  const canRegenerate = (index: number, message: Message): boolean => isInLastAnswerGroup(index) && !message.isLoading && !message.isPendingApproval;

  // 最后一条用户消息的索引（编辑重发只作用于最后一条用户消息，而非整段对话的最后一条）
  const lastUserMessageIndex = computed(() => {
    for (let i = props.messages.length - 1; i >= 0; i--) {
      if (props.messages[i].type === 'user') return i;
    }
    return -1;
  });

  const canEdit = (index: number, message: Message): boolean =>
    message.type === 'user' && index === lastUserMessageIndex.value && editingKey.value !== getMessageKey(message);

  const startEdit = (index: number) => {
    const msg = props.messages[index];
    editingKey.value = getMessageKey(msg);
    editDraft.value = getUserInputText(msg);
  };

  const cancelEdit = () => {
    editingKey.value = '';
    editDraft.value = '';
  };

  const submitEdit = (index: number) => {
    const content = editDraft.value;
    editingKey.value = '';
    editDraft.value = '';
    emit('edit-resend', index, content);
  };

  // 点击文件卡片：按类型拉取内容并在右侧辅助面板打开预览标签
  // ask_user 答案状态（按消息对象索引）
  // 审批卡实例按消息对象索引：SSE 侧直接以消息对象路由到对应卡片（卡片自身也会在 data 变化时重建答案）
  const askCardRefs = new Map<Message, InstanceType<typeof AskUserCard>>();
  const setAskCardRef = (msg: Message, el: unknown) => {
    if (el) askCardRefs.set(msg, el as InstanceType<typeof AskUserCard>);
    else askCardRefs.delete(msg);
  };

  const initAskUserAnswers = (msg: Message, questions: AskUserQuestion[]) => {
    askCardRefs.get(msg)?.init(questions);
  };

  const messagesRef = ref<HTMLElement>();
  const conversationNavRef = ref<InstanceType<typeof ConversationNav>>();
  const collapsedThinking = reactive<Record<string, boolean>>({});
  const collapsedThinkingContent = reactive<Record<string, boolean>>({});
  const collapsedCitations = reactive<Record<string, boolean>>({});
  const isAtBottom = ref(true);
  const copiedMessageKey = ref('');

  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': {
        copyToClipboard(tableHtmlToMarkdown(tableHtml)).then(() => flashCopySuccess(target));
        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', handleMessagesScroll);
  });

  onBeforeUnmount(() => {
    messagesRef.value?.removeEventListener('click', handleTableAction);
    messagesRef.value?.removeEventListener('scroll', handleMessagesScroll);
  });

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

  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) {
      scrollMessagesTo(el, 'center');
      el.classList.add('citation-highlight');
      setTimeout(() => el.classList.remove('citation-highlight'), 1500);
    }
  };

  const copyMessageContent = async (content: string, messageKey: string) => {
    if (!content) return;
    await copyToClipboard(content);
    copiedMessageKey.value = messageKey;
  };

  // 仅滚动消息列表容器：scrollIntoView 会联动滚动 #adaptive-container 等祖先，导致整页上移、底部露出空白
  const scrollMessagesTo = (el: HTMLElement, block: 'start' | 'center' = 'start') => {
    const container = messagesRef.value;
    if (!container) return;
    // 容器处于自适应缩放环境：getBoundingClientRect 是缩放后的视口坐标，scrollTop 是未缩放的布局坐标，
    // 直接混算在缩放比非 1（打包部署后的其他分辨率）时定位偏差，需除以纵向缩放比换算回布局坐标
    //（与左侧对话缩略导航 tooltip 的换算方式一致）
    const rect = container.getBoundingClientRect();
    const scale = container.offsetHeight ? rect.height / container.offsetHeight : 1;
    const safeScale = scale > 0 && Number.isFinite(scale) ? scale : 1;
    const top = (el.getBoundingClientRect().top - rect.top) / safeScale + container.scrollTop;
    const offset = block === 'center' ? (container.clientHeight - el.offsetHeight) / 2 : 0;
    container.scrollTo({ top: Math.max(0, top - offset), behavior: 'smooth' });
  };

  const scrollToMessage = (index: number, block: 'start' | 'center' = 'start') => {
    const wrappers = messagesRef.value?.querySelectorAll('.message-wrapper');
    let el = wrappers?.[index] as HTMLElement | undefined;
    // 多回答折叠组中被隐藏的消息没有几何信息，回退到其前面最近一条可见消息（通常是该轮的用户提问）
    if (el && el.offsetParent === null) {
      el = undefined;
      for (let i = index - 1; i >= 0; i--) {
        const w = wrappers?.[i] as HTMLElement | undefined;
        if (w && w.offsetParent !== null) {
          el = w;
          break;
        }
      }
    }
    if (el) scrollMessagesTo(el, block);
  };

  const handleMessagesScroll = () => {
    checkScrollBottom();
    conversationNavRef.value?.onContainerScroll();
  };

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

<style scoped lang="less">
  .chat-messages-container {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: row;
    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;
      }
    }

    /* 历史加载中的占位：与缺省图同样居中，避免两态之间出现位置跳动。
       antd 3.x 的点阵是固定像素（large 为 32px 框 + 14px 点），不随 font-size 缩放，
       因此整体放大用 transform，既不动 antd 内部类名，比例也不会走样。 */
    .history-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(2.5);
      display: flex;
      align-items: center;
      justify-content: center;
    }

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

      &.answer-hidden {
        display: none;
      }

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

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

        .citations-card {
          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;
          }

          .answer-switcher {
            display: flex;
            align-items: center;
            gap: 2px;
            padding: 0 4px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.04);

            .answer-nav-btn {
              width: 22px;
              height: 22px;

              &.is-disabled {
                opacity: 0.35;
                cursor: not-allowed;

                &:hover {
                  background: transparent;
                  color: #8b949e;
                }
              }
            }

            .answer-switcher-text {
              font-size: 12px;
              color: #8b949e;
              min-width: 32px;
              text-align: center;
              user-select: none;
            }
          }
        }

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

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

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

  .message-edit-textarea {
    width: 100%;
    min-width: 500px;
    min-height: 80px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #e0e6ed;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(10, 132, 255, 0.5);
    border-radius: 6px;
    outline: none;
    resize: vertical;
    font-family: inherit;

    &:focus {
      border-color: #0a84ff;
      background: rgba(0, 0, 0, 0.3);
    }
  }

  .message-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    justify-content: flex-end;

    .message-edit-btn {
      padding: 3px 14px;
      font-size: 12px;
      border-radius: 4px;
      cursor: pointer;
      border: 1px solid transparent;
      transition: all 0.2s;

      &.confirm {
        color: #fff;
        background: linear-gradient(135deg, #0a84ff 0%, #06c 100%);
        border-color: rgba(10, 132, 255, 0.5);

        &:hover {
          background: linear-gradient(135deg, #3a9bfd 0%, #0a84ff 100%);
        }
      }

      &.cancel {
        color: #8b949e;
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(63, 80, 106, 0.4);

        &:hover {
          color: #c9d1d9;
          background: rgba(255, 255, 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>