feat: search in a different language

components/ConfigManager.vue

@@ -137,7 +137,7 @@
 
           <USeparator class="my-2" />
 
-          <!-- Web search provider -->
+          <!-- Web search -->
           <h3 class="font-bold"> {{ $t('settings.webSearch.provider') }} </h3>
           <UFormField>
             <template #help>
@@ -164,6 +164,20 @@
               :placeholder="$t('settings.webSearch.apiKey')"
             />
           </UFormField>
+          <UFormField :label="$t('settings.webSearch.queryLanguage')">
+            <template #help>
+              <i18n-t
+                class="whitespace-pre-wrap"
+                keypath="settings.webSearch.queryLanguageHelp"
+                tag="p"
+              />
+            </template>
+            <LangSwitcher
+              :value="config.webSearch.searchLanguage"
+              @update="config.webSearch.searchLanguage = $event"
+              private
+            />
+          </UFormField>
         </div>
       </template>
       <template #footer>

components/DeepResearch.vue

@@ -9,6 +9,7 @@
   import { marked } from 'marked'
 
   const { t, locale } = useI18n()
+  const { config } = storeToRefs(useConfigStore())
   const emit = defineEmits<{
     (e: 'complete', results: ResearchResult): void
   }>()
@@ -146,11 +147,15 @@
     searchResults.value = {}
     isLoading.value = true
     try {
+      const searchLanguage = config.value.webSearch.searchLanguage
+        ? t('language', {}, { locale: config.value.webSearch.searchLanguage })
+        : undefined
       await deepResearch({
         query,
         maxDepth: depth,
         breadth,
         language: t('language', {}, { locale: locale.value }),
+        searchLanguage,
         onProgress: handleResearchProgress,
       })
     } catch (error) {

components/LangSwitcher.vue

@@ -1,17 +1,37 @@
 <script setup lang="ts">
-  const { locale, availableLocales, t, setLocale } = useI18n()
+  const { locale: globalLocale, availableLocales, t, setLocale } = useI18n()
+
+  export type Locale = (typeof globalLocale)['value']
+  export type AvailableLocales = Locale[]
+
+  const props = defineProps<{
+    /** Override display locale */
+    value?: Locale
+    /** If true, it will not change global locales */
+    private?: boolean
+  }>()
+
+  const emit = defineEmits<{
+    (e: 'update', value: Locale): void
+  }>()
 
   const localeOptions = availableLocales.map((locale) => ({
     value: locale,
     label: t('language', {}, { locale }),
   }))
+
+  function changeLocale(l: Locale) {
+    emit('update', l)
+    if (props.private) return
+    setLocale(l)
+  }
 </script>
 
 <template>
   <USelect
     icon="i-lucide-languages"
-    :model-value="locale"
+    :model-value="value ?? globalLocale"
     :items="localeOptions"
-    @update:model-value="setLocale($event)"
+    @update:model-value="changeLocale($event)"
   />
 </template>