MindWorkAI/AI-Studio
1
0 Fork 0
mirror of https://github.com/MindWorkAI/AI-Studio.git synced 2026-10-16 00:33:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Deliver each drop to the zone under the cursor (#953)

Browse Source
This commit is contained in:
Thorsten Sommer authored and GitHub committed 2026-09-10 15:28:08 +02:00
1 parent c7b42bee96
commit eb65b16851
63 files changed
+1300 -554
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/MindWork AI Studio/Components/AttachDocuments.razor
+25 -16
View File
@@ -3,8 +3,13 @@
@if (this.UseSmallForm)
{
<MudStack Spacing="0">
<div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
@if (this.isDraggingOver)
<PathDropZone IdPrefix="attach-documents"
Frameless="@true"
CatchAllDocuments="@this.CatchAllDocuments"
Disabled="@(() => this.IsUnavailable)"
OnPathsDropped="@this.PathsDropped"
Context="isDropTarget">
@if (isDropTarget)
{
<MudBadge
Content="@this.DocumentPaths.Count"
@@ -52,7 +57,7 @@
OnClick="@this.AddFilesManually"/>
</MudTooltip>
}
</div>
</PathDropZone>
@if (this.ShowMediaStatus)
{
<MediaTranscriptionStatus Owner="@this.EffectiveImportOwner" TargetId="@this.EffectiveMediaImportTarget.TargetId" Compact="true"/>
@@ -82,21 +87,25 @@ else
{
<MediaTranscriptionStatus Owner="@this.EffectiveImportOwner" TargetId="@this.EffectiveMediaImportTarget.TargetId"/>
}
<div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
<MudPaper Height="20em" Outlined="true" Class="@this.dragClass" Style="overflow-y: auto;">
@foreach (var fileAttachment in this.DocumentPaths)
<PathDropZone IdPrefix="attach-documents"
Class="pa-4 mt-4 mud-height-full"
HighlightClass="mud-border-primary border-4"
Style="height: 20em; overflow-y: auto;"
CatchAllDocuments="@this.CatchAllDocuments"
Disabled="@(() => this.IsUnavailable)"
OnPathsDropped="@this.PathsDropped">
@foreach (var fileAttachment in this.DocumentPaths)
{
@if (this.IsUnavailable)
{
@if (this.IsUnavailable)
{
<MudChip T="string" Color="Color.Dark" Text="@fileAttachment.FileName" tabindex="-1" Icon="@Icons.Material.Filled.Search" OnClick="@(() => this.InvestigateFile(fileAttachment))"/>
}
else
{
<MudChip T="string" Color="Color.Dark" Text="@fileAttachment.FileName" tabindex="-1" Icon="@Icons.Material.Filled.Search" OnClick="@(() => this.InvestigateFile(fileAttachment))" OnClose="@(() => this.RemoveDocument(fileAttachment))"/>
}
<MudChip T="string" Color="Color.Dark" Text="@fileAttachment.FileName" tabindex="-1" Icon="@Icons.Material.Filled.Search" OnClick="@(() => this.InvestigateFile(fileAttachment))"/>
}
</MudPaper>
</div>
else
{
<MudChip T="string" Color="Color.Dark" Text="@fileAttachment.FileName" tabindex="-1" Icon="@Icons.Material.Filled.Search" OnClick="@(() => this.InvestigateFile(fileAttachment))" OnClose="@(() => this.RemoveDocument(fileAttachment))"/>
}
}
</PathDropZone>
@if (!this.IsUnavailable)
{
<MudButton OnClick="@(async () => await this.ClearAllFiles())" Variant="Variant.Filled" Color="Color.Info" Class="mt-2" StartIcon="@Icons.Material.Filled.Delete">
app/MindWork AI Studio/Components/AttachDocuments.razor.cs
+18 -138
View File
@@ -24,18 +24,6 @@ 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; } = [];
@@ -46,8 +34,14 @@ public partial class AttachDocuments : MSGComponentBase
public Func<HashSet<FileAttachment>, Task> OnChange { get; set; } = _ => Task.CompletedTask;
/// <summary>
/// Catch all documents that are hovered over the AI Studio window and not only over the drop zone.
/// Makes this component the default target of its area, meaning of its page, assistant, or
/// dialog: it then also takes the drops which land anywhere in that area without hitting a zone
/// of their own.
/// </summary>
/// <remarks>
/// Only one zone per area can hold that role, and if several ask for it, the first one in the
/// markup gets it.
/// </remarks>
[Parameter]
public bool CatchAllDocuments { get; set; }
@@ -105,9 +99,6 @@ 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;
private bool isFileDialogOpen;
private MediaImportOwner EffectiveImportOwner => this.OwnerChat is not null
? MediaImportOwner.ForChat(this.OwnerChat.ChatId)
@@ -122,10 +113,8 @@ public partial class AttachDocuments : MSGComponentBase
protected override async Task OnInitializedAsync()
{
this.MediaTranscriptionService.StateChanged += this.OnMediaImportStateChanged;
this.ApplyFilters([], [ Event.TAURI_EVENT_RECEIVED, Event.REGISTER_FILE_DROP_AREA, Event.UNREGISTER_FILE_DROP_AREA ]);
this.ApplyFilters([], []);
// Register this drop area:
await this.MessageBus.SendMessage(this, Event.REGISTER_FILE_DROP_AREA, this.Layer);
await base.OnInitializedAsync();
}
@@ -222,104 +211,21 @@ public partial class AttachDocuments : MSGComponentBase
protected override void DisposeResources()
{
this.MediaTranscriptionService.StateChanged -= this.OnMediaImportStateChanged;
// Release the drop area. Without this, drop areas below this one would count this component
// forever and would stop catching dropped files:
this.MessageBus.SendMessage(this, Event.UNREGISTER_FILE_DROP_AREA, this.Layer).Observe($"{nameof(AttachDocuments)}: releasing the drop area");
base.DisposeResources();
}
protected override async Task ProcessIncomingMessage<T>(ComponentBase? sendingComponent, Event triggeredEvent, T? data) where T : default
{
if (this.IsUnavailable && triggeredEvent == Event.TAURI_EVENT_RECEIVED)
return;
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);
return;
}
this.isDraggingOver = true;
this.SetDragClass();
this.StateHasChanged();
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();
this.StateHasChanged();
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);
return;
}
await this.AddFileBatchAsync(paths);
await this.DocumentPathsChanged.InvokeAsync(this.DocumentPaths);
await this.OnChange(this.DocumentPaths);
this.isDraggingOver = false;
this.ClearDragClass();
this.StateHasChanged();
break;
}
}
#endregion
private const string DEFAULT_DRAG_CLASS = "relative rounded-lg border-2 border-dashed pa-4 mt-4 mud-width-full mud-height-full";
private string dragClass = DEFAULT_DRAG_CLASS;
/// <summary>
/// Attaches what the user dropped on the zone of this component.
/// </summary>
/// <param name="paths">The dropped paths, in the order the runtime delivered them.</param>
private async Task PathsDropped(List<string> paths)
{
await this.AddFileBatchAsync(paths);
await this.DocumentPathsChanged.InvokeAsync(this.DocumentPaths);
await this.OnChange(this.DocumentPaths);
}
private async Task AddFilesManually()
{
@@ -370,32 +276,6 @@ public partial class AttachDocuments : MSGComponentBase
await this.OnChange(this.DocumentPaths);
}
private void SetDragClass() => this.dragClass = $"{DEFAULT_DRAG_CLASS} mud-border-primary border-4";
private void ClearDragClass() => this.dragClass = DEFAULT_DRAG_CLASS;
private void OnMouseEnter(EventArgs _)
{
if(this.IsUnavailable || this.PauseCatchingDrops)
return;
this.Logger.LogDebug("Attach documents component '{Name}' is hovered.", this.Name);
this.isComponentHovered = true;
this.SetDragClass();
this.StateHasChanged();
}
private void OnMouseLeave(EventArgs _)
{
if(this.IsUnavailable || this.PauseCatchingDrops)
return;
this.Logger.LogDebug("Attach documents component '{Name}' is no longer hovered.", this.Name);
this.isComponentHovered = false;
this.ClearDragClass();
this.StateHasChanged();
}
private async Task RemoveDocument(FileAttachment fileAttachment)
{
if (this.IsUnavailable)
app/MindWork AI Studio/Components/ChatComponent.razor
+1 -1
View File
@@ -104,7 +104,7 @@
</MudTooltip>
}
<AttachDocuments Name="File Attachments" Layer="@DropLayers.PAGES" DocumentPaths="@this.ComposerState.FileAttachments" DocumentPathsChanged="@this.ComposerAttachmentsChanged" CatchAllDocuments="true" UseSmallForm="true" ShowMediaStatus="false" Provider="@this.Provider" OwnerChat="@this.ChatThread" EnsureOwnerChatAsync="@this.EnsureMediaImportChatAsync" Disabled="@this.MediaTranscriptionService.IsBusy(this.CurrentMediaImportOwner)"/>
<AttachDocuments Name="File Attachments" DocumentPaths="@this.ComposerState.FileAttachments" DocumentPathsChanged="@this.ComposerAttachmentsChanged" CatchAllDocuments="true" UseSmallForm="true" ShowMediaStatus="false" Provider="@this.Provider" OwnerChat="@this.ChatThread" EnsureOwnerChatAsync="@this.EnsureMediaImportChatAsync" Disabled="@this.MediaTranscriptionService.IsBusy(this.CurrentMediaImportOwner)"/>
<MudDivider Vertical="true" Style="height: 24px; align-self: center;"/>
app/MindWork AI Studio/Components/DropZoneArbiter.razor
+3
View File
@@ -0,0 +1,3 @@
@inherits MSGComponentBase
@* This component renders nothing on purpose. Its whole work is in DropZoneArbiter.razor.cs. *@
app/MindWork AI Studio/Components/DropZoneArbiter.razor.cs
+199
View File
@@ -0,0 +1,199 @@
using AIStudio.Tools.Rust;
using Microsoft.AspNetCore.Components;
namespace AIStudio.Components;
/// <summary>
/// Decides which drop zone a native drag and drop event was aimed at.
/// </summary>
/// <remarks>
/// <para>
/// AI Studio knows no browser drag and drop. The Tauri runtime reports the native events together
/// with the cursor position, and this component turns that position into the ID of the zone
/// underneath. It lets the browser answer that question, because only the browser knows what the
/// page looks like right now: which dialog is open, which zone is scrolled out of sight, which
/// overlay is in the way.
/// </para>
/// <para>
/// It renders nothing and exists once per circuit, rendered from Routes.razor beside the MudBlazor
/// providers and thus outside the router. A component rather than a service, because a service has
/// no reliable moment at which JS interop becomes possible; and not a part of MainLayout, because
/// arbitration would be a foreign body in that file.
/// </para>
/// <para>
/// There is deliberately no fallback for a hit test which cannot be carried out: a circuit whose
/// browser is gone learns nothing about the page and must therefore do nothing. The app keeps
/// disconnected circuits for a long time, see the retention settings in Program.cs, and the message
/// bus reaches all of them. Anything which caught a drop without asking the browser would process
/// one and the same drop once per circuit.
/// </para>
/// </remarks>
public partial class DropZoneArbiter : MSGComponentBase
{
[Inject]
private IJSRuntime JsRuntime { get; init; } = null!;
[Inject]
private ILogger<DropZoneArbiter> Logger { get; init; } = null!;
/// <summary>
/// Which zone we named last, so that an unchanged highlight costs no message.
/// </summary>
private string? highlightedZoneId;
/// <summary>
/// True while a hit test for the highlight is on its way to the browser.
/// </summary>
private bool isHighlightHitTestRunning;
#region Overrides of MSGComponentBase
protected override async Task OnInitializedAsync()
{
this.ApplyFilters([], [ Event.TAURI_EVENT_RECEIVED ]);
await base.OnInitializedAsync();
}
protected override async Task ProcessIncomingMessage<T>(ComponentBase? sendingComponent, Event triggeredEvent, T? data) where T : default
{
switch (triggeredEvent)
{
//
// A drag entered the window or moved inside it. Both say where the cursor is, and
// nothing more, so both lead to the same question: which zone lights up?
//
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_HOVERED or TauriEventType.FILE_DROP_OVER } tauriEvent:
await this.MoveHighlight(tauriEvent);
break;
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_DROPPED, Payload: var paths } tauriEvent:
await this.DeliverDroppedPaths(tauriEvent, paths);
break;
//
// The drag left the window, or the window lost the focus while a drag was running. Tauri
// reports no position for either, and there is nothing left to aim at anyway.
//
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_CANCELED or TauriEventType.WINDOW_NOT_FOCUSED }:
await this.NameHighlightedZone(null);
break;
}
}
#endregion
/// <summary>
/// Highlights the zone under the cursor of a running drag.
/// </summary>
/// <remarks>
/// A drag-over event arrives faster than one interop round trip takes, and the message bus
/// delivers without awaiting the receiver. A hit test which is still on its way therefore
/// suppresses the next one instead of queueing it: the following event catches up with the
/// movement anyway, and a queue would only ever fall further behind the cursor.
/// </remarks>
private async Task MoveHighlight(TauriEvent tauriEvent)
{
if (this.isHighlightHitTestRunning)
return;
this.isHighlightHitTestRunning = true;
try
{
var (wasTested, zoneId) = await this.DetermineZoneUnderCursor(tauriEvent);
if (!wasTested)
return;
await this.NameHighlightedZone(zoneId);
}
finally
{
this.isHighlightHitTestRunning = false;
}
}
/// <summary>
/// Hands the dropped paths to the zone under the cursor, if there is one.
/// </summary>
/// <remarks>
/// Unlike the highlight, this hit test is never suppressed: a drop happens once and must not be
/// lost. The highlight goes away first and in every case, because the drag is over no matter
/// whether the drop finds a zone.
/// </remarks>
private async Task DeliverDroppedPaths(TauriEvent tauriEvent, List<string> paths)
{
await this.NameHighlightedZone(null);
var (wasTested, zoneId) = await this.DetermineZoneUnderCursor(tauriEvent);
if (!wasTested)
return;
if (zoneId is null)
{
//
// Nothing under the cursor takes drops, so nothing happens -- which is the point of the
// whole exercise. The zones which were available are worth logging here, though: this is
// the one moment where the question "which one should it have been?" gets asked, and it
// happens once per drag rather than ten times a second.
//
if (this.Logger.IsEnabled(LogLevel.Debug))
{
var (_, availableZones) = await this.JsRuntime.TryInvokeAsync<string[]>(this.CircuitState, "dropZones.list");
this.Logger.LogDebug("{Count} dropped path(s) reached no drop zone. Available zones: {Zones}", paths.Count, availableZones is null ? "unknown" : string.Join(", ", availableZones));
}
return;
}
this.Logger.LogDebug("{Count} path(s) were dropped on the zone '{ZoneId}'.", paths.Count, zoneId);
await this.SendMessage(Event.PATHS_DROPPED, new DroppedPaths(zoneId, paths));
}
/// <summary>
/// Tells the zones which one of them is under the cursor, unless they know already.
/// </summary>
/// <param name="zoneId">The ID of the zone under the cursor, or null for none.</param>
private async Task NameHighlightedZone(string? zoneId)
{
if (zoneId == this.highlightedZoneId)
return;
this.highlightedZoneId = zoneId;
await this.SendMessage(Event.HIGHLIGHT_DROP_ZONE, new DropZoneHighlight(zoneId));
}
/// <summary>
/// Asks the browser which drop zone lies under the cursor of a drag and drop event.
/// </summary>
/// <remarks>
/// The two parts of the result must stay apart. Whether the browser answered at all comes first:
/// while a circuit is disconnected nobody answers, and acting on an answer we never got is
/// exactly the mistake this design exists to avoid. Only then comes what the answer was, and
/// there a null is a legitimate one -- the browser looked and found no zone.
/// </remarks>
private async Task<(bool WasTested, string? ZoneId)> DetermineZoneUnderCursor(TauriEvent tauriEvent)
{
if (!tauriEvent.TryGetDropPosition(out var x, out var y))
{
// The runtime sends a position with every drag and drop event which has one, so this
// means we are talking to a runtime which does not, i.e. an older one:
this.Logger.LogWarning("The Tauri event {EventType} carried no cursor position, so the drop zone under it stays unknown.", tauriEvent.EventType);
return (false, null);
}
// A failed or skipped call is already logged by the extension method, which tells a
// disconnected circuit from a broken call. Nothing to add here, and nothing to do:
var hitTest = await this.JsRuntime.TryInvokeAsync<string?>(this.CircuitState, "dropZones.hitTest", x, y);
//
// One line per hit test, which is about ten per second while a drag lasts. That is the
// instrument for checking the coordinate space: the position has to follow the cursor, in
// the middle of the window as well as in all four corners, and on a display with a scale
// factor other than one. A mistake there shows up as a factor, an offset, or a mirrored y.
//
if (hitTest.WasInvoked)
this.Logger.LogDebug("The event {EventType} at ({X}, {Y}) hit the drop zone '{ZoneId}'.", tauriEvent.EventType, x, y, hitTest.Value ?? "<none>");
return hitTest;
}
}
app/MindWork AI Studio/Components/PathDropZone.razor
+26 -5
View File
@@ -1,7 +1,28 @@
@inherits MSGComponentBase
<div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
<MudPaper Outlined="@true" Class="@this.dragClass">
@this.ChildContent
</MudPaper>
</div>
@if (this.IsFramed)
{
<div data-drop-zone-id="@this.zoneId">
<MudPaper Outlined="@true" Class="@this.FrameClass" Style="@this.Style">
@this.ChildContent?.Invoke(this.isHighlighted)
</MudPaper>
</div>
}
else
{
@* An area renders one element, with the content immediately inside it. Layouts hang child
selectors on that element, for instance app.css does on .inner-scrolling-context, so an extra
level here would break them. The cascading value renders no element of its own. *@
<div class="@this.Class" style="@this.Style" data-drop-zone-id="@this.zoneId">
@if (this.areaState is null)
{
@this.ChildContent?.Invoke(this.isHighlighted)
}
else
{
<CascadingValue Value="@this.areaState" IsFixed="@true">
@this.ChildContent?.Invoke(this.isHighlighted)
</CascadingValue>
}
</div>
}
app/MindWork AI Studio/Components/PathDropZone.razor.cs
+258 -94
View File
@@ -1,5 +1,3 @@
using AIStudio.Tools.Rust;
using Microsoft.AspNetCore.Components;
namespace AIStudio.Components;
@@ -8,171 +6,337 @@ namespace AIStudio.Components;
/// A drop zone which reports the paths of whatever was dropped on it, and nothing else.
/// </summary>
/// <remarks>
/// <para>
/// Dropping is a native matter in AI Studio: the Tauri runtime reports real paths, which is why
/// this zone can hand out folders just as well as files. What those paths mean is the consumer's
/// business — this component reads no content and does not care whether a path leads to a file or
/// to a folder.
/// </para>
/// <para>
/// One component serves both kinds of drop target, because both are the same thing to the hit test:
/// an element with an ID. A zone is a place one aims at, and it draws a frame around whatever it is
/// given. An area is a page, an assistant, or a dialog: it draws nothing, it marks the space in
/// which a drop counts at all, and the drops which hit none of its zones go to its default target.
/// Set IsArea for the second kind.
/// </para>
/// </remarks>
public partial class PathDropZone : MSGComponentBase
{
/// <summary>
/// The content shown inside the zone.
/// </summary>
/// <remarks>
/// Its argument tells the content whether this zone is the one under the cursor right now, so it
/// can show where the drop would land. Everybody who does not care about that ignores it.
/// </remarks>
[Parameter]
public RenderFragment? ChildContent { get; set; }
public RenderFragment<bool>? ChildContent { get; set; }
/// <summary>
/// Reports the dropped paths, in the order the runtime delivered them.
/// </summary>
/// <remarks>
/// An area without this callback is a marker and nothing more: it takes no drops itself, it only
/// gives the drops aimed between its zones a place to be counted, from where the default target
/// of the area picks them up.
/// </remarks>
[Parameter]
public EventCallback<List<string>> OnPathsDropped { get; set; }
/// <summary>
/// On which layer to register the drop area. Higher layers have priority over lower layers.
/// </summary>
[Parameter]
public int Layer { get; set; } = DropLayers.ROOT;
/// <summary>
/// Catch all documents that are hovered over the AI Studio window and not only over the drop zone.
/// Makes this zone the default target of its area, meaning of its page, assistant, or dialog.
/// </summary>
/// <remarks>
/// Practically every zone needs this today. Hovering is detected through mouse events, and no
/// webview delivers those while a native drag is in progress, so a zone without this flag
/// hardly ever catches anything. The consequence is that two zones of the same layer cannot be
/// told apart: the one carrying this flag takes every drop, including the ones meant for the
/// other. A page may therefore hold only one zone per layer. Lifting that limit needs the
/// cursor position, which the runtime receives from Tauri and currently discards in
/// app_window.rs.
/// A drop aimed at this zone arrives here in any case. What this flag decides is the fate of the
/// drops aimed anywhere else in the surrounding area which hit no zone of their own: with the
/// flag, they arrive here as well. Only one zone per area can hold that role, and if several ask
/// for it, the first one in the markup gets it. An area ignores the flag: an area which takes
/// drops at all is its own default target, see IsArea.
/// </remarks>
[Parameter]
public bool CatchAllDocuments { get; set; }
/// <summary>
/// When true, the zone ignores drops and is not highlighted.
/// Decides, at the moment a drop arrives, whether this zone may take it.
/// </summary>
/// <remarks>
/// The drop area stays registered nevertheless. Releasing it during the lifetime of the
/// component would lower the count of every zone below this one, and those zones would then
/// catch files while this one is still on screen.
/// A disabled zone keeps its ID in the DOM and therefore swallows the drops aimed at it. That is
/// what the pointer says: it rests on a switched-off field, so nothing happens. Letting the drop
/// fall through to the area behind it would deliver the files somewhere else entirely. This is
/// asked rather than passed as a value because the answer often depends on work in flight, and a
/// value would be as old as the last render of the consumer.
/// </remarks>
[Parameter]
public bool Disabled { get; set; }
public Func<bool> Disabled { get; set; } = () => false;
/// <summary>
/// Makes this element an area instead of a zone: it marks a page, an assistant, or a dialog, and
/// it draws no frame of its own.
/// </summary>
/// <remarks>
/// This is how the habitual behaviour survives the move to hit testing: a file dropped anywhere
/// in the chat, in an assistant, or in a dialog still arrives where it used to, while a file
/// dropped on a specific zone now arrives exactly there. No code decides between the two — the
/// browser does, because a zone lies deeper in the DOM than the area around it, and the hit test
/// resolves from the inside out. An area replaces the element it stands in for rather than
/// adding one, so it takes over its class and its style.
/// </remarks>
[Parameter]
public bool IsArea { get; set; }
/// <summary>
/// Leaves out the frame this zone would otherwise draw around its content.
/// </summary>
/// <remarks>
/// For zones whose content is the marker itself, such as a toolbar which shows a drop field
/// while a file hovers over it. An area never has a frame, so it does not need this flag.
/// </remarks>
[Parameter]
public bool Frameless { get; set; }
/// <summary>
/// The first part of the ID this element reports to the hit test, followed by a unique suffix.
/// </summary>
/// <remarks>
/// It names the kind of zone in the log, next to the IDs the arbiter lists when a drop reached
/// nobody. Which is the whole reason it is a parameter: an ID of its own tells one from another,
/// but only a name tells what one is looking at.
/// </remarks>
[Parameter]
public string IdPrefix { get; set; } = "path-drop-zone";
/// <summary>
/// The CSS classes of the element this component renders: of the frame for a zone which has one,
/// and of the element itself for an area and for a frameless zone.
/// </summary>
/// <remarks>
/// A frame keeps its border and its width in any case; the classes given here replace the
/// padding and the margin it would use otherwise.
/// </remarks>
[Parameter]
public string Class { get; set; } = string.Empty;
/// <summary>
/// The classes a frame takes on in addition while it is the zone under the cursor.
/// </summary>
/// <remarks>
/// Only a frame is highlighted this way. Without one there is nothing to draw on, and the
/// content says for itself what it looks like when it is the target, see ChildContent.
/// </remarks>
[Parameter]
public string HighlightClass { get; set; } = "mud-border-primary border-2";
/// <summary>
/// The inline style of the element this component renders.
/// </summary>
[Parameter]
public string Style { get; set; } = string.Empty;
/// <summary>
/// The area this zone lives in, if it lives in one at all.
/// </summary>
[CascadingParameter]
private DropZoneScopeState? Scope { get; set; }
[Inject]
private ILogger<PathDropZone> Logger { get; init; } = null!;
private const string DEFAULT_DRAG_CLASS = "relative rounded-lg border-2 border-dashed pa-3 mb-3 mud-width-full";
private const string FRAME_CLASSES = "relative rounded-lg border-2 border-dashed mud-width-full";
private const string DEFAULT_SPACING_CLASSES = "pa-3 mb-3";
private string dragClass = DEFAULT_DRAG_CLASS;
private uint numDropAreasAboveThis;
private bool isComponentHovered;
private DropZoneScopeState? areaState;
private string zoneId = string.Empty;
private bool isDefaultZone;
private bool isHighlighted;
private bool hasReportedDefaultZoneProblem;
private bool IsFramed => !this.IsArea && !this.Frameless;
private string FrameClass => this.isHighlighted
? $"{FRAME_CLASSES} {this.SpacingClasses} {this.HighlightClass}"
: $"{FRAME_CLASSES} {this.SpacingClasses}";
private string SpacingClasses => string.IsNullOrWhiteSpace(this.Class) ? DEFAULT_SPACING_CLASSES : this.Class;
/// <summary>
/// The area this zone reports to, which for an area is itself.
/// </summary>
private DropZoneScopeState? EffectiveScope => this.areaState ?? this.Scope;
/// <summary>
/// Whether this element wants to be the default target of its area.
/// </summary>
/// <remarks>
/// An area which takes drops is that target by definition, because its own element is the area
/// and a drop next to its zones has nothing else to hit. It claims the role nevertheless, which
/// is what keeps a zone inside it from taking it and delivering the same drop a second time.
/// </remarks>
private bool WantsDefaultZoneRole => this.IsArea ? this.OnPathsDropped.HasDelegate : this.CatchAllDocuments;
/// <summary>
/// Whether a drop can arrive here at all.
/// </summary>
/// <remarks>
/// An area which delivers to nobody is only a mark on the page, and it must not listen: the
/// highlight would render a whole page or assistant anew several times per drag, for a highlight
/// nobody asked to see.
/// </remarks>
private bool CanBeTarget => !this.IsArea || this.OnPathsDropped.HasDelegate;
#region Overrides of MSGComponentBase
protected override async Task OnInitializedAsync()
{
this.ApplyFilters([], [ Event.TAURI_EVENT_RECEIVED, Event.REGISTER_FILE_DROP_AREA, Event.UNREGISTER_FILE_DROP_AREA ]);
await this.MessageBus.SendMessage(this, Event.REGISTER_FILE_DROP_AREA, this.Layer);
//
// The ID is built once and never again: the hit test names this element by it, so it has to
// outlive every render. The prefix is a parameter, and parameters are set before this point.
//
this.zoneId = $"{this.IdPrefix}-{Guid.NewGuid():N}";
if (this.IsArea)
this.areaState = new DropZoneScopeState(this.zoneId);
if (this.CanBeTarget)
this.ApplyFilters([], [ Event.HIGHLIGHT_DROP_ZONE, Event.PATHS_DROPPED ]);
else
this.ApplyFilters([], []);
await base.OnInitializedAsync();
}
protected override void OnParametersSet()
{
this.UpdateDefaultZoneRole();
base.OnParametersSet();
}
/// <summary>
/// Releases the drop area.
/// Hands the role of the default target back to the area.
/// </summary>
protected override void DisposeResources()
{
// Without this, drop areas below this one would count this component forever and would
// stop catching dropped files:
this.MessageBus.SendMessage(this, Event.UNREGISTER_FILE_DROP_AREA, this.Layer).Observe($"{nameof(PathDropZone)}: releasing the drop area");
if (this.isDefaultZone)
this.EffectiveScope?.ReleaseDefaultZone(this);
base.DisposeResources();
}
protected override async Task ProcessIncomingMessage<T>(ComponentBase? sendingComponent, Event triggeredEvent, T? data) where T : default
{
// A disabled zone takes no files. It keeps track of the zones above it, though, because
// those come and go while this one is disabled:
if (this.Disabled && triggeredEvent == Event.TAURI_EVENT_RECEIVED)
return;
switch (triggeredEvent)
{
case Event.REGISTER_FILE_DROP_AREA when sendingComponent != this:
{
if(data is int layer && layer > this.Layer)
case Event.HIGHLIGHT_DROP_ZONE when data is DropZoneHighlight highlight:
this.ApplyHighlight(this.IsThisZone(highlight.ZoneId));
break;
case Event.PATHS_DROPPED when data is DroppedPaths dropped:
// Whoever the drop was meant for, the drag is over and no zone stays highlighted:
this.ApplyHighlight(false);
if (!this.IsThisZone(dropped.ZoneId))
return;
if (this.Disabled())
{
this.numDropAreasAboveThis++;
this.ClearDragClass();
this.Logger.LogDebug("The drop zone '{ZoneId}' cannot take drops right now and swallowed {Count} dropped path(s).", this.zoneId, dropped.Paths.Count);
return;
}
break;
}
case Event.UNREGISTER_FILE_DROP_AREA when sendingComponent != this:
{
if(data is int layer && layer > this.Layer && this.numDropAreasAboveThis > 0)
this.numDropAreasAboveThis--;
break;
}
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_HOVERED }:
if(!this.CanCatchDroppedPath())
return;
this.SetDragClass();
this.StateHasChanged();
break;
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_CANCELED }:
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.WINDOW_NOT_FOCUSED }:
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.CanCatchDroppedPath())
return;
this.Logger.LogDebug("The path drop zone on layer {Layer} caught {Count} path(s).", this.Layer, paths.Count);
await this.OnPathsDropped.InvokeAsync(paths);
this.ClearDragClass();
this.StateHasChanged();
this.Logger.LogDebug("The drop zone '{ZoneId}' caught {Count} path(s).", this.zoneId, dropped.Paths.Count);
await this.OnPathsDropped.InvokeAsync(dropped.Paths);
break;
}
}
#endregion
private bool CanCatchDroppedPath() => this.numDropAreasAboveThis is 0 && (this.isComponentHovered || this.CatchAllDocuments);
private void SetDragClass() => this.dragClass = $"{DEFAULT_DRAG_CLASS} mud-border-primary border-2";
private void ClearDragClass() => this.dragClass = DEFAULT_DRAG_CLASS;
private void OnMouseEnter(EventArgs _)
/// <summary>
/// Keeps the role of the default target in step with the CatchAllDocuments parameter.
/// </summary>
/// <remarks>
/// The flag is a parameter, so it can change while this zone lives. A zone inside a collapsed
/// panel is the case this exists for: MudBlazor leaves the content of a collapsed panel in the
/// DOM with a height of zero, so the zone stays alive and cannot be aimed at -- yet it would
/// keep the role and swallow every drop meant for the part of the page one can actually see.
/// </remarks>
private void UpdateDefaultZoneRole()
{
if(this.Disabled || this.numDropAreasAboveThis > 0)
if (this.WantsDefaultZoneRole)
{
this.ClaimDefaultZoneRole();
return;
}
if (!this.isDefaultZone)
return;
// A native drag delivers no DOM events at all, mouse events included. This fires before a
// drag begins, while the pointer still moves freely, which makes it a hint about where the
// user is aiming rather than a reliable signal. See the remarks on CatchAllDocuments:
this.isComponentHovered = true;
this.SetDragClass();
this.StateHasChanged();
this.EffectiveScope?.ReleaseDefaultZone(this);
this.isDefaultZone = false;
}
private void OnMouseLeave(EventArgs _)
/// <summary>
/// Asks the area for the role of its default target.
/// </summary>
private void ClaimDefaultZoneRole()
{
if(this.Disabled)
if (this.isDefaultZone)
return;
this.isComponentHovered = false;
this.ClearDragClass();
if (this.EffectiveScope is null)
{
//
// There is nothing to claim: the surrounding page, assistant, or dialog is not a drop
// area at all. The flag would then do nothing, and silently -- which is how a zone ends
// up promising a behaviour it cannot deliver. So say it out loud: either the area needs
// a drop area of its own, or the flag does not belong here.
//
//
// Reported once only: the claim is retried on every parameter change, and repeating
// the message on every render would bury the log.
//
if (!this.hasReportedDefaultZoneProblem)
{
this.hasReportedDefaultZoneProblem = true;
this.Logger.LogWarning("The drop zone '{ZoneId}' wants to be the default target of its area, but it does not live in a drop area. Dropping next to this zone will do nothing.", this.zoneId);
}
return;
}
this.isDefaultZone = this.EffectiveScope.TryBecomeDefaultZone(this);
// Losing the role to a neighbour is a decision, not a defect -- and it can be undone later,
// when that neighbour goes away. So this one only goes to the debug log, and only once:
if (this.isDefaultZone || this.hasReportedDefaultZoneProblem)
return;
this.hasReportedDefaultZoneProblem = true;
this.Logger.LogDebug("The drop zone '{ZoneId}' asked to be the default target of its area, which another zone already is. It now takes only the drops aimed at itself.", this.zoneId);
}
/// <summary>
/// Decides whether the named zone is this one.
/// </summary>
/// <remarks>
/// The area counts as this zone as long as this zone is its default target. That is the whole
/// mechanism behind dropping anywhere in a page and still landing here.
/// </remarks>
/// <param name="targetZoneId">The ID the hit test reported, or null when it hit nothing.</param>
private bool IsThisZone(string? targetZoneId) => targetZoneId is not null && (targetZoneId == this.zoneId || (this.isDefaultZone && targetZoneId == this.EffectiveScope?.ScopeId));
/// <summary>
/// Highlights the zone, or takes the highlight away.
/// </summary>
/// <remarks>
/// The comparison is not for tidiness: a throttled drag-over event arrives about ten times per
/// second, and without it every one of them would render every zone on the page anew.
/// </remarks>
private void ApplyHighlight(bool shouldBeHighlighted)
{
var highlighted = shouldBeHighlighted && !this.Disabled();
if (highlighted == this.isHighlighted)
return;
this.isHighlighted = highlighted;
this.StateHasChanged();
}
}
app/MindWork AI Studio/Components/ReadFileContent.razor
+34 -33
View File
@@ -2,39 +2,40 @@
@if (this.EnableDragDrop)
{
<div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
<MudPaper Outlined="true" Class="@this.dragClass">
<MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.None" Wrap="Wrap.Wrap">
@if (this.ShowAttachedDocumentState && this.hasLoadedFileContent)
{
<MudTooltip Text="@this.FileLoadedTooltip()">
<MudBadge Icon="@Icons.Material.Filled.Check" Color="Color.Success" Overlap="true">
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable">
@this.ButtonText
</MudButton>
</MudBadge>
</MudTooltip>
}
else
{
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable">
@this.ButtonText
</MudButton>
}
@if (this.IsCurrentTargetBusy)
{
<MediaTranscriptionStatus Owner="@this.EffectiveImportOwner" TargetId="@this.EffectiveMediaImportTarget.TargetId" Compact="true"/>
}
else
{
<MudText Typo="Typo.body2">
@T("Drop one file here to load its content.")
</MudText>
}
</MudStack>
</MudPaper>
</div>
<PathDropZone IdPrefix="read-file-content"
CatchAllDocuments="@this.CatchAllDocuments"
Disabled="@(() => this.IsUnavailable)"
OnPathsDropped="@this.LoadFirstValidFile">
<MudStack Row="true" AlignItems="AlignItems.Center" StretchItems="StretchItems.None" Wrap="Wrap.Wrap">
@if (this.ShowAttachedDocumentState && this.hasLoadedFileContent)
{
<MudTooltip Text="@this.FileLoadedTooltip()">
<MudBadge Icon="@Icons.Material.Filled.Check" Color="Color.Success" Overlap="true">
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable">
@this.ButtonText
</MudButton>
</MudBadge>
</MudTooltip>
}
else
{
<MudButton StartIcon="@Icons.Material.Filled.Description" OnClick="@(async () => await this.SelectFile())" Variant="Variant.Filled" Disabled="@this.IsUnavailable">
@this.ButtonText
</MudButton>
}
@if (this.IsCurrentTargetBusy)
{
<MediaTranscriptionStatus Owner="@this.EffectiveImportOwner" TargetId="@this.EffectiveMediaImportTarget.TargetId" Compact="true"/>
}
else
{
<MudText Typo="Typo.body2">
@T("Drop one file here to load its content.")
</MudText>
}
</MudStack>
</PathDropZone>
}
else
{
app/MindWork AI Studio/Components/ReadFileContent.razor.cs
+10 -107
View File
@@ -46,14 +46,14 @@ public partial class ReadFileContent : MSGComponentBase
public bool EnableDragDrop { get; set; }
/// <summary>
/// On which layer to register the drop area. Higher layers have priority over lower layers.
/// </summary>
[Parameter]
public int Layer { get; set; }
/// <summary>
/// Catch all documents that are hovered over the AI Studio window and not only over the drop zone.
/// Makes this component the default target of its area, meaning of its page, assistant, or
/// dialog: it then also takes the drops which land anywhere in that area without hitting a zone
/// of their own.
/// </summary>
/// <remarks>
/// Only one zone per area can hold that role, and if several ask for it, the first one in the
/// markup gets it. The flag has no effect without drag and drop being enabled.
/// </remarks>
[Parameter]
public bool CatchAllDocuments { get; set; }
@@ -79,12 +79,7 @@ public partial class ReadFileContent : MSGComponentBase
[Inject]
private MediaTranscriptionService MediaTranscriptionService { get; init; } = null!;
private const string DEFAULT_DRAG_CLASS = "relative rounded-lg border-2 border-dashed pa-3 mb-3 mud-width-full";
private string ButtonText => string.IsNullOrWhiteSpace(this.Text) ? T("Use file content as input") : this.Text;
private string dragClass = DEFAULT_DRAG_CLASS;
private uint numDropAreasAboveThis;
private bool isComponentHovered;
private bool isFileDialogOpen;
private bool hasLoadedFileContent;
private string loadedFileName = string.Empty;
@@ -118,11 +113,7 @@ public partial class ReadFileContent : MSGComponentBase
protected override async Task OnInitializedAsync()
{
this.MediaTranscriptionService.StateChanged += this.OnMediaImportStateChanged;
if (this.EnableDragDrop)
{
this.ApplyFilters([], [ Event.TAURI_EVENT_RECEIVED, Event.REGISTER_FILE_DROP_AREA, Event.UNREGISTER_FILE_DROP_AREA ]);
await this.MessageBus.SendMessage(this, Event.REGISTER_FILE_DROP_AREA, this.Layer);
}
this.ApplyFilters([], []);
await base.OnInitializedAsync();
await this.SyncCompletedMediaTextAsync();
@@ -187,76 +178,15 @@ public partial class ReadFileContent : MSGComponentBase
this.MediaTranscriptionService.AcknowledgeDelivery(delivery);
}
/// <summary>Unsubscribes from the singleton media service and releases the drop area.</summary>
/// <summary>Unsubscribes from the singleton media service.</summary>
protected override void DisposeResources()
{
this.MediaTranscriptionService.StateChanged -= this.OnMediaImportStateChanged;
// Release the drop area. Without this, drop areas below this one would count this component
// forever and would stop catching dropped files:
if (this.EnableDragDrop)
this.MessageBus.SendMessage(this, Event.UNREGISTER_FILE_DROP_AREA, this.Layer).Observe($"{nameof(ReadFileContent)}: releasing the drop area");
base.DisposeResources();
}
protected override async Task ProcessIncomingMessage<T>(ComponentBase? sendingComponent, Event triggeredEvent, T? data) where T : default
{
if (!this.EnableDragDrop)
return;
if (this.IsUnavailable && triggeredEvent == Event.TAURI_EVENT_RECEIVED)
return;
switch (triggeredEvent)
{
case Event.REGISTER_FILE_DROP_AREA when sendingComponent != this:
{
if(data is int layer && layer > this.Layer)
{
this.numDropAreasAboveThis++;
this.ClearDragClass();
}
break;
}
case Event.UNREGISTER_FILE_DROP_AREA when sendingComponent != this:
{
if(data is int layer && layer > this.Layer && this.numDropAreasAboveThis > 0)
this.numDropAreasAboveThis--;
break;
}
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_HOVERED }:
if(!this.CanCatchDroppedFile())
return;
this.SetDragClass();
this.StateHasChanged();
break;
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_CANCELED }:
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.WINDOW_NOT_FOCUSED }:
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.CanCatchDroppedFile())
return;
await this.LoadFirstValidFile(paths);
this.ClearDragClass();
this.StateHasChanged();
break;
}
}
#endregion
private async Task SelectFile()
{
if (this.IsUnavailable)
@@ -417,31 +347,4 @@ public partial class ReadFileContent : MSGComponentBase
return string.Format(this.T("Attached file '{0}'."), this.loadedFileName);
}
private bool CanCatchDroppedFile() => this.numDropAreasAboveThis is 0 && (this.isComponentHovered || this.CatchAllDocuments);
private void SetDragClass() => this.dragClass = $"{DEFAULT_DRAG_CLASS} mud-border-primary border-2";
private void ClearDragClass() => this.dragClass = DEFAULT_DRAG_CLASS;
private void OnMouseEnter(EventArgs _)
{
if(this.IsUnavailable || this.numDropAreasAboveThis > 0)
return;
this.Logger.LogDebug("Read file content component is hovered.");
this.isComponentHovered = true;
this.SetDragClass();
this.StateHasChanged();
}
private void OnMouseLeave(EventArgs _)
{
if(this.IsUnavailable)
return;
this.Logger.LogDebug("Read file content component is no longer hovered.");
this.isComponentHovered = false;
this.ClearDragClass();
this.StateHasChanged();
}
}
app/MindWork AI Studio/Components/SelectDirectory.razor
+1 -1
View File
@@ -2,7 +2,7 @@
@if (this.EnableDragDrop)
{
<PathDropZone Layer="@this.Layer" CatchAllDocuments="@this.CatchAllDocuments" Disabled="@this.Disabled" OnPathsDropped="@this.PathsDropped">
<PathDropZone CatchAllDocuments="@this.CatchAllDocuments" Disabled="@(() => this.Disabled)" OnPathsDropped="@this.PathsDropped">
@this.Picker
<MudText Typo="Typo.body2">
@T("You can also drag & drop the folder here.")
app/MindWork AI Studio/Components/SelectDirectory.razor.cs
+3 -7
View File
@@ -34,13 +34,9 @@ public partial class SelectDirectory : MSGComponentBase
public bool EnableDragDrop { get; set; }
/// <summary>
/// On which layer to register the drop area. Higher layers have priority over lower layers.
/// </summary>
[Parameter]
public int Layer { get; set; } = DropLayers.ROOT;
/// <summary>
/// Catch all documents that are hovered over the AI Studio window and not only over the drop zone.
/// Makes this component the default target of its area, meaning of its page, assistant, or
/// dialog: it then also takes the drops which land anywhere in that area without hitting a zone
/// of their own.
/// </summary>
[Parameter]
public bool CatchAllDocuments { get; set; }
app/MindWork AI Studio/Components/SelectFile.razor
+1 -1
View File
@@ -2,7 +2,7 @@
@if (this.EnableDragDrop)
{
<PathDropZone Layer="@this.Layer" CatchAllDocuments="@this.CatchAllDocuments" Disabled="@this.Disabled" OnPathsDropped="@this.PathsDropped">
<PathDropZone CatchAllDocuments="@this.CatchAllDocuments" Disabled="@(() => this.Disabled)" OnPathsDropped="@this.PathsDropped">
@this.Picker
<MudText Typo="Typo.body2">
@T("You can also drag & drop the file here.")
app/MindWork AI Studio/Components/SelectFile.razor.cs
+3 -7
View File
@@ -38,13 +38,9 @@ public partial class SelectFile : MSGComponentBase
public bool EnableDragDrop { get; set; }
/// <summary>
/// On which layer to register the drop area. Higher layers have priority over lower layers.
/// </summary>
[Parameter]
public int Layer { get; set; } = DropLayers.ROOT;
/// <summary>
/// Catch all documents that are hovered over the AI Studio window and not only over the drop zone.
/// Makes this component the default target of its area, meaning of its page, assistant, or
/// dialog: it then also takes the drops which land anywhere in that area without hitting a zone
/// of their own.
/// </summary>
[Parameter]
public bool CatchAllDocuments { get; set; }