style: ui adjust

moeru-ai · Dec 25, 2024 · 70f4965 · 70f4965
1 parent f4e9c67
commit 70f4965
Show file tree

Hide file tree

Showing 9 changed files with 154 additions and 291 deletions.
diff --git a/cspell.config.yaml b/cspell.config.yaml
@@ -49,6 +49,7 @@ words:
   - onnx
   - onnxruntime
   - openai
+  - picklist
   - pinia
   - pixi
   - pixiv
@@ -59,9 +60,11 @@ words:
   - sizecheck
   - taze
   - tresjs
+  - typeschema
   - unhead
   - unocss
   - unplugin
+  - valibot
   - vrma
   - vueuse
   - webgpu

diff --git a/packages/stage/package.json b/packages/stage/package.json
@@ -20,6 +20,7 @@
   "dependencies": {
     "@11labs/client": "^0.0.4",
     "@formkit/auto-animate": "^0.8.2",
+    "@gcornut/valibot-json-schema": "^0.42.0",
     "@huggingface/transformers": "^3.2.1",
     "@pixi/app": "^6.5.10",
     "@pixi/constants": "6",
@@ -40,13 +41,16 @@
     "@tresjs/cientos": "^4.0.3",
     "@tresjs/core": "^4.3.1",
     "@types/yauzl": "^2.10.3",
+    "@typeschema/valibot": "^0.14.0",
     "@unhead/vue": "^1.11.14",
     "@unocss/reset": "^0.65.2",
     "@vueuse/core": "^12.1.0",
     "@vueuse/head": "^2.0.0",
     "@vueuse/shared": "^12.1.0",
+    "@xsai/generate-text": "^0.0.22",
     "@xsai/model": "^0.0.22",
-    "@xsai/shared-chat-completion": "^0.0.21",
+    "@xsai/providers": "^0.0.22",
+    "@xsai/shared-chat": "^0.0.22",
     "@xsai/stream-text": "^0.0.22",
     "defu": "^6.1.4",
     "nprogress": "^0.2.0",
@@ -60,6 +64,7 @@
     "shiki": "^1.24.4",
     "three": "^0.171.0",
     "unified": "^11.0.5",
+    "valibot": "1.0.0-beta.9",
     "vue": "^3.5.13",
     "vue-demi": "^0.14.10",
     "vue-i18n": "^10.0.5",

diff --git a/packages/stage/src/auto-imports.d.ts b/packages/stage/src/auto-imports.d.ts
@@ -24,14 +24,13 @@ declare global {
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
+  const createTemporal: typeof import('./stores/agent')['createTemporal']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
   const customRef: typeof import('vue')['customRef']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const defineLoader: typeof import('vue-router/auto')['defineLoader']
-  const definePage: typeof import('unplugin-vue-router/runtime')['definePage']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
@@ -41,7 +40,6 @@ declare global {
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
   const injectLocal: typeof import('@vueuse/core')['injectLocal']
-  const isDark: typeof import('./composables/dark')['isDark']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -71,7 +69,6 @@ declare global {
   const onUpdated: typeof import('vue')['onUpdated']
   const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
-  const preferredDark: typeof import('./composables/dark')['preferredDark']
   const provide: typeof import('vue')['provide']
   const provideLocal: typeof import('@vueuse/core')['provideLocal']
   const reactify: typeof import('@vueuse/core')['reactify']
@@ -103,7 +100,6 @@ declare global {
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
   const toValue: typeof import('vue')['toValue']
-  const toggleDark: typeof import('./composables/dark')['toggleDark']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
@@ -114,6 +110,7 @@ declare global {
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAgentStore: typeof import('./stores/agent')['useAgentStore']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
   const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
@@ -138,7 +135,6 @@ declare global {
   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
   const useCached: typeof import('@vueuse/core')['useCached']
-  const useChat: typeof import('./composables/chat')['useChat']
   const useChatStore: typeof import('./stores/chat')['useChatStore']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
   const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
@@ -241,6 +237,7 @@ declare global {
   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
+  const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
@@ -252,7 +249,6 @@ declare global {
   const useShare: typeof import('@vueuse/core')['useShare']
   const useSlots: typeof import('vue')['useSlots']
   const useSorted: typeof import('@vueuse/core')['useSorted']
-  const useSpeak: typeof import('./stores/audio')['useSpeak']
   const useSpeakingStore: typeof import('./stores/audio')['useSpeakingStore']
   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
@@ -282,7 +278,6 @@ declare global {
   const useTransition: typeof import('@vueuse/core')['useTransition']
   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
-  const useUserStore: typeof import('./stores/user')['useUserStore']
   const useVModel: typeof import('@vueuse/core')['useVModel']
   const useVModels: typeof import('@vueuse/core')['useVModels']
   const useVibrate: typeof import('@vueuse/core')['useVibrate']
@@ -318,6 +313,15 @@ declare global {
   // @ts-ignore
   export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
+  // @ts-ignore
+  export type { HandlerContext } from './composables/queue'
+  import('./composables/queue')
+  // @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
@@ -343,6 +347,7 @@ 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']>
@@ -428,6 +433,7 @@ 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']>
@@ -554,6 +560,7 @@ declare module 'vue' {
     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>

diff --git a/packages/stage/src/components/Layouts/InteractiveArea.vue b/packages/stage/src/components/Layouts/InteractiveArea.vue
@@ -172,7 +172,7 @@ onAfterSend(async () => {
             text="pink-300 hover:pink-500 dark:pink-300/50 dark:hover:pink-500 placeholder:pink-300 placeholder:hover:pink-500 placeholder:dark:pink-300/50 placeholder:dark:hover:pink-500"
             bg="pink-100 dark:pink-400/20"
             min-h="[100px]" w-full
-            rounded-xl p-4 font-medium
+            rounded-t-xl p-4 font-medium
             outline-none transition="all duration-250 ease-in-out placeholder:all placeholder:duration-250 placeholder:ease-in-out"
             @submit="handleSend"
           />
@@ -181,10 +181,9 @@ onAfterSend(async () => {
     </div>
     <div flex="~ row" gap-2>
       <button
-        border="solid 4 teal-200 hover:teal-300 dark:teal-800 dark:hover:teal-700"
-        bg="white dark:teal-700 dark:hover:teal-600"
+        bg="teal-100 hover:teal-200 dark:teal-800 dark:hover:teal-700"
         transition="all duration-250 ease-in-out"
-        text="teal-400 dark:white/50 dark:hover:white"
+        text="teal-400"
         mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
         @click="handleLoadWhisper"
       >
@@ -202,7 +201,7 @@ onAfterSend(async () => {
           </div>
         </Transition>
       </button>
-      <div flex="~ row" relative text-xl text-white font-bold>
+      <div flex="~ row" relative text-white font-bold>
         <TransitionVertical>
           <fieldset
             v-if="showMicrophoneSelect"
@@ -227,10 +226,9 @@ onAfterSend(async () => {
           </fieldset>
         </TransitionVertical>
         <label
-          border="solid 4 teal-200 hover:teal-300 dark:teal-800 dark:hover:teal-700"
-          bg="white dark:teal-700 dark:hover:teal-600"
+          bg="teal-100 hover:teal-200 dark:teal-800 dark:hover:teal-700"
           transition="all duration-250 ease-in-out"
-          text="teal-400 dark:white/50 dark:hover:white"
+          text="teal-400"
           mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
         >
           <input v-model="showMicrophoneSelect" type="checkbox" hidden>