From 2472c9947f1fa1fecc9cc209fff793621f7c1f8f Mon Sep 17 00:00:00 2001
From: zhaojisen <1301338853@qq.com>
Date: Sat, 8 Feb 2025 14:51:44 +0800
Subject: [PATCH] Perf: Support DeepSeek

---
 src/assets/img/deepSeek.png                   | Bin 0 -> 3904 bytes
 .../components/ChitChat/ChatMessage.vue       | 299 ++++++++++++------
 .../Apps/ChatAi/components/ChitChat/index.vue |  12 +-
 src/store/modules/chat.js                     |  23 +-
 4 files changed, 228 insertions(+), 106 deletions(-)
 create mode 100644 src/assets/img/deepSeek.png

diff --git a/src/assets/img/deepSeek.png b/src/assets/img/deepSeek.png
new file mode 100644
index 0000000000000000000000000000000000000000..963048589f554982ea9ba305345d70bb5389068b
GIT binary patch
literal 3904
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
IHFS&n5BDKf00000

literal 0
HcmV?d00001

diff --git a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
index 500275440b..a4b09edc8c 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
@@ -1,42 +1,71 @@
 <template>
-  <div :class="{'user-role': isUserRole}" class="chat-item">
-    <div class="avatar">
-      <el-avatar :src="isUserRole ? userUrl : chatUrl" class="header-avatar" />
-    </div>
-    <div class="content">
-      <div class="operational">
-        <span class="date">
-          {{ $moment(item.message.create_time).format('YYYY-MM-DD HH:mm:ss') }}
-        </span>
+  <div :class="{ 'user-role': isUserRole }" class="chat-item">
+    <div class="chart-item-container">
+      <div class="avatar">
+        <el-avatar
+          :src="isUserRole ? userUrl : chatUrl"
+          class="header-avatar"
+        />
       </div>
-      <div class="message">
-        <div class="message-content">
-          <span v-if="isSystemError" class="error">
-            {{ item.message.content }}
-          </span>
-          <span v-else class="chat-text">
-            <MessageText :message="item.message" />
-          </span>
+      <div class="content">
+        <div class="operational">
+          <div v-if="!item.reasoning" class="date">
+            {{
+              $moment(item.message.create_time).format("YYYY-MM-DD HH:mm:ss")
+            }}
+          </div>
+
+          <div v-else class="thinking-time">已深度思考</div>
         </div>
