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

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

Author: Sabrina-devops

app/MindWork AI Studio/Assistants/I18N/allTexts.lua

@@ -1522,24 +1522,30 @@ UI_TEXT_CONTENT["AISTUDIO::CHAT::IIMAGESOURCEEXTENSIONS::T349928509"] = "The ima
 -- Open Settings
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ASSISTANTBLOCK::T1172211894"] = "Open Settings"
 
+-- Click the paperclip to attach files, or click the number to see your attached files.
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T1358313858"] = "Click the paperclip to attach files, or click the number to see your attached files."
+
+-- Drop files here to attach them.
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T143112277"] = "Drop files here to attach them."
+
+-- Click here to attach files.
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T1875575968"] = "Click here to attach files."
+
 -- Drag and drop files into the marked area or click here to attach documents:
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T230755331"] = "Drag and drop files into the marked area or click here to attach documents:"
 
+-- Select files to attach
+UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T2495931372"] = "Select files to attach"
+
 -- Document Preview
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T285154968"] = "Document Preview"
 
--- Click to attach files
-UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T3521845090"] = "Click to attach files"
-
 -- Clear file list
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T3759696136"] = "Clear file list"
 
 -- Add file
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T4014053962"] = "Add file"
 
--- Select a file to attach
-UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::ATTACHDOCUMENTS::T595772870"] = "Select a file to attach"
-
 -- Changelog
 UI_TEXT_CONTENT["AISTUDIO::COMPONENTS::CHANGELOG::T3017574265"] = "Changelog"
 
@@ -3424,6 +3430,24 @@ UI_TEXT_CONTENT["AISTUDIO::DIALOGS::RETRIEVALPROCESSDIALOG::T900713019"] = "Canc
 -- Embeddings
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::RETRIEVALPROCESSDIALOG::T951463987"] = "Embeddings"
 
+-- Here you can see all attached files. Files that can no longer be found (deleted, renamed, or moved) are marked with a warning icon and a strikethrough name. You can remove any attachment using the trash can icon.
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::REVIEWATTACHMENTSDIALOG::T1746160064"] = "Here you can see all attached files. Files that can no longer be found (deleted, renamed, or moved) are marked with a warning icon and a strikethrough name. You can remove any attachment using the trash can icon."
+
+-- There aren't any file attachments available right now.
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::REVIEWATTACHMENTSDIALOG::T2111340711"] = "There aren't any file attachments available right now."
+
+-- The file was deleted, renamed, or moved.
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::REVIEWATTACHMENTSDIALOG::T3083729256"] = "The file was deleted, renamed, or moved."
+
+-- Your attached file.
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::REVIEWATTACHMENTSDIALOG::T3154198222"] = "Your attached file."
+
+-- Your attached files
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::REVIEWATTACHMENTSDIALOG::T3909191077"] = "Your attached files"
+
+-- Remove this attachment.
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::REVIEWATTACHMENTSDIALOG::T3933470258"] = "Remove this attachment."
+
 -- There is no social event
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::SETTINGS::SETTINGSDIALOGAGENDA::T1222800281"] = "There is no social event"
 

app/MindWork AI Studio/Chat/ContentBlockComponent.razor

@@ -20,7 +20,8 @@
             {
                 <MudTooltip Text="@T("Number of attachments")" Placement="Placement.Bottom">
                     <MudBadge Content="@this.Content.FileAttachments.Count" Color="Color.Primary" Overlap="true" BadgeClass="sources-card-header">
-                        <MudIconButton Icon="@Icons.Material.Filled.AttachFile" />
+                        <MudIconButton Icon="@Icons.Material.Filled.AttachFile"
+                                       OnClick="@this.OpenAttachmentsDialog"/>
                     </MudBadge>
                 </MudTooltip>
             }

app/MindWork AI Studio/Chat/ContentBlockComponent.razor.cs

@@ -1,4 +1,5 @@
 using AIStudio.Components;
+using AIStudio.Dialogs;
 using AIStudio.Tools.Services;
 using Microsoft.AspNetCore.Components;
 
@@ -188,4 +189,9 @@ private async Task EditLastUserBlock()
             await this.EditLastUserBlockFunc(this.Content);
     }
 
+    private async Task OpenAttachmentsDialog()
+    {
+        var result = await ReviewAttachmentsDialog.OpenDialogAsync(this.DialogService, this.Content.FileAttachments.ToHashSet());
+        this.Content.FileAttachments = result.ToList();
+    }
 }

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 @@ namespace AIStudio.Components;
 
 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 @@ protected override async Task OnInitializedAsync()
                     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 @@ protected override async Task OnInitializedAsync()
                 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 @@ protected override async Task OnInitializedAsync()
 
                 await this.DocumentPathsChanged.InvokeAsync(this.DocumentPaths);
                 await this.OnChange(this.DocumentPaths);
+                this.isDraggingOver = false;
+                this.ClearDragClass();
                 this.StateHasChanged();
                 break;
         }
@@ -111,8 +134,6 @@ protected override async Task OnInitializedAsync()
 
     private string dragClass = DEFAULT_DRAG_CLASS;
 
