feat(stage-ui): chat sync (#1775)

packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue

@@ -4,6 +4,7 @@ import type { ChatProvider } from '@xsai-ext/providers/utils'
 
 import { useThreeViewControl } from '@proj-airi/stage-ui-three'
 import { ChatHistory, HearingConfigDialog } from '@proj-airi/stage-ui/components'
+import { ChatSessionsDrawer } from '@proj-airi/stage-ui/components/scenarios/chat'
 import { useAudioAnalyzer } from '@proj-airi/stage-ui/composables'
 import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
 import { useChatOrchestratorStore } from '@proj-airi/stage-ui/stores/chat'
@@ -45,6 +46,7 @@ function handleDeleteMessage(index: number) {
 const messageInput = ref('')
 const isComposing = ref(false)
 const backgroundDialogOpen = ref(false)
+const sessionsDrawerOpen = ref(false)
 
 const screenSafeArea = useScreenSafeArea()
 const providersStore = useProvidersStore()
@@ -173,6 +175,16 @@ onMounted(() => {
       <div translate-y="[-100%]" absolute right-0 px-3 pb-3 font-sans>
         <div flex="~ col" gap-1>
           <ActionAbout />
+          <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="Conversations"
+            @click="sessionsDrawerOpen = true"
+          >
+            <div i-solar:chat-line-bold-duotone size-5 text="neutral-500 dark:neutral-400" />
+          </button>
+          <ChatSessionsDrawer v-model="sessionsDrawerOpen" />
           <HearingConfigDialog
             v-model:show="hearingDialogOpen"
             v-model:enabled="enabled"

packages/stage-layouts/src/components/Widgets/ChatArea.vue

@@ -3,6 +3,7 @@ import type { ChatProvider } from '@xsai-ext/providers/utils'
 
 import { errorMessageFrom } from '@moeru/std'
 import { isStageTamagotchi } from '@proj-airi/stage-shared'
+import { ChatSessionsDrawer } from '@proj-airi/stage-ui/components/scenarios/chat'
 import { useAudioAnalyzer } from '@proj-airi/stage-ui/composables'
 import { useAudioContext } from '@proj-airi/stage-ui/stores/audio'
 import { useChatOrchestratorStore } from '@proj-airi/stage-ui/stores/chat'
@@ -22,6 +23,7 @@ import IndicatorMicVolume from './IndicatorMicVolume.vue'
 
 const messageInput = ref('')
 const hearingPopoverOpen = ref(false)
+const sessionsDrawerOpen = ref(false)
 const isComposing = ref(false)
 const isListening = ref(false) // Transcription listening state (separate from microphone enabled)
 const DOUBLE_ENTER_INTERVAL_MS = 300
@@ -483,6 +485,20 @@ watch(sendMode, () => {
       <div
         absolute bottom-2 left-2 z-10 flex items-center gap-2
       >
+        <!-- Conversations drawer trigger -->
+        <button
+          :class="[
+            'h-8 w-8 flex items-center justify-center rounded-md outline-none transition-all duration-200 active:scale-95',
+            'text-lg text-neutral-500 dark:text-neutral-400',
+          ]"
+          title="Conversations"
+          @click="sessionsDrawerOpen = true"
+        >
+          <div class="i-solar:chat-line-bold-duotone h-5 w-5" />
+        </button>
+
+        <ChatSessionsDrawer v-model="sessionsDrawerOpen" />
+
         <DropdownMenuRoot>
           <DropdownMenuTrigger as-child>
             <button