Adding AIConversation docs

Author: dbanksdesign

cspell.json

@@ -1614,7 +1614,8 @@
     "ampx",
     "autodetection",
     "jamba",
-    "knowledgebases"
+    "knowledgebases",
+    "rehype"
   ],
   "flagWords": ["hte", "full-stack", "Full-stack", "Full-Stack", "sudo"],
   "patterns": [

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@aws-amplify/amplify-cli-core": "^4.3.9",
     "@aws-amplify/ui-react": "^6.3.1",
+    "@aws-amplify/ui-react-ai": "^1.0.0",
     "@docsearch/react": "3",
     "ajv": "^8.16.0",
     "aws-amplify": "^6.0.9",

public/images/user.jpg

@@ -0,0 +1,29 @@
+import {
+  createTheme,
+  defaultDarkModeOverride,
+  ThemeProvider,
+  View
+} from '@aws-amplify/ui-react';
+import * as React from 'react';
+import { LayoutContext } from '../Layout';
+
+const theme = createTheme({
+  name: 'default-amplify-ui-theme',
+  overrides: [defaultDarkModeOverride]
+});
+
+export const UIWrapper = ({ children }: React.PropsWithChildren) => {
+  const { colorMode } = React.useContext(LayoutContext);
+
+  return (
+    <ThemeProvider theme={theme} colorMode={colorMode}>
+      <View
+        borderRadius="small"
+        padding="large"
+        boxShadow={`0 0 0 2px ${theme.tokens.colors.neutral[20]}`}
+      >
+        {children}
+      </View>
+    </ThemeProvider>
+  );
+};

src/components/UIWrapper/UWrapper.tsx

@@ -0,0 +1 @@
+export { UIWrapper } from './UWrapper';

src/components/UIWrapper/index.ts

@@ -753,6 +753,9 @@ export const directory = {
             {
               path: 'src/pages/[platform]/ai/conversation/index.mdx',
               children: [
+                {
+                  path: 'src/pages/[platform]/ai/conversation/ai-conversation/index.mdx'
+                },
                 {
                   path: 'src/pages/[platform]/ai/conversation/history/index.mdx'
                 },

src/directory/directory.mjs

@@ -0,0 +1,64 @@
+import { Avatar } from '@aws-amplify/ui-react';
+import { ConversationMessage } from '@aws-amplify/ui-react-ai';
+import { AmplifyLogo } from '@/components/GlobalNav/components/icons';
+
+export const UserAvatar = () => {
+  return <Avatar src="/images/user.jpg" />;
+};
+
+export const AssistantAvatar = () => {
+  return (
+    <Avatar backgroundColor={'primary.20'}>
+      <AmplifyLogo />
+    </Avatar>
+  );
+};
+
+export const MESSAGES: ConversationMessage[] = [
+  {
+    conversationId: 'foobar',
+    id: '1',
+    content: [{ text: 'Hello' }],
+    role: 'user' as const,
+    createdAt: new Date(2023, 4, 21, 15, 23).toISOString()
+  },
+  {
+    conversationId: 'foobar',
+    id: '2',
+    content: [
+      {
+        text: 'Hello! I am your virtual assistant how may I help you?'
+      }
+    ],
+    role: 'assistant' as const,
+    createdAt: new Date(2023, 4, 21, 15, 24).toISOString()
+  }
+];
+
+export const MESSAGES_RESPONSE_COMPONENTS: ConversationMessage[] = [
+  {
+    conversationId: 'foobar',
+    id: '1',
+    content: [{ text: 'Whats the weather in San Jose?' }],
+    role: 'user' as const,
+    createdAt: new Date(2023, 4, 21, 15, 23).toISOString()
+  },
+  {
+    conversationId: 'foobar',
+    id: '2',
+    content: [
+      {
+        text: 'Let me get the weather for San Jose for you.'
+      },
+      {
+        toolUse: {
+          name: 'AMPLIFY_UI_WeatherCard',
+          input: { city: 'San Jose' },
+          toolUseId: '1234'
+        }
+      }
+    ],
+    role: 'assistant' as const,
+    createdAt: new Date(2023, 4, 21, 15, 24).toISOString()
+  }
+];