From 88d462d6294e30e6c9fdca08c07c84ef48a216fc Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 9 May 2025 12:07:51 +0800
Subject: [PATCH 1/4] perf: implement the expand/collapse function for
 reasoning process

---
 src/locales/en-US.ts                          |   4 +
 src/locales/ko-KR.ts                          |   4 +
 src/locales/zh-CN.ts                          |   4 +
 src/locales/zh-TW.ts                          |   4 +
 src/typings/chat.d.ts                         |   1 +
 .../chat/components/Message/Reasoning.vue     | 162 ++++++++++++++++--
 src/views/chat/components/Message/index.vue   |   3 +-
 src/views/chat/index.vue                      |   2 +
 8 files changed, 172 insertions(+), 12 deletions(-)

diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index 842a1049..d33c1c72 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -78,6 +78,10 @@ export default {
     deleteKeyConfirm: 'Are you sure to delete this key?',
     disable2FA: 'Disable 2FA',
     disable2FAConfirm: 'Are you sure to disable 2FA for this user?',
+    thinking: 'Thinking',
+    reasoningProcess: 'Reasoning Process',
+    noReasoningProcess: 'No Reasoning Process',
+    expandCollapseReasoningProcess: 'Expand/Collapse Reasoning Process',
   },
   setting: {
     overRide: 'Enable Override',
diff --git a/src/locales/ko-KR.ts b/src/locales/ko-KR.ts
index 25b5af75..790ee51d 100644
--- a/src/locales/ko-KR.ts
+++ b/src/locales/ko-KR.ts
@@ -78,6 +78,10 @@ export default {
     deleteKeyConfirm: 'Are you sure to delete this key?',
     disable2FA: 'Disable 2FA',
     disable2FAConfirm: 'Are you sure to disable 2FA for this user?',
+    thinking: '생각 중',
+    reasoningProcess: '추론 과정',
+    noReasoningProcess: '추론 과정 없음',
+    expandCollapseReasoningProcess: '추론 과정 펼치기/접기',
   },
   setting: {
     overRide: '덮어쓰기 활성화',
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 41894ba0..6d037b6f 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -78,6 +78,10 @@ export default {
     deleteKeyConfirm: '你确定要删除这个 key 吗?',
     disable2FA: '禁用 2FA',
     disable2FAConfirm: '您确定要为此用户禁用两步验证吗？?',
+    thinking: '思考中',
+    reasoningProcess: '推理过程',
+    noReasoningProcess: '无推理过程',
+    expandCollapseReasoningProcess: '展开/折叠推理过程',
   },
   setting: {
     overRide: '开启覆写',
diff --git a/src/locales/zh-TW.ts b/src/locales/zh-TW.ts
index 5d48ca76..e09eea78 100644
--- a/src/locales/zh-TW.ts
+++ b/src/locales/zh-TW.ts
@@ -78,6 +78,10 @@ export default {
     deleteKeyConfirm: '你確定要刪除這個 key 嗎?',
     disable2FA: '禁用 2FA',
     disable2FAConfirm: '您确定要为此用户禁用两步验证吗？?',
+    thinking: '思考中',
+    reasoningProcess: '推理過程',
+    noReasoningProcess: '無推理過程',
+    expandCollapseReasoningProcess: '展開/收合推理過程',
   },
   setting: {
     overRide: '開啟覆寫',
diff --git a/src/typings/chat.d.ts b/src/typings/chat.d.ts
index 7fa5f846..b8edebf5 100644
--- a/src/typings/chat.d.ts
+++ b/src/typings/chat.d.ts
@@ -3,6 +3,7 @@ declare namespace Chat {
     uuid?: number
     dateTime: string
     reasoning?: string
+    finish_reason?: null | 'stop'
     text: string
     images?: string[]
     inversion?: boolean
diff --git a/src/views/chat/components/Message/Reasoning.vue b/src/views/chat/components/Message/Reasoning.vue
index 24ea88b4..cb76a114 100644
--- a/src/views/chat/components/Message/Reasoning.vue
+++ b/src/views/chat/components/Message/Reasoning.vue
@@ -1,33 +1,133 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed, getCurrentInstance, ref } from 'vue'
 import { useBasicLayout } from '@/hooks/useBasicLayout'
+import { t } from '@/locales'
 
 interface Props {
   reasoning?: string
+  finishReason?: string
   loading?: boolean
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
 
 const { isMobile } = useBasicLayout()
+const instance = getCurrentInstance()
+const uid = instance?.uid || Date.now() + Math.random().toString(36).substring(2)
 
 const textRef = ref<HTMLElement>()
+const isCollapsed = ref(true)
 
-const wrapClass = computed(() => {
+const reasoningBtnTitle = computed(() => {
+  return t('chat.expandCollapseReasoningProcess')
+})
+
+const shouldShowThinkingIndicator = computed(() => {
+  return props.loading && props.finishReason !== 'stop'
+})
+
+const hasReasoningText = computed(() => {
+  return props.reasoning && props.reasoning.trim() !== ''
+})
+
+const headerComputedClass = computed(() => {
+  return [
+    'flex items-center justify-between',
+    'p-2 pl-3  w-48',
+    'bg-gray-200 dark:bg-slate-700',
+    'text-xs select-none font-medium',
+    'transition-all duration-200 ease-in-out',
+    hasReasoningText.value ? 'cursor-pointer hover:bg-gray-300 dark:hover:bg-slate-600' : 'cursor-default',
+    (isCollapsed.value || !hasReasoningText.value) ? 'rounded-md' : 'rounded-t-md',
+    isMobile.value ? 'max-w-full' : 'max-w-md',
+    'shadow-sm',
+  ]
+})
+
+const contentWrapperComputedClass = computed(() => {
+  return [
+    'overflow-hidden',
+    'transition-all duration-300 ease-in-out',
+    (isCollapsed.value || !hasReasoningText.value) ? 'max-h-0 opacity-0' : 'max-h-[500px] opacity-100',
+  ]
+})
+
+const actualContentComputedClass = computed(() => {
   return [
-    'text-wrap',
-    'min-w-[20px]',
-    'rounded-md',
-    isMobile.value ? 'p-2' : 'px-3 py-2',
+    'p-3',
+    'bg-gray-50 dark:bg-slate-800',
+    'rounded-b-md shadow-sm',
+    'text-xs leading-relaxed break-words',
+    'prose prose-sm dark:prose-invert max-w-none',
   ]
 })
+
+function toggleCollapse() {
+  if (hasReasoningText.value)
+    isCollapsed.value = !isCollapsed.value
+}
 </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 class="my-2">
+    <div
+      :class="headerComputedClass"
+      :role="hasReasoningText ? 'button' : undefined"
+      :tabindex="hasReasoningText ? 0 : -1"
+      :aria-expanded="hasReasoningText ? !isCollapsed : undefined"
+      :aria-controls="hasReasoningText ? `reasoning-details-${uid}` : undefined"
+      @click="hasReasoningText ? toggleCollapse() : null"
+      @keydown.enter="hasReasoningText ? toggleCollapse() : null"
+      @keydown.space="hasReasoningText ? toggleCollapse() : null"
+    >
+      <div class="flex items-center pr-2">
+        <template v-if="shouldShowThinkingIndicator">
+          <svg
+            class="animate-spin mr-2 h-4 w-4 text-blue-500 dark:text-blue-400 shrink-0"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+          >
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+          </svg>
+          <span class="text-gray-700 dark:text-gray-200 truncate">{{ $t('chat.thinking') }}</span>
+          <span v-if="hasReasoningText" class="mx-1.5 text-gray-400 dark:text-gray-500">|</span>
+        </template>
+        <span v-if="hasReasoningText" class="text-gray-800 dark:text-gray-100 truncate">{{ $t('chat.thinking') }}</span>
+        <span v-else-if="!shouldShowThinkingIndicator && !hasReasoningText" class="text-gray-500 dark:text-gray-400">({{ $t('chat.noReasoningProcess') }})</span>
+      </div>
+      <button
+        v-if="hasReasoningText"
+        type="button"
+        class="ml-auto flex items-center text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none p-1 shrink-0 rounded-full hover:bg-gray-300 dark:hover:bg-slate-600"
+        :aria-expanded="!isCollapsed"
+        :aria-controls="`reasoning-details-${uid}`"
+        :title="reasoningBtnTitle"
+        @click.stop="toggleCollapse"
+        @keydown.enter.stop="toggleCollapse"
+        @keydown.space.stop="toggleCollapse"
+      >
+        <svg
+          class="w-4 h-4 transform transition-transform duration-200"
+          :class="{ 'rotate-180': !isCollapsed }"
+          fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+    </div>
+
+    <div :class="contentWrapperComputedClass">
+      <div
+        v-if="hasReasoningText"
+        :id="`reasoning-details-${uid}`"
+        ref="textRef"
+        :class="actualContentComputedClass"
+        role="region"
+        :aria-hidden="isCollapsed"
+      >
+        <div class="w-full" v-text="props.reasoning" />
       </div>
     </div>
   </div>
@@ -35,4 +135,44 @@ const wrapClass = computed(() => {
 
 <style lang="less">
 @import url(./style.less);
+
+.prose {
+  code {
+    background-color: rgba(209,213,219,0.3);
+    padding: .2em .4em;
+    margin: 0;
+    font-size: 85%;
+    border-radius: 3px;
+  }
+  pre {
+    background-color: rgba(229,231,235,1);
+    color: rgba(55,65,81,1);
+    padding: 0.75rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    code {
+      background-color: transparent;
+      padding: 0;
+      margin: 0;
+      font-size: inherit;
+      border-radius: 0;
+      color: inherit;
+    }
+  }
+}
+.dark .prose {
+  color: rgba(209,213,219,1);
+  code {
+    background-color: rgba(55,65,81,0.5);
+    color: rgba(229,231,235,1);
+  }
+  pre {
+    background-color: rgba(31,41,55,1);
+    color: rgba(229,231,235,1);
+  }
+}
+
+.whitespace-pre-wrap {
+  white-space: normal;
+}
 </style>
diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue
index 53f148a2..082755af 100644
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -23,6 +23,7 @@ interface Props {
   dateTime?: string
   model?: string
   reasoning?: string
+  finishReason?: string
   text?: string
   images?: string[]
   isRecord?: boolean
@@ -225,7 +226,7 @@ function isEventTargetValid(event: any) {
           </template>
         </NSpace>
       </p>
-      <Reasoning v-if="reasoning" :reasoning="reasoning" :loading="loading" />
+      <Reasoning v-if="reasoning" :reasoning="reasoning" :finish-reason="finishReason" :loading="loading" />
       <div
         class="flex items-end gap-1 mt-2"
         :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 70cc469e..2eb5dd0b 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -320,6 +320,7 @@ async function onRegenerate(index: number) {
               {
                 dateTime: new Date().toLocaleString(),
                 reasoning: data?.reasoning,
+                finish_reason: data?.finish_reason,
                 text: lastText + (data.text ?? ''),
                 inversion: false,
                 responseCount,
@@ -687,6 +688,7 @@ onUnmounted(() => {
                   :current-nav-index="currentNavIndexRef"
                   :date-time="item.dateTime"
                   :reasoning="item?.reasoning"
+                  :finish_reason="item?.finish_reason"
                   :text="item.text"
                   :images="item.images"
                   :inversion="item.inversion"

From 93a6af54a0c247c3056ccfd805175d2a89e8f0d4 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 9 May 2025 12:07:51 +0800
Subject: [PATCH 2/4] perf: correct the erroneous text

---
 src/views/chat/components/Message/Reasoning.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/chat/components/Message/Reasoning.vue b/src/views/chat/components/Message/Reasoning.vue
index cb76a114..a9d5a579 100644
--- a/src/views/chat/components/Message/Reasoning.vue
+++ b/src/views/chat/components/Message/Reasoning.vue
@@ -94,7 +94,7 @@ function toggleCollapse() {
           <span class="text-gray-700 dark:text-gray-200 truncate">{{ $t('chat.thinking') }}</span>
           <span v-if="hasReasoningText" class="mx-1.5 text-gray-400 dark:text-gray-500">|</span>
         </template>
-        <span v-if="hasReasoningText" class="text-gray-800 dark:text-gray-100 truncate">{{ $t('chat.thinking') }}</span>
+        <span v-if="hasReasoningText" class="text-gray-800 dark:text-gray-100 truncate">{{ $t('chat.reasoningProcess') }}</span>
         <span v-else-if="!shouldShowThinkingIndicator && !hasReasoningText" class="text-gray-500 dark:text-gray-400">({{ $t('chat.noReasoningProcess') }})</span>
       </div>
       <button

From 613f07af9f64ef149e23c701856b82888a3f24c8 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 9 May 2025 14:33:32 +0800
Subject: [PATCH 3/4] perf: optimize the display logic in thinking, after
 reasoning, hide the thoughts in the thinking

---
 src/typings/chat.d.ts                           | 2 +-
 src/views/chat/components/Message/Reasoning.vue | 4 ++--
 src/views/chat/components/Message/index.vue     | 2 +-
 src/views/chat/index.vue                        | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/typings/chat.d.ts b/src/typings/chat.d.ts
index b8edebf5..b319e3fc 100644
--- a/src/typings/chat.d.ts
+++ b/src/typings/chat.d.ts
@@ -3,7 +3,7 @@ declare namespace Chat {
     uuid?: number
     dateTime: string
     reasoning?: string
-    finish_reason?: null | 'stop'
+    finish_reason?: string
     text: string
     images?: string[]
     inversion?: boolean
diff --git a/src/views/chat/components/Message/Reasoning.vue b/src/views/chat/components/Message/Reasoning.vue
index a9d5a579..c0c1bc35 100644
--- a/src/views/chat/components/Message/Reasoning.vue
+++ b/src/views/chat/components/Message/Reasoning.vue
@@ -5,7 +5,7 @@ import { t } from '@/locales'
 
 interface Props {
   reasoning?: string
-  finishReason?: string
+  reasonEnd?: boolean
   loading?: boolean
 }
 
@@ -23,7 +23,7 @@ const reasoningBtnTitle = computed(() => {
 })
 
 const shouldShowThinkingIndicator = computed(() => {
-  return props.loading && props.finishReason !== 'stop'
+  return props.loading && !props.reasonEnd
 })
 
 const hasReasoningText = computed(() => {
diff --git a/src/views/chat/components/Message/index.vue b/src/views/chat/components/Message/index.vue
index 082755af..4afcaa99 100644
--- a/src/views/chat/components/Message/index.vue
+++ b/src/views/chat/components/Message/index.vue
@@ -226,7 +226,7 @@ function isEventTargetValid(event: any) {
           </template>
         </NSpace>
       </p>
-      <Reasoning v-if="reasoning" :reasoning="reasoning" :finish-reason="finishReason" :loading="loading" />
+      <Reasoning v-if="reasoning" :reasoning="reasoning" :reason-end="text ? text.length > 0 : false" :loading="loading" />
       <div
         class="flex items-end gap-1 mt-2"
         :class="[inversion ? 'flex-row-reverse' : 'flex-row']"
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index 2eb5dd0b..7fc1d35f 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -688,7 +688,7 @@ onUnmounted(() => {
                   :current-nav-index="currentNavIndexRef"
                   :date-time="item.dateTime"
                   :reasoning="item?.reasoning"
-                  :finish_reason="item?.finish_reason"
+                  :finish-reason="item?.finish_reason"
                   :text="item.text"
                   :images="item.images"
                   :inversion="item.inversion"

From 76d982b7b2df6a61b139de66ae66d152d9808be8 Mon Sep 17 00:00:00 2001
From: Bob Du <i@bobdu.cc>
Date: Mon, 12 May 2025 16:10:48 +0800
Subject: [PATCH 4/4] feat: expand reasoning text default

Signed-off-by: Bob Du <i@bobdu.cc>
---
 src/views/chat/components/Message/Reasoning.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/chat/components/Message/Reasoning.vue b/src/views/chat/components/Message/Reasoning.vue
index c0c1bc35..b120e330 100644
--- a/src/views/chat/components/Message/Reasoning.vue
+++ b/src/views/chat/components/Message/Reasoning.vue
@@ -16,7 +16,7 @@ const instance = getCurrentInstance()
 const uid = instance?.uid || Date.now() + Math.random().toString(36).substring(2)
 
 const textRef = ref<HTMLElement>()
-const isCollapsed = ref(true)
+const isCollapsed = ref(false)
 
 const reasoningBtnTitle = computed(() => {
   return t('chat.expandCollapseReasoningProcess')