feat: InferPage visual & functional improvements (#122)

* chat main layout

* file attachment

* stop button + some cleaning

* Use BackendType for backend config/UI

Refactor backend selection to use BackendType everywhere and simplify API key handling. Added Extensions.GetApiKeyVariable to map backends to env vars; Program now sets Utils.BackendType from the CLI arg, prompts for missing API keys (and marks Utils.HasApiKey), and only registers MaIN services when a non-self backend is selected. Utils was simplified: removed per-backend booleans, added BackendType, HasApiKey, IsLocal helper and moved Reason flag. UI updates: NavBar shows backend and model badges (with color/display name logic including "Local Ollama"), and Home.razor now branches on BackendType and uses Utils.IsLocal for MessageType. Also trimmed launchSettings applicationUrl.

* Color fix

* fix: stream tokens progressively for file-based chat

* fix theme color change (disco problem)

* post merge fixes

* update show-reasoning button

* fix stop button

* Add themeManager and replace eval-based theme access

Introduce a small JS themeManager in App.razor that bootstraps theme on page load (reads localStorage, parses JSON, and sets documentElement data-theme for dark mode) and exposes save/load helpers. Replace prior eval-based localStorage/document access in NavBar.razor and Home.razor with calls to themeManager.load, and update component logic to derive UI mode/accent color from the returned value. This centralizes theme persistence, avoids using eval, and provides safer parsing and fallbacks.

* Use LLMApiRegistry for API keys in IferPage Program.cs

Remove the old BackendType extension and centralize API key metadata in LLMApiRegistry (moved to MaIN.Domain.Models.Concrete). Program.cs now looks up the registry entry for each BackendType to read ApiKeyEnvName instead of calling GetApiKeyVariable. Updated numerous LLM and image service files (and McpService) to reference the new namespace. This change consolidates API key configuration and removes the duplicated extension method.

* fix MemoryStream leaks + multi-attachments issue

* smarter scroll

* Handle unregistered ai models; Support images input in cloud LLM

Add multi-image support and extract image bytes from uploaded files for LLM services; improve model ID/instance handling and model selection flow.

- Message: replace single byte[] Image with List<byte[]> Images and keep a backward-compatible Image getter/setter.
- Chat: preserve raw ModelId string, safely try to resolve model instance (no throws), and sync ModelInstance with internal id field.
- Home.razor: unify model resolution into a local variable and choose GenericLocalModel/GenericCloudModel when registry lookup fails.
- AnthropicService & OpenAiCompatibleService: add ExtractImageFromFiles to load image file bytes into Message.Images, remove consumed file entries, update HasImages/BuildMessageContent to iterate images, and extend image type detection (HEIC/HEIF, AVIF and more extensions).

These changes enable passing uploaded images to compatible LLM backends while maintaining backward compatibility and preventing exceptions when models are missing.

* paste and drag&drop files/images

* Add image attachment support and previews

Add client-side support for image attachments: show inline thumbnails for selected images, history image previews, paste handling, dismiss buttons, and update input/send logic to include images alongside files. Introduce _selectedImages and ImageExtensions, update MessageExt to store AttachedImages, and ensure proper disposal of image streams. Add CSS for image-preview and history-image-preview styling. On the service side, route messages that include images through a SearchAsync + context-enhanced chat flow (streaming and non-streaming) and adjust token handling/return values accordingly.

* Add image-generation support and UI

Introduce image-generation capability across the app: add IImageGenerationModel and HasImageGeneration on AIModel; mark cloud models (DALL·E3, new gpt-image-1 and grok-2-image) as image generators. Update UI to render generated images with download and copy-to-clipboard actions (Home.razor changes, CopyImageToClipboard interop + editor.js). Improve visual/model detection in Utils to use ModelRegistry with a fallback set of known image-generation IDs. Increase SignalR hub max message size to 10MB (Program.cs) to allow larger image transfers and add CSS for generated image layout and controls.

* Replace Visual flag with ImageGen and add vision support

Rename the old "Visual" concept to a clearer "ImageGen" across the codebase and add vision detection/flags. Key changes:

- Domain & storage: Chat.Visual -> Chat.ImageGen, ChatDocument.ImageGen, DTO and DB mappings updated (SQL/SQLite repos).
- API: removed EnableVisual(); added WithModel(AIModel model, bool? imageGen = null) to allow explicit imageGen override (defaults to model capability).
- Interfaces: removed EnableVisual from builder interfaces.
- Services/handlers: ChatService, AgentService, StartCommandHandler, AnswerCommandHandler and step handlers updated to use ImageGen logic when routing to image-gen or LLM services; TTS gating now checks ImageGen.
- Mappers: ChatMapper and DTO mappings updated to use ImageGen.
- UI: InferPage and NavBar updated to show Image Gen and Vision badges; Home.razor now computes message content/reasoning via MessageExt.ComputedContent/ComputedReasoning; MessageExt gains HasReasoning and computed fields.
- Utils: Reason is now computed from registered model capabilities and ImageGen is mutually exclusive with reasoning; added Vision detection and model lists.
- Examples & tests: updated to call WithModel(..., imageGen: true) or model-based API accordingly.

Why: clarifies semantics between image generation and visual/vision capabilities, centralizes model-driven behavior, and enables explicit overrides for image generation behavior.

* Handle base64 images in OpenAiImageGenService

Rename ImageGenDalleService to OpenAiImageGenService and update response handling to support OpenAI base64 (b64_json) image payloads. ProcessOpenAiResponse now returns byte[] and will decode b64_json or download from a URL; callers now receive image bytes directly. Add JsonPropertyName for b64_json, reorder/add necessary usings, and remove unused MaIN.Services.Services.LLMService.Utils imports from Gemini, OpenAi and Xai image services. These changes enable handling both base64 and URL image responses and standardize the OpenAI image service name.

* Add missing IVisionModel in cloud models

* versioning

* fix typo

Author: Madzionator

Examples/Examples/Chat/ChatWithImageGenExample.cs

@@ -1,5 +1,6 @@
 using Examples.Utils;
 using MaIN.Core.Hub;
+using MaIN.Domain.Models.Abstract;
 
 namespace Examples.Chat;
 
@@ -10,7 +11,7 @@ public async Task Start()
         Console.WriteLine("ChatExample with image gen is running!");
 
         var result = await AIHub.Chat()
-            .EnableVisual()
+            .WithModel(new GenericLocalModel("FLUX.1_Shnell"), imageGen: true)
             .WithMessage("Generate cyberpunk godzilla cat warrior")
             .CompleteAsync();
 

Examples/Examples/Chat/ChatWithImageGenGeminiExample.cs

@@ -1,5 +1,7 @@
 using Examples.Utils;
 using MaIN.Core.Hub;
+using MaIN.Domain.Configuration;
+using MaIN.Domain.Models.Abstract;
 
 namespace Examples.Chat;
 
@@ -11,7 +13,7 @@ public async Task Start()
         GeminiExample.Setup(); // We need to provide Gemini API key
 
         var result = await AIHub.Chat()
-            .EnableVisual()
+            .WithModel(new GenericCloudModel("imagen-3", BackendType.Gemini), imageGen: true)
             .WithMessage("Generate hamster as a astronaut on the moon")
             .CompleteAsync();
 

Examples/Examples/Chat/ChatWithImageGenOpenAiExample.cs

@@ -13,7 +13,6 @@ public async Task Start()
 
         var result = await AIHub.Chat()
             .WithModel<DallE3>()
-            .EnableVisual()
             .WithMessage("Generate rock style cow playing guitar")
             .CompleteAsync();
 

MaIN.Core.IntegrationTests/ChatTests.cs

@@ -2,6 +2,7 @@
 using MaIN.Core.Hub;
 using MaIN.Core.IntegrationTests.Helpers;
 using MaIN.Domain.Entities;
+using MaIN.Domain.Models.Abstract;
 using MaIN.Domain.Models.Concrete;
 
 namespace MaIN.Core.IntegrationTests;
@@ -97,7 +98,7 @@ public async Task Should_GenerateImage_BasedOnPrompt()
         const string extension = "png";
 
         var result = await AIHub.Chat()
-            .EnableVisual()
+            .WithModel(new GenericLocalModel("FLUX.1_Shnell"), imageGen: true)
             .WithMessage("Generate cat in Rome. Sightseeing, colloseum, ancient builidngs, Italy.")
             .CompleteAsync();
 

Releases/0.10.0.md

@@ -0,0 +1,7 @@
+# 0.10.0 release
+
+Improve InferPage:
+- Refreshed chat UI layout with improved theming and smarter scroll behavior
+- Extended attachments (drag & drop, paste), image previews, and improved image generation
+- Added support for unregistered models and vision-based image handling (no OCR)
+- Stability fixes, proper cancellation support, and internal service refactoring

src/MaIN.Core.UnitTests/ChatContextTests.cs

@@ -88,7 +88,7 @@ public async Task CompleteAsync_ShouldCallChatService()
         };
 
 
