feat：【ai 大模型】增加 thinking 深度思考

src/api/ai/chat/message/index.ts

@@ -13,6 +13,7 @@ export interface ChatMessageVO {
   model: number // 模型标志
   modelId: number // 模型编号
   content: string // 聊天内容
+  reasoningContent?: string // 推理内容
   tokens: number // 消耗 Token 数量
   segmentIds?: number[] // 段落编号
   segments?: {

src/views/ai/chat/index/components/message/MessageList.vue

@@ -14,6 +14,10 @@
             class="relative flex flex-col break-words bg-[var(--el-fill-color-light)] shadow-[0_0_0_1px_var(--el-border-color-light)] rounded-10px pt-10px px-10px pb-5px"
             ref="markdownViewRef"
           >
+            <MessageReasoning
+              :reasoning-content="item.reasoningContent || ''"
+              :content="item.content || ''"
+            />
             <MarkdownView
               class="text-[var(--el-text-color-primary)] text-[0.95rem]"
               :content="item.content"
@@ -51,8 +55,9 @@
           <div class="flex flex-row-reverse">
             <div
               class="text-[0.95rem] text-[var(--el-color-white)] inline bg-[var(--el-color-primary)] shadow-[0_0_0_1px_var(--el-color-primary)] rounded-10px p-10px w-auto break-words whitespace-pre-wrap"
-              >{{ item.content }}</div
             >
+              {{ item.content }}
+            </div>
           </div>
           <div class="flex flex-row-reverse mt-8px">
             <el-button
@@ -98,6 +103,7 @@ import { PropType } from 'vue'
 import { formatDate } from '@/utils/formatTime'
 import MarkdownView from '@/components/MarkdownView/index.vue'
 import MessageKnowledge from './MessageKnowledge.vue'
+import MessageReasoning from './MessageReasoning.vue'
 import { useClipboard } from '@vueuse/core'
 import { ArrowDownBold, Edit, RefreshRight } from '@element-plus/icons-vue'
 import { ChatMessageApi, ChatMessageVO } from '@/api/ai/chat/message'

src/views/ai/chat/index/components/message/MessageReasoning.vue

@@ -0,0 +1,89 @@
+<template>
+  <div v-if="shouldShowComponent" class="mt-10px">
+    <!-- 推理过程标题栏 -->
+    <div
+      class="flex items-center justify-between cursor-pointer p-8px rounded-t-8px bg-gradient-to-r from-blue-50 to-purple-50 border border-b-0 border-gray-200/60 hover:from-blue-100 hover:to-purple-100 transition-all duration-200"
+      @click="toggleExpanded"
+    >
+      <div class="flex items-center gap-6px text-14px font-medium text-gray-700">
+        <el-icon :size="16" class="text-blue-600">
+          <ChatDotSquare />
+        </el-icon>
+        <span>{{ titleText }}</span>
+      </div>
+      <el-icon
+        :size="14"
+        class="text-gray-500 transition-transform duration-200"
+        :class="{ 'transform rotate-180': isExpanded }"
+      >
+        <ArrowDown />
+      </el-icon>
+    </div>
+
+    <!-- 推理内容区域 -->
+    <div
+      v-show="isExpanded"
+      class="max-h-300px overflow-y-auto p-12px bg-white/70 backdrop-blur-sm border border-t-0 border-gray-200/60 rounded-b-8px shadow-sm"
+    >
+      <MarkdownView
+        v-if="props.reasoningContent"
+        class="text-gray-700 text-13px leading-relaxed"
+        :content="props.reasoningContent"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { ArrowDown, ChatDotSquare } from '@element-plus/icons-vue'
+import MarkdownView from '@/components/MarkdownView/index.vue'
+
+// 定义 props
+const props = defineProps<{
+  reasoningContent?: string
+  content?: string
+}>()
+
+const isExpanded = ref(true) // 默认展开
+
+/** 计算属性：判断是否应该显示组件（有思考内容时，则展示） */
+const shouldShowComponent = computed(() => {
+  return !(!props.reasoningContent || props.reasoningContent.trim() === '')
+})
+
+/** 计算属性：标题文本 */
+const titleText = computed(() => {
+  const hasReasoningContent = props.reasoningContent && props.reasoningContent.trim() !== ''
+  const hasContent = props.content && props.content.trim() !== ''
+  if (hasReasoningContent && !hasContent) {
+    return '深度思考中'
+  }
+  return '已深度思考'
+})
+
+/** 切换展开/收缩状态 */
+const toggleExpanded = () => {
+  isExpanded.value = !isExpanded.value
+}
+</script>
+
+<style scoped>
+/* 自定义滚动条样式 */
+.max-h-300px::-webkit-scrollbar {
+  width: 4px;
+}
+
+.max-h-300px::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.max-h-300px::-webkit-scrollbar-thumb {
+  background: rgba(156, 163, 175, 0.4);
+  border-radius: 2px;
+}
+
+.max-h-300px::-webkit-scrollbar-thumb:hover {
+  background: rgba(156, 163, 175, 0.6);
+}
+</style>

src/views/ai/chat/index/index.vue

@@ -2,7 +2,7 @@
   <el-container class="absolute flex-1 top-0 left-0 h-full w-full">
     <!-- 左侧：对话列表 -->
     <ConversationList
-      :active-id="activeConversationId"
+      :active-id="activeConversationId?.toString() || ''"
       ref="conversationListRef"
       @on-conversation-create="handleConversationCreateSuccess"
       @on-conversation-click="handleConversationClick"
@@ -56,7 +56,7 @@
             />
             <!-- 情况四：消息列表不为空 -->
             <MessageList
-              v-if="!activeMessageListLoading && messageList.length > 0"
+              v-if="!activeMessageListLoading && messageList.length > 0 && activeConversation"
               ref="messageRef"
               :conversation="activeConversation"
               :list="messageList"
@@ -285,9 +285,18 @@ const messageList = computed(() => {
     return [
       {
         id: 0,
+        conversationId: activeConversation.value.id || 0,
         type: 'system',
-        content: activeConversation.value.systemMessage
-      }
+        userId: '',
+        roleId: '',
+        model: 0,
+        modelId: 0,
+        content: activeConversation.value.systemMessage,
+        tokens: 0,
+        createTime: new Date(),
+        roleAvatar: '',
+        userAvatar: ''
+      } as ChatMessageVO
     ]
   }
   return []
@@ -427,6 +436,7 @@ const doSendMessageStream = async (userMessage: ChatMessageVO) => {
       conversationId: activeConversationId.value,
       type: 'assistant',
       content: '思考中...',
+      reasoningContent: '',
       createTime: new Date()
     } as ChatMessageVO)
     // 1.2 滚动到最下面
@@ -450,9 +460,10 @@ const doSendMessageStream = async (userMessage: ChatMessageVO) => {
         }
 
         // 如果内容为空，就不处理。
-        if (data.receive.content === '') {
+        if (data.receive.content === '' && !data.receive.reasoningContent) {
           return
         }
+
         // 首次返回需要添加一个 message 到页面，后面的都是更新
         if (isFirstChunk) {
           isFirstChunk = false
@@ -463,12 +474,22 @@ const doSendMessageStream = async (userMessage: ChatMessageVO) => {
           activeMessageList.value.push(data.send)
           activeMessageList.value.push(data.receive)
         }
-        // debugger
-        receiveMessageFullText.value = receiveMessageFullText.value + data.receive.content
+
+        // 处理 reasoningContent
+        if (data.receive.reasoningContent) {
+          const lastMessage = activeMessageList.value[activeMessageList.value.length - 1]
+          lastMessage.reasoningContent =
+            lastMessage.reasoningContent + data.receive.reasoningContent
+        }
+
+        // 处理正常内容
+        if (data.receive.content !== '') {
+          receiveMessageFullText.value = receiveMessageFullText.value + data.receive.content
+        }
         // 滚动到最下面
         await scrollToBottom()
       },
-      (error) => {
+      (error: any) => {
         message.alert(`对话异常! ${error}`)
         stopStream()
         // 需要抛出异常，禁止重试