AIConversation: custom actions accept a react node (#5999)

.changeset/ten-jokes-reply.md

@@ -0,0 +1,19 @@
+---
+"@aws-amplify/ui-react-ai": minor
+"@aws-amplify/ui": patch
+---
+
+chore: ai cleanup
+
+```jsx
+<AIConversation
+  messages={messages}
+  handleSendMessage={handleSendMessage}
+  actions={[
+    {
+      component: <MdCopyAll />,
+      handler: (message) => {},
+    }
+  ]}
+/>
+```

docs/__tests__/__snapshots__/cssvars-table.test.ts.snap

@@ -686,6 +686,10 @@ exports[`CSS Variables Table 1`] = `
         "variable": "--amplify-components-ai-conversation-form-padding",
         "value": "var(--amplify-space-small)"
     },
+    {
+        "variable": "--amplify-components-ai-conversation-message-actions-gap",
+        "value": "var(--amplify-space-xs)"
+    },
     {
         "variable": "--amplify-components-ai-conversation-message-assistant-background-color",
         "value": "var(--amplify-colors-primary-10)"

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

@@ -3,7 +3,6 @@ import { Amplify } from 'aws-amplify';
 import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai';
 import { generateClient } from 'aws-amplify/api';
 import '@aws-amplify/ui-react/styles.css';
-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';

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

@@ -2,12 +2,12 @@ import { Amplify } from 'aws-amplify';
 import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai';
 import { generateClient } from 'aws-amplify/api';
 import '@aws-amplify/ui-react/styles.css';
-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, Text } from '@aws-amplify/ui-react';
 import Image from 'next/image';
+import { INITIAL_MESSAGES } from '../constants';
 
 const client = generateClient<Schema>({ authMode: 'userPool' });
 const { useAIConversation } = createAIHooks(client);
@@ -37,20 +37,11 @@ function convertBufferToBase64(buffer: ArrayBuffer, format: string): string {
 }
 
 function Chat() {
-  const [
-    {
-      data: { messages },
-      isLoading,
-    },
-    sendMessage,
-  ] = useAIConversation('pirateChat');
-
   return (
     <Card variation="outlined" width="50%" height="300px" margin="0 auto">
       <AIConversation
-        messages={messages}
-        handleSendMessage={sendMessage}
-        isLoading={isLoading}
+        messages={INITIAL_MESSAGES}
+        handleSendMessage={() => {}}
         allowAttachments
         messageRenderer={{
           text: ({ text }) => <Text className="testing">{text}</Text>,

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

@@ -3,7 +3,6 @@ import React from 'react';
 import { createAIConversation } from '@aws-amplify/ui-react-ai';
 import { ACTIONS, AVATARS, INITIAL_MESSAGES, PROMPTS } from '../constants';
 import '@aws-amplify/ui-react/styles.css';
-import '@aws-amplify/ui-react-ai/ai-conversation-styles.css';
 
 const { AIConversation } = createAIConversation({
   suggestedPrompts: PROMPTS,

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

@@ -0,0 +1,47 @@
+import { MdCopyAll } from 'react-icons/md';
+import { AIConversation } from '@aws-amplify/ui-react-ai';
+import '@aws-amplify/ui-react/styles.css';
+
+import { Authenticator, Card } from '@aws-amplify/ui-react';
+import { INITIAL_MESSAGES } from '../../constants';
+
+function Chat() {
+  return (
+    <Card variation="outlined" width="50%" height="300px" margin="0 auto">
+      <AIConversation
+        messages={INITIAL_MESSAGES}
+        handleSendMessage={() => {}}
+        actions={[
+          {
+            component: <MdCopyAll />,
+            handler: (message) => console.log(message),
+          },
+          {
+            component: <MdCopyAll />,
+            handler: (message) => console.log(message),
+          },
+        ]}
+        allowAttachments
+        suggestedPrompts={[
+          {
+            inputText: 'hello',
+            component: 'hello',
+          },
+          {
+            inputText: 'how are you?',
+            component: 'how are you?',
+          },
+        ]}
+        variant="bubble"
+      />
+    </Card>
+  );
+}
+
+export default function Example() {
+  return (
+    <Authenticator>
+      <Chat />
+    </Authenticator>
+  );
+}

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

@@ -2,7 +2,6 @@ import { Amplify } from 'aws-amplify';
 import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai';
 import { generateClient } from 'aws-amplify/api';
 import '@aws-amplify/ui-react/styles.css';
-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';

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

@@ -3,7 +3,6 @@ import { createAIConversation, createAIHooks } from '@aws-amplify/ui-react-ai';
 import { generateClient } from 'aws-amplify/api';
 import { Authenticator } from '@aws-amplify/ui-react';
 import '@aws-amplify/ui-react/styles.css';
-import '@aws-amplify/ui-react-ai/ai-conversation-styles.css';
 
 import outputs from './amplify_outputs.js';
 import type { Schema } from '@environments/ai/gen2/amplify/data/resource';

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

@@ -2,7 +2,6 @@ import { Amplify } from 'aws-amplify';
 import { createAIHooks } from '@aws-amplify/ui-react-ai';
 import { generateClient } from 'aws-amplify/api';
 import '@aws-amplify/ui-react/styles.css';
-import '@aws-amplify/ui-react-ai/ai-conversation-styles.css';
 
 import outputs from './amplify_outputs.js';
 import type { Schema } from '@environments/ai/gen2/amplify/data/resource';

packages/react-ai/jest.config.ts

@@ -13,10 +13,10 @@ const config: Config = {
   ],
   coverageThreshold: {
     global: {
-      branches: 55,
-      functions: 70,
-      lines: 70,
-      statements: 70,
+      branches: 68,
+      functions: 79,
+      lines: 88,
+      statements: 87,
     },
   },
   testPathIgnorePatterns: [],

packages/react-ai/rollup.config.mjs

@@ -1,7 +1,6 @@
 import { defineConfig } from 'rollup';
 import typescript from '@rollup/plugin-typescript';
 import externals from 'rollup-plugin-node-externals';
-import styles from 'rollup-plugin-styles';
 
 // common config settings
 const input = ['src/index.ts'];
@@ -49,16 +48,6 @@ const config = defineConfig([
       }),
     ],
   },
-  // CSS config
-  {
-    input: 'src/ai-conversation-styles.ts',
-    output: {
-      dir: 'dist',
-      format: 'cjs',
-      assetFileNames: '[name][extname]',
-    },
-    plugins: [styles({ mode: ['extract'] })],
-  },
 ]);
 
 export default config;