Add welcome prompts to chatbot and related tests (#1719)

Introduced predefined welcome prompts to the AnsibleChatbot component, allowing users to quickly send common queries. Added tests to verify that all welcome prompts are rendered and that clicking a prompt sends the correct message.

Update test to match new API call signature

Adjusted the test for clicking a welcome prompt to expect the updated API call parameters, reflecting changes in the request payload structure.

Refactor test to use getByRole for welcome prompt button

Updated the test to select the welcome prompt button using getByRole with the button's accessible name instead of getByText. This improves test reliability and accessibility alignment.

Author: mabashian

ansible_ai_connect_chatbot/src/AnsibleChatbot/AnsibleChatbot.tsx

@@ -129,6 +129,26 @@ export const AnsibleChatbot: React.FunctionComponent = () => {
     handleStopButton,
     isStreamingSupported,
   } = useChatbot();
+
+  const welcomePrompts = [
+    {
+      title: "Using Ansible Automation Platform",
+      message: "I have a question about Ansible Automation Platform",
+    },
+    {
+      title: "Containerized Installation",
+      message: "I want to install AAP using the containerized installer",
+    },
+    {
+      title: "RPM Installation",
+      message: "I want to install AAP using the RPM installer",
+    },
+  ].map((prompt) => ({
+    title: prompt.title,
+    message: prompt.message,
+    onClick: () => handleSend(prompt.message),
+  }));
+
   const [chatbotVisible, setChatbotVisible] = useState<boolean>(true);
   const [displayMode, setDisplayMode] = useState<ChatbotDisplayMode>(
     ChatbotDisplayMode.fullscreen,
@@ -330,6 +350,7 @@ export const AnsibleChatbot: React.FunctionComponent = () => {
                   <ChatbotWelcomePrompt
                     title="Hello, Ansible User"
                     description="How may I help you today?"
+                    prompts={welcomePrompts}
                   />
                   {alertMessage && (
                     <ChatbotAlert

ansible_ai_connect_chatbot/src/App.test.tsx

@@ -892,3 +892,35 @@ test("Test reset conversation state once unmounting the component.", async () =>
   view.unmount();
   assert(conversationStore.size === 0);
 });
+
+test("Clicking a welcome prompt sends the correct message", async () => {
+  const spy = mockAxios(200);
+  const view = await renderApp();
+
+  const promptButton = view.getByRole("button", {
+    name: "Using Ansible Automation Platform",
+  });
+  expect(promptButton).toBeVisible();
+
+  await userEvent.click(promptButton);
+
+  expect(spy).toHaveBeenCalledWith(
+    expect.anything(),
+    expect.objectContaining({
+      conversation_id: undefined,
+      query: "I have a question about Ansible Automation Platform",
+    }),
+    expect.anything(),
+  );
+});
+
+test("All welcome prompts are rendered", async () => {
+  const view = await renderApp();
+  await expect
+    .element(view.getByText("Using Ansible Automation Platform"))
+    .toBeVisible();
+  await expect
+    .element(view.getByText("Containerized Installation"))
+    .toBeVisible();
+  await expect(view.getByText("RPM Installation")).toBeVisible();
+});