Added an ability to: stop assistant message typing, delete last messa…

…ge of assistant and user, regenerate response message (#30) * added chat control buttons mockup * Added an ability to: stop assistant message typing, delete last message of assistant and user, regenerate response message
mnikonov · Jun 26, 2023 · a99c833 · a99c833
1 parent 9d7defb
commit a99c833
Show file tree

Hide file tree

Showing 14 changed files with 806 additions and 355 deletions.
diff --git a/src/Gpt.Labs/Controls/MessagesControl.xaml b/src/Gpt.Labs/Controls/MessagesControl.xaml
@@ -9,6 +9,11 @@
     mc:Ignorable="d">
 
     <Grid>
+
+        <Grid.Resources>
+            <ThemeShadow x:Name="SharedShadow" />
+        </Grid.Resources>
+
         <ListView x:Name="MessagesList" IsItemClickEnabled="False" Padding="0 12 0 126"
                   SelectionMode="{x:Bind ViewModel.MultiSelectModeEnabled, Converter={StaticResource ListViewSelectionModeConverter}, ConverterParameter='None', Mode=OneWay}"
                   ItemsSource="{x:Bind ViewModel.ItemsCollection, Mode=OneWay}"
@@ -41,35 +46,104 @@
             </ListView.ItemContainerStyle>
         </ListView>
 
-        <Grid VerticalAlignment="Bottom" Padding="12"
-                SizeChanged="OnMessagePanelSizeChanged">
-            <ContentControl x:Name="MessagePanel" HorizontalAlignment="Stretch" MaxWidth="800" HorizontalContentAlignment="Stretch"
-                IsEnabled="{x:Bind IsMessagePanelEnabled, Mode=OneWay}"
-                IsEnabledChanged="OnMessagePanelIsEnabledChanged">
+        <Grid VerticalAlignment="Bottom" Padding="12 2 12 12"
+              SizeChanged="OnMessagePanelSizeChanged">
+
+            <Grid.RowDefinitions>
+                <RowDefinition Height="40"></RowDefinition>
+                <RowDefinition Height="Auto"></RowDefinition>
+            </Grid.RowDefinitions>
+
+            <Grid x:Name="MessagesActions" Grid.Row="0" HorizontalAlignment="Center" Margin="0 0 0 6" Padding="2 3 4 3" CornerRadius="4"
+                  Background="{ThemeResource CardStrokeColorDefaultSolidBrush}"
+                  Shadow="{StaticResource SharedShadow}"
+                  x:Load="{x:Bind ViewModel.ItemsCollection.Count, Converter={StaticResource CountToBooleanConverter}, ConverterParameter='>', Mode=OneWay}"
+                  Translation="0 0 16">
 
-                <ContentControl.Resources>
-                    <ResourceDictionary Source="ms-appx:///Styles/CommandBarBigResources.xaml"/>
-                </ContentControl.Resources>
+                <Grid.Transitions>
+                    <TransitionCollection>
+                        <PaneThemeTransition Edge="Bottom"/>
+                    </TransitionCollection>
+                </Grid.Transitions>
+
+                <CommandBar DefaultLabelPosition="Right">
+                    <CommandBar.Resources>
+                        <ResourceDictionary Source="ms-appx:///Styles/CommandBarMediumResources.xaml"/>
+                    </CommandBar.Resources>
+
+                    <AppBarButton x:Name="StopGenerating" x:Uid="StopGenerating" Label="Stop"
+                                  x:Load="{x:Bind ViewModel.ProcessingMessage, Mode=OneWay}"
+                                  Click="{x:Bind ViewModel.CancelChatRequest}">
+                        <ToolTipService.ToolTip>
+                            <ToolTip x:Uid="StopGeneratingToolTip" Content="Stop generating response message" />
+                        </ToolTipService.ToolTip>
+
+                        <AppBarButton.Icon>
+                            <FontIcon Glyph="&#xe71a;"/>
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+
+                    <AppBarButton x:Name="DeleteLast" x:Uid="DeleteLast" Label="Delete"
+                                  x:Load="{x:Bind ViewModel.ProcessingMessage, Converter={StaticResource InvertBooleanConverter}, Mode=OneWay}"
+                                  Click="{x:Bind ViewModel.DeleteLastMessages}">                      
+                        <ToolTipService.ToolTip>
+                            <ToolTip x:Uid="DeleteLastToolTip" Content="Delete request and response messages" />
+                        </ToolTipService.ToolTip>
+
+                        <AppBarButton.Icon>
+                            <FontIcon Glyph="&#xe74d;"/>
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+
+                    <AppBarButton x:Name="RegenerateResponse" x:Uid="RegenerateResponse" Label="Regenerate"
+                                  x:Load="{x:Bind ViewModel.ProcessingMessage, Converter={StaticResource InvertBooleanConverter}, Mode=OneWay}"
+                                  Click="{x:Bind ViewModel.RegenerateResponse}">
+                        <ToolTipService.ToolTip>
+                            <ToolTip x:Uid="RegenerateResponseToolTip" Content="Regenerate response message" />
+                        </ToolTipService.ToolTip>
+
+                        <AppBarButton.Icon>
+                            <FontIcon Glyph="&#xe72c;"/>
+                        </AppBarButton.Icon>
+                    </AppBarButton>
+                </CommandBar>
+            </Grid>
+
+
+            <ContentControl x:Name="MessagePanel" Grid.Row="1" HorizontalAlignment="Stretch" MaxWidth="800" HorizontalContentAlignment="Stretch"
+                IsEnabled="{x:Bind ViewModel.ProcessingMessage, Converter={StaticResource InvertBooleanConverter}, Mode=OneWay}"
+                IsEnabledChanged="OnMessagePanelIsEnabledChanged">
+
 
-                <Grid Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}" CornerRadius="4">
+                <Grid Grid.Row="1" CornerRadius="4" Translation="0 0 32"
+                      Background="{ThemeResource CardStrokeColorDefaultSolidBrush}" 
+                      Shadow="{StaticResource SharedShadow}">
+
                     <Grid.RowDefinitions>
                         <RowDefinition Height="Auto"></RowDefinition>
                         <RowDefinition Height="50"></RowDefinition>
                     </Grid.RowDefinitions>
 
