feat:【ai 大模型】增加 thinking 深度思考
parent
c93c70a3cb
commit
561e5512f9
|
@ -13,6 +13,7 @@ export interface ChatMessageVO {
|
|||
model: number // 模型标志
|
||||
modelId: number // 模型编号
|
||||
content: string // 聊天内容
|
||||
reasoningContent?: string // 推理内容
|
||||
tokens: number // 消耗 Token 数量
|
||||
segmentIds?: number[] // 段落编号
|
||||
segments?: {
|
||||
|
|
|
@ -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'
|
||||
|
|
|
@ -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>
|
|
@ -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()
|
||||
// 需要抛出异常,禁止重试
|
||||
|
|
Loading…
Reference in New Issue