From ac14c10efc9c2280445e53bc21a59d11e5dc688e Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 17 Dec 2024 11:26:17 +0800
Subject: [PATCH] chore: new ui chat ui

---
 .../src/components/Layouts/InteractiveArea.vue   |  7 +++----
 .../stage/src/components/Widgets/ChatHistory.vue | 16 ++++++++--------
 packages/stage/src/stores/chat.ts                |  5 +----
 packages/stage/src/typed-router.d.ts             |  7 -------
 4 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/packages/stage/src/components/Layouts/InteractiveArea.vue b/packages/stage/src/components/Layouts/InteractiveArea.vue
index 709e69f78..91a7834da 100644
--- a/packages/stage/src/components/Layouts/InteractiveArea.vue
+++ b/packages/stage/src/components/Layouts/InteractiveArea.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import SakuraPetal from '../Backgrounds/SakuraPetal.vue'
 import ChatHistory from '../Widgets/ChatHistory.vue'
 
 const tab = ref<'chat' | 'custom' | 'clothes'>('chat')
 </script>
 
 <template>
-  <div flex="~ col" h-full items-center pt-4>
+  <div flex="~ col" h-full w-full items-center pt-4>
     <fieldset flex="~ row" w-fit rounded-lg>
       <label
         :class="[
@@ -70,9 +69,9 @@ const tab = ref<'chat' | 'custom' | 'clothes'>('chat')
       </label>
     </fieldset>
     <div h-full max-h="[85vh]" w-full px-12 py-4>
-      <SakuraPetal border="solid 2 pink-100 dark:pink-400/20" h-full w-full overflow-scroll rounded-xl p-4>
+      <div border="solid 2 pink-100 dark:pink-400/20" h-full w-full overflow-scroll rounded-xl p-4>
         <ChatHistory />
-      </SakuraPetal>
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/stage/src/components/Widgets/ChatHistory.vue b/packages/stage/src/components/Widgets/ChatHistory.vue
index 63ecdcafa..b3460f32a 100644
--- a/packages/stage/src/components/Widgets/ChatHistory.vue
+++ b/packages/stage/src/components/Widgets/ChatHistory.vue
@@ -35,22 +35,22 @@ onTokenLiteral(async () => {
   <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)"
-    px="<sm:2" py="<sm:2" w="50% <lg:full" flex="~ col 1"
+    px="<sm:2" py="<sm:2" w="full" flex="~ col 1"
     rounded="lg" max-h="[80vh]"
     overflow-hidden
   >
-    <div ref="chatHistoryRef" h-full w-full overflow-scroll>
+    <div ref="chatHistoryRef" v-auto-animate h-full w-full overflow-scroll>
       <div v-for="(message, index) in messages" :key="index" mb-2>
         <div v-if="message.role === 'assistant'" flex mr="12">
           <div
             flex="~ col"
-            bg="pink-50 dark:pink-900"
-            border="2 solid pink dark:pink-700"
+            border="2 solid pink-200/50 dark:pink-500/50"
+            shadow="md pink-200/50 dark:pink-500/50"
             min-w-20 rounded-lg px-2 py-1
             h="unset <sm:fit"
           >
             <div>
-              <span text-xs text="black/50 dark:white/50" font-semibold class="inline <sm:hidden">Airi</span>
+              <span text-xs text="pink-400/90 dark:pink-600/90" font-semibold class="inline <sm:hidden">Airi</span>
             </div>
             <div v-if="message.content" class="markdown-content" text="base <sm:xs" v-html="process(message.content as string)" />
             <div v-else i-eos-icons:three-dots-loading />
@@ -59,13 +59,13 @@ onTokenLiteral(async () => {
         <div v-else-if="message.role === 'user'" flex="~ row-reverse" ml="12">
           <div
             flex="~ col"
-            bg="purple-50 dark:purple-900"
+            border="2 solid emerald-200/50 dark:emerald-500/50"
+            shadow="md emerald-200/50"
             px="2"
-            border="2 solid purple dark:purple-700"
             h="unset <sm:fit" min-w-20 rounded-lg px-2 py-1
           >
             <div>
-              <span text-xs text="black/50 dark:white/50" font-semibold class="inline <sm:hidden">You</span>
+              <span text-xs text="emerald-400/90 dark:emerald-600/90" font-semibold class="inline <sm:hidden">You</span>
             </div>
             <div v-if="message.content" class="markdown-content" text="base <sm:xs" whitespace-nowrap v-html="process(message.content as string)" />
             <div v-else />
diff --git a/packages/stage/src/stores/chat.ts b/packages/stage/src/stores/chat.ts
index 01e075aae..0a6cb5fad 100644
--- a/packages/stage/src/stores/chat.ts
+++ b/packages/stage/src/stores/chat.ts
@@ -51,11 +51,8 @@ export const useChatStore = defineStore('chat', () => {
       t('prompt.prefix'),
       t('prompt.suffix'),
     ),
-    { role: 'assistant', content: 'ABCD' },
-    { role: 'user', content: 'ABCD' },
-    { role: 'assistant', content: 'ABCD' },
-    { role: 'user', content: 'ABCD' },
   ])
+
   const streamingMessage = ref<AssistantMessage>({ role: 'assistant', content: '' })
 
   async function send(sendingMessage: string, options?: {
diff --git a/packages/stage/src/typed-router.d.ts b/packages/stage/src/typed-router.d.ts
index 378537d4f..507aa9159 100644
--- a/packages/stage/src/typed-router.d.ts
+++ b/packages/stage/src/typed-router.d.ts
@@ -18,12 +18,5 @@ declare module 'vue-router/auto-routes' {
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
-    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
-    '/audio': RouteRecordInfo<'/audio', '/audio', Record<never, never>, Record<never, never>>,
-    '/queue': RouteRecordInfo<'/queue', '/queue', Record<never, never>, Record<never, never>>,
-    '/test/filter-message': RouteRecordInfo<'/test/filter-message', '/test/filter-message', Record<never, never>, Record<never, never>>,
-    '/test/queues/delays': RouteRecordInfo<'/test/queues/delays', '/test/queues/delays', Record<never, never>, Record<never, never>>,
-    '/test/queues/emotions': RouteRecordInfo<'/test/queues/emotions', '/test/queues/emotions', Record<never, never>, Record<never, never>>,
-    '/test/queues/messages': RouteRecordInfo<'/test/queues/messages', '/test/queues/messages', Record<never, never>, Record<never, never>>,
   }
 }