From 625802a4ef53ac916f34edbc7864b44b5ceb5d48 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sun, 13 Apr 2025 23:15:22 +0800
Subject: [PATCH] fix(stage-ui): microphone selector

---
 .../src/components/Layouts/InteractiveArea.vue | 18 ++++++++++++------
 packages/stage-ui/src/stores/settings.ts       |  8 +++++---
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/apps/stage-web/src/components/Layouts/InteractiveArea.vue b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
index 67a5a9467..80e99cbfc 100644
--- a/apps/stage-web/src/components/Layouts/InteractiveArea.vue
+++ b/apps/stage-web/src/components/Layouts/InteractiveArea.vue
@@ -22,7 +22,7 @@ const providersStore = useProvidersStore()
 const { activeProvider, activeModel } = storeToRefs(useConsciousnessStore())
 const { themeColorsHueDynamic } = storeToRefs(useSettings())
 
-const { audioInputs } = useDevicesList({ constraints: { audio: true }, requestPermissions: true })
+const { audioInputs, ensurePermissions } = useDevicesList({ constraints: { audio: true } })
 const { selectedAudioDevice, isAudioInputOn, selectedAudioDeviceId } = storeToRefs(useSettings())
 const { send, onAfterSend } = useChatStore()
 const { messages } = storeToRefs(useChatStore())
@@ -128,6 +128,12 @@ watch(isAudioInputOn, async (value) => {
   }
 })
 
+watch(showMicrophoneSelect, async (value) => {
+  if (value) {
+    await ensurePermissions()
+  }
+})
+
 onAfterSend(async () => {
   messageInput.value = ''
 })
@@ -225,7 +231,7 @@ onAfterSend(async () => {
         </div>
       </div>
     </div>
-    <div flex="~ row" gap-2>
+    <div flex="~ row" hidden gap-2>
       <button
         bg="complementary-100 hover:complementary-200 dark:complementary-800 dark:hover:complementary-700"
         transition="all duration-250 ease-in-out"
@@ -252,12 +258,12 @@ onAfterSend(async () => {
         <TransitionVertical>
           <fieldset
             v-if="showMicrophoneSelect"
-            transform="translate-y--100%" right="-50%" bottom="-10" text="cyan-400 dark:white" bg="white dark:cyan-900" border="solid 4 cyan-200 dark:cyan-800"
-            absolute z-30 rounded-2xl px-2 py-2 text-right text-nowrap text-base font-sans
+            right="0" bottom="[calc(100%+8px)]" text="cyan-400 dark:white" bg="white dark:cyan-900"
+            absolute z-30 h-fit rounded-2xl py-3 pl-3 pr-4 text-right text-nowrap text-sm font-sans
           >
             <label v-for="(input, index) in audioInputs" :key="index" class="[&_div_span]:dark:hover:bg-cyan-300 [&_div_span]:dark:hover:bg-cyan-900">
               <input type="radio" name="audioInput" :value="input.deviceId" hidden @change="handleAudioInputChange">
-              <div flex="~ row" cursor-pointer items-center gap-2 grid="cols-2">
+              <div flex="~ row" cursor-pointer items-center grid="cols-2">
                 <div min-w="6">
                   <div v-if="input.deviceId === selectedAudioDeviceId" i-solar:check-circle-line-duotone />
                 </div>
@@ -277,7 +283,7 @@ onAfterSend(async () => {
           transition="all duration-250 ease-in-out"
           :class="{ 'transition-colors-none': themeColorsHueDynamic }"
           text="complementary-400"
-          mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
+          h-fit flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
         >
           <input v-model="showMicrophoneSelect" type="checkbox" hidden>
           <div i-solar:microphone-2-bold-duotone />
diff --git a/packages/stage-ui/src/stores/settings.ts b/packages/stage-ui/src/stores/settings.ts
index 50db805f5..40c607864 100644
--- a/packages/stage-ui/src/stores/settings.ts
+++ b/packages/stage-ui/src/stores/settings.ts
@@ -14,9 +14,9 @@ export const useSettings = defineStore('settings', () => {
   const language = useLocalStorage('settings/language', 'en-US')
   const stageView = useLocalStorage('settings/stage/view/model-renderer', '2d')
 
-  const isAudioInputOn = useLocalStorage('settings/audio/input', 'true')
+  const isAudioInputOn = useLocalStorage('settings/audio/input', 'false')
   const selectedAudioDeviceId = computed(() => selectedAudioDevice.value?.deviceId)
-  const { audioInputs } = useDevicesList({ constraints: { audio: true }, requestPermissions: true })
+  const { audioInputs, ensurePermissions } = useDevicesList({ constraints: { audio: true } })
 
   // TODO: extract to a separate store, use a single page to do this
   const live2dModelFile = ref<File>()
@@ -68,7 +68,9 @@ export const useSettings = defineStore('settings', () => {
       selectedAudioDevice.value = undefined
     }
     if (value === 'true') {
-      selectedAudioDevice.value = audioInputs.value[0]
+      ensurePermissions().then(() => {
+        selectedAudioDevice.value = audioInputs.value[0]
+      })
     }
   })