@aws-amplify/ui-react-ai 0.1.0 → 0.2.0

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

@@ -14,7 +14,7 @@ import { PromptList } from './views/default/PromptList.mjs';
 import { ComponentClassName } from '@aws-amplify/ui';
 import createProvider from './createProvider.mjs';
 
-function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, }) {
+function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, }) {
     const icons = useIcons('aiConversation');
     const defaultAvatars = {
         ai: {
@@ -42,6 +42,7 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
             Form,
             ...controls,
         },
+        displayText,
     });
     const providerProps = {
         messages,

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

@@ -0,0 +1,9 @@
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+import { defaultAIConversationDisplayTextEn } from '../displayText.mjs';
+
+const { ConversationDisplayTextContext, ConversationDisplayTextProvider, useConversationDisplayText, } = createContextUtilities({
+    contextName: 'ConversationDisplayText',
+    defaultValue: defaultAIConversationDisplayTextEn,
+});
+
+export { ConversationDisplayTextContext, ConversationDisplayTextProvider, useConversationDisplayText };

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

@@ -1,8 +1,16 @@
 import React__default from 'react';
 
+const RESPONSE_COMPONENT_PREFIX = 'AMPLIFY_UI_';
 const ResponseComponentsContext = React__default.createContext(undefined);
+const prependResponseComponents = (responseComponents) => {
+    if (!responseComponents)
+        return responseComponents;
+    return Object.keys(responseComponents).reduce((prev, key) => ((prev[`${RESPONSE_COMPONENT_PREFIX}${key}`] = responseComponents[key]),
+        prev), {});
+};
 const ResponseComponentsProvider = ({ children, responseComponents, }) => {
-    return (React__default.createElement(ResponseComponentsContext.Provider, { value: responseComponents }, children));
+    const _responseComponents = React__default.useMemo(() => prependResponseComponents(responseComponents), [responseComponents]);
+    return (React__default.createElement(ResponseComponentsContext.Provider, { value: _responseComponents }, children));
 };
 const convertResponseComponentsToToolConfiguration = (responseComponents) => {
     if (!responseComponents) {
@@ -32,4 +40,4 @@ const convertResponseComponentsToToolConfiguration = (responseComponents) => {
     return { tools };
 };
 
-export { ResponseComponentsContext, ResponseComponentsProvider, convertResponseComponentsToToolConfiguration };
+export { RESPONSE_COMPONENT_PREFIX, ResponseComponentsContext, ResponseComponentsProvider, convertResponseComponentsToToolConfiguration };

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

@@ -12,7 +12,7 @@ import createProvider from './createProvider.mjs';
  * @experimental
  */
 function createAIConversation(input = {}) {
-    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, } = input;
+    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, } = input;
     const Provider = createProvider({
         elements,
         actions,
@@ -20,6 +20,7 @@ function createAIConversation(input = {}) {
         responseComponents,
         variant,
         controls,
+        displayText,
     });
     function AIConversation(props) {
         const { messages, avatars, handleSendMessage, isLoading } = props;

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

@@ -1,29 +1,37 @@
 import React__default from 'react';
 import { ElementsProvider } from '@aws-amplify/ui-react-core/elements';
+import { defaultAIConversationDisplayTextEn } from './displayText.mjs';
 import { ActionsProvider } from './context/ActionsContext.mjs';
 import { AvatarsProvider } from './context/AvatarsContext.mjs';
 import { ConversationInputContextProvider } from './context/ConversationInputContext.mjs';
 import { MessagesProvider } from './context/MessagesContext.mjs';
-import { MessageVariantProvider } from './context/MessageVariantContext.mjs';
 import { SuggestedPromptProvider } from './context/SuggestedPromptsContext.mjs';
-import { ResponseComponentsProvider } from './context/ResponseComponentsContext.mjs';
-import { SendMessageContextProvider } from './context/SendMessageContext.mjs';
+import { MessageVariantProvider } from './context/MessageVariantContext.mjs';
+import { ConversationDisplayTextProvider } from './context/DisplayTextContext.mjs';
 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/elements/definitions.mjs';
 
-function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, }) {
+function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, displayText, }) {
     return function Provider({ children, messages, avatars, handleSendMessage, isLoading, }) {
+        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(ResponseComponentsProvider, { responseComponents: responseComponents },
-                        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))))))))))));
+                        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)))))))))))));
     };
 }
 

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

@@ -0,0 +1,7 @@
+import { formatDate } from './utils.mjs';
+
+const defaultAIConversationDisplayTextEn = {
+    getMessageTimestampText: (date) => formatDate(date),
+};
+
+export { defaultAIConversationDisplayTextEn };

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

