Function: Handle custom provider create & delete

Author: ShenKSPZ

src/App.tsx

@@ -1,32 +1,10 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { ChatPage } from './pages/ChatPage';
 import MainLayout from './components/layout/MainLayout';
-import { SettingsService, SETTINGS_CHANGE_EVENT } from './services/settings-service';
 import DatabaseInitializer from './components/core/DatabaseInitializer';
 import { AIService } from './services/ai-service';
 
 function App() {
-  // State for settings
-  const [apiKey, setApiKey] = useState('');
-  const [selectedModel, setSelectedModel] = useState('');
-  
-  // Load settings when app starts
-  useEffect(() => {
-    const settingsService = SettingsService.getInstance();
-    const selectedProvider = settingsService.getSelectedProvider();
-    setApiKey(settingsService.getApiKey(selectedProvider));
-    setSelectedModel(settingsService.getSelectedModel());
-    
-    // Listen for settings changes
-    const handleSettingsChange = () => {
-      const provider = settingsService.getSelectedProvider();
-      setApiKey(settingsService.getApiKey(provider));
-      setSelectedModel(settingsService.getSelectedModel());
-    };
-    
-    window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
-    return () => window.removeEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
-  }, []);
 
   // Initialize AI service and cache models at startup
   useEffect(() => {
@@ -67,10 +45,7 @@ function App() {
   return (
     <DatabaseInitializer>
       <MainLayout>
-        <ChatPage 
-          initialSelectedModel={selectedModel}
-          apiKey={apiKey}
-        />
+        <ChatPage/>
       </MainLayout>
     </DatabaseInitializer>
   );

src/components/chat/ChatMessageArea.tsx

@@ -18,6 +18,8 @@ interface ChatMessageAreaProps {
   onRegenerateResponse?: (messageId: string) => void;
   onEditMessage?: (messageId: string, newContent: string) => void;
   isCurrentlyStreaming?: boolean;
+  selectedProvider: string;
+  selectedModel: string;
 }
 
 export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
@@ -29,6 +31,8 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   onRegenerateResponse,
   onEditMessage,
   isCurrentlyStreaming = false,
+  selectedProvider,
+  selectedModel,
 }) => {
   const [input, setInput] = useState('');
   const messagesEndRef = useRef<HTMLDivElement>(null);
@@ -37,6 +41,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
   const [editingContent, setEditingContent] = useState('');
   const [messagesList, setMessagesList] = useState<Message[]>([]);
   const [webSearchActive, setWebSearchActive] = useState(false);
+  const [isWebSearchAllowed, setIsWebSearchAllowed] = useState(false);
 
   // Scroll to bottom when messages change
   useEffect(() => {
@@ -52,11 +57,25 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
     }
   }, [activeConversation, activeConversation?.messages]);
 
+  // Load web search status on component mount
   useEffect(() => {
-    const webSearchActive = SettingsService.getInstance().getWebSearchEnabled();
-    setWebSearchActive(webSearchActive);
+    const loadWebSearchStatus = async () => {
+      try {
+        const settingsService = SettingsService.getInstance();
+        setWebSearchActive(settingsService.getWebSearchEnabled());
+      } catch (error) {
+        console.error('Failed to load web search status:', error);
+      }
+    };
 
-  }, [SettingsService.getInstance().getWebSearchEnabled()]);
+    loadWebSearchStatus();
+  }, []);
+
+  useEffect(() => {
+    console.log('Updated provider or model');
+    const result = ChatService.getInstance().getCurrentProviderModelCapabilities().includes(AIServiceCapability.WebSearch);
+    setIsWebSearchAllowed(result);
+  }, [selectedProvider, selectedModel]);
 
   const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
@@ -183,14 +202,17 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
     return 0;
   }
 
-  const handleToggleWebSearch = () => {
-    setWebSearchActive(!webSearchActive);
-    SettingsService.getInstance().setWebSearchEnabled(!webSearchActive);
-  }
-  
-  const getWebSearchAllowed = () => {
-    return ChatService.getInstance().getCurrentProviderModelCapabilities().includes(AIServiceCapability.WebSearch);
-  }
+  // Handle toggle web search
+  const handleToggleWebSearch = async () => {
+    try {
+      const newStatus = !webSearchActive;
+      const settingsService = SettingsService.getInstance();
+      await settingsService.setWebSearchEnabled(newStatus);
+      setWebSearchActive(newStatus);
+    } catch (error) {
+      console.error('Failed to toggle web search:', error);
+    }
+  };
 
   // If no active conversation is selected
   if (!activeConversation) {
@@ -355,7 +377,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
 
         <div className="flex flex-row items-center justify-between px-2">
           {
-            getWebSearchAllowed() ? (
+            isWebSearchAllowed ? (
               <button
                 type="button"
                 onClick={handleToggleWebSearch}

src/components/layout/MainLayout.tsx

@@ -12,7 +12,6 @@ interface MainLayoutProps {
 const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
   const [activePage, setActivePage] = useState('chat');
   const [showSettings, setShowSettings] = useState(false);
-
   // Handle page changes
   const handlePageChange = (page: string) => {
     if (page === 'settings') {
@@ -27,12 +26,6 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
     setShowSettings(true);
   };
 
-  // Handle settings save
-  const handleSettingsSaved = () => {
-    // Refresh the page or reload the necessary components
-    console.log('Settings saved, updating components...');
-  };
-
   // Handle selecting a model
   const handleSelectModel = (modelId: string, provider: string) => {
     SettingsService.getInstance().setSelectedModel(modelId);
@@ -54,8 +47,6 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
 
           <TopBar 
             onSelectModel={handleSelectModel}
-            selectedModel={SettingsService.getInstance().getSelectedModel()}
-            selectedProvider={SettingsService.getInstance().getSelectedProvider()}
             onOpenSettingsDialog={handleOpenSettingsDialog}
           />
 
@@ -71,7 +62,6 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
       <SettingsPage 
         isOpen={showSettings}
         onClose={() => setShowSettings(false)}
-        onSave={handleSettingsSaved}
       />
     </div>
   );

src/components/layout/TopBar.tsx

@@ -1,18 +1,25 @@
 import { ChevronDown, Cpu, Settings } from 'lucide-react';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { SelectModelDialog } from '../models/SelectModelDialog';
 import { ModelOption } from '../../services/ai-service';
+import { SettingsService } from '../../services/settings-service';
 
 interface TopBarProps {
   onSelectModel: (model: string, provider: string) => void;
-  selectedModel?: string;
-  selectedProvider?: string;
   onOpenSettingsDialog: () => void;
 }
 
-const TopBar: React.FC<TopBarProps> = ({ onSelectModel, selectedModel, selectedProvider, onOpenSettingsDialog }) => {
+const TopBar: React.FC<TopBarProps> = ({ onSelectModel, onOpenSettingsDialog }) => {
   const [isModelDialogOpen, setIsModelDialogOpen] = useState(false);
-  
+  const [selectedModel, setSelectedModel] = useState('');
+  const [selectedProvider, setSelectedProvider] = useState('');
+
+  useEffect(() => {
+    const settingsService = SettingsService.getInstance();
+    setSelectedModel(settingsService.getSelectedModel());
+    setSelectedProvider(settingsService.getSelectedProvider());
+  }, [SettingsService.getInstance().getSelectedModel(), SettingsService.getInstance().getSelectedProvider()]);
+
   const handleOpenModelDialog = () => {
     setIsModelDialogOpen(true);
   };