[Obs AI Assistant] Hide previous conversations, when a chat is starte…

…d from contextual insights (#176299)
elastic · Oct 29, 2024 · 472203c · 472203c
1 parent c6750a5
commit 472203c
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 73 deletions.
diff --git a/x-pack/packages/kbn-ai-assistant/src/chat/chat_body.tsx b/x-pack/packages/kbn-ai-assistant/src/chat/chat_body.tsx
@@ -136,7 +136,7 @@ export function ChatBody({
 
   const { conversation, messages, next, state, stop, saveTitle } = useConversation({
     initialConversationId,
-    ...(!initialConversationId ? { initialMessages } : {}),
+    initialMessages,
     initialTitle,
     chatService,
     connectorId: connectors.selectedConnector,

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,
+  hidePreviousConversations,
 }: {
   initialTitle: string;
   initialMessages: Message[];
   initialFlyoutPositionMode?: FlyoutPositionMode;
   isOpen: boolean;
   onClose: () => void;
   navigateToConversation?: (conversationId?: string) => void;
+  hidePreviousConversations?: 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);
-                }}
-              />
-            ) : (
+          {!hidePreviousConversations ? (
+            <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,
+                      hidePreviousConversations: 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;
+    hidePreviousConversations?: 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,
+        hidePreviousConversations = false,
+      }: {
+        messages: Message[];
+        title?: string;
+        hidePreviousConversations?: boolean;
+      }) => {
+        predefinedConversation$.next({ messages, title, hidePreviousConversations });
       },
       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;
+    hidePreviousConversations?: boolean;
+  }) => void;
+  predefinedConversation$: Observable<{
+    messages: Message[];
+    title?: string;
+    hidePreviousConversations?: 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, hidePreviousConversations } = useObservable(
+    service.conversations.predefinedConversation$
+  ) ?? {
     messages: [],
     title: undefined,
+    hidePreviousConversations: false,
   };
 
   const theme = useTheme();
@@ -171,6 +174,7 @@ export function NavControl() {
                 )
               );
             }}
+            hidePreviousConversations={hidePreviousConversations}
           />
         </ObservabilityAIAssistantChatServiceContext.Provider>
       ) : undefined}