@@ -6,6 +6,11 @@ import '../../context/ConversationInputContext.mjs';
 import '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
+import '../../context/DisplayTextContext.mjs';
+import '../../context/ControlsContext.mjs';
+import '../../context/LoadingContext.mjs';
+import '../../context/ResponseComponentsContext.mjs';
+import '../../context/SendMessageContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Button, Span, View } = AIConversationElements;

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

@@ -6,6 +6,11 @@ import { ConversationInputContext } from '../../context/ConversationInputContext
 import '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
+import '../../context/DisplayTextContext.mjs';
+import '../../context/ControlsContext.mjs';
+import '../../context/LoadingContext.mjs';
+import '../../context/ResponseComponentsContext.mjs';
+import '../../context/SendMessageContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Button, Icon, View } = AIConversationElements;

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

@@ -6,6 +6,11 @@ import { ConversationInputContext } from '../../context/ConversationInputContext
 import '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
+import '../../context/DisplayTextContext.mjs';
+import '../../context/ControlsContext.mjs';
+import '../../context/LoadingContext.mjs';
+import '../../context/ResponseComponentsContext.mjs';
+import '../../context/SendMessageContext.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

@@ -6,6 +6,11 @@ import '../../context/ConversationInputContext.mjs';
 import { RoleContext } from '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
+import '../../context/DisplayTextContext.mjs';
+import '../../context/ControlsContext.mjs';
+import '../../context/LoadingContext.mjs';
+import '../../context/ResponseComponentsContext.mjs';
+import '../../context/SendMessageContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Icon, Span, Text, View } = AIConversationElements;

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

@@ -6,14 +6,15 @@ import { ConversationInputContext } from '../../context/ConversationInputContext
 import { MessagesContext } from '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
+import '../../context/DisplayTextContext.mjs';
+import { ControlsContext } from '../../context/ControlsContext.mjs';
+import { LoadingContext } from '../../context/LoadingContext.mjs';
+import { ResponseComponentsContext, convertResponseComponentsToToolConfiguration } from '../../context/ResponseComponentsContext.mjs';
+import { SendMessageContext } from '../../context/SendMessageContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { AttachFileControl } from './AttachFileControl.mjs';
 import { AttachmentListControl } from './AttachmentListControl.mjs';
-import { SendMessageContext } from '../../context/SendMessageContext.mjs';
-import { ResponseComponentsContext, convertResponseComponentsToToolConfiguration } from '../../context/ResponseComponentsContext.mjs';
-import { ControlsContext } from '../../context/ControlsContext.mjs';
 import { getImageTypeFromMimeType } from '../../utils.mjs';
