Switch the document preview to a file dropped onto it

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

@@ -6388,6 +6388,9 @@ UI_TEXT_CONTENT["AISTUDIO::DIALOGS::DOCUMENTCHECKDIALOG::T1205126512"] = "Please
 -- Markdown View
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::DOCUMENTCHECKDIALOG::T1373123357"] = "Markdown View"
 
+-- You can drag another file into this window. We attach it right away and show it here instead.
+UI_TEXT_CONTENT["AISTUDIO::DIALOGS::DOCUMENTCHECKDIALOG::T1533825620"] = "You can drag another file into this window. We attach it right away and show it here instead."
+
 -- Load file
 UI_TEXT_CONTENT["AISTUDIO::DIALOGS::DOCUMENTCHECKDIALOG::T2129302565"] = "Load file"
 

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

@@ -459,6 +459,8 @@ public partial class AttachDocuments : MSGComponentBase
         var dialogParameters = new DialogParameters<DocumentCheckDialog>
         {
             { x => x.Document, fileAttachment },
+            { x => x.AttachPaths, this.AttachDroppedPathsAsync },
+            { x => x.IsAttachingUnavailable, () => this.IsUnavailable },
         };
 
         await this.DialogService.ShowAsync<DocumentCheckDialog>(T("Document Preview"), dialogParameters, DialogOptions.FULLSCREEN);

app/MindWork AI Studio/Dialogs/DocumentCheckDialog.razor

@@ -3,20 +3,34 @@
 <MudDialog>
     <DialogContent>
         @* A drop anywhere in this dialog belongs to the dialog, not to the page behind it: *@
-        <PathDropZone IsArea="@true">
+        <PathDropZone IsArea="@true"
+                      IdPrefix="document-check"
+                      OnPathsDropped="@this.DropCallback"
+                      Disabled="@this.IsZoneDisabled"
+                      Context="isDropTarget">
         <MudJustifiedText Typo="Typo.body1" Class="mb-3">
             @T("See how we load your file. Review the content before we process it further.")
         </MudJustifiedText>
 
-        @if (this.Document is null)
+        @if (this.CanAttach)
         {
-            <ReadFileContent Text="@T("Load file")" FileContent="@this.FileContent" FileContentChanged="@this.ApplyLoadedFileContent" EnableDragDrop="true" CatchAllDocuments="true"/>
+            <MudJustifiedText Typo="Typo.body1" Class="mb-3">
+                @T("You can drag another file into this window. We attach it right away and show it here instead.")
+            </MudJustifiedText>
+        }
+
+        @if (this.document is null)
+        {
+            <ReadFileContent Text="@T("Load file")" FileContent="@this.fileContent" FileContentChanged="@this.ApplyLoadedFileContent" EnableDragDrop="true" CatchAllDocuments="true"/>
         }
         else
         {
+            @* Keys have to be unique among siblings, no matter the component: this field and the
+               tabs below both stand for the document and would otherwise collide on its path. *@
             <MudTextField
+                @key="@($"file-path-{this.document.FilePath}")"
                 T="string"
-                Text="@this.Document.FilePath"
+                Text="@this.document.FilePath"
                 AdornmentIcon="@Icons.Material.Filled.FileOpen"
                 Adornment="Adornment.Start"
                 Immediate="@true"
@@ -29,7 +43,10 @@
                 />
         }
         
-        @if (!this.Document?.Exists ?? false)
+        @* The frame shows where a dropped file would land. It is drawn only while this dialog can
+           take one, and keeps its width in both states so that nothing jumps during a drag: *@
+        <div class="@this.PreviewAreaClass(isDropTarget)">
+        @if (!this.document?.Exists ?? false)
         {
             <MudAlert Severity="Severity.Error" Variant="Variant.Filled" Class="my-2">
                 @T("The specified file could not be found. The file have been moved, deleted, renamed, or is otherwise inaccessible.")
@@ -60,11 +77,13 @@
                 </MudAlert>
             }
             
