[Observability AI Assistant] Create first Starter prompts

x-pack/plugins/observability_solution/observability/public/application/index.tsx

@@ -86,6 +86,10 @@ export const renderApp = ({
   const CloudProvider = plugins.cloud?.CloudContextProvider ?? React.Fragment;
   const PresentationContextProvider = plugins.presentationUtil?.ContextProvider ?? React.Fragment;
 
+  const clearScreenContext = plugins.observabilityAIAssistant.service.setScreenContext({
+    starterPrompts: ['Do I have any alerts?', 'How can I create a new rule?', 'What are cases?'],
+  });
+
   ReactDOM.render(
     <PresentationContextProvider>
       <EuiErrorBoundary>
@@ -141,6 +145,7 @@ export const renderApp = ({
     // via the ExploratoryView app, which uses search sessions. Therefore on unmounting we need to clear
     // these sessions.
     plugins.data.search.session.clear();
+    clearScreenContext();
     ReactDOM.unmountComponentAtNode(element);
   };
 };

x-pack/plugins/observability_solution/observability_ai_assistant/common/types.ts

@@ -112,4 +112,5 @@ export interface ObservabilityAIAssistantScreenContext {
     value: any;
   }>;
   actions?: ScreenContextActionDefinition[];
+  starterPrompts?: string[];
 }

x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/chat/chat_body.tsx

@@ -37,11 +37,13 @@ import type { UseKnowledgeBaseResult } from '../../hooks/use_knowledge_base';
 import { useLicense } from '../../hooks/use_license';
 import { useObservabilityAIAssistantChatService } from '../../hooks/use_observability_ai_assistant_chat_service';
 import { ASSISTANT_SETUP_TITLE, EMPTY_CONVERSATION_TITLE, UPGRADE_LICENSE_TITLE } from '../../i18n';
+import { nonNullable } from '../../utils/non_nullable';
 import { PromptEditor } from '../prompt_editor/prompt_editor';
 import { FlyoutPositionMode } from './chat_flyout';
 import { ChatHeader } from './chat_header';
 import { ChatTimeline } from './chat_timeline';
 import { IncorrectLicensePanel } from './incorrect_license_panel';
+import { StarterPrompts } from './starter_prompts';
 import { WelcomeMessage } from './welcome_message';
 
 const fullHeightClassName = css`
@@ -339,30 +341,69 @@ export function ChatBody({
               className={animClassName}
             >
               {connectors.connectors?.length === 0 || messages.length === 1 ? (
-                <WelcomeMessage connectors={connectors} knowledgeBase={knowledgeBase} />
-              ) : (
-                <ChatTimeline
-                  messages={messages}
+                <WelcomeMessage
+                  connectors={connectors}
                   knowledgeBase={knowledgeBase}
-                  chatService={chatService}
-                  currentUser={currentUser}
-                  chatState={state}
-                  hasConnector={!!connectors.connectors?.length}
-                  onEdit={(editedMessage, newMessage) => {
-                    setStickToBottom(true);
-                    const indexOf = messages.indexOf(editedMessage);
-                    next(messages.slice(0, indexOf).concat(newMessage));
-                  }}
-                  onFeedback={handleFeedback}
-                  onRegenerate={(message) => {
-                    next(reverseToLastUserMessage(messages, message));
-                  }}
-                  onSendTelemetry={(eventWithPayload) =>
-                    chatService.sendAnalyticsEvent(eventWithPayload)
+                  onSelectPrompt={(message) =>
+                    next(
+                      messages.concat([
+                        {
+                          '@timestamp': new Date().toISOString(),
+                          message: { content: message, role: MessageRole.User },
+                        },
+                      ])
+                    )
                   }
-                  onStopGenerating={stop}
-                  onActionClick={handleActionClick}
                 />
+              ) : (
+                <>
+                  <ChatTimeline
+                    messages={messages}
+                    knowledgeBase={knowledgeBase}
+                    chatService={chatService}
+                    currentUser={currentUser}
+                    chatState={state}
+                    hasConnector={!!connectors.connectors?.length}
+                    onEdit={(editedMessage, newMessage) => {
+                      setStickToBottom(true);
+                      const indexOf = messages.indexOf(editedMessage);
+                      next(messages.slice(0, indexOf).concat(newMessage));
+                    }}
+                    onFeedback={handleFeedback}
+                    onRegenerate={(message) => {
+                      next(reverseToLastUserMessage(messages, message));
+                    }}
+                    onSendTelemetry={(eventWithPayload) =>
+                      chatService.sendAnalyticsEvent(eventWithPayload)
+                    }
+                    onStopGenerating={() => {
+                      stop();
+                    }}
+                    onActionClick={handleActionClick}
+                  />
+
+                  {!isLoading ? (
+                    <>
+                      <StarterPrompts
+                        userPrompts={messages
+                          .filter((message) => message.message.role === MessageRole.User)
+                          .map((message) => message.message.content)
+                          .filter(nonNullable)}
+                        onSelectPrompt={(message) =>
+                          next(
+                            messages.concat([
+                              {
+                                '@timestamp': new Date().toISOString(),
+                                message: { content: message, role: MessageRole.User },
+                              },
+                            ])
+                          )
+                        }
+                      />
+                      <EuiSpacer size="l" />
+                    </>
+                  ) : null}
+                </>
               )}
             </EuiPanel>
           </div>

x-pack/plugins/observability_solution/observability_ai_assistant_app/public/components/chat/starter_prompts.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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, { useMemo } from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { css } from '@emotion/css';
+import { useObservabilityAIAssistantAppService } from '../../hooks/use_observability_ai_assistant_app_service';
+import { nonNullable } from '../../utils/non_nullable';
+
+const starterPromptClassName = css`
+  max-width: 50%;
+  min-width: calc(50% - 8px);
+`;
+
+export function StarterPrompts({
+  userPrompts,
+  onSelectPrompt,
+}: {
+  userPrompts: string[];
+  onSelectPrompt: (prompt: string) => void;
+}) {
+  const service = useObservabilityAIAssistantAppService();
+
+  const starterPrompts = useMemo(
+    () => [
+      ...new Set(
+        service
+          .getScreenContexts()
+          .reverse()
+          .flatMap((context) => context.starterPrompts)
+          .filter(nonNullable)
+          .filter((prompt) => !userPrompts.includes(prompt))
+          .slice(0, 4)
+      ),
+    ],
+    [service, userPrompts]
+  );
+
+  const handleSelectPrompt = (prompt: string) => {
+    onSelectPrompt(prompt);
+  };
+
+  return (
+    <EuiFlexGroup direction="row" gutterSize="m" wrap>
+      {starterPrompts.map((prompt) => (
+        <EuiFlexItem key={prompt} className={starterPromptClassName}>
+          <EuiPanel paddingSize="s" onClick={() => handleSelectPrompt(prompt)}>
+            {prompt}
+          </EuiPanel>
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+}