ai-manus/chat-client/src/views/chatweb/components/ChatBox.vue

<template>
  <div class="chat-container">
    <!-- 会话记录侧边栏 -->
    <div class="chat-sidebar" :class="{ 'sidebar-collapsed': isSidebarCollapsed }">
      <div class="sidebar-header">
        <h3 v-show="!isSidebarCollapsed">{{ t('vabI18n.chat.history') }}</h3>
        <el-button 
          type="primary" 
          class="new-chat-btn"
          @click="() => createNewChat()"
          v-show="!isSidebarCollapsed"
        >
          <svg viewBox="0 0 24 24" class="new-chat-icon">
            <path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
          </svg>
          {{ t('vabI18n.chat.newChat') }}
        </el-button>
      </div>
      <div class="chat-history" v-show="!isSidebarCollapsed">
        <div 
          v-for="(chat, index) in chatHistory" 
          :key="index"
          class="chat-history-item"
          :class="{ 'active': currentChatIndex === index }"
          @click="switchChat(index)"
        >
          <span class="chat-title">{{ chat.title || t('vabI18n.chat.chat') + ` ${index + 1}` }}</span>
          <span class="chat-time">{{ formatTime(chat.timestamp) }}</span>
        </div>
      </div>

      <div class="sidebar-toggle" @click="toggleSidebar">
        <svg viewBox="0 0 24 24" class="toggle-icon" :class="{ 'collapsed': isSidebarCollapsed }">
          <path fill="currentColor" d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
        </svg>
      </div>
    </div>

    <!-- 主聊天区域 -->
    <div class="chat-main" :class="{ 'main-expanded': isSidebarCollapsed }">
      <!-- 聊天消息区域 -->
      <div class="chat-messages" ref="messagesContainer">
        <div v-for="(msg, index) in messages" 
             :key="index" 
             class="message-item"
             :class="{ 'user-message': msg.isUser, 'assistant-message': !msg.isUser }"
             @mouseenter="handleMessageHover(index, true)"
             @mouseleave="handleMessageHover(index, false)">
          <!-- 头像 -->
          <div class="avatar" :class="{ 'user-avatar': msg.isUser, 'assistant-avatar': !msg.isUser }">
            <svg v-if="msg.isUser" viewBox="0 0 24 24" class="avatar-icon">
              <path fill="currentColor" d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
            <img v-else :src="getAssistantAvatar()" :alt="$t('vabI18n.chat.assistant')" class="avatar-icon" />
          </div>
          
          <!-- 消息内容 -->
          <div class="message-content-wrapper" :class="{ 'has-charts': !msg.isUser && msg.echarts && msg.echarts.length > 0 }">
            <div class="message-content">
            <div class="message-header">
              <span class="message-sender">{{ msg.isUser ? t('vabI18n.chat.you') : t('vabI18n.chat.assistant') }}</span>
            </div>
            <div class="message-body">
              <!-- 编辑状态 -->
              <template v-if="editingMessageIndex === index">
                <div class="edit-container">
                  <div class="edit-input-wrapper">
                    <el-input
                      v-model="editingMessageText"
                      type="textarea"
                      :autosize="{ minRows: 3, maxRows: 8 }"
                      class="edit-textarea"
                      :placeholder="$t('vabI18n.chat.placeholder')"
                      @keydown.enter.ctrl="handleSaveEdit"
                      @keydown.escape="handleCancelEdit"
                    />
                    <div class="edit-actions">
                      <button 
                        @click="handleCancelEdit"
                        class="edit-btn cancel-btn"
                      >
                        {{ t('vabI18n.chat.cancel') }}
                      </button>
                      <button 
                        @click="handleSaveEdit"
                        :disabled="!editingMessageText.trim()"
                        class="edit-btn save-btn"
                      >
                        {{ t('vabI18n.chat.send') }}
                      </button>
                    </div>
                  </div>
                </div>
              </template>

              <!-- 正常显示状态 -->
              <template v-else>
                <template v-if="!msg.isUser">
                  <div v-if="parseThink(msg.text).think" class="think-section">
                    <div class="think-header">
                      <svg viewBox="0 0 24 24" class="think-icon">
                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
                      </svg>
                      {{ t('vabI18n.chat.think') }}
                    </div>
                    {{ parseThink(msg.text).think }}
                  </div>
                  <div v-if="msg.formattedText" class="answer-content">
                    <div v-html="msg.formattedText"></div>
                    <!-- 渲染 ECharts 图表 -->
                    <div v-if="msg.echarts && msg.echarts.length > 0" class="echarts-container">
                      <div 
                        v-for="chart in msg.echarts" 
                        :key="chart.id"
                        class="chart-wrapper"
                      >
                        <VabChart
                          :option="chart.option"
                          :init-options="{ renderer: 'svg' }"
                          theme="vab-echarts-theme"
                          class="message-chart"
                        />
                      </div>
                    </div>
                  </div>
                  <div v-else class="loading-content">
                    <span class="loading-dots">
                      <span class="dot"></span>
                      <span class="dot"></span>
                      <span class="dot"></span>
                    </span>
                  </div>
                  
                  <!-- 文件来源信息 -->
                  <div v-if="msg.sources && ((msg.sources.tracePdf && msg.sources.tracePdf.length > 0) || (msg.sources.traceExcel && msg.sources.traceExcel.trim())) && props.chatType === '1'" class="sources-section">
                    <div class="sources-header">
                      <svg viewBox="0 0 24 24" class="sources-icon">
                        <path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
                      </svg>
                      {{ t('vabI18n.chat.sources') }}
                    </div>
                    <div class="sources-list">
                      <!-- PDF文件来源 -->
                      <div 
                        v-for="source in msg.sources.tracePdf" 
                        :key="source.fileName"
                        class="source-item"
                        @click="handleSourceClick(source, msg.conversationId, msg.messageId)"
                      >
                        <img 
                          :src="getFileTypeIcon(getFileExtension(source.fileName))" 
                          :alt="getFileExtension(source.fileName)"
                          class="source-icon"
                        />
                        <el-tooltip 
                          :content="source.fileName" 
                          placement="top" 
                          :disabled="source.fileName.length <= 25"
                        >
                          <span class="source-name">{{ source.fileName }}</span>
                        </el-tooltip>
                      </div>
                      <!-- Excel文件来源 -->
                      <div 
                        v-if="msg.sources.traceExcel && msg.sources.traceExcel.trim()"
                        class="source-item excel-item"
                        @click="handleExcelClick(msg.sources.traceExcel)"
                      >
                        <img 
                          :src="getFileTypeIcon('excel')" 
                          alt="excel"
                          class="source-icon"
                        />
                        <el-tooltip 
                          :content="generateExcelFileName()" 
                          placement="top"
                        >
                          <span class="source-name">{{ generateExcelFileName() }}</span>
                        </el-tooltip>
                      </div>
                    </div>
                  </div>
                  
                  <!-- 推荐问题按钮 -->
                  <div v-if="msg.isOpenRemark && props.recommendQuestions && props.recommendQuestions.length > 0" class="recommend-questions-section">
                    <div class="recommend-questions-header">
                      <!-- <svg viewBox="0 0 24 24" class="recommend-icon">
                        <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                      </svg> -->
                      <!-- 推荐问题 -->
                    </div>
                    <div class="recommend-questions-list">
                      <el-tooltip 
                        v-for="(question, qIndex) in props.recommendQuestions" 
                        :key="qIndex"
                        :content="question" 
                        placement="top" 
                        :disabled="question.length <= 30"
                      >
                        <button 
                          class="recommend-question-btn"
                          @click="handleRecommendQuestionClick(question)"
                          :disabled="isLoading"
                        >
                          <svg viewBox="0 0 24 24" class="question-icon">
                            <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
                          </svg>
                          <span class="question-text">{{ question }}</span>
                        </button>
                      </el-tooltip>
                    </div>
                  </div>
                </template>
                <template v-else>
                  {{ msg.text }}
                </template>
              </template>
            </div>
            <span v-if="msg.isLoading" class="typing-indicator">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </span>

            <!-- 消息操作按钮 -->
            <div 
              v-show="hoveredMessageIndex === index && !msg.isLoading && editingMessageIndex !== index" 
              class="message-actions"
              :class="{ 'user-actions': msg.isUser, 'assistant-actions': !msg.isUser }"
            >
              <!-- 用户消息操作 -->
              <template v-if="msg.isUser">
                <el-tooltip :content="$t('vabI18n.chat.copy')" placement="top">
                  <button class="action-btn copy-btn" @click="handleCopyMessage(msg)">
                    <svg viewBox="0 0 24 24" class="action-icon">
                      <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                    </svg>
                  </button>
                </el-tooltip>
                <el-tooltip :content="$t('vabI18n.chat.edit')" placement="top">
                  <button class="action-btn edit-btn" @click="handleEditMessage(msg, index)">
                    <svg viewBox="0 0 24 24" class="action-icon">
                      <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
                    </svg>
                  </button>
                </el-tooltip>
              </template>

              <!-- 助手消息操作 -->
              <template v-else>
                <el-tooltip :content="$t('vabI18n.chat.copy')" placement="top">
                  <button class="action-btn copy-btn" @click="handleCopyMessage(msg)">
                    <svg viewBox="0 0 24 24" class="action-icon">
                      <path fill="currentColor" d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
                    </svg>
                  </button>
                </el-tooltip>
                <el-tooltip :content="$t('vabI18n.chat.regenerate')" placement="top">
                  <button class="action-btn regenerate-btn" @click="handleRegenerateMessage(index)">
                    <svg viewBox="0 0 24 24" class="action-icon">
                      <path fill="currentColor" d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
                    </svg>
                  </button>
                </el-tooltip>
                <el-tooltip :content="$t('vabI18n.chat.like')" placement="top">
                  <button class="action-btn like-btn" @click="handleLikeMessage(index)">
                    <svg viewBox="0 0 24 24" class="action-icon">
                      <path fill="currentColor" d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z"/>
                    </svg>
                  </button>
                </el-tooltip>
                <el-tooltip :content="$t('vabI18n.chat.dislike')" placement="top">
                  <button class="action-btn dislike-btn" @click="handleDislikeMessage(index)">
                    <svg viewBox="0 0 24 24" class="action-icon">
                      <path fill="currentColor" d="M15 3H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 23l6.59-6.59c.36-.36.58-.86.58-1.41V5c0-1.1-.9-2-2-2zm4 0v12h4V3h-4z"/>
                    </svg>
                  </button>
                </el-tooltip>
              </template>
            </div>
          </div>
          </div>
        </div>
        <div ref="bottomAnchor"></div>
        
      </div>

      <!-- 输入区域 -->
      <div class="input-area">
        <!-- 中止按钮 -->
        <div v-if="showStopButton" class="stop-button-container">
          <el-tooltip :content="$t('vabI18n.chat.stopGenerating')" placement="top">
            <button 
              class="stop-button"
              @click="handleStopStream"
            >
              <svg viewBox="0 0 24 24" class="stop-icon">
                <path fill="currentColor" d="M6 6h12v12H6z"/>
              </svg>
            </button>
          </el-tooltip>
        </div>

        <div class="input-wrapper">
          <el-input
            v-model="inputMessage"
            :placeholder="props.placeholder"
            :class="{ 'is-loading': isLoading }"
            @keyup.enter="sendMessage"
            type="textarea"
            :autosize="{ minRows: 1, maxRows: 4 }"
          >
          </el-input>
          <el-button 
            type="primary" 
            class="send-button"
            @click="sendMessage" 
            :disabled="!inputMessage.trim() || isLoading"
          >
            <template v-if="isLoading">
              <span class="loading-icon"></span>
            </template>
            <svg v-else viewBox="0 0 24 24" class="send-icon" width="16" height="16">
              <path fill="currentColor" d="M3.4 20.4l17.45-7.48a1 1 0 000-1.84L3.4 3.6a.993.993 0 00-1.39.91L2 9.12c0 .5.37.93.87.99L17 12L2.87 13.88c-.5.07-.87.5-.87 1l.01 4.61c0 .71.73 1.2 1.39.91z"/>
            </svg>
          </el-button>
        </div>
        <div class="input-footer">
          <span class="footer-hint">{{ t('vabI18n.chat.sendHint') }}</span>
        </div>
      </div>
    </div>

    <!-- 文件预览模态框 -->
    <el-dialog
      v-model="filePreviewVisible"
      :title="t('vabI18n.chat.previewTitle')"
      width="80%"
      class="file-preview-dialog"
      :close-on-click-modal="false"
      center
    >
      <div v-loading="previewLoading" class="preview-content">
        <vue-office-pdf
          v-if="previewFileUrl"
          :src="previewFileUrl"
          @rendered="() => { previewLoading = false }"
          @error="() => { previewLoading = false; ElMessage.error(t('vabI18n.chat.previewTitleFail')) }"
          class="pdf-preview"
        />
      </div>
    </el-dialog>

    <!-- Excel表格预览模态框 -->
    <el-dialog
      v-model="excelPreviewVisible"
      :title="$t('vabI18n.chat.excelPreviewTitle')"
      width="90%"
      class="excel-preview-dialog"
      :close-on-click-modal="false"
      center
    >
      <div v-loading="excelPreviewLoading" class="excel-preview-content">
        <div 
          v-if="excelPreviewContent"
          v-html="excelPreviewContent"
          class="excel-table-content"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