-import { LoadingContext } from '../../context/LoadingContext.mjs';
 
 const { Button, Icon, Label: LabelElement, TextArea, View, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
@@ -116,7 +117,7 @@ const FieldControl = () => {
                 const fileContent = {
                     image: {
                         format: getImageTypeFromMimeType(file.type),
-                        source: { bytes: Uint8Array.from(Buffer.from(buffer)) },
+                        source: { bytes: new Uint8Array(buffer) },
                     },
                 };
                 submittedContent.push(fileContent);

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

@@ -6,12 +6,15 @@ import '../../context/ConversationInputContext.mjs';
 import { RoleContext, MessagesContext } from '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import { MessageVariantContext } from '../../context/MessageVariantContext.mjs';
+import { useConversationDisplayText } from '../../context/DisplayTextContext.mjs';
+import { ControlsContext } from '../../context/ControlsContext.mjs';
+import '../../context/LoadingContext.mjs';
+import { ResponseComponentsContext, RESPONSE_COMPONENT_PREFIX } from '../../context/ResponseComponentsContext.mjs';
+import '../../context/SendMessageContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
-import { convertBufferToBase64, formatDate } from '../../utils.mjs';
+import { convertBufferToBase64 } from '../../utils.mjs';
 import { ActionsBarControl } from './ActionsBarControl.mjs';
 import { AvatarControl } from './AvatarControl.mjs';
-import { ResponseComponentsContext } from '../../context/ResponseComponentsContext.mjs';
-import { ControlsContext } from '../../context/ControlsContext.mjs';
 
 const { Image, Span, Text, View } = AIConversationElements;
 const MESSAGES_BLOCK = 'ai-messages';
@@ -43,7 +46,9 @@ const MessageControl = ({ message }) => {
         else if (content.toolUse) {
             // For now tool use is limited to custom response components
             const { name, input } = content.toolUse;
-            if (!responseComponents || !name) {
+            if (!responseComponents ||
+                !name ||
+                !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
                 return;
             }
             else {
@@ -81,6 +86,7 @@ const Layout = React__default.forwardRef(function Layout(props, ref) {
 const MessagesControl = ({ renderMessage }) => {
     const messages = React__default.useContext(MessagesContext);
     const controls = React__default.useContext(ControlsContext);
+    const { getMessageTimestampText } = useConversationDisplayText();
     const messagesRef = React__default.useRef([]);
     const [focusedItemIndex, setFocusedItemIndex] = React__default.useState(messages ? messages.length - 1 : 0);
     const handleFocus = (index) => setFocusedItemIndex(index);
@@ -113,13 +119,16 @@ const MessagesControl = ({ renderMessage }) => {
     if (controls?.MessageList) {
         return React__default.createElement(controls.MessageList, { messages: messages });
     }
-    return (React__default.createElement(Layout, null, messages?.map((message, index) => {
+    const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
+        content.text ??
+        content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
+    return (React__default.createElement(Layout, null, messagesWithRenderableContent?.map((message, index) => {
         return renderMessage ? (renderMessage(message)) : (React__default.createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
             React__default.createElement(MessageContainer, { "data-testid": `message`, key: `message-${index}`, tabIndex: focusedItemIndex === index ? 0 : -1, onFocus: () => handleFocus(index), onKeyDown: (event) => onKeyDown(index, event), ref: (el) => (messagesRef.current[index] = el) },
                 React__default.createElement(HeaderContainer, null,
                     React__default.createElement(AvatarControl, null),
                     React__default.createElement(Separator, null),
-                    React__default.createElement(Timestamp, null, formatDate(new Date(message.createdAt)))),
+                    React__default.createElement(Timestamp, null, getMessageTimestampText(new Date(message.createdAt)))),
                 React__default.createElement(MessageControl, { message: message }),
                 message.role === 'assistant' ? (React__default.createElement(ActionsBarControl, { message: message, focusable: focusedItemIndex === index })) : null)));
     })));

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

@@ -6,9 +6,13 @@ import { ConversationInputContext } from '../../context/ConversationInputContext
 import { MessagesContext } from '../../context/MessagesContext.mjs';
 import { SuggestedPromptsContext } from '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
+import '../../context/DisplayTextContext.mjs';
+import { ControlsContext } from '../../context/ControlsContext.mjs';
+import '../../context/LoadingContext.mjs';
+import '../../context/ResponseComponentsContext.mjs';
+import '../../context/SendMessageContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { classNames } from '@aws-amplify/ui';
-import { ControlsContext } from '../../context/ControlsContext.mjs';
 
 const { View, Button, Text, Heading, Icon } = AIConversationElements;
 const PROMPT_BLOCK = 'ai-prompts';

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

@@ -24,6 +24,9 @@ const Form = ({ setInput, input, handleSubmit, }) => {
         React.createElement(View, { as: "form", className: ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
             React.createElement(Button, { className: ComponentClassName.AIConversationFormAttach, onClick: () => {
                     hiddenInput?.current?.click();
+                    if (hiddenInput?.current) {
+                        hiddenInput.current.value = '';
+                    }
                 } },
                 React.createElement("span", null, attachIcon),
                 React.createElement(VisuallyHidden, null,
@@ -36,8 +39,8 @@ const Form = ({ setInput, input, handleSubmit, }) => {
                                 ...prevValue,
                                 files: [...(prevValue?.files ?? []), ...Array.from(files)],
                             }));
-                        }, multiple: true, accept: "*" }))),
-            React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', onKeyDown: (e) => {
+                        }, multiple: true, accept: "*", "data-testid": "hidden-file-input" }))),
+            React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', testId: "text-input", onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
                     const shouldSubmit = !e.shiftKey && e.key === 'Enter';
                     if (shouldSubmit && isHTMLFormElement(e.target)) {

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

@@ -7,19 +7,35 @@ import '../../context/ConversationInputContext.mjs';
 import { RoleContext } from '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import { MessageVariantContext } from '../../context/MessageVariantContext.mjs';
+import { useConversationDisplayText } from '../../context/DisplayTextContext.mjs';
+import '../../context/ControlsContext.mjs';
+import { LoadingContext } from '../../context/LoadingContext.mjs';
+import { RESPONSE_COMPONENT_PREFIX } from '../../context/ResponseComponentsContext.mjs';
+import '../../context/SendMessageContext.mjs';
 import '../../context/elements/definitions.mjs';
-import { formatDate } from '../../utils.mjs';
 import { ComponentClassName, classNames, classNameModifier } from '@aws-amplify/ui';
 
 const MessageMeta = ({ message }) => {
     // need to pass this in as props in order for it to be overridable
     const avatars = React.useContext(AvatarsContext);
     const role = React.useContext(RoleContext);
+    const { getMessageTimestampText } = useConversationDisplayText();
     // maybe rename 'avatar' to something else
     const avatar = role === 'assistant' ? avatars?.ai : avatars?.user;
     return (React.createElement(View, { className: ComponentClassName.AIConversationMessageSender },
         React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username),
-        React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderTimestamp }, formatDate(new Date(message.createdAt)))));
+        React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderTimestamp }, getMessageTimestampText(new Date(message.createdAt)))));
+};
+const LoadingMessage = () => {
+    const avatars = React.useContext(AvatarsContext);
+    const variant = React.useContext(MessageVariantContext);
+    const avatar = avatars?.ai;
+    return (React.createElement(View, { className: classNames(ComponentClassName.AIConversationMessage, classNameModifier(ComponentClassName.AIConversationMessage, variant), classNameModifier(ComponentClassName.AIConversationMessage, 'assistant')) },
+        React.createElement(View, { className: ComponentClassName.AIConversationMessageAvatar },
+            React.createElement(Avatar, { isLoading: true }, avatar?.avatar)),
+        React.createElement(View, { className: ComponentClassName.AIConversationMessageBody },
+            React.createElement(View, { className: ComponentClassName.AIConversationMessageSender },
+                React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username)))));
 };
 const Message = ({ message }) => {
     const avatars = React.useContext(AvatarsContext);
@@ -35,7 +51,13 @@ const Message = ({ message }) => {
                     React.createElement(MessageControl, { message: message }))))));
 };
 const MessageList = ({ messages, }) => {
-    return (React.createElement(View, { className: ComponentClassName.AIConversationMessageList }, messages.map((message, i) => (React.createElement(Message, { key: `message-${i}`, message: message })))));
+    const isLoading = React.useContext(LoadingContext);
+    const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
+        content.text ??
+        content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
+    return (React.createElement(View, { className: ComponentClassName.AIConversationMessageList },
+        messagesWithRenderableContent.map((message, i) => (React.createElement(Message, { key: `message-${i}`, message: message }))),
+        isLoading ? React.createElement(LoadingMessage, null) : null));
 };
 
 export { MessageList };

