feat: support display thought chain for deepseek r1 (#597)

Signed-off-by: Bob Du <[email protected]>

Author: BobDu

service/src/chatgpt/index.ts

@@ -126,12 +126,16 @@ async function chatReplyProcess(options: RequestOptions) {
     })
 
     // Process the stream
+    let responseReasoning = ''
     let responseText = ''
     let responseId = ''
     const usage = new UsageResponse()
 
     for await (const chunk of stream) {
       // Extract the content from the chunk
+      // @ts-expect-error For deepseek-reasoner model only. The reasoning contents of the assistant message, before the final answer.
+      const reasoningContent = chunk.choices[0]?.delta?.reasoning_content || ''
+      responseReasoning += reasoningContent
       const content = chunk.choices[0]?.delta?.content || ''
       responseText += content
       responseId = chunk.id
@@ -141,6 +145,7 @@ async function chatReplyProcess(options: RequestOptions) {
       // Build response object similar to the original implementation
       const responseChunk = {
         id: chunk.id,
+        reasoning: responseReasoning,
         text: responseText,
         role: 'assistant',
         finish_reason,
@@ -159,6 +164,7 @@ async function chatReplyProcess(options: RequestOptions) {
     // Final response object
     const response = {
       id: responseId || messageId,
+      reasoning: responseReasoning,
       text: responseText,
       role: 'assistant',
       detail: {

service/src/chatgpt/types.ts

@@ -14,6 +14,7 @@ export interface ChatMessage {
 export interface ResponseChunk {
   id: string
   text: string
+  reasoning: string
   role: string
   finish_reason: string
 }

service/src/routes/chat.ts

@@ -83,6 +83,7 @@ router.get('/chat-history', auth, async (req, res) => {
         result.push({
           uuid: c.uuid,
           dateTime: new Date(c.dateTime).toLocaleString(),
+          reasoning: c.reasoning,
           text: c.response,
           inversion: false,
           error: false,
@@ -143,6 +144,7 @@ router.get('/chat-response-history', auth, async (req, res) => {
       data: {
         uuid: chat.uuid,
         dateTime: new Date(chat.dateTime).toLocaleString(),
+        reasoning: chat.reasoning,
         text: response.response,
         inversion: false,
         error: false,
@@ -295,6 +297,7 @@ router.post('/chat-process', [auth, limiter], async (req, res) => {
         const previousResponse = message.previousResponse || []
         previousResponse.push({ response: message.response, options: message.options })
         await updateChat(message._id as unknown as string,
+          result.data.reasoning,
           result.data.text,
           result.data.id,
           model,
@@ -303,6 +306,7 @@ router.post('/chat-process', [auth, limiter], async (req, res) => {
       }
       else {
         await updateChat(message._id as unknown as string,
+          result.data.reasoning,
           result.data.text,
           result.data.id,
           model,

service/src/storage/model.ts

@@ -121,6 +121,7 @@ export class ChatInfo {
   dateTime: number
   prompt: string
   images?: string[]
+  reasoning?: string
   response?: string
   status: Status = Status.Normal
   options: ChatOptions

service/src/storage/mongo.ts

@@ -93,10 +93,11 @@ export async function getChatByMessageId(messageId: string) {
   return await chatCol.findOne({ 'options.messageId': messageId })
 }
 
-export async function updateChat(chatId: string, response: string, messageId: string, model: string, usage: UsageResponse, previousResponse?: []) {
+export async function updateChat(chatId: string, reasoning: string, response: string, messageId: string, model: string, usage: UsageResponse, previousResponse?: []) {
   const query = { _id: new ObjectId(chatId) }
   const update = {
     $set: {
+      'reasoning': reasoning,
       'response': response,
       'model': model || '',
       'options.messageId': messageId,

src/typings/chat.d.ts

@@ -2,6 +2,7 @@ declare namespace Chat {
   interface Chat {
     uuid?: number
     dateTime: string
+    reasoning?: string
     text: string
     images?: string[]
     inversion?: boolean

src/views/chat/components/Message/Reasoning.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useBasicLayout } from '@/hooks/useBasicLayout'
+
+interface Props {
+  reasoning?: string
+  loading?: boolean
+}
+
+defineProps<Props>()
+
+const { isMobile } = useBasicLayout()
+
+const textRef = ref<HTMLElement>()
+
+const wrapClass = computed(() => {
+  return [
+    'text-wrap',
+    'min-w-[20px]',
+    'rounded-md',
+    isMobile.value ? 'p-2' : 'px-3 py-2',
+  ]
+})
+</script>
+
+<template>
+  <div class="text-black" :class="wrapClass">
+    <div ref="textRef" class="leading-relaxed break-words">
+      <div class="flex items-end">
+        <div class="w-full dark:text-gray-50 text-xs" v-text="reasoning" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+@import url(./style.less);
+</style>

src/views/chat/components/Message/index.vue

@@ -3,6 +3,7 @@ import { computed, ref } from 'vue'
 import { NButton, NButtonGroup, NDropdown, NPopover, NSpace, useMessage } from 'naive-ui'
 import AvatarComponent from './Avatar.vue'
 import TextComponent from './Text.vue'
+import Reasoning from './Reasoning.vue'
 import { SvgIcon } from '@/components/common'
 import { useIconRender } from '@/hooks/useIconRender'
 import { t } from '@/locales'
@@ -21,6 +22,7 @@ interface Props {
   currentNavIndex: number
   dateTime?: string
   model?: string
+  reasoning?: string
   text?: string
   images?: string[]
   isRecord?: boolean
@@ -223,6 +225,7 @@ function isEventTargetValid(event: any) {
           </template>
         </NSpace>
       </p>
+      <Reasoning v-if="reasoning" :reasoning="reasoning" :loading="loading" />
       <div
         class="flex items-end gap-1 mt-2"
         :class="[inversion ? 'flex-row-reverse' : 'flex-row']"

src/views/chat/index.vue

@@ -171,6 +171,7 @@ async function onConversation() {
               dataSources.value.length - 1,
               {
                 dateTime: new Date().toLocaleString(),
+                reasoning: data?.reasoning,
                 text: lastText + (data.text ?? ''),
                 inversion: false,
                 error: false,
@@ -318,6 +319,7 @@ async function onRegenerate(index: number) {
               index,
               {
                 dateTime: new Date().toLocaleString(),
+                reasoning: data?.reasoning,
                 text: lastText + (data.text ?? ''),
                 inversion: false,
                 responseCount,
@@ -386,6 +388,7 @@ async function onResponseHistory(index: number, historyIndex: number) {
     index,
     {
       dateTime: chat.dateTime,
+      reasoning: chat?.reasoning,
       text: chat.text,
       inversion: false,
       responseCount: chat.responseCount,
@@ -683,6 +686,7 @@ onUnmounted(() => {
                   :index="index"
                   :current-nav-index="currentNavIndexRef"
                   :date-time="item.dateTime"
+                  :reasoning="item?.reasoning"
                   :text="item.text"
                   :images="item.images"
                   :inversion="item.inversion"