// 组件注册
const components = {
  VueOfficePdf,
  VabChart
}

import { marked } from 'marked'
import DOMPurify from 'dompurify'
import { ref, reactive, nextTick, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import VueOfficePdf from '@vue-office/pdf'
import VabChart from '@/plugins/VabChart/index.vue'
import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/vue/24/solid'
import { sendChatMessage, type ChatMessageResponse, type ChatMessageSendRequest, stopMessagesStream, getFilePathList, type TraceFile, type TraceData } from '@/api/chat' 
import { useI18n } from 'vue-i18n'
import { throttle } from 'lodash'

const expanded = ref(false)
const { t, locale } = useI18n()
// Props 定义
interface Props {
  chatType: string // 聊天类型，必填
  userId: string // 用户ID，必填
  assistantAvatar?: string // 助手头像，可选，默认使用内置头像
  initialMessages?: Message[] // 初始消息，可选
  placeholder?: string // 输入框占位符，可选
  maxHistoryCount?: number // 最大历史会话数量，可选
  openRemark?: string // 开场白，可选
  recommendQuestions?: string[] // 推荐问题列表，可选
}

const props = withDefaults(defineProps<Props>(), {
  assistantAvatar: '',
  initialMessages: () => [],
  placeholder: "",
  maxHistoryCount: 50,
  openRemark: '',
  recommendQuestions: () => []
})

// Events 定义
interface Emits {
  streamComplete: [data: {
    conversationId: string
    messageId: string
    content: string
  }] // 对话流完成事件
  sourceClick: [source: TraceFile] // 文件来源点击事件
  messageReceived: [message: Message] // 收到新消息事件
  chatCreated: [chatIndex: number] // 创建新会话事件
  chatSwitched: [chatIndex: number] // 切换会话事件
}

const emit = defineEmits<Emits>()

interface EChartData {
  id: string
  option: any
}

interface Message {
  text: string
  isUser: boolean
  isLoading?: boolean
  formattedText?: string
  sources?: TraceData  // 更新为TraceData类型
  conversationId?: string  // 会话ID
  messageId?: string  // 消息ID
  echarts?: EChartData[]  // ECharts 图表数据
  isOpenRemark?: boolean  // 是否为开场白消息
}

// 消息体底部锚点
const bottomAnchor = ref<HTMLElement | null>(null)

const messages = ref<Message[]>([])
const inputMessage = ref('')
const messagesContainer = ref<HTMLElement | null>(null)
const isLoading = ref(false)
const currentTaskId = ref('')
const showStopButton = ref(false)
const hoveredMessageIndex = ref(-1)
const editingMessageIndex = ref(-1)
const editingMessageText = ref('')

// 文件预览相关状态
const filePreviewVisible = ref(false)
const previewFileUrl = ref('')
const previewLoading = ref(false)

// Excel表格预览相关状态
const excelPreviewVisible = ref(false)
const excelPreviewContent = ref('')
const excelPreviewLoading = ref(false)

// 添加新的状态管理
interface ChatSession {
  messages: Message[]
  title: string
  timestamp: number
  conversationId?: string
  lastMessageId?: string
}

const isSidebarCollapsed = ref(false)
const chatHistory = ref<ChatSession[]>([])
const currentChatIndex = ref(0)

// 计算sessionStorage的key
const getChatHistoryKey = () => {
  return `chat_history_${props.chatType}`
}

// 从sessionStorage加载会话历史
const loadChatHistory = () => {
  const savedHistory = sessionStorage.getItem(getChatHistoryKey())
  if (savedHistory) {
    try {
      chatHistory.value = JSON.parse(savedHistory)
      // 限制历史会话数量
      if (chatHistory.value.length > props.maxHistoryCount) {
        chatHistory.value = chatHistory.value.slice(-props.maxHistoryCount)
      }
      // 如果有历史会话，默认选中最后一个
      if (chatHistory.value.length > 0) {
        currentChatIndex.value = chatHistory.value.length - 1
        messages.value = [...chatHistory.value[currentChatIndex.value].messages]
      }
    } catch (e) {
      console.error('加载会话历史失败:', e)
      chatHistory.value = []
    }
  }
}

// 保存会话历史到sessionStorage
const saveChatHistory = () => {
  // 限制历史会话数量
  if (chatHistory.value.length > props.maxHistoryCount) {
    chatHistory.value = chatHistory.value.slice(-props.maxHistoryCount)
  }
  sessionStorage.setItem(getChatHistoryKey(), JSON.stringify(chatHistory.value))
}

// 切换侧边栏状态
const toggleSidebar = () => {
  isSidebarCollapsed.value = !isSidebarCollapsed.value
}

// 创建新会话
const createNewChat = async () => {
  // 保存当前会话（如果有内容的话）
  if (messages.value.length > 0 && chatHistory.value[currentChatIndex.value]) {
    chatHistory.value[currentChatIndex.value] = {
      messages: [...messages.value],
      title: messages.value[0]?.text.slice(0, 20) + '...' || '新会话',
      timestamp: Date.now(),
      conversationId: chatHistory.value[currentChatIndex.value].conversationId,
      lastMessageId: chatHistory.value[currentChatIndex.value].lastMessageId
    }
    saveChatHistory()
  }
  
  // 创建新会话初始消息
  let initialMessages = [...props.initialMessages]
  
  // 如果有开场白，添加助手消息
  if (props.openRemark && props.openRemark.trim()) {
    const formatted = await formatAnswer(props.openRemark)
    const openRemarkMessage: Message = {
      text: props.openRemark,
      isUser: false,
      formattedText: formatted.html,
      echarts: formatted.echarts,
      isOpenRemark: true
    }
    initialMessages.push(openRemarkMessage)
  }
  
  // 创建新会话
  const newSession: ChatSession = {
    messages: initialMessages,
    title: '新会话',
    timestamp: Date.now()
  }
  chatHistory.value.push(newSession)
  currentChatIndex.value = chatHistory.value.length - 1
  messages.value = initialMessages
  saveChatHistory()
  
  // 发射会话创建事件
  emit('chatCreated', currentChatIndex.value)
  
  // 滚动到底部显示新消息
  await nextTick()
  throttledScrollToBottom()
}

// 切换会话
const switchChat = (index: number) => {
  if (index === currentChatIndex.value) return
  
  // 保存当前会话
  if (messages.value.length > 0 && chatHistory.value[currentChatIndex.value]) {
    chatHistory.value[currentChatIndex.value] = {
      messages: [...messages.value],
      title: messages.value[0]?.text.slice(0, 20) + '...' || '新会话',
      timestamp: Date.now(),
      conversationId: chatHistory.value[currentChatIndex.value].conversationId,
      lastMessageId: chatHistory.value[currentChatIndex.value].lastMessageId
    }
    saveChatHistory()
  }
  
  // 切换到选中的会话
  currentChatIndex.value = index
  messages.value = [...chatHistory.value[index].messages]
  
  // 发射会话切换事件
  emit('chatSwitched', index)
}

// 更新当前会话的会话ID和消息ID
const updateSessionIds = (conversationId: string, messageId: string) => {
  if (chatHistory.value[currentChatIndex.value]) {
    chatHistory.value[currentChatIndex.value].conversationId = conversationId
    chatHistory.value[currentChatIndex.value].lastMessageId = messageId
    saveChatHistory()
  }
}

// 格式化时间
const formatTime = (timestamp: number) => {
  const date = new Date(timestamp)
  return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
}

// 生成Excel文件名 (格式: YYYYMMDDHHMM.excel)
const generateExcelFileName = (timestamp: number = Date.now()) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = (date.getMonth() + 1).toString().padStart(2, '0')
  const day = date.getDate().toString().padStart(2, '0')
  const hour = date.getHours().toString().padStart(2, '0')
  const minute = date.getMinutes().toString().padStart(2, '0')
  
  return `${year}${month}${day}${hour}${minute}.excel`
}

