feat: 首页推理内容展示

src/views/home/components/message-item.vue

 <script setup lang="ts">
-import { computed, readonly } from 'vue'
-import { CheckOne } from '@icon-park/vue-next'
+import { computed, readonly, ref } from 'vue'
+import { CheckOne, Down } from '@icon-park/vue-next'
 import type { MessageItemInterface } from '../types'
 import { useUserStore } from '@/store/modules/user'
 import MessageBubbleLoading from './message-bubble-loading.vue'
@@ -16,6 +16,7 @@ const { t } = useI18n()
 const userStore = useUserStore()
 
 const agentDefaultAvatarUrl = readonly({ url: 'https://gsst-poe-sit.gz.bcebos.com/icon/agent-avatar.png' })
+const isShowReasoningContent = ref(true)
 
 const isAgentMessage = computed(() => {
   return props.messageItem.role === 'assistant'
@@ -28,6 +29,10 @@ const avatarUrl = computed(() => {
 const name = computed(() => {
   return isAgentMessage.value ? props.messageItem.name || 'AI助理' : userStore.userInfo.nickName
 })
+
+function handleShowReasoningContentSwitch() {
+  isShowReasoningContent.value = !isShowReasoningContent.value
+}
 </script>
 
 <template>
@@ -36,7 +41,44 @@ const name = computed(() => {
       <img class="h-[36px] w-[36px] rounded-[6px] object-cover" :src="avatarUrl" alt="Avatar" />
 
       <div class="ml-[11px] overflow-hidden">
-        <div class="mb-[7px] text-[12px] text-[#999]">
+        <template v-if="isAgentMessage && messageItem.name === 'Deepseek R1'">
+          <div class="mb-[7px] select-none text-[14px]">
+            <div class="inline-flex cursor-pointer" @click="handleShowReasoningContentSwitch">
+              <span class="mr-[6px]">{{ name }}</span>
+              <Down
+                theme="outline"
+                size="21"
+                fill="#333"
+                :stroke-width="3"
+                class="transition-[rotate] duration-100 ease-linear"
+                :class="{ '-rotate-180': isShowReasoningContent }"
+              />
+            </div>
+          </div>
+
+          <n-collapse-transition :show="isShowReasoningContent">
+            <div class="my-[14px] border-l-[1px] border-solid border-l-[#ccc] p-[13px]">
+              <div>
+                <img
+                  v-if="!messageItem.reasoningContent && !messageItem.content"
+                  src="@/assets/images/home/bubble-loading.gif"
+                  alt="bubble-loading"
+                />
+                <template v-else>
+                  <MarkdownRender
+                    :raw-text-content="
+                      messageItem.reasoningContent
+                        ? messageItem.reasoningContent
+                        : t('common_module.dialogue_module.empty_message_content')
+                    "
+                    color="#999"
+                  />
+                </template>
+              </div>
+            </div>
+          </n-collapse-transition>
+        </template>
+        <div v-else class="mb-[7px] text-[12px] text-[#999]">
           {{ name }}
         </div>
 

src/views/home/home.vue

@@ -58,6 +58,10 @@ const currentFetchEventSourceController = ref<AbortController | null>(null)
 //     '对于初学者的编程学习资源，可以从以下几个方面进行推荐：\n\n### 一、在线教程与网站\n\n1. **w3school**：这是一个非常全面的编程学习网站，提供了从基础到高级的教程，包括HTML、CSS、JavaScript、SQL等，适合初学者逐步深入学习。\n2. **慕课网**：慕课网上有许多免费课程，涵盖了前端、后端开发，移动开发等多个方面，初学者可以根据自己的兴趣选择相应的课程。\n3. **Coursera**：该网站提供世界名校的网络公开课程，其中也包括计算机编程的相关课程，初学者可以接触到国际一流的教学资源。\n\n### 二、书籍推荐\n\n1. **《Python编程快速上手》**：这本书是为零基础读者打造的Python入门书籍，内容系统且详细，每个知识点都深入浅出，非常适合初学者。\n2. **《C++ Primer Plus》**：这本书是C++语言学习的理想图书，通过大量短小精悍的程序详细阐述了C++的基本概念和技术，对初学者极为友好。\n\n### 三、实践项目与刷题网站\n\n1. **Stack Overflow**：这是一个程序设计领域的问答网站，初学者在遇到编程难题时可以在这里寻找解决方案，同时也可以学习到其他技术大牛的经验和技巧。\n2. **GitHub**：作为全球最大的开源代码托管仓库，GitHub上有无穷无尽的开源代码供初学者学习和参考，阅读源码是一个快速提升编程能力的好方法。\n\n### 四、社区与论坛\n\n1. **CSDN软件开发网**：这是国内知名的软件开发社区，提供了大量的编程资源和经验分享，初学者可以在这里交流学习心得，获取最新的技术动态。\n\n综上所述，初学者可以根据自己的学习需求和兴趣选择合适的编程学习资源。从在线教程、书籍阅读到实践项目和社区交流，多方面的学习将有助于初学者快速掌握编程技能并不断提升自己。',
 //   timestamp: 1726654851735,
 //   isAnswerLoading: false,
+//   avatar: 'http://localhost:8848/fe/src/assets/images/home/agent-avatar.png',
+//   name: 'lisa',
+//   reasoningContent:
+//     '对于初学者的编程学习资源，可以从以下几个方面进行推荐：\n\n### 一、在线教程与网站\n\n1. **w3school**：这是一个非常全面的编程学习网站，提供了从基础到高级的教程，包括HTML、CSS、JavaScript、SQL等，适合初学者逐步深入学习。\n2. **慕课网**：慕课网上有许多免费课程，涵盖了前端、后端开发，移动开发等多个方面，初学者可以根据自己的兴趣选择相应的课程。\n3. **Coursera**：该网站提供世界名校的网络公开课程，其中也包括计算机编程的相关课程，初学者可以接触到国际一流的教学资源。\n\n### 二、书籍推荐\n\n1. **《Python编程快速上手》**：这本书是为零基础读者打造的Python入门书籍，内容系统且详细，每个知识点都深入浅出，非常适合初学者。\n2. **《C++ Primer Plus》**：这本书是C++语言学习的理想图书，通过大量短小精悍的程序详细阐述了C++的基本概念和技术，对初学者极为友好。\n\n### 三、实践项目与刷题网站\n\n1. **Stack Overflow**：这是一个程序设计领域的问答网站，初学者在遇到编程难题时可以在这里寻找解决方案，同时也可以学习到其他技术大牛的经验和技巧。\n2. **GitHub**：作为全球最大的开源代码托管仓库，GitHub上有无穷无尽的开源代码供初学者学习和参考，阅读源码是一个快速提升编程能力的好方法。\n\n### 四、社区与论坛\n\n1. **CSDN软件开发网**：这是国内知名的软件开发社区，提供了大量的编程资源和经验分享，初学者可以在这里交流学习心得，获取最新的技术动态。\n\n综上所述，初学者可以根据自己的学习需求和兴趣选择合适的编程学习资源。从在线教程、书籍阅读到实践项目和社区交流，多方面的学习将有助于初学者快速掌握编程技能并不断提升自己',
 // })
 
 const homeContainerWidthWatchDebounce = debounce((newWidth) => {
@@ -165,6 +169,7 @@ function onGetMessageRecordList(recordId: string) {
       content: string
       timestamp: number
       imageUrl: string
+      reasoningContent: string
     }[]
   >(recordId)
     .then((res) => {
@@ -181,6 +186,7 @@ function onGetMessageRecordList(recordId: string) {
               avatar: recordItem.agentAvatar,
               timestamp: recordItem.timestamp,
               imageUrl: recordItem?.imageUrl || '',
+              reasoningContent: recordItem.reasoningContent || '',
             },
           ]
         })

src/views/home/types.d.ts

@@ -20,4 +20,5 @@ export interface MessageItemInterface {
   name: string
   pluginName?: string
   imageUrl?: string
+  reasoningContent: string
 }

src/views/home/utils/fetch-event-stream-source.ts

@@ -4,9 +4,14 @@ import { useUserStore } from '@/store/modules/user'
 import { languageKeyTransform } from '@/utils/language-key-transform'
 import { fetchEventSource } from '@microsoft/fetch-event-source'
 
+interface ResponseData {
+  message: string
+  reasoningContent: string
+  function: { name: string }
+}
+
 interface Options {
-  onFunction?: (name: string) => void
-  onmessage?: (message: string) => void
+  onResponse?: (data: ResponseData) => void
   onend?: () => void
   onclose?: () => void
   onerror?: (err: Error) => void
@@ -16,8 +21,7 @@ export default function fetchEventStreamSource(
   url: string,
   payload: object = {},
   options: Options = {
-    onFunction: (_name: string) => {},
-    onmessage: (_message: string) => {},
+    onResponse: (_data: ResponseData) => {},
     onend: () => {},
     onclose: () => {},
     onerror: (_err: Error) => {},
@@ -48,13 +52,8 @@ export default function fetchEventStreamSource(
       try {
         const data = JSON.parse(e.data)
 
-        if (data.function && data.function.name) {
-          options.onFunction && options.onFunction(data.function.name)
-          return
-        }
-
         if (data.code === 0 || data.code === '0') {
-          data.message && options.onmessage && options.onmessage(data.message)
+          data && options.onResponse && options.onResponse(data)
         } else {
           options.onerror && options.onerror(new Error(data.message))