-            <MudTabs Elevation="0" Rounded="true" ApplyEffectsToContainer="true" Outlined="true" PanelClass="pa-2" Class="mb-2">
+            @* Keyed by the document: a switch from an image to a text file changes which panels
-                @if (this.Document?.IsImage ?? false)
+               exist, and a leftover active panel would point at one that is gone. *@
+            <MudTabs @key="@($"preview-tabs-{this.document?.FilePath}")" Elevation="0" Rounded="true" ApplyEffectsToContainer="true" Outlined="true" PanelClass="pa-2" Class="mb-2">
+                @if (this.document?.IsImage ?? false)
                 {
                     <MudTabPanel Text="@T("Image View")" Icon="@Icons.Material.Filled.Image">
-                        <MudImage ObjectFit="ObjectFit.ScaleDown" Style="width: 100%;" Src="@this.Document.FilePathAsUrl"/>
+                        <MudImage ObjectFit="ObjectFit.ScaleDown" Style="width: 100%;" Src="@this.document.FilePathAsUrl"/>
                     </MudTabPanel>
                 }
                 else
@@ -102,6 +121,7 @@
                 }
             </MudTabs>
         }
+        </div>
         </PathDropZone>
     </DialogContent>
     <DialogActions>

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

@@ -21,6 +21,46 @@ public partial class DocumentCheckDialog : MSGComponentBase
     [Parameter]
     public string FileContent { get; set; } = string.Empty;
 
+    /// <summary>
+    /// Attaches the files the user drops onto this dialog, and answers which of them it attached.
+    /// </summary>
+    /// <remarks>
+    /// Null when our caller has no list of attachments to add to, which is the case for the prompt
+    /// guide preview of the Prompt Optimizer. This dialog then shows its document and nothing else,
+    /// exactly as it always did.
+    /// </remarks>
+    [Parameter]
+    public Func<List<string>, Task<IReadOnlyList<FileAttachment>>>? AttachPaths { get; set; }
+
+    /// <summary>
+    /// Decides, at the moment a drop arrives, whether attaching is possible right now.
+    /// </summary>
+    /// <remarks>
+    /// Asked rather than passed as a value, because the answer changes while this dialog is open:
+    /// dropping a media file starts a transcription, and nothing else may be attached until that
+    /// one is through.
+    /// </remarks>
+    [Parameter]
+    public Func<bool>? IsAttachingUnavailable { get; set; }
+
+    /// <summary>
+    /// The document we show right now. It starts out as the one we were opened with and changes
+    /// whenever the user drops another file onto this dialog.
+    /// </summary>
+    /// <remarks>
+    /// Kept in a field rather than read from the parameter: the dialog fragment is rendered again
+    /// with the parameters captured when it was opened, whenever something about the dialog stack
+    /// changes. That happens in the middle of a drop, because attaching may open the Pandoc dialog
+    /// or ask the user about a media file -- reading the parameter would undo the switch right
+    /// after it was made.
+    /// </remarks>
+    private FileAttachment? document;
+
+    /// <summary>
+    /// The content of the document we show, either handed to us by our caller or read by us.
+    /// </summary>
+    private string fileContent = string.Empty;
+
     /// <summary>
     /// How many characters we show at most. Rendering a huge document costs us a large Markdown
     /// syntax tree and an equally large render tree. This dialog answers the question of how we
@@ -46,9 +86,20 @@ public partial class DocumentCheckDialog : MSGComponentBase
     private int previewCutOffCharacters;
 
     /// <summary>
-    /// Ends the extraction when this dialog is gone before the file was read completely.
+    /// Ends the extraction when this dialog is gone, or when another document took the place of
+    /// the one being read, before that file was read completely.
     /// </summary>
