Merge pull request #61 from OVINC-CN/feat_thinking

feat(chat): support to show reasoning content
OVINC-CN · Feb 5, 2025 · 093acbe · 093acbe
2 parents 4362795 + b3ce52f
commit 093acbe
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 1 deletion.
diff --git a/src/components/ChatInput.vue b/src/components/ChatInput.vue
@@ -174,7 +174,7 @@ const doChat = async () => {
   // auto scroll
   emits('toggleUserBehavior', false);
   // init response content
-  lastResponseContent.value = {role: Role.Assistant, content: ''};
+  lastResponseContent.value = {role: Role.Assistant, content: '', thinking: ''};
   emits('addMessage', lastResponseContent.value);
   // clear input
   promptForm.value.content = '';
@@ -192,6 +192,10 @@ const onMessage = (event) => {
     lastResponseContent.value.content += data.data;
     emits('saveMessage');
   }
+  if (data.thinking) {
+    lastResponseContent.value.thinking += data.thinking;
+    emits('saveMessage');
+  }
 };
 const sendMessage = (message) => {
   initWebSocket().then(

diff --git a/src/components/MessageContent.vue b/src/components/MessageContent.vue
@@ -90,6 +90,13 @@ const onImageClick = (images, index) => emits('onImageClick', images[index]);
           </a-space>
         </a-link>
       </div>
+      <v-md-preview
+        v-show="message.thinking"
+        :text="':::tip ' + $t('ReasoningContent') + '\n' + message.thinking + '\n:::'"
+        class="v-md-preview"
+        :class="{'v-md-preview-u': message.role === Role.User || message.role === Role.System}"
+        @image-click="onImageClick"
+      />
       <v-md-preview
         v-show="message.content"
         :text="message.content"
@@ -228,4 +235,8 @@ body[arco-theme="dark"] .v-md-preview :deep(.github-markdown-body) pre code,
 body[arco-theme="dark"] .v-md-preview :deep(.github-markdown-body) pre code span {
   color: var(--color-text-1)!important;
 }
+
+body[arco-theme="dark"] .v-md-preview :deep(.v-md-plugin-tip.tip) {
+  background-color: var(--color-bg-5);
+}
 </style>
diff --git a/src/locale/en-us.js b/src/locale/en-us.js
@@ -97,6 +97,7 @@ const mEnUS = {
   PleaseInputSyncEncrypt: 'Please input encrypt key',
   SyncMessageFailed: 'Sync Message Failed',
   DecryptMessageLogFailed: 'Failed to decrypt historical conversations. Please check your encrypt key.',
+  ReasoningContent: 'Reasoning Content',
 };
 
 export default mEnUS;
diff --git a/src/locale/zh-cn.js b/src/locale/zh-cn.js
@@ -97,6 +97,7 @@ const mZhCN = {
   PleaseInputSyncEncrypt: '请输入加密密钥',
   SyncMessageFailed: '同步历史会话失败，请关注',
   DecryptMessageLogFailed: '解密历史会话失败，请检查加密密钥',
+  ReasoningContent: '思考过程',
 };
 
 export default mZhCN;
diff --git a/src/main.js b/src/main.js
@@ -19,6 +19,8 @@ import createEmojiPlugin from '@kangc/v-md-editor/lib/plugins/emoji/index';
 import '@kangc/v-md-editor/lib/plugins/emoji/emoji.css';
 import createCopyCodePlugin from '@kangc/v-md-editor/lib/plugins/copy-code/index';
 import '@kangc/v-md-editor/lib/plugins/copy-code/copy-code.css';
+import tipsPlugin from '@kangc/v-md-editor/lib/plugins/tip/index';
+import '@kangc/v-md-editor/lib/plugins/tip/tip.css';
 
 import hljs from 'highlight.js';
 
@@ -29,6 +31,7 @@ VMdPreview.use(createKatexPlugin());
 VMdPreview.use(createTipPlugin());
 VMdPreview.use(createEmojiPlugin());
 VMdPreview.use(createCopyCodePlugin());
+VMdPreview.use(tipsPlugin());
 
 const app = createApp(App);