-        _mockChatService.Setup(s => s.Completions(It.IsAny<Chat>(), It.IsAny<bool>(), It.IsAny<bool>(), null))
+        _mockChatService.Setup(s => s.Completions(It.IsAny<Chat>(), It.IsAny<bool>(), It.IsAny<bool>(), null, It.IsAny<CancellationToken>()))
             .ReturnsAsync(chatResult);
 
         _chatContext.WithMessage("User message");
@@ -98,7 +98,7 @@ public async Task CompleteAsync_ShouldCallChatService()
         var result = await _chatContext.CompleteAsync();
 
         // Assert
-        _mockChatService.Verify(s => s.Completions(It.IsAny<Chat>(), false, false, null), Times.Once);
+        _mockChatService.Verify(s => s.Completions(It.IsAny<Chat>(), false, false, null, It.IsAny<CancellationToken>()), Times.Once);
         Assert.Equal(chatResult, result);
     }
 
@@ -128,6 +128,6 @@ await _chatContext.WithModel(model)
             .CompleteAsync();
 
         // Assert
-        _mockChatService.Verify(s => s.Completions(It.Is<Chat>(c => c.ModelId == _testModelId && c.ModelInstance == model), It.IsAny<bool>(), It.IsAny<bool>(), null), Times.Once);
+        _mockChatService.Verify(s => s.Completions(It.Is<Chat>(c => c.ModelId == _testModelId && c.ModelInstance == model), It.IsAny<bool>(), It.IsAny<bool>(), null, It.IsAny<CancellationToken>()), Times.Once);
     }
 }

