mky-vent-base/src/components/AIChat/MiniChat.vue

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="btn" @click="showAIChat">
    <div style="display: flex; flex-direction: row" class="btn-header">
      <img src="@/assets/images/vent/home/wakeBtn.png" />
    </div>
  </div>
  <div v-if="isShowChatBroad" class="mini-chat">
    <!-- 左侧折叠区域 -->
    <div class="left-side" :class="{ collapsed: isFold }" id="leftSide">
      <div
        class="addBtn"
        :style="{
          backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/add.svg' : ''})`,
          backgroundColor: isFold ? '' : '#2cb6ff',
          width: isFold ? '20px' : 'auto',
        }"
        @click="addNew"
      >
        <span
          class="btn-text-bg"
          :style="{
            backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/addB.svg' : ''})`,
          }"
        ></span>
        <span v-if="!isFold" class="btn-text">添加新对话</span>
      </div>
      <div
        v-if="isFold"
        class="historyBtn"
        :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/history.svg' : '/src/assets/images/vent/home/history.svg'})` }"
        @click="addNew"
      ></div>
      <div v-else class="historyBtn1">
        <span
          class="btn-text-bg"
          :style="{
            backgroundImage: `url(${!isFold ? '/src/assets/images/vent/home/history.svg' : ''})`,
          }"
        ></span>
        <span v-if="!isFold" class="btn-text">历史对话</span>
        <a-list style="width: 130px" :split="false" :data-source="sessionHistory" :scroll="200" class="custom-list">
          <template #renderItem="{ item }">
            <a-list-item
              class="session-item"
              :style="{
                padding: '8px 10px 0 8px',
                color: '#5e7081',
                fontSize: '10px',
                position: 'relative', // 新增定位
              }"
            >
              <!-- 新增flex布局容器 -->
              <div style="width: 100%">
                <div v-if="editingId !== item.id" class="text-container">
                  <span class="edit-text" @click="sessionsHistory(item.id)">{{ item.name }}</span>
                  <div class="btn-container">
                    <EditOutlined class="edit-icon" @click="startEditing(item)" />
                    <DeleteOutlined class="delete-icon" @click="startDelete(item)" />
                  </div>
                </div>
                <!-- 输入框 -->
                <a-input
                  size="small"
                  v-else
                  v-model:value="editText"
                  v-focus
                  @blur="handleSave(item)"
                  @keyup.enter="handleSave(item)"
                  class="edit-input"
                />
              </div>
            </a-list-item>
          </template>
        </a-list>
      </div>
      <div
        class="foldBtn"
        :style="{ backgroundImage: `url(${isFold ? '/src/assets/images/vent/home/Fold.svg' : '/src/assets/images/vent/home/unfold.svg'})` }"
        @click="fold"
      ></div>
    </div>
    <!-- 右侧对话框 -->
    <div class="right-side">
      <!-- 对话区域 -->
      <div class="dialog-area">
        <div
          v-for="message in messageHistory"
          :key="message.id"
          class="flex items-center w-100%"
          :style="{ alignSelf: message.type === 'user' ? 'flex-end' : 'flex-start' }"
        >
          <template v-if="message.type === 'user'">
            <div class="flex-grow-1"></div>
            <div class="message-wrapper user-message-wrapper">
              <div class="ask-message">{{ message.content }}</div>
              <CopyOutlined class="copy-icon" @click="copyToClipboard(message.content)" title="复制消息" />
            </div>
          </template>
          <template v-else>
            <SvgIcon size="40" class="answerIcon" name="ai-logo" />
            <div class="message-wrapper ai-message-wrapper">
              <div class="answer-message">
                <div v-if="message.contentR1" class="thinking-section">
                  <div class="thinking-header" @click="isShow(message)">
                    <span class="thinking-title"
                      >思考过程：<RightOutlined v-if="!message.isShowThink" /> <DownOutlined v-if="message.isShowThink"
                    /></span>
                  </div>
                  <div v-show="message.isShowThink" class="color-gray font-size-12px" v-html="formatMessage(message.contentR1)"></div>
                </div>
                <div v-if="message.content" v-html="formatMessage(message.content)"> </div>
              </div>
              <CopyOutlined class="copy-icon" @click="copyToClipboard(message.content)" title="复制消息" />
            </div>
          </template>
        </div>
        <!-- 建议信息 -->
        <div v-for="(item, index) in suggestList" :key="index" class="suggestion-item" @click="handleSuggestClick(item)">
          <span class="suggestion-text">{{ item }}</span>
          <a-icon type="right" class="suggestion-arrow" />
        </div>
      </div>
      <!-- 底部输入区 -->
      <div class="input-area">
        <a-textarea v-model:value="inputText" placeholder="请输入你的问题" @keyup.enter="handleSend(inputText)" class="ant-input" auto-size />
        <div class="ctrl-btn">
          <div class="input-controls">
            <button class="control-btn" :class="{ active: isThinking }" @click="toggleThinking">深度学习</button>
            <button class="control-btn" @click="stopReq()">停止响应</button>
          </div>
          <div class="action-bar">
            <Space>
              <Button class="control-btn1" size="small" @click="showModal()">
                <template #icon>
                  <SvgIcon name="send-file" />
                </template>
              </Button>
              <Button class="control-btn2" size="small" @click="handleSend(inputText)">
                <template #icon>
                  <SvgIcon name="send" />
                </template>
              </Button>
            </Space>
          </div>
        </div>
        <!-- 右侧文件上传区 -->
        <div v-if="open" class="file-upload">
          <!-- 上传按钮 -->
          <a-upload
            class="custom-upload"
            name="file"
            :multiple="false"
            :before-upload="handleBeforeUpload"
            :file-list="fileList"
            :remove="handleRemove"
          >
            <a-button class="upload-btn">
              <UploadOutlined></UploadOutlined>
              从本地上传
            </a-button>
          </a-upload>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { SvgIcon } from '../Icon';
