Add support for forge

Author: ShenKSPZ

src/components/chat/ChatMessageArea.tsx

@@ -1,6 +1,6 @@
 import React, { useState, FormEvent, useRef, useEffect } from 'react';
 import { Conversation } from '../../types/chat';
-import { Send, Loader, Square, Copy, RotateCcw, Share2, Trash2, Pencil } from 'lucide-react';
+import { Send, Square, Copy, RotateCcw, Share2, Pencil, Loader2 } from 'lucide-react';
 import MarkdownContent from './MarkdownContent';
 import MessageToolboxMenu, { ToolboxAction } from '../ui/MessageToolboxMenu';
 
@@ -143,13 +143,6 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                   icon: Copy,
                   label: 'Copy',
                   onClick: () => handleCopyMessage(message.content),
-                },
-                {
-                  id: 'delete',
-                  icon: Trash2,
-                  label: 'Delete',
-                  onClick: () => handleActionError('Delete functionality is disabled'),
-                  disabled: true
                 }
               ]
             : [
@@ -170,13 +163,6 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                   icon: RotateCcw,
                   label: 'Regenerate',
                   onClick: () => handleRegenerateResponse(),
-                },
-                {
-                  id: 'delete',
-                  icon: Trash2,
-                  label: 'Delete',
-                  onClick: () => handleActionError('Delete functionality is disabled'),
-                  disabled: true
                 }
               ];
 
@@ -224,7 +210,11 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
                     {isUserMessage ? (
                       <p className="whitespace-pre-wrap">{message.content}</p>
                     ) : (
-                      <MarkdownContent content={message.content} />
+                      message.content === '' ? (
+                        <div className="w-4 h-4 bg-blue-600 rounded-full animate-bounce"></div>
+                      ) : (
+                        <MarkdownContent content={message.content} />
+                      )
                     )}
                   </div>
 
@@ -245,7 +235,7 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
           <div className="flex justify-start">
             <div className="max-w-[80%] rounded-lg p-3 bg-gray-200 text-gray-800 rounded-tl-none">
               <div className="flex items-center space-x-2">
-                <Loader size={16} className="animate-spin" />
+                <Loader2 size={16} className="animate-spin" />
                 <span>AI is thinking...</span>
               </div>
             </div>

src/components/layout/MainLayout.tsx

@@ -55,6 +55,7 @@ const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
           <TopBar 
             onSelectModel={handleSelectModel}
             selectedModel={SettingsService.getInstance().getSelectedModel()}
+            selectedProvider={SettingsService.getInstance().getSelectedProvider()}
             onOpenSettingsDialog={handleOpenSettingsDialog}
           />
 

src/components/layout/TopBar.tsx

@@ -6,10 +6,11 @@ import { ModelOption } from '../../services/ai-service';
 interface TopBarProps {
   onSelectModel: (model: string, provider: string) => void;
   selectedModel?: string;
+  selectedProvider?: string;
   onOpenSettingsDialog: () => void;
 }
 
-const TopBar: React.FC<TopBarProps> = ({ onSelectModel, selectedModel, onOpenSettingsDialog }) => {
+const TopBar: React.FC<TopBarProps> = ({ onSelectModel, selectedModel, selectedProvider, onOpenSettingsDialog }) => {
   const [isModelDialogOpen, setIsModelDialogOpen] = useState(false);
 
   const handleOpenModelDialog = () => {
@@ -48,6 +49,7 @@ const TopBar: React.FC<TopBarProps> = ({ onSelectModel, selectedModel, onOpenSet
         onClose={handleCloseModelDialog}
         onSelectModel={handleSelectModel}
         currentModelId={selectedModel}
+        currentProviderName={selectedProvider}
       />
     </div>
   );

src/components/models/SelectModelDialog.tsx

@@ -7,18 +7,21 @@ interface SelectModelDialogProps {
   onClose: () => void;
   onSelectModel: (model: ModelOption, provider: string) => void;
   currentModelId?: string;
+  currentProviderName?: string;
 }
 
 export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
   isOpen,
   onClose,
   onSelectModel,
-  currentModelId
+  currentModelId,
+  currentProviderName
 }) => {
   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 [collapsedList, setCollapsedList] = useState<Map<string, boolean>>(new Map());
   const [aiService] = useState(() => AIService.getInstance());
 
@@ -38,6 +41,10 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
   useEffect(() => {
     setSelectedModelId(currentModelId);
   }, [currentModelId]);
+
+  useEffect(() => {
+    setSelectedProviderName(currentProviderName);
+  }, [currentProviderName]);
 
   const loadModels = async () => {
     try {
@@ -65,6 +72,7 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
 
   const handleSelectModel = (model: ModelOption, provider: string) => {
     setSelectedModelId(model.id);
+    setSelectedProviderName(provider);
     onSelectModel(model, provider);
   };
 
@@ -166,7 +174,7 @@ export const SelectModelDialog: React.FC<SelectModelDialogProps> = ({
                         key={model.id}
                         onClick={() => handleSelectModel(model, provider)}
                         className={`flex items-center justify-between p-3 rounded-lg cursor-pointer ${
-                          selectedModelId === model.id
+                          (selectedModelId === model.id && selectedProviderName === model.provider)
                             ? 'bg-blue-600 text-white'
                             : 'bg-gray-800 text-gray-200 hover:bg-gray-700'
                         }`}

src/components/settings/ApiManagement.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { ChevronRight, Save, AlertCircle } from 'lucide-react';
 import { ProviderSettings } from '../../services/settings-service';
 
-export type AIProvider = 'OpenAI' | 'Anthropic' | 'Gemini' | 'Fireworks.ai' | 'Together.ai' | 'OpenRouter' | 'Custom';
+export type AIProvider = 'Forge' | 'OpenAI' | 'Anthropic' | 'Gemini' | 'Fireworks.ai' | 'Together.ai' | 'OpenRouter' | 'Custom';
 
 interface ApiManagementProps {
   selectedProvider: AIProvider;
@@ -33,6 +33,7 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
   const currentProviderSettings = providerSettings[selectedProvider] || { apiKey: '' };
 
   const providers: AIProvider[] = [
+    'Forge', 
     'OpenAI', 
     'Anthropic', 
     'Gemini', 

src/services/ai-service.ts

@@ -62,6 +62,7 @@ export class AIService {
   private constructor() {
     // Initialize with default providers
     this.addOpenAIProvider();
+    this.addForgeProvider();
     this.setupSettingsListener();
   }
 
@@ -72,6 +73,13 @@ export class AIService {
     }
   }
 
+  private addForgeProvider(): void {
+    const forgeProvider = ProviderFactory.getProvider('Forge');
+    if (forgeProvider) {
+      this.providers.set('Forge', forgeProvider);
+    }
+  }
+
   /**
    * Setup event listener for settings changes
    */
@@ -376,6 +384,8 @@ export class AIService {
         provider: providerName
       }));
 
+      console.log('Models for provider', providerName, modelOptions);
+
       // Cache results
       this.modelCache.set(providerName, modelOptions);
       this.lastFetchTime.set(providerName, now);

src/services/chat-service.ts

@@ -274,7 +274,7 @@ export class ChatService {
         {
           model: settingsService.getSelectedModel(),
           provider: settingsService.getSelectedProvider(),
-          stream: isStreaming
+          stream: provider === 'Forge' ? false : true
         },
         streamController
       );