Merge remote-tracking branch 'origin/main' into schema-validation

Author: eppjame

.changeset/honest-beans-suffer.md

@@ -0,0 +1,16 @@
+---
+"@aws-amplify/ui-react-ai": minor
+"@aws-amplify/ui": patch
+---
+
+feat(ai) add attachment validations
+
+The current limitations on the Amplify AI kit for attachments is 400kb (of base64'd size) per image, and 20 images per message are now being enforced before the message is sent.
+These limits can be adjusted via props as well.
+
+```tsx
+<AIConversation
+  maxAttachments={2}
+  maxAttachmentSize={100_000} // 100,000 bytes or 100kb
+/>
+```

docs/src/components/ComponentsMetadata.ts

@@ -135,6 +135,11 @@ export const ComponentsMetadata: ComponentClassNameItems = {
     components: ['AIConversation'],
     description: 'Class applied to the form element',
   },
+  AIConversationFormError: {
+    className: ComponentClassName.AIConversationFormError,
+    components: ['AIConversation'],
+    description: 'Class applied to the error message of the form',
+  },
   AIConversationFormAttach: {
     className: ComponentClassName.AIConversationFormAttach,
     components: ['AIConversation'],

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

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { Amplify } from 'aws-amplify';
+import { signOut } from 'aws-amplify/auth';
+import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai';
+import { generateClient } from 'aws-amplify/api';
+import '@aws-amplify/ui-react/styles.css';
+
+import outputs from './amplify_outputs';
+import type { Schema } from '@environments/ai/gen2/amplify/data/resource';
+import { Authenticator, Button, 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
+      messages={messages}
+      isLoading={isLoading}
+      handleSendMessage={sendMessage}
+      allowAttachments
+      maxAttachmentSize={100_000}
+      maxAttachments={2}
+    />
+  );
+}
+
+export default function Example() {
+  return (
+    <Authenticator>
+      <Flex direction="column">
+        <Button
+          onClick={() => {
+            signOut();
+          }}
+        >
+          Sign out
+        </Button>
+        <Card flex="1" variation="outlined" height="400px" margin="large">
+          <Chat />
+        </Card>
+      </Flex>
+    </Authenticator>
+  );
+}

examples/next/pages/ui/components/storage/storage-browser/composable-playground/index.page.tsx

@@ -11,7 +11,6 @@ import { Auth } from '../managedAuthAdapter';
 import { Button, Flex, Breadcrumbs } from '@aws-amplify/ui-react';
 
 import '@aws-amplify/ui-react-storage/styles.css';
-import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
 
 const components: CreateStorageBrowserInput['components'] = {
   Navigation: ({ items }) => (

examples/next/pages/ui/components/storage/storage-browser/custom-actions/index.page.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+
+import { createStorageBrowser } from '@aws-amplify/ui-react-storage/browser';
+
+import { Flex } from '@aws-amplify/ui-react';
+
+import '@aws-amplify/ui-react-storage/styles.css';
+
+const { StorageBrowser } = createStorageBrowser({
+  actions: {
+    default: {
+      copy: {
+        actionListItem: {
+          icon: 'copy-file',
+          label: 'Override Copy',
+        },
+        handler: ({ data }) => {
+          const { key } = data;
+          return {
+            result: Promise.resolve({ status: 'COMPLETE', value: { key } }),
+          };
+        },
+        viewName: 'CopyView',
+      },
+      createFolder: {
+        actionListItem: {
+          icon: 'create-folder',
+          label: 'Override Create Folder',
+        },
+        handler: ({ data }) => {
+          const { key } = data;
+          return {
+            result: Promise.resolve({ status: 'COMPLETE', value: { key } }),
+          };
+        },
+        viewName: 'CreateFolderView',
+      },
+      delete: {
+        actionListItem: {
+          icon: 'delete-file',
+          label: 'Override Delete',
+        },
+        handler: ({ data }) => {
+          const { key } = data;
+          return {
+            result: Promise.resolve({ status: 'COMPLETE', value: { key } }),
+          };
+        },
+        viewName: 'DeleteView',
+      },
+      download: () => {
+        return {
+          result: Promise.resolve({
+            status: 'COMPLETE',
+            value: { url: new URL('') },
+          }),
+        };
+      },
+      upload: {
+        actionListItem: {
+          icon: 'upload-file',
+          label: 'Override Upload',
+        },
+        handler: ({ data }) => {
+          const { key } = data;
+          return {
+            result: Promise.resolve({ status: 'COMPLETE', value: { key } }),
+          };
+        },
+        viewName: 'UploadView',
+      },
+      listLocationItems: () =>
+        Promise.resolve({
+          items: [
+            {
+              id: 'jaskjkaska',
+              key: 'item-key',
+              lastModified: new Date(),
+              size: 1008,
+              type: 'FILE' as const,
+            },
+          ],
+          nextToken: undefined,
+        }),
+    },
+  },
+  config: {
+    getLocationCredentials: () =>
+      Promise.resolve({
+        credentials: {
+          accessKeyId: '',
+          expiration: new Date(),
+          secretAccessKey: '',
+          sessionToken: '',
+        },
+      }),
+    region: '',
+    registerAuthListener: () => null,
+    listLocations: () =>
+      Promise.resolve({
+        items: [
+          {
+            bucket: 'my-bucket',
+            id: crypto.randomUUID(),
+            permissions: ['delete', 'get', 'list', 'write'],
+            prefix: 'my-prefix',
+            type: 'PREFIX',
+          },
+        ],
+        nextToken: undefined,
+      }),
+  },
+});
+
+function Example() {
+  return (
+    <Flex
+      direction="column"
+      width="100vw"
+      height="100vh"
+      overflow="hidden"
+      padding="xl"
+    >
+      <StorageBrowser />
+    </Flex>
+  );
+}
+
+export default Example;

examples/next/pages/ui/components/storage/storage-browser/default-auth/index.page.tsx

@@ -12,7 +12,6 @@ import {
 import { StorageBrowser } from '@aws-amplify/ui-react-storage';
 
 import '@aws-amplify/ui-react-storage/styles.css';
-import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
 
 import config from './aws-exports';
 

examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/StorageBrowser.ts

@@ -4,8 +4,6 @@ import {
   createAmplifyAuthAdapter,
   createStorageBrowser,
 } from '@aws-amplify/ui-react-storage/browser';
-import '@aws-amplify/ui-react-storage/styles.css';
-import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
 
 import config from './aws-exports';
 

examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/[locations]/[location-detail]/index.page.tsx

@@ -6,7 +6,6 @@ import { Button, Flex } from '@aws-amplify/ui-react';
 
 import { StorageBrowser } from '../../StorageBrowser';
 
-import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
 import '@aws-amplify/ui-react-storage/styles.css';
 
 export default function Page() {

examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/[locations]/index.page.tsx

@@ -6,7 +6,6 @@ import { Button, Flex } from '@aws-amplify/ui-react';
 
 import { StorageBrowser } from '../StorageBrowser';
 
-import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
 import '@aws-amplify/ui-react-storage/styles.css';
 
 function Locations() {

examples/next/pages/ui/components/storage/storage-browser/default-auth/routed/index.page.tsx

@@ -6,7 +6,6 @@ import useIsSignedIn from './useIsSignedIn';
 import { Authenticator } from '@aws-amplify/ui-react';
 
 import '@aws-amplify/ui-react-storage/styles.css';
-import '@aws-amplify/ui-react-storage/storage-browser-styles.css';
 
 function Example() {
   const router = useRouter();