Address feedback

elastic · Mar 19, 2024 · 7643392 · 7643392
1 parent 7f0fcdc
commit 7643392
Show file tree

Hide file tree

Showing 9 changed files with 260 additions and 69 deletions.
diff --git a/x-pack/plugins/observability_solution/observability/public/application/index.tsx b/x-pack/plugins/observability_solution/observability/public/application/index.tsx
@@ -87,7 +87,62 @@ export const renderApp = ({
   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?'],
+    starterPrompts: [
+      {
+        title: i18n.translate(
+          'xpack.observability.aiAssistant.starterPrompts.doIHaveAlerts.title',
+          {
+            defaultMessage: 'Alerting',
+          }
+        ),
+        prompt: i18n.translate(
+          'xpack.observability.aiAssistant.starterPrompts.doIHaveAlerts.prompt',
+          {
+            defaultMessage: 'Do I have any alerts?',
+          }
+        ),
+        icon: 'bell',
+      },
+      {
+        title: i18n.translate(
+          'xpack.observability.aiAssistant.starterPrompts.howCanICreateANewRule.title',
+          {
+            defaultMessage: 'Rule creation',
+          }
+        ),
+        prompt: i18n.translate(
+          'xpack.observability.aiAssistant.starterPrompts.howCanICreateANewRule.prompt',
+          {
+            defaultMessage: 'How can I create a new rule?',
+          }
+        ),
+        icon: 'createSingleMetricJob',
+      },
+      {
+        title: i18n.translate('xpack.observability.aiAssistant.starterPrompts.whatAreCases.title', {
+          defaultMessage: 'Cases',
+        }),
+        prompt: i18n.translate(
+          'xpack.observability.aiAssistant.starterPrompts.whatAreCases.prompt',
+          {
+            defaultMessage: 'What are cases?',
+          }
+        ),
+        icon: 'casesApp',
+      },
+      {
+        title: i18n.translate('xpack.observability.aiAssistant.starterPrompts.whatAreSlos.title', {
+          defaultMessage: 'SLOs',
+        }),
+        prompt: i18n.translate(
+          'xpack.observability.aiAssistant.starterPrompts.whatAreSlos.prompt',
+          {
+            defaultMessage: 'What are SLOs?',
+          }
+        ),
+        icon: 'bullseye',
+      },
+    ],
   });
 
   ReactDOM.render(

diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant/common/types.ts b/x-pack/plugins/observability_solution/observability_ai_assistant/common/types.ts
@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import { IconType } from '@elastic/eui';
 import type { ObservabilityAIAssistantChatService } from '../public';
 import type { CompatibleJSONSchema, FunctionResponse } from './functions/types';
 
@@ -104,6 +105,12 @@ export interface ScreenContextActionDefinition<TArguments = undefined> {
   respond: ScreenContextActionRespondFunction<TArguments>;
 }
 
+export interface StarterPrompt {
+  title: string;
+  prompt: string;
+  icon: IconType;
+}
+
 export interface ObservabilityAIAssistantScreenContext {
   screenDescription?: string;
   data?: Array<{
@@ -112,5 +119,5 @@ export interface ObservabilityAIAssistantScreenContext {
     value: any;
   }>;
   actions?: ScreenContextActionDefinition[];
-  starterPrompts?: string[];
+  starterPrompts?: StarterPrompt[];
 }
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant/public/plugin.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant/public/plugin.tsx
@@ -10,6 +10,7 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import type { Logger } from '@kbn/logging';
 import { withSuspense } from '@kbn/shared-ux-utility';
 import React, { type ComponentType, lazy, type Ref } from 'react';
+import { i18n } from '@kbn/i18n';
 import { registerTelemetryEventTypes } from './analytics';
 import { ObservabilityAIAssistantChatServiceContext } from './context/observability_ai_assistant_chat_service_context';
 import { ObservabilityAIAssistantMultipaneFlyoutContext } from './context/observability_ai_assistant_multipane_flyout_context';
@@ -41,6 +42,7 @@ export class ObservabilityAIAssistantPlugin
 {
   logger: Logger;
   service?: ObservabilityAIAssistantService;
+  clearScreenContext?: () => void;
 
   constructor(context: PluginInitializerContext<ConfigSchema>) {
     this.logger = context.logger.get();
@@ -64,6 +66,66 @@ export class ObservabilityAIAssistantPlugin
       enabled: coreStart.application.capabilities.observabilityAIAssistant.show === true,
     }));
 
+    this.clearScreenContext = service.setScreenContext({
+      starterPrompts: [
+        {
+          title: i18n.translate(
+            'xpack.observabilityAiAssistant.starterPrompts.doIHaveAlerts.title',
+            { defaultMessage: 'Alerts' }
+          ),
+          prompt: i18n.translate(
+            'xpack.observabilityAiAssistant.starterPrompts.doIHaveAlerts.prompt',
+            {
+              defaultMessage: 'Do I have any alerts?',
+            }
+          ),
+          icon: 'bell',
+        },
+        {
+          title: i18n.translate(
+            'xpack.observabilityAiAssistant.starterPrompts.howCanICreateANewRule.title',
+            {
+              defaultMessage: 'Rule creation',
+            }
+          ),
+          prompt: i18n.translate(
+            'xpack.observabilityAiAssistant.starterPrompts.howCanICreateANewRule.prompt',
+            {
+              defaultMessage: 'How can I create a new rule?',
+            }
+          ),
+          icon: 'createSingleMetricJob',
+        },
+        {
+          title: i18n.translate(
+            'xpack.observabilityAiAssistant.starterPrompts.whatAreCases.title',
+            {
+              defaultMessage: 'Cases',
+            }
+          ),
+          prompt: i18n.translate(
+            'xpack.observabilityAiAssistant.starterPrompts.whatAreCases.prompt',
+            {
+              defaultMessage: 'What are cases?',
+            }
+          ),
+          icon: 'casesApp',
+        },
+        {
+          title: i18n.translate('xpack.observabilityAiAssistant.starterPrompts.whatAreSlos.title', {
+            defaultMessage: 'SLOs',
+          }),
+          prompt: i18n.translate(
+            'xpack.observabilityAiAssistant.starterPrompts.whatAreSlos.prompt',
+            {
+              defaultMessage: 'What are SLOs?',
+            }
+          ),
+          icon: 'bullseye',
+        },
+      ],
+    });
+
     const withProviders = <P extends {}, R = {}>(
       Component: ComponentType<P>,
       services: Omit<CoreStart, 'plugins'> & {
@@ -111,4 +173,8 @@ export class ObservabilityAIAssistantPlugin
       createScreenContextAction,
     };
   }
+
+  stop() {
+    this.clearScreenContext?.();
+  }
 }