package/dist/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var elements = require('@aws-amplify/ui-react-core/elements');
+var uiReactCore = require('@aws-amplify/ui-react-core');
 var ui = require('@aws-amplify/ui');
 var uiReact = require('@aws-amplify/ui-react');
 var internal = require('@aws-amplify/ui-react/internal');
-var uiReactCore = require('@aws-amplify/ui-react-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -154,6 +154,108 @@ const MessageVariantProvider = ({ children, variant, }) => {
     return (React__default["default"].createElement(MessageVariantContext.Provider, { value: variant }, children));
 };
 
+function formatDate(date) {
+    const dateString = date.toLocaleDateString('en-US', {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+    });
+    const timeString = date.toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    });
+    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');
+    }
+    else {
+        base64string = arrayBufferToBase64(buffer);
+    }
+    return `data:image/${format};base64,${base64string}`;
+}
+function getImageTypeFromMimeType(mimeType) {
+    return mimeType.split('/')[1];
+}
+
+const defaultAIConversationDisplayTextEn = {
+    getMessageTimestampText: (date) => formatDate(date),
+};
+
+const { ConversationDisplayTextContext, ConversationDisplayTextProvider, useConversationDisplayText, } = uiReactCore.createContextUtilities({
+    contextName: 'ConversationDisplayText',
+    defaultValue: defaultAIConversationDisplayTextEn,
+});
+
+const ControlsContext = React__default["default"].createContext(undefined);
+const ControlsProvider = ({ children, controls, }) => {
+    return (React__default["default"].createElement(ControlsContext.Provider, { value: controls }, children));
+};
+
+const LoadingContext = React__default["default"].createContext(undefined);
+const LoadingContextProvider = ({ children, isLoading, }) => {
+    return (React__default["default"].createElement(LoadingContext.Provider, { value: isLoading }, children));
+};
+
+const RESPONSE_COMPONENT_PREFIX = 'AMPLIFY_UI_';
+const ResponseComponentsContext = React__default["default"].createContext(undefined);
+const prependResponseComponents = (responseComponents) => {
+    if (!responseComponents)
+        return responseComponents;
+    return Object.keys(responseComponents).reduce((prev, key) => ((prev[`${RESPONSE_COMPONENT_PREFIX}${key}`] = responseComponents[key]),
+        prev), {});
+};
+const ResponseComponentsProvider = ({ children, responseComponents, }) => {
+    const _responseComponents = React__default["default"].useMemo(() => prependResponseComponents(responseComponents), [responseComponents]);
+    return (React__default["default"].createElement(ResponseComponentsContext.Provider, { value: _responseComponents }, children));
+};
+const convertResponseComponentsToToolConfiguration = (responseComponents) => {
+    if (!responseComponents) {
+        return;
+    }
+    const tools = {};
+    Object.keys(responseComponents).forEach((toolName) => {
+        const { props } = responseComponents[toolName];
+        const requiredProps = [];
+        Object.keys(props).forEach((propName) => {
+            if (props[propName].required)
+                requiredProps.push(propName);
+        });
+        tools[toolName] = {
+            description: responseComponents[toolName].description,
+            inputSchema: {
+                json: {
+                    type: 'object',
+                    required: requiredProps,
+                    properties: {
+                        ...props,
+                    },
+                },
+            },
+        };
+    });
+    return { tools };
+};
+
+const SendMessageContext = React__default["default"].createContext(undefined);
+const SendMessageContextProvider = ({ children, handleSendMessage, }) => {
+    return (React__default["default"].createElement(SendMessageContext.Provider, { value: handleSendMessage }, children));
+};
+
 const { Button: Button$5, Span: Span$3, View: View$7 } = AIConversationElements;
 const ACTIONS_BAR_BLOCK = 'ai-actions-bar';
 const ActionIcon = elements.withBaseElementProps(Span$3, {
@@ -370,91 +472,6 @@ const AttachmentListControl = () => {
 AttachmentListControl.List = UnorderedList;
 AttachmentListControl.Item = AttachmentControl;
 
-const SendMessageContext = React__default["default"].createContext(undefined);
-const SendMessageContextProvider = ({ children, handleSendMessage, }) => {
-    return (React__default["default"].createElement(SendMessageContext.Provider, { value: handleSendMessage }, children));
-};
-
-const ResponseComponentsContext = React__default["default"].createContext(undefined);
-const ResponseComponentsProvider = ({ children, responseComponents, }) => {
-    return (React__default["default"].createElement(ResponseComponentsContext.Provider, { value: responseComponents }, children));
-};
-const convertResponseComponentsToToolConfiguration = (responseComponents) => {
-    if (!responseComponents) {
-        return;
-    }
-    const tools = {};
-    Object.keys(responseComponents).forEach((toolName) => {
-        const { props } = responseComponents[toolName];
-        const requiredProps = [];
-        Object.keys(props).forEach((propName) => {
-            if (props[propName].required)
-                requiredProps.push(propName);
-        });
-        tools[toolName] = {
-            description: responseComponents[toolName].description,
-            inputSchema: {
-                json: {
-                    type: 'object',
-                    required: requiredProps,
-                    properties: {
-                        ...props,
-                    },
-                },
-            },
-        };
-    });
-    return { tools };
-};
-
-const ControlsContext = React__default["default"].createContext(undefined);
-const ControlsProvider = ({ children, controls, }) => {
-    return (React__default["default"].createElement(ControlsContext.Provider, { value: controls }, children));
-};
-
-function formatDate(date) {
-    const dateString = date.toLocaleDateString('en-US', {
-        weekday: 'short',
-        month: 'short',
-        day: 'numeric',
-    });
-    const timeString = date.toLocaleTimeString('en-US', {
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: true,
-    });
-    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');
-    }
-    else {
-        base64string = arrayBufferToBase64(buffer);
-    }
-    return `data:image/${format};base64,${base64string}`;
-}
-function getImageTypeFromMimeType(mimeType) {
-    return mimeType.split('/')[1];
-}
-
-const LoadingContext = React__default["default"].createContext(undefined);
-const LoadingContextProvider = ({ children, isLoading, }) => {
-    return (React__default["default"].createElement(LoadingContext.Provider, { value: isLoading }, children));
-};
-
 const { Button: Button$1, Icon: Icon$1, Label: LabelElement, TextArea, View: View$2, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
 const SendIcon = elements.withBaseElementProps(Icon$1, {
@@ -556,7 +573,7 @@ const FieldControl = () => {
                 const fileContent = {
                     image: {
                         format: getImageTypeFromMimeType(file.type),
-                        source: { bytes: Uint8Array.from(Buffer.from(buffer)) },
+                        source: { bytes: new Uint8Array(buffer) },
                     },
                 };
                 submittedContent.push(fileContent);
@@ -635,7 +652,9 @@ const MessageControl = ({ message }) => {
         else if (content.toolUse) {
             // For now tool use is limited to custom response components
             const { name, input } = content.toolUse;
-            if (!responseComponents || !name) {
+            if (!responseComponents ||
+                !name ||
+                !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
                 return;
             }
             else {
@@ -673,6 +692,7 @@ const Layout = React__default["default"].forwardRef(function Layout(props, ref)
 const MessagesControl = ({ renderMessage }) => {
     const messages = React__default["default"].useContext(MessagesContext);
     const controls = React__default["default"].useContext(ControlsContext);
+    const { getMessageTimestampText } = useConversationDisplayText();
     const messagesRef = React__default["default"].useRef([]);
     const [focusedItemIndex, setFocusedItemIndex] = React__default["default"].useState(messages ? messages.length - 1 : 0);
     const handleFocus = (index) => setFocusedItemIndex(index);
@@ -705,13 +725,16 @@ const MessagesControl = ({ renderMessage }) => {
     if (controls?.MessageList) {
         return React__default["default"].createElement(controls.MessageList, { messages: messages });
     }
-    return (React__default["default"].createElement(Layout, null, messages?.map((message, index) => {
+    const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
+        content.text ??
+        content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
+    return (React__default["default"].createElement(Layout, null, messagesWithRenderableContent?.map((message, index) => {
         return renderMessage ? (renderMessage(message)) : (React__default["default"].createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
             React__default["default"].createElement(MessageContainer, { "data-testid": `message`, key: `message-${index}`, tabIndex: focusedItemIndex === index ? 0 : -1, onFocus: () => handleFocus(index), onKeyDown: (event) => onKeyDown(index, event), ref: (el) => (messagesRef.current[index] = el) },
                 React__default["default"].createElement(HeaderContainer, null,
                     React__default["default"].createElement(AvatarControl, null),
                     React__default["default"].createElement(Separator, null),
-                    React__default["default"].createElement(Timestamp, null, formatDate(new Date(message.createdAt)))),
+                    React__default["default"].createElement(Timestamp, null, getMessageTimestampText(new Date(message.createdAt)))),
                 React__default["default"].createElement(MessageControl, { message: message }),
                 message.role === 'assistant' ? (React__default["default"].createElement(ActionsBarControl, { message: message, focusable: focusedItemIndex === index })) : null)));
     })));
@@ -807,19 +830,24 @@ function Conversation() {
             React__default["default"].createElement(FieldControl, null))));
 }
 
-function createProvider({ elements: elements$1, actions, suggestedPrompts, responseComponents, variant, controls, }) {
+function createProvider({ elements: elements$1, actions, suggestedPrompts, responseComponents, variant, controls, displayText, }) {
     return function Provider({ children, messages, avatars, handleSendMessage, isLoading, }) {
+        const _displayText = {
+            ...defaultAIConversationDisplayTextEn,
+            ...displayText,
+        };
         return (React__default["default"].createElement(elements.ElementsProvider, { elements: elements$1 },
             React__default["default"].createElement(ControlsProvider, { controls: controls },
                 React__default["default"].createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
                     React__default["default"].createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                        React__default["default"].createElement(ConversationInputContextProvider, null,
-                            React__default["default"].createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
-                                React__default["default"].createElement(AvatarsProvider, { avatars: avatars },
-                                    React__default["default"].createElement(ActionsProvider, { actions: actions },
-                                        React__default["default"].createElement(MessageVariantProvider, { variant: variant },
-                                            React__default["default"].createElement(MessagesProvider, { messages: messages },
-                                                React__default["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children))))))))))));
+                        React__default["default"].createElement(ConversationDisplayTextProvider, { ..._displayText },
+                            React__default["default"].createElement(ConversationInputContextProvider, null,
+                                React__default["default"].createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
+                                    React__default["default"].createElement(AvatarsProvider, { avatars: avatars },
+                                        React__default["default"].createElement(ActionsProvider, { actions: actions },
+                                            React__default["default"].createElement(MessageVariantProvider, { variant: variant },
+                                                React__default["default"].createElement(MessagesProvider, { messages: messages },
+                                                    React__default["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children)))))))))))));
     };
 }
 
@@ -827,7 +855,7 @@ function createProvider({ elements: elements$1, actions, suggestedPrompts, respo
  * @experimental
  */
 function createAIConversation(input = {}) {
-    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, } = input;
+    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, } = input;
     const Provider = createProvider({
         elements,
         actions,
@@ -835,6 +863,7 @@ function createAIConversation(input = {}) {
         responseComponents,
         variant,
         controls,
+        displayText,
     });
     function AIConversation(props) {
         const { messages, avatars, handleSendMessage, isLoading } = props;
@@ -859,11 +888,23 @@ const MessageMeta = ({ message }) => {
     // need to pass this in as props in order for it to be overridable
     const avatars = React__namespace.useContext(AvatarsContext);
     const role = React__namespace.useContext(RoleContext);
+    const { getMessageTimestampText } = useConversationDisplayText();
     // maybe rename 'avatar' to something else
     const avatar = role === 'assistant' ? avatars?.ai : avatars?.user;
     return (React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageSender },
         React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username),
-        React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderTimestamp }, formatDate(new Date(message.createdAt)))));
+        React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderTimestamp }, getMessageTimestampText(new Date(message.createdAt)))));
+};
+const LoadingMessage = () => {
+    const avatars = React__namespace.useContext(AvatarsContext);
+    const variant = React__namespace.useContext(MessageVariantContext);
+    const avatar = avatars?.ai;
+    return (React__namespace.createElement(uiReact.View, { className: ui.classNames(ui.ComponentClassName.AIConversationMessage, ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, variant), ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, 'assistant')) },
+        React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageAvatar },
+            React__namespace.createElement(uiReact.Avatar, { isLoading: true }, avatar?.avatar)),
+        React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageBody },
+            React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageSender },
+                React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username)))));
 };
 const Message = ({ message }) => {
     const avatars = React__namespace.useContext(AvatarsContext);
@@ -879,7 +920,13 @@ const Message = ({ message }) => {
                     React__namespace.createElement(MessageControl, { message: message }))))));
 };
 const MessageList = ({ messages, }) => {
-    return (React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageList }, messages.map((message, i) => (React__namespace.createElement(Message, { key: `message-${i}`, message: message })))));
+    const isLoading = React__namespace.useContext(LoadingContext);
+    const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
+        content.text ??
+        content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
+    return (React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageList },
+        messagesWithRenderableContent.map((message, i) => (React__namespace.createElement(Message, { key: `message-${i}`, message: message }))),
+        isLoading ? React__namespace.createElement(LoadingMessage, null) : null));
 };
 
 const Attachment = ({ file, handleRemove, }) => {
@@ -924,6 +971,9 @@ const Form = ({ setInput, input, handleSubmit, }) => {
         React__namespace.createElement(uiReact.View, { as: "form", className: ui.ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
             React__namespace.createElement(uiReact.Button, { className: ui.ComponentClassName.AIConversationFormAttach, onClick: () => {
                     hiddenInput?.current?.click();
+                    if (hiddenInput?.current) {
+                        hiddenInput.current.value = '';
+                    }
                 } },
                 React__namespace.createElement("span", null, attachIcon),
                 React__namespace.createElement(uiReact.VisuallyHidden, null,
@@ -936,8 +986,8 @@ const Form = ({ setInput, input, handleSubmit, }) => {
                                 ...prevValue,
                                 files: [...(prevValue?.files ?? []), ...Array.from(files)],
                             }));
-                        }, multiple: true, accept: "*" }))),
-            React__namespace.createElement(uiReact.TextAreaField, { className: ui.ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', onKeyDown: (e) => {
+                        }, multiple: true, accept: "*", "data-testid": "hidden-file-input" }))),
+            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", onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
                     const shouldSubmit = !e.shiftKey && e.key === 'Enter';
                     if (shouldSubmit && isHTMLFormElement(e.target)) {
@@ -969,7 +1019,7 @@ const PromptList = ({ setInput, suggestedPrompts = [], }) => {
     })));
 };
 