-        <div class="action">
-          <el-tooltip
-            v-if="isSystemError && isLoading"
-            :content="$tc('Reconnect')"
-            :open-delay="500"
-            placement="top"
-          >
-            <svg-icon icon-class="refresh" @click="onRefresh" />
-          </el-tooltip>
-          <el-dropdown v-else size="small" @command="handleCommand">
-            <span class="el-dropdown-link">
-              <i class="fa fa-ellipsis-v" />
-            </span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="i in dropdownOptions" :key="i.action" :command="i.action">
-                {{ i.label }}
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+        <div :class="item.reasoning ? 'reasoning' : 'message'">
+          <div class="message-content">
+            <div v-if="!item.reasoning">
+              <span v-if="isSystemError" class="error">
+                {{ item.message.content }}
+              </span>
+              <span v-else class="chat-text">
+                <MessageText :message="item.message" />
+              </span>
+            </div>
+
+            <div v-else class="thinking-wrapper">
+              <div class="thinking-content">
+                <!-- eslint-disable-next-line -->
+                <div class="divider"></div>
+                <p>
+                  <MessageText :message="item.reasoning" />
+                </p>
+              </div>
+
+              <div class="thinking-result">
+                <MessageText :message="item.result" />
+              </div>
+            </div>
+          </div>
+          <div class="action">
+            <el-tooltip
+              v-if="isSystemError && isLoading"
+              :content="$tc('Reconnect')"
+              :open-delay="500"
+              placement="top"
+            >
+              <svg-icon icon-class="refresh" @click="onRefresh" />
+            </el-tooltip>
+            <el-dropdown v-else size="small" @command="handleCommand">
+              <span class="el-dropdown-link">
+                <i class="fa fa-ellipsis-v" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="i in dropdownOptions"
+                  :key="i.action"
+                  :command="i.action"
+                >
+                  {{ i.label }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
         </div>
       </div>
     </div>
@@ -45,7 +74,7 @@
 
 <script>
 import MessageText from './MessageText.vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { copy } from '@/utils/common'
 import { useChat } from '../../useChat.js'
 import { reconnect } from '@/utils/socket'
@@ -65,7 +94,6 @@ export default {
   },
   data() {
     return {
-      chatUrl: require('@/assets/img/chat.png'),
       userUrl: '/api/v1/settings/logo/',
       dropdownOptions: [
         {
@@ -79,11 +107,21 @@ export default {
     ...mapState({
       isLoading: state => state.chat.loading
     }),
+    ...mapGetters([
+      'publicSettings'
+    ]),
     isUserRole() {
       return this.item.message?.role === 'user'
     },
     isSystemError() {
-      return this.item.type === 'error' && this.item.message?.role === 'assistant'
+      return (
+        this.item.type === 'error' && this.item?.role === 'assistant'
+      )
+    },
+    chatUrl() {
+      return this.publicSettings.CHAT_AI_TYPE === 'gpt'
+        ? require('@/assets/img/chat.png')
+        : require('@/assets/img/deepSeek.png')
     }
   },
   methods: {
@@ -94,7 +132,7 @@ export default {
     },
     handleCommand(value) {
       if (value === 'copy') {
-        copy(this.item.message.content)
+        copy(this.item.result.content)
       }
     }
   }
@@ -104,101 +142,160 @@ export default {
 <style lang="scss" scoped>
 .chat-item {
   display: flex;
-  padding: 16px 14px 0;
+  padding: 0.5rem;
 
-  &:last-child {
-    padding-bottom: 16px;
-  }
+  .chart-item-container {
+    display: flex;
+    gap: 0.5rem;
 
-  .avatar {
-    width: 22px;
-    height: 22px;
-    margin-top: 2px;
+    .avatar {
+      width: 24px;
+      height: 24px;
+      margin-top: 2px;
 
-    .header-avatar {
-      width: 100%;
-      height: 100%;
+      .header-avatar {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
 
-      &::v-deep img {
-        background-color: #e5e5e7;
+        &::v-deep img {
+          background-color: #fff;
+        }
       }
     }
-  }
-
-  .content {
-    margin-left: 6px;
-    overflow: hidden;
 
-    .operational {
+    .content {
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
+      gap: 0.5rem;
       overflow: hidden;
 
-      .copy {
-        float: right;
-        cursor: pointer;
-      }
-    }
+      .operational {
+        display: flex;
+        justify-content: space-between;
+        overflow: hidden;
 
-    .message {
-      display: -webkit-box;
+        .date {
+          padding-top: 5px;
+        }
 
-      .message-content {
-        flex: 1;
-        padding: 6px 10px;
-        border-radius: 2px 12px 12px;
-        background-color: #f0f1f5;
-      }
+        .thinking-time {
+          width: 6rem;
+          display: flex;
+          justify-content: center;
+          padding: 5px 10px;
+          border-radius: 0.5rem;
+          background-color: #f5f5f5;
+        }
 
-      .action {
-        .svg-icon {
-          transform: translateY(50%);
-          margin-left: 3px;
+        .copy {
+          float: right;
           cursor: pointer;
         }
+      }
 
-        .el-dropdown {
-          height: 32px;
-          line-height: 37px;
-          font-size: 13px;
+      .reasoning {
+        display: flex;
+        gap: 0.5rem;
+        align-items: flex-end;
 
-          .el-dropdown-link {
-            i {
-              padding: 4px 5px;
-              font-size: 15px;
-              color: #8d9091;
+        .message-content .thinking-wrapper {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
 
-              &:hover {
-                color: #7b8085
+          .thinking-content {
+            position: relative;
+            color: #8b8b8b;
+
+            .divider {
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: 100%;
+              border-left: 2px solid #e5e5e5;
+            }
+
+            p {
+              margin: unset;
+              padding-left: 0.5rem;
+
+              ::v-deep p {
+                color: #8b8b8b;
               }
             }
           }
         }
       }
 
-      .error {
-        color: red;
+      .message {
+        display: -webkit-box;
+
+        .message-content {
+          flex: 1;
+          padding: 6px 10px;
+          border-radius: 2px 12px 12px;
+          background-color: #f0f1f5;
+        }
+
+        .action {
+          .svg-icon {
+            transform: translateY(50%);
+            margin-left: 3px;
+            cursor: pointer;
+          }
+
+          .el-dropdown {
+            height: 32px;
+            line-height: 37px;
+            font-size: 13px;
+
+            .el-dropdown-link {
+              i {
+                padding: 4px 5px;
+                font-size: 15px;
+                color: #8d9091;
+
+                &:hover {
+                  color: #7b8085;
+                }
+              }
+            }
+          }
+        }
+
+        .error {
+          color: red;
+        }
       }
     }
   }
-}
 
-.user-role {
-  flex-direction: row-reverse;
+  &:last-child {
+    padding-bottom: 16px;
+  }
 
-  .content {
-    margin-right: 10px;
+  &.user-role {
+    flex-direction: row-reverse;
 
-    .operational {
+    .chart-item-container {
       flex-direction: row-reverse;
     }
 
-    .message {
-      flex-direction: row-reverse;
+    .content {
+      margin-right: 10px;
+
+      .operational {
+        flex-direction: row-reverse;
+      }
 
-      .message-content {
-        background-color: var(--menu-hover);
-        border-radius: 12px 2px 12px 12px;
+      .message {
+        flex-direction: row-reverse;
+
+        .message-content {
+          background-color: var(--menu-hover);
+          border-radius: 12px 2px 12px 12px;
+        }
       }
     }
   }
diff --git a/src/components/Apps/ChatAi/components/ChitChat/index.vue b/src/components/Apps/ChatAi/components/ChitChat/index.vue
index 34198fc1e0..0ab535e9b8 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/index.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/index.vue
@@ -123,7 +123,17 @@ export default {
         setLoading(true)
         removeLoadingMessageInChat()
         this.conversationId = data.id
-        updateChaMessageContentById(data.message.id, data)
+
+        const newFragment = {
+          message: { id: data.message.id },
+          reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
+          result: { content: data.message.is_reasoning ? '' : data.message.content },
+          role: data.message.role,
+          type: data.message.type,
+          create_time: data.message.create_time
+        }
+
+        updateChaMessageContentById(data.message.id, newFragment)
       }
       if (data.message?.type === 'finish') {
         setLoading(false)
diff --git a/src/store/modules/chat.js b/src/store/modules/chat.js
index 979360154c..398926924c 100644
--- a/src/store/modules/chat.js
+++ b/src/store/modules/chat.js
@@ -40,11 +40,26 @@ const mutations = {
 
   updateChaMessageContentById(state, { id, data }) {
     const chats = state.activeChat.chats || []
-    const filterChat = chats.filter((chat) => chat.message.id === id)?.[0] || {}
-    if (Object.keys(filterChat).length > 0) {
-      filterChat.message.content = data.message.content
+    const index = chats.findIndex((chat) => chat.message.id === data.message.id)
+
+    if (index === -1) {
+      // 如果没有记录，直接添加新消息
+      chats.push({
+        message: { id: data.message.id },
+        reasoning: { content: data.reasoning.content },
+        result: { content: data.result.content },
+        role: data.role,
+        type: data.type,
+        create_time: data.create_time
+      })
     } else {
-      chats?.push(data)
+      if (data.reasoning.content !== '') {
+        chats[index].reasoning.content = data.reasoning.content
+      }
+
+      if (data.result.content !== '') {
+        chats[index].result.content = data.result.content
+      }
     }
   }
 }