Update TerminalChat UX to be a "sidecar" experience

src/cascadia/QueryExtension/ExtensionPalette.cpp

@@ -89,7 +89,7 @@ namespace winrt::Microsoft::Terminal::Query::Extension::implementation
             }
             else
             {
-                _close();
+                _closeChat(nullptr, nullptr);
             }
         });
     }
@@ -214,7 +214,6 @@ namespace winrt::Microsoft::Terminal::Query::Extension::implementation
                 pos += 1; // Move past the replaced character
             }
             _InputSuggestionRequestedHandlers(*this, winrt::to_hstring(suggestion));
-            _close();
 
             const auto lmProviderName = _lmProvider ? _lmProvider.BrandingData().Name() : winrt::hstring{};
             TraceLoggingWrite(
@@ -246,7 +245,6 @@ namespace winrt::Microsoft::Terminal::Query::Extension::implementation
 
     void ExtensionPalette::_setFocusAndPlaceholderTextHelper()
     {
-        // We are visible, set the placeholder text so the user knows what the shell context is
         _ActiveControlInfoRequestedHandlers(nullptr, nullptr);
 
         // Now that we have the context, make sure the lmProvider knows it too
@@ -300,74 +298,25 @@ namespace winrt::Microsoft::Terminal::Query::Extension::implementation
         }
     }
 
-    // Method Description:
-    // - This event is triggered when someone clicks anywhere in the bounds of
-    //   the window that's _not_ the query palette UI. When that happens,
-    //   we'll want to dismiss the palette.
-    // Arguments:
-    // - <unused>
-    // Return Value:
-    // - <none>
-    void ExtensionPalette::_rootPointerPressed(const Windows::Foundation::IInspectable& /*sender*/,
-                                               const Windows::UI::Xaml::Input::PointerRoutedEventArgs& /*e*/)
+    void ExtensionPalette::_closeChat(const Windows::Foundation::IInspectable& /*sender*/,
+                                      const Windows::UI::Xaml::RoutedEventArgs& /*args*/)
     {
-        if (Visibility() != Visibility::Collapsed)
-        {
-            _close();
-        }
+        Visibility(Visibility::Collapsed);
     }
 
     void ExtensionPalette::_backdropPointerPressed(const Windows::Foundation::IInspectable& /*sender*/,
                                                    const Windows::UI::Xaml::Input::PointerRoutedEventArgs& e)
     {
+        _setFocusAndPlaceholderTextHelper();
         e.Handled(true);
     }
 
-    // Method Description:
-    // - The purpose of this event handler is to hide the palette if it loses focus.
-    // We say we lost focus if our root element and all its descendants lost focus.
-    // This handler is invoked when our root element or some descendant loses focus.
-    // At this point we need to learn if the newly focused element belongs to this palette.
-    // To achieve this:
-    // - We start with the newly focused element and traverse its visual ancestors up to the Xaml root.
-    // - If one of the ancestors is this ExtensionPalette, then by our definition the focus is not lost
-    // - If we reach the Xaml root without meeting this ExtensionPalette,
-    // then the focus is not contained in it anymore and it should be dismissed
-    // Arguments:
-    // - <unused>
-    // Return Value:
-    // - <none>
-    void ExtensionPalette::_lostFocusHandler(const Windows::Foundation::IInspectable& /*sender*/,
-                                             const Windows::UI::Xaml::RoutedEventArgs& /*args*/)
+    void ExtensionPalette::_queryBoxGotFocusHandler(const Windows::Foundation::IInspectable& /*sender*/,
+                                                    const Windows::UI::Xaml::RoutedEventArgs& /*args*/)
     {
-        const auto flyout = _queryBox().ContextFlyout();
-        if (flyout && flyout.IsOpen())
-        {
-            return;
-        }
-
-        auto root = this->XamlRoot();
-        if (!root)
-        {
-            return;
-        }
-
-        auto focusedElementOrAncestor = Input::FocusManager::GetFocusedElement(root).try_as<DependencyObject>();
-        while (focusedElementOrAncestor)
-        {
-            if (focusedElementOrAncestor == *this)
-            {
-                // This palette is the focused element or an ancestor of the focused element. No need to dismiss.
-                return;
-            }
-
-            // Go up to the next ancestor
-            focusedElementOrAncestor = winrt::Windows::UI::Xaml::Media::VisualTreeHelper::GetParent(focusedElementOrAncestor);
-        }
-
-        // We got to the root (the element with no parent) and didn't meet this palette on the path.
-        // It means that it lost the focus and needs to be dismissed.
-        _close();
+        _ActiveControlInfoRequestedHandlers(nullptr, nullptr);
+        const auto context = winrt::make<TerminalContext>(_ActiveCommandline);
+        _lmProvider.SetContext(std::move(context));
     }
 
     void ExtensionPalette::_previewKeyDownHandler(const IInspectable& /*sender*/,
@@ -383,7 +332,7 @@ namespace winrt::Microsoft::Terminal::Query::Extension::implementation
             // Dismiss the palette if the text is empty
             if (_queryBox().Text().empty())
             {
-                _close();
+                _closeChat(nullptr, nullptr);
             }
 
             e.Handled(true);
@@ -418,20 +367,7 @@ namespace winrt::Microsoft::Terminal::Query::Extension::implementation
                                                       const Windows::UI::Xaml::RoutedEventArgs& /*args*/)
     {
         _SetUpProviderInSettingsRequestedHandlers(nullptr, nullptr);
-        _close();
-    }
-
-    // Method Description:
-    // - Dismiss the query palette. This will:
-    //   * clear all the current text in the input box
-    //   * set our visibility to Collapsed
-    // Arguments:
-    // - <none>
-    // Return Value:
-    // - <none>
-    void ExtensionPalette::_close()
-    {
-        Visibility(Visibility::Collapsed);
+        _closeChat(nullptr, nullptr);
     }
 
     ChatMessage::ChatMessage(winrt::hstring content, bool isQuery) :

