@aws-amplify/ui-react-ai 1.0.0 → 1.2.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/Controls/MessagesControl.mjs

@@ -126,7 +126,9 @@ const MessagesControl = () => {
         content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
     return (React__default.createElement(Layout, null, messagesWithRenderableContent?.map((message, index) => {
         return (React__default.createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
-            React__default.createElement(MessageContainer, { "data-testid": `message`, key: `message-${index}`, tabIndex: focusedItemIndex === index ? 0 : -1, onFocus: () => handleFocus(index), onKeyDown: (event) => onKeyDown(index, event), ref: (el) => (messagesRef.current[index] = el) },
+            React__default.createElement(MessageContainer, { "data-testid": `message`, key: `message-${index}`, tabIndex: focusedItemIndex === index ? 0 : -1, onFocus: () => handleFocus(index), onKeyDown: (event) => onKeyDown(index, event), ref: (el) => {
+                    messagesRef.current[index] = el;
+                } },
                 React__default.createElement(HeaderContainer, null,
                     React__default.createElement(AvatarControl, null),
                     React__default.createElement(Timestamp, null, getMessageTimestampText(new Date(message.createdAt)))),

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/hooks/useAIConversation.mjs

@@ -22,7 +22,7 @@ function createUseAIConversation(client) {
         const clientRoute = client.conversations[routeName];
         // We need to keep track of the stream events as the come in
         // for an assistant message, but don't need to keep them in state
-        const contentBlocksRef = React__default.useRef();
+        const contentBlocksRef = React__default.useRef(undefined);
         // Using this hook without an existing conversation id means
         // it will create a new conversation when it is executed
         // we don't want to create 2 conversations

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '1.0.0';
+const VERSION = '1.2.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,
@@ -738,7 +812,9 @@ const MessagesControl = () => {
         content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
     return (React__namespace["default"].createElement(Layout, null, messagesWithRenderableContent?.map((message, index) => {
         return (React__namespace["default"].createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
-            React__namespace["default"].createElement(MessageContainer, { "data-testid": `message`, key: `message-${index}`, tabIndex: focusedItemIndex === index ? 0 : -1, onFocus: () => handleFocus(index), onKeyDown: (event) => onKeyDown(index, event), ref: (el) => (messagesRef.current[index] = el) },
+            React__namespace["default"].createElement(MessageContainer, { "data-testid": `message`, key: `message-${index}`, tabIndex: focusedItemIndex === index ? 0 : -1, onFocus: () => handleFocus(index), onKeyDown: (event) => onKeyDown(index, event), ref: (el) => {
+                    messagesRef.current[index] = el;
+                } },
                 React__namespace["default"].createElement(HeaderContainer, null,
                     React__namespace["default"].createElement(AvatarControl, null),
                     React__namespace["default"].createElement(Timestamp, null, getMessageTimestampText(new Date(message.createdAt)))),
@@ -795,7 +871,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 +882,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 +1026,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 +1054,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 +1067,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) =
                         e.preventDefault();
                     }
                 }, onChange: (e) => {
-                    setInput((prevValue) => ({
+                    setInput?.((prevValue) => ({
                         ...prevValue,
                         text: e.target.value,
                     }));
@@ -1008,6 +1077,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 +1092,7 @@ const PromptList = ({ setInput, suggestedPrompts = [], }) => {
     })));
 };
 
-const VERSION = '1.0.0';
+const VERSION = '1.2.0';
 
 function AIConversationBase({ avatars, controls, ...rest }) {
     uiReactCore.useSetUserAgent({
@@ -1164,7 +1234,7 @@ function createUseAIConversation(client) {
         const clientRoute = client.conversations[routeName];
         // We need to keep track of the stream events as the come in
         // for an assistant message, but don't need to keep them in state
-        const contentBlocksRef = React__namespace["default"].useRef();
+        const contentBlocksRef = React__namespace["default"].useRef(undefined);
         // Using this hook without an existing conversation id means
         // it will create a new conversation when it is executed
         // we don't want to create 2 conversations

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/AIContextContext.d.ts

@@ -3,4 +3,4 @@ export declare const AIContextContext: React.Context<(() => object) | undefined>
 export declare const AIContextProvider: ({ children, aiContext, }: {
     children?: React.ReactNode;
     aiContext?: (() => object) | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -4,4 +4,4 @@ export declare const ActionsContext: React.Context<CustomAction[] | undefined>;
 export declare const ActionsProvider: ({ children, actions, }: {
     children?: React.ReactNode;
     actions?: CustomAction[] | undefined;
-}) => JSX.Element;
+}) => 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>) => React.JSX.Element;

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

@@ -4,4 +4,4 @@ export declare const AvatarsContext: React.Context<Avatars | undefined>;
 export declare const AvatarsProvider: ({ children, avatars, }: {
     children?: React.ReactNode;
     avatars?: Avatars | undefined;
-}) => JSX.Element;
+}) => React.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,17 +7,18 @@ 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>;
 export declare const ControlsProvider: ({ children, controls, }: {
     children?: React.ReactNode;
     controls?: ControlsContextProps | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

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;
+}) => React.JSX.Element;

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

@@ -1,5 +1,4 @@
-/// <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/FallbackComponentContext.d.ts

@@ -4,4 +4,4 @@ export declare const FallbackComponentContext: React.Context<React.ComponentType
 export declare const FallbackComponentProvider: ({ children, FallbackComponent, }: {
     children?: React.ReactNode;
     FallbackComponent?: AIConversationInput['FallbackResponseComponent'];
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -3,4 +3,4 @@ export declare const LoadingContext: React.Context<boolean | undefined>;
 export declare const LoadingContextProvider: ({ children, isLoading, }: {
     children?: React.ReactNode;
     isLoading?: boolean | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -1,5 +1,4 @@
-/// <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/MessageVariantContext.d.ts

@@ -4,4 +4,4 @@ export declare const MessageVariantContext: React.Context<MessageVariant | undef
 export declare const MessageVariantProvider: ({ children, variant, }: {
     children?: React.ReactNode;
     variant?: MessageVariant | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -6,5 +6,5 @@ export declare const RoleContext: React.Context<"user" | "assistant" | undefined
 export declare const MessagesProvider: ({ children, messages, }: {
     children?: React.ReactNode;
     messages: ConversationMessage[];
-}) => JSX.Element;
+}) => React.JSX.Element;
 export {};

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

@@ -7,6 +7,6 @@ export declare const prependResponseComponents: (responseComponents?: ResponseCo
 export declare const ResponseComponentsProvider: ({ children, responseComponents, }: {
     children?: React.ReactNode;
     responseComponents?: ResponseComponents | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export declare const convertResponseComponentsToToolConfiguration: (responseComponents?: ResponseComponents) => ToolConfiguration | undefined;
 export {};

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

@@ -4,4 +4,4 @@ export declare const SendMessageContext: React.Context<SendMessage | undefined>;
 export declare const SendMessageContextProvider: ({ children, handleSendMessage, }: {
     children?: React.ReactNode;
     handleSendMessage: SendMessage;
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -5,5 +5,5 @@ export declare const SuggestedPromptsContext: React.Context<SuggestedPromptsCont
 export declare const SuggestedPromptProvider: ({ children, suggestedPrompts, }: {
     children?: React.ReactNode;
     suggestedPrompts?: SuggestedPrompt[] | undefined;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export {};

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

@@ -4,5 +4,5 @@ export declare const WelcomeMessageContext: React.Context<WelcomeMessageContextP
 export declare const WelcomeMessageProvider: ({ children, welcomeMessage, }: {
     children?: React.ReactNode;
     welcomeMessage?: React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export {};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconElement } from './IconElement';
 export interface AIConversationElements {
     Button: typeof ButtonElement;
@@ -14,22 +13,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 {
@@ -32,10 +34,10 @@ export interface AIConversationProps {
     aiContext?: () => object;
 }
 export interface AIConversation<PropsType extends AIConversationProps = AIConversationProps> {
-    (props: PropsType): JSX.Element;
-    DefaultMessage: () => JSX.Element | undefined;
-    Messages: () => JSX.Element;
-    Form: () => JSX.Element;
+    (props: PropsType): React.JSX.Element;
+    DefaultMessage: () => React.JSX.Element | undefined;
+    Messages: () => React.JSX.Element;
+    Form: () => React.JSX.Element;
     Provider: (props: AIConversationProviderProps) => React.JSX.Element;
 }
 export type MessageVariant = 'bubble' | 'default';

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/Controls/AttachmentListControl.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { AIConversationElements } from '../../context/elements';
 export declare const RemoveButtonControl: RemoveButtonControl;
 interface RemoveButtonControl<T extends Partial<AIConversationElements> = AIConversationElements> {
     (props: {
         onRemove: () => void;
-    }): JSX.Element;
+    }): React.JSX.Element;
     Button: T['Button'];
     Icon: T['Icon'];
 }
@@ -13,7 +13,7 @@ interface TextControl<T extends Partial<AIConversationElements> = AIConversation
     (props: {
         fileName: string;
         fileSize: number;
-    }): JSX.Element;
+    }): React.JSX.Element;
     Container: T['View'];
     FileName: T['Text'];
     FileSize: T['Text'];
@@ -24,7 +24,7 @@ interface AttachmentControl<T extends Partial<AIConversationElements> = AIConver
     (props: {
         image: File;
         onRemove: () => void;
-    }): JSX.Element;
+    }): React.JSX.Element;
     Container: T['ListItem'];
     ImageIcon: T['Icon'];
     RemoveButton: RemoveButtonControl<T>;
@@ -32,7 +32,7 @@ interface AttachmentControl<T extends Partial<AIConversationElements> = AIConver
 }
 export declare const AttachmentListControl: AttachmentListControl;
 export interface AttachmentListControl<T extends Partial<AIConversationElements> = AIConversationElements> {
-    (): JSX.Element;
+    (): React.JSX.Element;
     List: T['UnorderedList'];
     Item: AttachmentControl<T>;
 }

package/dist/types/components/AIConversation/views/Controls/DefaultMessageControl.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const DefaultMessageControl: () => JSX.Element | undefined;
+import * as React from 'react';
+export declare const DefaultMessageControl: () => React.JSX.Element | undefined;

package/dist/types/components/AIConversation/views/Controls/MessagesControl.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { AIConversationElements } from '../../context/elements';
 import { ActionsBarControl } from './ActionsBarControl';
 import { AvatarControl } from './AvatarControl';
@@ -7,11 +7,11 @@ export declare const MessageControl: MessageControl;
 interface MessageControl {
     (props: {
         message: ConversationMessage;
-    }): JSX.Element;
+    }): React.JSX.Element;
 }
 export declare const MessagesControl: MessagesControl;
 export interface MessagesControl {
-    (): JSX.Element;
+    (): React.JSX.Element;
     ActionsBar: ActionsBarControl;
     Avatar: AvatarControl;
     Container: AIConversationElements['View'];

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

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

package/dist/types/types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { V6Client } from '@aws-amplify/api-graphql';
 export type ConversationRoute = V6Client<any>['conversations'][string];
 export type Conversation = NonNullable<Awaited<ReturnType<ConversationRoute['create']>>['data']>;

package/dist/types/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-ai",
-  "version": "1.0.0",
+  "version": "1.2.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",
-    "react": "^16.14.0 || ^17.0 || ^18.0",
-    "react-dom": "^16.14.0 || ^17.0 || ^18.0"
+    "@aws-amplify/api-graphql": "unstable",
+    "aws-amplify": "^6.9.0",
+    "react": "^16.14 || ^17 || ^18 || ^19",
+    "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "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.8.0",
+    "@aws-amplify/ui-react-core": "^3.2.0"
   },
   "devDependencies": {
     "@types/jest-when": "^3.5.0",