Fix: Fix local settings

Author: ShenKSPZ

src/components/chat/ChatMessageArea.tsx

@@ -7,7 +7,7 @@ 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';
+import { AIServiceCapability } from '../../types/capabilities';
 
 interface ChatMessageAreaProps {
   activeConversation: Conversation | null;

src/components/settings/ApiManagement.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
-import { ChevronRight, Save, AlertCircle } from 'lucide-react';
-import { ProviderSettings } from '../../services/settings-service';
+import { ChevronRight, Save, AlertCircle, Plus } from 'lucide-react';
+import { ProviderSettings } from '../../types/settings';
 import { AIProvider } from '../../types/ai-providers';
 
-
 interface ApiManagementProps {
   selectedProvider: AIProvider;
   providerSettings: Record<string, ProviderSettings>;
@@ -27,22 +26,21 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
   saveStatus,
   onSaveSettings,
 }) => {
-  const [showApiKey, setShowApiKey] = useState(false);
 
+  const [showApiKey, setShowApiKey] = useState(false);
+
   // Get current provider settings
   const currentProviderSettings = providerSettings[selectedProvider] || { apiKey: '' };
 
-  const providers: AIProvider[] = [
-    'TensorBlock', 
-    'OpenAI', 
-    'Anthropic', 
-    'Gemini', 
-    'Fireworks.ai', 
-    'Together.ai', 
-    'OpenRouter', 
-    'Custom'
-  ];
-  
+  const handleMapProviderSettings = () => {
+    const providers = Object.keys(providerSettings).map((provider) => {
+      providerSettings[provider].providerName = provider;
+      return providerSettings[provider];
+    });
+    
+    return providers;
+  }
+
   return (
     <div className="flex flex-col h-full">
       <div className="flex items-center justify-between mb-4">
@@ -65,28 +63,35 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
 
       <div className="flex flex-1">
         {/* Provider Selection */}
-        <div className="w-1/3 pr-6 border-r border-gray-200">
+        <div className="relative w-1/3 pr-6 border-r border-gray-200">
           <h3 className="mb-4 text-lg font-medium">AI Service Providers</h3>
           <p className="mb-4 text-sm text-gray-600">
             Select an AI service provider to configure its API settings.
           </p>
 
           <div className="space-y-2">
-            {providers.map((provider) => (
+            {handleMapProviderSettings().map((provider) => (
               <button
-                key={provider}
+                key={provider.providerName}
                 className={`flex items-center justify-between w-full px-4 py-3 text-left rounded-lg ${
-                  selectedProvider === provider 
+                  selectedProvider === provider.providerName 
                     ? 'bg-blue-50 text-blue-600 border border-blue-200' 
                     : 'bg-white border border-gray-200 hover:bg-gray-50'
                 }`}
-                onClick={() => onProviderChange(provider)}
+                onClick={() => onProviderChange(provider.providerName as AIProvider)}
               >
-                <span>{provider}</span>
-                {selectedProvider === provider && <ChevronRight size={16} />}
+                <span>{provider.providerName}</span>
+                {selectedProvider === provider.providerName && <ChevronRight size={16} />}
               </button>
             ))}
           </div>
+
+          <div className="absolute w-[calc(100%-1.5rem)] bottom-2">
+            <button className="flex items-center w-full px-4 py-2 text-gray-600 bg-white border border-gray-300 rounded-lg hover:text-gray-800">
+              <Plus size={16} className="mr-2 text-base" />
+              <span>Add Custom Provider</span>
+            </button>
+          </div>
         </div>
 
         {/* Provider Settings */}
@@ -127,22 +132,6 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
               </p>
             </div>
 
-            {/* OpenAI-specific settings */}
-            {/* {selectedProvider === 'OpenAI' && (
-              <div>
-                <label className="block mb-2 text-sm font-medium text-gray-700">
-                  Organization ID (optional)
-                </label>
-                <input
-                  type="text"
-                  value={currentProviderSettings.organizationId || ''}
-                  onChange={(e) => onOrgIdChange(e.target.value)}
-                  placeholder="org-..."
-                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-              </div>
-            )} */}
-            
             {/* Anthropic-specific settings */}
             {selectedProvider === 'Anthropic' && (
               <div>
@@ -160,63 +149,24 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
               </div>
             )}
 
-            {/* Gemini-specific settings */}
-            {/* {selectedProvider === 'Gemini' && (
+            {/* Custom provider settings */}
+            {selectedProvider === 'Custom' && (
               <>
                 <div>
                   <label className="block mb-2 text-sm font-medium text-gray-700">
-                    Base URL
+                    Provider Name
                   </label>
                   <input
                     type="text"
-                    value={currentProviderSettings.baseUrl || 'https://generativelanguage.googleapis.com'}
+                    value={currentProviderSettings.providerName || ''}
                     onChange={(e) => onBaseUrlChange && onBaseUrlChange(e.target.value)}
-                    placeholder="https://generativelanguage.googleapis.com"
-                    className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                  />
-                </div>
-                <div>
-                  <label className="block mb-2 text-sm font-medium text-gray-700">
-                    API Version
-                  </label>
-                  <input
-                    type="text"
-                    value={currentProviderSettings.apiVersion || 'v1'}
-                    onChange={(e) => onApiVersionChange(e.target.value)}
-                    placeholder="v1"
+                    placeholder="Custom Provider Name"
                     className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                   />
+                  <p className="mt-2 text-xs text-gray-500">
+                    The name of your custom provider
+                  </p>
                 </div>
-              </>
-            )} */}
-            
-            {/* Base URL setting for providers that need it */}
-            {/* {(selectedProvider === 'Fireworks.ai' || 
-              selectedProvider === 'Together' || 
-              selectedProvider === 'OpenRouter') && (
-              <div>
-                <label className="block mb-2 text-sm font-medium text-gray-700">
-                  Base URL
-                </label>
-                <input
-                  type="text"
-                  value={currentProviderSettings.baseUrl || ''}
-                  onChange={(e) => onBaseUrlChange && onBaseUrlChange(e.target.value)}
-                  placeholder={
-                    selectedProvider === 'Fireworks.ai' 
-                      ? 'https://api.fireworks.ai/inference/v1' 
-                      : selectedProvider === 'Together'
-                        ? 'https://api.together.xyz/v1'
-                        : 'https://openrouter.ai/api/v1'
-                  }
-                  className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                />
-              </div>
-            )} */}
-            
-            {/* Custom provider settings */}
-            {selectedProvider === 'Custom' && (
-              <>
                 <div>
                   <label className="block mb-2 text-sm font-medium text-gray-700">
                     Base URL
@@ -236,20 +186,7 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
                 <div className="pt-6 mt-6 border-t border-gray-200">
                   <h4 className="mb-4 font-medium text-md">API Endpoints</h4>
 
-                  <div className="space-y-4">
-                    <div>
-                      <label className="block mb-2 text-sm font-medium text-gray-700">
-                        Completions Endpoint
-                      </label>
-                      <input
-                        type="text"
-                        value={currentProviderSettings.completionsEndpoint || '/completions'}
-                        onChange={(e) => onEndpointChange && onEndpointChange('completionsEndpoint', e.target.value)}
-                        placeholder="/completions"
-                        className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                      />
-                    </div>
-                    
+                  <div className="space-y-4">                   
                     <div>
                       <label className="block mb-2 text-sm font-medium text-gray-700">
                         Chat Completions Endpoint

src/pages/SettingsPage.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Server, MessageSquare } from 'lucide-react';
-import { SettingsService, ProviderSettings } from '../services/settings-service';
+import { SettingsService } from '../services/settings-service';
+import { ProviderSettings } from '../types/settings';
 import { ApiManagement, ModelManagement, ChatSettings } from '../components/settings';
 import { AIProvider } from '../types/ai-providers';
 import { DatabaseIntegrationService } from '../services/database-integration';
@@ -144,12 +145,6 @@ export const SettingsPage: React.FC<SettingsPageProps> = ({
         settingsService.updateProviderSettings(providerSettings[provider], provider);
       });
 
-      // Update selected provider
-      settingsService.setSelectedProvider(selectedProvider);
-      
-      // Update selected model
-      settingsService.setSelectedModel(selectedModel);
-      
       // Update streaming setting
       settingsService.setUseStreaming(useStreaming);
 

src/services/api-settings.ts

@@ -4,7 +4,7 @@ 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 { AIServiceCapability } from '../types/capabilities';
 import { AIProvider as AIProviderType } from '../types/ai-providers';
 /**
  * Service for managing chat conversations

src/services/chat-service.ts

@@ -1,6 +1,6 @@
 import { Message } from '../../types/chat';
 import { StreamControlHandler } from '../streaming-control';
-import { AIServiceCapability } from './capabilities';
+import { AIServiceCapability } from '../../types/capabilities';
 
 /**
  * Configuration for AI service providers

src/services/core/ai-service-provider.ts

@@ -1,9 +1,8 @@
 import { DatabaseService } from './database';
-import { SettingsService, ProviderSettings } from './settings-service';
+import { SettingsService } from './settings-service';
 import { Conversation, Message, ConversationFolder } from '../types/chat';
-import { ApiSettings } from './api-settings';
+import { ProviderSettings } from '../types/settings';
 import { v4 as uuidv4 } from 'uuid';
-import { AIProvider } from '../types/ai-providers';
 
 /**
  * Service for integrating database operations with app components
@@ -253,49 +252,13 @@ export class DatabaseIntegrationService {
      */
     private async loadApiSettings(): Promise<void> {
         try {
-            const providers: AIProvider[] = [
-                'OpenAI', 
-                'Anthropic', 
-                'Gemini', 
-                'Fireworks.ai', 
-                'Together.ai', 
-                'OpenRouter', 
-                'Custom'
-            ];
-            
-            const settings = this.settingsService.getSettings();
-            let selectedProvider = settings.selectedProvider;
+            const apiSettingsList = await this.dbService.getApiSettingsList();
 
             // Load each provider's settings
-            for (const provider of providers) {
-                const dbSettings = await this.dbService.getApiSettings(provider);
-                if (dbSettings) {
-                    // Convert to ProviderSettings format
-                    const providerSettings: ProviderSettings = {
-                        apiKey: dbSettings.apiKey,
-                        organizationId: dbSettings.organizationId,
-                        apiVersion: dbSettings.apiVersion,
-                        baseUrl: dbSettings.baseUrl,
-                    };
-                    
-                    // Add any additional settings
-                    if (dbSettings.additional) {
-                        Object.assign(providerSettings, dbSettings.additional);
-                    }
-                    
-                    // Update settings service
-                    this.settingsService.updateProviderSettings(providerSettings, provider);
-                    
-                    // If this is the first provider with an API key, make it selected
-                    if (providerSettings.apiKey && !settings.providers[selectedProvider]?.apiKey) {
-                        selectedProvider = provider;
-                    }
-                }
-            }
-            
-            // Update selected provider if changed
-            if (selectedProvider !== settings.selectedProvider) {
-                this.settingsService.setSelectedProvider(selectedProvider);
+            for (const apiSettings of apiSettingsList) {
+                
+                // Update settings service
+                this.settingsService.updateProviderSettings(apiSettings);
             }
 
         } catch (error) {
@@ -315,28 +278,12 @@ export class DatabaseIntegrationService {
                 const providerSettings = settings.providers[provider];
                 if (providerSettings) {
                     // Create database settings object
-                    const dbSettings: ApiSettings = {
-                        provider,
-                        apiKey: providerSettings.apiKey || '',
-                        organizationId: providerSettings.organizationId,
-                        apiVersion: providerSettings.apiVersion,
-                        baseUrl: providerSettings.baseUrl
+                    const dbSettings: ProviderSettings = {
+                        ...providerSettings,
                     };
 
-                    // Add additional fields
-                    const additional: Record<string, string | number | boolean> = {};
-                    for (const key in providerSettings) {
-                        if (!['apiKey', 'organizationId', 'apiVersion', 'baseUrl'].includes(key)) {
-                            additional[key] = providerSettings[key as keyof ProviderSettings] as string | number | boolean;
-                        }
-                    }
-                    
-                    if (Object.keys(additional).length > 0) {
-                        dbSettings.additional = additional;
-                    }
-                    
                     // Save to database
-                    await this.dbService.saveApiSettings(provider, dbSettings);
+                    await this.dbService.saveApiSettings(dbSettings);
                 }
             }
         } catch (error) {