From bb7455da049986abad3b35756b4f0435ff6f55dc Mon Sep 17 00:00:00 2001
From: imccyu <276526105+imccyu@users.noreply.github.com>
Date: Tue, 29 Sep 2026 14:59:23 +0800
Subject: [PATCH] perf(web): inline whale image into CSS at build time

---
 .../src/client/chat/ChatView.module.css        |  2 +-
 .../src/client/chat/RunningWhaleTail.tsx       |  8 ++------
 packages/client/ui-chat/src/css-modules.d.ts   |  5 -----
 packages/client/ui-chat/tsdown.config.ts       | 18 +++++++++---------
 4 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/packages/client/ui-chat/src/client/chat/ChatView.module.css b/packages/client/ui-chat/src/client/chat/ChatView.module.css
index f0101f956b..71c13916b4 100644
--- a/packages/client/ui-chat/src/client/chat/ChatView.module.css
+++ b/packages/client/ui-chat/src/client/chat/ChatView.module.css
@@ -168,7 +168,7 @@
   position: absolute;
   inset: 0;
   background: currentColor;
-  mask: var(--dsh-whale-image) center / 100% 100% no-repeat;
+  mask: url('./running-whale@2x.png') center / 100% 100% no-repeat;
   mask-mode: alpha;
   will-change: transform;
 }
diff --git a/packages/client/ui-chat/src/client/chat/RunningWhaleTail.tsx b/packages/client/ui-chat/src/client/chat/RunningWhaleTail.tsx
index 763cb7b0ec..3faa17144d 100644
--- a/packages/client/ui-chat/src/client/chat/RunningWhaleTail.tsx
+++ b/packages/client/ui-chat/src/client/chat/RunningWhaleTail.tsx
@@ -1,12 +1,8 @@
 /** Native SVG contour animation for the whale Chat shows while the Session runs. */
-import type { CSSProperties } from 'react'
-import whaleImage from './running-whale@2x.png'
 import css from './ChatView.module.css'
 
-const REST_PATH = 'M8.844 13.742C8.967 12.328 8.45 10.4 8.45 9.65C8.45 8.94 8.88 8.43 9.6 8.43C11.285 8.43 12.106 8.281 12.685 8.104C13.71 7.791 14.585 6.768 15.055 5.945C15.137 5.803 14.99 5.641 14.829 5.671C13.829 5.86 12.828 5.376 11.827 4.978C10.659 4.514 9.491 4.707 8.935 4.876C8.805 4.915 8.658 4.819 8.636 4.686C8.468 3.643 7.405 2.615 5.498 2.238C4.54 2.048 3.748 1.574 3.347 1.202C3.252 1.113 3.088 1.125 3.03 1.242C2.628 2.059 2.168 3.82 5.248 6.115C5.82 6.494 6.31 6.785 6.574 7.637C6.72 8.104 6.157 9.168 6.061 9.368C5.157 11.27 5.089 12.19 4.926 13.742'
-
 /** Same cubic segments in every pose keep both tail-base endpoints stationary. */
-const IMAGE_STYLE = { '--dsh-whale-image': `url("${whaleImage}")` } as CSSProperties
+const REST_PATH = 'M8.844 13.742C8.967 12.328 8.45 10.4 8.45 9.65C8.45 8.94 8.88 8.43 9.6 8.43C11.285 8.43 12.106 8.281 12.685 8.104C13.71 7.791 14.585 6.768 15.055 5.945C15.137 5.803 14.99 5.641 14.829 5.671C13.829 5.86 12.828 5.376 11.827 4.978C10.659 4.514 9.491 4.707 8.935 4.876C8.805 4.915 8.658 4.819 8.636 4.686C8.468 3.643 7.405 2.615 5.498 2.238C4.54 2.048 3.748 1.574 3.347 1.202C3.252 1.113 3.088 1.125 3.03 1.242C2.628 2.059 2.168 3.82 5.248 6.115C5.82 6.494 6.31 6.785 6.574 7.637C6.72 8.104 6.157 9.168 6.061 9.368C5.157 11.27 5.089 12.19 4.926 13.742'
 
 /**
  * Loop the tail every three seconds after a 0.3s delay.
@@ -14,7 +10,7 @@ const IMAGE_STYLE = { '--dsh-whale-image': `url("${whaleImage}")` } as CSSProper
  */
 export function RunningWhaleTail() {
   return (
-    <span className={css.runningIcon} style={IMAGE_STYLE} aria-hidden="true">
+    <span className={css.runningIcon} aria-hidden="true">
       <span className={css.runningWhaleAnimated} />
       <svg className={css.runningWhaleStill} width="100%" height="100%" viewBox="0 0 16 16" fill="none">
         <path d={REST_PATH} stroke="currentColor" strokeWidth={1} />
diff --git a/packages/client/ui-chat/src/css-modules.d.ts b/packages/client/ui-chat/src/css-modules.d.ts
index f20703e86f..bc5e482353 100644
--- a/packages/client/ui-chat/src/css-modules.d.ts
+++ b/packages/client/ui-chat/src/css-modules.d.ts
@@ -4,8 +4,3 @@ declare module '*.module.css' {
 }
 
 declare module '*.css'
-
-declare module '*running-whale@2x.png' {
-  const url: string
-  export default url
-}
diff --git a/packages/client/ui-chat/tsdown.config.ts b/packages/client/ui-chat/tsdown.config.ts
index b9b8f3ecf6..7787b8fe34 100644
--- a/packages/client/ui-chat/tsdown.config.ts
+++ b/packages/client/ui-chat/tsdown.config.ts
@@ -3,20 +3,20 @@ import { readFile } from 'node:fs/promises'
 import { fileURLToPath } from 'node:url'
 
 const bundle = clientBundle('@deepseek-ai/dsh-client-ui-chat', ['lib/types/index.js'])
-const whaleImage = fileURLToPath(new URL('./src/client/chat/running-whale@2x.png', import.meta.url)).replaceAll('\\', '/')
+const stylesheet = fileURLToPath(new URL('./src/client/chat/ChatView.module.css', import.meta.url)).replaceAll('\\', '/')
+const whaleImage = fileURLToPath(new URL('./src/client/chat/running-whale@2x.png', import.meta.url))
 
 export default ((options) => bundle(options).map(config => ({
   ...config,
   plugins: [...(config.plugins ?? []), {
     name: 'chat-whale-image',
-    resolveId(source: string) {
-      return source === './running-whale@2x.png' ? whaleImage : null
-    },
-    async load(id: string) {
-      if (id !== whaleImage) return null
-      this.addWatchFile(id)
-      const image = await readFile(id)
-      return `export default ${JSON.stringify(`data:image/png;base64,${image.toString('base64')}`)}`
+    async transform(code: string, id: string) {
+      if (id.replaceAll('\\', '/') !== `\0dsh-css:${stylesheet}.mjs`) return null
+      const imageUrl = './running-whale@2x.png'
+      if (!code.includes(imageUrl)) return null
+      this.addWatchFile(whaleImage)
+      const image = await readFile(whaleImage)
+      return { code: code.replaceAll(imageUrl, `data:image/png;base64,${image.toString('base64')}`), map: null }
     },
   }],
 }))) satisfies typeof bundle