Fix: Add dalle3 as default generation model

Author: ShenKSPZ

src/components/chat/ChatMessageArea.tsx

@@ -537,6 +537,13 @@ export const ChatMessageArea: React.FC<ChatMessageAreaProps> = ({
             {/* Image generation button */}
             <ImageGenerationButton 
               disabled={isLoading || isCurrentlyStreaming}
+              onImageGenerate={(prompt, provider, model) => {
+                // Set special message for image generation
+                const imageGenPrompt = prompt || `/image Generate an image using ${provider} ${model}`;
+                setInput(imageGenPrompt);
+                // Focus the input
+                inputRef.current?.focus();
+              }}
             />
           </div>
 

src/components/chat/ImageGenerationButton.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Image } from 'lucide-react';
-import { SettingsService } from '../../services/settings-service';
+import { SettingsService, SETTINGS_CHANGE_EVENT } from '../../services/settings-service';
 import { AIServiceCapability } from '../../types/capabilities';
 import ProviderIcon from '../ui/ProviderIcon';
 import { useTranslation } from '../../hooks/useTranslation';
@@ -17,6 +17,7 @@ interface ProviderModel {
 }
 
 const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({ 
+  onImageGenerate,
   disabled = false 
 }) => {
   const { t } = useTranslation();
@@ -42,8 +43,7 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
         const providerSettings = settingsService.getProviderSettings(providerId);
 
         if (providerSettings.models) {
-          // For now, just assume all models have image generation capability
-          // This would need to be updated once proper capability detection is implemented
+          // Find models with image generation capability
           for (const model of providerSettings.models) {
             // Check if model has image generation capability
             if (model.modelCapabilities?.includes(AIServiceCapability.ImageGeneration)) {
@@ -67,6 +67,13 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
     };
 
     loadProviders();
+    
+    // Listen for settings changes to update available providers
+    window.addEventListener(SETTINGS_CHANGE_EVENT, loadProviders);
+    
+    return () => {
+      window.removeEventListener(SETTINGS_CHANGE_EVENT, loadProviders);
+    };
   }, []);
 
   // Handle click outside to close popup
@@ -96,6 +103,12 @@ const ImageGenerationButton: React.FC<ImageGenerationButtonProps> = ({
     setSelectedProvider(providerName);
     setSelectedModel(modelId);
     setIsPopupOpen(false);
+    
+    // If onImageGenerate is provided, call it with an empty prompt
+    // The actual prompt will be filled in by the chat message
+    if (onImageGenerate) {
+      onImageGenerate("", providerName, modelId);
+    }
   };
 
   const isButtonEnabled = !disabled && providers.length > 0;

src/components/settings/ApiManagement.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ChevronRight, Plus, Trash2, Edit2, Search, X, Brain, Eye, Wrench, Type, Database, EyeOff } from 'lucide-react';
+import { ChevronRight, Plus, Trash2, Edit2, Search, X, Brain, Eye, Wrench, Type, Database, EyeOff, Image } from 'lucide-react';
 import { ProviderSettings, ModelSettings } from '../../types/settings';
 import { AIServiceCapability } from '../../types/capabilities';
 import { v4 as uuidv4 } from 'uuid';
@@ -198,6 +198,8 @@ export const ApiManagement: React.FC<ApiManagementProps> = ({
         return <Wrench size={16} className="text-orange-500" />;
       case AIServiceCapability.Embedding:
         return <Database size={16} className="text-yellow-500" />;
+      case AIServiceCapability.ImageGeneration:
+        return <Image size={16} className="text-green-600" />;
       default:
         return null;
     }

src/components/settings/ModelManagement.tsx

@@ -71,6 +71,12 @@ export class OpenAIService implements AiServiceProvider {
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   getModelCapabilities(model: string): AIServiceCapability[] {
+    // Add image generation capability for DALL-E 3
+    if (model === 'dall-e-3') {
+      return [AIServiceCapability.ImageGeneration];
+    }
+    
+    // Default capabilities for chat models
     return mapModelCapabilities(
       false,
       false,

src/services/providers/openai-service.ts

@@ -65,6 +65,14 @@ const DEFAULT_SETTINGS: UserSettings = {
           modelCapabilities: [AIServiceCapability.TextCompletion, AIServiceCapability.WebSearch],
           modelRefUUID: uuidv4(),
         },
+        {
+          modelName: 'DALL-E 3',
+          modelId: 'dall-e-3',
+          modelCategory: 'Image Generation',
+          modelDescription: 'DALL-E 3 is OpenAI\'s advanced image generation model.',
+          modelCapabilities: [AIServiceCapability.ImageGeneration],
+          modelRefUUID: uuidv4(),
+        },
       ]
     },
     ['Anthropic']: {
@@ -277,6 +285,8 @@ export class SettingsService {
 
       this.addAllDefaultProviders();
 
+      this.addDefaultModels();
+
       this.isInitialized = true;
     } catch (error) {
       console.error('Error initializing settings service:', error);
@@ -295,6 +305,26 @@ export class SettingsService {
     }
   }
 
+  private addDefaultModels() {
+    for(const provider in this.settings.providers) {
+      if(!this.settings.providers[provider].models) {
+        this.settings.providers[provider].models = DEFAULT_SETTINGS.providers[provider].models;
+      }
+
+      if(provider === 'OpenAI') {
+
+        this.settings.providers[provider].models!.push({
+          modelName: 'DALL-E 3',
+          modelId: 'dall-e-3',
+          modelCategory: 'Image Generation',
+          modelDescription: 'DALL-E 3 is OpenAI\'s advanced image generation model.',
+          modelCapabilities: [AIServiceCapability.ImageGeneration],
+          modelRefUUID: uuidv4(),
+        });
+      }
+    }
+  }
+
   /**
    * Load settings from database
    */