From 4e1750a7926a21f24c15ef3426b9e68f8f0dc37e Mon Sep 17 00:00:00 2001
From: taoxu <taoxu@example.com>
Date: Sun, 17 May 2026 23:13:20 +0800
Subject: [PATCH] feat: configurable thinking animation with file upload
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add a new display setting that lets users upload a custom GIF or video
to replace the default thinking animation shown while the AI is responding.

Changes:
- config.ts: add thinking_video_url to DisplayConfig interface
- MessageList.vue: use custom URL when set (img for GIF, video for mp4/webm),
  fall back to bundled thinking-light/dark.mp4 based on theme
- DisplaySettings.vue: replace URL text input with upload button; uploads
  file to server and auto-saves the resulting URL
- upload.ts (controller): add handleThinkingAnimationUpload — validates ext
  (gif/mp4/webm/png/jpg/webp), saves to uploadDir with random filename,
  returns /user-uploads/<name> URL
- upload.ts (routes): register POST /api/hermes/upload/thinking-animation
- index.ts: serve /user-uploads/* from config.uploadDir (persists across builds)
- i18n en/zh: add thinkingVideoUrl, thinkingVideoUrlHint, thinkingVideoUrlUpload,
  thinkingVideoUrlReplace, thinkingVideoUrlClear keys
---
 packages/client/src/api/hermes/config.ts      |  1 +
 .../components/hermes/chat/MessageList.vue    | 22 +++++-
 .../hermes/settings/DisplaySettings.vue       | 67 ++++++++++++++++++-
 packages/client/src/i18n/locales/en.ts        |  5 ++
 packages/client/src/i18n/locales/zh.ts        |  5 ++
 packages/server/src/controllers/upload.ts     | 48 +++++++++++++
 packages/server/src/index.ts                  | 10 +++
 packages/server/src/routes/upload.ts          |  1 +
 8 files changed, 157 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/api/hermes/config.ts b/packages/client/src/api/hermes/config.ts
index 82be95050..9928839e0 100644
--- a/packages/client/src/api/hermes/config.ts
+++ b/packages/client/src/api/hermes/config.ts
@@ -11,6 +11,7 @@ export interface DisplayConfig {
   inline_diffs?: boolean
   show_cost?: boolean
   skin?: string
+  thinking_video_url?: string
 }
 
 export interface AgentConfig {
diff --git a/packages/client/src/components/hermes/chat/MessageList.vue b/packages/client/src/components/hermes/chat/MessageList.vue
index 8442e8676..846a7b376 100644
--- a/packages/client/src/components/hermes/chat/MessageList.vue
+++ b/packages/client/src/components/hermes/chat/MessageList.vue
@@ -6,12 +6,25 @@ import { useChatStore } from "@/stores/hermes/chat";
 import thinkingVideoLight from "@/assets/thinking-light.mp4";
 import thinkingVideoDark from "@/assets/thinking-dark.mp4";
 import { useTheme } from "@/composables/useTheme";
+import { useSettingsStore } from "@/stores/hermes/settings";
 import { useToolTraceVisibility } from "@/composables/useToolTraceVisibility";
 
 const chatStore = useChatStore();
 const { t } = useI18n();
 const { isDark } = useTheme();
+const settingsStore = useSettingsStore();
 const { toolTraceVisible } = useToolTraceVisibility();
+
+const thinkingIsGif = computed(() => {
+  const url = settingsStore.display?.thinking_video_url?.trim()
+  return !!url && /\.gif(\?.*)?$/i.test(url)
+})
+
+const thinkingVideoSrc = computed(() => {
+  const custom = settingsStore.display.thinking_video_url;
+  if (custom && custom.trim()) return custom.trim();
+  return isDark.value ? thinkingVideoDark : thinkingVideoLight;
+});
 const listRef = ref<HTMLElement>();
 
 function formatTokens(n: number): string {
@@ -172,8 +185,15 @@ watch(currentToolCalls, () => {
     />
     <Transition name="fade">
       <div v-if="chatStore.isRunActive || chatStore.abortState" class="streaming-indicator">
+        <img
+          v-if="thinkingIsGif"
+          :src="thinkingVideoSrc"
+          class="thinking-video"
+          alt="thinking"
+        />
         <video
-          :src="isDark ? thinkingVideoDark : thinkingVideoLight"
+          v-else
+          :src="thinkingVideoSrc"
           autoplay
           loop
           muted
diff --git a/packages/client/src/components/hermes/settings/DisplaySettings.vue b/packages/client/src/components/hermes/settings/DisplaySettings.vue
index 8cc0546f8..96cd8862d 100644
--- a/packages/client/src/components/hermes/settings/DisplaySettings.vue
+++ b/packages/client/src/components/hermes/settings/DisplaySettings.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { NSwitch, NSelect, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { NSwitch, NSelect, NButton, useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useSettingsStore } from '@/stores/hermes/settings'
 import { useTheme, type BrightnessMode } from '@/composables/useTheme'
@@ -30,6 +31,35 @@ function handleThemeChange(val: string) {
   setBrightness(m)
   save({ skin: m })
 }
+
+const animationUploading = ref(false)
+const animationFileInput = ref<HTMLInputElement | null>(null)
+
+async function handleAnimationFile(e: Event) {
+  const file = (e.target as HTMLInputElement).files?.[0]
+  if (!file) return
+  animationUploading.value = true
+  try {
+    const fd = new FormData()
+    fd.append('file', file)
+    const res = await fetch('/api/hermes/upload/thinking-animation', { method: 'POST', body: fd })
+    if (!res.ok) {
+      const err = await res.json().catch(() => ({ error: res.statusText }))
+      throw new Error(err.error || res.statusText)
+    }
+    const { url } = await res.json()
+    await save({ thinking_video_url: url })
+  } catch (err: any) {
+    message.error(err.message || t('settings.saveFailed'))
+  } finally {
+    animationUploading.value = false
+    if (animationFileInput.value) animationFileInput.value.value = ''
+  }
+}
+
+async function clearAnimation() {
+  await save({ thinking_video_url: undefined })
+}
 </script>
 
 <template>
@@ -58,6 +88,26 @@ function handleThemeChange(val: string) {
     <SettingRow :label="t('settings.display.busyInputMode')" :hint="t('settings.display.busyInputModeHint')">
       <NSwitch :value="settingsStore.display.busy_input_mode === 'interrupt'" @update:value="v => save({ busy_input_mode: v ? 'interrupt' : 'off' })" />
     </SettingRow>
+    <SettingRow :label="t('settings.display.thinkingVideoUrl')" :hint="t('settings.display.thinkingVideoUrlHint')">
+      <div class="animation-upload">
+        <span v-if="settingsStore.display.thinking_video_url" class="animation-filename">
+          {{ settingsStore.display.thinking_video_url.split('/').pop() }}
+        </span>
+        <NButton size="small" :loading="animationUploading" @click="animationFileInput?.click()">
+          {{ settingsStore.display.thinking_video_url ? t('settings.display.thinkingVideoUrlReplace') : t('settings.display.thinkingVideoUrlUpload') }}
+        </NButton>
+        <NButton v-if="settingsStore.display.thinking_video_url" size="small" @click="clearAnimation">
+          {{ t('settings.display.thinkingVideoUrlClear') }}
+        </NButton>
+        <input
+          ref="animationFileInput"
+          type="file"
+          accept=".gif,.mp4,.webm,.png,.jpg,.jpeg,.webp"
+          style="display:none"
+          @change="handleAnimationFile"
+        />
+      </div>
+    </SettingRow>
   </section>
 </template>
 
@@ -67,4 +117,19 @@ function handleThemeChange(val: string) {
 .settings-section {
   margin-top: 16px;
 }
+
+.animation-upload {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.animation-filename {
+  font-size: 12px;
+  opacity: 0.7;
+  max-width: 160px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>
diff --git a/packages/client/src/i18n/locales/en.ts b/packages/client/src/i18n/locales/en.ts
index 57627be97..8dfb03112 100644
--- a/packages/client/src/i18n/locales/en.ts
+++ b/packages/client/src/i18n/locales/en.ts
@@ -734,6 +734,11 @@ export default {
       bellOnCompleteHint: 'Play sound when AI finishes',
       busyInputMode: 'Busy Input Mode',
       busyInputModeHint: 'Allow input while AI is processing',
+        thinkingVideoUrl: 'Thinking Animation',
+        thinkingVideoUrlHint: 'Upload a GIF or video to replace the default thinking animation.',
+        thinkingVideoUrlUpload: 'Upload',
+        thinkingVideoUrlReplace: 'Replace',
+        thinkingVideoUrlClear: 'Clear',
       theme: 'Theme',
       themeHint: 'Choose light, dark, or follow system preference',
       themeLight: 'Light',
diff --git a/packages/client/src/i18n/locales/zh.ts b/packages/client/src/i18n/locales/zh.ts
index 5ca72727f..aefa6ddec 100644
--- a/packages/client/src/i18n/locales/zh.ts
+++ b/packages/client/src/i18n/locales/zh.ts
@@ -726,6 +726,11 @@ export default {
       bellOnCompleteHint: 'AI 回复完成时播放提示音',
       busyInputMode: '忙碌输入模式',
       busyInputModeHint: 'AI 处理中仍可输入',
+        thinkingVideoUrl: '思考动画',
+        thinkingVideoUrlHint: '上传 GIF 或视频，替换默认的思考动画。',
+        thinkingVideoUrlUpload: '上传',
+        thinkingVideoUrlReplace: '替换',
+        thinkingVideoUrlClear: '清除',
       theme: '主题',
       themeHint: '选择浅色、暗色或跟随系统',
       themeLight: '浅色',
diff --git a/packages/server/src/controllers/upload.ts b/packages/server/src/controllers/upload.ts
index 1b083149d..87006ca99 100644
--- a/packages/server/src/controllers/upload.ts
+++ b/packages/server/src/controllers/upload.ts
@@ -50,6 +50,54 @@ export async function handleUpload(ctx: any) {
   ctx.body = { files: results }
 }
 
+const ALLOWED_ANIMATION_EXTS = new Set(['.gif', '.mp4', '.webm', '.png', '.jpg', '.jpeg', '.webp'])
+
+export async function handleThinkingAnimationUpload(ctx: any) {
+  const contentType = ctx.get('content-type') || ''
+  if (!contentType.startsWith('multipart/form-data')) {
+    ctx.status = 400; ctx.body = { error: 'Expected multipart/form-data' }; return
+  }
+  const boundary = '--' + contentType.split('boundary=')[1]
+  if (!boundary || boundary === '--undefined') {
+    ctx.status = 400; ctx.body = { error: 'Missing boundary' }; return
+  }
+  const chunks: Buffer[] = []
+  let totalSize = 0
+  for await (const chunk of ctx.req) {
+    totalSize += chunk.length
+    if (totalSize > MAX_UPLOAD_SIZE) {
+      ctx.status = 413; ctx.body = { error: `File too large (max ${MAX_UPLOAD_SIZE / 1024 / 1024}MB)` }; return
+    }
+    chunks.push(chunk)
+  }
+  const raw = Buffer.concat(chunks)
+  const boundaryBuf = Buffer.from(boundary)
+  const parts = splitMultipart(raw, boundaryBuf)
+  for (const part of parts) {
+    const headerEnd = part.indexOf(Buffer.from('\r\n\r\n'))
+    if (headerEnd === -1) continue
+    const header = part.subarray(0, headerEnd).toString('utf-8')
+    const data = part.subarray(headerEnd + 4, part.length - 2)
+    let filename = ''
+    const filenameStarMatch = header.match(/filename\*=UTF-8''(.+)/i)
+    if (filenameStarMatch) { filename = decodeURIComponent(filenameStarMatch[1]) }
+    else {
+      const filenameMatch = header.match(/filename="([^"]+)"/)
+      if (!filenameMatch) continue
+      filename = filenameMatch[1]
+    }
+    const ext = (filename.includes('.') ? '.' + filename.split('.').pop()! : '').toLowerCase()
+    if (!ALLOWED_ANIMATION_EXTS.has(ext)) {
+      ctx.status = 400; ctx.body = { error: `Unsupported file type: ${ext}. Allowed: gif, mp4, webm, png, jpg, webp` }; return
+    }
+    const savedName = randomBytes(8).toString('hex') + ext
+    await writeFile(join(config.uploadDir, savedName), data)
+    ctx.body = { url: `/user-uploads/${savedName}` }
+    return
+  }
+  ctx.status = 400; ctx.body = { error: 'No file found in request' }
+}
+
 function splitMultipart(raw: Buffer, boundary: Buffer): Buffer[] {
   const parts: Buffer[] = []
   let start = 0
diff --git a/packages/server/src/index.ts b/packages/server/src/index.ts
index e978d272e..079450094 100644
--- a/packages/server/src/index.ts
+++ b/packages/server/src/index.ts
@@ -125,6 +125,16 @@ export async function bootstrap() {
     logger.info('Auth enabled — token: %s', authToken)
   }
 
+  // Serve user-uploaded files (thinking animation, etc.)
+  app.use(async (ctx, next) => {
+    if (ctx.path.startsWith('/user-uploads/')) {
+      ctx.path = ctx.path.slice('/user-uploads'.length)
+      await serve(config.uploadDir)(ctx, next)
+    } else {
+      await next()
+    }
+  })
+
   // SPA fallback
   const distDir = resolve(__dirname, '..', 'client')
   app.use(serve(distDir))
diff --git a/packages/server/src/routes/upload.ts b/packages/server/src/routes/upload.ts
index 0407e82eb..164d7bdc6 100644
--- a/packages/server/src/routes/upload.ts
+++ b/packages/server/src/routes/upload.ts
@@ -4,3 +4,4 @@ import * as ctrl from '../controllers/upload'
 export const uploadRoutes = new Router()
 
 uploadRoutes.post('/upload', ctrl.handleUpload)
+uploadRoutes.post('/api/hermes/upload/thinking-animation', ctrl.handleThinkingAnimationUpload)