src/MaIN.Core/.nuspec

@@ -2,7 +2,7 @@
 <package>
   <metadata>
     <id>MaIN.NET</id>
-    <version>0.9.4</version>
+    <version>0.10.0</version>
     <authors>Wisedev</authors>
     <owners>Wisedev</owners>
     <icon>favicon.png</icon>

src/MaIN.Core/Hub/Contexts/ChatContext.cs

@@ -40,9 +40,10 @@ internal ChatContext(IChatService chatService, Chat existingChat)
         _chat = existingChat;
     }
 
-    public IChatMessageBuilder WithModel(AIModel model)
+    public IChatMessageBuilder WithModel(AIModel model, bool? imageGen = null)
     {
         SetModel(model);
+        _chat.ImageGen = imageGen ?? model is IImageGenerationModel;
         return this;
     }
 
@@ -82,12 +83,7 @@ private void SetModel(AIModel model)
         _chat.ModelId = model.Id;
         _chat.ModelInstance = model;
         _chat.Backend = model.Backend;
-    }
-
-    public IChatMessageBuilder EnableVisual()
-    {
-        _chat.Visual = true;
-        return this;
+        _chat.ImageGen = model.HasImageGeneration;
     }
 
     public IChatMessageBuilder EnsureModelDownloaded()
