Added file attachment support to chat templates (#614)

app/MindWork AI Studio/Components/AttachDocuments.razor.cs

@@ -17,6 +17,18 @@ public partial class AttachDocuments : MSGComponentBase
     
     [Parameter]
     public string Name { get; set; } = string.Empty;
+    
+    /// <summary>
+    /// On which layer to register the drop area. Higher layers have priority over lower layers.
+    /// </summary>
+    [Parameter]
+    public int Layer { get; set; }
+    
+    /// <summary>
+    /// When true, pause catching dropped files. Default is false.
+    /// </summary>
+    [Parameter]
+    public bool PauseCatchingDrops { get; set; }
 
     [Parameter]
     public HashSet<FileAttachment> DocumentPaths { get; set; } = [];
@@ -36,6 +48,15 @@ public partial class AttachDocuments : MSGComponentBase
     [Parameter]
     public bool UseSmallForm { get; set; }
     
+    /// <summary>
+    /// When true, validate media file types before attaching. Default is true. That means that
+    /// the user cannot attach unsupported media file types when the provider or model does not
+    /// support them. Set it to false in order to disable this validation. This is useful for places
+    /// where the user might want to prepare a template.
+    /// </summary>
+    [Parameter]
+    public bool ValidateMediaFileTypes { get; set; } = true;
+    
     [Parameter]
     public AIStudio.Settings.Provider? Provider { get; set; }
     
@@ -54,6 +75,7 @@ public partial class AttachDocuments : MSGComponentBase
     private const Placement TOOLBAR_TOOLTIP_PLACEMENT = Placement.Top;
     private static readonly string DROP_FILES_HERE_TEXT = TB("Drop files here to attach them.");
     
+    private uint numDropAreasAboveThis;
     private bool isComponentHovered;
     private bool isDraggingOver;
     
@@ -61,7 +83,10 @@ public partial class AttachDocuments : MSGComponentBase
 
     protected override async Task OnInitializedAsync()
     {
-        this.ApplyFilters([], [ Event.TAURI_EVENT_RECEIVED ]);
+        this.ApplyFilters([], [ Event.TAURI_EVENT_RECEIVED, Event.REGISTER_FILE_DROP_AREA, Event.UNREGISTER_FILE_DROP_AREA ]);
+        
+        // Register this drop area:
+        await this.MessageBus.SendMessage(this, Event.REGISTER_FILE_DROP_AREA, this.Layer);
         await base.OnInitializedAsync();
     }
 
@@ -69,7 +94,35 @@ public partial class AttachDocuments : MSGComponentBase
     {
         switch (triggeredEvent)
         {
+            case Event.REGISTER_FILE_DROP_AREA when sendingComponent != this:
+            {
+                if(data is int layer && layer > this.Layer)
+                {
+                    this.numDropAreasAboveThis++;
+                    this.PauseCatchingDrops = true;
+                }
+
+                break;
+            }
+
+            case Event.UNREGISTER_FILE_DROP_AREA when sendingComponent != this:
+            {
+                if(data is int layer && layer > this.Layer)
+                {
+                    if(this.numDropAreasAboveThis > 0)
+                        this.numDropAreasAboveThis--;
+                    
+                    if(this.numDropAreasAboveThis is 0)
+                        this.PauseCatchingDrops = false;
+                }
+
+                break;
+            }
+
             case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_HOVERED }:
+                if(this.PauseCatchingDrops)
+                    return;
+                
                 if(!this.isComponentHovered && !this.CatchAllDocuments)
                 {
                     this.Logger.LogDebug("Attach documents component '{Name}' is not hovered, ignoring file drop hovered event.", this.Name);
@@ -82,11 +135,17 @@ public partial class AttachDocuments : MSGComponentBase
                 break;
             
             case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_CANCELED }:
+                if(this.PauseCatchingDrops)
+                    return;
+                
                 this.isDraggingOver = false;
                 this.StateHasChanged();
                 break;
             
             case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.WINDOW_NOT_FOCUSED }:
+                if(this.PauseCatchingDrops)
+                    return;
+                
                 this.isDraggingOver = false;
                 this.isComponentHovered = false;
                 this.ClearDragClass();
@@ -94,6 +153,9 @@ public partial class AttachDocuments : MSGComponentBase
                 break;
             
             case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_DROPPED, Payload: var paths }:
+                if(this.PauseCatchingDrops)
+                    return;
+                
                 if(!this.isComponentHovered && !this.CatchAllDocuments)
                 {
                     this.Logger.LogDebug("Attach documents component '{Name}' is not hovered, ignoring file drop dropped event.", this.Name);
@@ -117,7 +179,7 @@ public partial class AttachDocuments : MSGComponentBase
 
                 foreach (var path in paths)
                 {
-                    if(!await FileExtensionValidation.IsExtensionValidWithNotifyAsync(FileExtensionValidation.UseCase.ATTACHING_CONTENT, path, this.Provider))
+                    if(!await FileExtensionValidation.IsExtensionValidWithNotifyAsync(FileExtensionValidation.UseCase.ATTACHING_CONTENT, path, this.ValidateMediaFileTypes, this.Provider))
                         continue;
 
                     this.DocumentPaths.Add(FileAttachment.FromPath(path));
@@ -161,7 +223,7 @@ public partial class AttachDocuments : MSGComponentBase
             if (!File.Exists(selectedFilePath))
                 continue;
 
-            if (!await FileExtensionValidation.IsExtensionValidWithNotifyAsync(FileExtensionValidation.UseCase.ATTACHING_CONTENT, selectedFilePath, this.Provider))
+            if (!await FileExtensionValidation.IsExtensionValidWithNotifyAsync(FileExtensionValidation.UseCase.ATTACHING_CONTENT, selectedFilePath, this.ValidateMediaFileTypes, this.Provider))
                 continue;
 
             this.DocumentPaths.Add(FileAttachment.FromPath(selectedFilePath));
@@ -189,6 +251,9 @@ public partial class AttachDocuments : MSGComponentBase
     
     private void OnMouseEnter(EventArgs _)
     {
+        if(this.PauseCatchingDrops)
+            return;
+        
         this.Logger.LogDebug("Attach documents component '{Name}' is hovered.", this.Name);
         this.isComponentHovered = true;
         this.SetDragClass();
@@ -197,6 +262,9 @@ public partial class AttachDocuments : MSGComponentBase
     
     private void OnMouseLeave(EventArgs _)
     {
+        if(this.PauseCatchingDrops)
+            return;
+        
         this.Logger.LogDebug("Attach documents component '{Name}' is no longer hovered.", this.Name);
         this.isComponentHovered = false;
         this.ClearDragClass();

app/MindWork AI Studio/Components/ChatComponent.razor

@@ -82,7 +82,7 @@
             }
             
             <ChatTemplateSelection CanChatThreadBeUsedForTemplate="@this.CanThreadBeSaved" CurrentChatThread="@this.ChatThread" CurrentChatTemplate="@this.currentChatTemplate" CurrentChatTemplateChanged="@this.ChatTemplateWasChanged"/>
-            <AttachDocuments Name="File Attachments" @bind-DocumentPaths="@this.chatDocumentPaths" CatchAllDocuments="true" UseSmallForm="true" Provider="@this.Provider"/>
+            <AttachDocuments Name="File Attachments" Layer="@DropLayers.PAGES" @bind-DocumentPaths="@this.chatDocumentPaths" CatchAllDocuments="true" UseSmallForm="true" Provider="@this.Provider"/>
 
             @if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is WorkspaceStorageBehavior.STORE_CHATS_AUTOMATICALLY)
             {

app/MindWork AI Studio/Components/ChatComponent.razor.cs

@@ -79,7 +79,11 @@ public partial class ChatComponent : MSGComponentBase, IAsyncDisposable
         // Get the preselected chat template:
         this.currentChatTemplate = this.SettingsManager.GetPreselectedChatTemplate(Tools.Components.CHAT);
         this.userInput = this.currentChatTemplate.PredefinedUserPrompt;
-        
+
+        // Apply template's file attachments, if any:
+        foreach (var attachment in this.currentChatTemplate.FileAttachments)
+            this.chatDocumentPaths.Add(attachment);
+
         //
         // Check for deferred messages of the kind 'SEND_TO_CHAT',
         // aka the user sends an assistant result to the chat:
@@ -328,7 +332,12 @@ public partial class ChatComponent : MSGComponentBase, IAsyncDisposable
         this.currentChatTemplate = chatTemplate;
         if(!string.IsNullOrWhiteSpace(this.currentChatTemplate.PredefinedUserPrompt))
             this.userInput = this.currentChatTemplate.PredefinedUserPrompt;
-        
+
+        // Apply template's file attachments (replaces existing):
+        this.chatDocumentPaths.Clear();
+        foreach (var attachment in this.currentChatTemplate.FileAttachments)
+            this.chatDocumentPaths.Add(attachment);
+
         if(this.ChatThread is null)
             return;
 
@@ -677,9 +686,14 @@ public partial class ChatComponent : MSGComponentBase, IAsyncDisposable
                 Blocks = this.currentChatTemplate == ChatTemplate.NO_CHAT_TEMPLATE ? [] : this.currentChatTemplate.ExampleConversation.Select(x => x.DeepClone()).ToList(),
             };
         }
-        
+
         this.userInput = this.currentChatTemplate.PredefinedUserPrompt;
-        
+
+        // Apply template's file attachments:
+        this.chatDocumentPaths.Clear();
+        foreach (var attachment in this.currentChatTemplate.FileAttachments)
+            this.chatDocumentPaths.Add(attachment);
+
         // Now, we have to reset the data source options as well:
         this.ApplyStandardDataSourceOptions();