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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, Flex, ScrollView } from '@aws-amplify/ui-react';
+import { Flex, ScrollView } from '@aws-amplify/ui-react';
 import { useIcons, IconAssistant, IconUser } from '@aws-amplify/ui-react/internal';
 import { MessagesControl } from './views/Controls/MessagesControl.mjs';
 import { FormControl } from './views/Controls/FormControl.mjs';
@@ -12,7 +12,7 @@ import { useSetUserAgent } from '@aws-amplify/ui-react-core';
 import { VERSION } from '../../version.mjs';
 import { DefaultMessageControl } from './views/Controls/DefaultMessageControl.mjs';
 
-function Provider({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, allowAttachments, messageRenderer, children, }) {
+function AIConversationBase({ avatars, controls, ...rest }) {
     useSetUserAgent({
         componentName: 'AIConversation',
         packageName: 'react-ai',
@@ -22,53 +22,35 @@ function Provider({ actions, avatars, controls, handleSendMessage, messages, res
     const defaultAvatars = {
         ai: {
             username: 'Assistant',
-            avatar: icons?.assistant ?? React.createElement(IconAssistant, null),
+            avatar: icons?.assistant ?? React.createElement(IconAssistant, { testId: "icon-assistant" }),
         },
         user: {
             username: 'User',
-            avatar: icons?.user ?? React.createElement(IconUser, null),
+            avatar: icons?.user ?? React.createElement(IconUser, { testId: "icon-user" }),
         },
     };
     const providerProps = {
-        messages,
-        handleSendMessage,
+        ...rest,
         avatars: {
             ...defaultAvatars,
             ...avatars,
         },
-        isLoading,
-        elements: {
-            Text,
-        },
-        actions,
-        suggestedPrompts,
-        responseComponents,
-        variant,
         controls: {
             MessageList,
             PromptList,
             Form,
             ...controls,
         },
-        displayText,
-        allowAttachments,
-        messageRenderer,
     };
-    return (React.createElement(AIConversationProvider, { ...providerProps }, children));
-}
-function AIConversationBase(props) {
-    return (React.createElement(Provider, { ...props },
-        React.createElement(Flex, { className: ComponentClassName.AIConversation },
+    return (React.createElement(AIConversationProvider, { ...providerProps },
+        React.createElement(Flex, { className: ComponentClassName.AIConversation, testId: "ai-conversation" },
             React.createElement(ScrollView, { autoScroll: "smooth", flex: "1" },
                 React.createElement(DefaultMessageControl, null),
                 React.createElement(MessagesControl, null)),
             React.createElement(FormControl, null))));
 }
-/**
- * @experimental
- */
 const AIConversation = Object.assign(AIConversationBase, {
-    Provider,
+    Provider: AIConversationProvider,
     DefaultMessage: DefaultMessageControl,
     Messages: MessagesControl,
     Form: FormControl,

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

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { ElementsProvider } from '@aws-amplify/ui-react-core/elements';
 import { defaultAIConversationDisplayTextEn } from './displayText.mjs';
+import { AIContextProvider } from './context/AIContextContext.mjs';
 import { ActionsProvider } from './context/ActionsContext.mjs';
 import { AvatarsProvider } from './context/AvatarsContext.mjs';
 import { ConversationInputContextProvider } from './context/ConversationInputContext.mjs';
@@ -12,30 +12,33 @@ import { ControlsProvider } from './context/ControlsContext.mjs';
 import { LoadingContextProvider } from './context/LoadingContext.mjs';
 import { ResponseComponentsProvider } from './context/ResponseComponentsContext.mjs';
 import { SendMessageContextProvider } from './context/SendMessageContext.mjs';
-import './context/MessageRenderContext.mjs';
+import { MessageRendererProvider } from './context/MessageRenderContext.mjs';
 import { AttachmentProvider } from './context/AttachmentContext.mjs';
 import { WelcomeMessageProvider } from './context/WelcomeMessageContext.mjs';
+import { FallbackComponentProvider } from './context/FallbackComponentContext.mjs';
 import './context/elements/definitions.mjs';
 
-const AIConversationProvider = ({ actions, allowAttachments, avatars, children, controls, displayText, elements, handleSendMessage, isLoading, messages, responseComponents, suggestedPrompts, variant, welcomeMessage, }) => {
+const AIConversationProvider = ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, maxAttachmentSize, maxAttachments, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }) => {
     const _displayText = {
         ...defaultAIConversationDisplayTextEn,
         ...displayText,
     };
-    return (React__default.createElement(ElementsProvider, { elements: elements },
-        React__default.createElement(ControlsProvider, { controls: controls },
-            React__default.createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
-                React__default.createElement(WelcomeMessageProvider, { welcomeMessage: welcomeMessage },
-                    React__default.createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                        React__default.createElement(AttachmentProvider, { allowAttachments: allowAttachments },
-                            React__default.createElement(ConversationDisplayTextProvider, { ..._displayText },
-                                React__default.createElement(ConversationInputContextProvider, null,
-                                    React__default.createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
-                                        React__default.createElement(AvatarsProvider, { avatars: avatars },
-                                            React__default.createElement(ActionsProvider, { actions: actions },
-                                                React__default.createElement(MessageVariantProvider, { variant: variant },
-                                                    React__default.createElement(MessagesProvider, { messages: messages },
-                                                        React__default.createElement(LoadingContextProvider, { isLoading: isLoading }, children)))))))))))))));
+    return (React__default.createElement(ControlsProvider, { controls: controls },
+        React__default.createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
+            React__default.createElement(WelcomeMessageProvider, { welcomeMessage: welcomeMessage },
+                React__default.createElement(FallbackComponentProvider, { FallbackComponent: FallbackResponseComponent },
+                    React__default.createElement(MessageRendererProvider, { ...messageRenderer },
+                        React__default.createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
+                            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 },
+                                            React__default.createElement(AvatarsProvider, { avatars: avatars },
+                                                React__default.createElement(ActionsProvider, { actions: actions },
+                                                    React__default.createElement(MessageVariantProvider, { variant: variant },
+                                                        React__default.createElement(MessagesProvider, { messages: messages },
+                                                            React__default.createElement(AIContextProvider, { aiContext: aiContext },
+                                                                React__default.createElement(LoadingContextProvider, { isLoading: isLoading }, children)))))))))))))))));
 };
 
 export { AIConversationProvider };

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

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+const AIContextContext = React__default.createContext(undefined);
+const AIContextProvider = ({ children, aiContext, }) => {
+    return (React__default.createElement(AIContextContext.Provider, { value: aiContext }, children));
+};
+
+export { AIContextContext, AIContextProvider };

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/FallbackComponentContext.mjs