-    private readonly CancellationTokenSource extractionCancellation = new();
+    private CancellationTokenSource extractionCancellation = new();
+
+    /// <summary>
+    /// Numbers the loads, so that a load can tell whether it still owns this dialog.
+    /// </summary>
+    /// <remarks>
+    /// Cancelling ends the waiting, not the code behind it: what follows every await of an
+    /// abandoned load runs regardless. Without this number, its final block would clear the loading
+    /// state of the load which replaced it, and the new document would never leave its skeletons.
+    /// </remarks>
+    private int loadGeneration;
 
     /// <summary>
     /// True once this dialog was disposed. The extraction runs across awaits, so it may return
@@ -73,56 +124,101 @@ public partial class DocumentCheckDialog : MSGComponentBase
     
     protected override async Task OnInitializedAsync()
     {
-        //
+        this.document = this.Document;
-        // Decide before the first render whether we have to read the file at all. Images are shown
+        this.fileContent = this.FileContent;
-        // as they are, a missing file shows its own message, and content a caller already handed
-        // us is reused instead of being extracted a second time:
-        //
-        this.isLoadingContent =
-            this.Document is not null &&
-            !this.Document.IsImage &&
-            this.Document.Exists &&
-            string.IsNullOrWhiteSpace(this.FileContent);
 
+        this.isLoadingContent = this.NeedsExtraction();
         this.UpdatePreview();
         await base.OnInitializedAsync();
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender && this.Document is not null)
+        if (!firstRender)
+            return;
+
+        if (this.document is null)
         {
-            if (!this.isLoadingContent)
+            this.Logger.LogWarning("Document check dialog opened without a valid file path.");
+            return;
+        }
+
+        await this.LoadDocumentContentAsync();
+    }
+
+    /// <summary>
+    /// Whether the document we show has to be read before we can show anything of it. Images are
+    /// shown as they are, a missing file shows its own message, and content a caller already handed
+    /// us is reused instead of being extracted a second time.
+    /// </summary>
+    private bool NeedsExtraction() =>
+        this.document is not null &&
+        !this.document.IsImage &&
+        this.document.Exists &&
+        string.IsNullOrWhiteSpace(this.fileContent);
+
+    /// <summary>
+    /// Reads the content of the document we show and puts it into the preview.
+    /// </summary>
+    /// <remarks>
+    /// Runs after a render, so the user sees that we are working instead of an empty document. It
+    /// is called for the document this dialog was opened with, and again for every file the user
+    /// drops onto it.
+    /// </remarks>
+    private async Task LoadDocumentContentAsync()
+    {
+        if (this.document is null || !this.isLoadingContent)
+            return;
+
+        //
+        // A drop may arrive while we are still reading the file before it. We number this load and
+        // end the previous one, so that what is left of it recognizes that this dialog has moved on:
+        //
+        var generation = ++this.loadGeneration;
+        var documentToLoad = this.document;
+
+        var previousCancellation = this.extractionCancellation;
+        this.extractionCancellation = new();
+        var cancellationToken = this.extractionCancellation.Token;
+
+        await previousCancellation.CancelAsync();
+        previousCancellation.Dispose();
+
+        if (this.isDisposed || generation != this.loadGeneration)
             return;
 
         try
         {
-                var extraction = await UserFile.LoadFileData(this.Document.FilePath, this.RustService, this.PandocAvailability, this.extractionCancellation.Token);
+            var extraction = await UserFile.LoadFileData(documentToLoad.FilePath, this.RustService, this.PandocAvailability, cancellationToken);
-                if (this.isDisposed)
+            if (this.isDisposed || generation != this.loadGeneration)
                 return;
 
-                this.FileContent = extraction.Content;
+            this.fileContent = extraction.Content;
 
             //
             // This dialog exists so the user can check what we hand to the AI. Showing an
             // empty document when reading the file failed would answer that question wrong.
             //
             if (!extraction.HasUsableContent)
-                    this.loadFailureMessage = extraction.ToUserMessage(this.Document.FileName);
+                this.loadFailureMessage = extraction.ToUserMessage(documentToLoad.FileName);
         }
         catch (OperationCanceledException)
         {
-                // The user closed this dialog while we were reading the file. Nothing left to do.
+            // Either the user closed this dialog, or another document took the place of this one
+            // while we were reading it. Nothing left to do in both cases.
         }
         catch (Exception ex)
         {
-                this.Logger.LogError(ex, "Failed to load file content from '{FilePath}'", this.Document);
+            this.Logger.LogError(ex, "Failed to load file content from '{FilePath}'", documentToLoad.FilePath);
-                this.FileContent = string.Empty;
+            if (this.isDisposed || generation != this.loadGeneration)
-                this.loadFailureMessage = FileExtractionErrorCode.INTERNAL.ToUserMessage(this.Document.FileName);
+                return;
+
+            this.fileContent = string.Empty;
+            this.loadFailureMessage = FileExtractionErrorCode.INTERNAL.ToUserMessage(documentToLoad.FileName);
         }
         finally
         {
-                if (!this.isDisposed)
+            if (!this.isDisposed && generation == this.loadGeneration)
             {
                 this.isLoadingContent = false;
                 this.UpdatePreview();
@@ -130,8 +226,82 @@ public partial class DocumentCheckDialog : MSGComponentBase
             }
         }
     }
