diff --git a/apps/stage-web/locales/en.yml b/apps/stage-web/locales/en.yml
index 5c9406ca5..1c4d7274c 100644
--- a/apps/stage-web/locales/en.yml
+++ b/apps/stage-web/locales/en.yml
@@ -52,6 +52,8 @@ settings:
     english: English
     title: Language
   microphone: Microphone
+  model-provider:
+    title: Model Providers
   models: Model
   openai-api-key:
     label: OpenAI API Key
@@ -61,6 +63,7 @@ settings:
     label: OpenAI API BaseURL
     placeholder: Input your API base URL
     placeholder_mobile: OpenAI API BaseURL
+  theme: Theme
   title: Settings
   voices: Voice
 stage:
diff --git a/apps/stage-web/locales/zh-CN.yml b/apps/stage-web/locales/zh-CN.yml
index e1e42858a..90bd75790 100644
--- a/apps/stage-web/locales/zh-CN.yml
+++ b/apps/stage-web/locales/zh-CN.yml
@@ -39,6 +39,8 @@ settings:
     chinese: 简体中文
     english: English
     title: 语言
+  model-provider:
+    title: 模型提供商
   models: 模型
   openai-api-key:
     label: OpenAI API 密钥
@@ -48,9 +50,15 @@ settings:
     label: OpenAI API BaseURL
     placeholder: 输入您的 API BaseURL
     placeholder_mobile: OpenAI BaseURL
+  theme: 主题颜色
   title: 设置
   voices: 声线
 stage:
+  chat:
+    message:
+      character-name:
+        airi: Airi
+        you: 你
   message: 消息
   select-a-audio-input: 选择一个音频输入设备
   select-a-model: 选择一个模型
diff --git a/apps/stage-web/package.json b/apps/stage-web/package.json
index ee94ea665..8d8773a8d 100644
--- a/apps/stage-web/package.json
+++ b/apps/stage-web/package.json
@@ -63,6 +63,7 @@
     "pinia": "^3.0.1",
     "pixi-filters": "^4.2.0",
     "pixi-live2d-display": "^0.4.0",
+    "radix-vue": "^1.9.16",
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
diff --git a/apps/stage-web/src/components/Widgets/DesktopSettings.vue b/apps/stage-web/src/components/Widgets/DesktopSettings.vue
index 8a02974b2..8ab45b8c9 100644
--- a/apps/stage-web/src/components/Widgets/DesktopSettings.vue
+++ b/apps/stage-web/src/components/Widgets/DesktopSettings.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
+import { ref } from 'vue'
 
 import MobileSettings from './MobileSettings.vue'
+
+const isOpen = ref(false)
 </script>
 
 <template>
   <div flex="~" gap-2>
-    <DrawerRoot should-scale-background direction="right">
+    <DrawerRoot v-model:open="isOpen" should-scale-background direction="right">
       <DrawerTrigger
         bg="zinc-100 dark:zinc-800"
         text="lg zinc-500 dark:zinc-400"
diff --git a/apps/stage-web/src/components/Widgets/MobileSettings.vue b/apps/stage-web/src/components/Widgets/MobileSettings.vue
index 87381202a..90bd0c8fc 100644
--- a/apps/stage-web/src/components/Widgets/MobileSettings.vue
+++ b/apps/stage-web/src/components/Widgets/MobileSettings.vue
@@ -1,230 +1,192 @@
 <script setup lang="ts">
-import type { Voice } from '@proj-airi/stage-ui/constants'
-
-import { voiceList } from '@proj-airi/stage-ui/constants'
-import { useLLM, useSettings } from '@proj-airi/stage-ui/stores'
+import { useSettings } from '@proj-airi/stage-ui/stores'
 import { useDark } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { onMounted, ref, watch } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-const { t, locale } = useI18n()
+import ModelProviderSettings from './ModelProviderSettings.vue'
+
+const { t } = useI18n()
+const settings = storeToRefs(useSettings())
 
-const settings = useSettings()
 const dark = useDark({ disableTransition: false })
