| | | 1 | | @using UIBlazor.Constants |
| | | 2 | | @using UIBlazor.Models |
| | | 3 | | @using UIBlazor.Components.Chat |
| | | 4 | | |
| | | 5 | | <div class="rz-chat-message rz-chat-message-@Message.Role" @key="Message.Id"> |
| | | 6 | | <RadzenStack class="rz-chat-message-avatar" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Center" Ga |
| | | 7 | | <span class="rz-chat-avatar-initials" > |
| | 0 | 8 | | @if (Message.Role == ChatMessageRole.User) |
| | | 9 | | { |
| | 0 | 10 | | @UserAvatarText |
| | | 11 | | } |
| | 0 | 12 | | else if (Message.Role == ChatMessageRole.Assistant) |
| | | 13 | | { |
| | | 14 | | <RadzenIcon Icon="robot_2" IconStyle="IconStyle.Info" /> |
| | | 15 | | } |
| | 0 | 16 | | else if (Message.Role == ChatMessageRole.Tool) |
| | | 17 | | { |
| | | 18 | | <RadzenIcon Icon="design_services" /> |
| | | 19 | | } |
| | | 20 | | </span> |
| | | 21 | | </RadzenStack> |
| | | 22 | | <RadzenStack Orientation="Orientation.Vertical" AlignItems="@(Message.Role == ChatMessageRole.User ? AlignItems.End |
| | | 23 | | <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="@(Message.Role |
| | | 24 | | <div class="rz-chat-message-time"> |
| | 0 | 25 | | @Message.Timestamp.ToString("HH:mm") |
| | | 26 | | </div> |
| | 0 | 27 | | @if (Message.Model != null) |
| | | 28 | | { |
| | 0 | 29 | | <div class="rz-chat-message-time"> @Message.Model </div> |
| | | 30 | | } |
| | | 31 | | </RadzenStack> |
| | | 32 | | <div class="rz-chat-message-text" style="display: grid; width: 100%; position: relative;"> |
| | | 33 | | <div class="message-content-wrapper @(Message.IsExpanded ? "expanded" : "collapsed")" |
| | | 34 | | style="grid-area: 1/1; opacity: @(Message.IsEditing ? 0 : 1); visibility: @(Message.IsEditing ? "hi |
| | | 35 | | |
| | | 36 | | <AiChatMessage Message="@Message" OnToolApproval="@OnToolApproval" /> |
| | | 37 | | |
| | 0 | 38 | | @if (Message.HasPlan) |
| | | 39 | | { |
| | | 40 | | <div class="plan-box rz-p-3 rz-mt-2 rz-mb-2" style="border: 1px solid var(--rz-primary-light); b |
| | | 41 | | <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem |
| | | 42 | | <RadzenIcon Icon="assignment" IconStyle="IconStyle.Primary" /> |
| | 0 | 43 | | <RadzenText TextStyle="TextStyle.Subtitle2" Style="margin: 0; color: var(--rz-primary-li |
| | | 44 | | </RadzenStack> |
| | | 45 | | <MarkdownBlock Content="@Message.PlanContent" /> |
| | 0 | 46 | | @if (!IsLoading) |
| | | 47 | | { |
| | | 48 | | <RadzenButton Text="@SharedResource.ExecutePlan" Icon="play_arrow" ButtonStyle="ButtonSt |
| | 0 | 49 | | Click="@(() => OnExecutePlan.InvokeAsync(Message))" class="rz-mt-2" /> |
| | | 50 | | } |
| | | 51 | | </div> |
| | | 52 | | } |
| | | 53 | | </div> |
| | | 54 | | |
| | 0 | 55 | | @if (!Message.IsEditing && !Message.IsExpanded && !Message.IsStreaming) |
| | | 56 | | { |
| | | 57 | | <RadzenButton Text="@SharedResource.ShowMore" Icon="expand_more" ButtonStyle="ButtonStyle.Light" Siz |
| | 0 | 58 | | class="show-more-button rz-align-self-center" Click="@(() => Message.IsExpanded = true) |
| | | 59 | | } |
| | | 60 | | |
| | 0 | 61 | | @if (Message.IsEditing) |
| | | 62 | | { |
| | | 63 | | <div style="grid-area: 1/1; display: flex; flex-direction: column; width: 100%; height: 100%;"> |
| | | 64 | | <RadzenTextArea @bind-Value="@Message.TempContent" AutoSize="true" Style="width: 100%; min-heigh |
| | | 65 | | <RadzenStack Orientation="Orientation.Horizontal" Gap="0.5rem" JustifyContent="JustifyContent.En |
| | 0 | 66 | | <RadzenButton Icon="close" ButtonStyle="ButtonStyle.Light" Size="ButtonSize.Small" Click="@( |
| | 0 | 67 | | <RadzenButton Icon="check" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.Small" Click=" |
| | | 68 | | </RadzenStack> |
| | | 69 | | </div> |
| | | 70 | | } |
| | | 71 | | |
| | 0 | 72 | | @if (Message.IsStreaming) |
| | | 73 | | { |
| | | 74 | | <RadzenIcon Icon="more_horiz" class="rz-chat-message-streaming-icon" /> |
| | | 75 | | } |
| | | 76 | | |
| | 0 | 77 | | @if (Message.IsRetrying) |
| | | 78 | | { |
| | | 79 | | <div class="retry-countdown" style="margin-top: 0.5rem; color: var(--rz-warning); font-size: 0.85rem |
| | | 80 | | <RadzenIcon Icon="autorenew" class="rz-spin" Style="font-size: 1rem;" /> |
| | 0 | 81 | | <span>@SharedResource.RetryIn @Message.RetryCountdown... (@Message.RetryAttempt / @Message.MaxRe |
| | | 82 | | </div> |
| | | 83 | | } |
| | | 84 | | </div> |
| | | 85 | | |
| | | 86 | | <!-- Message Actions --> |
| | 0 | 87 | | @if (!Message.IsStreaming && !Message.IsEditing) |
| | | 88 | | { |
| | | 89 | | <RadzenStack Orientation="Orientation.Horizontal" JustifyContent="JustifyContent.End" Gap="0.25rem" class="r |
| | | 90 | | <RadzenButton Icon="edit" Variant="Variant.Text" ButtonStyle="ButtonStyle.Base" Size="ButtonSize.ExtraSm |
| | 0 | 91 | | Click="@(() => OnEdit.InvokeAsync(Message))" Title="@SharedResource.MessageEdit" /> |
| | | 92 | | <RadzenButton Icon="delete" Variant="Variant.Text" ButtonStyle="ButtonStyle.Base" Size="ButtonSize.Extra |
| | 0 | 93 | | Click="@(() => OnDelete.InvokeAsync(Message))" Title="@SharedResource.MessageDelete" /> |
| | 0 | 94 | | @if (!IsLoading && IsLast && Message.Role == ChatMessageRole.Assistant) |
| | | 95 | | { |
| | | 96 | | <RadzenButton Icon="refresh" Variant="Variant.Text" ButtonStyle="ButtonStyle.Base" Size="ButtonSize. |
| | | 97 | | Click="@OnRegenerate" Title="@SharedResource.MessageRegenerate" /> |
| | | 98 | | } |
| | | 99 | | </RadzenStack> |
| | | 100 | | } |
| | | 101 | | </RadzenStack> |
| | | 102 | | </div> |
| | | 103 | | |
| | | 104 | | @code { |
| | 0 | 105 | | [Parameter] public VisualChatMessage Message { get; set; } = null!; |
| | 0 | 106 | | [Parameter] public string UserAvatarText { get; set; } = "U"; // TODO сделать что-то поинтереснее |
| | 0 | 107 | | [Parameter] public bool IsLoading { get; set; } |
| | 0 | 108 | | [Parameter] public bool IsLast { get; set; } |
| | 0 | 109 | | [Parameter] public EventCallback<(string MessageId, string SegmentId, bool Approved)> OnToolApproval { get; set; } |
| | 0 | 110 | | [Parameter] public EventCallback<VisualChatMessage> OnExecutePlan { get; set; } |
| | 0 | 111 | | [Parameter] public EventCallback<VisualChatMessage> OnEdit { get; set; } |
| | 0 | 112 | | [Parameter] public EventCallback<VisualChatMessage> OnCancelEdit { get; set; } |
| | 0 | 113 | | [Parameter] public EventCallback<VisualChatMessage> OnSaveEdit { get; set; } |
| | 0 | 114 | | [Parameter] public EventCallback<VisualChatMessage> OnDelete { get; set; } |
| | 0 | 115 | | [Parameter] public EventCallback OnRegenerate { get; set; } |
| | | 116 | | |
| | | 117 | | private bool _oldIsStreaming; |
| | | 118 | | private bool _oldIsEditing; |
| | | 119 | | private bool _oldIsLast; |
| | | 120 | | private bool _oldIsLoading; |
| | | 121 | | private bool _oldIsExpanded; |
| | | 122 | | private int _oldRetryCountdown; |
| | 0 | 123 | | private string _oldContent = string.Empty; |
| | | 124 | | |
| | | 125 | | protected override bool ShouldRender() |
| | | 126 | | { |
| | 0 | 127 | | if (Message.IsStreaming || _oldIsStreaming || |
| | 0 | 128 | | Message.IsRetrying || _oldRetryCountdown != Message.RetryCountdown || |
| | 0 | 129 | | Message.IsEditing || _oldIsEditing || |
| | 0 | 130 | | IsLast || _oldIsLast != IsLast || |
| | 0 | 131 | | IsLoading || _oldIsLoading != IsLoading || |
| | 0 | 132 | | Message.IsExpanded != _oldIsExpanded || |
| | 0 | 133 | | Message.Content != _oldContent) |
| | | 134 | | { |
| | 0 | 135 | | return true; |
| | | 136 | | } |
| | | 137 | | |
| | 0 | 138 | | return false; |
| | | 139 | | } |
| | | 140 | | |
| | | 141 | | protected override void OnParametersSet() |
| | | 142 | | { |
| | 0 | 143 | | _oldIsStreaming = Message.IsStreaming; |
| | 0 | 144 | | _oldIsEditing = Message.IsEditing; |
| | 0 | 145 | | _oldIsLast = IsLast; |
| | 0 | 146 | | _oldIsLoading = IsLoading; |
| | 0 | 147 | | _oldIsExpanded = Message.IsExpanded; |
| | 0 | 148 | | _oldRetryCountdown = Message.RetryCountdown; |
| | 0 | 149 | | _oldContent = Message.Content; |
| | 0 | 150 | | } |
| | | 151 | | } |