src/cascadia/QueryExtension/ExtensionPalette.h

@@ -50,14 +50,12 @@ namespace winrt::Microsoft::Terminal::Query::Extension::implementation
 
         void _clearAndInitializeMessages(const Windows::Foundation::IInspectable& sender, const Windows::UI::Xaml::RoutedEventArgs& args);
         void _exportMessagesToFile(const Windows::Foundation::IInspectable& sender, const Windows::UI::Xaml::RoutedEventArgs& args);
-        void _rootPointerPressed(const Windows::Foundation::IInspectable& sender, const Windows::UI::Xaml::Input::PointerRoutedEventArgs& e);
+        void _closeChat(const Windows::Foundation::IInspectable& sender, const Windows::UI::Xaml::RoutedEventArgs& args);
         void _backdropPointerPressed(const Windows::Foundation::IInspectable& sender, const Windows::UI::Xaml::Input::PointerRoutedEventArgs& e);
-        void _lostFocusHandler(const Windows::Foundation::IInspectable& sender, const Windows::UI::Xaml::RoutedEventArgs& args);
+        void _queryBoxGotFocusHandler(const Windows::Foundation::IInspectable& sender, const Windows::UI::Xaml::RoutedEventArgs& args);
         void _previewKeyDownHandler(const Windows::Foundation::IInspectable& sender,
                                     const Windows::UI::Xaml::Input::KeyRoutedEventArgs& e);
         void _setUpAIProviderInSettings(const Windows::Foundation::IInspectable& sender, const Windows::UI::Xaml::RoutedEventArgs& args);
-
-        void _close();
     };
 
     struct ChatMessage : ChatMessageT<ChatMessage>

src/cascadia/QueryExtension/ExtensionPalette.xaml

@@ -14,8 +14,6 @@
              AllowFocusOnInteraction="True"
              AutomationProperties.Name="{x:Bind ControlName, Mode=OneWay}"
              IsTabStop="True"
-             LostFocus="_lostFocusHandler"
-             PointerPressed="_rootPointerPressed"
              PreviewKeyDown="_previewKeyDownHandler"
              TabNavigation="Cycle"
              mc:Ignorable="d">
@@ -178,14 +176,12 @@
         <Grid x:Name="_backdrop"
               Grid.Row="0"
               Grid.Column="1"
-              Margin="8"
               Padding="0,8,0,0"
               HorizontalAlignment="Stretch"
               VerticalAlignment="Stretch"
               Background="{ThemeResource BackdropBackground}"
-              BorderBrush="{ThemeResource FlyoutBorderThemeBrush}"
-              BorderThickness="{ThemeResource FlyoutBorderThemeThickness}"
-              CornerRadius="{ThemeResource OverlayCornerRadius}"
+              BorderBrush="{ThemeResource TabViewBackground}"
+              BorderThickness="2,0,0,0"
               PointerPressed="_backdropPointerPressed"
               Shadow="{StaticResource SharedShadow}"
               Translation="0,0,32">
@@ -341,6 +337,13 @@
                                           Glyph="&#xEDE1;" />
                             </Button.Content>
                         </Button>
+                        <Button x:Uid="CloseChatButton"
+                                Click="_closeChat">
+                            <Button.Content>
+                                <FontIcon FontSize="14"
+                                          Glyph="&#xE8BB;" />
+                            </Button.Content>
+                        </Button>
                     </StackPanel>
                     <mux:ProgressRing Grid.Row="1"
                                       Grid.Column="0"
@@ -362,6 +365,7 @@
                      Margin="16,0,16,4"
                      Padding="18,8,8,8"
                      AcceptsReturn="True"
+                     GotFocus="_queryBoxGotFocusHandler"
                      IsSpellCheckEnabled="False"
                      PlaceholderText="{x:Bind QueryBoxPlaceholderText}"
                      Text=""

src/cascadia/QueryExtension/Resources/en-US/Resources.resw

@@ -153,6 +153,10 @@
     <value>Export the message history to a text file</value>
     <comment>Tooltip for the button that allows the user to export the message history.</comment>
   </data>
+  <data name="CloseChatButton.[using:Windows.UI.Xaml.Controls]ToolTipService.ToolTip" xml:space="preserve">
+    <value>Close the chat pane</value>
+    <comment>Tooltip for the button that allows the user to close the chat pane.</comment>
+  </data>
   <data name="TitleSubheader.Text" xml:space="preserve">
     <value>Take command of your Terminal. Ask Terminal Chat for assistance right in your terminal.</value>
     <comment>Subheader of the AI chat box control.</comment>

src/cascadia/TerminalApp/TerminalPage.xaml

@@ -20,6 +20,10 @@
             <RowDefinition Height="Auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="Auto" />
+        </Grid.ColumnDefinitions>
 
         <local:TabRowControl x:Name="TabRow"
                              Grid.Row="0"
@@ -168,7 +172,9 @@
                               Visibility="Collapsed" />
 
         <ContentPresenter x:Name="ExtensionPresenter"
-                          Grid.Row="2"
+                          Grid.Row="1"
+                          Grid.RowSpan="2"
+                          Grid.Column="1"
                           VerticalAlignment="Stretch"
                           PreviewKeyDown="_KeyDownHandler"
                           Visibility="Collapsed" />