-
                     <TextBox x:Name="MessageTextBox" Grid.Row="0" Grid.RowSpan="2" TextWrapping="Wrap" AcceptsReturn="True" 
                             Padding="12 6 12 50"
                             CornerRadius="4"
                             MaxHeight="244" 
-                            MinHeight="102"
+                            MinHeight="102" 
+                            Background="{ThemeResource CardBackgroundFillColorSecondaryBrush}"
                             ScrollViewer.VerticalScrollBarVisibility="Hidden"
                             Text="{x:Bind ViewModel.Message, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
                             PreviewKeyDown="OnMessageTextBoxPreviewKeyDown"
                             PreviewKeyUp="OnMessageTextBoxPreviewKeyUp">
+                        <TextBox.Resources>
+                            <SolidColorBrush x:Key="TextControlBackgroundPointerOver" Color="{ThemeResource CardBackgroundFillColorSecondary}" />
+                        </TextBox.Resources>
                     </TextBox>
 
                     <Grid Grid.Row="1" VerticalAlignment="Bottom">
+                        <Grid.Resources>
+                            <ResourceDictionary Source="ms-appx:///Styles/CommandBarBigResources.xaml"/>
+                        </Grid.Resources>
+
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="*"></ColumnDefinition>
                             <ColumnDefinition Width="Auto"></ColumnDefinition>
@@ -164,7 +238,7 @@
                             </AppBarToggleButton>
 
                             <AppBarButton x:Name="OpenChatInNewWindow" Click="{x:Bind ViewModel.OpenChatInNewWindow}"
-                                          x:Load="{x:Bind ShowOpenNewWindowButton, Mode=OneWay}">
+                                            x:Load="{x:Bind ShowOpenNewWindowButton, Mode=OneWay}">
                                 <ToolTipService.ToolTip>
                                     <ToolTip x:Uid="OpenChatInNewWindowToolTip" Content="Open chat in new window" />
                                 </ToolTipService.ToolTip>
@@ -199,7 +273,9 @@
                         </CommandBar>
                     </Grid>
 
-                    <ProgressBar x:Name="MessageProgress" Visibility="Collapsed" IsIndeterminate="True" Grid.Row="1" Height="1" CornerRadius="4" MinHeight="1" Margin="3 0" VerticalAlignment="Bottom"></ProgressBar>
+                    <ProgressBar x:Name="MessageProgress" IsIndeterminate="True" Grid.Row="1" Height="1" CornerRadius="4" MinHeight="1" Margin="3 0" VerticalAlignment="Bottom"
+                                    Visibility="{x:Bind ViewModel.ProcessingMessage, Mode=OneWay}">
+                    </ProgressBar>
 
                 </Grid>
             </ContentControl>

