AI-Studio/app/MindWork AI Studio/Components/ChatComponent.razor

@using AIStudio.Settings.DataModel
@using AIStudio.Chat

@inherits MSGComponentBase

<InnerScrolling FillEntireHorizontalSpace="@true" @ref="@this.scrollingArea" MinWidth="36em" Style="height: 100%">
    <ChildContent>
        @if (this.ChatThread is not null)
        {
            var blocks = this.ChatThread.Blocks.OrderBy(n => n.Time).ToList();
            for (var i = 0; i < blocks.Count; i++)
            {
                var block = blocks[i];
                var isLastBlock = i == blocks.Count - 1;
                var isSecondLastBlock = i == blocks.Count - 2;
                @if (block is { HideFromUser: false, Content: not null })
                {
                    <ContentBlockComponent
                        @key="@block"
                        Role="@block.Role"
                        Type="@block.ContentType"
                        Time="@block.Time"
                        Content="@block.Content"
                        RemoveBlockFunc="@this.RemoveBlock"
                        IsLastContentBlock="@isLastBlock"
                        IsSecondToLastBlock="@isSecondLastBlock"
                        RegenerateFunc="@this.RegenerateBlock"
                        RegenerateEnabled="@(() => this.IsProviderSelected && this.ChatThread.IsLLMProviderAllowed(this.Provider))"
                        EditLastBlockFunc="@this.EditLastBlock"
                        EditLastUserBlockFunc="@this.EditLastUserBlock"/>
                }
            }
        }
    </ChildContent>
    <FooterContent>
        <MudElement Style="flex: 0 0 auto;">
            <MudTextField
                T="string"
                @ref="@this.inputField"
                @bind-Text="@this.UserInput"
                Variant="Variant.Outlined"
                AutoGrow="@true"
                Lines="3"
                MaxLines="12"
                Label="@this.InputLabel"
                Placeholder="@this.ProviderPlaceholder"
                Adornment="Adornment.End"
                AdornmentIcon="@Icons.Material.Filled.Send"
                OnAdornmentClick="() => this.SendMessage()"
                Disabled="@this.IsInputForbidden()"
                Immediate="@true"
                OnKeyUp="@this.InputKeyEvent"
                UserAttributes="@USER_INPUT_ATTRIBUTES"
                Class="@this.UserInputClass"
                Style="@this.UserInputStyle"/>
        </MudElement>
        <MudToolBar WrapContent="true" Gutters="@false" Class="border border-solid rounded" Style="border-color: lightgrey; gap: 2px;">
            
            @if (
                this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is not WorkspaceStorageBehavior.DISABLE_WORKSPACES
                && this.SettingsManager.ConfigurationData.Workspace.DisplayBehavior is WorkspaceDisplayBehavior.TOGGLE_OVERLAY)
            {
                <MudTooltip Text="@T("Show your workspaces")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                    <MudIconButton Icon="@Icons.Material.Filled.SnippetFolder" OnClick="@(() => this.ToggleWorkspaceOverlay())"/>
                </MudTooltip>
            }

            @if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is WorkspaceStorageBehavior.STORE_CHATS_MANUALLY)
            {
                <MudTooltip Text="@T("Save chat")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                    <MudIconButton Icon="@Icons.Material.Filled.Save" OnClick="@(() => this.SaveThread())" Disabled="@(!this.CanThreadBeSaved || this.IsCurrentChatStreaming)"/>
                </MudTooltip>
            }

            <MudTooltip Text="@T("Start temporary chat")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                <MudIconButton Icon="@Icons.Material.Filled.AddComment" OnClick="@(() => this.StartNewChat(useSameWorkspace: false))"/>
            </MudTooltip>

            @if (!string.IsNullOrWhiteSpace(this.currentWorkspaceName))
            {
                <MudTooltip Text="@this.TooltipAddChatToWorkspace" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                    <MudIconButton Icon="@Icons.Material.Filled.CommentBank" OnClick="@(() => this.StartNewChat(useSameWorkspace: true))"/>
                </MudTooltip>
            }

            <ChatTemplateSelection MarginLeft="" CanChatThreadBeUsedForTemplate="@this.CanThreadBeSaved" CurrentChatThread="@this.ChatThread" CurrentChatTemplate="@this.currentChatTemplate" CurrentChatTemplateChanged="@this.ChatTemplateWasChanged"/>
            

            @if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is WorkspaceStorageBehavior.STORE_CHATS_AUTOMATICALLY)
            {
                <MudTooltip Text="@T("Delete this chat & start a new one.")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                    <MudIconButton Icon="@Icons.Material.Filled.Refresh" OnClick="@(() => this.StartNewChat(useSameWorkspace: true, deletePreviousChat: true))" Disabled="@(!this.CanThreadBeSaved || this.IsCurrentChatStreaming)"/>
                </MudTooltip>
            }

            @if (this.SettingsManager.ConfigurationData.Workspace.StorageBehavior is not WorkspaceStorageBehavior.DISABLE_WORKSPACES)
            {
                <MudTooltip Text="@T("Move the chat to a workspace, or to another if it is already in one.")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                    <MudIconButton Icon="@Icons.Material.Filled.MoveToInbox" Disabled="@(!this.CanThreadBeSaved || this.IsCurrentChatStreaming)" OnClick="@this.MoveChatToWorkspace"/>
                </MudTooltip>
            }
            
            <AttachDocuments Name="File Attachments" Layer="@DropLayers.PAGES" DocumentPaths="@this.ComposerState.FileAttachments" DocumentPathsChanged="@this.ComposerAttachmentsChanged" CatchAllDocuments="true" UseSmallForm="true" Provider="@this.Provider"/>
            
            <MudDivider Vertical="true" Style="height: 24px; align-self: center;"/>
            
            <MudTooltip Text="@T("Bold")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                <MudIconButton Icon="@Icons.Material.Filled.FormatBold" OnClick="@(() => this.ApplyMarkdownFormat(MARKDOWN_BOLD))" Disabled="@this.IsInputForbidden()"/>
            </MudTooltip>
            <MudTooltip Text="@T("Italic")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                <MudIconButton Icon="@Icons.Material.Filled.FormatItalic" OnClick="@(() => this.ApplyMarkdownFormat(MARKDOWN_ITALIC))" Disabled="@this.IsInputForbidden()"/>
            </MudTooltip>
            <MudTooltip Text="@T("Heading")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                <MudIconButton Icon="@Icons.Material.Filled.TextFields" OnClick="@(() => this.ApplyMarkdownFormat(MARKDOWN_HEADING))" Disabled="@this.IsInputForbidden()"/>
            </MudTooltip>
            <MudTooltip Text="@T("Bulleted List")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                <MudIconButton Icon="@Icons.Material.Filled.FormatListBulleted" OnClick="@(() => this.ApplyMarkdownFormat(MARKDOWN_BULLET_LIST))" Disabled="@this.IsInputForbidden()"/>
            </MudTooltip>
            <MudTooltip Text="@T("Code")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                <MudIconButton Icon="@Icons.Material.Filled.Code" OnClick="@(() => this.ApplyMarkdownFormat(MARKDOWN_CODE))" Disabled="@this.IsInputForbidden()"/>
            </MudTooltip>
            
            <MudDivider Vertical="true" Style="height: 24px; align-self: center;"/>
            
            <ProfileSelection MarginLeft="" CurrentProfile="@this.currentProfile" CurrentProfileChanged="@this.ProfileWasChanged" Disabled="@(!this.currentChatTemplate.AllowProfileUsage)" DisabledText="@T("Profile usage is disabled according to your chat template settings.")"/>

            <ToolSelection Component="Components.CHAT" LLMProvider="@this.Provider" SelectedToolIds="@this.selectedToolIds" SelectedToolIdsChanged="@this.SelectedToolIdsChanged" Disabled="@this.isStreaming" />
            
            @if (PreviewFeatures.PRE_RAG_2024.IsEnabled(this.SettingsManager))
            {
                <DataSourceSelection @ref="@this.dataSourceSelectionComponent" PopoverTriggerMode="PopoverTriggerMode.BUTTON" LLMProvider="@this.Provider" DataSourceOptions="@this.GetCurrentDataSourceOptions()" DataSourceOptionsChanged="@(async options => await this.SetCurrentDataSourceOptions(options))" DataSourcesAISelected="@this.GetAgentSelectedDataSources()"/>
            }
            
            @if (this.SettingsManager.ConfigurationData.LLMProviders.ShowProviderConfidence)
            {
                <ConfidenceInfo Mode="PopoverTriggerMode.ICON" LLMProvider="@this.Provider.UsedLLMProvider"/>
            }

            @if (this.IsCurrentChatStreaming)
            {
                <MudTooltip Text="@T("Stop generation")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                    <MudIconButton Icon="@Icons.Material.Filled.Stop" Color="Color.Error" OnClick="@this.CancelStreaming"/>
                </MudTooltip>
            }

            @if (!this.ChatThread.IsLLMProviderAllowed(this.Provider))
            {
                <MudTooltip Text="@T("The selected provider is not allowed in this chat due to data security reasons.")" Placement="@TOOLBAR_TOOLTIP_PLACEMENT">
                    <MudIconButton Icon="@Icons.Material.Filled.Error" Color="Color.Error"/>
                </MudTooltip>
            }
            
            <MudSpacer />
            <HalluzinationReminder ContainerClass="my-0 ml-2 me-2"/>
        </MudToolBar>
    </FooterContent>
</InnerScrolling>