-        else if (firstRender)
+
-            this.Logger.LogWarning("Document check dialog opened without a valid file path.");
+    /// <summary>
+    /// Whether a dropped file can be both attached and shown here, which decides what this dialog
+    /// says and shows -- and whether it takes drops at all.
+    /// </summary>
+    /// <remarks>
+    /// Without a document, this dialog offers a file to be loaded instead, and that field is the
+    /// default target of this dialog. An area which reports a delegate claims that role for itself
+    /// and would take every drop away from the field, so we stay a plain marker in that case.
+    /// </remarks>
+    private bool CanAttach => this.AttachPaths is not null && this.document is not null;
+
+    private EventCallback<List<string>> DropCallback => this.CanAttach
+        ? EventCallback.Factory.Create<List<string>>(this, this.PathsDropped)
+        : default;
+
+    private bool IsZoneDisabled() => this.IsAttachingUnavailable?.Invoke() ?? false;
+
+    /// <summary>
+    /// Marks the part of this dialog which shows the document while a file hovers over it, so it is
+    /// visible where that file would land. The frame keeps its width in both states; only its color
+    /// changes, or the content would jump by a few pixels with every drag.
+    /// </summary>
+    /// <param name="isDropTarget">Whether this dialog is the target of the drop being aimed right now.</param>
+    private string PreviewAreaClass(bool isDropTarget)
+    {
+        if (!this.CanAttach)
+            return string.Empty;
+
+        return isDropTarget && !this.IsZoneDisabled()
+            ? "border-dashed border-2 rounded-lg pa-2 mud-border-primary"
+            : "border-dashed border-2 rounded-lg pa-2 mud-border-lines-default";
+    }
+
+    /// <summary>
+    /// Attaches what the user dropped onto this dialog and shows the first file of it.
+    /// </summary>
+    /// <param name="paths">The dropped paths, in the order the runtime delivered them.</param>
+    private async Task PathsDropped(List<string> paths)
+    {
+        if (this.AttachPaths is null)
+            return;
+
+        var attached = await this.AttachPaths(paths);
+        if (this.isDisposed)
+            return;
+
+        //
+        // Nothing came of the drop: the file is of a kind we do not take, Pandoc is missing, the
+        // validation refused it, or it is a media file whose transcript does not exist yet. The
+        // reason is already on its way to the user, and the document they were looking at stays.
+        //
+        if (attached.Count is 0)
+            return;
+
+        this.ShowDocument(attached[0]);
+
+        //
+        // Render before reading: the skeletons of the loading state are what tells the user that
+        // the preview switched at all, and reading a file may well take a moment.
+        //
+        this.StateHasChanged();
+        await this.LoadDocumentContentAsync();
+    }
+
+    /// <summary>
+    /// Shows another document, discarding everything that belonged to the previous one.
+    /// </summary>
+    /// <param name="attachment">The document to show from now on.</param>
+    private void ShowDocument(FileAttachment attachment)
+    {
+        this.document = attachment;
+        this.fileContent = string.Empty;
+        this.loadFailureMessage = null;
+        this.isLoadingContent = this.NeedsExtraction();
+        this.UpdatePreview();
     }
 
     /// <summary>
