Update feat-storage-browser/main with main

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

@@ -606,6 +606,146 @@ exports[`CSS Variables Table 1`] = `
         "variable": "--amplify-components-accordion-item-trigger-padding-inline",
         "value": "var(--amplify-space-small)"
     },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-border-color",
+        "value": "var(--amplify-colors-border-secondary)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-border-radius",
+        "value": "var(--amplify-radii-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-border-width",
+        "value": "var(--amplify-border-widths-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-font-size",
+        "value": "var(--amplify-font-sizes-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-gap",
+        "value": "var(--amplify-space-xs)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-image-height",
+        "value": "var(--amplify-font-sizes-medium)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-image-width",
+        "value": "var(--amplify-font-sizes-medium)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-list-gap",
+        "value": "var(--amplify-space-xxs)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-list-padding-block-start",
+        "value": "var(--amplify-space-xs)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-name-color",
+        "value": "var(--amplify-colors-font-primary)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-name-font-size",
+        "value": "var(--amplify-font-sizes-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-name-font-weight",
+        "value": "var(--amplify-font-weights-normal)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-padding-block",
+        "value": "var(--amplify-space-xxxs)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-padding-inline",
+        "value": "var(--amplify-space-xs)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-remove-padding",
+        "value": "var(--amplify-space-xxs)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-size-color",
+        "value": "var(--amplify-colors-font-tertiary)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-size-font-size",
+        "value": "var(--amplify-font-sizes-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-attachment-size-font-weight",
+        "value": "var(--amplify-font-weights-normal)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-form-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-form-padding",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-assistant-background-color",
+        "value": "var(--amplify-colors-primary-10)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-background-color",
+        "value": "var(--amplify-colors-background-secondary)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-body-gap",
+        "value": "var(--amplify-space-xs)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-border-radius",
+        "value": "var(--amplify-radii-large)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-padding-block",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-padding-inline",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-sender-gap",
+        "value": "var(--amplify-space-small)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-sender-timestamp-color",
+        "value": "var(--amplify-colors-font-tertiary)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-sender-timestamp-font-size",
+        "value": "inherit"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-sender-timestamp-font-weight",
+        "value": "inherit"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-sender-username-color",
+        "value": "var(--amplify-colors-font-primary)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-sender-username-font-size",
+        "value": "inherit"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-sender-username-font-weight",
+        "value": "var(--amplify-font-weights-bold)"
+    },
+    {
+        "variable": "--amplify-components-ai-conversation-message-user-background-color",
+        "value": "var(--amplify-colors-background-secondary)"
+    },
     {
         "variable": "--amplify-components-alert-align-items",
         "value": "center"

docs/package.json

@@ -23,7 +23,7 @@
     "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "6.5.3",
+    "@aws-amplify/ui-react": "6.5.5",
     "@docsearch/react": "3",
     "@mdx-js/loader": "^2.1.0",
     "@mdx-js/mdx": "^2.1.0",

examples/angular/package.json

@@ -20,7 +20,7 @@
     "@angular/platform-browser": "^14.3.0",
     "@angular/platform-browser-dynamic": "^14.3.0",
     "@angular/router": "^14.3.0",
-    "@aws-amplify/ui-angular": "^5.0.28",
+    "@aws-amplify/ui-angular": "^5.0.30",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.4"

examples/next/package.json

@@ -10,12 +10,12 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "^6.5.3",
-    "@aws-amplify/ui-react-ai": "0.3.1",
-    "@aws-amplify/ui-react-geo": "^2.0.28",
-    "@aws-amplify/ui-react-liveness": "^3.1.13",
-    "@aws-amplify/ui-react-notifications": "^2.0.32",
-    "@aws-amplify/ui-react-storage": "^3.3.7",
+    "@aws-amplify/ui-react": "^6.5.5",
+    "@aws-amplify/ui-react-ai": "0.4.0",
+    "@aws-amplify/ui-react-geo": "^2.0.30",
+    "@aws-amplify/ui-react-liveness": "^3.1.15",
+    "@aws-amplify/ui-react-notifications": "^2.0.34",
+    "@aws-amplify/ui-react-storage": "^3.3.9",
     "@aws-sdk/credential-providers": "^3.370.0",
     "next": "^14.2.10",
     "next-global-css": "^1.1.1",

examples/next/pages/ui/components/ai/ai-conversation-composable/amplify_outputs.js

@@ -0,0 +1,2 @@
+import amplifyOutputs from '@environments/ai/gen2/amplify_outputs';
+export default amplifyOutputs;

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+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, Flex } from '@aws-amplify/ui-react';
+
+const client = generateClient<Schema>({ authMode: 'userPool' });
+const { useAIConversation } = createAIHooks(client);
+
+Amplify.configure(outputs);
+
+function Chat() {
+  const [
+    {
+      data: { messages },
+      isLoading,
+    },
+    sendMessage,
+  ] = useAIConversation('pirateChat');
+
+  return (
+    <AIConversation.Provider
+      messages={messages}
+      handleSendMessage={sendMessage}
+      isLoading={isLoading}
+      avatars={{
+        user: {
+          username: 'XXXX',
+        },
+      }}
+    >
+      <Flex direction="row">
+        <Card variation="outlined" width="50%" flex="1">
+          <AIConversation.DefaultMessage />
+          <AIConversation.Messages />
+        </Card>
+        <Card variation="outlined" width="50%" flex="1">
+          <AIConversation.Form />
+        </Card>
+      </Flex>
+    </AIConversation.Provider>
+  );
+}
+
+export default function Example() {
+  return (
+    <Authenticator>
+      <Chat />
+    </Authenticator>
+  );
+}

examples/next/pages/ui/components/ai/ai-conversation-renderer/amplify_outputs.js

@@ -0,0 +1,2 @@
+import amplifyOutputs from '@environments/ai/gen2/amplify_outputs';
+export default amplifyOutputs;

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

@@ -0,0 +1,89 @@
+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';
+
+const client = generateClient<Schema>({ authMode: 'userPool' });
+const { useAIConversation } = createAIHooks(client);
+
+Amplify.configure(outputs);
+
+function arrayBufferToBase64(buffer: ArrayBuffer) {
+  let binary = '';
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return window.btoa(binary);
+}
+
+function convertBufferToBase64(buffer: ArrayBuffer, format: string): string {
+  let base64string = '';
+  // Use node-based buffer if available
+  // fall back on browser if not
+  if (typeof Buffer !== 'undefined') {
+    base64string = Buffer.from(new Uint8Array(buffer)).toString('base64');
+  } else {
+    base64string = arrayBufferToBase64(buffer);
+  }
+  return `data:image/${format};base64,${base64string}`;
+}
+
+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}
+        allowAttachments
+        messageRenderer={{
+          text: ({ text }) => <Text className="testing">{text}</Text>,
+          image: ({ image }) => (
+            <Image
+              className="testing"
+              width={200}
+              height={200}
+              src={convertBufferToBase64(image.source.bytes, image.format)}
+              alt=""
+            />
+          ),
+        }}
+        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-theming-v2/amplify_outputs.js

@@ -0,0 +1,2 @@
+import amplifyOutputs from '@environments/ai/gen2/amplify_outputs';
+export default amplifyOutputs;