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

pull/814/MERGE
YunaiV 2025-08-23 22:52:43 +08:00
parent c93c70a3cb
commit 561e5512f9
4 changed files with 126 additions and 9 deletions

View File

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

View File

@ -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'

View File

@ -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>

View File

@ -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()
//