chore(ai): initial ai conversation e2e tests

examples/next/pages/ui/components/ai/ai-conversation/index.page.tsx

@@ -7,6 +7,7 @@ import '@aws-amplify/ui-react-ai/ai-conversation-styles.css';
 import outputs from './amplify_outputs';
 import type { Schema } from '@environments/ai/gen2/amplify/data/resource';
 import { Authenticator, Card } from '@aws-amplify/ui-react';
+import React from 'react';
 
 const client = generateClient<Schema>({ authMode: 'userPool' });
 const { useAIConversation } = createAIHooks(client);
@@ -29,24 +30,33 @@ function Chat() {
     sendMessage,
   ] = useAIConversation('pirateChat');
 
+  const displayText = React.useMemo(() => {
+    return { getMessageTimestampText: formatDate };
+  }, []);
+
+  const suggestedPrompts = React.useMemo(
+    () => [
+      {
+        inputText: 'hello',
+        header: 'hello',
+      },
+      {
+        inputText: 'how are you?',
+        header: 'how are you?',
+      },
+    ],
+    []
+  );
+
   return (
     <Card variation="outlined" width="50%" height="300px" margin="0 auto">
       <AIConversation
-        displayText={{ getMessageTimestampText: formatDate }}
+        displayText={displayText}
         messages={messages}
         handleSendMessage={sendMessage}
         isLoading={isLoading}
+        suggestedPrompts={suggestedPrompts}
         allowAttachments
-        suggestedPrompts={[
-          {
-            inputText: 'hello',
-            header: 'hello',
-          },
-          {
-            inputText: 'how are you?',
-            header: 'how are you?',
-          },
-        ]}
         variant="bubble"
       />
     </Card>

packages/e2e/cypress/integration/common/ai.ts

@@ -0,0 +1,23 @@
+import { Then } from '@badeball/cypress-cucumber-preprocessor';
+import { escapeRegExp } from 'lodash';
+
+Then('I type {string}', (message: string) => {
+  cy.findByTestId('text-input').type(message);
+});
+
+Then('I click the send message button', () => {
+  cy.get("[type='submit']").click();
+});
+
+Then('I see {string} in the text input', (message: string) => {
+  cy.get('[data-testid="text-input"]')
+    .find('textarea')
+    .should('have.value', message);
+});
+
+Then('I click the {string} prompt', (name: string) => {
+  cy.wait(2500); // todo: remove this once we figure out what's causing re-render
+  cy.findByRole('button', {
+    name: new RegExp(`^${escapeRegExp(name)}$`, 'i'),
+  }).click();
+});

packages/e2e/features/ui/components/ai/conversation.feature

@@ -0,0 +1,29 @@
+Feature: AI Conversation
+
+  Test AI Conversation component
+
+  Background:
+    Given I'm running the example "ui/components/ai/ai-conversation"
+
+  @react
+  Scenario: See conversation window
+      When I type my "email" with status "CONFIRMED"
+      Then I type my password
+      Then I click the "Sign in" button
+      Then I see "how are you?"
+      Then I see "text-input" element
+      Then I type "What is your name?"
+      Then I click the send message button
+      Then I see "Argh the time be round"
+
+  @react
+  Scenario: See conversation window and suggested prompts
+      When I type my "email" with status "CONFIRMED"
+      Then I type my password
+      Then I click the "Sign in" button
+      Then I see "how are you?"
+      Then I click the "how are you?" prompt
+      Then I see "how are you?" in the text input
+      Then I click the send message button
+      Then I see "Argh the time be round"
+

packages/e2e/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "clean": "rimraf node_modules",
     "dev": "cypress open",
+    "test:ai": "cypress run --spec 'features/ui/components/ai/*.feature' --browser chrome",
     "test:examples": "cypress run --spec 'features/ui/hooks/*.feature','features/ui/components/**/*.feature' --browser chrome",
     "test:authenticator": "cypress run --spec 'features/ui/components/authenticator/*.feature' --browser chrome",
     "test:hooks": "cypress run --spec 'features/ui/hooks/*.feature' --browser chrome",

packages/react-ai/src/components/AIConversation/AIConversation.tsx

@@ -44,26 +44,37 @@ function AIConversationBase({
     },
   };
 
-  const Provider = createProvider({
-    elements: {
-      Text: React.forwardRef<HTMLParagraphElement, TextProps>(
-        function _Text(props, ref) {
-          return <Text {...props} ref={ref} />;
-        }
-      ),
-    },
-    actions,
-    suggestedPrompts,
-    responseComponents,
-    variant,
-    controls: {
-      MessageList,
-      PromptList,
-      Form,
-      ...controls,
-    },
-    displayText,
-  });
+  const Provider = React.useMemo(
+    () =>
+      createProvider({
+        elements: {
+          Text: React.forwardRef<HTMLParagraphElement, TextProps>(
+            function _Text(props, ref) {
+              return <Text {...props} ref={ref} />;
+            }
+          ),
+        },
+        actions,
+        suggestedPrompts,
+        responseComponents,
+        variant,
+        controls: {
+          MessageList,
+          PromptList,
+          Form,
+          ...controls,
+        },
+        displayText,
+      }),
+    [
+      actions,
+      controls,
+      displayText,
+      responseComponents,
+      suggestedPrompts,
+      variant,
+    ]
+  );
 
   const providerProps = {
     messages,