diff --git a/src/Gpt.Labs/Controls/MessagesControl.xaml.cs b/src/Gpt.Labs/Controls/MessagesControl.xaml.cs
@@ -35,12 +35,6 @@ public sealed partial class MessagesControl : UserControl
             typeof(MessagesPage),
             new PropertyMetadata(true, null));
 
-        public static readonly DependencyProperty IsMessagePanelEnabledProperty = DependencyProperty.Register(
-            nameof(IsMessagePanelEnabled),
-            typeof(bool),
-            typeof(MessagesPage),
-            new PropertyMetadata(true, null));
-
         #endregion
 
         #region Public Constructors
@@ -72,12 +66,6 @@ public bool ShowOpenNewWindowButton
             set => SetValue(ShowOpenNewWindowButtonProperty, value);
         }
 
-        public bool IsMessagePanelEnabled
-        {
-            get => (bool)GetValue(IsMessagePanelEnabledProperty);
-            set => SetValue(IsMessagePanelEnabledProperty, value);
-        }
-
         #endregion
 
         #region Private Methods
@@ -98,7 +86,7 @@ private async void OnMessageTextBoxPreviewKeyDown(object sender, KeyRoutedEventA
                         e.Handled = true;
                         return;
 
-                    case VirtualKey.S:
+                    case VirtualKey.I:
                         ViewModel.ExpandCollapsePanel(ChatPanelTypes.ChatSettings);
                         e.Handled = true;
                         return;
@@ -108,7 +96,7 @@ private async void OnMessageTextBoxPreviewKeyDown(object sender, KeyRoutedEventA
                         e.Handled = true;
                         return;
 
-                    case VirtualKey.D:
+                    case VirtualKey.Delete:
                         await this.DeleteChats();
                         e.Handled = true;
                         return;
@@ -119,16 +107,26 @@ private async void OnMessageTextBoxPreviewKeyDown(object sender, KeyRoutedEventA
                         e.Handled = true;
                         return;
 
-                    case VirtualKey.E:
+                    case VirtualKey.H:
                         var shareMessages = this.MessagesList.SelectedItems.OfType<OpenAIMessage>().ToArray();
                         this.ViewModel.ShareMessages(shareMessages);
                         e.Handled = true;
                         return;
 
-                    case VirtualKey.W:
+                    case VirtualKey.N:
                         await ViewModel.OpenChatInNewWindow();
                         e.Handled = true;
                         return;
+
+                    case VirtualKey.G:
+                        await ViewModel.RegenerateResponse();
+                        e.Handled = true;
+                        return;
+
+                    case VirtualKey.D:
+                        await ViewModel.DeleteLastMessages();
+                        e.Handled = true;
+                        return;
                 }
             }
 
@@ -239,40 +237,12 @@ private void ChangeSelectMuliState()
 
         private async Task SendChatMessage()
         {
-            try
-            {
-                this.MessageProgress.Visibility = Visibility.Visible;
-                this.IsMessagePanelEnabled = false;
-
-                await ViewModel.SendMessage();
-            }
-            finally
-            {
-                await this.DispatcherQueue.EnqueueAsync(() =>
-                {
-                    this.MessageProgress.Visibility = Visibility.Collapsed;
-                    this.IsMessagePanelEnabled = true;
-                });
-            }
+            await ViewModel.SendMessage();
         }
 
         private async Task CreateImageVariation()
         {
-            try
-            {
-                this.MessageProgress.Visibility = Visibility.Visible;
-                this.IsMessagePanelEnabled = false;
-
-                await ViewModel.CreateImageVariation();
-            }
-            finally
-            {
-                await this.DispatcherQueue.EnqueueAsync(() =>
-                {
-                    this.MessageProgress.Visibility = Visibility.Collapsed;
-                    this.IsMessagePanelEnabled = true;
-                });
-            }
+            await ViewModel.CreateImageVariation();
         }
 
         private async Task DeleteChats()
@@ -284,7 +254,7 @@ private async Task DeleteChats()
                 return;
             }
 
