feat: i18n support

components/ConfigManager.vue

@@ -1,7 +1,23 @@
 <script setup lang="ts">
   const { config } = useConfigStore()
+  const { t } = useI18n()
+
   const showModal = ref(false)
 
+  const aiProviderOptions = computed(() => [
+    {
+      label: t('settings.ai.providers.openaiCompatible.title'),
+      help: t('settings.ai.providers.openaiCompatible.description'),
+      apiBasePlaceholder: t(
+        'settings.ai.providers.openaiCompatible.apiBasePlaceholder',
+      ),
+      value: 'openai-compatible',
+    },
+  ])
+  const selectedAiProvider = computed(() =>
+    aiProviderOptions.value.find((o) => o.value === config.ai.provider),
+  )
+
   defineExpose({
     show() {
       showModal.value = true
@@ -11,41 +27,35 @@
 
 <template>
   <div>
-    <UModal v-model:open="showModal" title="Settings">
+    <UModal v-model:open="showModal" :title="$t('settings.title')">
       <UButton icon="i-lucide-settings" />
 
       <template #body>
-        <div class="space-y-2">
+        <div class="flex flex-col gap-y-2">
           <!-- AI provider -->
-          <h3 class="font-bold">AI Provider</h3>
-          <UFormField label="Provider">
-            <template #help>
-              Currently only OpenAI compatible providers are supported, e.g.
-              Gemini, Together AI, SiliconCloud, ...
+          <h3 class="font-bold">{{ $t('settings.ai.provider') }}</h3>
+          <UFormField>
+            <template v-if="selectedAiProvider" #help>
+              {{ selectedAiProvider.help }}
             </template>
-            <USelect
-              v-model="config.ai.provider"
-              :items="[
-                { label: 'OpenAI Compatible', value: 'openai-compatible' },
-              ]"
-            />
+            <USelect v-model="config.ai.provider" :items="aiProviderOptions" />
           </UFormField>
           <div
             v-if="config.ai.provider === 'openai-compatible'"
             class="space-y-2"
           >
-            <UFormField label="API Key" required>
+            <UFormField :label="$t('settings.ai.apiKey')" required>
               <PasswordInput
                 v-model="config.ai.apiKey"
                 class="w-full"
-                placeholder="API Key"
+                :placeholder="$t('settings.ai.apiKey')"
               />
             </UFormField>
-            <UFormField label="API Base URL">
+            <UFormField :label="$t('settings.ai.apiBase')">
               <UInput
                 v-model="config.ai.apiBase"
                 class="w-full"
-                placeholder="https://api.openai.com/v1"
+                :placeholder="selectedAiProvider?.apiBasePlaceholder"
               />
             </UFormField>
             <UFormField label="Model" required>
@@ -57,34 +67,33 @@
             </UFormField>
           </div>
 
-          <USeparator class="my-4" />
+          <USeparator class="my-2" />
 
           <!-- Web search provider -->
-          <h3 class="font-bold">Web Search Provider</h3>
-          <UFormField label="Provider">
+          <h3 class="font-bold"> {{ $t('settings.webSearch.provider') }} </h3>
+          <UFormField>
             <template #help>
-              Tavily is similar to Firecrawl, but with more free quota (1000
-              credits / month). Get one API key at
-              <UButton
-                class="!p-0"
-                to="https://app.tavily.com/home"
-                target="_blank"
-                variant="link"
-              >
-                app.tavily.com
-              </UButton>
-              .
+              <i18n-t keypath="settings.webSearch.providerHelp" tag="p">
+                <UButton
+                  class="!p-0"
+                  to="https://app.tavily.com/home"
+                  target="_blank"
+                  variant="link"
+                >
+                  app.tavily.com
+                </UButton>
+              </i18n-t>
             </template>
             <USelect
               v-model="config.webSearch.provider"
               :items="[{ label: 'Tavily', value: 'tavily' }]"
             />
           </UFormField>
-          <UFormField label="API Key" required>
+          <UFormField :label="$t('settings.webSearch.apiKey')" required>
             <PasswordInput
               v-model="config.webSearch.apiKey"
               class="w-full"
-              placeholder="API Key"
+              :placeholder="$t('settings.webSearch.apiKey')"
             />
           </UFormField>
         </div>
@@ -92,14 +101,14 @@
       <template #footer>
         <div class="flex items-center justify-between gap-2 w-full">
           <p class="text-sm text-gray-500">
-            Settings are stored locally in your browser.
+            {{ $t('settings.disclaimer') }}
           </p>
           <UButton
             color="primary"
             icon="i-lucide-check"
             @click="showModal = false"
           >
-            Save
+            {{ $t('settings.save') }}
           </UButton>
         </div>
       </template>