AI-Studio/app/MindWork AI Studio/Chat/ContentBlockComponent.razor

@using AIStudio.Tools
@using MudBlazor

<MudCard Class="@this.CardClasses" Outlined="@true">
    <MudCardHeader>
        <CardHeaderAvatar>
            <MudAvatar Color="@this.Role.ToColor()">
                <MudIcon Icon="@this.Role.ToIcon()"/>
            </MudAvatar>
        </CardHeaderAvatar>
        <CardHeaderContent>
            <MudText Typo="Typo.body1">@this.Role.ToName() (@this.Time)</MudText>
        </CardHeaderContent>
        <CardHeaderActions>
            @if (this.IsSecondToLastBlock && this.Role is ChatRole.USER && this.EditLastUserBlockFunc is not null)
            {
                <MudTooltip Text="Edit" Placement="Placement.Bottom">
                    <MudIconButton Icon="@Icons.Material.Filled.Edit" Color="Color.Default" OnClick="@this.EditLastUserBlock"/>
                </MudTooltip>
            }
            @if (this.IsLastContentBlock && this.Role is ChatRole.USER && this.EditLastBlockFunc is not null)
            {
                <MudTooltip Text="Edit" Placement="Placement.Bottom">
                    <MudIconButton Icon="@Icons.Material.Filled.Edit" Color="Color.Default" OnClick="@this.EditLastBlock"/>
                </MudTooltip>
            }
            @if (this.IsLastContentBlock && this.Role is ChatRole.AI && this.RegenerateFunc is not null)
            {
                <MudTooltip Text="Regenerate" Placement="Placement.Bottom">
                    <MudIconButton Icon="@Icons.Material.Filled.Recycling" Color="Color.Default" OnClick="@this.RegenerateBlock"/>
                </MudTooltip>
            }
            @if (this.RemoveBlockFunc is not null)
            {
                <MudTooltip Text="Removes this block" Placement="Placement.Bottom">
                    <MudIconButton Icon="@Icons.Material.Filled.Delete" Color="Color.Error" OnClick="@this.RemoveBlock"/>
                </MudTooltip>
            }
            <MudTooltip Text="Copies the content to the clipboard" Placement="Placement.Bottom">
                <MudIconButton Icon="@Icons.Material.Filled.ContentCopy" Color="Color.Default" OnClick="@this.CopyToClipboard"/>
            </MudTooltip>
        </CardHeaderActions>
    </MudCardHeader>
    <MudCardContent>
        @if (!this.HideContent)
        {
            if (this.Content.IsStreaming)
            {
                <MudProgressLinear Color="Color.Primary" Indeterminate="true" Class="mb-6" />
            }
            
            switch (this.Type)
            {
                case ContentType.TEXT:
                    if (this.Content is ContentText textContent)
                    {
                        if (textContent.InitialRemoteWait)
                        {
                            <MudSkeleton Width="30%" Height="42px;"/>
                            <MudSkeleton Width="80%"/>
                            <MudSkeleton Width="100%"/>
                        }
                        else
                        {
                            @if (this.Content.IsStreaming)
                            {
                                <MudText Typo="Typo.body1" Style="white-space: pre-wrap;">
                                    @textContent.Text
                                </MudText>
                            }
                            else
                            {
                                <MudMarkdown Value="@textContent.Text" OverrideHeaderTypo="@Markdown.OverrideHeaderTypo" CodeBlockTheme="@this.CodeColorPalette"/>
                            }
                        }
                    }

                    break;

                case ContentType.IMAGE:
                    if (this.Content is ContentImage imageContent)
                    {
                        <MudImage Src="@imageContent.URL"/>
                    }

                    break;

                default:
                    <MudText Typo="Typo.body2">
                        Cannot render content of type @this.Type yet.
                    </MudText>
                    break;
            }
        }
    </MudCardContent>
</MudCard>