From e662cce91a7345342222f3c5a45ab1e2903ee9d3 Mon Sep 17 00:00:00 2001
From: matevip <matevip@mate.vip>
Date: Sat, 11 Apr 2026 17:09:25 +0800
Subject: [PATCH] fix(chat): improve thinking segment display and message
 bubble rendering

---
 mateclaw-ui/src/components/chat/MessageBubble.vue   | 2 +-
 mateclaw-ui/src/components/chat/ThinkingSegment.vue | 7 +++++--
 mateclaw-ui/src/i18n/locales/en-US.ts               | 2 ++
 mateclaw-ui/src/i18n/locales/zh-CN.ts               | 2 ++
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/mateclaw-ui/src/components/chat/MessageBubble.vue b/mateclaw-ui/src/components/chat/MessageBubble.vue
index f203fff0..258d1c8b 100644
--- a/mateclaw-ui/src/components/chat/MessageBubble.vue
+++ b/mateclaw-ui/src/components/chat/MessageBubble.vue
@@ -132,7 +132,7 @@
         <!-- 停止指示器 -->
         <div v-if="status === 'stopped' || status === 'interrupted'" class="stopped-indicator">
           <el-icon><CloseBold /></el-icon>
-          <span>{{ status === 'interrupted' ? ($t('chat.interrupted') || '已中断') : $t('chat.stopped') }}</span>
+          <span>{{ status === 'interrupted' ? $t('chat.interrupted') : $t('chat.stopped') }}</span>
         </div>
 
         <!-- 错误卡片 -->
diff --git a/mateclaw-ui/src/components/chat/ThinkingSegment.vue b/mateclaw-ui/src/components/chat/ThinkingSegment.vue
index a76c0d67..dd3e0c87 100644
--- a/mateclaw-ui/src/components/chat/ThinkingSegment.vue
+++ b/mateclaw-ui/src/components/chat/ThinkingSegment.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Opportunity, ArrowDown } from '@element-plus/icons-vue'
 import { useMarkdownRenderer } from '@/composables/useMarkdownRenderer'
 import type { MessageSegment } from '@/types'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   segment: MessageSegment
 }>()
@@ -22,7 +25,7 @@ watch(() => props.segment.status, (val) => {
 const lengthHint = computed(() => {
   const len = props.segment.thinkingText?.length || 0
   if (len < 100) return ''
-  return len < 1000 ? `${len} 字` : `${(len / 1000).toFixed(1)}k 字`
+  return len < 1000 ? `${len} chars` : `${(len / 1000).toFixed(1)}k chars`
 })
 </script>
 
@@ -32,7 +35,7 @@ const lengthHint = computed(() => {
       <span class="seg-thinking__icon">
         <el-icon :class="{ 'is-loading': isRunning }" :size="14"><Opportunity /></el-icon>
       </span>
-      <span class="seg-thinking__label">{{ isRunning ? '思考中...' : '深度思考' }}</span>
+      <span class="seg-thinking__label">{{ isRunning ? t('chat.thinkingInProgress') : t('chat.thinking') }}</span>
       <span v-if="lengthHint" class="seg-thinking__hint">{{ lengthHint }}</span>
       <el-icon class="seg-thinking__arrow" :class="{ 'is-open': expanded }" :size="12"><ArrowDown /></el-icon>
     </div>
diff --git a/mateclaw-ui/src/i18n/locales/en-US.ts b/mateclaw-ui/src/i18n/locales/en-US.ts
index 877779c6..a978f1b9 100644
--- a/mateclaw-ui/src/i18n/locales/en-US.ts
+++ b/mateclaw-ui/src/i18n/locales/en-US.ts
@@ -40,7 +40,9 @@ export default {
       error: 'Disconnected',
     },
     thinking: 'Thinking',
+    thinkingInProgress: 'Thinking...',
     stopped: 'Generation stopped',
+    interrupted: 'Interrupted',
     failed: 'Generation failed',
     retry: 'Retry',
     errorCode: 'Error code',
diff --git a/mateclaw-ui/src/i18n/locales/zh-CN.ts b/mateclaw-ui/src/i18n/locales/zh-CN.ts
index d49af249..daa6a1e4 100644
--- a/mateclaw-ui/src/i18n/locales/zh-CN.ts
+++ b/mateclaw-ui/src/i18n/locales/zh-CN.ts
@@ -40,7 +40,9 @@ export default {
       error: '连接断开',
     },
     thinking: '深度思考',
+    thinkingInProgress: '思考中...',
     stopped: '已停止生成',
+    interrupted: '已中断',
     failed: '生成失败',
     retry: '重试',
     errorCode: '错误码',