🌊 Streams: Use shared EIS callout for pattern generation

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

@@ -591,6 +591,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

@@ -406,6 +406,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';
@@ -31,22 +35,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(
@@ -108,7 +100,7 @@ export function ChatActionsMenu({
                 }),
                 onClick: () => {
                   toggleActionsMenu();
-                  handleNavigateToSettings();
+                  navigateToSettingsManagementApp(application!);
                 },
               },
               {
@@ -143,7 +135,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

@@ -34,6 +34,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';
@@ -377,6 +378,10 @@ export function ChatBody({
     conversation.refresh();
   };
 
+  const elasticManagedLlm = getElasticManagedLlmConnector(connectors.connectors);
+  const showElasticLlmCalloutInChat =
+    elasticManagedLlm && connectors.selectedConnector === elasticManagedLlm.id;
+
   const isPublic = conversation.value?.public;
   const isArchived = !!conversation.value?.archived;
   const showPromptEditor = !isArchived && (!isPublic || isConversationOwnedByCurrentUser);
@@ -517,6 +522,7 @@ export function ChatBody({
                       ])
                     )
                   }
+                  showElasticLlmCalloutInChat={showElasticLlmCalloutInChat}
                 />
               ) : (
                 <ChatTimeline
@@ -543,6 +549,7 @@ export function ChatBody({
                   onStopGenerating={stop}
                   onActionClick={handleActionClick}
                   isArchived={isArchived}
+                  showElasticLlmCalloutInChat={showElasticLlmCalloutInChat}
                 />
               )}
             </EuiPanel>

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

@@ -0,0 +1,128 @@
+/*
+ * 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(),
+  useElasticLlmTourCalloutDismissed: jest.fn().mockReturnValue([false, jest.fn()]),
+}));
+
+jest.mock('./chat_actions_menu', () => ({
+  ChatActionsMenu: () => <div data-test-subj="chat-actions-menu" />,
+}));
+
+jest.mock('./chat_sharing_menu', () => ({
+  ChatSharingMenu: () => <div data-test-subj="chat-sharing-menu" />,
+}));
+
+jest.mock('./chat_context_menu', () => ({
+  ChatContextMenu: () => <div data-test-subj="chat-context-menu" />,
+}));
+
+describe('ChatHeader', () => {
+  const baseProps = {
+    conversationId: 'abc',
+    conversation: {
+      conversation: { title: 't', id: 'sample-id', last_updated: '2025-05-13T10:00:00Z' },
+      archived: false,
+      public: false,
+      labels: {},
+      numeric_labels: {},
+      messages: [],
+      namespace: 'default',
+      '@timestamp': '2025-05-13T10:00:00Z',
+    },
+    flyoutPositionMode: undefined,
+    licenseInvalid: false,
+    loading: false,
+    title: 'My title',
+    isConversationOwnedByCurrentUser: false,
+    onDuplicateConversation: jest.fn(),
+    onSaveTitle: jest.fn(),
+    onToggleFlyoutPositionMode: jest.fn(),
+    navigateToConversation: jest.fn(),
+    updateDisplayedConversation: jest.fn(),
+    handleConversationAccessUpdate: jest.fn(),
+    deleteConversation: jest.fn(),
+    copyConversationToClipboard: jest.fn(),
+    copyUrl: jest.fn(),
+    handleArchiveConversation: 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

@@ -22,6 +22,11 @@ import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/css';
 import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import { Conversation, ConversationAccess } from '@kbn/observability-ai-assistant-plugin/common';
+import {
+  ElasticLlmTourCallout,
+  getElasticManagedLlmConnector,
+  useElasticLlmTourCalloutDismissed,
+} 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';
@@ -106,6 +111,9 @@ export function ChatHeader({
     }
   };
 
+  const elasticManagedLlm = getElasticManagedLlmConnector(connectors.connectors);
+  const [tourCalloutDismissed, setTourCalloutDismissed] = useElasticLlmTourCalloutDismissed(false);
+
   return (
     <EuiPanel
       borderRadius="none"
@@ -267,7 +275,13 @@ export function ChatHeader({
               ) : null}
 
               <EuiFlexItem grow={false}>
-                <ChatActionsMenu connectors={connectors} disabled={licenseInvalid} />
+                {!!elasticManagedLlm && !tourCalloutDismissed ? (
+                  <ElasticLlmTourCallout dismissTour={() => setTourCalloutDismissed(true)}>
+                    <ChatActionsMenu connectors={connectors} disabled={licenseInvalid} />
+                  </ElasticLlmTourCallout>
+                ) : (
+                  <ChatActionsMenu connectors={connectors} disabled={licenseInvalid} />
+                )}
               </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 { ElasticLlmCallout } from './elastic_llm_callout';
 
 export interface ChatTimelineItem
   extends Pick<Message['message'], 'role' | 'content' | 'function_call'> {
@@ -55,6 +56,7 @@ export interface ChatTimelineProps {
   isConversationOwnedByCurrentUser: boolean;
   isArchived: boolean;
   currentUser?: Pick<AuthenticatedUser, 'full_name' | 'username'>;
+  showElasticLlmCalloutInChat: boolean;
   onEdit: (message: Message, messageAfterEdit: Message) => void;
   onFeedback: (feedback: Feedback) => void;
   onRegenerate: (message: Message) => void;
@@ -69,6 +71,16 @@ export interface ChatTimelineProps {
   }) => void;
 }
 
+const euiCommentListClassName = css`
+  padding-bottom: 32px;
+`;
+
+const stickyElasticLlmCalloutContainerClassName = css`
+  position: sticky;
+  top: 0;
+  z-index: 1;
+`;
+
 export function ChatTimeline({
   conversationId,
   messages,
@@ -77,6 +89,7 @@ export function ChatTimeline({
   currentUser,
   isConversationOwnedByCurrentUser,
   isArchived,
+  showElasticLlmCalloutInChat,
   onEdit,
   onFeedback,
   onRegenerate,
@@ -131,11 +144,12 @@ export function ChatTimeline({
   ]);
 
   return (
-    <EuiCommentList
-      className={css`
-        padding-bottom: 32px;
-      `}
-    >
+    <EuiCommentList className={euiCommentListClassName}>
+      {showElasticLlmCalloutInChat ? (
+        <div className={stickyElasticLlmCalloutContainerClassName}>
+          <ElasticLlmCallout />
+        </div>
+      ) : null}
       {items.map((item, index) => {
         return Array.isArray(item) ? (
           <ChatConsolidatedItems