Added possibility to view file attachments in chat (#594)

Co-authored-by: Thorsten Sommer <SommerEngineering@users.noreply.github.com>

app/MindWork AI Studio/Components/AttachDocuments.razor

@@ -3,28 +3,49 @@
 @if (this.UseSmallForm)
 {
     <div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
-        @{
-            var fileInfos = this.DocumentPaths.Select(file => new FileInfo(file)).ToList();
-        }
-        @if (fileInfos.Any())
+        @if (this.isDraggingOver)
         {
             <MudBadge
                 Content="@this.DocumentPaths.Count"
                 Color="Color.Primary"
-                Overlap="true">
-                <MudIconButton
-                    Icon="@Icons.Material.Filled.AttachFile"
-                    Color="Color.Default"
-                    OnClick="@AddFilesManually"/>
+                Overlap="true"
+                Class="cursor-pointer"
+                OnClick="@this.OpenAttachmentsDialog">
+                <MudLink OnClick="@this.AddFilesManually" Style="text-decoration: none;">
+                    <MudTextField T="string"
+                                  Text="@DROP_FILES_HERE_TEXT"
+                                  Adornment="Adornment.Start"
+                                  AdornmentIcon="@Icons.Material.Filled.AttachFile"
+                                  Typo="Typo.body2"
+                                  Variant="Variant.Outlined"
+                                  ReadOnly="true"
+                    />
+                </MudLink>
             </MudBadge>
         }
+        else if (this.DocumentPaths.Any())
+        {
+            <MudTooltip Text="@T("Click the paperclip to attach files, or click the number to see your attached files.")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
+                <MudBadge
+                    Content="@this.DocumentPaths.Count"
+                    Color="Color.Primary"
+                    Overlap="true"
+                    Class="cursor-pointer"
+                    OnClick="@this.OpenAttachmentsDialog">
+                    <MudIconButton
+                        Icon="@Icons.Material.Filled.AttachFile"
+                        Color="Color.Default"
+                        OnClick="@this.AddFilesManually"/>
+                </MudBadge>
+            </MudTooltip>
+        }
         else
         {
-            <MudTooltip Text="@T("Click to attach files")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
+            <MudTooltip Text="@T("Click here to attach files.")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                 <MudIconButton
                     Icon="@Icons.Material.Filled.AttachFile"
                     Color="Color.Default"
-                    OnClick="@AddFilesManually"/>
+                    OnClick="@this.AddFilesManually"/>
             </MudTooltip>
         }
     </div>

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

@@ -1,4 +1,5 @@
 using AIStudio.Dialogs;
+using AIStudio.Tools.PluginSystem;
 using AIStudio.Tools.Rust;
 using AIStudio.Tools.Services;
 using AIStudio.Tools.Validation;
@@ -11,6 +12,8 @@ using DialogOptions = Dialogs.DialogOptions;
 
 public partial class AttachDocuments : MSGComponentBase
 {
+    private static string TB(string fallbackEN) => I18N.I.T(fallbackEN, typeof(AttachDocuments).Namespace, nameof(AttachDocuments));
+    
     [Parameter]
     public string Name { get; set; } = string.Empty;
     
@@ -45,6 +48,10 @@ public partial class AttachDocuments : MSGComponentBase
     private PandocAvailabilityService PandocAvailabilityService { get; init; } = null!;
 
     private const Placement TOOLBAR_TOOLTIP_PLACEMENT = Placement.Top;
+    private static readonly string DROP_FILES_HERE_TEXT = TB("Drop files here to attach them.");
+    
+    private bool isComponentHovered;
+    private bool isDraggingOver;
     
     #region Overrides of MSGComponentBase
 
@@ -65,10 +72,23 @@ public partial class AttachDocuments : MSGComponentBase
                     return;
                 }
                 
+                this.isDraggingOver = true;
                 this.SetDragClass();
                 this.StateHasChanged();
                 break;
             
+            case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_CANCELED }:
+                this.isDraggingOver = false;
+                this.StateHasChanged();
+                break;
+            
+            case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.WINDOW_NOT_FOCUSED }:
+                this.isDraggingOver = false;
+                this.isComponentHovered = false;
+                this.ClearDragClass();
+                this.StateHasChanged();
+                break;
+            
             case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_DROPPED, Payload: var paths }:
                 if(!this.isComponentHovered && !this.CatchAllDocuments)
                 {
@@ -85,6 +105,7 @@ public partial class AttachDocuments : MSGComponentBase
                 if (!pandocState.IsAvailable)
                 {
                     this.Logger.LogWarning("The user cancelled the Pandoc installation or Pandoc is not available. Aborting file drop.");
+                    this.isDraggingOver = false;
                     this.ClearDragClass();
                     this.StateHasChanged();
                     return;
@@ -100,6 +121,8 @@ public partial class AttachDocuments : MSGComponentBase
 
                 await this.DocumentPathsChanged.InvokeAsync(this.DocumentPaths);
                 await this.OnChange(this.DocumentPaths);
+                this.isDraggingOver = false;
+                this.ClearDragClass();
                 this.StateHasChanged();
                 break;
         }
@@ -111,8 +134,6 @@ public partial class AttachDocuments : MSGComponentBase
     
     private string dragClass = DEFAULT_DRAG_CLASS;
     
-    private bool isComponentHovered;
-
     private async Task AddFilesManually()
     {
         // Ensure that Pandoc is installed and ready:
@@ -127,7 +148,7 @@ public partial class AttachDocuments : MSGComponentBase
             return;
         }
 
-        var selectFiles = await this.RustService.SelectFiles(T("Select a file to attach"));
+        var selectFiles = await this.RustService.SelectFiles(T("Select files to attach"));
         if (selectFiles.UserCancelled)
             return;
 
@@ -145,6 +166,11 @@ public partial class AttachDocuments : MSGComponentBase
         await this.DocumentPathsChanged.InvokeAsync(this.DocumentPaths);
         await this.OnChange(this.DocumentPaths);
     }
+    
+    private async Task OpenAttachmentsDialog()
+    {
+        this.DocumentPaths = await ReviewAttachmentsDialog.OpenDialogAsync(this.DialogService, this.DocumentPaths);
+    }
 
     private async Task ClearAllFiles()
     {