@@ -0,0 +1,8 @@
+import React__default from 'react';
+
+const FallbackComponentContext = React__default.createContext(undefined);
+const FallbackComponentProvider = ({ children, FallbackComponent, }) => {
+    return (React__default.createElement(FallbackComponentContext.Provider, { value: FallbackComponent }, children));
+};
+
+export { FallbackComponentContext, FallbackComponentProvider };

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

@@ -21,8 +21,12 @@ const convertResponseComponentsToToolConfiguration = (responseComponents) => {
         const { props } = responseComponents[toolName];
         const requiredProps = [];
         Object.keys(props).forEach((propName) => {
-            if (props[propName].required)
+            if (props[propName].required) {
                 requiredProps.push(propName);
+                // The inputSchema for a tool needs to not
+                // have `required` in the properties
+                props[propName].required = undefined;
+            }
         });
         tools[toolName] = {
             description: responseComponents[toolName].description,
@@ -40,4 +44,4 @@ const convertResponseComponentsToToolConfiguration = (responseComponents) => {
     return { tools };
 };
 
-export { RESPONSE_COMPONENT_PREFIX, ResponseComponentsContext, ResponseComponentsProvider, convertResponseComponentsToToolConfiguration };
+export { RESPONSE_COMPONENT_PREFIX, ResponseComponentsContext, ResponseComponentsProvider, convertResponseComponentsToToolConfiguration, prependResponseComponents };

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/createAIConversation.mjs

@@ -8,15 +8,11 @@ import { ViewElement } from './context/elements/definitions.mjs';
 import { AIConversationProvider } from './AIConversationProvider.mjs';
 import { DefaultMessageControl } from './views/Controls/DefaultMessageControl.mjs';
 
-/**
- * @experimental
- */
 function createAIConversation(input = {}) {
-    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, allowAttachments, messageRenderer, } = input;
+    const { suggestedPrompts, actions, responseComponents, variant, controls, displayText, allowAttachments, messageRenderer, FallbackResponseComponent, } = input;
     function AIConversation(props) {
         const { messages, avatars, handleSendMessage, isLoading } = props;
         const providerProps = {
-            elements,
             actions,
             suggestedPrompts,
             responseComponents,
@@ -29,6 +25,7 @@ function createAIConversation(input = {}) {
             handleSendMessage,
             isLoading,
             messageRenderer,
+            FallbackResponseComponent,
         };
         return (React__default.createElement(AIConversationProvider, { ...providerProps },
             React__default.createElement(ViewElement, null,

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/ActionsBarControl.mjs

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import { ActionsContext } from '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Button, Span, View } = AIConversationElements;
@@ -33,8 +35,7 @@ const Container = withBaseElementProps(View, {
 });
 const ActionsBarControl = ({ message, focusable, }) => {
     const actions = React__default.useContext(ActionsContext);
-    return (React__default.createElement(Container, null, actions?.map((action, index) => (React__default.createElement(ActionButton, { "aria-label": action.displayName, key: index, onClick: () => action.handler(message), tabIndex: focusable ? 0 : -1 },
-        React__default.createElement(ActionIcon, { "data-testid": `action-icon-${action.displayName}` }, action.icon))))));
+    return (React__default.createElement(Container, null, actions?.map((action, index) => (React__default.createElement(ActionButton, { key: index, onClick: () => action.handler(message), tabIndex: focusable ? 0 : -1 }, action.component)))));
 };
 ActionsBarControl.Button = ActionButton;
 ActionsBarControl.Container = Container;

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import { ConversationInputContext } from '../../context/ConversationInputContext.mjs';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { useDropZone } from '@aws-amplify/ui-react-core';
 

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import { ConversationInputContext } from '../../context/ConversationInputContext.mjs';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Button, Icon, ListItem, UnorderedList: ListElement, Span, Text, View, } = AIConversationElements;

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import { AvatarsContext } from '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Icon, Span, Text, View } = AIConversationElements;

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';
@@ -13,6 +14,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import { WelcomeMessageContext } from '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import '../../context/elements/definitions.mjs';
 import { PromptControl } from './PromptControl.mjs';
 

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

@@ -1,12 +1,13 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import { AIContextContext } from '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import { ConversationInputContext } from '../../context/ConversationInputContext.mjs';
 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';
@@ -14,10 +15,12 @@ import { SendMessageContext } from '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import { AttachmentContext } from '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+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 { 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';
@@ -100,12 +103,16 @@ 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 ref = React__default.useRef(null);
+    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);
+    const ref = React__default.useRef(null);
     const controls = React__default.useContext(ControlsContext);
+    const [composing, setComposing] = React__default.useState(false);
     const submitMessage = async () => {
         ref.current?.reset();
         const submittedContent = [];
@@ -130,6 +137,7 @@ const FormControl = () => {
         if (handleSendMessage) {
             handleSendMessage({
                 content: submittedContent,
+                aiContext: isFunction(aiContext) ? aiContext() : undefined,
                 toolConfiguration: convertResponseComponentsToToolConfiguration(responseComponents),
             });
         }
@@ -142,7 +150,7 @@ const FormControl = () => {
     };
     const handleOnKeyDown = (event) => {
         const { key, shiftKey } = event;
-        if (key === 'Enter' && !shiftKey) {
+        if (key === 'Enter' && !shiftKey && !composing) {
             event.preventDefault();
             const hasInput = !!input?.text || (input?.files?.length && input?.files?.length > 0);
             if (hasInput) {
@@ -150,15 +158,43 @@ 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 }));
+        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,
         React__default.createElement(InputContainer, null,
             React__default.createElement(VisuallyHidden, null,
                 React__default.createElement(Label, null)),
-            React__default.createElement(TextInput, { onKeyDown: handleOnKeyDown }),
+            React__default.createElement(TextInput, { onKeyDown: handleOnKeyDown, onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false) }),
             React__default.createElement(AttachmentListControl, null)),
         React__default.createElement(SendButton, null,
             React__default.createElement(SendIcon, null))));