-            await this.ViewModel.DeleteMessages(messages);
+            await this.ViewModel.DeleteMessages(true, messages);
 
             if (this.ViewModel.MultiSelectModeEnabled && this.ViewModel.ItemsCollection.Count == 0)
             {

diff --git a/src/Gpt.Labs/Controls/OpenAiMessageControl.cs b/src/Gpt.Labs/Controls/OpenAiMessageControl.cs
@@ -118,7 +118,7 @@ private void OnShareButtonClick(object sender, RoutedEventArgs e)
 
         private async void OnDeleteButtonClick(object sender, RoutedEventArgs e)
         {
-            await this.ParentViewViewModel.DeleteMessages(this.ViewModel);
+            await this.ParentViewViewModel.DeleteMessages(true, this.ViewModel);
         }
 
         private async void OnMarkdownTextBlockLinkClicked(object sender, LinkClickedEventArgs e)

diff --git a/src/Gpt.Labs/MessagesPage.xaml b/src/Gpt.Labs/MessagesPage.xaml
@@ -23,7 +23,7 @@
 
             <controls:MessagesControl x:Name="Messages"
                 ViewModel="{x:Bind ViewModel.Result, Mode=OneWay}"
-                IsMessagePanelEnabled="{x:Bind ViewModel.IsCompleted, Mode=OneWay}">
+                IsEnabled="{x:Bind ViewModel.IsCompleted, Mode=OneWay}">
             </controls:MessagesControl>
         </Border>
 

diff --git a/src/Gpt.Labs/Models/Extensions/OpenAiChatSettingsExtensions.cs b/src/Gpt.Labs/Models/Extensions/OpenAiChatSettingsExtensions.cs
@@ -1,15 +1,13 @@
-using Gpt.Labs.Models.Enums;
-using OpenAI.Chat;
+using OpenAI.Chat;
 using OpenAI.Models;
 using System.Collections.Generic;
-using System.Collections.ObjectModel;
 using System.Linq;
 
 namespace Gpt.Labs.Models.Extensions
 {
     public static class OpenAiChatSettingsExtensions
     {
-        public static ChatRequest ToChatRequest(this OpenAIChatSettings settings, ICollection<OpenAIMessage> allMessages, string userMessage)
+        public static ChatRequest ToChatRequest(this OpenAIChatSettings settings, ICollection<OpenAIMessage> allMessages, OpenAIMessage userMessage)
         {
             var messages = new List<Message>
             {
@@ -18,7 +16,7 @@ public static ChatRequest ToChatRequest(this OpenAIChatSettings settings, IColle
 
             var messagesToAdd = allMessages.Skip(allMessages.Count - settings.LastNMessagesToInclude).Select(p => p.ToChatRequestMessage());
             messages.AddRange(messagesToAdd);
-            messages.Add(new Message(Role.User, userMessage));
+            messages.Add(new Message(Role.User, userMessage.Content));
 
             return new ChatRequest(
                 messages, 

diff --git a/src/Gpt.Labs/Models/Extensions/OpenAiImageSettingsExtensions.cs b/src/Gpt.Labs/Models/Extensions/OpenAiImageSettingsExtensions.cs
@@ -6,10 +6,10 @@ namespace Gpt.Labs.Models.Extensions
 {
     public static class OpenAiImageSettingsExtensions
     {
-        public static ImageGenerationRequest ToImageGenerationRequest(this OpenAIImageSettings settings, string userMessage)
+        public static ImageGenerationRequest ToImageGenerationRequest(this OpenAIImageSettings settings, OpenAIMessage userMessage)
         {
             return new ImageGenerationRequest(
-                userMessage, 
+                userMessage.Content, 
                 settings.N,
                 settings.Size.ConvertImageType(),
                 settings.User,

diff --git a/src/Gpt.Labs/SingleChatPage.xaml b/src/Gpt.Labs/SingleChatPage.xaml
@@ -9,7 +9,7 @@
 
     <controls:MessagesControl x:Name="Messages"
         ViewModel="{x:Bind ViewModel.Result, Mode=OneWay}"
-        IsMessagePanelEnabled="{x:Bind ViewModel.IsCompleted, Mode=OneWay}"
+        IsEnabled="{x:Bind ViewModel.IsCompleted, Mode=OneWay}"
         ShowSettingsButton="False"
         ShowOpenNewWindowButton="False">
     </controls:MessagesControl>