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

@inherits MSGComponentBase

<MudDialog>
    <DialogContent>
        @* A drop anywhere in this dialog belongs to the dialog, not to the page behind it: *@
        <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.CanAttach)
        {
            <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.")
            </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"
                AdornmentIcon="@Icons.Material.Filled.FileOpen"
                Adornment="Adornment.Start"
                Immediate="@true"
                Label="@T("File Path")"
                Variant="Variant.Outlined"
                Lines="1"
                MaxLines="3"
                Class="mt-10"
                ReadOnly="true"
                />
        }
        
        @* 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.")
            </MudAlert>
        }
        else if (this.isLoadingContent)
        {
            <MudJustifiedText Typo="Typo.body1" Class="my-3">
                @T("Please wait while we load the content of your file. Depending on the file type and size, this may take a moment.")
            </MudJustifiedText>
            <MudSkeleton Width="30%" Height="42px"/>
            <MudSkeleton Width="80%"/>
            <MudSkeleton Width="100%"/>
            <MudSkeleton Width="90%"/>
        }
        else if (this.loadFailureMessage is not null)
        {
            <MudAlert Severity="Severity.Error" Variant="Variant.Filled" Class="my-2">
                @this.loadFailureMessage
            </MudAlert>
        }
        else
        {
            @if (this.previewCutOffCharacters > 0)
            {
                <MudAlert Severity="Severity.Info" Variant="Variant.Outlined" Class="my-2">
                    @string.Format(T("Your document is large, so we show you only its beginning. We hide the remaining {0:N0} characters here. Rest assured: the AI still receives your entire document."), this.previewCutOffCharacters)
                </MudAlert>
            }
            
            @* Keyed by the document: a switch from an image to a text file changes which panels
               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"/>
                    </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.previewContent" Props="Markdown.DefaultConfig" Styling="@this.MarkdownStyling" MarkdownPipeline="Markdown.SAFE_MARKDOWN_PIPELINE"/>
                            </div>
                        </MudField>
                    </MudTabPanel>
                    <MudTabPanel Text="@T("Simple View")" Icon="@Icons.Material.Filled.Terminal">
                        <MudTextField
                            T="string"
                            Text="@this.previewContent"
                            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>
        }
        </div>
        </PathDropZone>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="@this.Close" Variant="Variant.Filled" Color="Color.Primary">
            @T("Close")
        </MudButton>
    </DialogActions>
</MudDialog>