agilebuilder-ui 1.1.50-sit4 → 1.1.51

package/packages/chat-embed/src/index.vue

@@ -17,11 +17,12 @@
         <!-- <div ref="talkMainRef" :key="talkMainRefKey" class="chat-embed__main"> -->
         <div ref="talkMainRef" class="chat-embed__main" :key="talkMainRefKey">
           <div class="chat-embed__main_content">
-            <BubbleList :list="messageList" :max-height="bubbleMaxHeight" :is-fog="true">
+            <BubbleList ref="bubbleListRef" :list="messageList" :max-height="bubbleMaxHeight" :is-fog="true">
               <template #content="{ item }">
                 <template v-if="!item.isRecommend && item.thinkingContent !== null">
                   <!-- ai消息正在回复中 -->
                   <Thinking
+                    v-if="item.messageStatus !== 'failed'"
                     style="margin-bottom: 5px"
                     v-model="item.showThinkingContent"
                     :status="item.thinkingStatus"
@@ -40,42 +41,27 @@
                     :class="item.role === 'ai' ? 'content-container' : 'content-borderless-container'"
                     :style="{ maxWidth: bubbleMaxWidth }"
                   >
-                    <Typewriter
-                      v-if="item.role === 'ai' && !item.isRecommend"
-                      :content="item.content"
-                      :typing="{ interval: 10 }"
-                      :is-markdown="true"
-                    />
+                    <template v-if="item.role === 'ai' && !item.isRecommend">
+                      <Typewriter
+                        :content="item.content"
+                        :typing="item.messageType === 'history' ? false : { interval: 10 }"
+                        @finish="finishedAnswer($event, item)"
+                        :is-markdown="true"
+                      />
+                    </template>
                     <template v-else-if="item.role === 'user'">
                       {{ item.content }}
                       <template v-if="item.additionalData?.length > 0">
                         <el-divider border-style="dashed" />
-                        <el-tag type="primary">
+                        <el-tag type="primary" style="width: 100%">
                           <template #default>
-                            <div
-                              style="
-                                display: flex;
-                                align-items: center;
-                                flex-shrink: 0;
-                                min-width: max-content;
-                                margin-left: auto;
-                                gap: 10px;
-                              "
-                            >
+                            <div class="additional-data-tag">
                               <el-icon><Paperclip /></el-icon>
                               {{ item.additionalDataLabel }}
                             </div>
                           </template>
                         </el-tag>
-                        <div
-                          style="
-                            display: flex;
-                            align-items: center;
-                            justify-content: center;
-                            margin-top: 10px;
-                            gap: 10px;
-                          "
-                        >
+                        <div class="additional-data-button">
                           <el-button plain round size="small" @click="viewJson(item.additionalData)">
                             <el-icon><View /></el-icon> <span>预览数据</span>
                           </el-button>
@@ -91,6 +77,9 @@
                       </template>
                     </template>
                     <template v-else> {{ item.content }} </template>
+                    <div style="font-size: 10px; color: #999; text-align: right">
+                      <span>{{ item.sendTime }}</span>
+                    </div>
                   </div>
                   <template v-if="item.recommendations && item.recommendations.length > 0">
                     <!-- 推荐内容的消息 -->
@@ -100,34 +89,38 @@
               </template>
               <template #footer="{ item }">
                 <div
+                  class="footer-wrapper"
                   v-if="item.role === 'ai' && !item.isRecommend && item.thinkingStatus !== 'thinking'"
-                  class="footer-container"
                 >
