Fix: Add google search function

Author: ShenKSPZ

src/App.tsx

@@ -46,6 +46,24 @@ function App() {
     return () => {};
   }, []);
 
+  // Handle link clicks
+  useEffect(() => {
+    const handleLinkClick = (e: MouseEvent) => {
+      const target = (e.target as HTMLElement).closest('a');
+      if (target && target.href && target.target !== '_self') {
+        e.preventDefault();
+        window.electron.openUrl(target.href);
+      }
+    };
+
+    document.addEventListener('click', handleLinkClick);
+
+    return () => {
+      document.removeEventListener('click', handleLinkClick);
+    };
+  }, []);
+  
+  
   return (
     <DatabaseInitializer>
       <MainLayout>

src/components/chat/ChatMessageArea.tsx

@@ -6,6 +6,8 @@ import MessageToolboxMenu, { ToolboxAction } from '../ui/MessageToolboxMenu';
 import { MessageHelper } from '../../services/message-helper';
 import { DatabaseIntegrationService } from '../../services/database-integration';
 import { SettingsService } from '../../services/settings-service';
+import { ChatService } from '../../services/chat-service';
+import { AIServiceCapability } from '../../services/core/capabilities';
 
 interface ChatMessageAreaProps {
   activeConversation: Conversation | null;
@@ -182,6 +184,10 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
     setWebSearchActive(!webSearchActive);
     SettingsService.getInstance().setWebSearchEnabled(!webSearchActive);
   }
+  
+  const getWebSearchAllowed = () => {
+    return ChatService.getInstance().getCurrentProviderModelCapabilities().includes(AIServiceCapability.WebSearch);
+  }
 
   // If no active conversation is selected
   if (!activeConversation) {
@@ -344,18 +350,34 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
           />
         </div>
 
-        <div className="flex flex-row items-center justify-between">
-          <button
-            type="button"
-            onClick={handleToggleWebSearch}
-            className={`flex items-center justify-center w-fit h-8 p-2 ml-2 transition-all duration-200 rounded-full outline outline-2 hover:outline
-              ${webSearchActive ? 'bg-blue-50 outline-blue-300 hover:bg-blue-200 hover:outline hover:outline-blue-500' : 'bg-white outline-gray-100 hover:bg-blue-50 hover:outline hover:outline-blue-300'}`}
-            aria-label="Toggle Web Search"
-            title="Toggle Web Search"
-          >
-            <Globe className={`mr-1 ${webSearchActive ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`} size={20} />
-            <span className={`text-sm font-light ${webSearchActive ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`}>Web Search</span>
-          </button>
+        <div className="flex flex-row items-center justify-between px-2">
+          {
+            getWebSearchAllowed() ? (
+              <button
+                type="button"
+                onClick={handleToggleWebSearch}
+                className={`flex items-center justify-center w-fit h-8 p-2 transition-all duration-200 rounded-full outline outline-2 hover:outline
+                  ${webSearchActive ? 'bg-blue-50 outline-blue-300 hover:bg-blue-200 hover:outline hover:outline-blue-500' : 'bg-white outline-gray-100 hover:bg-blue-50 hover:outline hover:outline-blue-300'}`}
+                aria-label="Toggle Web Search"
+                title="Toggle Web Search"
+              >
+                <Globe className={`mr-1 ${webSearchActive ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`} size={20} />
+                <span className={`text-sm font-light ${webSearchActive ? 'text-blue-500' : 'text-gray-400'} transition-all duration-200`}>Web Search</span>
+              </button>
+            )
+            :
+            (
+              <button
+                type="button"
+                className={`flex items-center justify-center bg-gray-100 w-fit h-8 p-2 ml-2 transition-all duration-200 rounded-full cursor-not-allowed`}
+                aria-label="Toggle Web Search"
+                title="Toggle Web Search"
+              >
+                <Globe className={`mr-1 text-gray-400 transition-all duration-200`} size={20} />
+                <span className={`text-sm font-light text-gray-400 transition-all duration-200`}>Web Search (Not available)</span>
+              </button>
+            )
+          }
 
           {isCurrentlyStreaming || hasStreamingMessage ? (
             <button

src/pages/ChatPage.tsx

@@ -4,7 +4,7 @@ import ChatMessageArea from '../components/chat/ChatMessageArea';
 import { Conversation } from '../types/chat';
 import { SettingsService } from '../services/settings-service';
 import { ChatService } from '../services/chat-service';
-
+import { AIService } from '../services/ai-service';
 interface ChatPageProps {
   initialSelectedModel?: string;
   apiKey?: string;
@@ -32,7 +32,7 @@ export const ChatPage: React.FC<ChatPageProps> = ({
         chatServiceRef.current = chatService;
 
         // Setup AI service state listener
-        const aiService = chatService.getAIService();
+        const aiService = AIService.getInstance();
         const unsubscribe = aiService.subscribe(() => {
           setIsLoading(aiService.isLoading);
           setError(aiService.error);

src/services/ai-service.ts

@@ -74,7 +74,7 @@ export class AIService {
 
       // console.log('Provider: ', provider, ' Provider settings: ', providerSettings);
 
-      if (providerSettings && providerSettings.apiKey && providerSettings.apiKey.length > 0) {
+      if (!this.providers.has(provider) && providerSettings && providerSettings.apiKey && providerSettings.apiKey.length > 0) {
         const providerInstance = ProviderFactory.getNewProvider(provider as AIProvider);
         if (providerInstance) {
           this.providers.set(provider, providerInstance);
@@ -408,6 +408,8 @@ export class AIService {
     this.modelCache.clear();
     this.lastFetchTime.clear();
 
+    this.addProviders();
+
     // Re-fetch all models
     await this.getCachedAllModels();
   }

src/services/chat-service.ts

@@ -4,6 +4,8 @@ import { AIService } from './ai-service';
 import { SettingsService } from './settings-service';
 import { StreamControlHandler } from './streaming-control';
 import { MessageHelper } from './message-helper';
+import { AIServiceCapability } from './core/capabilities';
+import { AIProvider as AIProviderType } from '../types/ai-providers';
 /**
  * Service for managing chat conversations
  */
@@ -636,11 +638,18 @@ export class ChatService {
     }
   }
 
-  /**
-   * Get the AI service
-   */
-  public getAIService(): AIService {
-    return this.aiService;
+  getCurrentProviderModelCapabilities(): AIServiceCapability[] {
+    const settingsService = SettingsService.getInstance();
+    const provider = settingsService.getSelectedProvider() as AIProviderType;
+    const model = settingsService.getSelectedModel();
+
+    const providerService = AIService.getInstance().getProvider(provider);
+
+    if (!providerService) {
+      return [];
+    }
+
+    return providerService.getModelCapabilities(model);
   }
 
   /**

src/services/providers/gemini-service.ts

@@ -6,6 +6,7 @@ import { CommonProviderHelper } from './common-provider-service';
 import { SettingsService } from '../settings-service';
 import { AIServiceCapability } from '../core/capabilities';
 import { mapModelCapabilities } from '../core/capabilities';
+import { LanguageModel } from 'ai';
 
 export const GEMINI_PROVIDER_NAME = 'Gemini';
 
@@ -118,7 +119,21 @@ export class GeminiService implements AiServiceProvider {
     options: CompletionOptions,
     streamController: StreamControlHandler
   ): Promise<Message> {
-    const modelInstance = this.ProviderInstance.languageModel(options.model);
+    const isWebSearchActive = SettingsService.getInstance().getWebSearchEnabled();
+
+    let modelInstance: LanguageModel;
+
+    if (isWebSearchActive) {
+      modelInstance = this.ProviderInstance.languageModel(options.model, {
+        useSearchGrounding: true,
+      });
+
+      options.stream = false;
+    } 
+    else {
+      modelInstance = this.ProviderInstance.languageModel(options.model);
+    }
+
     return CommonProviderHelper.getChatCompletionByModel(modelInstance, messages, options, streamController);
   }
 

src/services/providers/openai-service.ts

@@ -114,11 +114,9 @@ export class OpenAIService implements AiServiceProvider {
     options: CompletionOptions,
     streamController: StreamControlHandler
   ): Promise<Message> {
-    console.log("OPEN AI Getting chat completion");
     const isWebSearchActive = SettingsService.getInstance().getWebSearchEnabled();
 
     if (isWebSearchActive) {
-      console.log("Web search is active");
       return this.getChatCompletionWithWebSearch(messages, options, streamController);
     }
 

src/types/window.d.ts

@@ -11,5 +11,6 @@ interface Window {
       usedMemory: number;
       cpuUsage: number;
     }>;
+    openUrl: (url: string) => Promise<void>;
   };
 }