fix: think content better animation

src/renderer/src/components/message/MessageBlockThink.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 import { ThinkContent } from '@/components/think-content'
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { usePresenter } from '@/composables/usePresenter'
 import { AssistantMessageBlock } from '@shared/chat'
 const props = defineProps<{
@@ -28,8 +28,13 @@ const configPresenter = usePresenter('configPresenter')
 // kept for potential future scroll anchoring; currently unused
 
 const collapse = ref(false)
+const displayedSeconds = ref(0)
+const UPDATE_INTERVAL = 1000
+const UPDATE_OFFSET = 80
+let updateTimer: ReturnType<typeof setTimeout> | null = null
+
 const reasoningDuration = computed(() => {
-  let duration: number
+  let duration = 0
   if (props.block.reasoning_time) {
     duration = (props.block.reasoning_time.end - props.block.reasoning_time.start) / 1000
   } else {
@@ -39,9 +44,40 @@ const reasoningDuration = computed(() => {
   return parseFloat(duration.toFixed(2))
 })
 
+const updateDisplayedSeconds = () => {
+  const normalized = Number.isFinite(reasoningDuration.value) ? reasoningDuration.value : 0
+  const value = Math.max(0, Math.floor(normalized))
+  displayedSeconds.value = value
+}
+
+const stopTimer = () => {
+  if (updateTimer !== null) {
+    clearTimeout(updateTimer)
+    updateTimer = null
+  }
+}
+
+const scheduleNextUpdate = () => {
+  stopTimer()
+  if (props.block.status !== 'loading') return
+
+  const fallbackDuration = Number.isFinite(reasoningDuration.value)
+    ? reasoningDuration.value * 1000
+    : 0
+  const startTimestamp = props.block.reasoning_time?.start ?? Date.now() - fallbackDuration
+  const now = Date.now()
+  const elapsed = Math.max(0, now - startTimestamp)
+  const remainder = elapsed % UPDATE_INTERVAL
+  const delay = Math.max(UPDATE_INTERVAL - remainder, 0) + UPDATE_OFFSET
+
+  updateTimer = setTimeout(() => {
+    updateDisplayedSeconds()
+    scheduleNextUpdate()
+  }, delay)
+}
+
 const headerText = computed(() => {
-  // Format: "Thought for 20s" (localized)
-  const seconds = Math.max(0, Math.floor(reasoningDuration.value))
+  const seconds = displayedSeconds.value
   return props.block.status === 'loading'
     ? t('chat.features.thoughtForSecondsLoading', { seconds })
     : t('chat.features.thoughtForSeconds', { seconds })
@@ -54,7 +90,33 @@ watch(
   }
 )
 
+watch(
+  () => [props.block.status, props.block.reasoning_time?.start],
+  () => {
+    updateDisplayedSeconds()
+    if (props.block.status === 'loading') {
+      scheduleNextUpdate()
+    } else {
+      stopTimer()
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => reasoningDuration.value,
+  () => {
+    if (props.block.status !== 'loading') {
+      updateDisplayedSeconds()
+    }
+  }
+)
+
 onMounted(async () => {
   collapse.value = Boolean(await configPresenter.getSetting('think_collapse'))
 })
+
+onBeforeUnmount(() => {
+  stopTimer()
+})
 </script>

src/renderer/src/components/think-content/ThinkContent.vue

@@ -7,13 +7,17 @@
       class="inline-flex items-center gap-[10px] cursor-pointer select-none self-start"
       @click="$emit('toggle')"
     >
-      <span class="whitespace-nowrap" :class="{ 'loading-shimmer': thinking }">
+      <span
+        class="whitespace-nowrap"
+        :class="{ 'loading-shimmer': thinking }"
+        :style="shimmerStyle"
+      >
         {{ label }}
       </span>
       <Icon
         v-if="thinking && !expanded"
         icon="lucide:ellipsis"
-        class="w-[14px] h-[14px] text-[rgba(37,37,37,0.5)] dark:text-white/50 animate-pulse"
+        class="w-[14px] h-[14px] text-[rgba(37,37,37,0.5)] dark:text-white/50 animate-[pulse_1s_ease-in-out_infinite]"
       />
       <Icon
         v-else-if="expanded"
@@ -39,27 +43,31 @@
     <Icon
       v-if="thinking && expanded"
       icon="lucide:ellipsis"
-      class="w-[14px] h-[14px] text-[rgba(37,37,37,0.5)] dark:text-white/50 animate-pulse"
+      class="w-[14px] h-[14px] text-[rgba(37,37,37,0.5)] dark:text-white/50 animate-[pulse_1s_ease-in-out_infinite]"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { h } from 'vue'
+import { computed, h, type CSSProperties } from 'vue'
 import NodeRenderer, {
   setCustomComponents,
   CodeBlockNode,
   PreCodeNode
 } from 'vue-renderer-markdown'
 
-defineProps<{
+const props = defineProps<{
   label: string
   expanded: boolean
   thinking: boolean
   content?: string
 }>()
 
+const shimmerStyle = computed<CSSProperties | undefined>(() =>
+  props.thinking ? { '--cot-shimmer-duration': '1s' } : undefined
+)
+
 defineEmits<{
   (e: 'toggle'): void
 }>()