-                  <el-tooltip class="box-item" effect="dark" :content="$t('chatEmbed.regenerate')">
-                    <el-button type="info" :icon="Refresh" size="small" circle @click="regenerateQuestion(item)" />
-                  </el-tooltip>
-                  <el-tooltip class="box-item" effect="dark" :content="$t('chatEmbed.copy')">
-                    <el-button
-                      type="info"
-                      color="#626aef"
-                      :icon="DocumentCopy"
-                      size="small"
-                      circle
-                      @click="cpoyContent(item)"
-                    />
-                  </el-tooltip>
+                  <div class="footer-container">
+                    <el-tooltip class="box-item" effect="dark" :content="$t('chatEmbed.regenerate')">
+                      <el-button type="info" :icon="Refresh" size="small" circle @click="regenerateQuestion(item)" />
+                    </el-tooltip>
+                    <el-tooltip class="box-item" effect="dark" :content="$t('chatEmbed.copy')">
+                      <el-button
+                        type="info"
+                        color="#626aef"
+                        :icon="DocumentCopy"
+                        size="small"
+                        circle
+                        @click="cpoyContent(item)"
+                      />
+                    </el-tooltip>
+                  </div>
                 </div>
               </template>
             </BubbleList>
+            <div style="display: none">{{ content }}</div>
           </div>
           <!-- 对话输入框 -->
           <div ref="talkInputRef" class="chat-embed__input_container">
             <ChatSender
               :loading="loading"
-              @submit-question="sendQuestion"
+              @submit-question="submitQuestion"
               @new-chat-session="newChatSession"
               @handle-cancel="handleCancel"
               @view-json="viewJson"
+              @change-ai-model="changeAiModel"
             />
           </div>
         </div>
@@ -137,58 +130,127 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Refresh, DocumentCopy } from '@element-plus/icons-vue'
 import { BubbleList, Thinking, useXStream, Typewriter } from 'vue-element-plus-x'
+import { BubbleProps } from 'vue-element-plus-x/types/Bubble'
 import { useDraggable } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
+import { getToken } from '../../../src/utils/auth'
 import { getMessageTemplate, defaultMessage } from './chat-embed-message'
 import RecommendationMessage from './recommendation-message.vue'
-import { BubbleProps } from 'vue-element-plus-x/types/Bubble'
-import { useI18n } from 'vue-i18n'
 import Header from './header.vue'
 import ChatSender from './chat-sender.vue'
 import { JsonViewDialog } from '../../json-view'
 import { generateFileName, downloadJsonFile } from './util.ts'
 