@@ -116,7 +112,7 @@ public IChatConfigurationBuilder WithMemoryParams(MemoryParams memoryParams)
 
     public IChatConfigurationBuilder Speak(TextToSpeechParams speechParams)
     {
-        _chat.Visual = false;
+        _chat.ImageGen = false;
         _chat.TextToSpeechParams = speechParams;
         return this;
     }
@@ -205,7 +201,8 @@ public IChatConfigurationBuilder DisableCache()
     public async Task<ChatResult> CompleteAsync(
         bool translate = false, // Move to WithTranslate
         bool interactive = false, // Move to WithInteractive
-        Func<LLMTokenValue?, Task>? changeOfValue = null)
+        Func<LLMTokenValue?, Task>? changeOfValue = null,
+        CancellationToken cancellationToken = default)
     {
         if (_chat.ModelInstance is null)
         {
@@ -231,7 +228,7 @@ public async Task<ChatResult> CompleteAsync(
         {
             await _chatService.Create(_chat);
         }
-        var result = await _chatService.Completions(_chat, translate, interactive, changeOfValue);
+        var result = await _chatService.Completions(_chat, translate, interactive, changeOfValue, cancellationToken);
         _files = [];
         return result;
     }

src/MaIN.Core/Hub/Contexts/Interfaces/ChatContext/IChatBuilderEntryPoint.cs

@@ -1,4 +1,4 @@
-namespace MaIN.Core.Hub.Contexts.Interfaces.ChatContext;
+namespace MaIN.Core.Hub.Contexts.Interfaces.ChatContext;
 
 public interface IChatBuilderEntryPoint : IChatActions
 {
@@ -9,7 +9,7 @@ public interface IChatBuilderEntryPoint : IChatActions
     /// <param name="model">The name of the AI model to be used.</param>
     /// <returns>The context instance implementing <see cref="IChatMessageBuilder"/> for method chaining.</returns>
     IChatMessageBuilder WithModel(string model);
-    
+
     /// <summary>
     /// Configures a custom model with a specific path and project context.
     /// </summary>
@@ -18,18 +18,11 @@ public interface IChatBuilderEntryPoint : IChatActions
     /// <param name="mmProject">Optional multi-modal project identifier.</param>
     /// <returns>The context instance implementing <see cref="IChatMessageBuilder"/> for method chaining.</returns>
     IChatMessageBuilder WithCustomModel(string model, string path, string? mmProject = null);
-    
-    /// <summary>
-    /// Enables visual/image generation mode. Use this method now if you do not plan to explicitly define the model.
-    /// Otherwise, you will be able to use this method in the next step, after defining the model.
-    /// </summary>
-    /// <returns>The context instance implementing <see cref="IChatMessageBuilder"/> for method chaining.</returns>
-    IChatMessageBuilder EnableVisual();
-    
+
     /// <summary>
     /// Loads an existing chat session from the database using its unique identifier.
     /// </summary>
     /// <param name="chatId">The GUID of the existing chat.</param>
     /// <returns>The context instance implementing <see cref="IChatConfigurationBuilder"/> for method chaining.</returns>
     Task<IChatConfigurationBuilder> FromExisting(string chatId);
-}
+}

src/MaIN.Core/Hub/Contexts/Interfaces/ChatContext/IChatConfigurationBuilder.cs

@@ -104,5 +104,5 @@ public interface IChatConfigurationBuilder : IChatActions
     /// <param name="interactive">A flag indicating whether the chat session should be interactive. Default is false.</param>
     /// <param name="changeOfValue">An optional callback invoked whenever a new token or update is received during streaming.</param>
     /// <returns>A <see cref="ChatResult"/> object containing the result of the completed chat session.</returns>
-    Task<ChatResult> CompleteAsync(bool translate = false, bool interactive = false, Func<LLMTokenValue?, Task>? changeOfValue = null);
+    Task<ChatResult> CompleteAsync(bool translate = false, bool interactive = false, Func<LLMTokenValue?, Task>? changeOfValue = null, CancellationToken cancellationToken = default);
 }