-function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, }) {
+function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, }) {
     const icons = internal.useIcons('aiConversation');
     const defaultAvatars = {
         ai: {
@@ -997,6 +1047,7 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
             Form,
             ...controls,
         },
+        displayText,
     });
     const providerProps = {
         messages,

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AIConversationInput, AIConversationProps } from './types';
 interface AIConversationBaseProps extends AIConversationProps, AIConversationInput {
 }
-declare function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, }: AIConversationBaseProps): JSX.Element;
+declare function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, }: AIConversationBaseProps): JSX.Element;
 /**
  * @experimental
  */
@@ -12,10 +12,10 @@ export declare const AIConversation: typeof AIConversationBase & {
     }> | undefined;
     PromptList: React.ComponentType<{
         suggestedPrompts?: import("./types").SuggestedPrompt[] | undefined;
-        setInput: React.Dispatch<React.SetStateAction<import("./context/ConversationInputContext").ConversationInput | undefined>> | undefined;
+        setInput: React.Dispatch<React.SetStateAction<import("./context").ConversationInput | undefined>> | undefined;
     }> | undefined;
-    Form: React.ComponentType<{
+    Form: NonNullable<React.ComponentType<{
         handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-    } & Required<import("./context").ConversationInputContext>> | undefined;
+    } & Required<import("./context").ConversationInputContext>> | undefined>;
 };
 export {};

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

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

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { ResponseComponents } from '../types';
 import { ToolConfiguration } from '../../../types';
 type ResponseComponentsContextProps = ResponseComponents | undefined;