-const enableAiChat = ref(false)
-if (window.$vueApp.config.globalProperties.enableAiChat) {
-  enableAiChat.value = true
+// 类型定义
+interface MessageItem {
+  role: 'ai' | 'user'
+  content: string
+  messageType?: 'history' | 'realtime'
+  messageStatus?: 'failed' | 'success'
+  thinkingStatus?: 'thinking' | 'end'
+  thinkingContent?: string
+  showThinkingContent?: boolean
+  isRecommend?: boolean
+  sendTime?: string
+  question?: string
+  additionalData?: any[]
+  additionalDataLabel?: string
+  menuName?: string
+  menuCode?: string
+  askAdditionalData?: any[]
+  recommendations?: any[]
 }
 
+interface SubmitData {
+  question: string
+  additionalData?: any[]
+  additionalDataLabel?: string
+  menuName?: string
+  menuCode?: string
+  aiModel?: string
+}
+
+// 常量定义
+const AI_MODELS = {
+  DEEPSEEK: 'deepseek',
+  RAGFLOW: 'ragflow',
+  DATABASE: 'database'
+} as const
+
+const MESSAGE_STATUS = {
+  THINKING: 'thinking',
+  END: 'end',
+  FAILED: 'failed'
+} as const
+
+// 初始化
+const enableAiChat = ref(window.$vueApp?.config?.globalProperties?.enableAiChat || false)
+const { startStream, cancel, data, error, isLoading } = useXStream()
 const { t } = useI18n()
 const chatIcon = ref()
-let isActualClick = ref(true)
-const isActualClickTimer = ref(null)
+const isActualClick = ref(true)
 
+// 聊天内容状态
+const messageList = ref<MessageItem[]>([])
+const answerContent = ref<MessageItem>({} as MessageItem)
+const session_id = ref<string | null>(null)
+const ragflowSession_id = ref<string | null>(null)
+const loading = ref(false)
+const currentAiModel = ref<string>(AI_MODELS.RAGFLOW)
+const aiModelAnswerHistory: Record<string, MessageItem[]> = {}
+
+// UI状态
+const showChatVisable = ref(false)
+const dialogFullScreen = ref(false)
+const talkMainRefKey = ref(0)
+const bubbleMaxWidth = ref('')
+const bubbleMaxHeight = ref('500px')
+const aiAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
+
+// 弹窗状态
 const jsonDialogVisible = ref(false)
 const jsonObject = ref({})
 
+// DOM引用
+const bubbleListRef = ref()
+const talkInputRef = ref()
+const chatContainerRef = ref()
+const talkMainRef = ref()
+
+// 流式处理状态
+const isStreamActive = ref(false)
+let abortController: AbortController | null = null
+
+// 拖拽功能设置
 const initialX = document.documentElement.clientWidth - 100
 const initialY = document.documentElement.clientHeight - 100
 const { x, y, style } = useDraggable(chatIcon, {
-  // 聊天图标的初始位置
   initialValue: { x: initialX, y: initialY },
   preventDefault: true,
   onStart() {
-    // 拖拽开始时重置状态
     isActualClick.value = true
   },
   onMove(position) {
     isActualClick.value = false
-    // 限制拖拽范围 防止拖出屏幕外
-    const maxX = window.innerWidth - chatIcon.value.offsetWidth
-    const maxY = window.innerHeight - chatIcon.value.offsetHeight
-    position.x = Math.max(0, Math.min(position.x, maxX))
-    position.y = Math.max(0, Math.min(position.y, maxY))
+    constrainPosition(position)
   },
   onEnd() {
     adjustChatIconPosition()
-    // 延迟重置确保 click 事件先处理
     setTimeout(() => (isActualClick.value = true), 50)
   }
 })
 
+function constrainPosition(position: { x: number; y: number }) {
+  const maxX = window.innerWidth - (chatIcon.value?.offsetWidth || 0)
+  const maxY = window.innerHeight - (chatIcon.value?.offsetHeight || 0)
+  position.x = Math.max(0, Math.min(position.x, maxX))
+  position.y = Math.max(0, Math.min(position.y, maxY))
+}
+
 function adjustChatIconPosition() {
   if (!chatIcon.value) return
   const maxX = window.innerWidth - chatIcon.value.offsetWidth
@@ -197,34 +259,24 @@ function adjustChatIconPosition() {
   if (y.value > maxY) y.value = maxY
 }
 
-const talkInputRef = ref()
-// 显示聊天窗口的状态
-const showChatVisable = ref(false)
-// 聊天窗口的引用
-const chatContainerRef = ref()
-// 聊天窗口主区域的引用
-const talkMainRef = ref()
-// 聊天输入框状态
-const loading = ref(false)
-// 聊天窗口是否全屏
-const dialogFullScreen = ref(false)
-
-const talkMainRefKey = ref(0)
-
-const bubbleMaxWidth = ref('')
-const bubbleMaxHeight = ref('500px')
+function resetChat(aiModel: string) {
+  currentAiModel.value = aiModel
+  messageList.value = []
+  if (!aiModelAnswerHistory[aiModel]) {
+    messageList.value.push(defaultMessage)
+  } else {
+    messageList.value = aiModelAnswerHistory[aiModel]
+    bubbleListRef.value?.scrollToBottom()
+  }
+}
 
-const aiAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')
+function showError(message: string = t('chatEmbed.requestFailed')) {
+  messageList.value.push(getMessageTemplate('ai', message, false))
+  loading.value = false
+}
 
-// 聊天内容
-const messageList: any = ref([])
-// 默认ai提示消息
-messageList.value.push(defaultMessage)
-// messageList.value.push(getMessageTemplate('user', '11111111111', true))
-// 正在生成的ai消息
-const answerContent: any = ref({})
-// 后端会话session_id
-const session_id = ref(null)
+// 初始化聊天
+resetChat(currentAiModel.value)
 
 onMounted(() => {
   window.addEventListener('resize', adjustChatIconPosition)
@@ -232,13 +284,19 @@ onMounted(() => {
 
 onUnmounted(() => {
   window.removeEventListener('resize', adjustChatIconPosition)
-  // 清除定时器
-  if (isActualClickTimer.value) {
-    clearTimeout(isActualClickTimer.value)
-  }
+  cleanup()
 })
 
-// 处理聊天窗口的显示和隐藏
+function cleanup() {
+  if (abortController) {
+    abortController.abort()
+    abortController = null
+  }
+  cancel()
+  isStreamActive.value = false
+  loading.value = false
+}
+// 聊天相关方法
 function showChatDialog() {
   if (isActualClick.value) {
     showChatVisable.value = !showChatVisable.value
@@ -249,63 +307,267 @@ function showChatDialog() {
   }
 }
 
-const { cancel, data } = useXStream()
-
-// 发送聊天内容
-function sendQuestion(submitData: any) {
-  const question = submitData.question
-  if (!question) {
-    return
-  }
-  data.value = []
-  const message = getMessageTemplate('user', question, true)
-  if (submitData.additionalData && submitData.additionalData.length > 0) {
-    message.additionalData = submitData.additionalData
-    message.additionalDataLabel = submitData.additionalDataLabel
-    message.menuName = submitData.menuName
-    message.menuCode = submitData.menuCode
+function createUserMessage(submitData: SubmitData): MessageItem {
+  const message = getMessageTemplate('user', submitData.question, true) as MessageItem
+  if (submitData.additionalData?.length) {
+    Object.assign(message, {
+      additionalData: submitData.additionalData,
+      additionalDataLabel: submitData.additionalDataLabel,
+      menuName: submitData.menuName,
+      menuCode: submitData.menuCode
+    })
   }
-  messageList.value.push(message)
-  // console.log('submit', question)
-  loading.value = true
+  return message
+}
+
+function createAiMessage(submitData: SubmitData): MessageItem {
+  const message = getMessageTemplate('ai', '', false) as MessageItem
+  return Object.assign(message, {
+    thinkingStatus: MESSAGE_STATUS.THINKING,
+    question: submitData.question,
+    menuName: submitData.menuName,
+    menuCode: submitData.menuCode,
+    askAdditionalData: submitData.additionalData
+  })
+}
+
+function initializeSession(): string {
   if (!session_id.value) {
     session_id.value = new Date().getTime().toString()
   }
-  // 创建一个新的消息对象
-  answerContent.value = getMessageTemplate('ai', '', false)
-  // 设置消息的状态为正在思考 并存下历史的 question信息
-  answerContent.value.thinkingStatus = 'thinking'
-  answerContent.value.question = question
-  answerContent.value.menuName = submitData.menuName
-  answerContent.value.menuCode = submitData.menuCode
-  answerContent.value.askAdditionalData = submitData.additionalData
-  messageList.value.push(answerContent.value)
+  return session_id.value
+}
+
+async function sendDeepSeekQuestion(submitData: SubmitData) {
+  if (!submitData.question) return
+
   try {
-    window.$vueApp.config.globalProperties.$http
-      .post(window.$vueApp.config.globalProperties.baseAPI + '/component/ai/multiple-fuck', {
-        question: question,
+    // 添加用户消息
+    const userMessage = createUserMessage(submitData)
+    messageList.value.push(userMessage)
+    isStreamActive.value = true
+    // 初始化状态
+    loading.value = true
+    initializeSession()
+    // 创建AI响应消息
+    answerContent.value = createAiMessage(submitData)
+    messageList.value.push(answerContent.value)
+
+    abortController = new AbortController()
+
+    const token = getToken()
+    const response = await fetch(window.$vueApp.config.globalProperties.baseAPI + '/component/ai/multiple-fuck', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json', authorization: token },
+      body: JSON.stringify({
+        question: submitData.question,
         messageId: session_id.value,
         data: JSON.stringify(submitData.additionalData)
-      })
-      .then((res) => {
-        // 创建一个新的消息对象
-        answerContent.value.thinkingStatus = 'end'
-        answerContent.value.content = res
-        answerContent.value = {}
-        loading.value = false
-      })
+      }),
+      signal: abortController.signal // 绑定 abort 信号
+    })
+    if (!response.body) {
+      throw new Error('No response body')
+    }
+    await startStream({ readableStream: response.body })
   } catch (err) {
-    console.error('Fetch error:', err)
-    messageList.push(getMessageTemplate('ai', t('chatEmbed.requestFailed'), false))
+    console.error('DeepSeek error:', err)
+    showError()
+  }
+}
+
+function sendRagflowQuestion(question: string | undefined) {
+  if (!question) return
+
+  data.value = []
+  messageList.value.push(getMessageTemplate('user', question, true))
+  loading.value = true
+
+  if (!ragflowSession_id.value) {
+    createRagflowSession(question)
+  } else {
+    startSSE(question)
+  }
+}
+
+async function createRagflowSession(question: string) {
+  try {
+    const response = await window.$vueApp.config.globalProperties.$http.post(
+      window.$vueApp.config.globalProperties.baseAPI + '/mc/rag-flow/converse-with-chat',
+      { question }
+    )
+    ragflowSession_id.value = response.session_id
+    startSSE(question)
+  } catch (err) {
+    console.error('Failed to create session:', err)
+    showError()
+  }
+}
+
+async function startSSE(question: string) {
+  try {
+    answerContent.value = createAiMessage({ question } as SubmitData)
+    messageList.value.push(answerContent.value)
+
+    // 创建新的 AbortController 用于 SSE 请求
+    abortController = new AbortController()
+
+    const token = getToken()
+    const response = await fetch(
+      window.$vueApp.config.globalProperties.baseAPI + '/mc/rag-flow/converse-with-chat-stream',
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'text/event-stream', authorization: token },
+        body: JSON.stringify({
+          question,
+          stream: true,
+          session_id: ragflowSession_id.value
+        }),
+        signal: abortController.signal // 绑定 abort 信号
+      }
+    )
+
+    if (!response.body) {
+      throw new Error('No response body')
+    }
+
+    await startStream({ readableStream: response.body })
+  } catch (err: any) {
+    if (err?.name === 'AbortError') {
+      console.log('SSE request was cancelled')
+      return
+    }
+    console.error('SSE error:', err)
     loading.value = false
   }
 }
+// 优化的计算属性 - 减少不必要的重新计算
+const content = computed(() => {
+  if (!isStreamActive.value || !data.value.length) {
+    return ''
+  }
+
+  return processStreamData()
+})
+
+function processStreamData(): string {
+  let text = ''
+  // 获取data.value的最后一条
+  const item = data.value[data.value.length - 1]
+  try {
+    const responseMessage = JSON.parse(item.data)
+    if (responseMessage.isChunk) {
+      // 主要是百练ai后端处理的数据
+      if (responseMessage.data === true) {
+        answerContent.value.thinkingStatus = MESSAGE_STATUS.END
+        answerContent.value.showThinkingContent = true
+        answerContent.value = {} as MessageItem
+        loading.value = false
+      } else {
+        updateStreamContent(responseMessage)
+      }
+    } else {
+      if (!responseMessage.data?.id) {
+        finishStreamProcessing()
+        return text
+      }
+
+      if (responseMessage.data === true || responseMessage.data?.created_at) {
+        finishStreamWithAnswer(responseMessage.data.answer)
+        return text
+      }
+      updateStreamContent(responseMessage)
+    }
+  } catch (error) {
+    console.error('解析数据时出错:', error)
+    loading.value = false
+  }
+
+  return text
+}
+
+function finishStreamProcessing() {
+  loading.value = false
+  if (answerContent.value) {
+    answerContent.value.thinkingStatus = MESSAGE_STATUS.END
+  }
+}
+
+function finishStreamWithAnswer(answer: string) {
+  loading.value = false
+  if (!answerContent.value) return
+
+  answerContent.value.thinkingStatus = MESSAGE_STATUS.END
+  answerContent.value.showThinkingContent = true
 
-// 处理聊天内容的取消
+  const { thinkingContent, mainContent } = parseAnswerContent(answer)
+  answerContent.value.thinkingContent = thinkingContent
+  answerContent.value.content = mainContent
+  answerContent.value = {} as MessageItem
+}
+
+function parseAnswerContent(answer: string): { thinkingContent: string; mainContent: string } {
+  if (answer.startsWith('<think>')) {
+    const thinkEndIndex = answer.indexOf('</think>')
+    return {
+      thinkingContent: answer.substring(7, thinkEndIndex), // 7 is length of '<think>'
+      mainContent: answer.substring(thinkEndIndex + 8) // 8 is length of '</think>'
+    }
+  }
+  return { thinkingContent: '', mainContent: answer }
+}
+
+function updateStreamContent(responseMessage: any) {
+  const answer = responseMessage.data.answer
+  if (!answer || !answerContent.value) return
+
+  const { thinkingContent, mainContent } = parseAnswerContent(answer)
+
+  if (thinkingContent) {
+    answerContent.value.thinkingContent = thinkingContent
+  }
+  if (mainContent) {
+    if (responseMessage.isChunk) {
+      answerContent.value.content += mainContent
+    } else {
+      answerContent.value.content = mainContent
+    }
+  }
+}
+
+// 取消操作的统一处理
 function handleCancel() {
   loading.value = false
-  messageList.value[messageList.value.length - 1].thinkingStatus = 'end'
-  cancel()
+
+  // 取消网络请求
+  if (abortController) {
+    abortController.abort()
+    abortController = null
+  }
+
+  // 取消流式处理
+  if (isStreamActive.value) {
+    cancel() // 调用 useXStream 的 cancel 方法
+    isStreamActive.value = false
+
+    // 更新最后一条 AI 消息的状态
+    if (messageList.value.length > 0) {
+      const lastMessage = messageList.value[messageList.value.length - 1]
+      if (lastMessage && lastMessage.role === 'ai') {
+        lastMessage.thinkingStatus = MESSAGE_STATUS.END
+        // 如果消息内容为空，可以添加一个取消的提示
+        if (!lastMessage.content) {
+          lastMessage.content = '回答已取消'
+        }
+      }
+    }
+  }
+
+  // 重置答案内容
+  if (answerContent.value && Object.keys(answerContent.value).length > 0) {
+    answerContent.value.thinkingStatus = MESSAGE_STATUS.END
+    answerContent.value = {} as MessageItem
+  }
 }
 
 // 处理聊天窗口的全屏和缩小
@@ -326,7 +588,6 @@ function setHeightAndWidth() {
   // talkMainRef.value.style.height = `calc(${heightVh}vh - var(--header-height) - var(--chat-padding) * 2)`
   const talkHeight = talkInputRef.value.offsetHeight
   // alert(`talkHeight: ${talkHeight}`)
-  // bubbleMaxHeight.value = `calc(${heightVh}vh - var(--header-height) - var(--chat-padding) * 5 - 144px)`
   nextTick(() => {
     const talkHeight = talkInputRef.value?.offsetHeight || 80
     // 定义具体的像素值
@@ -338,21 +599,54 @@ function setHeightAndWidth() {
   })
 }
 
-// 点击推荐内容的处理函数
-// 这里可以根据需要进行处理，比如发送请求、更新状态等
-function clickRecommendation(item: BubbleProps) {
-  console.log('clickRecommendation', item)
-  sendQuestion(item.content)
+function submitQuestion(submitData: SubmitData) {
+  // 先取消之前的请求
+  if (loading.value) {
+    handleCancel()
+  }
+
+  isStreamActive.value = false
+  switch (submitData.aiModel) {
+    case AI_MODELS.DEEPSEEK:
+      isStreamActive.value = true
+      sendDeepSeekQuestion(submitData)
+      break
+    case AI_MODELS.RAGFLOW:
+      isStreamActive.value = true
+      sendRagflowQuestion(submitData.question)
+      break
+    case AI_MODELS.DATABASE:
+      ElMessage({
+        message: '数据库类问答功能开发中，敬请期待',
+        type: 'warning'
+      })
+      break
+    default:
+      console.warn('Unknown AI model:', submitData.aiModel)
+  }
 }
 
-function regenerateQuestion(answerData) {
-  sendQuestion({
+function regenerateQuestion(answerData: any) {
+  const submitData: SubmitData = {
     question: answerData.question,
     additionalData: answerData.additionalData,
     additionalDataLabel: answerData.additionalDataLabel,
     menuName: answerData.menuName,
-    menuCode: answerData.menuCode
-  })
+    menuCode: answerData.menuCode,
+    aiModel: currentAiModel.value
+  }
+  sendDeepSeekQuestion(submitData)
+}
+
+function clickRecommendation(item: BubbleProps) {
+  console.log('clickRecommendation', item)
+  if (item.content) {
+    const submitData: SubmitData = {
+      question: item.content,
+      aiModel: currentAiModel.value
+    }
+    sendDeepSeekQuestion(submitData)
+  }
 }
 
 function cpoyContent(item: BubbleProps) {
@@ -369,33 +663,46 @@ function cpoyContent(item: BubbleProps) {
 }
 
 function newChatSession() {
-  // 清空聊天记录
   messageList.value = []
-  if (session_id.value) {
-    try {
-      window.$vueApp.config.globalProperties.$http
-        .post(window.$vueApp.config.globalProperties.baseAPI + '/component/ai/multiple-fuck/clear/' + session_id.value)
-        .then((res) => {
-          //
-        })
-    } catch (err) {
-      console.error('Fetch error:', err)
-      messageList.push(getMessageTemplate('ai', t('chatEmbed.requestFailed'), false))
-      loading.value = false
-    }
+
+  // 清理会话（仅对DeepSeek模型）
+  if (session_id.value && currentAiModel.value === AI_MODELS.DEEPSEEK) {
+    clearDeepSeekSession()
   }
+
+  // 重置状态
   session_id.value = null
-  // 重置加载状态
   loading.value = false
-  messageList.value.push(defaultMessage)
+  aiModelAnswerHistory[currentAiModel.value] = []
+  resetChat(currentAiModel.value)
 }
 
+async function clearDeepSeekSession() {
+  try {
+    await (window as any).$vueApp.config.globalProperties.$http.post(
+      (window as any).$vueApp.config.globalProperties.baseAPI + '/component/ai/multiple-fuck/clear/' + session_id.value
+    )
+  } catch (err) {
+    console.error('Failed to clear session:', err)
+    showError()
+  }
+}
+
+function changeAiModel(newModel: string) {
+  aiModelAnswerHistory[currentAiModel.value] = JSON.parse(JSON.stringify(messageList.value))
+  resetChat(newModel)
+}
+
+function finishedAnswer(event: any, item: any) {
+  item.messageType = 'history'
+}
+
+// JSON 相关操作
 function viewJson(viewData: any) {
   jsonObject.value = viewData
   jsonDialogVisible.value = true
 }
 
-// 下载 JSON 数据功能
 function downloadJsonData(data: any, fileName: string) {
   try {
     downloadJsonFile(data, generateFileName(fileName || 'data'))
@@ -422,4 +729,42 @@ h4 {
 :deep(.el-divider--horizontal) {
   margin: 5px 0;
 }
+.additional-data-tag {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  min-width: max-content;
+  margin-left: auto;
+  gap: 10px;
+}
+.additional-data-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 10px;
+  gap: 10px;
+}
+.footer-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+
+  .footer-time {
+    font-size: 10px;
+    color: #999;
+    margin-top: 3px;
+    flex-shrink: 0;
+  }
+}
+
+.footer-container {
+  display: flex;
+  gap: 8px;
+
+  :deep(.el-button + .el-button) {
+    margin-left: 0;
+  }
+}
 </style>