// 监听消息变化，自动保存到当前会话
watch(messages, (newMessages) => {
  if (newMessages.length > 0 && currentChatIndex.value < chatHistory.value.length) {
    const currentSession = chatHistory.value[currentChatIndex.value]
    chatHistory.value[currentChatIndex.value] = {
      messages: [...newMessages],
      title: newMessages[0]?.text.slice(0, 20) + '...' || '新会话',
      timestamp: Date.now(),
      conversationId: currentSession?.conversationId,
      lastMessageId: currentSession?.lastMessageId
    }
    saveChatHistory()
  }
}, { deep: true })


// 用户是否正在拖动滚动条
let isUserScrolling = false

// 初始化时加载会话历史
onMounted(async () => {
  loadChatHistory()
  // 如果没有历史会话，创建一个新会话
  if (chatHistory.value.length === 0) {
    await createNewChat()
  }

    //监听用户是否拖动滚动条
  messagesContainer.value?.addEventListener('scroll', () => {
    const el = messagesContainer.value
    if (!el) return
    const threshold = 100
    isUserScrolling = el.scrollHeight - el.scrollTop - el.clientHeight > threshold
  })

})

// 解析ECharts代码块
const parseECharts = (text: string): { processedText: string; echarts: EChartData[] } => {
  const echartsRegex = /```echarts\n([\s\S]*?)\n```/g
  const echarts: EChartData[] = []
  let match
  let processedText = text

  while ((match = echartsRegex.exec(text)) !== null) {
    try {
      const echartsJson = match[1].trim()
      const option = JSON.parse(echartsJson)
      const id = `echart_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
      
      echarts.push({ id, option })
      
      // 将echarts代码块替换为占位符
      processedText = processedText.replace(match[0], `<div class="echart-placeholder" data-chart-id="${id}"></div>`)
    } catch (error) {
      console.error('解析ECharts配置失败:', error)
      // 如果解析失败，保留原始代码块
    }
  }

  return { processedText, echarts }
}

// 格式化答案
const formatAnswer = async (text: string) => {
  try {
    // 先解析ECharts代码块
    const { processedText, echarts } = parseECharts(text)
    
    // 配置marked以更好地支持表格  
    const html = await marked.parse(processedText, {
      gfm: true,
      breaks: true,
      async: true
    })

    // 为表格添加容器包装和强制样式属性
    const wrappedHtml = html.replace(
      /<table>/g, 
      `<details class="table-wrapper" open>
      <summary>
          Expand / Collapse table
      </summary>
      <div class="table-container"><table class="excel-table" border="1" width="auto" cellspacing="0" cellpadding="0">`
    ).replace(
    /<\/table>/g,
    '</table></div></details>'

    ).replace(
      /<th>/g,
      '<th style="border: 1px solid #cbd5e1; padding: 12px; background: #f1f5f9;">'
    ).replace(
      /<td>/g,
      '<td style="border: 1px solid #cbd5e1; padding: 12px;">'
    )

    const sanitizedHtml = DOMPurify.sanitize(wrappedHtml, {
      ALLOWED_TAGS: [
        'strong', 'em', 'code', 'pre', 'a', 'br', 'p', 
        'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'span',
        'blockquote', 'hr', 'table', 'thead', 'tbody',
        'tr', 'th', 'td', 'div', 'details', 'summary'
      ],
      ALLOWED_ATTR: ['href', 'target', 'class', 'style', 'data-chart-id', 'border', 'cellspacing', 'cellpadding', 'open']
    }) as string

    console.log('Markdown输入:', processedText)
    console.log('生成的HTML:', sanitizedHtml)

    return { html: sanitizedHtml, echarts }
  } catch (error) {
    console.error('Error formatting answer:', error)
    return { html: text, echarts: [] }
  }
}

const sendMessage = async () => {
  if (!inputMessage.value.trim() || isLoading.value) return

  try {
    isLoading.value = true
    const userQuery = inputMessage.value
    inputMessage.value = ''

    // 添加用户消息
    const userMessage: Message = {
      text: userQuery,
      isUser: true,
    }
    messages.value.push(userMessage)
    
    // 发射消息接收事件
    emit('messageReceived', userMessage)

    // 创建响应式机器人消息
    const botMessage = reactive<Message>({
      text: '',
      isUser: false,
      isLoading: true,
      formattedText: ''
    })
    messages.value.push(botMessage)
    await scrollToBottom()

    // 获取当前会话的会话ID
    const currentSession = chatHistory.value[currentChatIndex.value]
    const conversationId = currentSession?.conversationId

    // 发起请求
    const response = await sendChatMessage({
      content: userQuery,
      userId: props.userId,
      chatType: props.chatType,
      conversationId: conversationId // 如果有会话ID则带上
    })

    // 显示中止按钮
    showStopButton.value = true

    if (!response.body) throw new Error('No response body')

    const reader = response.body.getReader()
    const decoder = new TextDecoder()
    let buffer = ''
    let newConversationId = ''
    let newMessageId = ''

    while (true) {
      const { done, value } = await reader.read()
      if (done) break

      buffer += decoder.decode(value, { stream: true })
      const chunks = buffer.split(/\n\n/)
      buffer = chunks.pop() || ''

      for (const chunk of chunks) {
        const eventData = chunk.trim()
        if (!eventData) continue

        const jsonData = eventData.replace(/^data:\s*/, '')
        
        try {
          const data = JSON.parse(jsonData) as ChatMessageResponse
          if (data.answer) {
            botMessage.text += data.answer
            const formatted = await formatAnswer(parseThink(botMessage.text).answer)
            botMessage.formattedText = formatted.html
            botMessage.echarts = formatted.echarts
            
            // 更新会话ID和消息ID
            if (data.conversationId) {
              newConversationId = data.conversationId
            }
            if (data.messageId) {
              newMessageId = data.messageId
            }
            
            // 获取并存储taskId
            if (data.taskId) {
              currentTaskId.value = data.taskId
            }
            
            throttledScrollToBottom()
          }
        } catch (e) {
          console.error('解析错误:', e)
        }
      }
    }

    // 处理剩余数据
    if (buffer) {
      const eventData = buffer.trim()
      if (eventData) {
        try {
          const jsonData = eventData.replace(/^data:\s*/, '')
          const data = JSON.parse(jsonData)
          if (data.answer) {
            botMessage.text += data.answer
            const formatted = await formatAnswer(parseThink(botMessage.text).answer)
            botMessage.formattedText = formatted.html
            botMessage.echarts = formatted.echarts
            
            if (data.conversationId) {
              newConversationId = data.conversationId
            }
            if (data.messageId) {
              newMessageId = data.messageId
            }
          }
        } catch (e) {
          console.error('最终解析错误:', e)
        }
      }
    }

    // 更新会话ID和消息ID
    if (newConversationId || newMessageId) {
      updateSessionIds(newConversationId, newMessageId)
    }

    // 获取文件来源数据（仅当chatType=1时）
    if (newConversationId && newMessageId && props.chatType === '1') {
      try {
        const { data } = await getFilePathList(newConversationId, newMessageId)
        if (data && ((data.tracePdf && data.tracePdf.length > 0) || (data.traceExcel && data.traceExcel.trim()))) {
          botMessage.sources = data
          botMessage.conversationId = newConversationId
          botMessage.messageId = newMessageId
        }
      } catch (error) {
        console.log('获取文件来源失败:', error)
        // 不显示错误信息，静默失败
      }
    }

    // 发射消息接收事件
    emit('messageReceived', botMessage)

    // 流式请求完成，发送事件
    emit('streamComplete', {
      conversationId: newConversationId,
      messageId: newMessageId,
      content: userQuery
    })

  } catch (error) {
    console.error('请求失败:', error)
    const errorMessage: Message = {
      text: '请求失败，请稍后重试',
      isUser: false,
    }
    messages.value.push(errorMessage)
    emit('messageReceived', errorMessage)
  } finally {
    isLoading.value = false
    showStopButton.value = false // 隐藏中止按钮
    currentTaskId.value = '' // 清除taskId
    if (messages.value[messages.value.length - 1]?.isLoading) {
      messages.value[messages.value.length - 1].isLoading = false
    }
    scrollToBottomForce()
  }
}

const scrollToBottomForce = async () => {
  await nextTick()
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

//将锚点滚动到最底部
const scrollToBottom = async () => {
  await nextTick()
  setTimeout(() => {
  requestAnimationFrame(() => {
    if (messagesContainer.value && !isUserScrolling) {
      bottomAnchor.value.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        })
    }
  })
  },60)
}

const throttledScrollToBottom = throttle(() => {
    scrollToBottom()
}, 300,{ leading: true, trailing: true })

// 解析方法
const parseThink = (text: string) => {
  const thinkRegex = /<think>(.*?)<\/think>/s
  const match = text.match(thinkRegex)
  return {
    think: match?.[1] || '',
    answer: match ? text.replace(thinkRegex, '').trim() : text,
  }
}

// 获取文件类型图标 - 使用动态导入确保路径正确
const getFileTypeIcon = (fileType: string) => {
  const icons = require.context('@/assets/img/filetype-icon', false, /\.png$/)
  // console.log(icons)
  // console.log('所有图标 keys:', icons.keys())

  const getIconUrl = (iconName: string) => {
    const fullName = `./${iconName}.png`
    if (icons.keys().includes(fullName)) {
      return icons(fullName)
    } else {
      // console.warn('图标不存在:', fullName)
      return ''
    }
  }

  const iconMap: Record<string, string> = {
    'pdf': getIconUrl('pdf'),
    'doc': getIconUrl('word'),
    'docx': getIconUrl('word'),
    'xls': getIconUrl('excel'),
    'xlsx': getIconUrl('excel'),
    'ppt': getIconUrl('ppt'),
    'pptx': getIconUrl('ppt'),
    'txt': getIconUrl('txt'),
    'xml': getIconUrl('xml'),
    'zip': getIconUrl('zip'),
    'mp4': getIconUrl('video'),
    'avi': getIconUrl('video'),
    'mp3': getIconUrl('audio'),
    'wav': getIconUrl('audio'),
    'jpg': getIconUrl('img'),
    'jpeg': getIconUrl('img'),
    'png': getIconUrl('img'),
    'gif': getIconUrl('img'),
  }
  return iconMap[fileType.toLowerCase()] || getIconUrl('unknown')
}

// 获取文件扩展名
const getFileExtension = (fileName: string) => {
  return fileName.split('.').pop()?.toLowerCase() || ''
}

// 处理文件来源点击事件
const handleSourceClick = async (source: TraceFile, conversationId?: string, messageId?: string) => {
  // 只有chatType=1时才允许点击预览
  if (props.chatType !== '1') {
    return
  }

  if (!conversationId || !messageId) {
    ElMessage.warning('缺少会话信息，无法预览文件')
    return
  }

  try {
    previewLoading.value = true
    filePreviewVisible.value = true
    
    // 构造完整的PDF预览URL
    const baseUrl = window.location.protocol + '//' + window.location.host
    previewFileUrl.value = baseUrl + source.filePath
    
    console.log('预览文件:', source)
    console.log('预览URL:', previewFileUrl.value)
    // 发射文件来源点击事件，让父组件处理
    emit('sourceClick', source)
  } catch (error) {
    console.error('获取文件预览失败:', error)
    ElMessage.error('获取文件预览失败')
    filePreviewVisible.value = false
  } finally {
    previewLoading.value = false
  }
}

// 处理Excel表格点击事件
const handleExcelClick = async (excelContent: string) => {
  try {
    excelPreviewLoading.value = true
    excelPreviewVisible.value = true
    
    // 将 \n 字符串转换为真正的换行符
    const processedContent = excelContent.replace(/\\n/g, '\n')
    
    // 如果marked转换失败，尝试手动解析markdown表格
    let htmlContent = ''
    try {
      const formattedContent = await formatAnswer(processedContent)
      htmlContent = formattedContent.html
    } catch (error) {
      console.warn('marked解析失败，尝试手动解析:', error)
      htmlContent = parseMarkdownTable(processedContent)
    }
    
    // 如果HTML中没有table标签，尝试手动解析
    if (!htmlContent.includes('<table')) {
      console.warn('未检测到表格，手动解析markdown')
      htmlContent = parseMarkdownTable(processedContent)
    }
    
    excelPreviewContent.value = htmlContent
    
    console.log('原始Excel数据:', excelContent)
    console.log('处理后的Excel数据:', processedContent)
    console.log('最终HTML:', htmlContent)
  } catch (error) {
    console.error('解析Excel表格失败:', error)
    ElMessage.error('解析Excel表格失败')
    excelPreviewVisible.value = false
  } finally {
    excelPreviewLoading.value = false
  }
}

// 手动解析markdown表格为HTML
const parseMarkdownTable = (markdown: string): string => {
  const lines = markdown.trim().split('\n')
  if (lines.length < 3) return markdown // 至少需要表头、分隔线、数据行
  
  const headerLine = lines[0]
  const separatorLine = lines[1]
  const dataLines = lines.slice(2)
  
  // 检查是否是有效的markdown表格
  if (!headerLine.includes('|') || !separatorLine.includes('---')) {
    return markdown
  }
  
  // 解析表头
  const headers = headerLine.split('|').map(h => h.trim()).filter(h => h)
  
  // 解析数据行
  const rows = dataLines.map(line => 
    line.split('|').map(cell => cell.trim()).filter(cell => cell)
  ).filter(row => row.length > 0)
  
  // 生成HTML表格
  let html = `
    <div class="table-container">
      <table class="excel-table" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse; width: auto; border: 2px solid #cbd5e1;">
        <thead>
          <tr>
  `
  
  headers.forEach(header => {
    html += `<th style="border: 1px solid #cbd5e1; padding: 12px; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); font-weight: 600; text-align: left; position: sticky; top: 0; z-index: 2; white-space: nowrap;">${header}</th>`
    //html += `<th style="border: 1px solid #cbd5e1; padding: 12px; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); font-weight: 600; text-align: left;">${header}</th>`
  })
  
  html += `
          </tr>
        </thead>
        <tbody>
  `
  
  rows.forEach((row, rowIndex) => {
    html += '<tr>'
    row.forEach((cell, cellIndex) => {
      const cellStyle = rowIndex % 2 === 0 
        ? 'border: 1px solid #cbd5e1; padding: 12px; background: white;'
        : 'border: 1px solid #cbd5e1; padding: 12px; background: #f8fafc;'
      html += `<td style="${cellStyle}">${cell}</td>`
    })
    html += '</tr>'
  })
  
  html += `
        </tbody>
      </table>
    </div>
  `
  
  return html
}

// 获取助手头像
const getAssistantAvatar = () => {
  return props.assistantAvatar || new URL('@/assets/assistant.png', import.meta.url).href
}

// 中止流式回答
const handleStopStream = async () => {
  if (currentTaskId.value) {
    try {
      await stopMessagesStream(Number(props.chatType), currentTaskId.value, props.userId)
      
      

      // 隐藏中止按钮
      showStopButton.value = false
      


      // 停止加载状态
      isLoading.value = false
      
      // 移除当前消息的加载状态
      if (messages.value.length > 0) {
        const lastMessage = messages.value[messages.value.length - 1]
        if (!lastMessage.isUser && lastMessage.isLoading) {
          lastMessage.isLoading = false
          if (!lastMessage.text.trim()) {
            lastMessage.text = '已停止生成'
          }
        }
      }
      
      // 清除taskId
      currentTaskId.value = ''
      
      ElMessage.success('已停止生成')
    } catch (error) {
      console.error('停止流式回答失败:', error)
      ElMessage.error('停止失败，请重试')
    }
  }
}

// 处理消息悬浮事件
const handleMessageHover = (index: number, isHovered: boolean) => {
  hoveredMessageIndex.value = isHovered ? index : -1
}

// 复制消息内容
const handleCopyMessage = async (message: Message) => {
  const textToCopy = message.text
  
  try {
    // 优先使用现代的 Clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(textToCopy)
      ElMessage.success('已复制到剪贴板')
      return
    }
    
    // 回退到传统方法
    const textArea = document.createElement('textarea')
    textArea.value = textToCopy
    textArea.style.position = 'fixed'
    textArea.style.left = '-999999px'
    textArea.style.top = '-999999px'
    document.body.appendChild(textArea)
    textArea.focus()
    textArea.select()
    
    const successful = document.execCommand('copy')
    document.body.removeChild(textArea)
    
    if (successful) {
      ElMessage.success('已复制到剪贴板')
    } else {
      throw new Error('execCommand failed')
    }
  } catch (error) {
    console.error('复制失败:', error)
    ElMessage.error('复制失败')
  }
}

// 编辑消息
const handleEditMessage = (message: Message, index: number) => {
  editingMessageIndex.value = index
  editingMessageText.value = message.text
  hoveredMessageIndex.value = -1 // 隐藏操作按钮
}

// 取消编辑
const handleCancelEdit = () => {
  editingMessageIndex.value = -1
  editingMessageText.value = ''
}

// 保存编辑
const handleSaveEdit = async () => {
  if (!editingMessageText.value.trim()) return
  
  const newText = editingMessageText.value.trim()
  
  // 重置编辑状态
  editingMessageIndex.value = -1
  editingMessageText.value = ''
  
  // 将编辑后的文本作为新的用户问题发送
  inputMessage.value = newText
  await sendMessage()
}

// 重新生成回答
const handleRegenerateMessage = async (index: number) => {
  if (index === 0) return
  
  // 获取前一条用户消息
  const userMessage = messages.value[index - 1]
  if (!userMessage || !userMessage.isUser) return
  
  // 删除当前助手消息及之后的消息
  messages.value = messages.value.slice(0, index)
  
  // 直接重新生成，不创建新的用户消息
  await regenerateResponse(userMessage.text)
}

// 重新生成回答的核心逻辑
const regenerateResponse = async (userQuery: string) => {
  try {
    isLoading.value = true

    // 创建响应式机器人消息
    const botMessage = reactive<Message>({
      text: '',
      isUser: false,
      isLoading: true,
      formattedText: ''
    })
    messages.value.push(botMessage)
    throttledScrollToBottom()

    // 获取当前会话的会话ID
    const currentSession = chatHistory.value[currentChatIndex.value]
    const conversationId = currentSession?.conversationId

    // 发起请求
    const response = await sendChatMessage({
      content: userQuery,
      userId: props.userId,
      chatType: props.chatType,
      conversationId: conversationId
    })

    // 显示中止按钮
    showStopButton.value = true

    if (!response.body) throw new Error('No response body')

    const reader = response.body.getReader()
    const decoder = new TextDecoder()
    let buffer = ''
    let newConversationId = ''
    let newMessageId = ''

    while (true) {
      const { done, value } = await reader.read()
      if (done) break

      buffer += decoder.decode(value, { stream: true })
      const chunks = buffer.split(/\n\n/)
      buffer = chunks.pop() || ''

      for (const chunk of chunks) {
        const eventData = chunk.trim()
        if (!eventData) continue

        const jsonData = eventData.replace(/^data:\s*/, '')
        
        try {
          const data = JSON.parse(jsonData) as ChatMessageResponse
          if (data.answer) {
            botMessage.text += data.answer
            const formatted = await formatAnswer(parseThink(botMessage.text).answer)
            botMessage.formattedText = formatted.html
            botMessage.echarts = formatted.echarts
            
            // 更新会话ID和消息ID
            if (data.conversationId) {
              newConversationId = data.conversationId
            }
            if (data.messageId) {
              newMessageId = data.messageId
            }
            
            // 获取并存储taskId
            if (data.taskId) {
              currentTaskId.value = data.taskId
            }
            
            throttledScrollToBottom()
          }
        } catch (e) {
          console.error('解析错误:', e)
        }
      }
    }

    // 处理剩余数据
    if (buffer) {
      const eventData = buffer.trim()
      if (eventData) {
        try {
          const jsonData = eventData.replace(/^data:\s*/, '')
          const data = JSON.parse(jsonData)
          if (data.answer) {
            botMessage.text += data.answer
            const formatted = await formatAnswer(parseThink(botMessage.text).answer)
            botMessage.formattedText = formatted.html
            botMessage.echarts = formatted.echarts
            
            if (data.conversationId) {
              newConversationId = data.conversationId
            }
            if (data.messageId) {
              newMessageId = data.messageId
            }
          }
        } catch (e) {
          console.error('最终解析错误:', e)
        }
      }
    }

    // 更新会话ID和消息ID
    if (newConversationId || newMessageId) {
      updateSessionIds(newConversationId, newMessageId)
    }

    // 获取文件来源数据（仅当chatType=1时）
    if (newConversationId && newMessageId && props.chatType === '1') {
      try {
        const { data } = await getFilePathList(newConversationId, newMessageId)
        if (data && ((data.tracePdf && data.tracePdf.length > 0) || (data.traceExcel && data.traceExcel.trim()))) {
          botMessage.sources = data
          botMessage.conversationId = newConversationId
          botMessage.messageId = newMessageId
        }
      } catch (error) {
        console.log('获取文件来源失败:', error)
        // 不显示错误信息，静默失败
      }
    }

    // 发射消息接收事件
    emit('messageReceived', botMessage)

    // 流式请求完成，发送事件
    emit('streamComplete', {
      conversationId: newConversationId,
      messageId: newMessageId,
      content: userQuery
    })

  } catch (error) {
    console.error('重新生成失败:', error)
    const errorMessage: Message = {
      text: '重新生成失败，请稍后重试',
      isUser: false,
    }
    messages.value.push(errorMessage)
    emit('messageReceived', errorMessage)
  } finally {
    isLoading.value = false
    showStopButton.value = false
    currentTaskId.value = ''
    if (messages.value[messages.value.length - 1]?.isLoading) {
      messages.value[messages.value.length - 1].isLoading = false
    }
    scrollToBottomForce()
  }
}

// 点赞消息
const handleLikeMessage = (index: number) => {
  // TODO: 实现点赞逻辑，调用相关API
  ElMessage.success('感谢您的反馈！')
}

// 点踩消息
const handleDislikeMessage = (index: number) => {
  // TODO: 实现点踩逻辑，调用相关API
  ElMessage.info('感谢您的反馈，我们会继续改进')
}

// 处理推荐问题点击事件
const handleRecommendQuestionClick = (question: string) => {
  if (!question.trim() || isLoading.value) return
  
  // 将问题内容填入输入框
  inputMessage.value = question
  
  // 发送问题
  sendMessage()
}
</script>

<style scoped>
.chat-container {
  height: 100%;
  display: flex;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 侧边栏样式 */
.chat-sidebar {
  width: 280px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  flex-shrink: 0;
  transform-origin: left;
  will-change: width, transform;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.sidebar-collapsed {
  width: 48px;
}

.sidebar-header {
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-collapsed .sidebar-header {
  opacity: 0;
  visibility: hidden;
}

.chat-history {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  transition: opacity 0.2s ease;
}

.sidebar-collapsed .chat-history {
  opacity: 0;
  visibility: hidden;
}

.sidebar-header h3 {
  margin: 0;
  font-size: 1rem;
  color: #1e293b;
}

.new-chat-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  justify-content: center;
  background: #4f46e5;
  border: none;
  padding: 0.5rem;
  border-radius: 8px;
  color: white;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.new-chat-btn:hover {
  background: #4338ca;
}

.new-chat-icon {
  width: 16px;
  height: 16px;
}

.chat-history-item {
  padding: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.chat-history-item:hover {
  background: #f1f5f9;
}

.chat-history-item.active {
  background: #e0e7ff;
}

.chat-title {
  font-size: 0.875rem;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-time {
  font-size: 0.75rem;
  color: #64748b;
}

.sidebar-toggle {
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 10;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-toggle:hover {
  background: #f8fafc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%) scale(1.1);
}

.sidebar-toggle:active {
  transform: translateY(-50%) scale(0.95);
}

.toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.toggle-icon.collapsed {
  transform: rotate(180deg);
}

/* 主聊天区域样式调整 */
.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.main-expanded {
  margin-left: 0;
  width: 100%;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 0;
  padding-bottom: 100px;
  scroll-behavior: smooth;
  background: #f9fafb;
  width: 100%;
}

.message-item {
  display: flex;
  padding: 1rem 2rem;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

.message-item.user-message {
  flex-direction: row-reverse;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 1rem;
  flex-shrink: 0;
}

.message-content-wrapper {
  max-width: 85%;
  position: relative;
}

/* 当消息包含图表时，扩大消息气泡宽度 */
.assistant-message .message-content-wrapper:has(.echarts-container) {
  max-width: 95%;
  width: 95%;
}

/* 兼容性：通过类名控制图表消息宽度 */
.assistant-message .message-content-wrapper.has-charts {
  max-width: 95%;
  width: 95%;
}





.message-content {
  padding: 1rem 1.5rem;
  border-radius: 12px;
  position: relative;
  word-break: break-word;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-message .message-content {
  background: #EFF6FF;
  border-radius: 16px 2px 16px 16px;
}

.assistant-message .message-content {
  background: #FDFDFD;
  border-radius: 2px 16px 16px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 消息操作按钮样式 */
.message-actions {
  position: absolute;
  bottom: -2.5rem;
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  padding: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
  animation: fadeInUp 0.2s ease-out;
  z-index: 10;
}

.user-actions {
  right: 0;
}

.assistant-actions {
  left: 0;
}

/* 操作按钮样式 */
.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.action-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.action-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.action-icon {
  width: 16px;
  height: 16px;
  color: #64748b;
  transition: color 0.2s ease;
}

.action-btn:hover .action-icon {
  color: #374151;
}

/* 特定按钮颜色 */
.copy-btn:hover {
  background: rgba(59, 130, 246, 0.1);
}

.copy-btn:hover .action-icon {
  color: #3b82f6;
}

.edit-btn:hover {
  background: rgba(245, 158, 11, 0.1);
}

.edit-btn:hover .action-icon {
  color: #f59e0b;
}

.regenerate-btn:hover {
  background: rgba(16, 185, 129, 0.1);
}

.regenerate-btn:hover .action-icon {
  color: #10b981;
}

.like-btn:hover {
  background: rgba(34, 197, 94, 0.1);
}

.like-btn:hover .action-icon {
  color: #22c55e;
}

.dislike-btn:hover {
  background: rgba(239, 68, 68, 0.1);
}

.dislike-btn:hover .action-icon {
  color: #ef4444;
}

/* 按钮出现动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 编辑容器样式 */
.edit-container {
  width: 100%;
  max-width: 600px;
  position: relative;
}

.edit-input-wrapper {
  position: relative;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.3s ease;
  overflow: hidden;
}

.edit-input-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.edit-textarea {
  width: 100%;
}

.edit-textarea :deep(.el-textarea__inner) {
  border: none;
  background: transparent;
  font-size: 0.95rem;
  line-height: 1.6;
  padding: 1rem 1rem 3rem 1rem;
  resize: none;
  box-shadow: none;
  border-radius: 0;
}

.edit-textarea :deep(.el-textarea__inner:focus) {
  border: none;
  box-shadow: none;
  outline: none;
}

.edit-actions {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.edit-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid transparent;
  outline: none;
  min-width: 48px;
  text-align: center;
}

.cancel-btn {
  background: #f8fafc;
  color: #64748b;
  border-color: #e2e8f0;
}

.cancel-btn:hover {
  background: #f1f5f9;
  color: #475569;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.cancel-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.save-btn {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
}

.save-btn:hover:not(:disabled) {
  background: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

.save-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.save-btn:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  border-color: #e5e7eb;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.message-header {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.message-sender {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.message-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #1f2937;
}

.think-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: #64748b;
}

.think-header {
  display: flex;
  align-items: center;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.think-icon {
  width: 16px;
  height: 16px;
  margin-right: 0.5rem;
}

.answer-content {
  color: #1f2937;
  line-height: 1.7;
  font-size: 0.95rem;
}

/* 标题样式 */
.answer-content :deep(h1),
.answer-content :deep(h2),
.answer-content :deep(h3) {
  margin: 1.5rem 0 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.answer-content :deep(h1) {
  font-size: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.answer-content :deep(h2) {
  font-size: 1.3rem;
}

.answer-content :deep(h3) {
  font-size: 1.1rem;
}

/* 段落和列表样式 */
.answer-content :deep(p) {
  margin: 1rem 0;
}

.answer-content :deep(ul),
.answer-content :deep(ol) {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.answer-content :deep(li) {
  margin: 0.5rem 0;
}

.answer-content :deep(ul li) {
  list-style-type: disc;
}

.answer-content :deep(ol li) {
  list-style-type: decimal;
}

/* 链接样式 */
.answer-content :deep(a) {
  color: #4f46e5;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.answer-content :deep(a:hover) {
  border-bottom-color: #4f46e5;
}

/* 强调和加粗 */
.answer-content :deep(em) {
  font-style: italic;
}

.answer-content :deep(strong) {
  font-weight: 600;
  color: #111827;
}

/* 代码样式 */
.answer-content :deep(code) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
  background: #f3f4f6;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  color: #ef4444;
}

.answer-content :deep(pre) {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1rem 0;
}

.answer-content :deep(pre code) {
  background: none;
  padding: 0;
  color: inherit;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* 引用样式 */
.answer-content :deep(blockquote) {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 4px solid #e5e7eb;
  background: #f9fafb;
  color: #4b5563;
}

.answer-content :deep(blockquote p) {
  margin: 0.5rem 0;
}

/* 水平线 */
.answer-content :deep(hr) {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid #e5e7eb;
}

/* 文件来源样式 */
.sources-section {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.875rem;
}

.sources-header {
  display: flex;
  align-items: center;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sources-icon {
  width: 14px;
  height: 14px;
  margin-right: 0.5rem;
}

.sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.source-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.8rem;
  max-width: 200px;
}

.source-item:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.source-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

.source-name {
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  font-weight: 500;
}

/* 表格样式优化 */
.answer-content :deep(table) {
  width: auto; 
  min-width: 1000px;
  max-width: 2500px;
  margin: 1.5rem 0;
  border-collapse: collapse;
  border-radius: 8px;
  overflow: auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background: white;
  font-size: 0.9rem;
  line-height: 1.4;
  border: 1px solid #e5e7eb;

}

::v-deep .table-wrapper summary {
  cursor: pointer;
  display: list-item;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  padding: 6px 8px;
  background: #f8fafc;
  /* border: 1px solid #e2e8f0; */
  /* border-radius: 6px; */
  font-size: 14px;
}


/* .excel-table th,
.excel-table td {
  white-space: nowrap;
} */

.excel-table th {
  white-space: nowrap;     /* 表头不换行 */
}

.excel-table td {
  min-width: 1000px;        /* 内容列设置最小宽度 */
  white-space: normal;     /* 允许内容换行（可选） */
}


.answer-content :deep(th),
.answer-content :deep(td) {
  padding: 0.75rem 1rem;
  border: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
  word-wrap: break-word;
  max-width: 200px;
  word-break: break-word;
  white-space: normal;
}

.answer-content :deep(th) {
  white-space: nowrap;
  background: #f8fafc;
  font-weight: 600;
  color: #374151;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 2px solid #e5e7eb;
}

.answer-content :deep(td) {
  background: white;
  transition: background-color 0.2s ease;
}

.answer-content :deep(tr:hover td) {
  background: #f8fafc;
}

.answer-content :deep(tr:nth-child(even) td) {
  background: #fafbfc;
}

.answer-content :deep(tr:nth-child(even):hover td) {
  background: #f1f5f9;
}

.table-container {
  max-height: 350px;        /* 限制高度，超出时滚动 */
  overflow-x: auto;
  overflow-x: auto;         /* 保留横向滚动条（必要） */
  width: 100%;
  max-width: 100%;
}

.table-container table {
  max-width: 2000px;
  table-layout: auto; /* 或 fixed，视实际内容适配性而定 */
  width: auto;
}


/* 表格容器，支持横向滚动 */
.answer-content :deep(.table-container) {
  overflow-x: auto;
  overflow-y: auto;
  width:100%;
  max-width: 100%;          /* 限制在父容器内不超出 */
  max-height: 350px;        /* 限制表格高度，触发纵向滚动（根据实际需要可调） */
  margin: 1.5rem 0;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 移动端表格优化 */
@media (max-width: 768px) {
  .answer-content :deep(table) {
    min-width: 600px;
    font-size: 0.8rem;
    margin: 1rem 0;
    border: 1px solid #e5e7eb;
  }
  
  .answer-content :deep(th),
  .answer-content :deep(td) {
    padding: 0.5rem 0.75rem;
    max-width: 150px;
    border: 1px solid #e5e7eb;
  }
  
  .answer-content :deep(th) {
    font-size: 0.75rem;
    border-bottom: 2px solid #e5e7eb;
  }
}

.input-area {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f9fafb;
  padding: 2rem;
  position: relative;
}

/* 中止按钮容器 */
.stop-button-container {
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  animation: fadeInDown 0.3s ease-out;
}

/* 中止按钮样式 */
.stop-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  backdrop-filter: blur(10px);
  border: 1.5px solid rgba(239, 68, 68, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 8px rgba(239, 68, 68, 0.15);
  position: relative;
  overflow: hidden;
}

.stop-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stop-button:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.25);
}

.stop-button:hover::before {
  opacity: 1;
}

.stop-button:active {
  transform: scale(0.95);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.stop-icon {
  width: 16px;
  height: 16px;
  color: #ef4444;
  transition: all 0.3s ease;
  z-index: 1;
  position: relative;
}

.stop-button:hover .stop-icon {
  color: #dc2626;
  transform: scale(1.1);
}

/* 按钮出现动画 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.input-wrapper {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.input-wrapper:focus-within {
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.15);
}

:deep(.el-textarea__inner) {
  padding: 1rem 4rem 1rem 1.5rem;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: transparent;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: none;
  transition: all 0.3s ease;
  box-shadow: none;
}

:deep(.el-textarea__inner:focus) {
  border-color: #4f46e5;
}

.send-button {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  height: 2.5rem;
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  border-radius: 50%;
  background: #4f46e5;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
  overflow: hidden;
}

.send-button:not(:disabled) {
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

.send-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.send-button:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.send-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 2px;
  transition: transform 0.3s ease;
}

.loading-icon {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

:deep(.el-button.is-loading) {
  pointer-events: none;
  opacity: 0.9;
}

:deep(.el-button.is-loading .el-loading-mask) {
  display: none;
}

:deep(.el-button.is-loading::before) {
  display: none;
}

.input-footer {
  display: none;
}

@media (max-width: 768px) {
  .chat-container {
    border-radius: 8px;
  }

  .chat-sidebar {
    border-radius: 0;
  }

  .chat-main {
    border-radius: 0;
  }

  .chat-sidebar {
    position: absolute;
    height: 100%;
    z-index: 10;
    box-shadow: none;
  }

  .sidebar-collapsed {
    transform: translateX(-100%);
  }

  .sidebar-toggle {
    right: -16px;
    background: #ffffff;
    box-shadow: none;
  }

  .message-item {
    padding: 0.75rem 1rem;
  }

  .message-content-wrapper {
    max-width: 90%;
  }

  .message-content {
    padding: 0.75rem 1rem;
  }

  /* 移动端消息操作按钮适配 */
  .message-actions {
    bottom: -2rem;
    padding: 0.375rem;
    gap: 0.375rem;
    border-radius: 8px;
  }

  .action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .action-icon {
    width: 14px;
    height: 14px;
  }

  .input-area {
    padding: 1.5rem 1rem;
    padding-top: 2.5rem;
  }

  .avatar {
    width: 32px;
    height: 32px;
    margin: 0 0.75rem;
  }

  .chat-messages {
    padding-bottom: 100px;
  }
  
  .send-button {
    right: 0.5rem;
    height: 2.25rem;
    width: 2.25rem;
    min-height: 2.25rem;
  }

  .send-button .send-icon,
  .loading-icon {
    width: 1rem;
    height: 1rem;
  }

  .loading-icon {
    border-width: 1.5px;
  }

  /* 移动端文件来源样式 */
  .sources-section {
    padding: 0.5rem;
    margin-top: 0.75rem;
  }

  .sources-list {
    gap: 0.375rem;
  }

  .source-item {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    max-width: 150px;
  }

  .source-icon {
    width: 14px;
    height: 14px;
  }

  /* 移动端中止按钮适配 */
  .stop-button-container {
    top: -2rem;
  }
  
  .stop-button {
    width: 32px;
    height: 32px;
  }
  
  .stop-icon {
    width: 14px;
    height: 14px;
  }
}

.loading-content {
  padding: 1rem;
  display: flex;
  justify-content: center;
}

.loading-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.loading-dots .dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #e2e8f0;
  border-radius: 50%;
  animation: pulse 1.4s infinite;
}

.loading-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.loading-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.5rem;
}

.dot {
  width: 4px;
  height: 4px;
  background: #6b7280;
  border-radius: 50%;
  animation: bounce 1.4s infinite;
}

.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}

.avatar-icon {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
}

/* 文件预览模态框样式 */
.file-preview-dialog {
  .el-dialog {
    border-radius: 12px;
    overflow: hidden;
  }
  
  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    margin: 0;
    padding: 20px 24px;
  }
  
  .el-dialog__title {
    color: white;
    font-weight: 600;
    font-size: 18px;
  }
  
  .el-dialog__headerbtn {
    .el-dialog__close {
      color: white;
      font-size: 20px;
      transition: all 0.2s ease;
      
      &:hover {
        color: rgba(255, 255, 255, 0.8);
        transform: scale(1.1);
      }
    }
  }
  
  .el-dialog__body {
    padding: 0;
    background: #f5f7fa;
  }
}

.preview-content {
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 0 0 12px 12px;
  
  .pdf-preview {
    width: 100%;
    height: 600px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    background: white;
  }
}

/* ECharts 图表样式 */
.echarts-container {
  margin: 1rem auto; /* 使用auto实现水平居中 */
  padding: 1.5rem;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  /* 缩减到60%宽度，保持良好的显示比例 */
  width: 60%;
  max-width: 1000px; /* 设置最大宽度避免在大屏上过宽 */
  min-width: 400px; /* 设置最小宽度确保可读性 */
  position: relative;
}

::v-deep .icon-chevron {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
  color: #333; /* 让箭头颜色和文字颜色一致 */
}


.chart-wrapper {
  margin-bottom: 1.5rem;
  background: #ffffff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.chart-wrapper:last-child {
  margin-bottom: 0;
}

.message-chart {
  width: 100%;
  height: 500px;
  min-height: 500px;
}

/* 响应式图表适配 */
@media (max-width: 768px) {
  .echarts-container {
    margin: 0.75rem auto; /* 移动端也使用auto居中 */
    padding: 1rem;
    /* 移动端保持70%宽度，确保在小屏幕上有足够显示空间 */
    width: 70%;
    max-width: 100%;
    min-width: 280px; /* 移动端最小宽度 */
  }
  
  .chart-wrapper {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .message-chart {
    height: 400px;
    min-height: 400px;
  }
  
  /* 移动端消息内容区域调整 */
  .message-content-wrapper {
    max-width: 92%;
  }
  
  /* 移动端包含图表的消息气泡宽度 */
  .assistant-message .message-content-wrapper.has-charts {
    max-width: 96%;
    width: 96%;
  }
}

/* 移动端文件预览适配 */
@media (max-width: 768px) {
  .file-preview-dialog {
    .el-dialog {
      width: 95% !important;
      margin: 2.5vh auto;
      max-height: 95vh;
      overflow: hidden;
    }
    
    .el-dialog__header {
      padding: 16px 20px;
    }
    
    .el-dialog__title {
      font-size: 16px;
    }
  }
  
  .preview-content {
    min-height: 500px;
    
    .pdf-preview {
      height: 500px;
    }
  }
}

/* Excel表格预览模态框样式 */
.excel-preview-dialog {
  .el-dialog {
    border-radius: 12px;
    overflow: hidden;
  }
  
  .el-dialog__header {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    margin: 0;
    padding: 20px 24px;
  }
  
  .el-dialog__title {
    color: white;
    font-weight: 600;
    font-size: 18px;
  }
  
  .el-dialog__headerbtn {
    .el-dialog__close {
      color: white;
      font-size: 20px;
      transition: all 0.2s ease;
      
      &:hover {
        color: rgba(255, 255, 255, 0.8);
        transform: scale(1.1);
      }
    }
  }
  
  .el-dialog__body {
    padding: 0;
    background: #f5f7fa;
    max-height: 70vh;
    overflow-y: auto;
  }
}

.excel-preview-content {
  min-height: 400px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 0 0 12px 12px;
  padding: 20px;
  
  .excel-table-content {
    width: 100%;
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
    
    /* 表格样式优化 - 加强边框显示，使用更高优先级 */
    :deep(table),
    :deep(.answer-content table),
    :deep(.table-container table) {
      width: 100% !important;
      border-collapse: collapse !important;
      margin: 0 !important;
      font-size: 14px !important;
      border: 2px solid #cbd5e1 !important;
      background: white !important;
      border-radius: 8px !important;
      overflow: hidden !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
      max-width: none !important;
    }
    
    :deep(th),
    :deep(td),
    :deep(.answer-content th),
    :deep(.answer-content td),
    :deep(.table-container th),
    :deep(.table-container td) {
      padding: 12px 16px !important;
      text-align: left !important;
      border: 1px solid #cbd5e1 !important;
      word-break: break-word !important;
      vertical-align: top !important;
      position: relative !important;
      max-width: none !important;
    }
    
    :deep(th),
    :deep(.answer-content th),
    :deep(.table-container th) {
      background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
      font-weight: 600 !important;
      color: #1e293b !important;
      position: sticky !important;
      top: 0 !important;
      z-index: 2 !important;
      border-bottom: 2px solid #94a3b8 !important;
      border-right: 1px solid #94a3b8 !important;
      font-size: 13px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.025em !important;
    }
    
    :deep(td),
    :deep(.answer-content td),
    :deep(.table-container td) {
      background: white !important;
      border-right: 1px solid #cbd5e1 !important;
      border-bottom: 1px solid #cbd5e1 !important;
      transition: all 0.2s ease !important;
    }
    
    :deep(tr:nth-child(even) td),
    :deep(.answer-content tr:nth-child(even) td),
    :deep(.table-container tr:nth-child(even) td) {
      background: #f8fafc !important;
    }
    
    :deep(tr:hover td),
    :deep(.answer-content tr:hover td),
    :deep(.table-container tr:hover td) {
      background: #e0f2fe !important;
      transform: scale(1.002) !important;
    }
    
    /* 第一列样式加强 */
    :deep(th:first-child),
    :deep(td:first-child),
    :deep(.answer-content th:first-child),
    :deep(.answer-content td:first-child),
    :deep(.table-container th:first-child),
    :deep(.table-container td:first-child) {
      border-left: 2px solid #cbd5e1 !important;
      font-weight: 500 !important;
    }
    
    /* 最后一列右边框加强 */
    :deep(th:last-child),
    :deep(td:last-child),
    :deep(.answer-content th:last-child),
    :deep(.answer-content td:last-child),
    :deep(.table-container th:last-child),
    :deep(.table-container td:last-child) {
      border-right: 2px solid #cbd5e1 !important;
    }
    
    /* 最后一行底边框加强 */
    :deep(tr:last-child td),
    :deep(.answer-content tr:last-child td),
    :deep(.table-container tr:last-child td) {
      border-bottom: 2px solid #cbd5e1 !important;
    }

    /* Markdown 表格容器样式 */
    :deep(.table-container) {
      overflow-x: auto !important;
      margin: 1rem 0 !important;
      border-radius: 8px !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
      border: 1px solid #cbd5e1 !important;
      background: white !important;
    }

    /* 表格标题样式 */
    :deep(h1),
    :deep(h2),
    :deep(h3) {
      margin: 1.5rem 0 1rem !important;
      font-weight: 600 !important;
      color: #1e293b !important;
    }

    /* 段落间距 */
    :deep(p) {
      margin: 1rem 0 !important;
      color: #374151 !important;
      line-height: 1.6 !important;
    }
  }
}

/* 移动端适配 */
@media (max-width: 768px) {
  .excel-preview-dialog {
    .el-dialog {
      width: 95% !important;
      margin: 2.5vh auto;
    }
    
    .excel-table-content {
      padding: 12px;
      
      :deep(table) {
        font-size: 12px;
      }
      
      :deep(th),
      :deep(td) {
        padding: 8px 12px;
      }
    }
  }
}

/* Excel文件按钮样式 */
.excel-item {
  border: 1px solid #22c55e !important;
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  
  &:hover {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
    border-color: #16a34a !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  }
  
  .source-name {
    color: #15803d;
    font-weight: 600;
  }
}

.recommend-questions-section {
  margin-top: 1rem;
  padding: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.875rem;
}

.recommend-questions-header {
  display: flex;
  align-items: center;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.recommend-icon {
  width: 14px;
  height: 14px;
  margin-right: 0.5rem;
}

.recommend-questions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.recommend-question-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.8rem;
  max-width: 280px;
  color: #374151;
  font-weight: 500;
  outline: none;
  position: relative;
  overflow: hidden;
  line-height: 1.4;
  min-width: 0;
}

.question-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.recommend-question-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.1) 0%, rgba(67, 56, 202, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.recommend-question-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
  color: #4f46e5;
}

.recommend-question-btn:hover:not(:disabled)::before {
  opacity: 1;
}

.recommend-question-btn:active:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}

.recommend-question-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  background: #f8fafc;
  border-color: #e5e7eb;
  color: #9ca3af;
}

.recommend-question-btn:disabled::before {
  opacity: 0;
}

.question-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: all 0.3s ease;
  z-index: 1;
  position: relative;
  color: #64748b;
}

.recommend-question-btn:hover:not(:disabled) .question-icon {
  color: #4f46e5;
  transform: scale(1.1);
}

.recommend-question-btn:disabled .question-icon {
  color: #9ca3af;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .recommend-questions-section {
    padding: 0.5rem;
    margin-top: 0.75rem;
  }
  
  .recommend-questions-list {
    gap: 0.375rem;
  }
  
  .recommend-question-btn {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    max-width: 200px;
    border-radius: 16px;
  }
  
  .question-text {
    font-size: 0.75rem;
  }
  
  .question-icon {
    width: 14px;
    height: 14px;
  }
  
  .recommend-questions-header {
    font-size: 0.75rem;
    margin-bottom: 0.375rem;
  }
  
  .recommend-icon {
    width: 12px;
    height: 12px;
  }
}
</style>