From 70f4965a8b68c19834a8122ba13554052eaf5048 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 25 Dec 2024 10:42:02 +0800
Subject: [PATCH] style: ui adjust

---
 cspell.config.yaml                            |   3 +
 packages/stage/package.json                   |   7 +-
 packages/stage/src/auto-imports.d.ts          |  23 +-
 .../components/Layouts/InteractiveArea.vue    |  14 +-
 .../src/components/Widgets/InputArea.vue      | 260 ------------------
 .../stage/src/constants/prompts/system-v2.ts  |   2 +-
 packages/stage/src/stores/chat.ts             |   2 +-
 packages/stage/src/stores/llm.ts              |   2 +-
 pnpm-lock.yaml                                | 132 ++++++++-
 9 files changed, 154 insertions(+), 291 deletions(-)
 delete mode 100644 packages/stage/src/components/Widgets/InputArea.vue

diff --git a/cspell.config.yaml b/cspell.config.yaml
index 05e86bc..cd607e3 100644
--- 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
index c5a4c59..84a3c77 100644
--- 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
index 690ddc7..cd9cdf3 100644
--- 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
index df8216a..8d284e4 100644
--- 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>
diff --git a/packages/stage/src/components/Widgets/InputArea.vue b/packages/stage/src/components/Widgets/InputArea.vue
deleted file mode 100644
index 20fa8a8..0000000
--- a/packages/stage/src/components/Widgets/InputArea.vue
+++ /dev/null
@@ -1,260 +0,0 @@
-<script setup lang="ts">
-import { useDevicesList } from '@vueuse/core'
-import { storeToRefs } from 'pinia'
-import { ref } from 'vue'
-
-import WhisperWorker from '../../libs/workers/worker?worker&url'
-import { encodeWAVToBase64 } from '../../utils/binary'
-
-const messageInput = ref('')
-const supportedModels = ref<{ id: string, name?: string }[]>([])
-const listening = ref(false)
-
-const { audioInputs } = useDevicesList({ constraints: { audio: true }, requestPermissions: true })
-const { openAiModel, openAiApiBaseURL, openAiApiKey, selectedAudioDevice, isAudioInputOn, selectedAudioDeviceId } = storeToRefs(useSettings())
-const { models } = useLLM()
-const { send, onAfterSend } = useChatStore()
-const { audioContext } = useAudioContext()
-const { t } = useI18n()
-
-const { transcribe: generate, load: loadWhisper, status: whisperStatus, terminate } = useWhisper(WhisperWorker, {
-  onComplete: async (res) => {
-    await send(res)
-  },
-})
-
-async function handleSend() {
-  await send(messageInput.value)
-}
-
-const { destroy, start } = useMicVAD(selectedAudioDeviceId, {
-  onSpeechStart: () => {
-    // TODO: interrupt the playback
-    // TODO: interrupt any of the ongoing TTS
-    // TODO: interrupt any of the ongoing LLM requests
-    // TODO: interrupt any of the ongoing animation of Live2D or VRM
-    // TODO: once interrupted, we should somehow switch to listen or thinking
-    //       emotion / expression?
-    listening.value = true
-  },
-  // VAD misfire means while speech end is detected but
-  // the frames of the segment of the audio buffer
-  // is not enough to be considered as a speech segment
-  // which controlled by the `minSpeechFrames` parameter
-  onVADMisfire: () => {
-    // TODO: do audio buffer send to whisper
-    listening.value = false
-  },
-  onSpeechEnd: (buffer) => {
-    // TODO: do audio buffer send to whisper
-    listening.value = false
-    handleTranscription(buffer)
-  },
-  auto: false,
-})
-
-function handleLoadWhisper() {
-  if (whisperStatus.value === 'loading')
-    return
-
-  loadWhisper()
-  start()
-}
-
-async function handleTranscription(buffer: Float32Array) {
-  await audioContext.resume()
-
-  // Convert Float32Array to WAV format
-  const audioBase64 = await encodeWAVToBase64(buffer, audioContext.sampleRate)
-  generate({ type: 'generate', data: { audio: audioBase64, language: 'en' } })
-}
-
-function handleModelChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const found = supportedModels.value.find(m => m.id === target.value)
-  if (!found) {
-    openAiModel.value = undefined
-    return
-  }
-
-  openAiModel.value = found
-}
-
-async function handleAudioInputChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  const found = audioInputs.value.find(d => d.deviceId === target.value)
-  if (!found) {
-    selectedAudioDevice.value = undefined
-    return
-  }
-
-  selectedAudioDevice.value = found
-}
-
-watch(isAudioInputOn, async (value) => {
-  if (value === 'false') {
-    destroy()
-    terminate()
-  }
-})
-
-watch([openAiApiBaseURL, openAiApiKey], async ([baseUrl, apiKey]) => {
-  if (!baseUrl || !apiKey) {
-    supportedModels.value = []
-    return
-  }
-
-  supportedModels.value = await models(baseUrl, apiKey)
-})
-
-onMounted(async () => {
-  if (!openAiApiBaseURL.value || !openAiApiKey.value)
-    return
-
-  supportedModels.value = await models(openAiApiBaseURL.value, openAiApiKey.value)
-})
-
-onAfterSend(async () => {
-  messageInput.value = ''
-})
-</script>
-
-<template>
-  <div flex="~ row" my="2" space-x="2" w-full self-end class="bg-primary-50/30 border-primary-200/50 dark:bg-primary-950/30 dark:border-primary-800/50 border-2 rounded-xl p-4 backdrop-blur-sm">
-    <div flex="~ col" w="100%" space-y="2">
-      <select
-        p="2"
-        class="border-primary-200 text-primary-800 dark:border-primary-800 dark:text-primary-200 w-full border-2 rounded-xl bg-white/70 font-medium dark:bg-zinc-800/70"
-        outline-none
-        @change="handleAudioInputChange"
-      >
-        <option disabled class="bg-white dark:bg-zinc-800">
-          {{ t('stage.select-a-audio-input') }}
-        </option>
-        <option v-if="selectedAudioDevice" :value="selectedAudioDevice.deviceId">
-          {{ selectedAudioDevice.label }}
-        </option>
-        <option v-for="m in audioInputs" :key="m.deviceId" :value="m.deviceId">
-          {{ m.label }}
-        </option>
-      </select>
-      <select
-        p="2"
-        class="border-primary-200 text-primary-800 dark:border-primary-800 dark:text-primary-200 w-full border-2 rounded-xl bg-white/70 font-medium dark:bg-zinc-800/70"
-        outline-none
-        @change="handleModelChange"
-      >
-        <option disabled class="bg-white dark:bg-zinc-800">
-          {{ t('stage.select-a-model') }}
-        </option>
-        <option v-if="openAiModel" :value="openAiModel.id">
-          {{ 'name' in openAiModel ? `${openAiModel.name} (${openAiModel.id})` : openAiModel.id }}
-        </option>
-        <option v-for="m in supportedModels" :key="m.id" :value="m.id">
-          {{ 'name' in m ? `${m.name} (${m.id})` : m.id }}
-        </option>
-      </select>
-      <div flex gap-2>
-        <BasicTextarea
-          v-model="messageInput"
-          :placeholder="t('stage.message')"
-          class="border-primary-200 text-primary-800 dark:border-primary-800 dark:text-primary-200 placeholder:text-primary-400 dark:placeholder:text-primary-600 min-h-[100px] w-full border-2 rounded-xl bg-white/70 p-4 font-medium dark:bg-zinc-800/70"
-          outline-none
-          @submit="handleSend"
-        />
-      </div>
-    </div>
-    <div h-full w="[16%] <sm:[50%]" flex="~ col" gap-2>
-      <fieldset
-        flex="~ row"
-        class="border-primary-200 dark:border-primary-800 border-2 rounded-xl bg-white/70 dark:bg-zinc-800/70"
-        text="sm primary-400 dark:primary-500"
-        appearance-none gap-1 p-1
-      >
-        <label
-          :class="[isAudioInputOn === 'true' ? 'bg-primary-200 text-primary-900 dark:bg-primary-300 dark:text-primary-900' : '']"
-          min-h="7.75" flex="~" w-full cursor-pointer items-center justify-center rounded-lg
-        >
-          <input
-            v-model="isAudioInputOn"
-            :checked="isAudioInputOn === 'true'"
-            :aria-checked="isAudioInputOn === 'true'"
-            name="isAudioInputOn"
-            type="radio"
-            role="radio"
-            value="true"
-            hidden appearance-none outline-none
-          >
-          <div select-none>ON</div>
-        </label>
-        <label
-          :class="[isAudioInputOn === 'false' ? 'bg-primary-200 text-primary-900 dark:bg-primary-300 dark:text-primary-900' : '']"
-          min-h="7.75" flex="~" w-full cursor-pointer items-center justify-center rounded-lg
-        >
-          <input
-            v-model="isAudioInputOn"
-            :checked="isAudioInputOn === 'false'"
-            :aria-checked="isAudioInputOn === 'false'"
-            name="stageView"
-            type="radio"
-            role="radio"
-            value="false"
-            hidden appearance-none outline-none
-          >
-          <div select-none>OFF</div>
-        </label>
-      </fieldset>
-      <button
-        class="border-primary-200 text-primary-800 dark:border-primary-800 dark:text-primary-200 hover:bg-primary-100 dark:hover:bg-primary-900/50 border-2 rounded-xl bg-white/70 font-medium dark:bg-zinc-800/70"
-        flex="~ row"
-        p="2" min-h="9.75"
-        min-w-20 w-full items-center justify-center outline-none
-        transition="all ease-in-out"
-        @click="handleLoadWhisper"
-      >
-        <Transition mode="out-in">
-          <div v-if="whisperStatus === null" flex="~ row" items-center justify-center space-x-1>
-            Load
-          </div>
-          <div v-else-if="whisperStatus === 'loading'" flex="~ row" items-center justify-center space-x-1>
-            <div i-svg-spinners:bouncing-ball class="text-primary-500" />
-            <span>Loading</span>
-          </div>
-          <div v-else-if="whisperStatus === 'ready'" flex="~ row" items-center justify-center space-x-1>
-            <div i-lucide:check class="text-primary-500" />
-            <span>Ready</span>
-          </div>
-        </Transition>
-      </button>
-      <button
-        class="border-primary-200 text-primary-800 dark:border-primary-800 hover:bg-primary-100 dark:text-primary-200 dark:hover:bg-primary-900/50 border-2 rounded-xl bg-white/70 font-medium dark:bg-zinc-800/70"
-        flex="~ row" h-full
-        p="2"
-        min-w-20 w-full items-center justify-center outline-none
-        transition="all ease-in-out"
-      >
-        <Transition mode="out-in">
-          <div v-if="listening" flex="~ row" items-center justify-center space-x-1>
-            <div i-carbon:microphone-filled class="text-primary-500" />
-          </div>
-          <div v-else flex="~ row" items-center justify-center space-x-1>
-            <div i-carbon:microphone class="text-primary-400" />
-            {{ t('stage.waiting') }}
-          </div>
-        </Transition>
-      </button>
-    </div>
-  </div>
-</template>
-
-<style>
-.v-enter-active,
-.v-leave-active {
-  transition: opacity 0.2s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/packages/stage/src/constants/prompts/system-v2.ts b/packages/stage/src/constants/prompts/system-v2.ts
index 0b28111..6d3d4a4 100644
--- a/packages/stage/src/constants/prompts/system-v2.ts
+++ b/packages/stage/src/constants/prompts/system-v2.ts
@@ -1,4 +1,4 @@
-import type { SystemMessage } from '@xsai/shared-chat-completion'
+import type { SystemMessage } from '@xsai/shared-chat'
 import { EMOTION_VALUES } from '../emotions'
 
 function message(prefix: string, suffix: string) {
diff --git a/packages/stage/src/stores/chat.ts b/packages/stage/src/stores/chat.ts
index 0a6cb5f..090ccd8 100644
--- a/packages/stage/src/stores/chat.ts
+++ b/packages/stage/src/stores/chat.ts
@@ -1,4 +1,4 @@
-import type { AssistantMessage, Message } from '@xsai/shared-chat-completion'
+import type { AssistantMessage, Message } from '@xsai/shared-chat'
 
 import { defineStore, storeToRefs } from 'pinia'
 import SystemPromptV2 from '../constants/prompts/system-v2'
diff --git a/packages/stage/src/stores/llm.ts b/packages/stage/src/stores/llm.ts
index 2f704fe..ef0b1ec 100644
--- a/packages/stage/src/stores/llm.ts
+++ b/packages/stage/src/stores/llm.ts
@@ -1,5 +1,5 @@
 import type { GenerateAudioStream } from '@proj-airi/elevenlabs/types'
-import type { Message } from '@xsai/shared-chat-completion'
+import type { Message } from '@xsai/shared-chat'
 import { listModels } from '@xsai/model'
 import { streamText } from '@xsai/stream-text'
 import { ofetch } from 'ofetch'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 278f145..b7b35bb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,6 +110,9 @@ importers:
       '@formkit/auto-animate':
         specifier: ^0.8.2
         version: 0.8.2
+      '@gcornut/valibot-json-schema':
+        specifier: ^0.42.0
+        version: 0.42.0(esbuild@0.24.0)(typescript@5.7.2)
       '@huggingface/transformers':
         specifier: ^3.2.1
         version: 3.2.1
@@ -170,6 +173,9 @@ importers:
       '@types/yauzl':
         specifier: ^2.10.3
         version: 2.10.3
+      '@typeschema/valibot':
+        specifier: ^0.14.0
+        version: 0.14.0(@gcornut/valibot-json-schema@0.42.0(esbuild@0.24.0)(typescript@5.7.2))(@types/json-schema@7.0.15)(valibot@1.0.0-beta.9(typescript@5.7.2))
       '@unhead/vue':
         specifier: ^1.11.14
         version: 1.11.14(vue@3.5.13(typescript@5.7.2))
@@ -185,12 +191,18 @@ importers:
       '@vueuse/shared':
         specifier: ^12.1.0
         version: 12.1.0(typescript@5.7.2)
+      '@xsai/generate-text':
+        specifier: ^0.0.22
+        version: 0.0.22
       '@xsai/model':
         specifier: ^0.0.22
         version: 0.0.22
-      '@xsai/shared-chat-completion':
-        specifier: ^0.0.21
-        version: 0.0.21
+      '@xsai/providers':
+        specifier: ^0.0.22
+        version: 0.0.22
+      '@xsai/shared-chat':
+        specifier: ^0.0.22
+        version: 0.0.22
       '@xsai/stream-text':
         specifier: ^0.0.22
         version: 0.0.22
@@ -230,6 +242,9 @@ importers:
       unified:
         specifier: ^11.0.5
         version: 11.0.5
+      valibot:
+        specifier: 1.0.0-beta.9
+        version: 1.0.0-beta.9(typescript@5.7.2)
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.2)
@@ -1689,6 +1704,10 @@ packages:
   '@formkit/auto-animate@0.8.2':
     resolution: {integrity: sha512-SwPWfeRa5veb1hOIBMdzI+73te5puUBHmqqaF1Bu7FjvxlYSz/kJcZKSa9Cg60zL0uRNeJL2SbRxV6Jp6Q1nFQ==}
 
+  '@gcornut/valibot-json-schema@0.42.0':
+    resolution: {integrity: sha512-4Et4AN6wmqeA0PfU5Clkv/IS27wiefsWf6TemAZrb75uzkClYEFavim7SboeKwbll9Nbsn2Iv0LT/HS5H7orZg==}
+    hasBin: true
+
   '@huggingface/jinja@0.3.2':
     resolution: {integrity: sha512-F2FvuIc+w1blGsaqJI/OErRbWH6bVJDCBI8Rm5D86yZ2wlwrGERsfIaru7XUv9eYC3DMP3ixDRRtF0h6d8AZcQ==}
     engines: {node: '>=18'}
@@ -1873,6 +1892,10 @@ packages:
     resolution: {integrity: sha512-bmsP4L2HqBF6i6uaMqJMcFBONVjKt+siGluRq4Ca4C0q7W2eMaVZr8iCgF9dKbcVXutftkC7D6z2SaSMmLiDyA==}
     engines: {node: '>= 16'}
 
+  '@intlify/shared@11.0.0':
+    resolution: {integrity: sha512-MLKIyFz37qYF1G5UQZMwGoJyp8DD3rtcXDplRHZdSOmbfOYbD4g9kJZ6qCsm1Ru3vee6CTnJcbO4LV1JeIDGbA==}
+    engines: {node: '>= 16'}
+
   '@intlify/shared@11.0.0-rc.1':
     resolution: {integrity: sha512-8tR1xe7ZEbkabTuE/tNhzpolygUn9OaYp9yuYAF4MgDNZg06C3Qny80bes2/e9/Wm3aVkPUlCw6WgU7mQd0yEg==}
     engines: {node: '>= 16'}
@@ -2551,6 +2574,25 @@ packages:
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
+  '@typeschema/core@0.14.0':
+    resolution: {integrity: sha512-Ia6PtZHcL3KqsAWXjMi5xIyZ7XMH4aSnOQes8mfMLx+wGFGtGRNlwe6Y7cYvX+WfNK67OL0/HSe9t8QDygV0/w==}
+    peerDependencies:
+      '@types/json-schema': ^7.0.15
+    peerDependenciesMeta:
+      '@types/json-schema':
+        optional: true
+
+  '@typeschema/valibot@0.14.0':
+    resolution: {integrity: sha512-Q2HTTSfXoEgo+55Nx0iprlpGolXgDbnGss6avLlXNtjvTNx606VDnLkpSyA6u/MS2mOIUO7GVGdCF6LLbLcqlg==}
+    peerDependencies:
+      '@gcornut/valibot-json-schema': ^0.37.0
+      valibot: ^0.39.0
+    peerDependenciesMeta:
+      '@gcornut/valibot-json-schema':
+        optional: true
+      valibot:
+        optional: true
+
   '@typescript-eslint/eslint-plugin@8.18.1':
     resolution: {integrity: sha512-Ncvsq5CT3Gvh+uJG0Lwlho6suwDfUXH0HztslDf5I+F2wAFAZMRwYLEorumpKLzmO2suAXZ/td1tBg4NZIi9CQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -3085,12 +3127,14 @@ packages:
   '@webgpu/types@0.1.51':
     resolution: {integrity: sha512-ktR3u64NPjwIViNCck+z9QeyN0iPkQCUOQ07ZCV1RzlkfP+olLTeEZ95O1QHS+v4w9vJeY9xj/uJuSphsHy5rQ==}
 
+  '@xsai/generate-text@0.0.22':
+    resolution: {integrity: sha512-3ZkxR3QfN0lkcCD4NM6glkA9+cWxPodHx73qnlSKzFV/m1McAI42JPKWpFOxfQdxkAQAkZ5cD5Et7PZs8Rc7bQ==}
+
   '@xsai/model@0.0.22':
     resolution: {integrity: sha512-jQQYgvNSpxWiJK2eiW9R3Tsu/vCGqxtRDJrNQGKbQlDGqKzZLRjQ6iAXTeEa4NTFQuZabGdoaKQZaNSPPyPu2Q==}
 
-  '@xsai/shared-chat-completion@0.0.21':
-    resolution: {integrity: sha512-/BMLCMiR/+w1vXZ1t2itD/IY0w8AZx1fCW1xuhjzA7FKqiRAcnj8UyKf2HPXzvmOwxHTo168LY0O5T2VcG7HFg==}
-    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
+  '@xsai/providers@0.0.22':
+    resolution: {integrity: sha512-TinCtYJvnWB5MY4WuWzL/svbD0vrx3znRQglVUuPIGMqm3MCaGyvQk0hq9GK8FdGkyb/LZikxT2N8lB6NaHPBw==}
 
   '@xsai/shared-chat@0.0.22':
     resolution: {integrity: sha512-VQHGrUkNrUj50TRho/qClPbeJLNjEbTC+MvDNTxuYrxcGydpkImP+SLmcpvdsSUjbr3GlGeZfpWrq/Y1WbreQQ==}
@@ -3849,6 +3893,12 @@ packages:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
 
+  esbuild-runner@2.2.2:
+    resolution: {integrity: sha512-fRFVXcmYVmSmtYm2mL8RlUASt2TDkGh3uRcvHFOKNr/T58VrfVeKD9uT9nlgxk96u0LS0ehS/GY7Da/bXWKkhw==}
+    hasBin: true
+    peerDependencies:
+      esbuild: '*'
+
   esbuild@0.17.19:
     resolution: {integrity: sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==}
     engines: {node: '>=12'}
@@ -6894,6 +6944,22 @@ packages:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
 
+  valibot@0.42.1:
+    resolution: {integrity: sha512-3keXV29Ar5b//Hqi4MbSdV7lfVp6zuYLZuA9V1PvQUsXqogr+u5lvLPLk3A4f74VUXDnf/JfWMN6sB+koJ/FFw==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  valibot@1.0.0-beta.9:
+    resolution: {integrity: sha512-yEX8gMAZ2R1yI2uwOO4NCtVnJQx36zn3vD0omzzj9FhcoblvPukENIiRZXKZwCnqSeV80bMm8wNiGhQ0S8fiww==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
 
@@ -8561,6 +8627,16 @@ snapshots:
 
   '@formkit/auto-animate@0.8.2': {}
 
+  '@gcornut/valibot-json-schema@0.42.0(esbuild@0.24.0)(typescript@5.7.2)':
+    dependencies:
+      valibot: 0.42.1(typescript@5.7.2)
+    optionalDependencies:
+      '@types/json-schema': 7.0.15
+      esbuild-runner: 2.2.2(esbuild@0.24.0)
+    transitivePeerDependencies:
+      - esbuild
+      - typescript
+
   '@huggingface/jinja@0.3.2': {}
 
   '@huggingface/transformers@3.2.1':
@@ -8728,14 +8804,16 @@ snapshots:
 
   '@intlify/shared@10.0.5': {}
 
+  '@intlify/shared@11.0.0': {}
+
   '@intlify/shared@11.0.0-rc.1': {}
 
   '@intlify/unplugin-vue-i18n@6.0.2(@vue/compiler-dom@3.5.13)(eslint@9.17.0(jiti@2.4.0))(rollup@2.79.1)(typescript@5.7.2)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.17.0(jiti@2.4.0))
       '@intlify/bundle-utils': 10.0.0(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))
-      '@intlify/shared': 10.0.5
-      '@intlify/vue-i18n-extensions': 7.0.0(@intlify/shared@10.0.5)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
+      '@intlify/shared': 11.0.0
+      '@intlify/vue-i18n-extensions': 7.0.0(@intlify/shared@11.0.0)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))
       '@rollup/pluginutils': 5.1.3(rollup@2.79.1)
       '@typescript-eslint/scope-manager': 8.18.0
       '@typescript-eslint/typescript-estree': 8.18.0(typescript@5.7.2)
@@ -8757,11 +8835,11 @@ snapshots:
       - supports-color
       - typescript
 
-  '@intlify/vue-i18n-extensions@7.0.0(@intlify/shared@10.0.5)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))':
+  '@intlify/vue-i18n-extensions@7.0.0(@intlify/shared@11.0.0)(@vue/compiler-dom@3.5.13)(vue-i18n@10.0.5(vue@3.5.13(typescript@5.7.2)))(vue@3.5.13(typescript@5.7.2))':
     dependencies:
       '@babel/parser': 7.26.2
     optionalDependencies:
-      '@intlify/shared': 10.0.5
+      '@intlify/shared': 11.0.0
       '@vue/compiler-dom': 3.5.13
       vue: 3.5.13(typescript@5.7.2)
       vue-i18n: 10.0.5(vue@3.5.13(typescript@5.7.2))
@@ -9445,6 +9523,19 @@ snapshots:
     dependencies:
       '@types/node': 22.10.1
 
+  '@typeschema/core@0.14.0(@types/json-schema@7.0.15)':
+    optionalDependencies:
+      '@types/json-schema': 7.0.15
+
+  '@typeschema/valibot@0.14.0(@gcornut/valibot-json-schema@0.42.0(esbuild@0.24.0)(typescript@5.7.2))(@types/json-schema@7.0.15)(valibot@1.0.0-beta.9(typescript@5.7.2))':
+    dependencies:
+      '@typeschema/core': 0.14.0(@types/json-schema@7.0.15)
+    optionalDependencies:
+      '@gcornut/valibot-json-schema': 0.42.0(esbuild@0.24.0)(typescript@5.7.2)
+      valibot: 1.0.0-beta.9(typescript@5.7.2)
+    transitivePeerDependencies:
+      - '@types/json-schema'
+
   '@typescript-eslint/eslint-plugin@8.18.1(@typescript-eslint/parser@8.18.1(eslint@9.17.0(jiti@2.4.0))(typescript@5.7.2))(eslint@9.17.0(jiti@2.4.0))(typescript@5.7.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
@@ -10341,11 +10432,15 @@ snapshots:
 
   '@webgpu/types@0.1.51': {}
 
+  '@xsai/generate-text@0.0.22':
+    dependencies:
+      '@xsai/shared-chat': 0.0.22
+
   '@xsai/model@0.0.22':
     dependencies:
       '@xsai/shared': 0.0.22
 
-  '@xsai/shared-chat-completion@0.0.21':
+  '@xsai/providers@0.0.22':
     dependencies:
       '@xsai/shared': 0.0.22
 
@@ -11163,6 +11258,13 @@ snapshots:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
+  esbuild-runner@2.2.2(esbuild@0.24.0):
+    dependencies:
+      esbuild: 0.24.0
+      source-map-support: 0.5.21
+      tslib: 2.4.0
+    optional: true
+
   esbuild@0.17.19:
     optionalDependencies:
       '@esbuild/android-arm': 0.17.19
@@ -14915,6 +15017,14 @@ snapshots:
 
   utils-merge@1.0.1: {}
 
+  valibot@0.42.1(typescript@5.7.2):
+    optionalDependencies:
+      typescript: 5.7.2
+
+  valibot@1.0.0-beta.9(typescript@5.7.2):
+    optionalDependencies:
+      typescript: 5.7.2
+
   validate-npm-package-license@3.0.4:
     dependencies:
       spdx-correct: 3.2.0