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.

Author: Madzionator

src/MaIN.InferPage/Components/Pages/Home.razor

@@ -66,9 +66,15 @@
                 else
                 {
                     <FluentCard class="@(conversation.Message.Role == "User" ? "message-card user-message" : "message-card bot-message")">
-                        @if (conversation.Message.Role == "User" && conversation.AttachedFiles.Any())
+                        @if (conversation.Message.Role == "User" && (conversation.AttachedFiles.Any() || conversation.AttachedImages.Any()))
                         {
                             <div class="attached-files-display">
+                                @foreach (var image in conversation.AttachedImages)
+                                {
+                                    <div class="history-image-preview" title="@image.Name">
+                                        <img src="data:image/png;base64,@image.Base64" alt="@image.Name" />
+                                    </div>
+                                }
                                 @foreach (var fileName in conversation.AttachedFiles)
                                 {
                                     <span class="attached-file-tag">
@@ -140,9 +146,18 @@
         <div id="bottom" @ref="_bottomElement"></div>
     </div>
     <div class="chat-input-section">
-        @if (_selectedFiles.Any())
+        @if (_selectedImages.Any() || _selectedFiles.Any())
         {
-            <div class="selected-files-container">
+            <div class="selected-attachments-container">
+                @foreach (var image in _selectedImages)
+                {
+                    <div class="image-preview" title="@image.File.Name">
+                        <img src="data:image/@image.File.Extension.TrimStart('.');base64,@image.Base64Preview" alt="@image.File.Name" />
+                        <span class="image-dismiss-button" @onclick="@(() => RemoveImage(image))">
+                            <FluentIcon Value="@(new Icons.Regular.Size12.Dismiss())" Style="fill: var(--accent-base-color);" />
+                        </span>
+                    </div>
+                }
                 @foreach (var file in _selectedFiles)
                 {
                     <div class="file-badge" title="@file.Name">
@@ -202,7 +217,6 @@
     private string? _errorMessage;
     private string? _incomingMessage;
     private string? _incomingReasoning;
-    private readonly string? _displayName = Utils.Model;
     private IChatMessageBuilder? ctx;
     private CancellationTokenSource? _cancellationTokenSource;
     private Chat Chat { get; } = new() { Name = "MaIN Infer", ModelId = Utils.Model! };
@@ -211,8 +225,11 @@
     private ElementReference _editorRef;
     private DotNetObjectReference<Home>? _dotNetRef;
     private List<FileInfo> _selectedFiles = new();
+    private List<(FileInfo File, string Base64Preview)> _selectedImages = new();
     private int _inputKey;
 
+    private static readonly HashSet<string> ImageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".webp", ".bmp"];
+
     private readonly MarkdownPipeline _markdownPipeline = new MarkdownPipelineBuilder()
         .UseAdvancedExtensions()
         .UseSoftlineBreakAsHardlineBreak()
@@ -291,7 +308,7 @@
         if (_isLoading) return;
 
         var msg = await JS.InvokeAsync<string>("editorManager.getInnerText", _editorRef);
-        if (!string.IsNullOrWhiteSpace(msg) || _selectedFiles.Any())
+        if (!string.IsNullOrWhiteSpace(msg) || _selectedFiles.Any() || _selectedImages.Any())
         {
             await JS.InvokeVoidAsync("editorManager.clearContent", _editorRef);
             await SendAsync(msg?.Trim() ?? string.Empty);
@@ -307,12 +324,25 @@
             {
                 await file.OpenReadStream(20 * 1024 * 1024).CopyToAsync(ms);
                 ms.Position = 0;
-                _selectedFiles.Add(new FileInfo
+
+                var extension = Path.GetExtension(file.Name).ToLowerInvariant();
+                var fileInfo = new FileInfo
                 {
                     Name = file.Name,
-                    Extension = Path.GetExtension(file.Name),
+                    Extension = extension,
                     StreamContent = ms
-                });
+                };
+
+                if (ImageExtensions.Contains(extension))
+                {
+                    var base64 = Convert.ToBase64String(ms.ToArray());
+                    ms.Position = 0;
+                    _selectedImages.Add((fileInfo, base64));
+                }
+                else
+                {
+                    _selectedFiles.Add(fileInfo);
+                }
             }
             catch (Exception ex)
             {
@@ -329,17 +359,40 @@
         _selectedFiles.Remove(file);
     }
 
+    private void RemoveImage((FileInfo File, string Base64Preview) image)
+    {
+        image.File.StreamContent?.Dispose();
+        _selectedImages.Remove(image);
+    }
+
     [JSInvokable]
-    public async Task OnFilePasted(string fileName, string extension, string base64Data)
+    public async Task OnFileReceived(string fileName, string extension, string base64Data)
     {
-        var bytes = Convert.FromBase64String(base64Data);
-        var ms = new MemoryStream(bytes);
-        _selectedFiles.Add(new FileInfo
+        try
         {
-            Name = fileName,
-            Extension = extension,
-            StreamContent = ms
-        });
+            var bytes = Convert.FromBase64String(base64Data);
+            var ms = new MemoryStream(bytes);
+            var fileInfo = new FileInfo
+            {
+                Name = fileName,
+                Extension = extension,
+                StreamContent = ms
+            };
+
+            if (ImageExtensions.Contains(extension.ToLowerInvariant()))
+            {
+                _selectedImages.Add((fileInfo, base64Data));
+            }
+            else
+            {
+                _selectedFiles.Add(fileInfo);
+            }
+        }
+        catch (Exception ex)
+        {
+            _errorMessage = $"Failed to load file {fileName}: {ex.Message}";
+        }
+
         _isDragging = false;
         await InvokeAsync(StateHasChanged);
     }
@@ -365,7 +418,7 @@
 
     private async Task SendAsync(string msg)
     {
-        if (string.IsNullOrWhiteSpace(msg) && !_selectedFiles.Any())
+        if (string.IsNullOrWhiteSpace(msg) && !_selectedFiles.Any() && !_selectedImages.Any())
         {
             return;
         }
@@ -377,10 +430,12 @@
         _isLoading = true;
         StateHasChanged();
 
-        var attachments = new List<FileInfo>(_selectedFiles);
+        var attachedFiles = new List<FileInfo>(_selectedFiles);
+        var attachedImages = new List<(FileInfo File, string Base64Preview)>(_selectedImages);
         try
         {
             _selectedFiles.Clear();
+            _selectedImages.Clear();
             _inputKey++;
             StateHasChanged();
 
@@ -392,11 +447,11 @@
             };
             Chat.Messages.Add(newMsg);
 
-            var attachedFileNames = attachments.Select(f => f.Name).ToList();
             Messages.Add(new MessageExt
             {
                 Message = newMsg,
-                AttachedFiles = attachedFileNames
+                AttachedFiles = attachedFiles.Select(f => f.Name).ToList(),
+                AttachedImages = attachedImages.Select(i => (i.File.Name, i.Base64Preview)).ToList()
             });
 
             Chat.ModelId = Utils.Model!;
@@ -410,9 +465,14 @@
                 await JS.InvokeVoidAsync("scrollManager.scrollToBottomSmooth", "messages-container");
 
             var request = ctx!.WithMessage(msg);
-            if (attachments.Count != 0)
+
+            // Combine files and images - images go as files, ExtractImageFromFiles will handle them
+            var allFiles = new List<FileInfo>(attachedFiles);
+            allFiles.AddRange(attachedImages.Select(i => i.File));
+
+            if (allFiles.Count != 0)
             {
-                request.WithFiles(attachments);
+                request.WithFiles(allFiles);
             }
 
             cancellationToken.ThrowIfCancellationRequested();
@@ -502,9 +562,13 @@
         }
         finally
         {
-            foreach (var attachment in attachments)
+            foreach (var attachment in attachedFiles)
                 attachment.StreamContent?.Dispose();
-            attachments.Clear();
+            attachedFiles.Clear();
+
+            foreach (var image in attachedImages)
+                image.File.StreamContent?.Dispose();
+            attachedImages.Clear();
 
             _isLoading = false;
             _isThinking = false;
@@ -548,11 +612,19 @@
             .Where(m => m.AttachedFiles.Any())
             .ToDictionary(m => m.Message, m => m.AttachedFiles);
 
+        var existingImagesMap = Messages
+            .Where(m => m.AttachedImages.Any())
+            .ToDictionary(m => m.Message, m => m.AttachedImages);
+
+        var existingReasonMap = Messages
+            .ToDictionary(m => m.Message, m => m.ShowReason);
+
         Messages = Chat.Messages.Select(x => new MessageExt
         {
             Message = x,
             AttachedFiles = existingFilesMap.TryGetValue(x, out var files) ? files : new List<string>(),
-            ShowReason = false
+            AttachedImages = existingImagesMap.TryGetValue(x, out var images) ? images : new List<(string, string)>(),
+            ShowReason = existingReasonMap.TryGetValue(x, out var show) && show
         }).ToList();
     }
 

src/MaIN.InferPage/Utils.cs

@@ -20,4 +20,5 @@ public class MessageExt
     public required Message Message { get; set; }
     public bool ShowReason { get; set; }
     public List<string> AttachedFiles { get; set; } = new();
+    public List<(string Name, string Base64)> AttachedImages { get; set; } = new();
 }

src/MaIN.InferPage/wwwroot/editor.js

@@ -81,19 +81,19 @@ window.editorManager = {
             for (const file of files) {
                 await editorManager._processFile(file, dotNetHelper);
             }
+
+            // Ensure overlay is always dismissed after drop
+            try { await dotNetHelper.invokeMethodAsync('OnDragLeave'); } catch {}
         });
     },
     _processFile: async (file, dotNetHelper) => {
         try {
-            const arrayBuffer = await file.arrayBuffer();
-            const uint8Array = new Uint8Array(arrayBuffer);
-
-            // Convert to base64 - much smaller than int array
-            let binary = '';
-            for (let i = 0; i < uint8Array.length; i++) {
-                binary += String.fromCharCode(uint8Array[i]);
-            }
-            const base64 = btoa(binary);
+            const base64 = await new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onload = () => resolve(reader.result.split(',')[1]);
+                reader.onerror = () => reject(reader.error);
+                reader.readAsDataURL(file);
+            });
 
             let extension = '';
             const lastDot = file.name.lastIndexOf('.');