-const supportedModels = ref<{ id: string, name?: string }[]>([])
-const { models } = useLLM()
-const { openAiModel, openAiApiBaseURL, openAiApiKey, elevenlabsVoiceEnglish, elevenlabsVoiceJapanese } = storeToRefs(settings)
+const currentView = ref('main')
+const slideDirection = ref('forward') // 'forward' | 'backward'
 
-function handleModelChange(event: Event) {
+function handleLanguageChange(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
+  settings.language.value = target.value
 }
 
-function handleViewChange(event: Event) {
-  const target = event.target as HTMLSelectElement
-  settings.stageView = target.value
+function navigateToProviders() {
+  slideDirection.value = 'forward'
+  currentView.value = 'providers'
 }
 
-function handleVoiceChange(event: Event) {
-  const value = (event.target as HTMLSelectElement).value as Voice
-  switch (locale.value) {
-    case 'en':
-    case 'en-US':
-      elevenlabsVoiceEnglish.value = value
-      break
-    case 'zh':
-    case 'zh-CN':
-    case 'zh-TW':
-    case 'zh-HK':
-      elevenlabsVoiceEnglish.value = value
-      break
-    case 'jp':
-    case 'jp-JP':
-      elevenlabsVoiceJapanese.value = value
-      break
-  }
+function navigateBack() {
+  slideDirection.value = 'backward'
+  currentView.value = 'main'
 }
-
-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)
-})
 </script>
 
 <template>
