[Obs AI Assistant] Fix error when opening an old conversation (#197745)

Closes #176299 ## Summary ### Problem When a chat is started from contextual insights, `initialMessages` are being populated from the temp conversation created from the error. Because the `initialMessages` are present, when an old conversation is clicked, the conversation ID of that conversation and the `initalMessages` from the temp chat are passed to the conversation. This throws an error, as there is a condition which restricts both of these being passed to `useConversation` which is used by the `ChatBody`. - Only one of these should be passed (not both) ### Solution With the current implementation, even though not passing `initialMessages` allows the user to open previous conversations successfully, it doesn't allow the user to start a new chat because as long as initial messages are set, they will be loaded when the New Chat button is clicked instead of showing a blank conversation. Clearing initial messages requires re-architecting how the Chat uses the conversation. Therefore, as the solution, when a chat is opened from contextual insights, the ConversationList will be hidden. The user can interact with the AI Assistant on the opened chat with initial messages from contextual insights.
elastic · Oct 31, 2024 · 287c1ec · 287c1ec
1 parent be51fac
commit 287c1ec
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 72 deletions.
diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_flyout.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_flyout.tsx
@@ -47,13 +47,15 @@ export function ChatFlyout({
   isOpen,
   onClose,
   navigateToConversation,
+  hideConversationList,
 }: {
   initialTitle: string;
   initialMessages: Message[];
   initialFlyoutPositionMode?: FlyoutPositionMode;
   isOpen: boolean;
   onClose: () => void;
   navigateToConversation?: (conversationId?: string) => void;
+  hideConversationList?: boolean;
 }) {
   const { euiTheme } = useEuiTheme();
   const breakpoint = useCurrentEuiBreakpoint();
@@ -174,84 +176,86 @@ export function ChatFlyout({
         }}
       >
         <EuiFlexGroup gutterSize="none" className={containerClassName}>
-          <EuiFlexItem className={breakpoint === 'xs' ? hideClassName : sidebarClass}>
-            <EuiPopover
-              anchorPosition="downLeft"
-              className={expandButtonContainerClassName}
-              button={
-                <EuiToolTip
-                  content={
-                    conversationsExpanded
-                      ? i18n.translate(
-                          'xpack.aiAssistant.chatFlyout.euiToolTip.collapseConversationListLabel',
-                          { defaultMessage: 'Collapse conversation list' }
-                        )
-                      : i18n.translate(
-                          'xpack.aiAssistant.chatFlyout.euiToolTip.expandConversationListLabel',
-                          { defaultMessage: 'Expand conversation list' }
-                        )
-                  }
-                  display="block"
-                >
-                  <EuiButtonIcon
-                    aria-label={i18n.translate(
-                      'xpack.aiAssistant.chatFlyout.euiButtonIcon.expandConversationListLabel',
-                      { defaultMessage: 'Expand conversation list' }
-                    )}
-                    className={expandButtonClassName}
-                    color="text"
-                    data-test-subj="observabilityAiAssistantChatFlyoutButton"
-                    iconType={conversationsExpanded ? 'transitionLeftIn' : 'transitionLeftOut'}
-                    onClick={() => setConversationsExpanded(!conversationsExpanded)}
-                  />
-                </EuiToolTip>
-              }
-            />
-
-            {conversationsExpanded ? (
-              <ConversationList
-                conversations={conversationList.conversations}
-                isLoading={conversationList.isLoading}
-                selectedConversationId={conversationId}
-                onConversationDeleteClick={(deletedConversationId) => {
-                  conversationList.deleteConversation(deletedConversationId).then(() => {
-                    if (deletedConversationId === conversationId) {
-                      setConversationId(undefined);
-                    }
-                  });
-                }}
-                onConversationSelect={(nextConversationId) => {
-                  setConversationId(nextConversationId);
-                }}
-              />
-            ) : (
+          {!hideConversationList ? (
+            <EuiFlexItem className={breakpoint === 'xs' ? hideClassName : sidebarClass}>
               <EuiPopover
                 anchorPosition="downLeft"
+                className={expandButtonContainerClassName}
                 button={
                   <EuiToolTip
-                    content={i18n.translate(
-                      'xpack.aiAssistant.chatFlyout.euiToolTip.newChatLabel',
-                      { defaultMessage: 'New chat' }
-                    )}
+                    content={
+                      conversationsExpanded
+                        ? i18n.translate(
+                            'xpack.aiAssistant.chatFlyout.euiToolTip.collapseConversationListLabel',
+                            { defaultMessage: 'Collapse conversation list' }
+                          )
+                        : i18n.translate(
+                            'xpack.aiAssistant.chatFlyout.euiToolTip.expandConversationListLabel',
+                            { defaultMessage: 'Expand conversation list' }
+                          )
+                    }
                     display="block"
                   >
-                    <NewChatButton
+                    <EuiButtonIcon
                       aria-label={i18n.translate(
-                        'xpack.aiAssistant.chatFlyout.euiButtonIcon.newChatLabel',
-                        { defaultMessage: 'New chat' }
+                        'xpack.aiAssistant.chatFlyout.euiButtonIcon.expandConversationListLabel',
+                        { defaultMessage: 'Expand conversation list' }
                       )}
-                      collapsed
-                      data-test-subj="observabilityAiAssistantNewChatFlyoutButton"
-                      onClick={() => {
-                        setConversationId(undefined);
-                      }}
+                      className={expandButtonClassName}
+                      color="text"
+                      data-test-subj="observabilityAiAssistantChatFlyoutButton"
+                      iconType={conversationsExpanded ? 'transitionLeftIn' : 'transitionLeftOut'}
+                      onClick={() => setConversationsExpanded(!conversationsExpanded)}
                     />
                   </EuiToolTip>
                 }
-                className={newChatButtonClassName}
               />
-            )}
-          </EuiFlexItem>
+
+              {conversationsExpanded ? (
+                <ConversationList
+                  conversations={conversationList.conversations}
+                  isLoading={conversationList.isLoading}
+                  selectedConversationId={conversationId}
+                  onConversationDeleteClick={(deletedConversationId) => {
+                    conversationList.deleteConversation(deletedConversationId).then(() => {
+                      if (deletedConversationId === conversationId) {
+                        setConversationId(undefined);
+                      }
+                    });
+                  }}
+                  onConversationSelect={(nextConversationId) => {
+                    setConversationId(nextConversationId);
+                  }}
+                />
+              ) : (
+                <EuiPopover
+                  anchorPosition="downLeft"
+                  button={
+                    <EuiToolTip
+                      content={i18n.translate(
+                        'xpack.aiAssistant.chatFlyout.euiToolTip.newChatLabel',
+                        { defaultMessage: 'New chat' }
+                      )}
+                      display="block"
+                    >
+                      <NewChatButton
+                        aria-label={i18n.translate(
+                          'xpack.aiAssistant.chatFlyout.euiButtonIcon.newChatLabel',
+                          { defaultMessage: 'New chat' }
+                        )}
+                        collapsed
+                        data-test-subj="observabilityAiAssistantNewChatFlyoutButton"
+                        onClick={() => {
+                          setConversationId(undefined);
+                        }}
+                      />
+                    </EuiToolTip>
+                  }
+                  className={newChatButtonClassName}
+                />
+              )}
+            </EuiFlexItem>
+          ) : null}
 
           <EuiFlexItem className={chatBodyContainerClassName}>
             <ChatBody

diff --git a/...s/observability_solution/observability_ai_assistant/public/components/insight/insight.tsx b/...s/observability_solution/observability_ai_assistant/public/components/insight/insight.tsx
@@ -128,6 +128,7 @@ function ChatContent({
                     service.conversations.openNewConversation({
                       messages,
                       title: defaultTitle,
+                      hideConversationList: true,
                     });
                   }}
                 />

diff --git a/...lugins/observability_solution/observability_ai_assistant/public/service/create_service.ts b/...lugins/observability_solution/observability_ai_assistant/public/service/create_service.ts
@@ -36,7 +36,11 @@ export function createService({
   const screenContexts$ = new BehaviorSubject<ObservabilityAIAssistantScreenContext[]>([
     { starterPrompts: defaultStarterPrompts },
   ]);
-  const predefinedConversation$ = new Subject<{ messages: Message[]; title?: string }>();
+  const predefinedConversation$ = new Subject<{
+    messages: Message[];
+    title?: string;
+    hideConversationList?: boolean;
+  }>();
 
   const scope$ = new BehaviorSubject<AssistantScope[]>(scopes);
 
@@ -104,8 +108,16 @@ export function createService({
       );
     },
     conversations: {
-      openNewConversation: ({ messages, title }: { messages: Message[]; title?: string }) => {
-        predefinedConversation$.next({ messages, title });
+      openNewConversation: ({
+        messages,
+        title,
+        hideConversationList = false,
+      }: {
+        messages: Message[];
+        title?: string;
+        hideConversationList?: boolean;
+      }) => {
+        predefinedConversation$.next({ messages, title, hideConversationList });
       },
       predefinedConversation$: predefinedConversation$.asObservable(),
     },

diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant/public/types.ts b/x-pack/plugins/observability_solution/observability_ai_assistant/public/types.ts
@@ -91,8 +91,16 @@ export interface ObservabilityAIAssistantChatService {
 }
 
 export interface ObservabilityAIAssistantConversationService {
-  openNewConversation: ({}: { messages: Message[]; title?: string }) => void;
-  predefinedConversation$: Observable<{ messages: Message[]; title?: string }>;
+  openNewConversation: ({}: {
+    messages: Message[];
+    title?: string;
+    hideConversationList?: boolean;
+  }) => void;
+  predefinedConversation$: Observable<{
+    messages: Message[];
+    title?: string;
+    hideConversationList?: boolean;
+  }>;
 }
 
 export interface ObservabilityAIAssistantService {

diff --git a/...rvability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx b/...rvability_solution/observability_ai_assistant_app/public/components/nav_control/index.tsx
@@ -103,9 +103,12 @@ export function NavControl() {
     };
   }, [service.conversations.predefinedConversation$]);
 
-  const { messages, title } = useObservable(service.conversations.predefinedConversation$) ?? {
+  const { messages, title, hideConversationList } = useObservable(
+    service.conversations.predefinedConversation$
+  ) ?? {
     messages: [],
     title: undefined,
+    hideConversationList: false,
   };
 
   const theme = useTheme();
@@ -171,6 +174,7 @@ export function NavControl() {
                 )
               );
             }}
+            hideConversationList={hideConversationList}
           />
         </ObservabilityAIAssistantChatServiceContext.Provider>
       ) : undefined}