feat(chat): add toggle to enable online search and its settings

- Implemented migration for old chat history records to include online search settings.
- Created OnlineSearchSwitch component for toggling online search.
- Updated ThinkingModeSwitch component for improved styling and functionality.
- Integrated OnlineSearchSwitch into the Chat component toolbar.
- Enhanced Chat class to manage online search settings in user configuration.
- Added checks in tool calls to disable online search if not enabled in settings.
- Updated localization files to include translations for online search tool.
- Modified user configuration to support reactive default values for online search settings.

Author: tonyhu-012

assets/icons/online-search.svg

@@ -44,6 +44,9 @@
               {{ option.label }}
             </span>
           </div>
+          <div v-else-if="modelListUpdating">
+            <Loading :size="12" />
+          </div>
           <div v-else>
             ⚠️ No model
           </div>
@@ -52,7 +55,13 @@
           <div
             class="cursor-pointer text-[13px] text-[#5B5B5B] font-medium px-1 leading-5 flex flex-row gap-1 items-center justify-center"
           >
-            <span class="text-ellipsis overflow-hidden whitespace-nowrap">
+            <div v-if="modelListUpdating">
+              <Loading :size="12" />
+            </div>
+            <span
+              v-else
+              class="text-ellipsis overflow-hidden whitespace-nowrap"
+            >
               {{ option?.label || t('settings.models.no_model') }}
             </span>
             <IconExpand class="shrink-0" />
@@ -131,6 +140,7 @@ import { getUserConfig } from '@/utils/user-config'
 import { classNames } from '@/utils/vue/utils'
 
 import ExhaustiveError from './ExhaustiveError.vue'
+import Loading from './Loading.vue'
 import Selector from './Selector.vue'
 import Button from './ui/Button.vue'
 import Divider from './ui/Divider.vue'
@@ -150,8 +160,8 @@ const props = withDefaults(defineProps<{
 })
 
 const { t } = useI18n()
