Allow image previews

This commit is contained in:
Thorsten Sommer 2025-12-30 14:15:13 +01:00
parent 17b5d91a3d
commit 6cf14a57c7
Signed by: tsommer
GPG Key ID: 371BBA77A02C0108
4 changed files with 59 additions and 42 deletions

View File

@ -35,6 +35,11 @@ public record FileAttachment(FileAttachmentType Type, string FileName, string Fi
/// </remarks>
public bool IsImage { get; } = Type == FileAttachmentType.IMAGE;
/// <summary>
/// Gets the file path formatted as a file URL (file:///).
/// </summary>
public string FilePathAsUrl { get; } = $"file:///{FilePath.Replace('\\', '/')}";
/// <summary>
/// Gets a value indicating whether the file still exists on the file system.
/// </summary>

View File

@ -219,7 +219,7 @@ public partial class AttachDocuments : MSGComponentBase
{
var dialogParameters = new DialogParameters<DocumentCheckDialog>
{
{ x => x.FilePath, fileAttachment.FilePath },
{ x => x.Document, fileAttachment },
};
await this.DialogService.ShowAsync<DocumentCheckDialog>(T("Document Preview"), dialogParameters, DialogOptions.FULLSCREEN);

View File

@ -6,7 +6,7 @@
@T("See how we load your file. Review the content before we process it further.")
</MudJustifiedText>
@if (string.IsNullOrWhiteSpace(this.FilePath))
@if (this.Document is null)
{
<ReadFileContent Text="@T("Load file")" @bind-FileContent="@this.FileContent"/>
}
@ -14,7 +14,7 @@
{
<MudTextField
T="string"
@bind-Text="@this.FilePath"
Text="@this.Document.FilePath"
AdornmentIcon="@Icons.Material.Filled.FileOpen"
Adornment="Adornment.Start"
Immediate="@true"
@ -28,37 +28,45 @@
}
<MudTabs Elevation="0" Rounded="true" ApplyEffectsToContainer="true" Outlined="true" PanelClass="pa-2" Class="mb-2">
<MudTabPanel Text="@T("Markdown View")" Icon="@Icons.Material.Filled.TextSnippet">
<MudField
Variant="Variant.Outlined"
AdornmentIcon="@Icons.Material.Filled.Article"
Adornment="Adornment.Start"
Label="@T("Loaded Content")"
FullWidth="true"
Class="ma-2 pe-4"
HelperText="@T("This is the content we loaded from your file — including headings, lists, and formatting. Use this to verify your file loads as expected.")"
>
<div style="max-height: 40vh; overflow-y: auto;">
<MudMarkdown Value="@this.FileContent" Props="Markdown.DefaultConfig" Styling="@this.MarkdownStyling"/>
</div>
</MudField>
</MudTabPanel>
<MudTabPanel Text="@T("Simple View")" Icon="@Icons.Material.Filled.Terminal">
<MudTextField
T="string"
@bind-Text="@this.FileContent"
AdornmentIcon="@Icons.Material.Filled.Article"
Adornment="Adornment.Start"
Immediate="@true"
Label="@T("Loaded Content")"
Variant="Variant.Outlined"
Lines="6"
AutoGrow="@true"
MaxLines="25"
ReadOnly="true"
Class="ma-2"
HelperText="@T("This is the content we loaded from your file — including headings, lists, and formatting. Use this to verify your file loads as expected.")"/>
</MudTabPanel>
@if (this.Document?.IsImage ?? false)
{
<MudTabPanel Text="@T("Image View")" Icon="@Icons.Material.Filled.Image">
<MudImage ObjectFit="ObjectFit.ScaleDown" Src="@this.Document.FilePathAsUrl"/>
</MudTabPanel>
}
else
{
<MudTabPanel Text="@T("Markdown View")" Icon="@Icons.Material.Filled.TextSnippet">
<MudField
Variant="Variant.Outlined"
AdornmentIcon="@Icons.Material.Filled.Article"
Adornment="Adornment.Start"
Label="@T("Loaded Content")"
FullWidth="true"
Class="ma-2 pe-4"
HelperText="@T("This is the content we loaded from your file — including headings, lists, and formatting. Use this to verify your file loads as expected.")">
<div style="max-height: 40vh; overflow-y: auto;">
<MudMarkdown Value="@this.FileContent" Props="Markdown.DefaultConfig" Styling="@this.MarkdownStyling"/>
</div>
</MudField>
</MudTabPanel>
<MudTabPanel Text="@T("Simple View")" Icon="@Icons.Material.Filled.Terminal">
<MudTextField
T="string"
@bind-Text="@this.FileContent"
AdornmentIcon="@Icons.Material.Filled.Article"
Adornment="Adornment.Start"
Immediate="@true"
Label="@T("Loaded Content")"
Variant="Variant.Outlined"
Lines="6"
AutoGrow="@true"
MaxLines="25"
ReadOnly="true"
Class="ma-2"
HelperText="@T("This is the content we loaded from your file — including headings, lists, and formatting. Use this to verify your file loads as expected.")"/>
</MudTabPanel>
}
</MudTabs>
</DialogContent>

View File

@ -1,4 +1,5 @@
using AIStudio.Components;
using AIStudio.Chat;
using AIStudio.Components;
using AIStudio.Tools.Services;
using Microsoft.AspNetCore.Components;
@ -13,7 +14,7 @@ public partial class DocumentCheckDialog : MSGComponentBase
private IMudDialogInstance MudDialog { get; set; } = null!;
[Parameter]
public string FilePath { get; set; } = string.Empty;
public FileAttachment? Document { get; set; }
private void Close() => this.MudDialog.Cancel();
@ -31,23 +32,26 @@ public partial class DocumentCheckDialog : MSGComponentBase
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender && !string.IsNullOrWhiteSpace(this.FilePath))
if (firstRender && this.Document is not null)
{
try
{
var fileContent = await UserFile.LoadFileData(this.FilePath, this.RustService, this.DialogService);
this.FileContent = fileContent;
this.StateHasChanged();
if (!this.Document.IsImage)
{
var fileContent = await UserFile.LoadFileData(this.Document.FilePath, this.RustService, this.DialogService);
this.FileContent = fileContent;
this.StateHasChanged();
}
}
catch (Exception ex)
{
this.Logger.LogError(ex, "Failed to load file content from '{FilePath}'", this.FilePath);
this.Logger.LogError(ex, "Failed to load file content from '{FilePath}'", this.Document);
this.FileContent = string.Empty;
this.StateHasChanged();
}
}
else if (firstRender)
this.Logger.LogWarning("Document check dialog opened without a valid file path");
this.Logger.LogWarning("Document check dialog opened without a valid file path.");
}
private CodeBlockTheme CodeColorPalette => this.SettingsManager.IsDarkMode ? CodeBlockTheme.Dark : CodeBlockTheme.Default;