From 5959ada6594bce586ebd2a53b14ceb12c353e52f Mon Sep 17 00:00:00 2001
From: LemonNeko <self@lemonneko.moe>
Date: Thu, 26 Dec 2024 03:32:18 +0800
Subject: [PATCH] style: mobile adaption (#5)

---
 packages/stage/src/auto-imports.d.ts                      | 5 -----
 packages/stage/src/components/Layouts/InteractiveArea.vue | 6 +++---
 packages/stage/src/components/Scenes/Live2D.vue           | 4 ++--
 packages/stage/src/components/Widgets/ChatHistory.vue     | 8 ++++++--
 packages/stage/src/pages/index.vue                        | 6 +++---
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/packages/stage/src/auto-imports.d.ts b/packages/stage/src/auto-imports.d.ts
index cd9cdf3..3d534ef 100644
--- a/packages/stage/src/auto-imports.d.ts
+++ b/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']>
diff --git a/packages/stage/src/components/Layouts/InteractiveArea.vue b/packages/stage/src/components/Layouts/InteractiveArea.vue
index 8d284e4..d428c4a 100644
--- a/packages/stage/src/components/Layouts/InteractiveArea.vue
+++ b/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')"
diff --git a/packages/stage/src/components/Scenes/Live2D.vue b/packages/stage/src/components/Scenes/Live2D.vue
index edb0915..3b524bd 100644
--- a/packages/stage/src/components/Scenes/Live2D.vue
+++ b/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>
diff --git a/packages/stage/src/components/Widgets/ChatHistory.vue b/packages/stage/src/components/Widgets/ChatHistory.vue
index d587943..d0f5667 100644
--- a/packages/stage/src/components/Widgets/ChatHistory.vue
+++ b/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>
diff --git a/packages/stage/src/pages/index.vue b/packages/stage/src/pages/index.vue
index 1ff4ca3..fd8b7d3 100644
--- a/packages/stage/src/pages/index.vue
+++ b/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>