[9.0] [Obs AI Assistant] Add Elastic Managed LLM tour callout (#220782)

src/platform/packages/shared/kbn-doc-links/src/get_doc_links.ts

@@ -585,6 +585,8 @@ export const getDocLinks = ({ kibanaBranch, buildFlavor }: GetDocLinkOptions): D
       slo: `${ELASTIC_DOCS}solutions/observability/incident-management/service-level-objectives-slos`,
       sloBurnRateRule: `${ELASTIC_DOCS}solutions/observability/incident-management/create-an-slo-burn-rate-rule`,
       aiAssistant: `${ELASTIC_DOCS}solutions/observability/observability-ai-assistant`,
+      elasticManagedLlm: `${ELASTIC_DOCS}reference/kibana/connectors-kibana/elastic-managed-llm`,
+      elasticManagedLlmUsageCost: `${ELASTIC_WEBSITE_URL}pricing`,
     },
     alerting: {
       guide: `${ELASTIC_DOCS}explore-analyze/alerts-cases/alerts/create-manage-rules`,

src/platform/packages/shared/kbn-doc-links/src/types.ts

@@ -401,6 +401,8 @@ export interface DocLinks {
     slo: string;
     sloBurnRateRule: string;
     aiAssistant: string;
+    elasticManagedLlm: string;
+    elasticManagedLlmUsageCost: string;
   }>;
   readonly alerting: Readonly<{
     authorization: string;

x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_actions_menu.tsx

@@ -15,7 +15,11 @@ import {
   EuiPopover,
   EuiToolTip,
 } from '@elastic/eui';
-import { ConnectorSelectorBase } from '@kbn/observability-ai-assistant-plugin/public';
+import {
+  ConnectorSelectorBase,
+  navigateToConnectorsManagementApp,
+  navigateToSettingsManagementApp,
+} from '@kbn/observability-ai-assistant-plugin/public';
 import type { UseGenAIConnectorsResult } from '../hooks/use_genai_connectors';
 import { useKibana } from '../hooks/use_kibana';
 import { useKnowledgeBase } from '../hooks';
@@ -35,22 +39,10 @@ export function ChatActionsMenu({
   const knowledgeBase = useKnowledgeBase();
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleNavigateToConnectors = () => {
-    application?.navigateToApp('management', {
-      path: '/insightsAndAlerting/triggersActionsConnectors/connectors',
-    });
-  };
-
   const toggleActionsMenu = () => {
     setIsOpen(!isOpen);
   };
 
-  const handleNavigateToSettings = () => {
-    application?.navigateToUrl(
-      http!.basePath.prepend(`/app/management/kibana/observabilityAiAssistantManagement`)
-    );
-  };
-
   const handleNavigateToSettingsKnowledgeBase = () => {
     application?.navigateToUrl(
       http!.basePath.prepend(
@@ -112,7 +104,7 @@ export function ChatActionsMenu({
                 }),
                 onClick: () => {
                   toggleActionsMenu();
-                  handleNavigateToSettings();
+                  navigateToSettingsManagementApp(application!);
                 },
               },
               {
@@ -157,7 +149,10 @@ export function ChatActionsMenu({
                   flush="left"
                   size="xs"
                   data-test-subj="settingsTabGoToConnectorsButton"
-                  onClick={handleNavigateToConnectors}
+                  onClick={() => {
+                    toggleActionsMenu();
+                    navigateToConnectorsManagementApp(application!);
+                  }}
                 >
                   {i18n.translate('xpack.aiAssistant.settingsPage.goToConnectorsButtonLabel', {
                     defaultMessage: 'Manage connectors',

x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_body.tsx

@@ -29,6 +29,7 @@ import {
   type ChatActionClickPayload,
   type Feedback,
   aiAssistantSimulatedFunctionCalling,
+  getElasticManagedLlmConnector,
 } from '@kbn/observability-ai-assistant-plugin/public';
 import type { AuthenticatedUser } from '@kbn/security-plugin/common';
 import { findLastIndex } from 'lodash';
@@ -49,6 +50,7 @@ import { useLicense } from '../hooks/use_license';
 import { PromptEditor } from '../prompt_editor/prompt_editor';
 import { deserializeMessage } from '../utils/deserialize_message';
 import { useKibana } from '../hooks/use_kibana';
+import { useElasticLlmCalloutsStatus } from '../hooks/use_elastic_llm_callouts_status';
 
 const fullHeightClassName = css`
   height: 100%;
@@ -275,6 +277,15 @@ export function ChatBody({
     navigator.clipboard?.writeText(content || '');
   };
 
+  const elasticManagedLlm = getElasticManagedLlmConnector(connectors.connectors);
+  const { conversationCalloutDismissed, tourCalloutDismissed } = useElasticLlmCalloutsStatus(false);
+
+  const showElasticLlmCalloutInChat =
+    elasticManagedLlm &&
+    connectors.selectedConnector === elasticManagedLlm.id &&
+    !conversationCalloutDismissed &&
+    tourCalloutDismissed;
+
   const handleActionClick = useCallback(
     ({ message, payload }: { message: Message; payload: ChatActionClickPayload }) => {
       setStickToBottom(true);
@@ -400,6 +411,7 @@ export function ChatBody({
                       ])
                     )
                   }
+                  showElasticLlmCalloutInChat={showElasticLlmCalloutInChat}
                 />
               ) : (
                 <ChatTimeline
@@ -423,6 +435,7 @@ export function ChatBody({
                   }
                   onStopGenerating={stop}
                   onActionClick={handleActionClick}
+                  showElasticLlmCalloutInChat={showElasticLlmCalloutInChat}
                 />
               )}
             </EuiPanel>
@@ -543,6 +556,7 @@ export function ChatBody({
           navigateToConversation={
             initialMessages?.length && !initialConversationId ? undefined : navigateToConversation
           }
+          isConversationApp={!showLinkToConversationsApp}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>

x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_header.test.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChatHeader } from './chat_header';
+import { getElasticManagedLlmConnector } from '@kbn/observability-ai-assistant-plugin/public';
+import { ElasticLlmTourCallout } from '@kbn/observability-ai-assistant-plugin/public';
+
+jest.mock('@kbn/observability-ai-assistant-plugin/public', () => ({
+  ElasticLlmTourCallout: jest.fn(({ children }) => (
+    <div data-test-subj="elastic-llm-tour">{children}</div>
+  )),
+  getElasticManagedLlmConnector: jest.fn(),
+  useElasticLlmCalloutDismissed: jest.fn().mockReturnValue([false, jest.fn()]),
+  ElasticLlmCalloutKey: {
+    TOUR_CALLOUT: 'tour_callout',
+  },
+}));
+
+jest.mock('./chat_actions_menu', () => ({
+  ChatActionsMenu: () => <div data-test-subj="chat-actions-menu" />,
+}));
+
+describe('ChatHeader', () => {
+  const baseProps = {
+    conversationId: 'abc',
+    flyoutPositionMode: undefined,
+    licenseInvalid: false,
+    loading: false,
+    title: 'My title',
+    isConversationApp: false,
+    onSaveTitle: jest.fn(),
+    onToggleFlyoutPositionMode: jest.fn(),
+    navigateToConversation: jest.fn(),
+    onCopyConversation: jest.fn(),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('shows the Elastic Managed LLM connector tour callout when the connector is present', () => {
+    const elasticManagedConnector = {
+      id: 'elastic-llm',
+      actionTypeId: '.inference',
+      name: 'Elastic LLM',
+      isPreconfigured: true,
+      isDeprecated: false,
+      isSystemAction: false,
+      config: {
+        provider: 'elastic',
+        taskType: 'chat_completion',
+        inferenceId: '.rainbow-sprinkles-elastic',
+        providerConfig: {
+          model_id: 'rainbow-sprinkles',
+        },
+      },
+      referencedByCount: 0,
+    };
+    (getElasticManagedLlmConnector as jest.Mock).mockReturnValue(elasticManagedConnector);
+
+    render(
+      <ChatHeader
+        {...baseProps}
+        connectors={{
+          connectors: [elasticManagedConnector],
+          selectedConnector: undefined,
+          loading: false,
+          error: undefined,
+          selectConnector: (id: string) => {},
+          reloadConnectors: () => {},
+        }}
+      />
+    );
+
+    expect(screen.getByTestId('elastic-llm-tour')).toBeInTheDocument();
+    expect(screen.getByTestId('chat-actions-menu')).toBeInTheDocument();
+    expect(ElasticLlmTourCallout).toHaveBeenCalled();
+  });
+
+  it('does not render the tour callout when the Elastic Managed LLM Connector is not present', () => {
+    (getElasticManagedLlmConnector as jest.Mock).mockReturnValue(undefined);
+
+    render(
+      <ChatHeader
+        {...baseProps}
+        connectors={{
+          connectors: [],
+          selectedConnector: undefined,
+          loading: false,
+          error: undefined,
+          selectConnector: (id: string) => {},
+          reloadConnectors: () => {},
+        }}
+      />
+    );
+
+    expect(screen.queryByTestId('elastic-llm-tour')).toBeNull();
+    expect(screen.getByTestId('chat-actions-menu')).toBeInTheDocument();
+    expect(ElasticLlmTourCallout).not.toHaveBeenCalled();
+  });
+});

x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_header.tsx

@@ -20,6 +20,12 @@ import {
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/css';
 import { AssistantIcon } from '@kbn/ai-assistant-icon';
+import {
+  ElasticLlmTourCallout,
+  getElasticManagedLlmConnector,
+  ElasticLlmCalloutKey,
+  useElasticLlmCalloutDismissed,
+} from '@kbn/observability-ai-assistant-plugin/public';
 import { ChatActionsMenu } from './chat_actions_menu';
 import type { UseGenAIConnectorsResult } from '../hooks/use_genai_connectors';
 import { FlyoutPositionMode } from './chat_flyout';
@@ -47,6 +53,7 @@ export function ChatHeader({
   loading,
   title,
   onCopyConversation,
+  isConversationApp,
   onSaveTitle,
   onToggleFlyoutPositionMode,
   navigateToConversation,
@@ -58,6 +65,7 @@ export function ChatHeader({
   loading: boolean;
   title: string;
   onCopyConversation: () => void;
+  isConversationApp: boolean;
   onSaveTitle: (title: string) => void;
   onToggleFlyoutPositionMode?: (newFlyoutPositionMode: FlyoutPositionMode) => void;
   navigateToConversation?: (nextConversationId?: string) => void;
@@ -81,6 +89,12 @@ export function ChatHeader({
     }
   };
 
+  const elasticManagedLlm = getElasticManagedLlmConnector(connectors.connectors);
+  const [tourCalloutDismissed, setTourCalloutDismissed] = useElasticLlmCalloutDismissed(
+    ElasticLlmCalloutKey.TOUR_CALLOUT,
+    false
+  );
+
   return (
     <EuiPanel
       borderRadius="none"
@@ -196,12 +210,26 @@ export function ChatHeader({
             ) : null}
 
             <EuiFlexItem grow={false}>
-              <ChatActionsMenu
-                connectors={connectors}
-                conversationId={conversationId}
-                disabled={licenseInvalid}
-                onCopyConversationClick={onCopyConversation}
-              />
+              {!!elasticManagedLlm && !tourCalloutDismissed ? (
+                <ElasticLlmTourCallout
+                  zIndex={isConversationApp ? 999 : undefined}
+                  dismissTour={() => setTourCalloutDismissed(true)}
+                >
+                  <ChatActionsMenu
+                    connectors={connectors}
+                    conversationId={conversationId}
+                    disabled={licenseInvalid}
+                    onCopyConversationClick={onCopyConversation}
+                  />
+                </ElasticLlmTourCallout>
+              ) : (
+                <ChatActionsMenu
+                  connectors={connectors}
+                  conversationId={conversationId}
+                  disabled={licenseInvalid}
+                  onCopyConversationClick={onCopyConversation}
+                />
+              )}
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>

x-pack/platform/packages/shared/kbn-ai-assistant/src/chat/chat_timeline.tsx

@@ -22,6 +22,7 @@ import type { UseKnowledgeBaseResult } from '../hooks/use_knowledge_base';
 import { ChatItem } from './chat_item';
 import { ChatConsolidatedItems } from './chat_consolidated_items';
 import { getTimelineItemsfromConversation } from '../utils/get_timeline_items_from_conversation';
+import { ElasticLlmConversationCallout } from './elastic_llm_conversation_callout';
 
 export interface ChatTimelineItem
   extends Pick<Message['message'], 'role' | 'content' | 'function_call'> {
@@ -52,6 +53,7 @@ export interface ChatTimelineProps {
   hasConnector: boolean;
   chatState: ChatState;
   currentUser?: Pick<AuthenticatedUser, 'full_name' | 'username'>;
+  showElasticLlmCalloutInChat: boolean;
   onEdit: (message: Message, messageAfterEdit: Message) => void;
   onFeedback: (feedback: Feedback) => void;
   onRegenerate: (message: Message) => void;
@@ -66,11 +68,22 @@ export interface ChatTimelineProps {
   }) => void;
 }
 
+const euiCommentListClassName = css`
+  padding-bottom: 32px;
+`;
+
+const stickyElasticLlmCalloutContainerClassName = css`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`;
+
 export function ChatTimeline({
   messages,
   chatService,
   hasConnector,
   currentUser,
+  showElasticLlmCalloutInChat,
   onEdit,
   onFeedback,
   onRegenerate,
@@ -112,11 +125,12 @@ export function ChatTimeline({
   }, [chatService, hasConnector, messages, currentUser, chatState, onActionClick]);
 
   return (
-    <EuiCommentList
-      className={css`
-        padding-bottom: 32px;
-      `}
-    >
+    <EuiCommentList className={euiCommentListClassName}>
+      {showElasticLlmCalloutInChat ? (
+        <div className={stickyElasticLlmCalloutContainerClassName}>
+          <ElasticLlmConversationCallout />
+        </div>
+      ) : null}
       {items.map((item, index) => {
         return Array.isArray(item) ? (
           <ChatConsolidatedItems