import { Space, Button, Modal, Input, message } from 'ant-design-vue';
// import AIChat from './index.vue';
import { useUserStore } from '/@/store/modules/user';
import { EditOutlined, DeleteOutlined, UploadOutlined, CopyOutlined, RightOutlined, DownOutlined } from '@ant-design/icons-vue';
import { createVNode } from 'vue';
const TextArea = Input.TextArea; // 直接导入TextArea组件使用时打包报错
const inputText = ref(''); // 输入框内容
const sessionHistory = ref([]);
const isShowChatBroad = ref(false);
const editingId = ref<number | null>(null);
const editText = ref('');
const currentSessionID = ref('');
const taskID = ref('');
const messageID = ref('');
const open = ref<boolean>(false);
const isThinking = ref(false); //深度思考是否开启
const Thinking = ref(false);
const APIKEY = ref('Bearer app-tSFRUnv0Qkbtik1dwtlhnpkd');
interface ListItem {
  id: number;
  name?: string;
}
interface Message {
  id: string; // 唯一标识（可用时间戳生成）
  type: 'user' | 'system' | 'response';
  content: string;
  /** 深度思考时的文本 */
  contentR1: string;
  timestamp: number; // 排序依据
  isShowThink: boolean; //深度思考展示
}
// 定义消息历史数组类型
const messageHistory = ref<Message[]>([]);
const isFold = ref(true); // 是否折叠
const userid = useUserStore().getUserInfo.id as string;
const filePath = ref(''); // 绑定输入框值
const showConfirmBtn = ref(false); // 控制确认按钮显示状态
const fileList = ref([]);
const suggestList = ref([]); //建议列表
//启用深度思考
const toggleThinking = () => {
  isThinking.value = !isThinking.value;
  if (isThinking.value) {
    APIKEY.value = 'Bearer app-kprgsFKtySM4Wjxs0ZGzaNFN';
  } else {
    APIKEY.value = 'Bearer app-tSFRUnv0Qkbtik1dwtlhnpkd';
  }
};
// 折叠思考过程
const isShow = (message) => {
  message.isShowThink = !message.isShowThink;
};
// 点击建议项时的处理函数
const handleSuggestClick = (text) => {
  // 将选中的建议填充到文本框
  inputText.value = text;
};
function showAIChat() {
  isShowChatBroad.value = !isShowChatBroad.value;
}
//复制消息
function copyToClipboard(text) {
  if (!text || text.trim() === '') {
    message.warn('没有可复制的内容');
    return;
  }
  // 2. 创建临时textarea 元素
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.top = '-999px';
  textarea.style.left = '-999px';
  textarea.style.width = '200px';
  textarea.style.height = '200px';
  document.body.appendChild(textarea);
  try {
    textarea.select();
    textarea.setSelectionRange(0, text.length);
    const isSuccessful = document.execCommand('copy');
    if (isSuccessful) {
      message.success('复制成功！');
    } else {
      throw new Error('复制命令执行失败');
    }
  } catch (err) {
    console.error('复制失败:', err);
    message.error('复制失败，请手动复制');
  } finally {
    document.body.removeChild(textarea);
  }
}
//获取消息列表
async function handleSend(data) {
  inputText.value = '';
  if (isThinking) {
    messageHistory.value.push({
      id: `user_${Date.now()}`,
      type: 'user',
      content: data,
      contentR1: '',
      timestamp: Date.now(),
      isShowThink: true,
    });
  } else {
    messageHistory.value.push({
      id: `user_${Date.now()}`,
      type: 'user',
      content: data,
      contentR1: '',
      timestamp: Date.now(),
      isShowThink: false,
    });
  }
  try {
    const response = await fetch('http://39.97.59.228:8000/v1/chat-messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: APIKEY.value,
      },
      body: JSON.stringify({
        conversation_id: currentSessionID.value ? currentSessionID.value : '',
        query: data,
        response_mode: 'streaming',
        user: userid,
        inputs: {},
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const decoder = new TextDecoder('utf-8');
    const reader = response.body.getReader();
    let textBuffer = ''; // 使用字符串缓冲区来累积数据
    // 在组件中定义
    const currentProcessingMessage = ref(null);
    if (isThinking) {
      const newMessage = {
        id: `response_${Date.now()}`,
        type: 'response',
        content: '',
        contentR1: '',
        timestamp: Date.now(),
        isShowThink: true,
      };
      messageHistory.value.push(newMessage);
      currentProcessingMessage.value = newMessage; // 保存引用
    } else {
      const newMessage = {
        id: `response_${Date.now()}`,
        type: 'response',
        content: '',
        contentR1: '',
        timestamp: Date.now(),
        isShowThink: false,
      };
      messageHistory.value.push(newMessage);
      currentProcessingMessage.value = newMessage; // 保存引用
    }
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        if (textBuffer) {
          processLine(textBuffer);
        }
        break;
      }
      textBuffer += decoder.decode(value, { stream: true });
      // 处理每一行数据
      let lineIndex;
      while ((lineIndex = textBuffer.indexOf('\n')) !== -1) {
        const line = textBuffer.substring(0, lineIndex).trim();
        textBuffer = textBuffer.substring(lineIndex + 1);

        if (line) {
          processLine(line);
        }
      }
    }
    function processLine(line) {
      if (line.startsWith('data: ')) {
        try {
          const jsonStr = line.substring('data: '.length);
          const data = JSON.parse(jsonStr);
          switch (data.event) {
            case 'message':
              if (data.answer) {
                const targetMessage = messageHistory.value.find((msg) => msg.id === currentProcessingMessage.value.id);

                if (!targetMessage) break;
                let currentChunk = data.answer;

                // 检查是否包含起始标签
                const startIndex = currentChunk.indexOf('<think>');
                if (startIndex !== -1) {
                  // 找到起始标签：将标签前的内容作为正文
                  if (startIndex > 0) {
                    targetMessage.content += currentChunk.substring(0, startIndex);
                  }
                  // 进入思考模式，将标签后的内容追加到contentR1
                  Thinking.value = true;
                  const remainingContent = currentChunk.substring(startIndex + '<think>'.length);
                  if (remainingContent) {
                    targetMessage.contentR1 += remainingContent;
                  }
                } else if (Thinking.value) {
                  // 结束标签
                  const endIndex = currentChunk.indexOf('</think>');
                  if (endIndex !== -1) {
                    // 找到结束标签标签前的内容追加到contentR1
                    if (endIndex > 0) {
                      targetMessage.contentR1 += currentChunk.substring(0, endIndex);
                    }
                    //将标签后的内容作为正文
                    const remainingContent = currentChunk.substring(endIndex + '</think>'.length);
                    if (remainingContent) {
                      targetMessage.content += remainingContent;
                    }
                    targetMessage.content += currentChunk;
                    Thinking.value = false;
                    targetMessage.isShowThink = false;
                  } else {
                    // 没有结束标签，继续追加到contentR1
                    targetMessage.contentR1 += currentChunk;
                  }
                } else {
                  targetMessage.content += currentChunk;
                }
              }
              if (data.task_id && !taskID.value) taskID.value = data.task_id;
              if (data.conversation_id && !currentSessionID.value) currentSessionID.value = data.conversation_id;
              if (data.message_id && !messageID.value) {
                messageID.value = data.message_id;
              }
              break;
          }
        } catch (error) {
          console.warn('Error parsing stream chunk:', error, 'Chunk:', line);
        }
      }
    }
    getNextSuggest();
  } catch (error) {
    console.error('Error in handleSend:', error);
    // 在 UI 上显示错误信息
    messageHistory.value.push({
      id: `system_${Date.now()}`,
      type: 'system',
      content: '请求错误',
      contentR1: '',
      timestamp: Date.now(),
      isShowThink: false,
    });
  }
}
//创建新对话
async function addNew() {
  messageHistory.value = [];
  currentSessionID.value = '';
  taskID.value = '';
  messageID.value = '';
}
// 上传文件
const showModal = () => {
  open.value = !open.value;
};
// 上传文件
const handleBeforeUpload = async (file) => {
  const formData = new FormData();
  formData.append('file', file);
  formData.append('user', userid);

  try {
    const response = await fetch(`http://39.97.59.228:8000/v1/files/upload`, {
      method: 'POST',
      headers: {
        Authorization: APIKEY.value,
      },
      body: formData,
    });

    const result = await response.json();
    if (response.ok) {
      message.success('上传成功');
      const linkText = `[${result.name}](${result.source_url})`;
      inputText.value += `\n${linkText}`;
    } else {
      message.error(`上传失败: ${result.message || '网络错误'}`);
    }
  } catch (error) {
    console.error('保存失败:', error);
    message.error('上传失败，请重试');
  }
  return false;
};