-  <div text="zinc-500 dark:zinc-400">
-    <h2 text="zinc-800/80 dark:zinc-200/80 xl" font-bold>
-      {{ t('settings.title') }}
-    </h2>
-    <div>
-      <div
-        grid="~ cols-[150px_1fr]" my-2 items-center gap-1.5 rounded-lg
-        bg="zinc-100 dark:zinc-800" px-2 py-1
-      >
-        <div text="sm" pl-1>
-          <span>{{ t('settings.openai-base-url.label') }}</span>
-        </div>
-        <div flex="~ row" w-full text="sm">
-          <input
-            v-model="settings.openAiApiBaseURL"
-            text="zinc-800 dark:zinc-100"
-            type="text"
-            :placeholder="t('settings.openai-base-url.placeholder_mobile')"
-            h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
-          >
-        </div>
-        <div text="sm" pl-1>
-          <span>{{ t('settings.openai-api-key.label') }}</span>
-        </div>
-        <div flex="~ row" w-full text="sm">
-          <input
-            v-model="settings.openAiApiKey"
-            text="zinc-800 dark:zinc-100"
-            type="text"
-            :placeholder="t('settings.openai-api-key.placeholder_mobile')"
-            h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
-          >
-        </div>
-        <div text="sm" pl-1>
-          <span>{{ t('settings.elevenlabs-api-key.label') }}</span>
-        </div>
-        <div flex="~ row" w-full text="sm">
-          <input
-            v-model="settings.elevenLabsApiKey"
-            text="zinc-800 dark:zinc-100"
-            type="text"
-            :placeholder="t('settings.elevenlabs-api-key.placeholder_mobile')"
-            h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
-          >
-        </div>
-        <div text="sm" pl-1>
-          <span>{{ t('settings.language.title') }}</span>
-        </div>
-        <div flex="~ row" w-full text="sm">
-          <select
-            v-model="settings.language"
-            h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
-            text="zinc-800 dark:zinc-100"
-          >
-            <option value="en-US">
-              {{ t('settings.language.english') }}
-            </option>
-            <option value="zh-CN">
-              {{ t('settings.language.chinese') }}
-            </option>
-          </select>
-        </div>
-        <div text="sm" pl-1>
-          <span>{{ t('settings.models') }}</span>
-        </div>
-        <div flex="~ row" w-full text="sm">
-          <select
-            h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
-            text="zinc-800 dark:zinc-100"
-            @change="handleModelChange"
-          >
-            <option disabled class="bg-white dark:bg-zinc-800">
-              {{ t('stage.select-a-model') }}
-            </option>
-            <option v-if="settings.openAiModel" :value="settings.openAiModel.id">
-              {{ 'name' in settings.openAiModel ? `${settings.openAiModel.name} (${settings.openAiModel.id})` : settings.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>
-        <div text="sm" pl-1>
-          <span>{{ t('settings.voices') }}</span>
-        </div>
-        <div flex="~ row" w-full text="sm">
-          <select
-            h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
-            text="zinc-800 dark:zinc-100"
-            @change="handleVoiceChange"
-          >
-            <option disabled class="bg-white dark:bg-zinc-800">
-              {{ t('stage.select-a-voice') }}
-            </option>
-            <option v-if="['en', 'en-US'].includes(locale) && elevenlabsVoiceEnglish" :value="elevenlabsVoiceEnglish">
-              {{ elevenlabsVoiceEnglish }}
-            </option>
-            <!-- TODO -->
-            <option v-if="['zh', 'zh-CN', 'zh-TW', 'zh-HK'].includes(locale) && elevenlabsVoiceEnglish" :value="elevenlabsVoiceEnglish">
-              {{ elevenlabsVoiceEnglish }}
-            </option>
-            <option v-if="['jp', 'jp-JP'].includes(locale) && elevenlabsVoiceJapanese" :value="elevenlabsVoiceJapanese">
-              {{ elevenlabsVoiceJapanese }}
-            </option>
-            <option v-for="(m, index) in voiceList[locale]" :key="index" :value="m">
-              {{ m }}
-            </option>
-          </select>
-        </div>
-      </div>
-    </div>
-    <h2 text="zinc-800/80 dark:zinc-200/80 xl" font-bold>
-      View
-    </h2>
-    <div>
-      <div
-        grid="~ cols-[140px_1fr]" my-2 items-center gap-1.5 rounded-lg
-        bg="zinc-100 dark:zinc-800" px-2 py-1
-      >
-        <div text="sm" pl-1>
-          <span>Viewer</span>
-        </div>
-        <select
-          h-8 w-full rounded-md bg-transparent px-2 py-1 text-right font-mono outline-none
-          text="zinc-800 dark:zinc-100"
-          @change="handleViewChange"
-        >
-          <option value="2d">
-            2D
-          </option>
-          <option value="3d">
-            3D
-          </option>
-        </select>
-        <div text="sm" pl-1>
-          <span>Theme</span>
-        </div>
-        <label h-8 flex cursor-pointer items-center justify-end>
-          <input
-            v-model="dark"
-            text="zinc-800 dark:zinc-100"
-            :checked="dark"
-            :aria-checked="dark"
-            name="stageView"
-            type="checkbox"
-            hidden appearance-none outline-none
-          >
-          <div select-none>
-            <Transition name="slide-away" mode="out-in">
-              <div v-if="dark" i-solar:sun-fog-bold-duotone transition="all ease-in-out duration-250" />
-              <div v-else i-solar:moon-stars-bold-duotone transition="all ease-in-out duration-250" />
-            </Transition>
+  <div text="zinc-500 dark:zinc-400" class="relative">
+    <Transition :name="slideDirection === 'forward' ? 'slide-forward' : 'slide-backward'">
+      <!-- Main Settings View -->
+      <div v-if="currentView === 'main'" key="main">
+        <h2 text="zinc-800/80 dark:zinc-200/80 xl" font-bold>
+          {{ t('settings.title') }}
+        </h2>
+        <div my-2>
+          <!-- Model Providers Navigation Item -->
+          <div class="space-y-2">
+            <div
+              grid="~ cols-[150px_1fr]"
+              bg="zinc-100 dark:zinc-800"
+              hover="bg-zinc-200 dark:bg-zinc-700"
+              transition="all ease-in-out duration-250"
+              cursor-pointer items-center gap-1.5 rounded-lg px-4 py-3
+              @click="navigateToProviders"
+            >
+              <div text="sm">
+                <span>{{ t('settings.model-provider.title') }}</span>
+              </div>
+              <div flex="~ row" w-full justify-end text="sm">
+                <div i-solar:alt-arrow-right-bold-duotone />
+              </div>
+            </div>
+
+            <!-- Language Setting -->
+            <div
+              grid="~ cols-[150px_1fr]"
+              bg="zinc-100 dark:zinc-800"
+              hover="bg-zinc-200 dark:bg-zinc-700"
+              transition="all ease-in-out duration-250"
+              items-center gap-1.5 rounded-lg px-4 py-3
+            >
+              <div text="sm">
+                <span>{{ t('settings.language.title') }}</span>
+              </div>
+              <div flex="~ row" w-full justify-end>
+                <select
+                  class="w-32"
+                  bg="transparent"
+                  text="sm right zinc-800 dark:zinc-100"
+                  transition="all ease-in-out duration-250"
+                  outline="none"
+                  @change="handleLanguageChange"
+                >
+                  <option value="en-US">
+                    {{ t('settings.language.english') }}
+                  </option>
+                  <option value="zh-CN">
+                    {{ t('settings.language.chinese') }}
+                  </option>
+                </select>
+              </div>
+            </div>
+
+            <!-- Theme Setting -->
+            <label
+              bg="zinc-100 dark:zinc-800"
+              hover="bg-zinc-200 dark:bg-zinc-700"
+              transition="all ease-in-out duration-250"
+              w-full flex cursor-pointer rounded-lg px-4 py-3
+            >
+              <input
+                v-model="dark"
+                text="zinc-800 dark:zinc-100"
+                :checked="dark"
+                :aria-checked="dark"
+                type="checkbox"
+                hidden appearance-none outline-none
+              >
+              <div flex="~ row" w-full items-center gap-1.5>
+                <div text="sm" w-full flex-1>
+                  <span>{{ t('settings.theme') }}</span>
+                </div>
+                <div select-none>
+                  <Transition name="slide-away" mode="out-in">
+                    <div
+                      v-if="dark"
+                      i-solar:moon-stars-bold-duotone
+                      transition="all ease-in-out duration-250"
+                    />
+                    <div
+                      v-else
+                      i-solar:sun-fog-bold-duotone
+                      transition="all ease-in-out duration-250"
+                    />
+                  </Transition>
+                </div>
+              </div>
+            </label>
           </div>
-        </label>
+        </div>
       </div>
-    </div>
+
+      <!-- Model Providers View -->
+      <div v-else-if="currentView === 'providers'" key="providers">
+        <div mb-4 flex items-center gap-2>
+          <button
+            text="zinc-800/80 dark:zinc-200/80"
+            @click="navigateBack"
+          >
+            <div i-solar:alt-arrow-left-bold-duotone />
+          </button>
+          <h2 text="zinc-800/80 dark:zinc-200/80 xl" font-bold>
+            {{ t('settings.model-provider.title') }}
+          </h2>
+        </div>
+        <ModelProviderSettings />
+      </div>
+    </Transition>
   </div>
 </template>
+
+<style scoped>
+/* Forward navigation transitions */
+.slide-forward-enter-active,
+.slide-forward-leave-active {
+  transition: all 0.2s ease;
+  position: absolute;
+  width: 100%;
+}
+
+.slide-forward-enter-from {
+  transform: translateX(100%);
+}
+
+.slide-forward-leave-to {
+  transform: translateX(-30%);
+  opacity: 0;
+}
+
+.slide-forward-enter-to,
+.slide-forward-leave-from {
+  transform: translateX(0);
+}
+
+/* Backward navigation transitions */
+.slide-backward-enter-active,
+.slide-backward-leave-active {
+  transition: all 0.2s ease;
+  position: absolute;
+  width: 100%;
+}
+
+.slide-backward-enter-from {
+  transform: translateX(-30%);
+  opacity: 0;
+}
+
+.slide-backward-leave-to {
+  transform: translateX(100%);
+}
+
+.slide-backward-enter-to,
+.slide-backward-leave-from {
+  transform: translateX(0);
+}
+</style>
diff --git a/apps/stage-web/src/components/Widgets/ModelProviderSettings.vue b/apps/stage-web/src/components/Widgets/ModelProviderSettings.vue
new file mode 100644
index 000000000..92f549a3b
--- /dev/null
+++ b/apps/stage-web/src/components/Widgets/ModelProviderSettings.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { TransitionVertical } from '@proj-airi/stage-ui/components'
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'radix-vue'
+import { reactive, ref } from 'vue'
+
+interface ModelProvider {
+  id: string
+  name: string
+  icon?: string
+  models: {
+    id: string
+    name: string
+    capabilities: string[]
+  }[]
+}
+
+const providers = ref<ModelProvider[]>([
+  {
+    id: 'openai',
+    name: 'OpenAI',
+    icon: 'i-lobe-icons:openai',
+    models: [
+      { id: 'gpt-4-turbo', name: 'GPT-4 Turbo', capabilities: ['chat', 'vision'] },
+      { id: 'gpt-4', name: 'GPT-4', capabilities: ['chat'] },
+      { id: 'whisper-1', name: 'Whisper', capabilities: ['stt'] },
+    ],
+  },
+  {
+    id: 'openrouter',
+    name: 'OpenRouter',
+    icon: 'i-lobe-icons:openrouter',
+    models: [
+      { id: 'anthropic/claude-3-opus', name: 'Claude 3 Opus', capabilities: ['chat', 'vision'] },
+      { id: 'google/gemini-pro', name: 'Gemini Pro', capabilities: ['chat'] },
+    ],
+  },
+])
+
+const openedProviders = reactive<Record<string, boolean>>(Object.fromEntries(providers.value.map(provider => [provider.id, false])))
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div v-for="(provider) in providers" :key="provider.id">
+      <CollapsibleRoot :default-open="false" w-full>
+        <CollapsibleTrigger
+          bg="zinc-100 dark:zinc-800"
+          hover="bg-zinc-200 dark:bg-zinc-700"
+          transition="all ease-in-out duration-250"
+          w-full flex items-center gap-1.5 rounded-lg px-4 py-3
+          @click="openedProviders[provider.id] = !openedProviders[provider.id]"
+        >
+          <div flex="~ row 1" items-center gap-1.5>
+            <div :class="provider.icon" class="size-6" />
+            <div class="font-medium">
+              {{ provider.name }} {{ openedProviders[provider.id] }}
+            </div>
+          </div>
+          <div transform transition="transform duration-250" :class="{ 'rotate-180': openedProviders[provider.id] }">
+            <div i-solar:alt-arrow-down-bold-duotone />
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <TransitionVertical>
+            <div v-if="openedProviders[provider.id]" p-4>
+              <div class="space-y-4">
+                <div class="flex items-center justify-between">
+                  <div class="text-sm font-medium">
+                    API Key
+                  </div>
+                  <input
+                    class="rounded bg-zinc-200 px-2 py-1 text-sm dark:bg-zinc-800"
+                    placeholder="Enter API key"
+                  >
+                </div>
+                <div class="space-y-2">
+                  <div class="text-sm font-medium">
+                    Available Models
+                  </div>
+                </div>
+              </div>
+            </div>
+          </TransitionVertical>
+        </CollapsibleContent>
+      </CollapsibleRoot>
+    </div>
+  </div>
+</template>
diff --git a/apps/stage-web/src/pages/index.vue b/apps/stage-web/src/pages/index.vue
index 8c30c888b..bbfeb2c4c 100644
--- a/apps/stage-web/src/pages/index.vue
+++ b/apps/stage-web/src/pages/index.vue
@@ -24,7 +24,7 @@ const dark = useDark()
         <!-- page -->
         <div relative flex="~ 1 row gap-y-0 gap-x-2 <md:col">
           <WidgetStage flex-1 min-w="1/2" />
-          <InteractiveArea class="flex <md:hidden" flex-1 max-w="30%" />
+          <InteractiveArea class="flex <md:hidden" flex-1 max-w="500px" min-w="30%" />
           <MobileInteractiveArea class="hidden <md:block" mx2 mb2 />
         </div>
       </div>
diff --git a/packages/stage-ui/src/components/index.ts b/packages/stage-ui/src/components/index.ts
index 2a88e66fa..4f2a5608e 100644
--- a/packages/stage-ui/src/components/index.ts
+++ b/packages/stage-ui/src/components/index.ts
@@ -1,13 +1,9 @@
 export { default as BasicTextarea } from './BasicTextarea.vue'
-
+export { default as Collapsable } from './Collapsable.vue'
 export { default as Live2DCanvas } from './Live2D/Canvas.vue'
 export { default as Live2DModel } from './Live2D/Model.vue'
-
 export { default as SceneLive2D } from './Scenes/Live2D.vue'
 export { default as SceneVRM } from './Scenes/VRM.vue'
-
 export { default as TransitionVertical } from './TransitionVertical.vue'
-
 export { default as VRMModel } from './VRM/Model.vue'
-
 export { default as WidgetStage } from './Widgets/Stage.vue'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f20baca5d..73ff0ee90 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -320,7 +320,7 @@ importers:
         version: 1.0.0-beta.9(typescript@5.7.3)
       vaul-vue:
         specifier: ^0.2.1
-        version: 0.2.1(radix-vue@1.9.11(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+        version: 0.2.1(radix-vue@1.9.16(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.3)
@@ -577,6 +577,9 @@ importers:
       pixi-live2d-display:
         specifier: ^0.4.0
         version: 0.4.0(0736f5bd67d2e4de7e9fff36ad63fa2e)
+      radix-vue:
+        specifier: ^1.9.16
+        version: 1.9.16(vue@3.5.13(typescript@5.7.3))
       rehype-stringify:
         specifier: ^10.0.1
         version: 10.0.1
@@ -600,7 +603,7 @@ importers:
         version: 1.0.0-beta.9(typescript@5.7.3)
       vaul-vue:
         specifier: ^0.2.1
-        version: 0.2.1(radix-vue@1.9.11(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
+        version: 0.2.1(radix-vue@1.9.16(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.3)
@@ -4799,8 +4802,11 @@ packages:
   '@xsai/shared-chat@0.1.0-beta.5':
     resolution: {integrity: sha512-P9FTSPUzT6AYHh1Be8eksYzbX3wxcjUGWbdgamhBierbRzif15zeDeXKsvIJpYYHwpfYHE5gKyNwXztF9wegzA==}
 
-  '@xsai/shared@0.1.0-beta.5':
-    resolution: {integrity: sha512-6xk7udi8L6oI8VaLS10r8j0ZyjEYd9YPwoZ1Pj+28t/6b7UgzJZ0KO5Plc42SNvb784ivXp9UNvoBbya18vL3Q==}
+  '@xsai/shared-chat@0.1.0-beta.6':
+    resolution: {integrity: sha512-I2e7JCbho1qowsJ2/SDnebcUIWl/cHEHbjA79fyS9YIcAi4H/mVLEJZgJvhnrZmMzO97zFNgo8FAJ5eTA/dkFQ==}
+
+  '@xsai/shared@0.1.0-beta.6':
+    resolution: {integrity: sha512-UCTpiD9bCMdOwmoZebi4GNGHkiYMDtI2GUa8d4OCykcrn9sm/+7cjwt4xXm1MYslsMvCrTX1l0sC1QbWHi+kbQ==}
 
   '@xsai/stream-text@0.1.0-beta.5':
     resolution: {integrity: sha512-t7snYYNFIhJ+9gKSaLQ3SvqAj2/LVgJQnGu4w1Oq/VLlidukPlxVVi1lhr+oYfW15xXJsbe/9C3sCCACRlpfIg==}
@@ -5563,9 +5569,6 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
-  core-js-compat@3.39.0:
-    resolution: {integrity: sha512-VgEUx3VwlExr5no0tXlBt+silBvhTryPwCXRI2Id1PN8WTKu7MreethvddqOubrYxkFdv/RnYrqlv1sFNAUelw==}
-
   core-js-compat@3.40.0:
     resolution: {integrity: sha512-0XEDpr5y5mijvw8Lbc6E5AkjrHfp7eEoPlu36SWeAbcL8fn1G1ANe8DBlo2XoNN89oVpxWwOjYIPVzR4ZvsKCQ==}
 
@@ -8169,11 +8172,6 @@ packages:
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
-  nanoid@3.3.7:
-    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
-    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
-    hasBin: true
-
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -9126,8 +9124,8 @@ packages:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}
 
-  radix-vue@1.9.11:
-    resolution: {integrity: sha512-C+MtJ66jf8J28DO5bKgNwhGCi6WQYuEosD/tY/Orry9BTDcuF/Mps4HlFd2Tq4YlXF44BEPLQ2Paz89Mz70ZgA==}
+  radix-vue@1.9.16:
+    resolution: {integrity: sha512-xwkTfQ7Ub/0XmT40JDc3g03xuYqKIJzVKGazcIkk8mUksj/tbw1pcCVRP0e3hKvPHKeQ0cktI1MvRnlUwCRvoQ==}
     peerDependencies:
       vue: '>= 3.2.0'
 
@@ -10935,10 +10933,10 @@ packages:
     resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
     engines: {node: '>=0.4.0'}
 
-  xsschema@0.1.0-beta.5:
-    resolution: {integrity: sha512-SGrU5HxzLaNTAU7iVYXQko7S/3dbKWk3O/xwLZZUBsJrZyK5JlvdLif8tXSp1HVePi0JY9lTu2jcUDDjlgeSKw==}
+  xsschema@0.1.0-beta.6:
+    resolution: {integrity: sha512-4pVgWLAP6u+ftPTDHRRICtmsNsDUZuMpsSrnJyFxm6a8YAfSWIlewo9Tv6lnlPVCgTTOFRiAqUdbGKjamelNYg==}
     peerDependencies:
-      '@valibot/to-json-schema': ^1.0.0-beta.5
+      '@valibot/to-json-schema': ^1.0.0-rc.0
       zod-to-json-schema: ^3.24.1
     peerDependenciesMeta:
       '@valibot/to-json-schema':
@@ -11899,7 +11897,7 @@ snapshots:
       babel-plugin-polyfill-corejs2: 0.4.12(@babel/core@7.26.0)
       babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.26.0)
       babel-plugin-polyfill-regenerator: 0.6.3(@babel/core@7.26.0)
-      core-js-compat: 3.39.0
+      core-js-compat: 3.40.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
@@ -15076,39 +15074,43 @@ snapshots:
 
   '@xsai/generate-speech@0.1.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.1.0-beta.5
+      '@xsai/shared': 0.1.0-beta.6
 
   '@xsai/generate-text@0.1.0-beta.5':
     dependencies:
-      '@xsai/shared-chat': 0.1.0-beta.5
+      '@xsai/shared-chat': 0.1.0-beta.6
 
   '@xsai/generate-transcription@0.1.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.1.0-beta.5
+      '@xsai/shared': 0.1.0-beta.6
 
   '@xsai/model@0.1.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.1.0-beta.5
+      '@xsai/shared': 0.1.0-beta.6
 
   '@xsai/providers@0.1.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.1.0-beta.5
+      '@xsai/shared': 0.1.0-beta.6
 
   '@xsai/shared-chat@0.1.0-beta.5':
     dependencies:
-      '@xsai/shared': 0.1.0-beta.5
+      '@xsai/shared': 0.1.0-beta.6
 
-  '@xsai/shared@0.1.0-beta.5': {}
+  '@xsai/shared-chat@0.1.0-beta.6':
+    dependencies:
+      '@xsai/shared': 0.1.0-beta.6
+
+  '@xsai/shared@0.1.0-beta.6': {}
 
   '@xsai/stream-text@0.1.0-beta.5':
     dependencies:
-      '@xsai/shared-chat': 0.1.0-beta.5
+      '@xsai/shared-chat': 0.1.0-beta.6
 
   '@xsai/tool@0.1.0-beta.5(@xsai/generate-text@0.1.0-beta.5)(zod-to-json-schema@3.24.1(zod@3.24.2))':
     dependencies:
-      '@xsai/shared': 0.1.0-beta.5
-      '@xsai/shared-chat': 0.1.0-beta.5
-      xsschema: 0.1.0-beta.5(zod-to-json-schema@3.24.1(zod@3.24.2))
+      '@xsai/shared': 0.1.0-beta.6
+      '@xsai/shared-chat': 0.1.0-beta.6
+      xsschema: 0.1.0-beta.6(zod-to-json-schema@3.24.1(zod@3.24.2))
     optionalDependencies:
       '@xsai/generate-text': 0.1.0-beta.5
     transitivePeerDependencies:
@@ -15117,7 +15119,7 @@ snapshots:
 
   '@xsai/utils-chat@0.1.0-beta.5':
     dependencies:
-      '@xsai/shared-chat': 0.1.0-beta.5
+      '@xsai/shared-chat': 0.1.0-beta.6
 
   abbrev@1.1.1:
     optional: true
@@ -15543,7 +15545,7 @@ snapshots:
     dependencies:
       '@babel/core': 7.26.0
       '@babel/helper-define-polyfill-provider': 0.6.3(@babel/core@7.26.0)
-      core-js-compat: 3.39.0
+      core-js-compat: 3.40.0
     transitivePeerDependencies:
       - supports-color
 
@@ -16121,10 +16123,6 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
-  core-js-compat@3.39.0:
-    dependencies:
-      browserslist: 4.24.2
-
   core-js-compat@3.40.0:
     dependencies:
       browserslist: 4.24.4
@@ -19613,8 +19611,6 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
-  nanoid@3.3.7: {}
-
   nanoid@3.3.8: {}
 
   nanoid@5.0.9: {}
@@ -20415,7 +20411,7 @@ snapshots:
 
   postcss@8.4.49:
     dependencies:
-      nanoid: 3.3.7
+      nanoid: 3.3.8
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -20716,7 +20712,7 @@ snapshots:
 
   quick-lru@5.1.1: {}
 
-  radix-vue@1.9.11(vue@3.5.13(typescript@5.7.3)):
+  radix-vue@1.9.16(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@floating-ui/dom': 1.6.12
       '@floating-ui/vue': 1.1.5(vue@3.5.13(typescript@5.7.3))
@@ -22607,10 +22603,10 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vaul-vue@0.2.1(radix-vue@1.9.11(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
+  vaul-vue@0.2.1(radix-vue@1.9.16(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
     dependencies:
       '@vueuse/core': 10.11.1(vue@3.5.13(typescript@5.7.3))
-      radix-vue: 1.9.11(vue@3.5.13(typescript@5.7.3))
+      radix-vue: 1.9.16(vue@3.5.13(typescript@5.7.3))
       vue: 3.5.13(typescript@5.7.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -23171,7 +23167,7 @@ snapshots:
 
   xmlhttprequest-ssl@2.1.2: {}
 
-  xsschema@0.1.0-beta.5(zod-to-json-schema@3.24.1(zod@3.24.2)):
+  xsschema@0.1.0-beta.6(zod-to-json-schema@3.24.1(zod@3.24.2)):
     optionalDependencies:
       zod-to-json-schema: 3.24.1(zod@3.24.2)
 
diff --git a/services/telegram-bot/tsconfig.json b/services/telegram-bot/tsconfig.json
index f1452c433..a9c06a734 100644
--- a/services/telegram-bot/tsconfig.json
+++ b/services/telegram-bot/tsconfig.json
@@ -7,9 +7,6 @@
     "moduleDetection": "force",
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "types": [
-      "@xsai/tool/generate-text"
-    ],
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,