@@ -139,9 +309,9 @@ public partial class DocumentCheckDialog : MSGComponentBase
     /// since we have to refresh the preview whenever the content changes.
     /// </summary>
     /// <param name="fileContent">The content of the file the user has loaded.</param>
-    private void ApplyLoadedFileContent(string fileContent)
+    private void ApplyLoadedFileContent(string loadedContent)
     {
-        this.FileContent = fileContent;
+        this.fileContent = loadedContent;
         this.UpdatePreview();
     }
 
@@ -150,9 +320,9 @@ public partial class DocumentCheckDialog : MSGComponentBase
     /// </summary>
     private void UpdatePreview()
     {
-        if (this.FileContent.Length <= PREVIEW_CHARACTER_LIMIT)
+        if (this.fileContent.Length <= PREVIEW_CHARACTER_LIMIT)
         {
-            this.previewContent = this.FileContent;
+            this.previewContent = this.fileContent;
             this.previewCutOffCharacters = 0;
             return;
         }
@@ -161,12 +331,12 @@ public partial class DocumentCheckDialog : MSGComponentBase
         // We cut at the last line break before our limit. Otherwise, we might tear apart a Markdown
         // construct like a table row or a code fence in the middle of a line:
         //
-        var cutIndex = this.FileContent.LastIndexOf('\n', PREVIEW_CHARACTER_LIMIT - 1) + 1;
+        var cutIndex = this.fileContent.LastIndexOf('\n', PREVIEW_CHARACTER_LIMIT - 1) + 1;
         if (cutIndex < 1)
             cutIndex = PREVIEW_CHARACTER_LIMIT;
 
-        this.previewContent = this.FileContent[..cutIndex];
+        this.previewContent = this.fileContent[..cutIndex];
-        this.previewCutOffCharacters = this.FileContent.Length - cutIndex;
+        this.previewCutOffCharacters = this.fileContent.Length - cutIndex;
     }
 
     /// <summary>
@@ -177,6 +347,11 @@ public partial class DocumentCheckDialog : MSGComponentBase
     protected override void DisposeResources()
     {
         this.isDisposed = true;
+
+        //
+        // Only the running load is left to end here: every load we replaced was ended and disposed
+        // the moment its successor started.
+        //
         this.extractionCancellation.Cancel();
         this.extractionCancellation.Dispose();
 

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

@@ -163,6 +163,19 @@ public partial class ReviewAttachmentsDialog : MSGComponentBase
             { x => x.Document, fileAttachment },
         };
 
+        //
+        // Give the preview our own way of attaching, so a file dropped onto it lands in this list
+        // as well. Not when we cannot attach anything ourselves: the preview would then claim every
+        // drop and do nothing with it.
+        //
+        if (this.CanAttach)
+        {
+            dialogParameters.Add(x => x.AttachPaths, this.AttachPathsAsync);
+
+            if (this.IsAttachingUnavailable is not null)
+                dialogParameters.Add(x => x.IsAttachingUnavailable, this.IsAttachingUnavailable);
+        }
+
         await this.DialogService.ShowAsync<DocumentCheckDialog>(T("Document Preview"), dialogParameters, DialogOptions.FULLSCREEN);
     }
 }