style: mobile adaption (#5)

packages/stage/src/auto-imports.d.ts

@@ -319,9 +319,6 @@ declare global {
   // @ts-ignore
   export type { UseWhisperOptions } from './composables/whisper'
   import('./composables/whisper')
-  // @ts-ignore
-  export type { Temporal } from './stores/agent'
-  import('./stores/agent')
 }
 
 // for vue template auto import
@@ -347,7 +344,6 @@ declare module 'vue' {
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
-    readonly createTemporal: UnwrapRef<typeof import('./stores/agent')['createTemporal']>
     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
@@ -433,7 +429,6 @@ declare module 'vue' {
     readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
-    readonly useAgentStore: UnwrapRef<typeof import('./stores/agent')['useAgentStore']>
     readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
     readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
     readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>

packages/stage/src/components/Layouts/InteractiveArea.vue

@@ -158,14 +158,14 @@ onAfterSend(async () => {
         </div>
       </label>
     </fieldset>
-    <div h-full max-h="[85vh]" w-full px-12 py-4>
+    <div h-full max-h="[85vh]" w-full px="12 <md:0" py="4">
       <div
         flex="~ col"
         border="solid 4 pink-100 dark:pink-400/20"
         h-full w-full overflow-scroll rounded-xl
       >
-        <ChatHistory h-full flex-1 p-4 w="full" max-h="[80vh]" />
-        <div flex gap-2>
+        <ChatHistory h-full flex-1 p-4 w="full" max-h="<md:[60%]" />
+        <div h="<md:full" flex gap-2>
           <BasicTextarea
             v-model="messageInput"
             :placeholder="t('stage.message')"

packages/stage/src/components/Scenes/Live2D.vue

@@ -46,7 +46,7 @@ defineExpose({
           h-fit cursor-pointer
           :class="[show ? 'bg-zinc-300 text-zinc-900 dark:bg-zinc-200 dark:text-zinc-800' : '']"
           transition="all ease-in-out duration-500"
-          rounded-md px-2 py-2
+          rounded-md px-2 py-2 z="<md:1000"
         >
           <input
             v-model="show"
@@ -62,7 +62,7 @@ defineExpose({
         </label>
       </div>
       <TransitionVertical>
-        <div v-if="show" absolute w-full top="10" min-w="50vw">
+        <div v-if="show" absolute w-full top="10" min-w="50vw" z="<md:1000">
           <div bg="zinc-200/20 dark:black/20" rounded-lg p-2 backdrop-blur-sm>
             <div font-mono>
               <span>Emotions</span>

packages/stage/src/components/Widgets/ChatHistory.vue

@@ -34,12 +34,14 @@ onTokenLiteral(async () => {
 <template>
   <div
     relative
-    class="<lg:(absolute bottom-0 from-zinc-100/80 to-zinc-800/0 bg-gradient-to-t p-2 dark:from-zinc-800/80)"
+    class="<md:(absolute left-0 top-0 from-zinc-100/80 to-zinc-800/0 bg-gradient-to-t p-2 dark:from-zinc-800/80)"
     px="<sm:2" py="<sm:2" flex="~ col"
     rounded="lg"
     overflow-hidden
   >
-    <div ref="chatHistoryRef" v-auto-animate h-full w-full overflow-scroll>
+    <div flex-1 /> <!-- spacer -->
+    <div ref="chatHistoryRef" v-auto-animate h-full w-full flex="~ col" overflow-scroll>
+      <div flex-1 /> <!-- spacer -->
       <div v-for="(message, index) in messages" :key="index" mb-2>
         <div v-if="message.role === 'assistant'" flex mr="12">
           <div
@@ -48,6 +50,7 @@ onTokenLiteral(async () => {
             shadow="md pink-200/50 dark:none"
             min-w-20 rounded-lg px-2 py-1
             h="unset <sm:fit"
+            bg="<md:pink-500/25"
           >
             <div>
               <span text-xs text="pink-400/90 dark:pink-600/90" font-semibold class="inline <sm:hidden">Airi</span>
@@ -63,6 +66,7 @@ onTokenLiteral(async () => {
             shadow="md teal-200/50 dark:none"
             px="2"
             h="unset <sm:fit" min-w-20 rounded-lg px-2 py-1
+            bg="<md:teal-500/25"
           >
             <div>
               <span text-xs text="teal-400/90 dark:teal-600/90" font-semibold class="inline <sm:hidden">You</span>

packages/stage/src/pages/index.vue

@@ -7,9 +7,9 @@ import Stage from '../components/Widgets/Stage.vue'
 <template>
   <div h-full max-h="[100vh]" max-w="[100vw]" p="2" flex="~ col" overflow-hidden>
     <Header />
-    <div flex="~ row 1" relative h-full w-full items-end gap-2>
-      <Stage w="50%" />
-      <InteractiveArea w="50%" />
+    <div flex="~ row 1 <md:col" relative h-full w-full items-end gap-2>
+      <Stage w="50% <md:100%" h="100% <md:60%" />
+      <InteractiveArea w="50% <md:100%" h="100% <md:40%" />
     </div>
   </div>
 </template>