[Security Assistant] Starter prompts

x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/api/security_ai_prompts/use_find_prompts.ts

@@ -19,7 +19,7 @@ export interface UseFindPromptsParams {
   context: {
     isAssistantEnabled: boolean;
     httpFetch: HttpHandler;
-    toasts: IToasts;
+    toasts?: IToasts;
   };
   signal?: AbortSignal | undefined;
   params: FindSecurityAIPromptsRequestQuery;
@@ -82,7 +82,7 @@ const getPrompts = async ({
   query,
 }: {
   httpFetch: HttpHandler;
-  toasts: IToasts;
+  toasts?: IToasts;
   signal?: AbortSignal | undefined;
   query: FindSecurityAIPromptsRequestQuery;
 }) => {

x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/empty_convo.tsx

@@ -10,27 +10,42 @@ import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { PromptResponse } from '@kbn/elastic-assistant-common';
 import { AssistantBeacon } from '@kbn/ai-assistant-icon';
+import { useAssistantContext } from '../../..';
+import { StarterPrompts } from './starter_prompts';
 import { SystemPrompt } from '../prompt_editor/system_prompt';
 import { SetupKnowledgeBaseButton } from '../../knowledge_base/setup_knowledge_base_button';
 import * as i18n from '../translations';
 
 interface Props {
+  connectorId?: string;
   currentSystemPromptId: string | undefined;
   isSettingsModalVisible: boolean;
   setIsSettingsModalVisible: Dispatch<SetStateAction<boolean>>;
   setCurrentSystemPromptId: (promptId: string | undefined) => void;
   allSystemPrompts: PromptResponse[];
+  setUserPrompt: React.Dispatch<React.SetStateAction<string | null>>;
 }
+const starterPromptWrapperClassName = css`
+  max-width: 95%;
+`;
 
 export const EmptyConvo: React.FC<Props> = ({
   allSystemPrompts,
+  connectorId,
   currentSystemPromptId,
   isSettingsModalVisible,
   setCurrentSystemPromptId,
   setIsSettingsModalVisible,
+  setUserPrompt,
 }) => {
+  const { assistantAvailability } = useAssistantContext();
   return (
-    <EuiFlexGroup alignItems="center" justifyContent="center" data-test-subj="emptyConvo">
+    <EuiFlexGroup
+      alignItems="center"
+      justifyContent="spaceBetween"
+      data-test-subj="emptyConvo"
+      direction="column"
+    >
       <EuiFlexItem grow={false}>
         <EuiPanel
           hasShadow={false}
@@ -64,6 +79,11 @@ export const EmptyConvo: React.FC<Props> = ({
           </EuiFlexGroup>
         </EuiPanel>
       </EuiFlexItem>
+      {assistantAvailability.isStarterPromptsEnabled && (
+        <EuiFlexItem grow={false} css={starterPromptWrapperClassName}>
+          <StarterPrompts connectorId={connectorId} setUserPrompt={setUserPrompt} />
+        </EuiFlexItem>
+      )}
     </EuiFlexGroup>
   );
 };

x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/index.tsx

@@ -43,6 +43,7 @@ interface Props {
   http: HttpSetup;
   setCurrentSystemPromptId: (promptId: string | undefined) => void;
   setIsSettingsModalVisible: Dispatch<SetStateAction<boolean>>;
+  setUserPrompt: React.Dispatch<React.SetStateAction<string | null>>;
 }
 
 export const AssistantBody: FunctionComponent<Props> = ({
@@ -58,6 +59,7 @@ export const AssistantBody: FunctionComponent<Props> = ({
   isSettingsModalVisible,
   isWelcomeSetup,
   setIsSettingsModalVisible,
+  setUserPrompt,
 }) => {
   const { euiTheme } = useEuiTheme();
 
@@ -109,7 +111,7 @@ export const AssistantBody: FunctionComponent<Props> = ({
 
   return (
     <EuiFlexGroup direction="column" justifyContent="spaceBetween">
-      <EuiFlexItem grow={false}>
+      <EuiFlexItem>
         {isLoading ? (
           <EuiEmptyPrompt
             data-test-subj="animatedLogo"
@@ -127,6 +129,8 @@ export const AssistantBody: FunctionComponent<Props> = ({
             isSettingsModalVisible={isSettingsModalVisible}
             setCurrentSystemPromptId={setCurrentSystemPromptId}
             setIsSettingsModalVisible={setIsSettingsModalVisible}
+            setUserPrompt={setUserPrompt}
+            connectorId={currentConversation?.apiConfig?.connectorId}
           />
         ) : (
           <EuiPanel

x-pack/platform/packages/shared/kbn-elastic-assistant/impl/assistant/assistant_body/starter_prompts.test.tsx

@@ -0,0 +1,161 @@
+/*
+ * 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 {
+  formatPromptGroups,
+  getAllPromptIds,
+  promptGroups,
+  StarterPrompts,
+} from './starter_prompts';
+import { fireEvent, render } from '@testing-library/react';
+import { TestProviders } from '../../mock/test_providers/test_providers';
+import React from 'react';
+import { useFindPrompts } from '../../..';
+const mockResponse = [
+  {
+    promptId: 'starterPromptTitle1',
+    prompt: 'starterPromptTitle1 from API yall',
+  },
+  {
+    promptId: 'starterPromptDescription1',
+    prompt: 'starterPromptDescription1 from API yall',
+  },
+  {
+    promptId: 'starterPromptIcon1',
+    prompt: 'starterPromptIcon1 from API yall',
+  },
+  {
+    promptId: 'starterPromptPrompt1',
+    prompt: 'starterPromptPrompt1 from API yall',
+  },
+  {
+    promptId: 'starterPromptDescription2',
+    prompt: 'starterPromptDescription2 from API yall',
+  },
+  {
+    promptId: 'starterPromptTitle2',
+    prompt: 'starterPromptTitle2 from API yall',
+  },
+  {
+    promptId: 'starterPromptIcon2',
+    prompt: 'starterPromptIcon2 from API yall',
+  },
+  {
+    promptId: 'starterPromptPrompt2',
+    prompt: 'starterPromptPrompt2 from API yall',
+  },
+  {
+    promptId: 'starterPromptDescription3',
+    prompt: 'starterPromptDescription3 from API yall',
+  },
+  {
+    promptId: 'starterPromptTitle3',
+    prompt: 'starterPromptTitle3 from API yall',
+  },
+  {
+    promptId: 'starterPromptIcon3',
+    prompt: 'starterPromptIcon3 from API yall',
+  },
+  {
+    promptId: 'starterPromptPrompt3',
+    prompt: 'starterPromptPrompt3 from API yall',
+  },
+  {
+    promptId: 'starterPromptDescription4',
+    prompt: 'starterPromptDescription4 from API yall',
+  },
+  {
+    promptId: 'starterPromptTitle4',
+    prompt: 'starterPromptTitle4 from API yall',
+  },
+  {
+    promptId: 'starterPromptPrompt4',
+    prompt: 'starterPromptPrompt4 from API yall',
+  },
+];
+
+const testProps = {
+  setUserPrompt: jest.fn(),
+};
+
+jest.mock('../../..', () => {
+  return {
+    useFindPrompts: jest.fn(),
+    useAssistantContext: () => ({
+      assistantAvailability: {
+        isAssistantEnabled: true,
+      },
+      http: { fetch: {} },
+    }),
+  };
+});
+
+describe('StarterPrompts', () => {
+  it('should return an empty array if no prompts are provided', () => {
+    expect(getAllPromptIds(promptGroups)).toEqual([
+      'starterPromptTitle1',
+      'starterPromptDescription1',
+      'starterPromptIcon1',
+      'starterPromptPrompt1',
+      'starterPromptDescription2',
+      'starterPromptTitle2',
+      'starterPromptIcon2',
+      'starterPromptPrompt2',
+      'starterPromptDescription3',
+      'starterPromptTitle3',
+      'starterPromptIcon3',
+      'starterPromptPrompt3',
+      'starterPromptDescription4',
+      'starterPromptTitle4',
+      'starterPromptIcon4',
+      'starterPromptPrompt4',
+    ]);
+  });
+  it('should return the correct prompt groups with fetched prompts', () => {
+    const response = formatPromptGroups(mockResponse);
+    expect(response).toEqual([
+      {
+        description: 'starterPromptDescription1 from API yall',
+        icon: 'starterPromptIcon1 from API yall',
+        prompt: 'starterPromptPrompt1 from API yall',
+        title: 'starterPromptTitle1 from API yall',
+      },
+      {
+        description: 'starterPromptDescription2 from API yall',
+        icon: 'starterPromptIcon2 from API yall',
+        prompt: 'starterPromptPrompt2 from API yall',
+        title: 'starterPromptTitle2 from API yall',
+      },
+      {
+        description: 'starterPromptDescription3 from API yall',
+        icon: 'starterPromptIcon3 from API yall',
+        prompt: 'starterPromptPrompt3 from API yall',
+        title: 'starterPromptTitle3 from API yall',
+      },
+      // starterPrompt Group4 should not exist because starterPromptIcon4 is not in the mockResponse
+    ]);
+  });
+  it('the component renders correctly with valid props', () => {
+    (useFindPrompts as jest.Mock).mockReturnValue({ data: { prompts: mockResponse } });
+    const { getByTestId } = render(
+      <TestProviders>
+        <StarterPrompts {...testProps} />
+      </TestProviders>
+    );
+    expect(getByTestId('starterPromptPrompt2 from API yall')).toBeInTheDocument();
+  });
+  it('calls setUserPrompt when a prompt is selected', () => {
+    (useFindPrompts as jest.Mock).mockReturnValue({ data: { prompts: mockResponse } });
+    const { getByTestId } = render(
+      <TestProviders>
+        <StarterPrompts {...testProps} />
+      </TestProviders>
+    );
+    fireEvent.click(getByTestId('starterPromptPrompt2 from API yall'));
+    expect(testProps.setUserPrompt).toHaveBeenCalledWith('starterPromptPrompt2 from API yall');
+  });
+});