diff --git a/...bservability_solution/observability_ai_assistant_app/public/components/chat/chat_body.tsx b/...bservability_solution/observability_ai_assistant_app/public/components/chat/chat_body.tsx
@@ -37,13 +37,11 @@ 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`
@@ -356,54 +354,30 @@ export function ChatBody({
                   }
                 />
               ) : (
-                <>
-                  <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}
-                </>
+                <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}
+                />
               )}
             </EuiPanel>
           </div>

diff --git a/...bility_solution/observability_ai_assistant_app/public/components/chat/starter_prompts.tsx b/...bility_solution/observability_ai_assistant_app/public/components/chat/starter_prompts.tsx
@@ -5,7 +5,15 @@
  * 2.0.
  */
 import React, { useMemo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiIcon,
+  EuiPanel,
+  EuiSpacer,
+  EuiText,
+  EuiTitle,
+} from '@elastic/eui';
 import { css } from '@emotion/css';
 import { useObservabilityAIAssistantAppService } from '../../hooks/use_observability_ai_assistant_app_service';
 import { nonNullable } from '../../utils/non_nullable';
@@ -15,28 +23,26 @@ const starterPromptClassName = css`
   min-width: calc(50% - 8px);
 `;
 
-export function StarterPrompts({
-  userPrompts,
-  onSelectPrompt,
-}: {
-  userPrompts: string[];
-  onSelectPrompt: (prompt: string) => void;
-}) {
+const starterPromptInnerClassName = css`
+  text-align: center !important;
+`;
+
+export function StarterPrompts({ onSelectPrompt }: { onSelectPrompt: (prompt: string) => void }) {
   const service = useObservabilityAIAssistantAppService();
 
+  const contexts = service.getScreenContexts();
+
   const starterPrompts = useMemo(
     () => [
       ...new Set(
-        service
-          .getScreenContexts()
+        contexts
           .reverse()
           .flatMap((context) => context.starterPrompts)
           .filter(nonNullable)
-          .filter((prompt) => !userPrompts.includes(prompt))
           .slice(0, 4)
       ),
     ],
-    [service, userPrompts]
+    [contexts]
   );
 
   const handleSelectPrompt = (prompt: string) => {
@@ -45,10 +51,22 @@ export function StarterPrompts({
 
   return (
     <EuiFlexGroup direction="row" gutterSize="m" wrap>
-      {starterPrompts.map((prompt) => (
+      {starterPrompts.map(({ prompt, title, icon }) => (
         <EuiFlexItem key={prompt} className={starterPromptClassName}>
-          <EuiPanel paddingSize="s" onClick={() => handleSelectPrompt(prompt)}>
-            {prompt}
+          <EuiPanel
+            paddingSize="m"
+            hasShadow={false}
+            hasBorder
+            onClick={() => handleSelectPrompt(prompt)}
+            className={starterPromptInnerClassName}
+          >
+            <EuiSpacer size="s" />
+            <EuiIcon type={icon} size="xl" />
+            <EuiSpacer size="s" />
+            <EuiTitle size="xs">
+              <h2>{title}</h2>
+            </EuiTitle>
+            <EuiText size="s">{prompt}</EuiText>
           </EuiPanel>
         </EuiFlexItem>
       ))}

diff --git a/...bility_solution/observability_ai_assistant_app/public/components/chat/welcome_message.tsx b/...bility_solution/observability_ai_assistant_app/public/components/chat/welcome_message.tsx
@@ -92,7 +92,7 @@ export function WelcomeMessage({
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-          <StarterPrompts userPrompts={[]} onSelectPrompt={onSelectPrompt} />
+          <StarterPrompts onSelectPrompt={onSelectPrompt} />
 
           <EuiSpacer size="l" />
           <Disclaimer />