+export declare const RESPONSE_COMPONENT_PREFIX = "AMPLIFY_UI_";
 export declare const ResponseComponentsContext: React.Context<ResponseComponentsContextProps>;
 export declare const ResponseComponentsProvider: ({ children, responseComponents, }: {
     children?: React.ReactNode;

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

@@ -1,8 +1,12 @@
-import { ActionsContext } from './ActionsContext';
-import { AvatarsContext } from './AvatarsContext';
-import { ConversationInputContext } from './ConversationInputContext';
-import { MessagesContext, RoleContext } from './MessagesContext';
-import { SuggestedPromptsContext } from './SuggestedPromptsContext';
-import { MessageVariantContext } from './MessageVariantContext';
-export { ActionsContext, AvatarsContext, ConversationInputContext, MessagesContext, RoleContext, SuggestedPromptsContext, MessageVariantContext, };
+export { ActionsContext, ActionsProvider } from './ActionsContext';
+export { AvatarsContext, AvatarsProvider } from './AvatarsContext';
+export { ConversationInputContext, ConversationInput, ConversationInputContextProvider, } from './ConversationInputContext';
+export { MessagesContext, RoleContext, MessagesProvider, } from './MessagesContext';
+export { SuggestedPromptsContext, SuggestedPromptProvider, } from './SuggestedPromptsContext';
+export { MessageVariantContext, MessageVariantProvider, } from './MessageVariantContext';
+export { ConversationDisplayTextContext, useConversationDisplayText, ConversationDisplayTextProvider, } from './DisplayTextContext';
+export { ControlsContext, ControlsContextProps, ControlsProvider, } from './ControlsContext';
+export { LoadingContextProvider } from './LoadingContext';
+export { ResponseComponentsProvider, RESPONSE_COMPONENT_PREFIX, } from './ResponseComponentsContext';
+export { SendMessageContextProvider } from './SendMessageContext';
 export * from './elements';

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AIConversationInput, AIConversationProps } from './types';
-export default function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, }: Pick<AIConversationInput, 'elements' | 'actions' | 'suggestedPrompts' | 'responseComponents' | 'variant' | 'controls'>): ({ children, messages, avatars, handleSendMessage, isLoading, }: {
+export default function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, displayText, }: Pick<AIConversationInput, 'elements' | 'actions' | 'suggestedPrompts' | 'responseComponents' | 'variant' | 'controls' | 'displayText'>): ({ children, messages, avatars, handleSendMessage, isLoading, }: {
     children?: React.ReactNode;
-} & Pick<AIConversationProps, "avatars" | "messages" | "handleSendMessage" | "isLoading">) => React.JSX.Element;
+} & Pick<AIConversationProps, "avatars" | "messages" | "isLoading" | "handleSendMessage">) => React.JSX.Element;

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

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

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

