feat(stage-ui,stage-web): custom chat background (#825)

Author: shinohara-rin

Cargo.toml

@@ -1,5 +1,12 @@
 [workspace]
-members = [ "crates/tauri-plugin-ipc-audio-transcription-ort", "crates/tauri-plugin-ipc-audio-vad-ort", "crates/tauri-plugin-mcp", "crates/tauri-plugin-rdev", "crates/tauri-plugin-window-pass-through-on-hover", "crates/tauri-plugin-window-router-link" ]
+members = [
+  "crates/tauri-plugin-ipc-audio-transcription-ort",
+  "crates/tauri-plugin-ipc-audio-vad-ort",
+  "crates/tauri-plugin-mcp",
+  "crates/tauri-plugin-rdev",
+  "crates/tauri-plugin-window-pass-through-on-hover",
+  "crates/tauri-plugin-window-router-link"
+]
 resolver = "2"
 
 [workspace.package]

apps/stage-web/src/components/Backgrounds/AppBackgroundPickerDialog.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { BackgroundPickerDialog } from '@proj-airi/stage-ui/components'
+import { storeToRefs } from 'pinia'
+
+import { useBackgroundStore } from '../../stores/background'
+
+const show = defineModel<boolean>({ default: false })
+
+const backgroundStore = useBackgroundStore()
+const { options, selectedOption } = storeToRefs(backgroundStore)
+</script>
+
+<template>
+  <BackgroundPickerDialog
+    v-model="show"
+    :selected="selectedOption"
+    :options="options"
+    @apply="backgroundStore.applyPickerSelection"
+    @remove="option => backgroundStore.removeOption(option.id)"
+  />
+</template>

apps/stage-web/src/components/Backgrounds/ChromaticWavePreview.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import AnimatedWave from '../Widgets/AnimatedWave.vue'
+import Cross from './Cross.vue'
+</script>
+
+<template>
+  <Cross>
+    <AnimatedWave
+      fill-color="linear-gradient(120deg, hsl(var(--chromatic-hue) 72% 75%), hsl(var(--chromatic-hue) 70% 62%))"
+      class="h-full w-full"
+    >
+      <div class="relative h-full w-full from-black/10 via-black/0 to-black/0 bg-gradient-to-b" />
+    </AnimatedWave>
+  </Cross>
+</template>

apps/stage-web/src/components/Backgrounds/CustomizedBackground.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { BackgroundItem } from '../../stores/background'
+
+import ThemeOverlay from '@proj-airi/stage-ui/components/ThemeOverlay.vue'
+
+import { useTheme } from '@proj-airi/ui'
+import { computed, ref } from 'vue'
+
+import AnimatedWave from '../Widgets/AnimatedWave.vue'
+import Cross from './Cross.vue'
+
+import { BackgroundKind } from '../../stores/background'
+
+defineProps<{
+  background: BackgroundItem
+  topColor?: string
+}>()
+
+const { isDark: dark } = useTheme()
+const containerRef = ref<HTMLElement | null>(null)
+
+const waveFillColor = computed(() => {
+  const hue = 'var(--chromatic-hue)'
+  return dark.value
+    ? `hsl(${hue} 60% 32%)`
+    : `hsl(${hue} 75% 78%)`
+})
+
+defineExpose({
+  surfaceEl: containerRef,
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="customized-background relative min-h-100dvh w-full overflow-hidden">
+    <!-- Background layers -->
+    <div
+      class="absolute inset-0 z-0 transition-all duration-300"
+      :class="[(background.blur && background.kind !== BackgroundKind.Wave) ? 'blur-md scale-110' : '']"
+    >
+      <template v-if="background.kind === BackgroundKind.Wave">
+        <Cross class="h-full w-full">
+          <AnimatedWave
+            class="h-full w-full"
+            :fill-color="waveFillColor"
+          />
+        </Cross>
+      </template>
+      <template v-else-if="background.kind === BackgroundKind.Image">
+        <img
+          :src="background.src"
+          class="h-full w-full object-cover"
+          loading="lazy"
+          decoding="async"
+        >
+      </template>
+      <template v-else>
+        <div class="h-full w-full bg-neutral-950" />
+      </template>
+    </div>
+
+    <!-- Overlay (not for wave) -->
+    <ThemeOverlay v-if="background.kind !== BackgroundKind.Wave" :color="topColor" />
+
+    <!-- Content layer (kept mounted during background switches) -->
+    <div class="relative z-10 h-full w-full">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+</style>

apps/stage-web/src/components/Layouts/MobileHeaderLink.vue

@@ -1,23 +1,29 @@
 <script setup lang="ts">
 import { useTheme } from '@proj-airi/ui'
+import { storeToRefs } from 'pinia'
 import { RouterLink } from 'vue-router'
 
 import LogoDark from '../../assets/logo-dark.svg'
 import Logo from '../../assets/logo.svg'
 
+import { BackgroundKind, useBackgroundStore } from '../../stores/background'
+
 const { isDark: dark } = useTheme()
+const { selectedOption } = storeToRefs(useBackgroundStore())
 </script>
 
 <template>
   <RouterLink
     to="/" flex="~" items-center
     gap-2 px-2 text-nowrap text-2xl outline-none
   >
-    <template v-if="dark">
-      <img :src="LogoDark" h-8 w-8 class="theme-colored">
-    </template>
-    <template v-else>
-      <img :src="Logo" h-8 w-8 class="theme-colored">
+    <template v-if="selectedOption?.kind === BackgroundKind.Wave">
+      <template v-if="dark">
+        <img :src="LogoDark" h-8 w-8 class="theme-colored">
+      </template>
+      <template v-else>
+        <img :src="Logo" h-8 w-8 class="theme-colored">
+      </template>
     </template>
   </RouterLink>
 </template>

apps/stage-web/src/components/Layouts/MobileInteractiveArea.vue

@@ -15,6 +15,7 @@ import { onMounted, onUnmounted, ref, useTemplateRef, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 
+import AppBackgroundPickerDialog from '../Backgrounds/AppBackgroundPickerDialog.vue'
 import IndicatorMicVolume from '../Widgets/IndicatorMicVolume.vue'
 import ActionAbout from './InteractiveArea/Actions/About.vue'
 import ActionViewControls from './InteractiveArea/Actions/ViewControls.vue'
@@ -29,6 +30,7 @@ const viewControlsInputsRef = useTemplateRef<InstanceType<typeof ViewControlInpu
 
 const messageInput = ref('')
 const isComposing = ref(false)
+const backgroundDialogOpen = ref(false)
 
 const screenSafeArea = useScreenSafeArea()
 const providersStore = useProvidersStore()
@@ -130,6 +132,7 @@ onMounted(() => {
 
 <template>
   <div fixed bottom-0 w-full flex flex-col>
+    <AppBackgroundPickerDialog v-model="backgroundDialogOpen" />
     <KeepAlive>
       <Transition name="fade">
         <ChatHistory
@@ -180,6 +183,9 @@ onMounted(() => {
               <div v-else i-solar:sun-2-outline size-5 text="neutral-500 dark:neutral-400" />
             </Transition>
           </button>
+          <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="Background" @click="backgroundDialogOpen = true">
+            <div i-solar:gallery-wide-bold-duotone size-5 text="neutral-500 dark:neutral-400" />
+          </button>
           <!-- <button border="2 solid neutral-100/60 dark:neutral-800/30" bg="neutral-50/70 dark:neutral-800/70" w-fit flex items-center self-end justify-center rounded-xl p-2 backdrop-blur-md title="Language">
             <div i-solar:earth-outline size-5 text="neutral-500 dark:neutral-400" />
           </button> -->

apps/stage-web/src/components/Widgets/ChatActionButtons.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
 import { useChatStore } from '@proj-airi/stage-ui/stores/chat'
 import { useTheme } from '@proj-airi/ui'
+import { ref } from 'vue'
+
+import AppBackgroundPickerDialog from '../Backgrounds/AppBackgroundPickerDialog.vue'
 
 const { cleanupMessages } = useChatStore()
 const { isDark, toggleDark } = useTheme()
+
+const backgroundDialogOpen = ref(false)
 </script>
 
 <template>
+  <AppBackgroundPickerDialog v-model="backgroundDialogOpen" />
   <div absolute bottom--8 right-0 flex gap-2>
     <button
       class="max-h-[10lh] min-h-[1lh]"
@@ -33,5 +39,16 @@ const { isDark, toggleDark } = useTheme()
         <div v-else i-solar:sun-2-bold />
       </Transition>
     </button>
+    <button
+      class="max-h-[10lh] min-h-[1lh]"
+      bg="neutral-100 dark:neutral-800"
+      text="lg neutral-500 dark:neutral-400"
+      flex items-center justify-center rounded-md p-2 outline-none
+      transition-colors transition-transform active:scale-95
+      title="Background"
+      @click="backgroundDialogOpen = true"
+    >
+      <div i-solar:gallery-wide-bold-duotone />
+    </button>
   </div>
 </template>

apps/stage-web/src/composables/theme-color.ts

@@ -1,7 +1,18 @@
+import type { Ref } from 'vue'
+
+import type CustomizedBackground from '../components/Backgrounds/CustomizedBackground.vue'
+import type { BackgroundItem } from '../stores/background'
+
 import Color from 'colorjs.io'
 
 import { withRetry } from '@moeru/std'
+import { colorFromElement, patchThemeSamplingHtml2CanvasClone } from '@proj-airi/stage-ui/libs'
+import { useSettings } from '@proj-airi/stage-ui/stores/settings'
 import { useTheme } from '@proj-airi/ui'
+import { useDocumentVisibility, useIntervalFn } from '@vueuse/core'
+import { nextTick, watch } from 'vue'
+
+import { BackgroundKind } from '../stores/background'
 
 export function themeColorFromPropertyOf(colorFromClass: string, property: string): () => Promise<string> {
   return async () => {
@@ -44,3 +55,140 @@ export function useThemeColor(colorFrom: () => string | Promise<string>) {
     updateThemeColor,
   }
 }
+
+export function useBackgroundThemeColor({
+  backgroundSurface,
+  selectedOption,
+  sampledColor,
+}: {
+  backgroundSurface: Ref<InstanceType<typeof CustomizedBackground> | undefined | null>
+  selectedOption: Ref<BackgroundItem | undefined>
+  sampledColor: Ref<string>
+}) {
+  const { themeColorsHue, themeColorsHueDynamic } = useSettings()
+
+  let samplingToken = 0
+
+  const { isDark } = useTheme()
+
+  function getWaveThemeColor() {
+    // We read directly from computed style to catch the animation value
+    return isDark.value ? `hsl(${themeColorsHue} 60% 32%)` : `hsl(${themeColorsHue} 75% 78%)`
+  }
+
+  const { updateThemeColor } = useThemeColor(() => {
+    if (selectedOption.value?.kind === BackgroundKind.Wave) {
+      return getWaveThemeColor()
+    }
+    return sampledColor.value
+  })
+
+  // Keep theme-color reasonably fresh for animated wave backgrounds without doing per-frame work.
+  const { pause, resume } = useIntervalFn(() => {
+    if (useDocumentVisibility().value !== 'visible')
+      return
+    if (selectedOption.value?.kind === BackgroundKind.Wave && themeColorsHueDynamic)
+      void updateThemeColor()
+  }, 250, { immediate: false })
+
+  watch([() => selectedOption.value?.kind, () => themeColorsHueDynamic], ([kind, dynamic]) => {
+    if (kind === BackgroundKind.Wave && dynamic) {
+      void updateThemeColor()
+      resume()
+    }
+    else {
+      pause()
+    }
+  }, { immediate: true })
+
+  async function waitForBackgroundReady() {
+    await nextTick()
+    const image = backgroundSurface.value?.surfaceEl?.querySelector('img')
+    if (image && !image.complete) {
+      await new Promise<void>((resolve, reject) => {
+        image.addEventListener('load', () => resolve(), { once: true })
+        image.addEventListener('error', () => reject(new Error('Background image failed to load')), { once: true })
+      })
+    }
+  }
+
+  // Exposed for optional manual triggers; also used within syncBackgroundTheme.
+  async function sampleBackgroundColor() {
+    const token = ++samplingToken
+    const optionId = selectedOption.value?.id
+    if (selectedOption.value?.kind === BackgroundKind.Wave) {
+      await updateThemeColor()
+      return
+    }
+
+    const el = backgroundSurface.value?.surfaceEl
+    if (!el)
+      return
+
+    await waitForBackgroundReady()
+
+    const result = await colorFromElement(el, {
+      mode: 'html2canvas',
+      html2canvas: {
+        region: {
+          x: 0,
+          y: 0,
+          width: el.offsetWidth,
+          height: Math.min(140, el.offsetHeight),
+        },
+        sampleHeight: 20,
+        sampleStride: 10,
+        scale: 0.5,
+        backgroundColor: null,
+        allowTaint: true,
+        useCORS: true,
+        onclone: patchThemeSamplingHtml2CanvasClone,
+      },
+    })
+
+    const color = result.html2canvas?.average
+    if (token !== samplingToken)
+      return
+    if (optionId && selectedOption.value?.id !== optionId)
+      return
+
+    if (color) {
+      sampledColor.value = color
+    }
+  }
+
+  async function syncBackgroundTheme() {
+    if (selectedOption.value?.kind === BackgroundKind.Wave) {
+      await updateThemeColor()
+    }
+    else if (sampledColor.value) {
+      await updateThemeColor()
+    }
+    else {
+      await sampleBackgroundColor()
+    }
+  }
+
+  watch([selectedOption], () => {
+    syncBackgroundTheme()
+  }, { immediate: true })
+
+  watch(sampledColor, () => {
+    syncBackgroundTheme()
+  })
+
+  watch(() => backgroundSurface.value?.surfaceEl, (el) => {
+    if (el)
+      syncBackgroundTheme()
+  })
+
+  watch(isDark, () => {
+    syncBackgroundTheme()
+  })
+
+  return {
+    sampledColor,
+    sampleBackgroundColor,
+    syncBackgroundTheme,
+  }
+}