opensource/mateclaw
2
0
Fork 0
mirror of https://gitee.com/mateos/mateclaw.git synced 2026-09-15 20:08:18 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(chat): improve thinking segment display and message bubble rendering

Browse Source
This commit is contained in:
matevip 2026-04-11 17:09:25 +08:00
parent aa09345403
commit e662cce91a
4 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mateclaw-ui/src/components/chat/MessageBubble.vue
View File

@ -132,7 +132,7 @@
<!-- 停止指示器 --> <!-- 停止指示器 -->
<div v-if="status === 'stopped' || status === 'interrupted'" class="stopped-indicator"> <div v-if="status === 'stopped' || status === 'interrupted'" class="stopped-indicator">
<el-icon><CloseBold /></el-icon> <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> </div>
<!-- 错误卡片 --> <!-- 错误卡片 -->

7
mateclaw-ui/src/components/chat/ThinkingSegment.vue
View File

@ -1,9 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, watch } from 'vue' import { ref, computed, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { Opportunity, ArrowDown } from '@element-plus/icons-vue' import { Opportunity, ArrowDown } from '@element-plus/icons-vue'
import { useMarkdownRenderer } from '@/composables/useMarkdownRenderer' import { useMarkdownRenderer } from '@/composables/useMarkdownRenderer'
import type { MessageSegment } from '@/types' import type { MessageSegment } from '@/types'
const { t } = useI18n()
const props = defineProps<{ const props = defineProps<{
segment: MessageSegment segment: MessageSegment
}>() }>()
@ -22,7 +25,7 @@ watch(() => props.segment.status, (val) => {
const lengthHint = computed(() => { const lengthHint = computed(() => {
const len = props.segment.thinkingText?.length || 0 const len = props.segment.thinkingText?.length || 0
if (len < 100) return '' 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> </script>
@ -32,7 +35,7 @@ const lengthHint = computed(() => {
<span class="seg-thinking__icon"> <span class="seg-thinking__icon">
<el-icon :class="{ 'is-loading': isRunning }" :size="14"><Opportunity /></el-icon> <el-icon :class="{ 'is-loading': isRunning }" :size="14"><Opportunity /></el-icon>
</span> </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> <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> <el-icon class="seg-thinking__arrow" :class="{ 'is-open': expanded }" :size="12"><ArrowDown /></el-icon>
</div> </div>

2
mateclaw-ui/src/i18n/locales/en-US.ts
View File

@ -40,7 +40,9 @@ export default {
error: 'Disconnected', error: 'Disconnected',
}, },
thinking: 'Thinking', thinking: 'Thinking',
thinkingInProgress: 'Thinking...',
stopped: 'Generation stopped', stopped: 'Generation stopped',
interrupted: 'Interrupted',
failed: 'Generation failed', failed: 'Generation failed',
retry: 'Retry', retry: 'Retry',
errorCode: 'Error code', errorCode: 'Error code',

2
mateclaw-ui/src/i18n/locales/zh-CN.ts
View File

@ -40,7 +40,9 @@ export default {
error: '连接断开', error: '连接断开',
}, },
thinking: '深度思考', thinking: '深度思考',
thinkingInProgress: '思考中...',
stopped: '已停止生成', stopped: '已停止生成',
interrupted: '已中断',
failed: '生成失败', failed: '生成失败',
retry: '重试', retry: '重试',
errorCode: '错误码', errorCode: '错误码',