const handleRemove = (file) => {
  const index = fileList.value.findIndex((item) => item.uid === file.uid);
  if (index !== -1) {
    fileList.value.splice(index, 1);
  }
};
//停止响应
async function stopReq() {
  try {
    let response = await fetch(`http://39.97.59.228:8000/v1/chat-messages/${taskID}/stop`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: APIKEY.value,
      },
      body: JSON.stringify({
        user: userid,
      }),
    });
    if (!response) {
      throw new Error('Network response was not ok');
    }
  } catch (error) {
    console.error('保存失败:', error);
  }
}
//获取具体会话记录
async function sessionsHistory(id: string) {
  try {
    let response = await fetch(`http://39.97.59.228:8000/v1/messages?conversation_id=${id}&user=${userid}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Authorization: APIKEY.value,
      },
    });
    const data = await response.json();
    console.log(data, '123');
    if (data.data.length > 0) {
      messageHistory.value = [];
      data.data.forEach((item: any) => {
        currentSessionID.value = item.conversation_id;
        messageHistory.value.push({
          id: `user_${Date.now()}`,
          type: 'user',
          content: item.query,
          contentR1: '',
          timestamp: Date.now(),
          isShowThink: false,
        });
        const answer = item.answer;
        // 查找<think>
        const startIndex = answer.indexOf('<think>');
        const endIndex = answer.indexOf('</think>');
        let content = '';
        let contentR1 = '';
        // 根据标签判断
        if (startIndex !== -1 && endIndex !== -1) {
          content = answer.substring(0, startIndex) + answer.substring(endIndex + '</think>'.length);
          contentR1 = answer.substring(startIndex + '<think>'.length, endIndex);
        } else if (startIndex !== -1) {
          // 只有起始标签
          content = answer.substring(0, startIndex);
          contentR1 = answer.substring(startIndex + '<think>'.length);
        } else if (endIndex !== -1) {
          // 只有结束标签
          content = answer.substring(endIndex + '</think>'.length);
          contentR1 = answer.substring(0, endIndex);
        } else {
          // 没有标签
          content = answer;
        }
        // 添加到消息历史
        messageHistory.value.push({
          id: `system_${Date.now()}`,
          type: 'system',
          content: content.trim(),
          contentR1: contentR1.trim(),
          timestamp: Date.now(),
          isShowThink: contentR1.length > 0, // 如果有思考内容则显示
        });
      });
    }
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
  } catch (error) {
    console.error('保存失败:', error);
  }
  editingId.value = null;
}
//获取下一轮建议问题列表
//停止响应
async function getNextSuggest() {
  console.log(messageID.value, '123');
  try {
    let response = await fetch(`http://39.97.59.228:8000/v1/messages/${messageID.value}/suggested?user=${userid}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
        Authorization: APIKEY.value,
      },
    });
    const data = await response.json();
    suggestList.value = data.data;
    if (!response) {
      throw new Error('Network response was not ok');
    }
  } catch (error) {
    console.error('保存失败:', error);
  }
}
//编辑标题
const startEditing = (item: ListItem) => {
  editingId.value = item.id;
  editText.value = item.name || '';
};
// 保存修改
const handleSave = async (item: ListItem) => {
  try {
    let response = await fetch(`http://39.97.59.228:8000/v1/conversations/${item.id}/name`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: APIKEY.value,
      },
      body: JSON.stringify({
        name: editText.value,
        user: userid,
      }),
    });
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    item.name = editText.value;
  } catch (error) {
    console.error('保存失败:', error);
  }
  editingId.value = null;
};
// 删除会话
const startDelete = async (item: ListItem) => {
  Modal.confirm({
    title: '确认删除',
    content: `确定要删除会话 "${item.name || '新会话'}" 吗？此操作不可撤销。`,
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      // 原有删除逻辑不变
      try {
        let response = await fetch(`http://39.97.59.228:8000/v1/conversations/${item.id}`, {
          method: 'DELETE',
          headers: {
            'Content-Type': 'application/json',
            Authorization: APIKEY.value,
          },
          body: JSON.stringify({
            user: userid,
          }),
        });
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        getHistoryList();
      } catch (error) {
        console.error('删除失败:', error);
        Modal.error({
          title: '删除失败',
          content: '删除会话时出现错误，请稍后重试。',
        });
      }
    },
  });
};
const fold = () => {
  isFold.value = !isFold.value;
  if (!isFold.value) {
    getHistoryList();
  }
};
// 获取历史会话列表
async function getHistoryList() {
  let response = await fetch(`http://39.97.59.228:8000/v1/conversations?user=${userid}`, {
    method: 'get',
    headers: {
      'Content-Type': 'application/json',
      Authorization: APIKEY.value,
    },
  });
  const data = await response.json();
  sessionHistory.value = data.data;
  data.data.forEach((item) => {
    currentSessionID.value = item.conversation_id;
  });
}
//格式化消息
const formatMessage = (text) => {
  if (!text) return '';
  let formatted = text
    // 处理换行
    .replace(/\n\n/g, '<br>')
    .replace(/\n###/g, '<br> ')
    .replace(/###/g, '')
    .replace(/---/g, '')
    .replace(/^- /gm, '<br> - ')
    // 处理粗体
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    // 处理斜体
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    // 处理行内代码
    .replace(/`([^`]+)`/g, '<code>$1</code>');
  return formatted;
};
// 初始化按钮定位
onMounted(() => {
  getHistoryList();
});
</script>

<style lang="less" scoped>
.btn-header {
  width: 40px;
  height: 40px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.mini-chat {
  display: flex;
  width: 550px;
  height: 85%;
  border-radius: 4px;
  position: fixed;
  top: 70px;
  right: 20px;
  background-color: rgb(255, 255, 255);
  background: url('../../assets/images/warn-dialog-bg.png') no-repeat center;
  background-size: 103% 130%;
  z-index: 9999999;
  color: #fff;
}

.left-side {
  background: #0c2842;
  transition: width 0.5s ease; /* 平滑过渡动画 */
  width: 140px; /* 展开时宽度 */
  position: relative; /* 用于按钮定位 */
}
.left-side.collapsed {
  width: 40px; /* 折叠时宽度 */
}

.addBtn {
  height: 30px;
  position: absolute;
  background-size: 100% 100%;
  background-position: center;
  padding: 2px;
  right: 10px;
  bottom: 40px;
  left: 10px;
  align-items: center;
  border-radius: 3px;
  cursor: pointer;
}
.custom-list {
  height: 680px;
  overflow-y: auto;
}
.text-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  overflow: hidden;
}
.btn-container {
  display: flex;
}
.jeecg-layout-header-action span[role='img'] {
  padding: 0;
}
.text-ellipsis {
  flex: 1;
}
.edit-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 90px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
}
.edit-icon {
  flex-shrink: 0;
  margin-left: auto;
  line-height: 23px;
}
.delete-icon {
  flex-shrink: 0;
  margin-left: auto;
  line-height: 23px;
}
.edit-icon:hover {
  color: #1890ff !important;
  cursor: pointer;
}
.delete-icon:hover {
  color: #1890ff !important;
  cursor: pointer;
}
.edit-input {
  font-size: 10px;
}
.btn-text-bg {
  width: 14px;
  height: 14px;
  position: absolute;
  background-size: 100% 100%;
  right: 10px;
  top: 10px;
  left: 10px;
  bottom: 10px;
}
.btn-text {
  margin-left: 3px;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  margin-left: 30px;
  line-height: 29px;
}
.historyBtn {
  width: 20px;
  height: 20px;
  position: absolute;
  background-size: 100% 100%;
  background-position: center;
  padding: 2px;
  right: 10px;
  top: 10px;
}
.historyBtn1 {
  width: 20px;
  height: 20px;
  position: absolute;
  background-size: 100% 100%;
  background-position: center;
  left: 3px;
}
.divider0 {
  border-bottom: 1px solid #1074c1;
  width: auto;
  margin: 0 10px;
  height: 13%;
  display: block;
  background: transparent;
}
.foldBtn {
  width: 20px;
  height: 20px;
  position: absolute;
  background-size: 100% 100%;
  background-position: center;
  padding: 2px;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
}

.right-side {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  width: calc(100% - 134px) !important;
  .dialog-area {
    flex: 1; /* 占据剩余空间 */
    gap: 10px; /* 消息块间隔统一控制 */
    overflow-y: auto; /* 垂直滚动条 */
    padding: 5px;
    display: flex;
    flex-direction: column;
    color: #fff;

    .ask-message {
      padding: 10px;
      border-radius: 5px;
      background: #0c2842;
      max-width: 300px;
      white-space: pre-wrap;
      word-wrap: break-word;
      overflow-wrap: break-word;
      overflow: auto;
      line-height: 1.5;
    }
    .answer-message {
      padding: 10px;
      border-radius: 5px;
      background: #0c2842;
      max-width: 90%;
    }
  }

  .input-area {
    margin: 10px 10px 20px 10px;
    padding: 10px;
    background-color: #043256;
    border: 1px solid #2cb6ff;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 5px;
    height: 25%;
  }
  /* 文件列表容器 */
  .uploaded-files {
    padding: 8px;
    background-color: #f5f5f5;
    border-radius: 4px;
    min-height: 40px;
  }

  /* 单个文件项 */
  .file-item {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    margin-right: 8px;
    margin-bottom: 8px;
    background-color: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
  }

  /* 文件名 */
  .file-name {
    margin-left: 8px;
    margin-right: 8px;
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ant-input {
    border: none;
    background-color: rgba(255, 255, 255, 0) !important;
    color: #fff;
  }
  .ant-input:focus {
    border: none; /* 聚焦时无边框 */
    outline: none; /* 聚焦时无轮廓 */
    box-shadow: none; /* 移除可能存在的阴影效果 */
  }
  .ctrl-btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .question-input {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .question-input::placeholder {
    color: #64748b !important;
  }

  .control-btn {
    height: 25px;
    background-color: #043256;
    border: 1px solid #2cb6ff;
    color: #fff;
    font-size: 10px;
    margin-right: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease; /* 平滑过渡效果 */
  }
  /* 激活状态样式（点击后） */
  .control-btn.active {
    background-color: #2cb6ff; /* 蓝色背景（Ant Design 主色） */
    color: white; /* 白色文字 */
  }
  .control-btn1 {
    height: 20px;
    background-color: #234a6b;
    border: 1px solid #234a6b;
    color: #fff;
    font-size: 10px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .control-btn2 {
    height: 20px;
    background-color: #2cb6ff;
    border: 1px solid #2cb6ff;
    color: #fff;
    font-size: 10px;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.2s;
  }
  /* 文件上传区 */
  .file-upload {
    position: absolute;
    right: 20px;
    bottom: 70px;
    width: 180px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid #2cb6ff;
    background-color: #234a6b;
    border-radius: 6px;
    padding: 10px;
  }

  .input-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }

  .file-input {
    flex: 1;
    background-color: #234a6b;
    border-color: #2cb6ff !important;
    color: #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    padding-right: 70px !important;
    height: 36px !important;
    width: 100% !important;
  }

  .confirm-btn {
    position: absolute;
    right: 5px;
    background-color: #2cb6ff;
    border: none;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s;
    height: 28px;
  }

  .confirm-btn:hover {
    background-color: #2cb6ff;
  }

  .custom-upload {
    width: 100%;
    padding: 0 !important;
  }

  .upload-btn {
    background-color: #234a6b !important;
    border: 1px solid #2188c3 !important;
    color: #dbeafe !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 0 !important;
    width: 190% !important;
    height: 36px !important;
    box-sizing: border-box !important;
  }
  .upload-btn:hover {
    background-color: #1f84bd !important;
    color: #fff !important;
  }
  .custom-upload .ant-upload-select:hover .ant-btn {
    border-color: #1f84bd !important;
  }
  .message-wrapper.ai-message-wrapper {
    display: flex;
    align-items: flex-start;
  }
  .answerIcon {
    flex: 0 0 45px;
  }

  .suggestion-item {
    height: 30px;
    margin-left: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border: 1px solid #1890ff;
    color: white;
    border-radius: 4px;
    cursor: pointer;
    width: 33%;
    font-size: 12px;
  }
  .thinking-section {
    border-left: 3px solid #e5e7eb;
    padding-left: 12px;
    margin-bottom: 16px;
  }

  .thinking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
  }

  .thinking-title {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
  }
}
</style>
<style scoped>
.zxm-popover-inner-content {
  padding: 1px;
}
.message-wrapper {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.user-message-wrapper {
  flex-direction: row-reverse;
}
.ai-message-wrapper {
  flex-direction: row;
}
/* 复制图标样式 */
.copy-icon {
  font-size: 16px;
  cursor: pointer;
  margin: 4px 8px;
  color: #fff;
}
.message-wrapper:hover .copy-icon {
  opacity: 1;
}
.copy-icon:hover {
  color: #1890ff;
}
</style>