@@ -1,3 +1,4 @@
 import { createAIConversation } from './createAIConversation';
 import { AIConversation } from './AIConversation';
-export { createAIConversation, AIConversation };
+import { Avatars, CustomAction, ResponseComponent, SuggestedPrompt } from './types';
+export { createAIConversation, AIConversation, Avatars, CustomAction, ResponseComponent, SuggestedPrompt, };

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

@@ -1,2 +1,2 @@
 import { ControlsContextProps } from '../../context/ControlsContext';
-export declare const Form: ControlsContextProps['Form'];
+export declare const Form: NonNullable<ControlsContextProps['Form']>;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-import { createAIConversation, AIConversation } from './components';
-import { createAIHooks, AIContextProvider } from './hooks';
-export { createAIConversation, createAIHooks, AIContextProvider, AIConversation, };
+export { createAIConversation, AIConversation, Avatars, CustomAction, ResponseComponent, SuggestedPrompt, } from './components';
+export { createAIHooks, AIContextProvider } from './hooks';
+export { ConversationMessage, ConversationMessageContent, SendMessage, SendMesageParameters, } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-ai",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -47,9 +47,9 @@
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "^6.4.0",
-    "@aws-amplify/ui-react": "^6.3.0",
-    "@aws-amplify/ui-react-core": "^3.0.21"
+    "@aws-amplify/ui": "^6.5.0",
+    "@aws-amplify/ui-react": "^6.4.0",
+    "@aws-amplify/ui-react-core": "^3.0.23"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.1",