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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Flex, ScrollView } from '@aws-amplify/ui-react';
-import { useIcons, IconAssistant, IconUser } from '@aws-amplify/ui-react/internal';
+import { useIcons, IconUser, IconAssistant } from '@aws-amplify/ui-react/internal';
 import { MessagesControl } from './views/Controls/MessagesControl.mjs';
 import { FormControl } from './views/Controls/FormControl.mjs';
 import { MessageList } from './views/default/MessageList.mjs';

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

@@ -17,15 +17,15 @@ const ListItemElement = defineBaseElementWithRef({
     type: 'li',
     displayName: 'ListItem',
 });
-const HeadingElement = defineBaseElementWithRef({
+defineBaseElementWithRef({
     type: 'h2',
     displayName: 'Title',
 });
-const ImageElement = defineBaseElementWithRef({
+defineBaseElementWithRef({
     type: 'img',
     displayName: 'Image',
 });
-const InputElement = defineBaseElementWithRef({
+defineBaseElementWithRef({
     type: 'input',
     displayName: 'Input',
 });
@@ -44,10 +44,7 @@ const TextAreaElement = defineBaseElementWithRef({
 });
 const AIConversationElements = {
     Button: ButtonElement,
-    Heading: HeadingElement,
     Icon: IconElement,
-    Input: InputElement,
-    Image: ImageElement,
     Label: LabelElement,
     ListItem: ListItemElement,
     Span: SpanElement,
@@ -57,4 +54,4 @@ const AIConversationElements = {
     View: ViewElement,
 };
 
-export { AIConversationElements, ButtonElement, HeadingElement, ImageElement, InputElement, LabelElement, ListItemElement, SpanElement, TextAreaElement, TextElement, UnorderedListElement, ViewElement };
+export { AIConversationElements, ButtonElement, LabelElement, ListItemElement, SpanElement, TextAreaElement, TextElement, UnorderedListElement, ViewElement };

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

@@ -27,11 +27,11 @@ function createUseAIConversation(client) {
         // it will create a new conversation when it is executed
         // we don't want to create 2 conversations
         const initRef = React__default.useRef('initial');
-        const [dataState, setDataState] = React__default.useState(() => ({
+        const [clientState, setClientState] = React__default.useState(() => ({
             ...INITIAL_STATE,
             data: { messages: [], conversation: undefined },
         }));
-        const { conversation } = dataState.data;
+        const { conversation } = clientState.data;
         const { id, onInitialize, onMessage } = input;
         React__default.useEffect(() => {
             async function initialize() {
@@ -43,7 +43,7 @@ function createUseAIConversation(client) {
                 // Only show component loading state if we are
                 // actually loading messages
                 if (id) {
-                    setDataState({
+                    setClientState({
                         ...LOADING_STATE,
                         data: { messages: [], conversation: undefined },
                     });
@@ -52,7 +52,7 @@ function createUseAIConversation(client) {
                     ? await clientRoute.get({ id })
                     : await clientRoute.create();
                 if (errors ?? !conversation) {
-                    setDataState({
+                    setClientState({
                         ...ERROR_STATE,
                         data: { messages: [] },
                         messages: errors,
@@ -63,13 +63,13 @@ function createUseAIConversation(client) {
                         const { data: messages } = await exhaustivelyListMessages({
                             conversation,
                         });
-                        setDataState({
+                        setClientState({
                             ...INITIAL_STATE,
                             data: { messages, conversation },
                         });
                     }
                     else {
-                        setDataState({
+                        setClientState({
                             ...INITIAL_STATE,
                             data: { conversation, messages: [] },
                         });
@@ -82,16 +82,17 @@ function createUseAIConversation(client) {
             // between the gen2 schema definition and
             // whats in amplify_outputs
             if (!clientRoute) {
-                setDataState({
+                const error = {
+                    message: 'Conversation route does not exist',
+                    errorInfo: null,
+                    errorType: '',
+                };
+                setClientState({
                     ...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;
             }
@@ -100,12 +101,12 @@ function createUseAIConversation(client) {
                 contentBlocksRef.current = undefined;
                 if (hasStarted(initRef.current))
                     return;
-                setDataState({
+                setClientState({
                     ...INITIAL_STATE,
                     data: { messages: [], conversation: undefined },
                 });
             };
-        }, [clientRoute, id, setDataState]);
+        }, [clientRoute, id, setClientState]);
         // Run a separate effect that is triggered by the conversation state
         // so that we know we have a conversation object to set up the subscription
         // and also unsubscribe on cleanup
@@ -133,7 +134,7 @@ function createUseAIConversation(client) {
                     // stop reason will signify end of conversation turn
                     if (stopReason) {
                         // remove loading state from streamed message
-                        setDataState((prev) => {
+                        setClientState((prev) => {
                             return {
                                 ...prev,
                                 data: {
@@ -180,7 +181,7 @@ function createUseAIConversation(client) {
                             ];
                         }
                     }
-                    setDataState((prev) => {
+                    setClientState((prev) => {
                         const message = {
                             id,
                             conversationId,
@@ -201,11 +202,13 @@ function createUseAIConversation(client) {
                     });
                 },
                 error: (error) => {
-                    setDataState((prev) => {
+                    setClientState((prev) => {
                         return {
                             ...prev,
                             ...ERROR_STATE,
+                            // TODO in MV bump: remove `messages`
                             messages: error.errors,
+                            errors: error.errors,
                         };
                     });
                 },
@@ -217,11 +220,11 @@ function createUseAIConversation(client) {
                 contentBlocksRef.current = undefined;
                 subscription.unsubscribe();
             };
-        }, [conversation, onInitialize, onMessage, setDataState]);
+        }, [conversation, onInitialize, onMessage, setClientState]);
         const handleSendMessage = React__default.useCallback((input) => {
             const { content } = input;
             if (conversation) {
-                setDataState((prevState) => ({
+                setClientState((prevState) => ({
                     ...prevState,
                     data: {
                         ...prevState.data,
@@ -249,20 +252,21 @@ function createUseAIConversation(client) {
                 conversation.sendMessage(input);
             }
             else {
-                setDataState((prev) => ({
+                const error = {
+                    message: 'No conversation found',
+                    errorInfo: null,
+                    errorType: '',
+                };
+                setClientState((prev) => ({
                     ...prev,
                     ...ERROR_STATE,
-                    messages: [
-                        {
-                            message: 'No conversation found',
-                            errorInfo: null,
-                            errorType: '',
-                        },
-                    ],
+                    // TODO in MV bump: remove `messages`
+                    messages: [error],
+                    errors: [error],
                 }));
             }
         }, [conversation]);
-        return [dataState, handleSendMessage];
+        return [clientState, handleSendMessage];
     };
     return useAIConversation;
 }

package/dist/esm/hooks/useAIGeneration.mjs

@@ -3,26 +3,19 @@ import { INITIAL_STATE, LOADING_STATE, ERROR_STATE } from './shared.mjs';
 
 function createUseAIGeneration(client) {
     const useAIGeneration = (routeName) => {
-        const [dataState, setDataState] = React.useState(() => ({
-            ...INITIAL_STATE,
-            data: undefined,
-        }));
+        const [clientState, setClientState] = React.useState(() => ({ ...INITIAL_STATE, data: undefined }));
         const handleGeneration = React.useCallback(async (input) => {
-            setDataState(({ data }) => ({ ...LOADING_STATE, data }));
+            setClientState(({ data }) => ({ ...LOADING_STATE, data }));
             const result = await client.generations[routeName](input);
             const { data, errors } = result;
             if (errors) {
-                setDataState({
-                    ...ERROR_STATE,
-                    data,
-                    messages: errors,
-                });
+                setClientState({ ...ERROR_STATE, data, messages: errors });
             }
             else {
-                setDataState({ ...INITIAL_STATE, data });
+                setClientState({ ...INITIAL_STATE, data });
             }
         }, [routeName]);
-        return [dataState, handleGeneration];
+        return [clientState, handleGeneration];
     };
     return useAIGeneration;
 }

package/dist/esm/version.mjs

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