AI-Studio/app/MindWork AI Studio/Dialogs/ReviewAttachmentsDialog.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="review-attachments"
                      OnPathsDropped="@this.DropCallback"
                      Disabled="@this.IsZoneDisabled"
                      Context="isDropTarget">
        <MudJustifiedText Typo="Typo.body1" Class="mb-3">
            @T("Here you can see all attached files. Files that can no longer be found (deleted, renamed, or moved) are marked with a warning icon and a strikethrough name. You can remove any attachment using the trash can icon.")
        </MudJustifiedText>

        @if (this.CanAttach)
        {
            <MudJustifiedText Typo="Typo.body1" Class="mb-3">
                @T("You can drag more files into this window to attach them right away.")
            </MudJustifiedText>
        }

        <MudDivider Class="mt-3 mb-3"/>

        <div class="@this.AttachmentListClass(isDropTarget)" style="max-height: 50vh; overflow-y: auto; overflow-x: hidden;">
            @if (!this.DocumentPaths.Any())
            {
                <MudJustifiedText Typo="Typo.body1" Class="mt-3">
                    @T("There aren't any file attachments available right now.")
                </MudJustifiedText>
            }

            @{
                var currentFolder = string.Empty;
                foreach (var fileAttachment in this.OrderedAttachments)
                {
                    var folderPath = Path.GetDirectoryName(fileAttachment.FilePath);
                    if (folderPath != currentFolder)
                    {
                        currentFolder = folderPath;
                        <MudStack Row="true" AlignItems="AlignItems.Center" Class="mt-6 mb-3">
                            <MudIcon Icon="@Icons.Material.Filled.Folder" Class="mr-2" />
                            <MudText Typo="Typo.h6">
                                @folderPath:
                            </MudText>
                        </MudStack>
                    }

                    @if (fileAttachment.Exists)
                    {
                        <MudStack Row Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="ms-3 mb-2">
                            <div style="min-width: 0; flex: 1; overflow: hidden;">
                                <MudTooltip Text="@T("Your attached file.")" Placement="Placement.Bottom">
                                    <span class="d-inline-flex align-items-center" style="overflow: hidden; width: 100%;">
                                        <MudIcon Icon="@Icons.Material.Filled.AttachFile" Class="mr-2" Style="flex-shrink: 0;"/>
                                        <MudText Style="white-space: nowrap;">
                                            @fileAttachment.FileName
                                        </MudText>
                                    </span>
                                </MudTooltip>
                            </div>

                            <MudToolBar WrapContent="true" Gutters="false" Class="ml-2" Style="flex-shrink: 0; min-height: 1em;">
                                <MudTooltip Text="@T("Preview what we send to the AI.")" Placement="Placement.Bottom">
                                    <MudIconButton Icon="@Icons.Material.Filled.Search"
                                                   Color="Color.Primary"
                                                   OnClick="@(() => this.InvestigateFile(fileAttachment))"/>
                                </MudTooltip>
                            
                                <MudTooltip Text="@T("Remove this attachment.")" Placement="Placement.Bottom">
                                    <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                                   Color="Color.Error"
                                                   OnClick="@(() => this.DeleteAttachment(fileAttachment))"/>
                                </MudTooltip>
                            </MudToolBar>
                        </MudStack>
                    }
                    else
                    {
                        <MudStack Row Justify="Justify.SpaceBetween" AlignItems="AlignItems.Center" Class="ms-3">
                            <div style="min-width: 0; flex: 1; overflow: hidden;">
                                <MudTooltip Text="@T("The file was deleted, renamed, or moved.")" Placement="Placement.Bottom">
                                    <span class="d-inline-flex align-items-center" style="overflow: hidden; width: 100%;">
                                        <MudIcon Icon="@Icons.Material.Filled.Report" Color="Color.Error" Class="mr-2" Style="flex-shrink: 0;"/>
                                        <MudText Style="white-space: nowrap;">
                                            <s>@fileAttachment.FileName</s>
                                        </MudText>
                                    </span>
                                </MudTooltip>
                            </div>

                            <MudToolBar WrapContent="true" Gutters="false" Class="ml-2" Style="flex-shrink: 0; min-height: 1em;">
                                <MudIconButton Icon="@Icons.Material.Filled.Search"
                                               Color="Color.Primary"
                                               Disabled="true"/>
                            
                                <MudTooltip Text="@T("Remove this attachment.")" Placement="Placement.Bottom">
                                    <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                                   Color="Color.Error"
                                                   OnClick="@(() => this.DeleteAttachment(fileAttachment))"/>
                                </MudTooltip>
                            </MudToolBar>
                        </MudStack>
                    }
                }
            }
        </div>
        </PathDropZone>
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="@this.Close" Variant="Variant.Filled" Color="Color.Primary">
            @T("Close")
        </MudButton>
    </DialogActions>
</MudDialog>