@aws-amplify/ui-react-ai 1.3.0 → 1.4.0

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

@@ -8,6 +8,9 @@ const defaultAIConversationDisplayTextEn = {
     getAttachmentSizeErrorText(sizeText) {
         return `File size must be below ${sizeText}.`;
     },
+    getAttachmentFormatErrorText(formats) {
+        return `Files must be one of the supported types: ${formats.join(', ')}.`;
+    },
 };
 
 export { defaultAIConversationDisplayTextEn };

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

@@ -31,14 +31,63 @@ function convertBufferToBase64(buffer, format) {
     const base64string = arrayBufferToBase64(buffer);
     return `data:image/${format};base64,${base64string}`;
 }
-function getImageTypeFromMimeType(mimeType) {
-    return mimeType.split('/')[1];
+// This function will return the file extension or mime type
+function getAttachmentFormat(file) {
+    const fileNameParts = file.name.split('.');
+    // try to get format from extension first
+    // this is because some document mime file types are very complex
+    // and don't easily map to what Bedrock needs like "doc" or "docx"
+    if (fileNameParts.length > 1) {
+        return fileNameParts[fileNameParts.length - 1];
+    }
+    // return mime type if no extension exists
+    return file.type.split('/')[1];
+}
+// This will take a File and return a string to be used as the document name
+// in Bedrock. Bedrock has specific requirements around a valid name:
+// https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_DocumentBlock.html
+function getValidDocumentName(file) {
+    const fileNameParts = file.name.split('.');
+    const baseFileName = fileNameParts.length > 1 ? fileNameParts.slice(0, -1).join('') : file.name;
+    // This is a regex to target special characters that are not allowed in file names
+    const specialCharactersRegex = /[!@#$%^&*()+\-=[\]{};':"\\|,.<>/?]/g;
+    return baseFileName.replace(specialCharactersRegex, '').replace(/\s+/g, '_');
+}
+// Using Sets instead of Arrays for faster and easier lookups
+const documentFileTypes = new Set([
+    'docx',
+    'csv',
+    'html',
+    'txt',
+    'pdf',
+    'md',
+    'doc',
+    'xlsx',
+    'xls',
+]);
+const imageFileTypes = new Set(['png', 'jpeg', 'gif', 'webp']);
+const validFileTypes = new Set([
+    ...documentFileTypes,
+    ...imageFileTypes,
+]);
+function isDocumentFormat(format) {
+    return documentFileTypes.has(format);
+}
+function isImageFormat(format) {
+    return imageFileTypes.has(format);
 }
 async function attachmentsValidator({ files, maxAttachments, maxAttachmentSize, }) {
     const acceptedFiles = [];
     const rejectedFiles = [];
-    let hasMaxSizeError = false;
+    let hasMaxAttachmentSizeError = false;
+    let hasUnsupportedFileError = false;
     for (const file of files) {
+        const format = getAttachmentFormat(file);
+        if (!validFileTypes.has(format)) {
+            rejectedFiles.push(file);
+            hasUnsupportedFileError = true;
+            continue;
+        }
         const arrayBuffer = await file.arrayBuffer();
         const base64 = arrayBufferToBase64(arrayBuffer);
         if (base64.length < maxAttachmentSize) {
@@ -46,23 +95,25 @@ async function attachmentsValidator({ files, maxAttachments, maxAttachmentSize,
         }
         else {
             rejectedFiles.push(file);
-            hasMaxSizeError = true;
+            hasMaxAttachmentSizeError = true;
         }
     }
     if (acceptedFiles.length > maxAttachments) {
         return {
             acceptedFiles: acceptedFiles.slice(0, maxAttachments),
             rejectedFiles: [...acceptedFiles.slice(maxAttachments), ...rejectedFiles],
+            hasMaxAttachmentSizeError,
+            hasUnsupportedFileError,
             hasMaxAttachmentsError: true,
-            hasMaxAttachmentSizeError: hasMaxSizeError,
         };
     }
     return {
         acceptedFiles,
         rejectedFiles,
+        hasMaxAttachmentSizeError,
+        hasUnsupportedFileError,
         hasMaxAttachmentsError: false,
-        hasMaxAttachmentSizeError: hasMaxSizeError,
     };
 }
 
-export { attachmentsValidator, convertBufferToBase64, formatDate, getImageTypeFromMimeType };
+export { attachmentsValidator, convertBufferToBase64, documentFileTypes, formatDate, getAttachmentFormat, getValidDocumentName, imageFileTypes, isDocumentFormat, isImageFormat, validFileTypes };

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

@@ -19,7 +19,7 @@ import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { AttachFileControl } from './AttachFileControl.mjs';
 import { AttachmentListControl } from './AttachmentListControl.mjs';
-import { attachmentsValidator, getImageTypeFromMimeType } from '../../utils.mjs';
+import { attachmentsValidator, validFileTypes, getAttachmentFormat, isDocumentFormat, getValidDocumentName, isImageFormat } from '../../utils.mjs';
 import { humanFileSize, isFunction } from '@aws-amplify/ui';
 
 const { Button, Icon, Label: LabelElement, TextArea, View, } = AIConversationElements;
@@ -102,6 +102,8 @@ const TextInput = React__default.forwardRef(function TextInput(props, ref) {
 const InputContainer = withBaseElementProps(View, {
     className: `${FIELD_BLOCK}__input-container`,
 });
+const isConversationInputWithText = (input) => !!input?.text;
+const isConversationInputWithFiles = (input) => !!input?.files?.length;
 const FormControl = () => {
     const { input, setInput, error, setError } = React__default.useContext(ConversationInputContext);
     const handleSendMessage = React__default.useContext(SendMessageContext);
@@ -113,25 +115,46 @@ const FormControl = () => {
     const ref = React__default.useRef(null);
     const controls = React__default.useContext(ControlsContext);
     const [composing, setComposing] = React__default.useState(false);
+    const [isSubmitting, setIsSubmitting] = React__default.useState(false);
+    const isInputText = isConversationInputWithText(input);
+    // an empty array will resolve false when evaluating the length
+    const isInputFiles = isConversationInputWithFiles(input);
     const submitMessage = async () => {
-        ref.current?.reset();
+        const hasInput = isInputFiles || isInputText;
+        // Prevent double submission and empty submission
+        if (isSubmitting || !hasInput) {
+            return;
+        }
+        setIsSubmitting(true);
         const submittedContent = [];
-        if (input?.text) {
+        if (isInputText) {
             const textContent = {
                 text: input.text,
             };
             submittedContent.push(textContent);
         }
-        if (input?.files) {
+        if (isInputFiles) {
             for (const file of input.files) {
                 const buffer = await file.arrayBuffer();
-                const fileContent = {
-                    image: {
-                        format: getImageTypeFromMimeType(file.type),
-                        source: { bytes: new Uint8Array(buffer) },
-                    },
-                };
-                submittedContent.push(fileContent);
+                const format = getAttachmentFormat(file);
+                const source = { bytes: new Uint8Array(buffer) };
+                if (isDocumentFormat(format)) {
+                    submittedContent.push({
+                        document: {
+                            name: getValidDocumentName(file),
+                            format,
+                            source,
+                        },
+                    });
+                }
+                else if (isImageFormat(format)) {
+                    submittedContent.push({
+                        image: {
+                            format,
+                            source,
+                        },
+                    });
+                }
             }
         }
         if (handleSendMessage) {
@@ -141,6 +164,12 @@ const FormControl = () => {
                 toolConfiguration: convertResponseComponentsToToolConfiguration(responseComponents),
             });
         }
+        // Clear the attachment errors when submitting
+        // because the errors are not actually preventing the submission
+        // but rather notifying the user that certain files were not attached and why they weren't
+        setError?.(undefined);
+        setIsSubmitting(false);
+        ref.current?.reset();
         if (setInput)
             setInput({ text: '', files: [] });
     };
@@ -152,24 +181,26 @@ const FormControl = () => {
         const { key, shiftKey } = event;
         if (key === 'Enter' && !shiftKey && !composing) {
             event.preventDefault();
-            const hasInput = !!input?.text || (input?.files?.length && input?.files?.length > 0);
-            if (hasInput) {
-                submitMessage();
-            }
+            submitMessage();
         }
     };
     const onValidate = React__default.useCallback(async (files) => {
         const previousFiles = input?.files ?? [];
-        const { acceptedFiles, hasMaxAttachmentsError, hasMaxAttachmentSizeError, } = await attachmentsValidator({
+        const { acceptedFiles, hasMaxAttachmentsError, hasMaxAttachmentSizeError, hasUnsupportedFileError, } = await attachmentsValidator({
             files: [...files, ...previousFiles],
             maxAttachments,
             maxAttachmentSize,
         });
-        if (hasMaxAttachmentsError || hasMaxAttachmentSizeError) {
+        if (hasMaxAttachmentsError ||
+            hasMaxAttachmentSizeError ||
+            hasUnsupportedFileError) {
             const errors = [];
             if (hasMaxAttachmentsError) {
                 errors.push(displayText.getMaxAttachmentErrorText(maxAttachments));
             }
+            if (hasUnsupportedFileError) {
+                errors.push(displayText.getAttachmentFormatErrorText([...validFileTypes]));
+            }
             if (hasMaxAttachmentSizeError) {
                 errors.push(displayText.getAttachmentSizeErrorText(
                 // base64 size is about 137% that of the file size
@@ -187,7 +218,7 @@ const FormControl = () => {
         }));
     }, [setInput, input, displayText, maxAttachmentSize, maxAttachments, setError]);
     if (controls?.Form) {
-        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(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, onValidate: onValidate, allowAttachments: allowAttachments, isLoading: isLoading ?? isSubmitting, 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

@@ -1,5 +1,7 @@
 import React__default from 'react';
+import { classNames, ComponentClassName, humanFileSize } from '@aws-amplify/ui';
 import { Image } from '@aws-amplify/ui-react';
+import { useIcons, IconDocument } from '@aws-amplify/ui-react/internal';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
 import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
@@ -21,7 +23,6 @@ import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { convertBufferToBase64 } from '../../utils.mjs';
 import { ActionsBarControl } from './ActionsBarControl.mjs';
 import { AvatarControl } from './AvatarControl.mjs';
-import { classNames } from '@aws-amplify/ui';
 
 const { Text, View } = AIConversationElements;
 const MESSAGES_BLOCK = 'amplify-ai-conversation__message__list';
@@ -55,6 +56,17 @@ const ToolContent = ({ toolUse, }) => {
         }
     }
 };
+const DocumentContent = ({ format, name, source, }) => {
+    const icons = useIcons('aiConversation');
+    const fileIcon = icons?.document ?? React__default.createElement(IconDocument, null);
+    return (React__default.createElement(View, { className: ComponentClassName.AIConversationAttachment },
+        fileIcon,
+        React__default.createElement(View, { className: ComponentClassName.AIConversationAttachmentName },
+            name,
+            ".",
+            format),
+        React__default.createElement(View, { className: ComponentClassName.AIConversationAttachmentSize }, humanFileSize(source.bytes.length, true))));
+};
 const MessageControl = ({ message }) => {
     const messageRenderer = React__default.useContext(MessageRendererContext);
     return (React__default.createElement(React__default.Fragment, null, message.content.map((content, index) => {
@@ -64,6 +76,9 @@ const MessageControl = ({ message }) => {
         else if (content.image) {
             return messageRenderer?.image ? (React__default.createElement(React__default.Fragment, { key: index }, messageRenderer?.image({ image: content.image }))) : (React__default.createElement(MediaContent, { "data-testid": 'image-content', key: index, alt: "", src: convertBufferToBase64(content.image?.source.bytes, content.image?.format) }));
         }
+        else if (content.document) {
+            return React__default.createElement(DocumentContent, { key: index, ...content.document });
+        }
         else if (content.toolUse) {
             return React__default.createElement(ToolContent, { toolUse: content.toolUse, key: index });
         }
@@ -143,4 +158,4 @@ MessagesControl.HeaderContainer = HeaderContainer;
 MessagesControl.Layout = Layout;
 MessagesControl.Message = MessageControl;
 
-export { MessageControl, MessagesControl };
+export { DocumentContent, MessageControl, MessagesControl };

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

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import { View, Image, Text, Button } from '@aws-amplify/ui-react';
-import { useIcons, IconClose } from '@aws-amplify/ui-react/internal';
+import { useIcons, IconClose, IconDocument } from '@aws-amplify/ui-react/internal';
 import { ComponentClassName, humanFileSize } from '@aws-amplify/ui';
+import { getAttachmentFormat, documentFileTypes } from '../../utils.mjs';
 
 const Attachment = ({ file, handleRemove, }) => {
     const icons = useIcons('aiConversation');
     const removeIcon = icons?.remove ?? React.createElement(IconClose, null);
+    const fileIcon = icons?.document ?? React.createElement(IconDocument, null);
+    const format = getAttachmentFormat(file);
+    const isDocument = documentFileTypes.has(format);
     return (React.createElement(View, { className: ComponentClassName.AIConversationAttachment },
-        React.createElement(Image, { className: ComponentClassName.AIConversationAttachmentImage, src: URL.createObjectURL(file), alt: file.name }),
+        isDocument ? (fileIcon) : (React.createElement(Image, { className: ComponentClassName.AIConversationAttachmentImage, src: URL.createObjectURL(file), alt: file.name })),
         React.createElement(Text, { as: "span", className: ComponentClassName.AIConversationAttachmentName }, file.name),
         React.createElement(Text, { as: "span", className: ComponentClassName.AIConversationAttachmentSize }, humanFileSize(file.size, true)),
         React.createElement(Button, { size: "small", variation: "link", colorTheme: "error", className: ComponentClassName.AIConversationAttachmentRemove, onClick: handleRemove }, removeIcon)));

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

@@ -3,6 +3,7 @@ import { View, Button, VisuallyHidden, TextAreaField, Message, DropZone } from '
 import { useIcons, IconSend, IconAttach } from '@aws-amplify/ui-react/internal';
 import { ComponentClassName } from '@aws-amplify/ui';
 import { Attachments } from './Attachments.mjs';
+import { validFileTypes } from '../../utils.mjs';
 
 function isHTMLFormElement(target) {
     return 'form' in target;
@@ -26,8 +27,9 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isL
     const sendIcon = icons?.send ?? React.createElement(IconSend, null);
     const attachIcon = icons?.attach ?? React.createElement(IconAttach, null);
     const hiddenInput = React.useRef(null);
+    // Bedrock does not accept message that are empty or are only whitespace
+    const isInputEmpty = !input?.text?.length || !!input.text.match(/^\s+$/);
     const [composing, setComposing] = React.useState(false);
-    const isInputEmpty = !input?.text?.length && !input?.files?.length;
     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: () => {
@@ -43,7 +45,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isL
                                 return;
                             }
                             onValidate(Array.from(e.target.files));
-                        }, multiple: true, accept: ".jpeg,.png,.webp,.gif", "data-testid": "hidden-file-input" })))) : null,
+                        }, multiple: true, accept: [...validFileTypes].map((type) => `.${type}`).join(','), "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;
@@ -57,10 +59,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isL
                         text: e.target.value,
                     }));
                 } }),
-            React.createElement(Button, { type: "submit", variation: "primary", className: ComponentClassName.AIConversationFormSend, 
-                // we intentionally || in the case where isLoading is false we should use the value of isInputEmpty
-                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                isDisabled: isLoading || isInputEmpty },
+            React.createElement(Button, { type: "submit", variation: "primary", className: ComponentClassName.AIConversationFormSend, 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/components/AIConversation/views/default/MessageList.mjs

@@ -70,6 +70,7 @@ const MessageList = ({ messages, }) => {
     const isLoading = React.useContext(LoadingContext);
     const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
         content.text ??
+        content.document ??
         content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
     return (React.createElement(View, { className: ComponentClassName.AIConversationMessageList },
         isLoading ? (React.createElement(React.Fragment, null,

package/dist/esm/hooks/useAIConversation.mjs

@@ -82,16 +82,17 @@ function createUseAIConversation(client) {
             // between the gen2 schema definition and
             // whats in amplify_outputs
             if (!clientRoute) {
+                const error = {
+                    message: 'Conversation route does not exist',
+                    errorInfo: null,
+                    errorType: '',
+                };
                 setDataState({
                     ...ERROR_STATE,
                     data: { messages: [] },
-                    messages: [
-                        {
-                            message: 'Conversation route does not exist',
-                            errorInfo: null,
-                            errorType: '',
-                        },
-                    ],
+                    // TODO in MV bump: remove `messages`
+                    messages: [error],
+                    errors: [error],
                 });
                 return;
             }
@@ -205,7 +206,9 @@ function createUseAIConversation(client) {
                         return {
                             ...prev,
                             ...ERROR_STATE,
+                            // TODO in MV bump: remove `messages`
                             messages: error.errors,
+                            errors: error.errors,
                         };
                     });
                 },
@@ -249,16 +252,17 @@ function createUseAIConversation(client) {
                 conversation.sendMessage(input);
             }
             else {
+                const error = {
+                    message: 'No conversation found',
+                    errorInfo: null,
+                    errorType: '',
+                };
                 setDataState((prev) => ({
                     ...prev,
                     ...ERROR_STATE,
-                    messages: [
-                        {
-                            message: 'No conversation found',
-                            errorInfo: null,
-                            errorType: '',
-                        },
-                    ],
+                    // TODO in MV bump: remove `messages`
+                    messages: [error],
+                    errors: [error],
                 }));
             }
         }, [conversation]);

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '1.3.0';
+const VERSION = '1.4.0';
 
 export { VERSION };

package/dist/index.js

@@ -102,14 +102,63 @@ function convertBufferToBase64(buffer, format) {
     const base64string = arrayBufferToBase64(buffer);
     return `data:image/${format};base64,${base64string}`;
 }
-function getImageTypeFromMimeType(mimeType) {
-    return mimeType.split('/')[1];
+// This function will return the file extension or mime type
+function getAttachmentFormat(file) {
+    const fileNameParts = file.name.split('.');
+    // try to get format from extension first
+    // this is because some document mime file types are very complex
+    // and don't easily map to what Bedrock needs like "doc" or "docx"
+    if (fileNameParts.length > 1) {
+        return fileNameParts[fileNameParts.length - 1];
+    }
+    // return mime type if no extension exists
+    return file.type.split('/')[1];
+}
+// This will take a File and return a string to be used as the document name
+// in Bedrock. Bedrock has specific requirements around a valid name:
+// https://docs.aws.amazon.com/bedrock/latest/APIReference/API_runtime_DocumentBlock.html
+function getValidDocumentName(file) {
+    const fileNameParts = file.name.split('.');
+    const baseFileName = fileNameParts.length > 1 ? fileNameParts.slice(0, -1).join('') : file.name;
+    // This is a regex to target special characters that are not allowed in file names
+    const specialCharactersRegex = /[!@#$%^&*()+\-=[\]{};':"\\|,.<>/?]/g;
+    return baseFileName.replace(specialCharactersRegex, '').replace(/\s+/g, '_');
+}
+// Using Sets instead of Arrays for faster and easier lookups
+const documentFileTypes = new Set([
+    'docx',
+    'csv',
+    'html',
+    'txt',
+    'pdf',
+    'md',
+    'doc',
+    'xlsx',
+    'xls',
+]);
+const imageFileTypes = new Set(['png', 'jpeg', 'gif', 'webp']);
+const validFileTypes = new Set([
+    ...documentFileTypes,
+    ...imageFileTypes,
+]);
+function isDocumentFormat(format) {
+    return documentFileTypes.has(format);
+}
+function isImageFormat(format) {
+    return imageFileTypes.has(format);
 }
 async function attachmentsValidator({ files, maxAttachments, maxAttachmentSize, }) {
     const acceptedFiles = [];
     const rejectedFiles = [];
-    let hasMaxSizeError = false;
+    let hasMaxAttachmentSizeError = false;
+    let hasUnsupportedFileError = false;
     for (const file of files) {
+        const format = getAttachmentFormat(file);
+        if (!validFileTypes.has(format)) {
+            rejectedFiles.push(file);
+            hasUnsupportedFileError = true;
+            continue;
+        }
         const arrayBuffer = await file.arrayBuffer();
         const base64 = arrayBufferToBase64(arrayBuffer);
         if (base64.length < maxAttachmentSize) {
@@ -117,22 +166,24 @@ async function attachmentsValidator({ files, maxAttachments, maxAttachmentSize,
         }
         else {
             rejectedFiles.push(file);
-            hasMaxSizeError = true;
+            hasMaxAttachmentSizeError = true;
         }
     }
     if (acceptedFiles.length > maxAttachments) {
         return {
             acceptedFiles: acceptedFiles.slice(0, maxAttachments),
             rejectedFiles: [...acceptedFiles.slice(maxAttachments), ...rejectedFiles],
+            hasMaxAttachmentSizeError,
+            hasUnsupportedFileError,
             hasMaxAttachmentsError: true,
-            hasMaxAttachmentSizeError: hasMaxSizeError,
         };
     }
     return {
         acceptedFiles,
         rejectedFiles,
+        hasMaxAttachmentSizeError,
+        hasUnsupportedFileError,
         hasMaxAttachmentsError: false,
-        hasMaxAttachmentSizeError: hasMaxSizeError,
     };
 }
 
@@ -144,6 +195,9 @@ const defaultAIConversationDisplayTextEn = {
     getAttachmentSizeErrorText(sizeText) {
         return `File size must be below ${sizeText}.`;
     },
+    getAttachmentFormatErrorText(formats) {
+        return `Files must be one of the supported types: ${formats.join(', ')}.`;
+    },
 };
 
 const { ConversationDisplayTextContext, ConversationDisplayTextProvider, useConversationDisplayText, } = uiReactCore.createContextUtilities({
@@ -605,6 +659,8 @@ const TextInput = React__namespace["default"].forwardRef(function TextInput(prop
 const InputContainer = elements.withBaseElementProps(View$2, {
     className: `${FIELD_BLOCK}__input-container`,
 });
+const isConversationInputWithText = (input) => !!input?.text;
+const isConversationInputWithFiles = (input) => !!input?.files?.length;
 const FormControl = () => {
     const { input, setInput, error, setError } = React__namespace["default"].useContext(ConversationInputContext);
     const handleSendMessage = React__namespace["default"].useContext(SendMessageContext);
@@ -616,25 +672,46 @@ const FormControl = () => {
     const ref = React__namespace["default"].useRef(null);
     const controls = React__namespace["default"].useContext(ControlsContext);
     const [composing, setComposing] = React__namespace["default"].useState(false);
+    const [isSubmitting, setIsSubmitting] = React__namespace["default"].useState(false);
+    const isInputText = isConversationInputWithText(input);
+    // an empty array will resolve false when evaluating the length
+    const isInputFiles = isConversationInputWithFiles(input);
     const submitMessage = async () => {
-        ref.current?.reset();
+        const hasInput = isInputFiles || isInputText;
+        // Prevent double submission and empty submission
+        if (isSubmitting || !hasInput) {
+            return;
+        }
+        setIsSubmitting(true);
         const submittedContent = [];
-        if (input?.text) {
+        if (isInputText) {
             const textContent = {
                 text: input.text,
             };
             submittedContent.push(textContent);
         }
-        if (input?.files) {
+        if (isInputFiles) {
             for (const file of input.files) {
                 const buffer = await file.arrayBuffer();
-                const fileContent = {
-                    image: {
-                        format: getImageTypeFromMimeType(file.type),
-                        source: { bytes: new Uint8Array(buffer) },
-                    },
-                };
-                submittedContent.push(fileContent);
+                const format = getAttachmentFormat(file);
+                const source = { bytes: new Uint8Array(buffer) };
+                if (isDocumentFormat(format)) {
+                    submittedContent.push({
+                        document: {
+                            name: getValidDocumentName(file),
+                            format,
+                            source,
+                        },
+                    });
+                }
+                else if (isImageFormat(format)) {
+                    submittedContent.push({
+                        image: {
+                            format,
+                            source,
+                        },
+                    });
+                }
             }
         }
         if (handleSendMessage) {
@@ -644,6 +721,12 @@ const FormControl = () => {
                 toolConfiguration: convertResponseComponentsToToolConfiguration(responseComponents),
             });
         }
+        // Clear the attachment errors when submitting
+        // because the errors are not actually preventing the submission
+        // but rather notifying the user that certain files were not attached and why they weren't
+        setError?.(undefined);
+        setIsSubmitting(false);
+        ref.current?.reset();
         if (setInput)
             setInput({ text: '', files: [] });
     };
@@ -655,24 +738,26 @@ const FormControl = () => {
         const { key, shiftKey } = event;
         if (key === 'Enter' && !shiftKey && !composing) {
             event.preventDefault();
-            const hasInput = !!input?.text || (input?.files?.length && input?.files?.length > 0);
-            if (hasInput) {
-                submitMessage();
-            }
+            submitMessage();
         }
     };
     const onValidate = React__namespace["default"].useCallback(async (files) => {
         const previousFiles = input?.files ?? [];
-        const { acceptedFiles, hasMaxAttachmentsError, hasMaxAttachmentSizeError, } = await attachmentsValidator({
+        const { acceptedFiles, hasMaxAttachmentsError, hasMaxAttachmentSizeError, hasUnsupportedFileError, } = await attachmentsValidator({
             files: [...files, ...previousFiles],
             maxAttachments,
             maxAttachmentSize,
         });
-        if (hasMaxAttachmentsError || hasMaxAttachmentSizeError) {
+        if (hasMaxAttachmentsError ||
+            hasMaxAttachmentSizeError ||
+            hasUnsupportedFileError) {
             const errors = [];
             if (hasMaxAttachmentsError) {
                 errors.push(displayText.getMaxAttachmentErrorText(maxAttachments));
             }
+            if (hasUnsupportedFileError) {
+                errors.push(displayText.getAttachmentFormatErrorText([...validFileTypes]));
+            }
             if (hasMaxAttachmentSizeError) {
                 errors.push(displayText.getAttachmentSizeErrorText(
                 // base64 size is about 137% that of the file size
@@ -690,7 +775,7 @@ const FormControl = () => {
         }));
     }, [setInput, input, displayText, maxAttachmentSize, maxAttachments, setError]);
     if (controls?.Form) {
-        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(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, onValidate: onValidate, allowAttachments: allowAttachments, isLoading: isLoading ?? isSubmitting, 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,
@@ -741,6 +826,17 @@ const ToolContent = ({ toolUse, }) => {
         }
     }
 };
+const DocumentContent = ({ format, name, source, }) => {
+    const icons = internal.useIcons('aiConversation');
+    const fileIcon = icons?.document ?? React__namespace["default"].createElement(internal.IconDocument, null);
+    return (React__namespace["default"].createElement(View$1, { className: ui.ComponentClassName.AIConversationAttachment },
+        fileIcon,
+        React__namespace["default"].createElement(View$1, { className: ui.ComponentClassName.AIConversationAttachmentName },
+            name,
+            ".",
+            format),
+        React__namespace["default"].createElement(View$1, { className: ui.ComponentClassName.AIConversationAttachmentSize }, ui.humanFileSize(source.bytes.length, true))));
+};
 const MessageControl = ({ message }) => {
     const messageRenderer = React__namespace["default"].useContext(MessageRendererContext);
     return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, message.content.map((content, index) => {
@@ -750,6 +846,9 @@ const MessageControl = ({ message }) => {
         else if (content.image) {
             return messageRenderer?.image ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, { key: index }, messageRenderer?.image({ image: content.image }))) : (React__namespace["default"].createElement(MediaContent, { "data-testid": 'image-content', key: index, alt: "", src: convertBufferToBase64(content.image?.source.bytes, content.image?.format) }));
         }
+        else if (content.document) {
+            return React__namespace["default"].createElement(DocumentContent, { key: index, ...content.document });
+        }
         else if (content.toolUse) {
             return React__namespace["default"].createElement(ToolContent, { toolUse: content.toolUse, key: index });
         }
@@ -988,6 +1087,7 @@ const MessageList = ({ messages, }) => {
     const isLoading = React__namespace.useContext(LoadingContext);
     const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
         content.text ??
+        content.document ??
         content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
     return (React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageList },
         isLoading ? (React__namespace.createElement(React__namespace.Fragment, null,
@@ -999,8 +1099,11 @@ const MessageList = ({ messages, }) => {
 const Attachment = ({ file, handleRemove, }) => {
     const icons = internal.useIcons('aiConversation');
     const removeIcon = icons?.remove ?? React__namespace.createElement(internal.IconClose, null);
+    const fileIcon = icons?.document ?? React__namespace.createElement(internal.IconDocument, null);
+    const format = getAttachmentFormat(file);
+    const isDocument = documentFileTypes.has(format);
     return (React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationAttachment },
-        React__namespace.createElement(uiReact.Image, { className: ui.ComponentClassName.AIConversationAttachmentImage, src: URL.createObjectURL(file), alt: file.name }),
+        isDocument ? (fileIcon) : (React__namespace.createElement(uiReact.Image, { className: ui.ComponentClassName.AIConversationAttachmentImage, src: URL.createObjectURL(file), alt: file.name })),
         React__namespace.createElement(uiReact.Text, { as: "span", className: ui.ComponentClassName.AIConversationAttachmentName }, file.name),
         React__namespace.createElement(uiReact.Text, { as: "span", className: ui.ComponentClassName.AIConversationAttachmentSize }, ui.humanFileSize(file.size, true)),
         React__namespace.createElement(uiReact.Button, { size: "small", variation: "link", colorTheme: "error", className: ui.ComponentClassName.AIConversationAttachmentRemove, onClick: handleRemove }, removeIcon)));
@@ -1041,8 +1144,9 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isL
     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);
+    // Bedrock does not accept message that are empty or are only whitespace
+    const isInputEmpty = !input?.text?.length || !!input.text.match(/^\s+$/);
     const [composing, setComposing] = React__namespace.useState(false);
-    const isInputEmpty = !input?.text?.length && !input?.files?.length;
     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: () => {
@@ -1058,7 +1162,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isL
                                 return;
                             }
                             onValidate(Array.from(e.target.files));
-                        }, multiple: true, accept: ".jpeg,.png,.webp,.gif", "data-testid": "hidden-file-input" })))) : null,
+                        }, multiple: true, accept: [...validFileTypes].map((type) => `.${type}`).join(','), "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;
@@ -1072,10 +1176,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isL
                         text: e.target.value,
                     }));
                 } }),
-            React__namespace.createElement(uiReact.Button, { type: "submit", variation: "primary", className: ui.ComponentClassName.AIConversationFormSend, 
-                // we intentionally || in the case where isLoading is false we should use the value of isInputEmpty
-                // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-                isDisabled: isLoading || isInputEmpty },
+            React__namespace.createElement(uiReact.Button, { type: "submit", variation: "primary", className: ui.ComponentClassName.AIConversationFormSend, 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 })));
@@ -1092,7 +1193,7 @@ const PromptList = ({ setInput, suggestedPrompts = [], }) => {
     })));
 };
 
-const VERSION = '1.3.0';
+const VERSION = '1.4.0';
 
 function AIConversationBase({ avatars, controls, ...rest }) {
     uiReactCore.useSetUserAgent({
@@ -1294,16 +1395,17 @@ function createUseAIConversation(client) {
             // between the gen2 schema definition and
             // whats in amplify_outputs
             if (!clientRoute) {
+                const error = {
+                    message: 'Conversation route does not exist',
+                    errorInfo: null,
+                    errorType: '',
+                };
                 setDataState({
                     ...ERROR_STATE,
                     data: { messages: [] },
-                    messages: [
-                        {
-                            message: 'Conversation route does not exist',
-                            errorInfo: null,
-                            errorType: '',
-                        },
-                    ],
+                    // TODO in MV bump: remove `messages`
+                    messages: [error],
+                    errors: [error],
                 });
                 return;
             }
@@ -1417,7 +1519,9 @@ function createUseAIConversation(client) {
                         return {
                             ...prev,
                             ...ERROR_STATE,
+                            // TODO in MV bump: remove `messages`
                             messages: error.errors,
+                            errors: error.errors,
                         };
                     });
                 },
@@ -1461,16 +1565,17 @@ function createUseAIConversation(client) {
                 conversation.sendMessage(input);
             }
             else {
+                const error = {
+                    message: 'No conversation found',
+                    errorInfo: null,
+                    errorType: '',
+                };
                 setDataState((prev) => ({
                     ...prev,
                     ...ERROR_STATE,
-                    messages: [
-                        {
-                            message: 'No conversation found',
-                            errorInfo: null,
-                            errorType: '',
-                        },
-                    ],
+                    // TODO in MV bump: remove `messages`
+                    messages: [error],
+                    errors: [error],
                 }));
             }
         }, [conversation]);

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

@@ -3,6 +3,7 @@ export type ConversationDisplayText = {
     getMessageTimestampText?: (date: Date) => string;
     getMaxAttachmentErrorText?: (count: number) => string;
     getAttachmentSizeErrorText?: (sizeText: string) => string;
+    getAttachmentFormatErrorText?: (formats: string[]) => string;
 };
 export declare const defaultAIConversationDisplayTextEn: Required<AIConversationDisplayText>;
 export type AIConversationDisplayText = DisplayTextTemplate<ConversationDisplayText>;

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

@@ -1,7 +1,13 @@
-import { ImageContentBlock } from '../../types';
+import { ImageContentBlock, DocumentContentBlock } 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 getAttachmentFormat(file: File): string;
+export declare function getValidDocumentName(file: File): string;
+export declare const documentFileTypes: Set<string>;
+export declare const imageFileTypes: Set<string>;
+export declare const validFileTypes: Set<string>;
+export declare function isDocumentFormat(format: string): format is DocumentContentBlock['format'];
+export declare function isImageFormat(format: string): format is ImageContentBlock['format'];
 export declare function attachmentsValidator({ files, maxAttachments, maxAttachmentSize, }: {
     files: File[];
     maxAttachments: number;
@@ -11,4 +17,5 @@ export declare function attachmentsValidator({ files, maxAttachments, maxAttachm
     rejectedFiles: File[];
     hasMaxAttachmentSizeError: boolean;
     hasMaxAttachmentsError: boolean;
+    hasUnsupportedFileError: boolean;
 }>;

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

@@ -3,6 +3,7 @@ import { AIConversationElements } from '../../context/elements';
 import { ActionsBarControl } from './ActionsBarControl';
 import { AvatarControl } from './AvatarControl';
 import { ConversationMessage } from '../../../../types';
+export declare const DocumentContent: ({ format, name, source, }: NonNullable<ConversationMessage['content'][number]['document']>) => React.JSX.Element;
 export declare const MessageControl: MessageControl;
 interface MessageControl {
     (props: {

package/dist/types/hooks/shared.d.ts

@@ -1,7 +1,15 @@
 import { DataState } from '@aws-amplify/ui-react-core';
 import { GraphQLFormattedError } from '../types';
 export type DataClientState<T> = Omit<DataState<T>, 'message'> & {
+    /**
+     * @deprecated will be removed in a future major version. Superseded by `errors`
+     * @description errors returned from the websocket connection
+     */
     messages?: GraphQLFormattedError[];
+    /**
+     * @description errors returned from the websocket connection
+     */
+    errors?: GraphQLFormattedError[];
 };
 export type DataClientResponse<T> = {
     data: T | null;

package/dist/types/hooks/useAIGeneration.d.ts

@@ -1,4 +1,4 @@
-import { V6Client } from '@aws-amplify/api-graphql';
+import type { ClientExtensions } from '@aws-amplify/data-schema/runtime';
 import { getSchema } from '../types';
 import { DataClientState } from './shared';
 export interface UseAIGenerationHookWrapper<Key extends keyof AIGenerationClient<Schema>['generations'], Schema extends Record<any, any>> {
@@ -11,6 +11,6 @@ export type UseAIGenerationHook<Key extends keyof AIGenerationClient<Schema>['ge
     Awaited<DataClientState<Schema[Key]['returnType']>>,
     (input: Schema[Key]['args']) => void
 ];
-type AIGenerationClient<T extends Record<any, any>> = Pick<V6Client<T>, 'generations'>;
+type AIGenerationClient<T extends Record<any, any>> = Pick<ClientExtensions<T>, 'generations'>;
 export declare function createUseAIGeneration<Client extends Record<'generations' | 'conversations', Record<string, any>>, Schema extends getSchema<Client>>(client: Client): UseAIGenerationHook<keyof Client['generations'], Client>;
 export {};

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
-import { V6Client } from '@aws-amplify/api-graphql';
-export type ConversationRoute = V6Client<any>['conversations'][string];
+import type { ClientExtensions } from '@aws-amplify/data-schema/runtime';
+export type ConversationRoute = ClientExtensions<any>['conversations'][string];
 export type Conversation = NonNullable<Awaited<ReturnType<ConversationRoute['create']>>['data']>;
 export type ConversationStreamEvent = Parameters<Parameters<Conversation['onStreamEvent']>[0]['next']>[0];
 export type ConversationMessage = NonNullable<Awaited<ReturnType<Conversation['sendMessage']>>['data']> & {
@@ -8,6 +8,7 @@ export type ConversationMessage = NonNullable<Awaited<ReturnType<Conversation['s
 export type ConversationMessageContent = ConversationMessage['content'][number];
 export type TextContentBlock = NonNullable<ConversationMessageContent['text']>;
 export type ImageContentBlock = NonNullable<ConversationMessageContent['image']>;
+export type DocumentContentBlock = NonNullable<ConversationMessageContent['document']>;
 export type ToolUseContent = NonNullable<ConversationMessageContent['toolUse']>;
 export type ToolResultContent = NonNullable<ConversationMessageContent['toolResult']>;
 export type InputContent = Exclude<Parameters<Conversation['sendMessage']>[0], string>['content'][number];
@@ -20,7 +21,7 @@ export interface SendMesageParameters {
     toolConfiguration?: ToolConfiguration;
 }
 export type SendMessage = (input: SendMesageParameters) => void;
-type AIClient<T extends Record<any, any>> = Pick<V6Client<T>, 'generations' | 'conversations'>;
+type AIClient<T extends Record<any, any>> = Pick<ClientExtensions<T>, 'generations' | 'conversations'>;
 export type getSchema<T> = T extends AIClient<infer Schema> ? Schema : never;
 export interface GraphQLFormattedError {
     readonly message: string;

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.3.0";
+export declare const VERSION = "1.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-ai",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -42,32 +42,28 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@aws-amplify/api-graphql": "unstable",
+    "@aws-amplify/data-schema": "^1.19.0",
     "aws-amplify": "^6.9.0",
     "react": "^16.14 || ^17 || ^18 || ^19",
     "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@aws-amplify/ui": "^6.8.0",
-    "@aws-amplify/ui-react": "^6.9.0",
-    "@aws-amplify/ui-react-core": "^3.3.0"
-  },
-  "devDependencies": {
-    "@types/jest-when": "^3.5.0",
-    "jest-when": "^3.5.1"
+    "@aws-amplify/ui": "^6.10.1",
+    "@aws-amplify/ui-react": "^6.11.0",
+    "@aws-amplify/ui-react-core": "^3.4.1"
   },
   "size-limit": [
     {
       "name": "AIConversation",
       "path": "dist/esm/index.mjs",
       "import": "{ AIConversation }",
-      "limit": "25 kB"
+      "limit": "27 kB"
     },
     {
       "name": "createAIConversation",
       "path": "dist/esm/index.mjs",
       "import": "{ createAIConversation }",
-      "limit": "7 kB"
+      "limit": "20 kB"
     }
   ]
 }