@@ -105,9 +105,9 @@ window.editorManager = {
 
             const fileName = file.name || `file-${Date.now()}${extension}`;
 
-            await dotNetHelper.invokeMethodAsync('OnFilePasted', fileName, extension, base64);
-        } catch {
-            // Silent fail
+            await dotNetHelper.invokeMethodAsync('OnFileReceived', fileName, extension, base64);
+        } catch (err) {
+            try { await dotNetHelper.invokeMethodAsync('OnDragLeave'); } catch {}
         }
     }
 };

src/MaIN.InferPage/wwwroot/home.css

@@ -120,13 +120,49 @@ body {
     flex-direction: column;
 }
 
-.selected-files-container {
+.selected-attachments-container {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     padding: 4px 12px;
     margin-bottom: 2px;
     width: 100%;
+    align-items: flex-end;
+}
+
+/* Image preview thumbnail */
+.image-preview {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    border-radius: 6px;
+    overflow: hidden;
+    border: 1px solid var(--neutral-stroke-rest);
+    background-color: var(--neutral-layer-1);
+}
+
+.image-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.image-dismiss-button {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0.6;
+}
+
+.image-dismiss-button:hover {
+    opacity: 1;
 }
 
 .file-badge {
@@ -290,6 +326,24 @@ body {
     margin-bottom: 10px;
     padding-bottom: 8px;
     border-bottom: 1px solid var(--neutral-stroke-rest);
+    align-items: center;
+}
+
+/* History image preview (in sent messages) */
+.history-image-preview {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid var(--neutral-stroke-rest);
+    background-color: var(--neutral-layer-1);
+    flex-shrink: 0;
+}
+
+.history-image-preview img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
 }
 
 .attached-file-tag {