Fix: Fix the support for custom provider

Author: ShenKSPZ

src/App.tsx

@@ -2,28 +2,9 @@ import { useEffect } from 'react';
 import { ChatPage } from './pages/ChatPage';
 import MainLayout from './components/layout/MainLayout';
 import DatabaseInitializer from './components/core/DatabaseInitializer';
-import { AIService } from './services/ai-service';
 
 function App() {
 
-  // Initialize AI service and cache models at startup
-  useEffect(() => {
-    const aiService = AIService.getInstance();
-    
-    // Start caching models
-    const cacheModels = async () => {
-      try {
-        await aiService.refreshModels();
-      } catch (error) {
-        console.error('Error caching models:', error);
-      }
-    };
-    
-    cacheModels();
-    
-    return () => {};
-  }, []);
-
   // Handle link clicks
   useEffect(() => {
     const handleLinkClick = (e: MouseEvent) => {

src/components/chat/ChatMessageArea.tsx

@@ -51,8 +51,6 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
 
     if(activeConversation) {
       const messagesList = MessageHelper.mapMessagesTreeToList(activeConversation);
-      console.log(activeConversation);
-      console.log(messagesList);
       setMessagesList(messagesList);
     }
   }, [activeConversation, activeConversation?.messages]);

src/components/layout/MainLayout.tsx

@@ -28,6 +28,7 @@ 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/TopBar.tsx

@@ -1,7 +1,7 @@
 import { ChevronDown, Cpu, Settings } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
 import { SelectModelDialog } from '../models/SelectModelDialog';
-import { ModelOption } from '../../services/ai-service';
+import { AIService, ModelOption } from '../../services/ai-service';
 import { SettingsService } from '../../services/settings-service';
 
 interface TopBarProps {
@@ -12,11 +12,18 @@ interface TopBarProps {
 const TopBar: React.FC<TopBarProps> = ({ onSelectModel, onOpenSettingsDialog }) => {
   const [isModelDialogOpen, setIsModelDialogOpen] = useState(false);
   const [selectedModel, setSelectedModel] = useState('');
+  const [selectedModelName, setSelectedModelName] = useState('');
   const [selectedProvider, setSelectedProvider] = useState('');
 
   useEffect(() => {
     const settingsService = SettingsService.getInstance();
     setSelectedModel(settingsService.getSelectedModel());
+    AIService.getInstance().getModelsForProvider(settingsService.getSelectedProvider()).then((models) => {
+      const model = models.find((model) => model.id === settingsService.getSelectedModel());
+      if (model) {
+        setSelectedModelName(model.name);
+      }
+    });
     setSelectedProvider(settingsService.getSelectedProvider());
   }, [SettingsService.getInstance().getSelectedModel(), SettingsService.getInstance().getSelectedProvider()]);
 
@@ -42,7 +49,7 @@ const TopBar: React.FC<TopBarProps> = ({ onSelectModel, onOpenSettingsDialog })
           aria-label="Select AI model"
         >
           <Cpu className="w-5 h-5 p-0.5 text-gray-600" />
-          <span className='text-center truncate max-w-[200px]'>{selectedModel}</span>
+          <span className='text-center truncate max-w-[200px]'>{selectedModelName}</span>
           <ChevronDown className="w-5 h-5 text-gray-600" />
         </button>
       </div>
@@ -56,7 +63,7 @@ const TopBar: React.FC<TopBarProps> = ({ onSelectModel, onOpenSettingsDialog })
         onClose={handleCloseModelDialog}
         onSelectModel={handleSelectModel}
         currentModelId={selectedModel}
-        currentProviderName={selectedProvider}
+        currentProviderId={selectedProvider}
       />
     </div>
   );

src/components/models/SelectModelDialog.tsx

@@ -1,27 +1,28 @@
 import React, { useState, useEffect } from 'react';
 import { Search, Loader, Check, ChevronDown, ChevronUp } from 'lucide-react';
 import { AIService, ModelOption } from '../../services/ai-service';
+import { SettingsService } from '../../services/settings-service';
 
 interface SelectModelDialogProps {
   isOpen: boolean;
   onClose: () => void;
   onSelectModel: (model: ModelOption, provider: string) => void;
   currentModelId?: string;
-  currentProviderName?: string;
+  currentProviderId?: string;
 }
 
 export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
   isOpen,
   onClose,
   onSelectModel,
   currentModelId,
-  currentProviderName
+  currentProviderId
 }) => {
   const [models, setModels] = useState<ModelOption[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [selectedModelId, setSelectedModelId] = useState<string | undefined>(currentModelId);
-  const [selectedProviderName, setSelectedProviderName] = useState<string | undefined>(currentProviderName);
+  const [selectedProviderId, setSelectedProviderId] = useState<string | undefined>(currentProviderId);
   const [collapsedList, setCollapsedList] = useState<Map<string, boolean>>(new Map());
   const [aiService] = useState(() => AIService.getInstance());
 
@@ -43,8 +44,8 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
   }, [currentModelId]);
 
   useEffect(() => {
-    setSelectedProviderName(currentProviderName);
-  }, [currentProviderName]);
+    setSelectedProviderId(currentProviderId);
+  }, [currentProviderId]);
 
   const loadModels = async () => {
     try {
@@ -70,10 +71,10 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
     setSearchQuery(e.target.value);
   };
 
-  const handleSelectModel = (model: ModelOption, provider: string) => {
+  const handleSelectModel = (model: ModelOption, providerId: string) => {
     setSelectedModelId(model.id);
-    setSelectedProviderName(provider);
-    onSelectModel(model, provider);
+    setSelectedProviderId(providerId);
+    onSelectModel(model, providerId);
   };
 
   const handleCollapseProvider = (provider: string) => {
@@ -100,6 +101,12 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
     return groups;
   }, {} as Record<string, ModelOption[]>);
 
+  const getProviderName = (providerId: string) => {
+    const settingsService = SettingsService.getInstance();
+    const providerSettings = settingsService.getProviderSettings(providerId);
+    return providerSettings.providerName;
+  }
+
   if (!isOpen) return null;
 
   return (
@@ -155,26 +162,26 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
             </div>
           ) : (
             <div className="space-y-6">
-              {Object.entries(groupedModels).map(([provider, providerModels]) => (
-                <div key={provider} className="mb-6">
+              {Object.entries(groupedModels).map(([providerId, providerModels]) => (
+                <div key={providerId} className="mb-6">
 
                   <div className="flex items-start justify-start">
-                    <h3 className="mb-2 text-lg font-medium text-white">{provider}</h3>
+                    <h3 className="mb-2 text-lg font-medium text-white">{getProviderName(providerId)}</h3>
                     <button 
-                      onClick={() => handleCollapseProvider(provider)}
+                      onClick={() => handleCollapseProvider(providerId)}
                       className="p-1 ml-2 text-gray-400 bg-gray-800 rounded-md hover:text-white"
                     >
-                      {collapsedList.get(provider) ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
+                      {collapsedList.get(providerId) ? <ChevronDown size={16} /> : <ChevronUp size={16} />}
                     </button>
                   </div>
 
-                  <div className="space-y-2" style={{display: (collapsedList.has(provider) && collapsedList.get(provider)) ? 'none' : 'block'}}>
+                  <div className="space-y-2" style={{display: (collapsedList.has(providerId) && collapsedList.get(providerId)) ? 'none' : 'block'}}>
                     {providerModels.map(model => (
                       <div
                         key={model.id}
-                        onClick={() => handleSelectModel(model, provider)}
+                        onClick={() => handleSelectModel(model, providerId)}
                         className={`flex items-center justify-between p-3 rounded-lg cursor-pointer ${
-                          (selectedModelId === model.id && selectedProviderName === model.provider)
+                          (selectedModelId === model.id && selectedProviderId === providerId)
                             ? 'bg-blue-600 text-white'
                             : 'bg-gray-800 text-gray-200 hover:bg-gray-700'
                         }`}
@@ -187,7 +194,7 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
                             </div>
                           )}
                         </div>
-                        {(selectedModelId === model.id && selectedProviderName === model.provider) && (
+                        {(selectedModelId === model.id && selectedProviderId === providerId) && (
                           <div className="ml-4 text-white">
                             <Check size={16} />
                           </div>

src/components/settings/ApiManagement.tsx

@@ -60,9 +60,9 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
     setCurrentProviderSettings({ ...currentProviderSettings, baseUrl: value });
   }
 
-  const handleEndpointChange = (endpoint: string, value: string) => {
-    setCurrentProviderSettings({ ...currentProviderSettings, [endpoint]: value });
-  }
+  // const handleEndpointChange = (endpoint: string, value: string) => {
+  //   setCurrentProviderSettings({ ...currentProviderSettings, [endpoint]: value });
+  // }
 
   const handleOnEndEditing = () => {
     onProviderSettingsChange(currentProviderSettings);
@@ -265,7 +265,7 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
               />
             </div>
 
-            <div>
+            {/* <div>
               <label className="block mb-2 text-sm font-medium text-gray-700">
                 Model Description
               </label>
@@ -276,7 +276,7 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
                 className="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                 rows={3}
               ></textarea>
-            </div>
+            </div> */}
 
             <div>
               <label className="block mb-2 text-sm font-medium text-gray-700">
@@ -462,15 +462,20 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
                     value={currentProviderSettings.baseUrl || ''}
                     onChange={(e) => handleBaseUrlChange(e.target.value)}
                     onBlur={handleOnEndEditing}
-                    placeholder="https://your-custom-api.com/v1"
+                    placeholder="https://your-custom-api.com/"
                     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 base URL for your custom OpenAI-compatible API
-                  </p>
+                  <div className="flex flex-row items-center justify-between">
+                    <p className="mt-2 text-xs text-gray-500">
+                      The base URL for your custom OpenAI-compatible API
+                    </p>
+                    <p className="mt-2 overflow-hidden text-xs text-gray-500">
+                      {currentProviderSettings.baseUrl}/v1/chat/completions
+                    </p>
+                  </div>
                 </div>
 
-                <div className="pt-6 mt-6 border-t border-gray-200">
+                {/* <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">                   
@@ -502,7 +507,7 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
                       />
                     </div>
                   </div>
-                </div>
+                </div> */}
               </>
             )}
 

src/pages/ChatPage.tsx

@@ -1,17 +1,12 @@
-import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import ChatHistoryList from '../components/chat/ChatHistoryList';
 import ChatMessageArea from '../components/chat/ChatMessageArea';
 import { Conversation, ConversationFolder } from '../types/chat';
 import { SETTINGS_CHANGE_EVENT, SettingsService } from '../services/settings-service';
 import { ChatService } from '../services/chat-service';
 import { AIService } from '../services/ai-service';
-interface ChatPageProps {
-  initialSelectedModel?: string;
-}
 
-export const ChatPage: React.FC<ChatPageProps> = ({ 
-  initialSelectedModel = '',
-}) => {
+export const ChatPage = () => {
   const [conversations, setConversations] = useState<Conversation[]>([]);
   const [folders, setFolders] = useState<ConversationFolder[]>([]);
   const [activeConversationId, setActiveConversationId] = useState<string | null>(null);
@@ -53,20 +48,8 @@ export const ChatPage: React.FC<ChatPageProps> = ({
           setActiveConversationId(activeId);
         }
 
-        // Get streaming settings
-        const settingsService = SettingsService.getInstance();
-        
         setIsServiceInitialized(true);
 
-        // Get saved model from settings if no initial model provided
-        if (!initialSelectedModel) {
-          const settings = settingsService.getSettings();
-          if (settings.selectedModel) {
-            settingsService.setSelectedModel(settings.selectedModel);
-          }
-          aiService.refreshModels();
-        }
-        
         return () => {
           unsubscribe(); // Clean up the subscription
         };
@@ -79,7 +62,7 @@ export const ChatPage: React.FC<ChatPageProps> = ({
       initServices();
     }
 
-  }, [initialSelectedModel, isServiceInitialized]);
+  }, [isServiceInitialized]);
 
   // Load active conversation details when selected
   useEffect(() => {

src/services/ai-service.ts

@@ -63,12 +63,11 @@ export class AIService {
   private addProviders(): void {
     const settingsService = SettingsService.getInstance();
     const settings = settingsService.getSettings();
+
     for (const provider of Object.keys(settings.providers)) {
       const providerSettings = settings.providers[provider];
-
-      // console.log('Provider: ', provider, ' Provider settings: ', providerSettings);
-
       if (!this.providers.has(provider) && providerSettings && providerSettings.apiKey && providerSettings.apiKey.length > 0) {
+
         const providerInstance = ProviderFactory.getNewProvider(provider);
         if (providerInstance) {
           this.providers.set(provider, providerInstance);
@@ -115,16 +114,6 @@ export class AIService {
     this.notifyListeners();
   }
 
-  /**
-   * Start a new AI request
-   */
-  private startRequest(): void {
-    this.setState({
-      status: 'loading',
-      error: null
-    });
-  }
-
   /**
    * Handle request success
    */
@@ -333,7 +322,7 @@ export class AIService {
     const providerPromises = [];
 
     for (const provider of this.getAllProviders()) {
-      providerPromises.push(this.getModelsForProvider(provider.name));
+      providerPromises.push(this.getModelsForProvider(provider.id));
     }
 
     const results = await Promise.all(providerPromises);
@@ -378,9 +367,9 @@ export class AIService {
 
       // Convert to ModelOption format
       const modelOptions: ModelOption[] = models.map(model => ({
-        id: model,
-        name: model,
-        provider: providerName
+        id: model.modelId,
+        name: model.modelName,
+        provider: providerName,
       }));
 
       // Cache results