[Obs AI Assistant] Refresh conversations list on update (elastic#177897)

Due to some other changes, the conversations list was no longer
refreshed. Added an E2E test for it and took the opportunity for some
refactoring.

x-pack/plugins/observability_solution/observability_ai_assistant/public/components/chat/chat_flyout.tsx

@@ -4,10 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
-import { v4 } from 'uuid';
 import { css } from '@emotion/css';
 import {
   EuiButtonIcon,
@@ -20,7 +19,6 @@ import {
   useEuiTheme,
 } from '@elastic/eui';
 import { ObservabilityAIAssistantMultipaneFlyoutProvider } from '../../context/observability_ai_assistant_multipane_flyout_provider';
-import { useForceUpdate } from '../../hooks/use_force_update';
 import { useCurrentUser } from '../../hooks/use_current_user';
 import { useGenAIConnectors } from '../../hooks/use_genai_connectors';
 import { useKnowledgeBase } from '../../hooks/use_knowledge_base';
@@ -30,6 +28,8 @@ import { ConversationList } from './conversation_list';
 import type { Message } from '../../../common/types';
 import { ChatInlineEditingContent } from './chat_inline_edit';
 import { NewChatButton } from '../buttons/new_chat_button';
+import { useConversationList } from '../../hooks/use_conversation_list';
+import { useConversationKey } from '../../hooks/use_conversation_key';
 
 const CONVERSATIONS_SIDEBAR_WIDTH = 260;
 const CONVERSATIONS_SIDEBAR_WIDTH_COLLAPSED = 34;
@@ -69,6 +69,10 @@ export function ChatFlyout({
   const [secondSlotContainer, setSecondSlotContainer] = useState<HTMLDivElement | null>(null);
   const [isSecondSlotVisible, setIsSecondSlotVisible] = useState(false);
 
+  const conversationList = useConversationList();
+
+  const { key: bodyKey, updateConversationIdInPlace } = useConversationKey(conversationId);
+
   const flyoutClassName = css`
     max-inline-size: 100% !important;
   `;
@@ -118,30 +122,6 @@ export function ChatFlyout({
     z-index: 1;
   `;
 
-  const chatBodyKeyRef = useRef(v4());
-  const forceUpdate = useForceUpdate();
-  const reloadConversation = useCallback(() => {
-    chatBodyKeyRef.current = v4();
-    forceUpdate();
-  }, [forceUpdate]);
-
-  const handleClickChat = (id: string) => {
-    setConversationId(id);
-    reloadConversation();
-  };
-
-  const handleClickDeleteConversation = () => {
-    setConversationId(undefined);
-    reloadConversation();
-  };
-
-  const handleClickNewChat = () => {
-    if (conversationId) {
-      setConversationId(undefined);
-      reloadConversation();
-    }
-  };
-
   const handleToggleFlyoutWidthMode = (newFlyoutWidthMode: FlyoutWidthMode) => {
     setFlyoutWidthMode(newFlyoutWidthMode);
   };
@@ -213,10 +193,19 @@ export function ChatFlyout({
 
             {conversationsExpanded ? (
               <ConversationList
-                selected={conversationId ?? ''}
-                onClickDeleteConversation={handleClickDeleteConversation}
-                onClickChat={handleClickChat}
-                onClickNewChat={handleClickNewChat}
+                conversations={conversationList.conversations}
+                isLoading={conversationList.isLoading}
+                selectedConversationId={conversationId}
+                onConversationDeleteClick={(deletedConversationId) => {
+                  conversationList.deleteConversation(deletedConversationId).then(() => {
+                    if (deletedConversationId === conversationId) {
+                      setConversationId(undefined);
+                    }
+                  });
+                }}
+                onConversationSelect={(nextConversationId) => {
+                  setConversationId(nextConversationId);
+                }}
               />
             ) : (
               <EuiPopover
@@ -236,7 +225,9 @@ export function ChatFlyout({
                       )}
                       collapsed
                       data-test-subj="observabilityAiAssistantNewChatFlyoutButton"
-                      onClick={handleClickNewChat}
+                      onClick={() => {
+                        setConversationId(undefined);
+                      }}
                     />
                   </EuiToolTip>
                 }
@@ -247,7 +238,7 @@ export function ChatFlyout({
 
           <EuiFlexItem className={chatBodyContainerClassName}>
             <ChatBody
-              key={chatBodyKeyRef.current}
+              key={bodyKey}
               connectors={connectors}
               currentUser={currentUser}
               flyoutWidthMode={flyoutWidthMode}
@@ -258,7 +249,11 @@ export function ChatFlyout({
               showLinkToConversationsApp
               startedFrom={startedFrom}
               onConversationUpdate={(conversation) => {
+                if (!conversationId) {
+                  updateConversationIdInPlace(conversation.conversation.id);
+                }
                 setConversationId(conversation.conversation.id);
+                conversationList.conversations.refresh();
               }}
               onToggleFlyoutWidthMode={handleToggleFlyoutWidthMode}
             />

x-pack/plugins/observability_solution/observability_ai_assistant/public/components/chat/conversation_list.stories.tsx

@@ -40,14 +40,14 @@ export const ChatHeaderError: ComponentStoryObj<typeof Component> = {
 
 export const ChatHeaderLoaded: ComponentStoryObj<typeof Component> = {
   args: {
-    selected: '',
+    selectedConversationId: '',
   },
   render: Wrapper,
 };
 
 export const ChatHeaderEmpty: ComponentStoryObj<typeof Component> = {
   args: {
-    selected: '',
+    selectedConversationId: '',
   },
   render: Wrapper,
 };