[Obs AI Assistant] Avoid AI assistant overlaying AI conversations (#1…

…94722) Closes #190430 ## Summary ### Problem After navigating to AI conversations, from the AI assistant overlay via the "Navigate to Conversations" button, the AI assistant overlay doesn't close. Instead, it remains open and the same content is shown on the overlay and the conversations page. ### Solution Close the AI Assistant overlay when navigating to the AI conversations page. https://github.com/user-attachments/assets/db1b9a30-c073-4867-a2aa-520e1b5c3fa1 --------- Co-authored-by: Elastic Machine <[email protected]>
elastic · Oct 7, 2024 · 99970dc · 99970dc
1 parent 36fe809
commit 99970dc
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/...bservability_solution/observability_ai_assistant_app/public/components/chat/chat_body.tsx b/...bservability_solution/observability_ai_assistant_app/public/components/chat/chat_body.tsx
@@ -110,6 +110,7 @@ export function ChatBody({
   showLinkToConversationsApp,
   onConversationUpdate,
   onToggleFlyoutPositionMode,
+  onClose,
 }: {
   connectors: ReturnType<typeof useGenAIConnectors>;
   currentUser?: Pick<AuthenticatedUser, 'full_name' | 'username'>;
@@ -121,6 +122,7 @@ export function ChatBody({
   showLinkToConversationsApp: boolean;
   onConversationUpdate: (conversation: { conversation: Conversation['conversation'] }) => void;
   onToggleFlyoutPositionMode?: (flyoutPositionMode: FlyoutPositionMode) => void;
+  onClose?: () => void;
 }) {
   const license = useLicense();
   const hasCorrectLicense = license?.hasAtLeast('enterprise');
@@ -498,6 +500,7 @@ export function ChatBody({
             saveTitle(newTitle);
           }}
           onToggleFlyoutPositionMode={onToggleFlyoutPositionMode}
+          onClose={onClose}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>

diff --git a/...ervability_solution/observability_ai_assistant_app/public/components/chat/chat_flyout.tsx b/...ervability_solution/observability_ai_assistant_app/public/components/chat/chat_flyout.tsx
@@ -274,6 +274,7 @@ export function ChatFlyout({
                 conversationList.conversations.refresh();
               }}
               onToggleFlyoutPositionMode={handleToggleFlyoutPositionMode}
+              onClose={onClose}
             />
           </EuiFlexItem>
 

diff --git a/...ervability_solution/observability_ai_assistant_app/public/components/chat/chat_header.tsx b/...ervability_solution/observability_ai_assistant_app/public/components/chat/chat_header.tsx
@@ -50,6 +50,7 @@ export function ChatHeader({
   onCopyConversation,
   onSaveTitle,
   onToggleFlyoutPositionMode,
+  onClose,
 }: {
   connectors: UseGenAIConnectorsResult;
   conversationId?: string;
@@ -60,6 +61,7 @@ export function ChatHeader({
   onCopyConversation: () => void;
   onSaveTitle: (title: string) => void;
   onToggleFlyoutPositionMode?: (newFlyoutPositionMode: FlyoutPositionMode) => void;
+  onClose?: () => void;
 }) {
   const theme = useEuiTheme();
   const breakpoint = useCurrentEuiBreakpoint();
@@ -73,6 +75,10 @@ export function ChatHeader({
   }, [title]);
 
   const handleNavigateToConversations = () => {
+    if (onClose) {
+      onClose();
+    }
+
     if (conversationId) {
       router.push('/conversations/{conversationId}', {
         path: {