-const { modelList: composedModelList } = toRefs(useLLMBackendStatusStore())
-const { updateModelList, updateOllamaModelList, updateLMStudioModelList } = useLLMBackendStatusStore()
+const { modelList: composedModelList, modelListUpdating } = toRefs(useLLMBackendStatusStore())
+const { updateModelList } = useLLMBackendStatusStore()
 
 only(['sidepanel'], () => {
   const removeListener = registerSidepanelRpcEvent('updateModelList', async () => await updateModelList())
@@ -240,7 +250,8 @@ const onClick = () => {
   }
 }
 
-watch(modelList, (modelList) => {
+watch([modelList, modelListUpdating], ([modelList, updating]) => {
+  if (updating) return
   if (modelList.length === 0) {
     commonModel.value = undefined
     translationModel.value = undefined
@@ -262,8 +273,7 @@ watch([endpointType, selectedModel], async () => {
   updateModelList()
 })
 
-watch(ollamaBaseUrl, async () => updateOllamaModelList())
-watch(lmStudioBaseUrl, async () => updateLMStudioModelList())
+watch([ollamaBaseUrl, lmStudioBaseUrl], async () => updateModelList())
 
 onMounted(async () => {
   updateModelList()

components/ModelSelector.vue

@@ -6,7 +6,7 @@
     <div
       v-if="isGhostBtn"
       ref="selectorRef"
-      :class="['flex justify-between items-center cursor-pointer text-[13px] font-medium py-0 h-8', containerClass]"
+      :class="classNames('flex justify-between items-center cursor-pointer text-[13px] font-medium py-0 h-8', containerClass)"
       :disabled="disabled"
       @click="toggleDropdown"
     >
@@ -132,6 +132,7 @@ import { Component, computed, FunctionalComponent, Ref, ref, watch, watchEffect
 
 import { useInjectContext } from '@/composables/useInjectContext'
 import { useZIndex } from '@/composables/useZIndex'
+import { classNames } from '@/utils/vue/utils'
 
 import ScrollContainer from './ScrollContainer.vue'
 import Button from './ui/Button.vue'

components/Selector.vue

@@ -10,6 +10,7 @@ export interface ChatHistoryRecord {
   history: string // JSON serialized HistoryItemV1[]
   contextUpdateInfo?: string // JSON serialized contextUpdateInfo from ChatHistoryV1
   reasoningEnabled?: boolean // reasoning setting for this chat
+  onlineSearchEnabled?: boolean // online search setting for this chat, default is true
   createdAt: number
   updatedAt: number
 }

entrypoints/background/database/types.ts

@@ -64,6 +64,18 @@ export class BackgroundChatHistoryService {
     }
   }
 
+  migrateFromOldHistoryRecord(record: ChatHistoryRecord): ChatHistoryV1 {
+    return {
+      id: record.id,
+      title: record.title,
+      lastInteractedAt: record.lastInteractedAt,
+      contextUpdateInfo: record.contextUpdateInfo ? JSON.parse(record.contextUpdateInfo) : undefined,
+      reasoningEnabled: record.reasoningEnabled,
+      onlineSearchEnabled: record.onlineSearchEnabled ?? true, // default to true if undefined for backward compatibility
+      history: JSON.parse(record.history) as HistoryItemV1[],
+    }
+  }
+
   /**
    * Get chat history by ID
    */
@@ -75,14 +87,7 @@ export class BackgroundChatHistoryService {
       const record = await db.get(CHAT_OBJECT_STORES.CHAT_HISTORY, chatId)
       if (!record) return null
 
-      return {
-        id: record.id,
-        title: record.title,
-        lastInteractedAt: record.lastInteractedAt,
-        contextUpdateInfo: record.contextUpdateInfo ? JSON.parse(record.contextUpdateInfo) : undefined,
-        reasoningEnabled: record.reasoningEnabled,
-        history: JSON.parse(record.history) as HistoryItemV1[],
-      }
+      return this.migrateFromOldHistoryRecord(record)
     }
     catch (error) {
       log.error('Failed to get chat history:', error)
@@ -108,6 +113,7 @@ export class BackgroundChatHistoryService {
         history: JSON.stringify(chatHistory.history),
         contextUpdateInfo: chatHistory.contextUpdateInfo ? JSON.stringify(chatHistory.contextUpdateInfo) : undefined,
         reasoningEnabled: chatHistory.reasoningEnabled,
+        onlineSearchEnabled: chatHistory.onlineSearchEnabled,
         createdAt: now, // Will be overwritten if record exists
         updatedAt: now,
       }

entrypoints/background/services/chat-history-service.ts

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div
+      class="flex items-center gap-1 px-1 py-1 min-h-6 rounded-sm cursor-pointer"
+      :class="[
+        isOnlineSearchEnabled ? 'bg-[#DEFFEB] text-[#5B5B5B]' : 'text-[#AEB5BD]',
+      ]"
+      @click="toggleOnlineSearch"
+    >
+      <IconOnlineSearch
+        class="w-4 h-4"
+      />
+      <span class="text-xs font-medium select-none">
+        {{ t('chat.tools.online_search.title') }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import IconOnlineSearch from '@/assets/icons/online-search.svg'
+import { useI18n } from '@/utils/i18n'
+import { getUserConfig } from '@/utils/user-config'
+
+import { Chat } from '../../utils/chat'
+
+const { t } = useI18n()
+
+const userConfig = await getUserConfig()
+const chat = await Chat.getInstance()
+
+// Use chat-specific reasoning setting with fallback to global setting
+const isOnlineSearchEnabled = computed({
+  get() {
+    return chat.historyManager.chatHistory.value.onlineSearchEnabled
+  },
+  set(value: boolean) {
+    // Update both chat-specific setting and global setting
+    chat.historyManager.chatHistory.value.onlineSearchEnabled = value
+    userConfig.chat.onlineSearch.enable.set(value)
+  },
+})
+
+const toggleOnlineSearch = () => {
+  isOnlineSearchEnabled.value = !isOnlineSearchEnabled.value
+}
+</script>

entrypoints/sidepanel/components/Chat/OnlineSearchSwitch.vue

@@ -1,38 +1,27 @@
 <template>
-  <div class="flex items-center gap-1">
-    <IconThinking
-      class="w-4 h-4 text-[#5B5B5B]"
-      :class="{ 'opacity-50': !isModelSupportsThinking }"
-    />
-    <span
-      class="text-xs text-[#5B5B5B] font-medium select-none"
-      :class="{ 'opacity-50': !isModelSupportsThinking }"
-    >
-      {{ t('chat.thinking_mode.label') }}
-    </span>
-    <button
-      :disabled="!isModelSupportsThinking || !isThinkingToggleable"
+  <div>
+    <div
+      class="flex items-center gap-1 px-1 py-1 min-h-6 rounded-sm"
       :class="[
-        'relative inline-flex h-4 w-7 items-center rounded-full transition-colors',
         {
-          'bg-[#24B960]': isThinkingEnabled && isModelSupportsThinking,
-          'bg-gray-300': !isThinkingEnabled || !isModelSupportsThinking,
           'cursor-not-allowed opacity-50': !isModelSupportsThinking || !isThinkingToggleable,
-          'cursor-pointer': isModelSupportsThinking && isThinkingToggleable
-        }
+          'cursor-pointer': isModelSupportsThinking && isThinkingToggleable,
+        },
+        isThinkingEnabled ? 'bg-[#DEFFEB] text-[#5B5B5B]' : 'text-[#AEB5BD]',
       ]"
       @click="toggleThinking"
     >
-      <span
-        :class="[
-          'inline-block h-3 w-3 transform rounded-full bg-white transition-transform',
-          {
-            'translate-x-3.5': isThinkingEnabled && isModelSupportsThinking,
-            'translate-x-0.5': !isThinkingEnabled || !isModelSupportsThinking
-          }
-        ]"
+      <IconThinking
+        class="w-4 h-4"
+        :class="{ 'opacity-50': !isModelSupportsThinking }"
       />
-    </button>
+      <span
+        class="text-xs font-medium select-none"
+        :class="{ 'opacity-50': !isModelSupportsThinking }"
+      >
+        {{ t('chat.thinking_mode.label') }}
+      </span>
+    </div>
   </div>
 </template>
 
@@ -147,18 +136,4 @@ watch([endpointType, currentModel], async () => {
 onMounted(async () => {
   await updateModelList()
 })
-
-// Debug logging for development, temporarily keep
-// watch([currentModel, endpointType, isModelSupportsThinking, isThinkingToggleable, isThinkingEnabled],
-//   ([model, endpoint, supportsThinking, toggleable, enabled]) => {
-//     logger.debug('ThinkingModeSwitch state:', {
-//       currentModel: model,
-//       endpointType: endpoint,
-//       isModelSupportsThinking: supportsThinking,
-//       isThinkingToggleable: toggleable,
-//       isThinkingEnabled: enabled,
-//     })
-//   },
-//   { immediate: true },
-// )
 </script>