-    private bool isComponentHovered;
-
     private async Task AddFilesManually()
     {
         // Ensure that Pandoc is installed and ready:
@@ -127,7 +148,7 @@ private async Task AddFilesManually()
             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 @@ private async Task AddFilesManually()
         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()
     {

app/MindWork AI Studio/Dialogs/ReviewAttachmentsDialog.razor

@@ -0,0 +1,96 @@
+@inherits MSGComponentBase
+
+<MudDialog>
+    <TitleContent>
+        <MudText Typo="Typo.h4">
+            @T("Your attached files")
+        </MudText>
+    </TitleContent>
+    <DialogContent>
+        <MudJustifiedText Typo="Typo.body1" Class="mb-3">
+            @T("Here you can see all attached files. Files that can no longer be found (deleted, renamed, or moved) are marked with a warning icon and a strikethrough name. You can remove any attachment using the trash can icon.")
+        </MudJustifiedText>
+
+        <MudDivider Class="mt-3 mb-3"/>
+
+        <div style="max-height: 50vh; overflow-y: auto; overflow-x: hidden; padding-right: 8px;">
+            @if (!this.DocumentPaths.Any())
+            {
+                <MudJustifiedText Typo="Typo.body1" Class="mt-3">
+                    @T("There aren't any file attachments available right now.")
+                </MudJustifiedText>
+            }
+
+            @{
+                var currentFolder = string.Empty;
+                foreach (var filePath in this.DocumentPaths)
+                {
+                    var folderPath = Path.GetDirectoryName(filePath);
+                    if (folderPath != currentFolder)
+                    {
+                        currentFolder = folderPath;
+                        <MudStack Row="true" AlignItems="AlignItems.Center" Class="mt-6 mb-3">
+                            <MudIcon Icon="@Icons.Material.Filled.Folder" Class="mr-2" />
+                            <MudText Typo="Typo.h6">
+                                @folderPath:
+                            </MudText>
+                        </MudStack>
+                    }
+                    
+                    @if (File.Exists(filePath))
+                    {
+                        <MudStack Row Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="ms-3 mb-2">
+                            <div style="min-width: 0; flex: 1; overflow: hidden;">
+                                <MudTooltip Text="@T("Your attached file.")" Placement="Placement.Bottom">
+                                    <span class="d-inline-flex align-items-center" style="overflow: hidden; width: 100%;">
+                                        <MudIcon Icon="@Icons.Material.Filled.AttachFile" Class="mr-2" Style="flex-shrink: 0;"/>
+                                        <MudText Style="white-space: nowrap;">
+                                            @Path.GetFileName(filePath)
+                                        </MudText>
+                                    </span>
+                                </MudTooltip>
+                            </div>
+
+                            <MudTooltip Text="@T("Remove this attachment.")" Placement="Placement.Bottom">
+                                <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                               Color="Color.Error"
+                                               Class="ml-2"
+                                               Style="flex-shrink: 0;"
+                                               OnClick="@(() => this.DeleteAttachment(filePath))"/>
+                            </MudTooltip>
+                        </MudStack>
+
+                    }
+                    else
+                    {
+                        <MudStack Row Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="ms-3 mb-2">
+                            <div style="min-width: 0; flex: 1; overflow: hidden;">
+                                <MudTooltip Text="@T("The file was deleted, renamed, or moved.")" Placement="Placement.Bottom">
+                                    <span class="d-inline-flex align-items-center" style="overflow: hidden; width: 100%;">
+                                        <MudIcon Icon="@Icons.Material.Filled.Report" Color="Color.Error" Class="mr-2" Style="flex-shrink: 0;"/>
+                                        <MudText Style="white-space: nowrap;">
+                                            <s>@Path.GetFileName(filePath)</s>
+                                        </MudText>
+                                    </span>
+                                </MudTooltip>
+                            </div>
+
+                            <MudTooltip Text="@T("Remove this attachment.")" Placement="Placement.Bottom">
+                                <MudIconButton Icon="@Icons.Material.Filled.Delete"
+                                               Color="Color.Error"
+                                               Class="ml-2"
+                                               Style="flex-shrink: 0;"
+                                               OnClick="@(() => this.DeleteAttachment(filePath))"/>
+                            </MudTooltip>
+                        </MudStack>
+                    }
+                }
+            }
+        </div>
+    </DialogContent>
+    <DialogActions>
+        <MudButton OnClick="@this.Close" Variant="Variant.Filled" Color="Color.Primary">
+            Close
+        </MudButton>
+    </DialogActions>
+</MudDialog>

app/MindWork AI Studio/Dialogs/ReviewAttachmentsDialog.razor.cs

@@ -0,0 +1,44 @@
+using AIStudio.Components;
+using Microsoft.AspNetCore.Components;
+
+namespace AIStudio.Dialogs;
+
+public partial class ReviewAttachmentsDialog : MSGComponentBase
+{
+    [CascadingParameter]
+    private IMudDialogInstance MudDialog { get; set; } = null!;
+    
+    [Parameter]
+    public HashSet<string> DocumentPaths { get; set; } = new();
+    
+    [Inject]
+    private IDialogService DialogService { get; set; } = null!;
+    
+    private void Close() => this.MudDialog.Close(DialogResult.Ok(this.DocumentPaths));
+    
+    public static async Task<HashSet<string>> OpenDialogAsync(IDialogService dialogService, params HashSet<string> documentPaths)
+    {
+        var dialogParameters = new DialogParameters<ReviewAttachmentsDialog>
+        {
+            { x => x.DocumentPaths, documentPaths } 
+        };
+        
+        var dialogReference = await dialogService.ShowAsync<ReviewAttachmentsDialog>("Your attached documents", dialogParameters, DialogOptions.FULLSCREEN);
+        var dialogResult = await dialogReference.Result;
+        if (dialogResult is null || dialogResult.Canceled)
+            return documentPaths;
+
+        if (dialogResult.Data is null)
+            return documentPaths;
+        
+        return dialogResult.Data as HashSet<string> ?? documentPaths;
+    }
+
+    private void DeleteAttachment(string filePath)
+    {
+        if (this.DocumentPaths.Remove(filePath))
+        {
+            this.StateHasChanged();
+        }
+    }
+}