Fix: fix the custom provider won't update after changed

Author: ShenKSPZ

.cursor/control/MAIN_CONTROL.md

@@ -51,8 +51,6 @@ External Dependency:
 - axios v1.8.4
 - katex v0.16.21
 - lucide-react v0.344.0
-- primeicons v7.0.0
-- primereact v10.9.3
 - prism-themes v1.9.0
 - prismjs v1.30.0
 - react v18.3.1

app/main.ts

@@ -4,6 +4,7 @@ import * as path from 'path';
 import * as fs from 'fs';
 import * as os from 'os';
 import { execSync } from 'child_process';
+import axios from 'axios';
 
 // Main window reference
 let win: BrowserWindow | null = null;
@@ -174,9 +175,40 @@ function createWindow(): BrowserWindow {
     app.quit();
   });
 
+  // testCallAnthropic();
+
   return win;
 }
 
+async function testCallAnthropic() {
+  try {
+    const response = await axios.post("https://api.anthropic.com/v1/messages", {
+      headers: {
+        "x-api-key": "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",
+        "Content-Type": "application/json",
+        "anthropic-version": "2023-06-01",
+        "anthropic-dangerous-direct-browser-access": "true",
+      },
+      body: JSON.stringify({
+        messages: [{
+          role: "user",
+          content: "Hello, how are you?"
+        }],
+        model: "claude-3-5-sonnet-20241022",
+        max_tokens: 1024,
+      }),
+    });
+  
+    console.log(response);
+  
+    const data = response.data;
+    return data;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}
+
 /**
  * Get system information including OS, CPU, and RAM
  */

package.json

@@ -27,8 +27,6 @@
     "dotenv": "^16.4.7",
     "katex": "^0.16.21",
     "lucide-react": "^0.344.0",
-    "primeicons": "^7.0.0",
-    "primereact": "^10.9.3",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.30.0",
     "react": "^18.3.1",

pnpm-lock.yaml

@@ -28,7 +28,6 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
 
   // Handle selecting a model
   const handleSelectModel = (modelId: string, provider: string) => {
-    console.log('--------------------Selecting Model: ', modelId, ' for Provider: ', provider);
     SettingsService.getInstance().setSelectedModel(modelId);
     SettingsService.getInstance().setSelectedProvider(provider);
   };

src/components/layout/MainLayout.tsx

@@ -1,15 +1,6 @@
-@layer tailwind-base, primereact, tailwind-utilities;
-
-@import 'primereact/resources/themes/lara-light-blue/theme.css' layer(primereact);
-
-@layer tailwind-base {
-  @tailwind base;
-}
-
-@layer tailwind-utilities {
-  @tailwind components;
-  @tailwind utilities;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 /* Add these styles for Electron window dragging */
 .app-region-drag {

src/components/settings/ApiManagement.tsx

@@ -2,13 +2,10 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.tsx'
 import './index.css'
-import { PrimeReactProvider } from 'primereact/api';
 import 'katex/dist/katex.min.css';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <PrimeReactProvider>
-      <App />
-    </PrimeReactProvider>
+    <App />
   </StrictMode>,
 )

src/index.css

@@ -16,6 +16,7 @@ export const ChatPage = () => {
   const [error, setError] = useState<Error | null>(null);
   const [selectedModel, setSelectedModel] = useState('');
   const [selectedProvider, setSelectedProvider] = useState('');
+  const [isApiKeyMissing, setIsApiKeyMissing] = useState(true);
 
   // Initialize the services
   useEffect(() => {
@@ -96,8 +97,11 @@ export const ChatPage = () => {
     const handleSettingsChange = () => {
       setSelectedProvider(SettingsService.getInstance().getSelectedProvider());
       setSelectedModel(SettingsService.getInstance().getSelectedModel());
+      setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
     };
 
+    setIsApiKeyMissing(!SettingsService.getInstance().getApiKey());
+    
     window.addEventListener(SETTINGS_CHANGE_EVENT, handleSettingsChange);
   }, []);
 
@@ -278,9 +282,6 @@ export const ChatPage = () => {
     }
   }, [conversations.length, createNewChat, isServiceInitialized]);
 
-  // Show API key missing message if needed
-  const isApiKeyMissing = !SettingsService.getInstance().getApiKey(SettingsService.getInstance().getSelectedProvider());
-
   // Handle stopping a streaming response
   const handleStopStreaming = () => {
     if (!chatServiceRef.current) return;

src/main.tsx

@@ -56,21 +56,25 @@ export class AIService {
    */
   private constructor() {
     // Initialize with default providers
-    this.addProviders();
+    this.refreshProviders();
     this.setupSettingsListener();
   }
 
-  private addProviders(): void {
+  private refreshProviders(): void {
     const settingsService = SettingsService.getInstance();
     const settings = settingsService.getSettings();
 
-    for (const provider of Object.keys(settings.providers)) {
-      const providerSettings = settings.providers[provider];
-      if (!this.providers.has(provider) && providerSettings && providerSettings.apiKey && providerSettings.apiKey.length > 0) {
+    for (const providerID of Object.keys(settings.providers)) {
+      const providerSettings = settings.providers[providerID];
 
-        const providerInstance = ProviderFactory.getNewProvider(provider);
+      if(this.providers.has(providerID)) {
+        this.providers.delete(providerID);
+        this.providers.set(providerID, ProviderFactory.getNewProvider(providerID));
+      }
+      else if (providerSettings && providerSettings.apiKey && providerSettings.apiKey.length > 0) {
+        const providerInstance = ProviderFactory.getNewProvider(providerID);
         if (providerInstance) {
-          this.providers.set(provider, providerInstance);
+          this.providers.set(providerID, providerInstance);
         }
       }
     }
@@ -393,7 +397,7 @@ export class AIService {
     this.modelCache.clear();
     this.lastFetchTime.clear();
 
-    this.addProviders();
+    this.refreshProviders();
 
     // Re-fetch all models
     await this.getCachedAllModels();