@aws-amplify/ui-react-ai 1.0.0 → 1.1.0

package/dist/esm/components/AIConversation/AIConversationProvider.mjs

@@ -18,7 +18,7 @@ import { WelcomeMessageProvider } from './context/WelcomeMessageContext.mjs';
 import { FallbackComponentProvider } from './context/FallbackComponentContext.mjs';
 import './context/elements/definitions.mjs';
 
-const AIConversationProvider = ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }) => {
+const AIConversationProvider = ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, maxAttachmentSize, maxAttachments, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }) => {
     const _displayText = {
         ...defaultAIConversationDisplayTextEn,
         ...displayText,
@@ -29,7 +29,7 @@ const AIConversationProvider = ({ aiContext, actions, allowAttachments, avatars,
                 React__default.createElement(FallbackComponentProvider, { FallbackComponent: FallbackResponseComponent },
                     React__default.createElement(MessageRendererProvider, { ...messageRenderer },
                         React__default.createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                            React__default.createElement(AttachmentProvider, { allowAttachments: allowAttachments },
+                            React__default.createElement(AttachmentProvider, { allowAttachments: allowAttachments, maxAttachmentSize: maxAttachmentSize, maxAttachments: maxAttachments },
                                 React__default.createElement(ConversationDisplayTextProvider, { ..._displayText },
                                     React__default.createElement(ConversationInputContextProvider, null,
                                         React__default.createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },

package/dist/esm/components/AIConversation/context/AttachmentContext.mjs

@@ -1,8 +1,17 @@
 import * as React from 'react';
 
-const AttachmentContext = React.createContext(false);
-const AttachmentProvider = ({ children, allowAttachments, }) => {
-    return (React.createElement(AttachmentContext.Provider, { value: allowAttachments ?? false }, children));
+const AttachmentContext = React.createContext({
+    allowAttachments: false,
+    // We save attachments as base64 strings into dynamodb for conversation history
+    // DynamoDB has a max size of 400kb for records
+    // This can be overridden so cutsomers could provide a lower number
+    // or a higher number if in the future we support larger sizes.
+    maxAttachmentSize: 400000,
+    maxAttachments: 20,
+});
+const AttachmentProvider = ({ children, allowAttachments = false, maxAttachmentSize = 400000, maxAttachments = 20, }) => {
+    const providerValue = React.useMemo(() => ({ maxAttachmentSize, maxAttachments, allowAttachments }), [maxAttachmentSize, maxAttachments, allowAttachments]);
+    return (React.createElement(AttachmentContext.Provider, { value: providerValue }, children));
 };
 
 export { AttachmentContext, AttachmentProvider };

package/dist/esm/components/AIConversation/context/ConversationInputContext.mjs

@@ -3,7 +3,8 @@ import React__default from 'react';
 const ConversationInputContext = React__default.createContext({});
 const ConversationInputContextProvider = ({ children, }) => {
     const [input, setInput] = React__default.useState();
-    const providerValue = React__default.useMemo(() => ({ input, setInput }), [input, setInput]);
+    const [error, setError] = React__default.useState();
+    const providerValue = React__default.useMemo(() => ({ input, setInput, error, setError }), [input, setInput, error, setError]);
     return (React__default.createElement(ConversationInputContext.Provider, { value: providerValue }, children));
 };
 

package/dist/esm/components/AIConversation/context/elements/IconElement.mjs

@@ -1,4 +1,4 @@
-import { defineBaseElement, withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import { defineBaseElementWithRef, withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
 import React__default from 'react';
 
 const DEFAULT_ICON_PATHS = {
@@ -17,7 +17,7 @@ const DEFAULT_ICON_ATTRIBUTES = {
     fill: 'none',
     xmlns: 'http://www.w3.org/2000/svg',
 };
-const BaseIconElement = defineBaseElement({
+const BaseIconElement = defineBaseElementWithRef({
     type: 'svg',
     displayName: 'Icon',
 });

package/dist/esm/components/AIConversation/context/elements/definitions.mjs

@@ -1,44 +1,44 @@
-import { defineBaseElement } from '@aws-amplify/ui-react-core/elements';
+import { defineBaseElementWithRef } from '@aws-amplify/ui-react-core/elements';
 import { IconElement } from './IconElement.mjs';
 
-const LabelElement = defineBaseElement({
+const LabelElement = defineBaseElementWithRef({
     type: 'label',
     displayName: 'Label',
 });
-const TextElement = defineBaseElement({
+const TextElement = defineBaseElementWithRef({
     type: 'p',
     displayName: 'Text',
 });
-const UnorderedListElement = defineBaseElement({
+const UnorderedListElement = defineBaseElementWithRef({
     type: 'ul',
     displayName: 'UnorderedList',
 });
-const ListItemElement = defineBaseElement({
+const ListItemElement = defineBaseElementWithRef({
     type: 'li',
     displayName: 'ListItem',
 });
-const HeadingElement = defineBaseElement({
+const HeadingElement = defineBaseElementWithRef({
     type: 'h2',
     displayName: 'Title',
 });
-const ImageElement = defineBaseElement({
+const ImageElement = defineBaseElementWithRef({
     type: 'img',
     displayName: 'Image',
 });
-const InputElement = defineBaseElement({
+const InputElement = defineBaseElementWithRef({
     type: 'input',
     displayName: 'Input',
 });
-const ButtonElement = defineBaseElement({ type: 'button', displayName: 'Button' });
-const ViewElement = defineBaseElement({
+const ButtonElement = defineBaseElementWithRef({ type: 'button', displayName: 'Button' });
+const ViewElement = defineBaseElementWithRef({
     type: 'div',
     displayName: 'View',
 });
-const SpanElement = defineBaseElement({
+const SpanElement = defineBaseElementWithRef({
     type: 'span',
     displayName: 'Span',
 });
-const TextAreaElement = defineBaseElement({
+const TextAreaElement = defineBaseElementWithRef({
     type: 'textarea',
     displayName: 'TextArea',
 });

package/dist/esm/components/AIConversation/displayText.mjs

@@ -2,6 +2,12 @@ import { formatDate } from './utils.mjs';
 
 const defaultAIConversationDisplayTextEn = {
     getMessageTimestampText: (date) => formatDate(date),
+    getMaxAttachmentErrorText(count) {
+        return `Cannot choose more than ${count} ${count === 1 ? 'file' : 'files'}. `;
+    },
+    getAttachmentSizeErrorText(sizeText) {
+        return `File size must be below ${sizeText}.`;
+    },
 };
 
 export { defaultAIConversationDisplayTextEn };

package/dist/esm/components/AIConversation/utils.mjs

@@ -12,28 +12,57 @@ function formatDate(date) {
     return `${dateString} at ${timeString}`;
 }
 function arrayBufferToBase64(buffer) {
-    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, format) {
-    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');
+        return Buffer.from(new Uint8Array(buffer)).toString('base64');
     }
     else {
-        base64string = arrayBufferToBase64(buffer);
+        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, format) {
+    const base64string = arrayBufferToBase64(buffer);
     return `data:image/${format};base64,${base64string}`;
 }
 function getImageTypeFromMimeType(mimeType) {
     return mimeType.split('/')[1];
 }
+async function attachmentsValidator({ files, maxAttachments, maxAttachmentSize, }) {
+    const acceptedFiles = [];
+    const rejectedFiles = [];
+    let hasMaxSizeError = false;
+    for (const file of files) {
+        const arrayBuffer = await file.arrayBuffer();
+        const base64 = arrayBufferToBase64(arrayBuffer);
+        if (base64.length < maxAttachmentSize) {
+            acceptedFiles.push(file);
+        }
+        else {
+            rejectedFiles.push(file);
+            hasMaxSizeError = true;
+        }
+    }
+    if (acceptedFiles.length > maxAttachments) {
+        return {
+            acceptedFiles: acceptedFiles.slice(0, maxAttachments),
+            rejectedFiles: [...acceptedFiles.slice(maxAttachments), ...rejectedFiles],
+            hasMaxAttachmentsError: true,
+            hasMaxAttachmentSizeError: hasMaxSizeError,
+        };
+    }
+    return {
+        acceptedFiles,
+        rejectedFiles,
+        hasMaxAttachmentsError: false,
+        hasMaxAttachmentSizeError: hasMaxSizeError,
+    };
+}
 
-export { convertBufferToBase64, formatDate, getImageTypeFromMimeType };
+export { attachmentsValidator, convertBufferToBase64, formatDate, getImageTypeFromMimeType };

package/dist/esm/components/AIConversation/views/Controls/FormControl.mjs

@@ -7,7 +7,7 @@ import { ConversationInputContext } from '../../context/ConversationInputContext
 import { MessagesContext } from '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
-import '../../context/DisplayTextContext.mjs';
+import { useConversationDisplayText } from '../../context/DisplayTextContext.mjs';
 import { ControlsContext } from '../../context/ControlsContext.mjs';
 import { LoadingContext } from '../../context/LoadingContext.mjs';
 import { ResponseComponentsContext, convertResponseComponentsToToolConfiguration } from '../../context/ResponseComponentsContext.mjs';
@@ -19,8 +19,8 @@ import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { AttachFileControl } from './AttachFileControl.mjs';
 import { AttachmentListControl } from './AttachmentListControl.mjs';
-import { getImageTypeFromMimeType } from '../../utils.mjs';
-import { isFunction } from '@aws-amplify/ui';
+import { attachmentsValidator, getImageTypeFromMimeType } from '../../utils.mjs';
+import { humanFileSize, isFunction } from '@aws-amplify/ui';
 
 const { Button, Icon, Label: LabelElement, TextArea, View, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
@@ -103,9 +103,10 @@ const InputContainer = withBaseElementProps(View, {
     className: `${FIELD_BLOCK}__input-container`,
 });
 const FormControl = () => {
-    const { input, setInput } = React__default.useContext(ConversationInputContext);
+    const { input, setInput, error, setError } = React__default.useContext(ConversationInputContext);
     const handleSendMessage = React__default.useContext(SendMessageContext);
-    const allowAttachments = React__default.useContext(AttachmentContext);
+    const { allowAttachments, maxAttachmentSize, maxAttachments } = React__default.useContext(AttachmentContext);
+    const displayText = useConversationDisplayText();
     const responseComponents = React__default.useContext(ResponseComponentsContext);
     const isLoading = React__default.useContext(LoadingContext);
     const aiContext = React__default.useContext(AIContextContext);
@@ -157,8 +158,36 @@ const FormControl = () => {
             }
         }
     };
+    const onValidate = React__default.useCallback(async (files) => {
+        const previousFiles = input?.files ?? [];
+        const { acceptedFiles, hasMaxAttachmentsError, hasMaxAttachmentSizeError, } = await attachmentsValidator({
+            files: [...files, ...previousFiles],
+            maxAttachments,
+            maxAttachmentSize,
+        });
+        if (hasMaxAttachmentsError || hasMaxAttachmentSizeError) {
+            const errors = [];
+            if (hasMaxAttachmentsError) {
+                errors.push(displayText.getMaxAttachmentErrorText(maxAttachments));
+            }
+            if (hasMaxAttachmentSizeError) {
+                errors.push(displayText.getAttachmentSizeErrorText(
+                // base64 size is about 137% that of the file size
+                // https://en.wikipedia.org/wiki/Base64#MIME
+                humanFileSize((maxAttachmentSize - 814) / 1.37, true)));
+            }
+            setError?.(errors.join(' '));
+        }
+        else {
+            setError?.(undefined);
+        }
+        setInput?.((prevValue) => ({
+            ...prevValue,
+            files: acceptedFiles,
+        }));
+    }, [setInput, input, displayText, maxAttachmentSize, maxAttachments, setError]);
     if (controls?.Form) {
-        return (React__default.createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, allowAttachments: allowAttachments, isLoading: isLoading }));
+        return (React__default.createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, onValidate: onValidate, allowAttachments: allowAttachments, isLoading: isLoading, error: error, setError: setError }));
     }
     return (React__default.createElement("form", { className: `${FIELD_BLOCK}__form`, onSubmit: handleSubmit, method: "post", ref: ref },
         allowAttachments ? React__default.createElement(AttachFileControl, null) : null,

package/dist/esm/components/AIConversation/views/default/Form.mjs

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Button, VisuallyHidden, TextAreaField, DropZone } from '@aws-amplify/ui-react';
+import { View, Button, VisuallyHidden, TextAreaField, Message, DropZone } from '@aws-amplify/ui-react';
 import { useIcons, IconSend, IconAttach } from '@aws-amplify/ui-react/internal';
 import { ComponentClassName } from '@aws-amplify/ui';
 import { Attachments } from './Attachments.mjs';
@@ -11,27 +11,24 @@ function isHTMLFormElement(target) {
  * Will conditionally render the DropZone if allowAttachments
  * is true
  */
-const FormWrapper = ({ children, allowAttachments, setInput, }) => {
+const FormWrapper = ({ children, allowAttachments, onValidate, }) => {
     if (allowAttachments) {
         return (React.createElement(DropZone, { className: ComponentClassName.AIConversationFormDropzone, onDropComplete: ({ acceptedFiles }) => {
-                setInput?.((prevInput) => ({
-                    ...prevInput,
-                    files: [...(prevInput?.files ?? []), ...acceptedFiles],
-                }));
+                onValidate(acceptedFiles);
             } }, children));
     }
     else {
         return children;
     }
 };
-const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) => {
+const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isLoading, error, }) => {
     const icons = useIcons('aiConversation');
     const sendIcon = icons?.send ?? React.createElement(IconSend, null);
     const attachIcon = icons?.attach ?? React.createElement(IconAttach, null);
     const hiddenInput = React.useRef(null);
     const [composing, setComposing] = React.useState(false);
     const isInputEmpty = !input?.text?.length && !input?.files?.length;
-    return (React.createElement(FormWrapper, { allowAttachments: allowAttachments, setInput: setInput },
+    return (React.createElement(FormWrapper, { onValidate: onValidate, allowAttachments: allowAttachments },
         React.createElement(View, { as: "form", className: ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
             allowAttachments ? (React.createElement(Button, { className: ComponentClassName.AIConversationFormAttach, onClick: () => {
                     hiddenInput?.current?.click();
@@ -42,15 +39,11 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) =
                 React.createElement("span", null, attachIcon),
                 React.createElement(VisuallyHidden, null,
                     React.createElement("input", { type: "file", tabIndex: -1, ref: hiddenInput, onChange: (e) => {
-                            const { files } = e.target;
-                            if (!files || files.length === 0) {
+                            if (!e.target.files || e.target.files.length === 0) {
                                 return;
                             }
-                            setInput((prevValue) => ({
-                                ...prevValue,
-                                files: [...(prevValue?.files ?? []), ...Array.from(files)],
-                            }));
-                        }, multiple: true, accept: "*", "data-testid": "hidden-file-input" })))) : null,
+                            onValidate(Array.from(e.target.files));
+                        }, multiple: true, accept: ".jpeg,.png,.webp,.gif", "data-testid": "hidden-file-input" })))) : null,
             React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', testId: "text-input", onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false), onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
                     const shouldSubmit = !e.shiftKey && e.key === 'Enter' && !composing;
@@ -59,7 +52,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) =
                         e.preventDefault();
                     }
                 }, onChange: (e) => {
-                    setInput((prevValue) => ({
+                    setInput?.((prevValue) => ({
                         ...prevValue,
                         text: e.target.value,
                     }));
@@ -69,6 +62,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) =
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                 isDisabled: isLoading || isInputEmpty },
                 React.createElement("span", null, sendIcon))),
+        error ? (React.createElement(Message, { className: ComponentClassName.AIConversationFormError, variation: "plain", colorTheme: "warning" }, error)) : null,
         React.createElement(Attachments, { setInput: setInput, files: input?.files })));
 };
 

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '1.0.0';
+const VERSION = '1.1.0';
 
 export { VERSION };

package/dist/index.js

@@ -47,7 +47,8 @@ const AvatarsProvider = ({ children, avatars, }) => {
 const ConversationInputContext = React__namespace["default"].createContext({});
 const ConversationInputContextProvider = ({ children, }) => {
     const [input, setInput] = React__namespace["default"].useState();
-    const providerValue = React__namespace["default"].useMemo(() => ({ input, setInput }), [input, setInput]);
+    const [error, setError] = React__namespace["default"].useState();
+    const providerValue = React__namespace["default"].useMemo(() => ({ input, setInput, error, setError }), [input, setInput, error, setError]);
     return (React__namespace["default"].createElement(ConversationInputContext.Provider, { value: providerValue }, children));
 };
 
@@ -82,32 +83,67 @@ function formatDate(date) {
     return `${dateString} at ${timeString}`;
 }
 function arrayBufferToBase64(buffer) {
-    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, format) {
-    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');
+        return Buffer.from(new Uint8Array(buffer)).toString('base64');
     }
     else {
-        base64string = arrayBufferToBase64(buffer);
+        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, format) {
+    const base64string = arrayBufferToBase64(buffer);
     return `data:image/${format};base64,${base64string}`;
 }
 function getImageTypeFromMimeType(mimeType) {
     return mimeType.split('/')[1];
 }
+async function attachmentsValidator({ files, maxAttachments, maxAttachmentSize, }) {
+    const acceptedFiles = [];
+    const rejectedFiles = [];
+    let hasMaxSizeError = false;
+    for (const file of files) {
+        const arrayBuffer = await file.arrayBuffer();
+        const base64 = arrayBufferToBase64(arrayBuffer);
+        if (base64.length < maxAttachmentSize) {
+            acceptedFiles.push(file);
+        }
+        else {
+            rejectedFiles.push(file);
+            hasMaxSizeError = true;
+        }
+    }
+    if (acceptedFiles.length > maxAttachments) {
+        return {
+            acceptedFiles: acceptedFiles.slice(0, maxAttachments),
+            rejectedFiles: [...acceptedFiles.slice(maxAttachments), ...rejectedFiles],
+            hasMaxAttachmentsError: true,
+            hasMaxAttachmentSizeError: hasMaxSizeError,
+        };
+    }
+    return {
+        acceptedFiles,
+        rejectedFiles,
+        hasMaxAttachmentsError: false,
+        hasMaxAttachmentSizeError: hasMaxSizeError,
+    };
+}
 
 const defaultAIConversationDisplayTextEn = {
     getMessageTimestampText: (date) => formatDate(date),
+    getMaxAttachmentErrorText(count) {
+        return `Cannot choose more than ${count} ${count === 1 ? 'file' : 'files'}. `;
+    },
+    getAttachmentSizeErrorText(sizeText) {
+        return `File size must be below ${sizeText}.`;
+    },
 };
 
 const { ConversationDisplayTextContext, ConversationDisplayTextProvider, useConversationDisplayText, } = uiReactCore.createContextUtilities({
@@ -180,9 +216,18 @@ const { MessageRendererContext, MessageRendererProvider, useMessageRenderer, } =
     errorMessage: '`useMessageRenderer` must be used with an AIConversation component',
 });
 
-const AttachmentContext = React__namespace.createContext(false);
-const AttachmentProvider = ({ children, allowAttachments, }) => {
-    return (React__namespace.createElement(AttachmentContext.Provider, { value: allowAttachments ?? false }, children));
+const AttachmentContext = React__namespace.createContext({
+    allowAttachments: false,
+    // We save attachments as base64 strings into dynamodb for conversation history
+    // DynamoDB has a max size of 400kb for records
+    // This can be overridden so cutsomers could provide a lower number
+    // or a higher number if in the future we support larger sizes.
+    maxAttachmentSize: 400000,
+    maxAttachments: 20,
+});
+const AttachmentProvider = ({ children, allowAttachments = false, maxAttachmentSize = 400000, maxAttachments = 20, }) => {
+    const providerValue = React__namespace.useMemo(() => ({ maxAttachmentSize, maxAttachments, allowAttachments }), [maxAttachmentSize, maxAttachments, allowAttachments]);
+    return (React__namespace.createElement(AttachmentContext.Provider, { value: providerValue }, children));
 };
 
 const WelcomeMessageContext = React__namespace.createContext(undefined);
@@ -211,7 +256,7 @@ const DEFAULT_ICON_ATTRIBUTES = {
     fill: 'none',
     xmlns: 'http://www.w3.org/2000/svg',
 };
-const BaseIconElement = elements.defineBaseElement({
+const BaseIconElement = elements.defineBaseElementWithRef({
     type: 'svg',
     displayName: 'Icon',
 });
@@ -227,44 +272,44 @@ const getIconProps = ({ variant, ...props }) => {
 };
 const IconElement = elements.withBaseElementProps(BaseIconElement, getIconProps);
 
-const LabelElement$1 = elements.defineBaseElement({
+const LabelElement$1 = elements.defineBaseElementWithRef({
     type: 'label',
     displayName: 'Label',
 });
-const TextElement = elements.defineBaseElement({
+const TextElement = elements.defineBaseElementWithRef({
     type: 'p',
     displayName: 'Text',
 });
-const UnorderedListElement = elements.defineBaseElement({
+const UnorderedListElement = elements.defineBaseElementWithRef({
     type: 'ul',
     displayName: 'UnorderedList',
 });
-const ListItemElement = elements.defineBaseElement({
+const ListItemElement = elements.defineBaseElementWithRef({
     type: 'li',
     displayName: 'ListItem',
 });
-const HeadingElement = elements.defineBaseElement({
+const HeadingElement = elements.defineBaseElementWithRef({
     type: 'h2',
     displayName: 'Title',
 });
-const ImageElement = elements.defineBaseElement({
+const ImageElement = elements.defineBaseElementWithRef({
     type: 'img',
     displayName: 'Image',
 });
-const InputElement = elements.defineBaseElement({
+const InputElement = elements.defineBaseElementWithRef({
     type: 'input',
     displayName: 'Input',
 });
-const ButtonElement = elements.defineBaseElement({ type: 'button', displayName: 'Button' });
-const ViewElement = elements.defineBaseElement({
+const ButtonElement = elements.defineBaseElementWithRef({ type: 'button', displayName: 'Button' });
+const ViewElement = elements.defineBaseElementWithRef({
     type: 'div',
     displayName: 'View',
 });
-const SpanElement = elements.defineBaseElement({
+const SpanElement = elements.defineBaseElementWithRef({
     type: 'span',
     displayName: 'Span',
 });
-const TextAreaElement = elements.defineBaseElement({
+const TextAreaElement = elements.defineBaseElementWithRef({
     type: 'textarea',
     displayName: 'TextArea',
 });
@@ -561,9 +606,10 @@ const InputContainer = elements.withBaseElementProps(View$2, {
     className: `${FIELD_BLOCK}__input-container`,
 });
 const FormControl = () => {
-    const { input, setInput } = React__namespace["default"].useContext(ConversationInputContext);
+    const { input, setInput, error, setError } = React__namespace["default"].useContext(ConversationInputContext);
     const handleSendMessage = React__namespace["default"].useContext(SendMessageContext);
-    const allowAttachments = React__namespace["default"].useContext(AttachmentContext);
+    const { allowAttachments, maxAttachmentSize, maxAttachments } = React__namespace["default"].useContext(AttachmentContext);
+    const displayText = useConversationDisplayText();
     const responseComponents = React__namespace["default"].useContext(ResponseComponentsContext);
     const isLoading = React__namespace["default"].useContext(LoadingContext);
     const aiContext = React__namespace["default"].useContext(AIContextContext);
@@ -615,8 +661,36 @@ const FormControl = () => {
             }
         }
     };
+    const onValidate = React__namespace["default"].useCallback(async (files) => {
+        const previousFiles = input?.files ?? [];
+        const { acceptedFiles, hasMaxAttachmentsError, hasMaxAttachmentSizeError, } = await attachmentsValidator({
+            files: [...files, ...previousFiles],
+            maxAttachments,
+            maxAttachmentSize,
+        });
+        if (hasMaxAttachmentsError || hasMaxAttachmentSizeError) {
+            const errors = [];
+            if (hasMaxAttachmentsError) {
+                errors.push(displayText.getMaxAttachmentErrorText(maxAttachments));
+            }
+            if (hasMaxAttachmentSizeError) {
+                errors.push(displayText.getAttachmentSizeErrorText(
+                // base64 size is about 137% that of the file size
+                // https://en.wikipedia.org/wiki/Base64#MIME
+                ui.humanFileSize((maxAttachmentSize - 814) / 1.37, true)));
+            }
+            setError?.(errors.join(' '));
+        }
+        else {
+            setError?.(undefined);
+        }
+        setInput?.((prevValue) => ({
+            ...prevValue,
+            files: acceptedFiles,
+        }));
+    }, [setInput, input, displayText, maxAttachmentSize, maxAttachments, setError]);
     if (controls?.Form) {
-        return (React__namespace["default"].createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, allowAttachments: allowAttachments, isLoading: isLoading }));
+        return (React__namespace["default"].createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, onValidate: onValidate, allowAttachments: allowAttachments, isLoading: isLoading, error: error, setError: setError }));
     }
     return (React__namespace["default"].createElement("form", { className: `${FIELD_BLOCK}__form`, onSubmit: handleSubmit, method: "post", ref: ref },
         allowAttachments ? React__namespace["default"].createElement(AttachFileControl, null) : null,
@@ -795,7 +869,7 @@ PromptControl.Container = Container;
 PromptControl.PromptGroup = PromptGroup;
 PromptControl.PromptCard = PromptCard;
 
-const AIConversationProvider = ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }) => {
+const AIConversationProvider = ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, maxAttachmentSize, maxAttachments, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }) => {
     const _displayText = {
         ...defaultAIConversationDisplayTextEn,
         ...displayText,
@@ -806,7 +880,7 @@ const AIConversationProvider = ({ aiContext, actions, allowAttachments, avatars,
                 React__namespace["default"].createElement(FallbackComponentProvider, { FallbackComponent: FallbackResponseComponent },
                     React__namespace["default"].createElement(MessageRendererProvider, { ...messageRenderer },
                         React__namespace["default"].createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                            React__namespace["default"].createElement(AttachmentProvider, { allowAttachments: allowAttachments },
+                            React__namespace["default"].createElement(AttachmentProvider, { allowAttachments: allowAttachments, maxAttachmentSize: maxAttachmentSize, maxAttachments: maxAttachments },
                                 React__namespace["default"].createElement(ConversationDisplayTextProvider, { ..._displayText },
                                     React__namespace["default"].createElement(ConversationInputContextProvider, null,
                                         React__namespace["default"].createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
@@ -950,27 +1024,24 @@ function isHTMLFormElement(target) {
  * Will conditionally render the DropZone if allowAttachments
  * is true
  */
-const FormWrapper = ({ children, allowAttachments, setInput, }) => {
+const FormWrapper = ({ children, allowAttachments, onValidate, }) => {
     if (allowAttachments) {
         return (React__namespace.createElement(uiReact.DropZone, { className: ui.ComponentClassName.AIConversationFormDropzone, onDropComplete: ({ acceptedFiles }) => {
-                setInput?.((prevInput) => ({
-                    ...prevInput,
-                    files: [...(prevInput?.files ?? []), ...acceptedFiles],
-                }));
+                onValidate(acceptedFiles);
             } }, children));
     }
     else {
         return children;
     }
 };
-const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) => {
+const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isLoading, error, }) => {
     const icons = internal.useIcons('aiConversation');
     const sendIcon = icons?.send ?? React__namespace.createElement(internal.IconSend, null);
     const attachIcon = icons?.attach ?? React__namespace.createElement(internal.IconAttach, null);
     const hiddenInput = React__namespace.useRef(null);
     const [composing, setComposing] = React__namespace.useState(false);
     const isInputEmpty = !input?.text?.length && !input?.files?.length;
-    return (React__namespace.createElement(FormWrapper, { allowAttachments: allowAttachments, setInput: setInput },
+    return (React__namespace.createElement(FormWrapper, { onValidate: onValidate, allowAttachments: allowAttachments },
         React__namespace.createElement(uiReact.View, { as: "form", className: ui.ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
             allowAttachments ? (React__namespace.createElement(uiReact.Button, { className: ui.ComponentClassName.AIConversationFormAttach, onClick: () => {
                     hiddenInput?.current?.click();
@@ -981,15 +1052,11 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) =
                 React__namespace.createElement("span", null, attachIcon),
                 React__namespace.createElement(uiReact.VisuallyHidden, null,
                     React__namespace.createElement("input", { type: "file", tabIndex: -1, ref: hiddenInput, onChange: (e) => {
-                            const { files } = e.target;
-                            if (!files || files.length === 0) {
+                            if (!e.target.files || e.target.files.length === 0) {
                                 return;
                             }
-                            setInput((prevValue) => ({
-                                ...prevValue,
-                                files: [...(prevValue?.files ?? []), ...Array.from(files)],
-                            }));
-                        }, multiple: true, accept: "*", "data-testid": "hidden-file-input" })))) : null,
+                            onValidate(Array.from(e.target.files));
+                        }, multiple: true, accept: ".jpeg,.png,.webp,.gif", "data-testid": "hidden-file-input" })))) : null,
             React__namespace.createElement(uiReact.TextAreaField, { className: ui.ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', testId: "text-input", onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false), onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
                     const shouldSubmit = !e.shiftKey && e.key === 'Enter' && !composing;
@@ -998,7 +1065,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) =
                         e.preventDefault();
                     }
                 }, onChange: (e) => {
-                    setInput((prevValue) => ({
+                    setInput?.((prevValue) => ({
                         ...prevValue,
                         text: e.target.value,
                     }));
@@ -1008,6 +1075,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) =
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                 isDisabled: isLoading || isInputEmpty },
                 React__namespace.createElement("span", null, sendIcon))),
+        error ? (React__namespace.createElement(uiReact.Message, { className: ui.ComponentClassName.AIConversationFormError, variation: "plain", colorTheme: "warning" }, error)) : null,
         React__namespace.createElement(Attachments, { setInput: setInput, files: input?.files })));
 };
 
@@ -1022,7 +1090,7 @@ const PromptList = ({ setInput, suggestedPrompts = [], }) => {
     })));
 };
 
-const VERSION = '1.0.0';
+const VERSION = '1.1.0';
 
 function AIConversationBase({ avatars, controls, ...rest }) {
     uiReactCore.useSetUserAgent({

package/dist/types/components/AIConversation/AIConversationProvider.d.ts

@@ -3,4 +3,4 @@ import { AIConversationInput, AIConversationProps } from './types';
 export interface AIConversationProviderProps extends AIConversationInput, AIConversationProps {
     children?: React.ReactNode;
 }
-export declare const AIConversationProvider: ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }: AIConversationProviderProps) => React.JSX.Element;
+export declare const AIConversationProvider: ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, maxAttachmentSize, maxAttachments, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }: AIConversationProviderProps) => React.JSX.Element;

package/dist/types/components/AIConversation/context/AttachmentContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare const AttachmentContext: React.Context<boolean>;
-export declare const AttachmentProvider: ({ children, allowAttachments, }: {
-    children?: React.ReactNode;
-    allowAttachments?: boolean | undefined;
-}) => JSX.Element;
+import { AIConversationInput } from '../types';
+export interface AttachmentContextProps extends Pick<AIConversationInput, 'allowAttachments' | 'maxAttachments' | 'maxAttachmentSize'> {
+}
+export declare const AttachmentContext: React.Context<Required<AttachmentContextProps>>;
+export declare const AttachmentProvider: ({ children, allowAttachments, maxAttachmentSize, maxAttachments, }: React.PropsWithChildren<AttachmentContextProps>) => JSX.Element;

package/dist/types/components/AIConversation/context/ControlsContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConversationInputContext } from './ConversationInputContext';
+import { ConversationInputContextProps } from './ConversationInputContext';
 import { SuggestedPrompt } from '../types';
 import { ConversationMessage } from '../../../types';
 export interface ControlsContextProps {
@@ -7,13 +7,14 @@ export interface ControlsContextProps {
         handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
         allowAttachments?: boolean;
         isLoading?: boolean;
-    } & Required<ConversationInputContext>>;
+        onValidate: (files: File[]) => Promise<void>;
+    } & ConversationInputContextProps>;
     MessageList?: React.ComponentType<{
         messages: ConversationMessage[];
     }>;
     PromptList?: React.ComponentType<{
         suggestedPrompts?: SuggestedPrompt[];
-        setInput: ConversationInputContext['setInput'];
+        setInput: ConversationInputContextProps['setInput'];
     }>;
 }
 export declare const ControlsContext: React.Context<ControlsContextProps | undefined>;

package/dist/types/components/AIConversation/context/ConversationInputContext.d.ts

@@ -3,11 +3,13 @@ export interface ConversationInput {
     text?: string;
     files?: File[];
 }
-export interface ConversationInputContext {
+export interface ConversationInputContextProps {
     input?: ConversationInput;
     setInput?: React.Dispatch<React.SetStateAction<ConversationInput | undefined>>;
+    error?: string;
+    setError?: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
-export declare const ConversationInputContext: React.Context<ConversationInputContext>;
+export declare const ConversationInputContext: React.Context<ConversationInputContextProps>;
 export declare const ConversationInputContextProvider: ({ children, }: {
     children?: React.ReactNode;
 }) => JSX.Element;

package/dist/types/components/AIConversation/context/DisplayTextContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { ConversationDisplayText } from '../displayText';
-export declare const ConversationDisplayTextContext: import("react").Context<Required<ConversationDisplayText> | undefined>, ConversationDisplayTextProvider: import("react").ComponentType<import("react").PropsWithChildren<Required<ConversationDisplayText>>>, useConversationDisplayText: (params?: {
+export declare const ConversationDisplayTextContext: import("react").Context<Required<ConversationDisplayText>>, ConversationDisplayTextProvider: import("react").ComponentType<import("react").PropsWithChildren<Required<ConversationDisplayText>>>, useConversationDisplayText: (params?: {
     errorMessage?: string | undefined;
 } | undefined) => Required<ConversationDisplayText>;

package/dist/types/components/AIConversation/context/MessageRenderContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { MessageRenderer } from '../types';
-export declare const MessageRendererContext: import("react").Context<MessageRenderer | undefined>, MessageRendererProvider: import("react").ComponentType<import("react").PropsWithChildren<MessageRenderer>>, useMessageRenderer: (params?: {
+export declare const MessageRendererContext: import("react").Context<MessageRenderer>, MessageRendererProvider: import("react").ComponentType<import("react").PropsWithChildren<MessageRenderer>>, useMessageRenderer: (params?: {
     errorMessage?: string | undefined;
 } | undefined) => MessageRenderer;

package/dist/types/components/AIConversation/context/elements/IconElement.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export type IconElementProps = React.ComponentProps<typeof BaseIconElement>;
 export type IconVariant = 'attach' | 'close' | 'image' | 'send-message' | 'user-avatar';
 export declare const DEFAULT_ICON_PATHS: Record<IconVariant, string>;
-export declare const BaseIconElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<never, IconVariant, React.SVGProps<SVGSVGElement>>, SVGSVGElement>;
-export declare const IconElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<Omit<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<never, IconVariant, React.SVGProps<SVGSVGElement>>, "ref"> & React.RefAttributes<SVGSVGElement>, SVGSVGElement>;
+export declare const BaseIconElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<never, IconVariant, React.SVGProps<SVGSVGElement>>, SVGSVGElement>;
+export declare const IconElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<Omit<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<never, IconVariant, React.SVGProps<SVGSVGElement>>, "ref"> & React.RefAttributes<SVGSVGElement>, SVGSVGElement>;

package/dist/types/components/AIConversation/context/elements/definitions.d.ts

@@ -14,22 +14,22 @@ export interface AIConversationElements {
     UnorderedList: typeof UnorderedListElement;
     View: typeof ViewElement;
 }
-export declare const LabelElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<"htmlFor", string, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>, HTMLLabelElement>;
-export declare const TextElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<never, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, HTMLParagraphElement>;
-export declare const UnorderedListElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<never, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>>, HTMLUListElement>;
-export declare const ListItemElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<never, string, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>, HTMLLIElement>;
-export declare const HeadingElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<never, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>, HTMLHeadingElement>;
+export declare const LabelElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<"htmlFor", string, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>>, HTMLLabelElement>;
+export declare const TextElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<never, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>>, HTMLParagraphElement>;
+export declare const UnorderedListElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<never, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>>, HTMLUListElement>;
+export declare const ListItemElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<never, string, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>>, HTMLLIElement>;
+export declare const HeadingElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<never, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>>, HTMLHeadingElement>;
 export type IconElementProps = React.ComponentProps<typeof IconElement>;
 type ImageElementProps = 'src' | 'alt';
-export declare const ImageElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<ImageElementProps, string, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>, HTMLImageElement>;
-export declare const InputElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<"type", string, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>, HTMLInputElement>;
+export declare const ImageElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<ImageElementProps, string, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>>, HTMLImageElement>;
+export declare const InputElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<"type", string, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>>, HTMLInputElement>;
 type ButtonElementProps = 'disabled' | 'onClick' | 'type' | 'tabIndex';
 type ButtonElementVariant = 'attach' | 'remove' | 'send-message';
-export declare const ButtonElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<ButtonElementProps, ButtonElementVariant, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, HTMLButtonElement>;
+export declare const ButtonElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<ButtonElementProps, ButtonElementVariant, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>>, HTMLButtonElement>;
 type ViewElementProps = 'onFocus' | 'tabIndex' | 'onKeyDown';
-export declare const ViewElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<ViewElementProps, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, HTMLDivElement>;
-export declare const SpanElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<never, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, HTMLSpanElement>;
+export declare const ViewElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<ViewElementProps, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, HTMLDivElement>;
+export declare const SpanElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<never, string, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>, HTMLSpanElement>;
 type TextAreaElementProps = 'id' | 'name' | 'onChange' | 'placeholder' | 'autoFocus' | 'onCompositionStart' | 'onCompositionEnd' | 'onKeyDown';
-export declare const TextAreaElement: import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElement<import("@aws-amplify/ui-react-core/dist/types/elements/types").BaseElementProps<TextAreaElementProps, string, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>>, HTMLTextAreaElement>;
+export declare const TextAreaElement: import("@aws-amplify/ui-react-core/elements").BaseElementWithRef<import("@aws-amplify/ui-react-core/elements").BaseElementWithRefProps<TextAreaElementProps, string, import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>>, HTMLTextAreaElement>;
 export declare const AIConversationElements: AIConversationElements;
 export {};

package/dist/types/components/AIConversation/context/index.d.ts

@@ -1,7 +1,7 @@
 export { AIContextContext, AIContextProvider } from './AIContextContext';
 export { ActionsContext, ActionsProvider } from './ActionsContext';
 export { AvatarsContext, AvatarsProvider } from './AvatarsContext';
-export { ConversationInputContext, ConversationInput, ConversationInputContextProvider, } from './ConversationInputContext';
+export { ConversationInputContextProps, ConversationInputContext, ConversationInput, ConversationInputContextProvider, } from './ConversationInputContext';
 export { MessagesContext, RoleContext, MessagesProvider, } from './MessagesContext';
 export { SuggestedPromptsContext, SuggestedPromptProvider, } from './SuggestedPromptsContext';
 export { MessageVariantContext, MessageVariantProvider, } from './MessageVariantContext';
@@ -11,7 +11,7 @@ export { LoadingContextProvider } from './LoadingContext';
 export { ResponseComponentsProvider, RESPONSE_COMPONENT_PREFIX, } from './ResponseComponentsContext';
 export { SendMessageContextProvider } from './SendMessageContext';
 export { MessageRendererProvider, MessageRendererContext, useMessageRenderer, } from './MessageRenderContext';
-export { AttachmentProvider, AttachmentContext } from './AttachmentContext';
+export { AttachmentProvider, AttachmentContext, AttachmentContextProps, } from './AttachmentContext';
 export { WelcomeMessageContext, WelcomeMessageProvider, } from './WelcomeMessageContext';
 export { FallbackComponentContext, FallbackComponentProvider, } from './FallbackComponentContext';
 export * from './elements';

package/dist/types/components/AIConversation/displayText.d.ts

@@ -1,6 +1,8 @@
 import { DisplayTextTemplate } from '@aws-amplify/ui';
 export type ConversationDisplayText = {
     getMessageTimestampText?: (date: Date) => string;
+    getMaxAttachmentErrorText?: (count: number) => string;
+    getAttachmentSizeErrorText?: (sizeText: string) => string;
 };
 export declare const defaultAIConversationDisplayTextEn: Required<AIConversationDisplayText>;
 export type AIConversationDisplayText = DisplayTextTemplate<ConversationDisplayText>;

package/dist/types/components/AIConversation/types.d.ts

@@ -22,6 +22,8 @@ export interface AIConversationInput {
     variant?: MessageVariant;
     controls?: ControlsContextProps;
     allowAttachments?: boolean;
+    maxAttachments?: number;
+    maxAttachmentSize?: number;
     messageRenderer?: MessageRenderer;
 }
 export interface AIConversationProps {

package/dist/types/components/AIConversation/utils.d.ts

@@ -2,3 +2,13 @@ import { ImageContentBlock } from '../../types';
 export declare function formatDate(date: Date): string;
 export declare function convertBufferToBase64(buffer: ArrayBuffer, format: ImageContentBlock['format']): string;
 export declare function getImageTypeFromMimeType(mimeType: string): 'png' | 'jpeg' | 'gif' | 'webp';
+export declare function attachmentsValidator({ files, maxAttachments, maxAttachmentSize, }: {
+    files: File[];
+    maxAttachments: number;
+    maxAttachmentSize: number;
+}): Promise<{
+    acceptedFiles: File[];
+    rejectedFiles: File[];
+    hasMaxAttachmentSizeError: boolean;
+    hasMaxAttachmentsError: boolean;
+}>;

package/dist/types/components/AIConversation/views/default/Attachments.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ConversationInputContext } from '../../context';
+import { ConversationInputContextProps } from '../../context';
 export declare const Attachments: ({ files, setInput, }: {
     files?: File[] | undefined;
-    setInput: ConversationInputContext['setInput'];
+    setInput: ConversationInputContextProps['setInput'];
 }) => JSX.Element | null;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.0.0";
+export declare const VERSION = "1.1.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-ai",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -42,15 +42,15 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@aws-amplify/api-graphql": "^4.3.0",
-    "aws-amplify": "^6.6.5",
+    "@aws-amplify/api-graphql": "unstable",
+    "aws-amplify": "^6.9.0",
     "react": "^16.14.0 || ^17.0 || ^18.0",
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "^6.6.6",
-    "@aws-amplify/ui-react": "^6.6.0",
-    "@aws-amplify/ui-react-core": "^3.0.30"
+    "@aws-amplify/ui": "^6.7.1",
+    "@aws-amplify/ui-react": "^6.7.1",
+    "@aws-amplify/ui-react-core": "^3.1.1"
   },
   "devDependencies": {
     "@types/jest-when": "^3.5.0",