MindWorkAI/AI-Studio
MindWorkAI/AI-Studio
1
0
Fork 0
mirror of https://github.com/MindWorkAI/AI-Studio.git synced 2025-11-23 07:50:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Enhance drag-and-drop with hover detection and logging

Browse Source
This commit is contained in:
Thorsten Sommer 2025-10-28 09:41:07 +01:00
parent a88382dc95
commit 1f82155b13
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
4 changed files with 68 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/MindWork AI Studio/Assistants/DocumentAnalysis/DocumentAnalysisAssistant.razor
View File

@ -71,6 +71,6 @@ else
</ExpansionPanel>
<ExpansionPanel HeaderIcon="@Icons.Material.Filled.DocumentScanner" HeaderText="@(T("Document analysis") + $": {this.selectedPolicy?.PolicyName}")" IsExpanded="@(this.selectedPolicy?.IsProtected ?? false)">
<AttachDocuments @bind-DocumentPaths="@this.loadedDocumentPaths"/>
<AttachDocuments Name="Document Analysis Files Drop" @bind-DocumentPaths="@this.loadedDocumentPaths"/>
</ExpansionPanel>
</MudExpansionPanels>

26
app/MindWork AI Studio/Components/AttachDocuments.razor
View File

@ -1,15 +1,15 @@
@inherits MSGComponentBase
<MudLink OnClick="@(() => this.AddFilesManually())" Style="text-decoration: none;">
<MudPaper Height="20em"
Outlined="true"
Class="@this.dragClass">
<MudText Typo="Typo.h6">
Drag and drop files here or click to attach documents.
</MudText>
@foreach (var fileInfo in this.DocumentPaths.Select(file => new FileInfo(file)))
{
<MudChip T="string" Color="Color.Dark" Text="@fileInfo.Name" tabindex="-1" />
}
</MudPaper>
</MudLink>
<div @onmouseenter="@this.OnMouseEnter" @onmouseleave="@this.OnMouseLeave">
<MudLink OnClick="@(() => this.AddFilesManually())" Style="text-decoration: none;">
<MudPaper Height="20em" Outlined="true" Class="@this.dragClass" Style="overflow-y: auto;">
<MudText Typo="Typo.h6">
@T("Drag and drop files here or click to attach documents.")
</MudText>
@foreach (var fileInfo in this.DocumentPaths.Select(file => new FileInfo(file)))
{
<MudChip T="string" Color="Color.Dark" Text="@fileInfo.Name" tabindex="-1" />
}
</MudPaper>
</MudLink>
</div>

46
app/MindWork AI Studio/Components/AttachDocuments.razor.cs
View File

@ -7,6 +7,9 @@ namespace AIStudio.Components;
public partial class AttachDocuments : MSGComponentBase
{
[Parameter]
public string Name { get; set; } = string.Empty;
[Parameter]
public HashSet<string> DocumentPaths { get; set; } = [];
@ -16,6 +19,9 @@ public partial class AttachDocuments : MSGComponentBase
[Parameter]
public Func<HashSet<string>, Task> OnChange { get; set; } = _ => Task.CompletedTask;
[Inject]
private ILogger<AttachDocuments> Logger { get; set; } = null!;
[Inject]
private RustService RustService { get; init; } = null!;
@ -32,19 +38,29 @@ public partial class AttachDocuments : MSGComponentBase
switch (triggeredEvent)
{
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_HOVERED }:
if(!this.isComponentHovered)
{
this.Logger.LogDebug("Attach documents component '{Name}' is not hovered, ignoring file drop hovered event.", this.Name);
return;
}
this.SetDragClass();
this.StateHasChanged();
break;
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_DROPPED, Payload: var paths }:
this.ClearDragClass();
if(!this.isComponentHovered)
{
this.Logger.LogDebug("Attach documents component '{Name}' is not hovered, ignoring file drop dropped event.", this.Name);
return;
}
#warning Filter unsupported files
foreach (var path in paths)
this.DocumentPaths.Add(path);
await this.DocumentPathsChanged.InvokeAsync(this.DocumentPaths);
await this.OnChange(this.DocumentPaths);
break;
case Event.TAURI_EVENT_RECEIVED when data is TauriEvent { EventType: TauriEventType.FILE_DROP_CANCELED }:
this.ClearDragClass();
this.StateHasChanged();
break;
}
}
@ -54,6 +70,8 @@ public partial class AttachDocuments : MSGComponentBase
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;
private bool isComponentHovered;
private async Task AddFilesManually()
{
@ -82,7 +100,23 @@ public partial class AttachDocuments : MSGComponentBase
await this.OnChange(this.DocumentPaths);
}
private void SetDragClass() => this.dragClass = $"{DEFAULT_DRAG_CLASS} mud-border-primary";
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 _)
{
this.Logger.LogDebug("Attach documents component '{Name}' is hovered.", this.Name);
this.isComponentHovered = true;
this.SetDragClass();
this.StateHasChanged();
}
private void OnMouseLeave(EventArgs _)
{
this.Logger.LogDebug("Attach documents component '{Name}' is no longer hovered.", this.Name);
this.isComponentHovered = false;
this.ClearDragClass();
this.StateHasChanged();
}
}

14
app/MindWork AI Studio/Tools/EventHandlers.cs Normal file
View File

@ -0,0 +1,14 @@
using Microsoft.AspNetCore.Components;
namespace AIStudio.Tools;
/// <summary>
/// Add handling for more DOM events to Blazor components.
/// </summary>
/// <remarks>
/// See https://learn.microsoft.com/en-us/aspnet/core/blazor/components/event-handling. It is important
/// that this class is named EventHandlers.
/// </remarks>
[EventHandler("onmouseenter", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
[EventHandler("onmouseleave", typeof(EventArgs), enableStopPropagation: true, enablePreventDefault: true)]
public static class EventHandlers;