@aws-amplify/ui-react-ai 0.3.2 → 1.0.0

package/dist/index.js

@@ -29,92 +29,9 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const DEFAULT_ICON_PATHS = {
-    attach: 'M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z',
-    close: 'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
-    image: 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z',
-    'send-message': 'M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z',
-    'user-avatar': 'M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z',
-};
-const DEFAULT_ICON_ATTRIBUTES = {
-    'aria-hidden': true,
-    width: '24',
-    height: '24',
-    // `viewBox` coordinates map to `path` data in DEFAULT_ICON_PATHS
-    viewBox: '0 -960 960 960',
-    fill: 'none',
-    xmlns: 'http://www.w3.org/2000/svg',
-};
-const BaseIconElement = elements.defineBaseElement({
-    type: 'svg',
-    displayName: 'Icon',
-});
-const getIconProps = ({ variant, ...props }) => {
-    const pathData = variant ? DEFAULT_ICON_PATHS[variant] : undefined;
-    const children = pathData ? (React__namespace["default"].createElement("path", { d: pathData, fill: "currentColor" })) : undefined;
-    return {
-        ...DEFAULT_ICON_ATTRIBUTES,
-        ...props,
-        children: props.children ?? children,
-        variant,
-    };
-};
-const IconElement = elements.withBaseElementProps(BaseIconElement, getIconProps);
-
-const LabelElement$1 = elements.defineBaseElement({
-    type: 'label',
-    displayName: 'Label',
-});
-const TextElement = elements.defineBaseElement({
-    type: 'p',
-    displayName: 'Text',
-});
-const UnorderedListElement = elements.defineBaseElement({
-    type: 'ul',
-    displayName: 'UnorderedList',
-});
-const ListItemElement = elements.defineBaseElement({
-    type: 'li',
-    displayName: 'ListItem',
-});
-const HeadingElement = elements.defineBaseElement({
-    type: 'h2',
-    displayName: 'Title',
-});
-const ImageElement = elements.defineBaseElement({
-    type: 'img',
-    displayName: 'Image',
-});
-const InputElement = elements.defineBaseElement({
-    type: 'input',
-    displayName: 'Input',
-});
-const ButtonElement = elements.defineBaseElement({ type: 'button', displayName: 'Button' });
-const ViewElement = elements.defineBaseElement({
-    type: 'div',
-    displayName: 'View',
-});
-const SpanElement = elements.defineBaseElement({
-    type: 'span',
-    displayName: 'Span',
-});
-const TextAreaElement = elements.defineBaseElement({
-    type: 'textarea',
-    displayName: 'TextArea',
-});
-const AIConversationElements = {
-    Button: ButtonElement,
-    Heading: HeadingElement,
-    Icon: IconElement,
-    Input: InputElement,
-    Image: ImageElement,
-    Label: LabelElement$1,
-    ListItem: ListItemElement,
-    Span: SpanElement,
-    Text: TextElement,
-    TextArea: TextAreaElement,
-    UnorderedList: UnorderedListElement,
-    View: ViewElement,
+const AIContextContext = React__namespace["default"].createContext(undefined);
+const AIContextProvider = ({ children, aiContext, }) => {
+    return (React__namespace["default"].createElement(AIContextContext.Provider, { value: aiContext }, children));
 };
 
 const ActionsContext = React__namespace["default"].createContext(undefined);
@@ -229,8 +146,12 @@ const convertResponseComponentsToToolConfiguration = (responseComponents) => {
         const { props } = responseComponents[toolName];
         const requiredProps = [];
         Object.keys(props).forEach((propName) => {
-            if (props[propName].required)
+            if (props[propName].required) {
                 requiredProps.push(propName);
+                // The inputSchema for a tool needs to not
+                // have `required` in the properties
+                props[propName].required = undefined;
+            }
         });
         tools[toolName] = {
             description: responseComponents[toolName].description,
@@ -253,46 +174,154 @@ const SendMessageContextProvider = ({ children, handleSendMessage, }) => {
     return (React__namespace["default"].createElement(SendMessageContext.Provider, { value: handleSendMessage }, children));
 };
 
-const { Button: Button$5, Span: Span$3, View: View$7 } = AIConversationElements;
+const { MessageRendererContext, MessageRendererProvider, useMessageRenderer, } = uiReactCore.createContextUtilities({
+    contextName: 'MessageRenderer',
+    defaultValue: undefined,
+    errorMessage: '`useMessageRenderer` must be used with an AIConversation component',
+});
+
+const AttachmentContext = React__namespace.createContext(false);
+const AttachmentProvider = ({ children, allowAttachments, }) => {
+    return (React__namespace.createElement(AttachmentContext.Provider, { value: allowAttachments ?? false }, children));
+};
+
+const WelcomeMessageContext = React__namespace.createContext(undefined);
+const WelcomeMessageProvider = ({ children, welcomeMessage, }) => {
+    return (React__namespace.createElement(WelcomeMessageContext.Provider, { value: welcomeMessage }, children));
+};
+
+const FallbackComponentContext = React__namespace["default"].createContext(undefined);
+const FallbackComponentProvider = ({ children, FallbackComponent, }) => {
+    return (React__namespace["default"].createElement(FallbackComponentContext.Provider, { value: FallbackComponent }, children));
+};
+
+const DEFAULT_ICON_PATHS = {
+    attach: 'M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z',
+    close: 'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
+    image: 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z',
+    'send-message': 'M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z',
+    'user-avatar': 'M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z',
+};
+const DEFAULT_ICON_ATTRIBUTES = {
+    'aria-hidden': true,
+    width: '24',
+    height: '24',
+    // `viewBox` coordinates map to `path` data in DEFAULT_ICON_PATHS
+    viewBox: '0 -960 960 960',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+};
+const BaseIconElement = elements.defineBaseElement({
+    type: 'svg',
+    displayName: 'Icon',
+});
+const getIconProps = ({ variant, ...props }) => {
+    const pathData = variant ? DEFAULT_ICON_PATHS[variant] : undefined;
+    const children = pathData ? (React__namespace["default"].createElement("path", { d: pathData, fill: "currentColor" })) : undefined;
+    return {
+        ...DEFAULT_ICON_ATTRIBUTES,
+        ...props,
+        children: props.children ?? children,
+        variant,
+    };
+};
+const IconElement = elements.withBaseElementProps(BaseIconElement, getIconProps);
+
+const LabelElement$1 = elements.defineBaseElement({
+    type: 'label',
+    displayName: 'Label',
+});
+const TextElement = elements.defineBaseElement({
+    type: 'p',
+    displayName: 'Text',
+});
+const UnorderedListElement = elements.defineBaseElement({
+    type: 'ul',
+    displayName: 'UnorderedList',
+});
+const ListItemElement = elements.defineBaseElement({
+    type: 'li',
+    displayName: 'ListItem',
+});
+const HeadingElement = elements.defineBaseElement({
+    type: 'h2',
+    displayName: 'Title',
+});
+const ImageElement = elements.defineBaseElement({
+    type: 'img',
+    displayName: 'Image',
+});
+const InputElement = elements.defineBaseElement({
+    type: 'input',
+    displayName: 'Input',
+});
+const ButtonElement = elements.defineBaseElement({ type: 'button', displayName: 'Button' });
+const ViewElement = elements.defineBaseElement({
+    type: 'div',
+    displayName: 'View',
+});
+const SpanElement = elements.defineBaseElement({
+    type: 'span',
+    displayName: 'Span',
+});
+const TextAreaElement = elements.defineBaseElement({
+    type: 'textarea',
+    displayName: 'TextArea',
+});
+const AIConversationElements = {
+    Button: ButtonElement,
+    Heading: HeadingElement,
+    Icon: IconElement,
+    Input: InputElement,
+    Image: ImageElement,
+    Label: LabelElement$1,
+    ListItem: ListItemElement,
+    Span: SpanElement,
+    Text: TextElement,
+    TextArea: TextAreaElement,
+    UnorderedList: UnorderedListElement,
+    View: ViewElement,
+};
+
+const { Button: Button$4, Span: Span$2, View: View$6 } = AIConversationElements;
 const ACTIONS_BAR_BLOCK = 'ai-actions-bar';
-const ActionIcon = elements.withBaseElementProps(Span$3, {
+const ActionIcon = elements.withBaseElementProps(Span$2, {
     'aria-hidden': 'true',
     className: `${ACTIONS_BAR_BLOCK}__icon`,
 });
-const ActionButtonBase = elements.withBaseElementProps(Button$5, {
+const ActionButtonBase = elements.withBaseElementProps(Button$4, {
     className: `${ACTIONS_BAR_BLOCK}__button`,
 });
 const ActionButton = React__namespace["default"].forwardRef(function ActionButton(props, ref) {
     return React__namespace["default"].createElement(ActionButtonBase, { ...props, ref: ref });
 });
-const Container$4 = elements.withBaseElementProps(View$7, {
+const Container$3 = elements.withBaseElementProps(View$6, {
     className: `${ACTIONS_BAR_BLOCK}__container`,
 });
 const ActionsBarControl = ({ message, focusable, }) => {
     const actions = React__namespace["default"].useContext(ActionsContext);
-    return (React__namespace["default"].createElement(Container$4, null, actions?.map((action, index) => (React__namespace["default"].createElement(ActionButton, { "aria-label": action.displayName, key: index, onClick: () => action.handler(message), tabIndex: focusable ? 0 : -1 },
-        React__namespace["default"].createElement(ActionIcon, { "data-testid": `action-icon-${action.displayName}` }, action.icon))))));
+    return (React__namespace["default"].createElement(Container$3, null, actions?.map((action, index) => (React__namespace["default"].createElement(ActionButton, { key: index, onClick: () => action.handler(message), tabIndex: focusable ? 0 : -1 }, action.component)))));
 };
 ActionsBarControl.Button = ActionButton;
-ActionsBarControl.Container = Container$4;
+ActionsBarControl.Container = Container$3;
 ActionsBarControl.Icon = ActionIcon;
 
-const { Icon: Icon$5, Span: Span$2, Text: Text$4, View: View$6 } = AIConversationElements;
+const { Icon: Icon$3, Span: Span$1, Text: Text$2, View: View$5 } = AIConversationElements;
 const AVATAR_BLOCK = 'ai-avatar';
-const DEFAULT_USER_ICON = elements.withBaseElementProps(Icon$5, {
+const DEFAULT_USER_ICON = elements.withBaseElementProps(Icon$3, {
     variant: 'user-avatar',
 });
 const DEFAULT_AI_ICON = () => (React__namespace["default"].createElement("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     React__namespace["default"].createElement("g", { id: "raven-logo" },
         React__namespace["default"].createElement("path", { id: "Subtract", fillRule: "evenodd", clipRule: "evenodd", d: "M16 1.29833C14.7624 0.583803 13.2376 0.583804 12 1.29833L4.00006 5.91711C2.76246 6.63165 2.00006 7.95216 2.00006 9.38122V18.6188C2.00006 20.0478 2.76246 21.3684 4.00006 22.0829L12 26.7017C13.2376 27.4162 14.7624 27.4162 16 26.7017L24 22.0829C25.2376 21.3684 26 20.0478 26 18.6188V9.38122C26 7.95215 25.2376 6.63164 24 5.91711L16 1.29833ZM14.9379 6.37317C14.6157 5.50255 13.3843 5.50255 13.0622 6.37317L11.4151 10.8243C11.3138 11.098 11.098 11.3138 10.8243 11.4151L6.37317 13.0621C5.50256 13.3843 5.50256 14.6157 6.37317 14.9378L10.8243 16.5849C11.098 16.6862 11.3138 16.902 11.4151 17.1757L13.0622 21.6268C13.3843 22.4974 14.6157 22.4974 14.9379 21.6268L16.5849 17.1757C16.6862 16.902 16.902 16.6862 17.1757 16.5849L21.6268 14.9378C22.4974 14.6157 22.4974 13.3843 21.6268 13.0621L17.1757 11.4151C16.902 11.3138 16.6862 11.098 16.5849 10.8243L14.9379 6.37317Z", fill: "#0D1A26" }))));
-const AvatarDisplayName = elements.withBaseElementProps(Text$4, {
+const AvatarDisplayName = elements.withBaseElementProps(Text$2, {
     className: `${AVATAR_BLOCK}__display-name`,
 });
-const AvatarIcon = elements.withBaseElementProps(Span$2, {
+const AvatarIcon = elements.withBaseElementProps(Span$1, {
     'aria-hidden': true,
     className: `${AVATAR_BLOCK}__icon`,
 });
-const Container$3 = elements.withBaseElementProps(View$6, {
+const Container$2 = elements.withBaseElementProps(View$5, {
     className: `${AVATAR_BLOCK}__container`,
 });
 const AvatarControl = () => {
@@ -301,47 +330,18 @@ const AvatarControl = () => {
     const avatar = role === 'assistant' ? avatars?.ai : avatars?.user;
     const defaultIcon = role === 'assistant' ? React__namespace["default"].createElement(DEFAULT_AI_ICON, null) : React__namespace["default"].createElement(DEFAULT_USER_ICON, null);
     const defaultDisplayName = role === 'user' ? 'User' : 'Assistant';
-    return (React__namespace["default"].createElement(Container$3, { "data-testid": 'avatar' },
+    return (React__namespace["default"].createElement(Container$2, { "data-testid": 'avatar' },
         React__namespace["default"].createElement(AvatarIcon, { "data-testid": `avatar-icon-${role}` }, avatar?.avatar ?? defaultIcon),
         React__namespace["default"].createElement(AvatarDisplayName, null, avatar?.username ?? defaultDisplayName)));
 };
-AvatarControl.Container = Container$3;
+AvatarControl.Container = Container$2;
 AvatarControl.DisplayName = AvatarDisplayName;
 AvatarControl.Icon = AvatarIcon;
 
-const { View: View$5, Button: Button$4, Icon: Icon$4, Text: Text$3 } = AIConversationElements;
-const HEADER_BLOCK = 'ai-header';
-const HeaderTextBase = elements.withBaseElementProps(Text$3, {
-    className: `${HEADER_BLOCK}__text`,
-});
-const HeaderText$1 = React__namespace["default"].forwardRef(function HeaderText(props, ref) {
-    return React__namespace["default"].createElement(HeaderTextBase, { ...props, ref: ref });
-});
-const CloseIcon = elements.withBaseElementProps(Icon$4, {
-    className: `${HEADER_BLOCK}__icon`,
-    variant: 'close',
-});
-const CloseButtonBase = elements.withBaseElementProps(Button$4, {
-    className: `${HEADER_BLOCK}__button`,
-});
-const CloseButton = React__namespace["default"].forwardRef(function CloseButton(props, ref) {
-    return React__namespace["default"].createElement(CloseButtonBase, { ...props, ref: ref });
-});
-const Container$2 = elements.withBaseElementProps(View$5, {
-    className: `${HEADER_BLOCK}__container`,
-});
-const HeaderControl = () => (React__namespace["default"].createElement(Container$2, null,
-    React__namespace["default"].createElement(HeaderText$1, null, "Raven Chat"),
-    React__namespace["default"].createElement(CloseButton, null,
-        React__namespace["default"].createElement(CloseIcon, null))));
-HeaderControl.Container = Container$2;
-HeaderControl.Text = HeaderText$1;
-HeaderControl.Button = CloseButton;
-
-const { Button: Button$3, Icon: Icon$3, View: View$4 } = AIConversationElements;
+const { Button: Button$3, Icon: Icon$2, View: View$4 } = AIConversationElements;
 const ATTACH_FILE_BLOCK = 'ai-attach-file';
 const FIELD_BLOCK$1 = 'ai-field';
-const AttachFileIcon = elements.withBaseElementProps(Icon$3, {
+const AttachFileIcon = elements.withBaseElementProps(Icon$2, {
     className: `${ATTACH_FILE_BLOCK}__icon`,
     variant: 'attach',
 });
@@ -398,12 +398,12 @@ AttachFileControl.Icon = AttachFileIcon;
 AttachFileControl.Button = AttachFileButton;
 AttachFileControl.Container = AttachFileContainer;
 
-const { Button: Button$2, Icon: Icon$2, ListItem, UnorderedList: ListElement, Span: Span$1, Text: Text$2, View: View$3, } = AIConversationElements;
+const { Button: Button$2, Icon: Icon$1, ListItem, UnorderedList: ListElement, Span, Text: Text$1, View: View$3, } = AIConversationElements;
 const IMAGE_LIST_BLOCK = 'ai-attachment-list';
 const IMAGE_ITEM_BLOCK = 'ai-attachment';
 const REMOVE_IMAGE_BLOCK = 'ai-remove-attachment';
 const IMAGE_TEXT_BLOCK = 'ai-attachment-text';
-const RemoveIcon = elements.withBaseElementProps(Icon$2, {
+const RemoveIcon = elements.withBaseElementProps(Icon$1, {
     className: `${REMOVE_IMAGE_BLOCK}__icon`,
     variant: 'close',
 });
@@ -419,17 +419,17 @@ const RemoveButtonControl = ({ onRemove }) => {
 };
 RemoveButtonControl.Icon = RemoveIcon;
 RemoveButtonControl.Button = RemoveButton;
-const ImageIcon = elements.withBaseElementProps(Icon$2, {
+const ImageIcon = elements.withBaseElementProps(Icon$1, {
     className: `${IMAGE_ITEM_BLOCK}__icon`,
     variant: 'image',
 });
-const FileNameText = elements.withBaseElementProps(Text$2, {
+const FileNameText = elements.withBaseElementProps(Text$1, {
     className: `${IMAGE_TEXT_BLOCK}__file-name`,
 });
-const FileSizeText = elements.withBaseElementProps(Text$2, {
+const FileSizeText = elements.withBaseElementProps(Text$1, {
     className: `${IMAGE_TEXT_BLOCK}__file-size`,
 });
-const Separator$1 = elements.withBaseElementProps(Span$1, {
+const Separator = elements.withBaseElementProps(Span, {
     'aria-hidden': true,
     className: `${IMAGE_TEXT_BLOCK}__separator`,
     children: '|',
@@ -440,13 +440,13 @@ const TextContainer = elements.withBaseElementProps(View$3, {
 const TextControl = ({ fileName, fileSize }) => {
     return (React__namespace["default"].createElement(TextContainer, null,
         React__namespace["default"].createElement(FileNameText, null, fileName),
-        React__namespace["default"].createElement(Separator$1, null),
+        React__namespace["default"].createElement(Separator, null),
         React__namespace["default"].createElement(FileSizeText, null, fileSize)));
 };
 TextControl.Container = TextContainer;
 TextControl.FileName = FileNameText;
 TextControl.FileSize = FileSizeText;
-TextControl.Separator = Separator$1;
+TextControl.Separator = Separator;
 const Container$1 = elements.withBaseElementProps(ListItem, {
     className: `${IMAGE_ITEM_BLOCK}__list-item`,
 });
@@ -480,14 +480,9 @@ const AttachmentListControl = () => {
 AttachmentListControl.List = UnorderedList;
 AttachmentListControl.Item = AttachmentControl;
 
-const AttachmentContext = React__namespace.createContext(false);
-const AttachmentProvider = ({ children, allowAttachments, }) => {
-    return (React__namespace.createElement(AttachmentContext.Provider, { value: allowAttachments ?? false }, children));
-};
-
-const { Button: Button$1, Icon: Icon$1, Label: LabelElement, TextArea, View: View$2, } = AIConversationElements;
+const { Button: Button$1, Icon, Label: LabelElement, TextArea, View: View$2, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
-const SendIcon = elements.withBaseElementProps(Icon$1, {
+const SendIcon = elements.withBaseElementProps(Icon, {
     className: `${FIELD_BLOCK}__icon`,
     variant: 'send-message',
 });
@@ -565,13 +560,16 @@ const TextInput = React__namespace["default"].forwardRef(function TextInput(prop
 const InputContainer = elements.withBaseElementProps(View$2, {
     className: `${FIELD_BLOCK}__input-container`,
 });
-const FieldControl = () => {
+const FormControl = () => {
     const { input, setInput } = React__namespace["default"].useContext(ConversationInputContext);
     const handleSendMessage = React__namespace["default"].useContext(SendMessageContext);
     const allowAttachments = React__namespace["default"].useContext(AttachmentContext);
-    const ref = React__namespace["default"].useRef(null);
     const responseComponents = React__namespace["default"].useContext(ResponseComponentsContext);
+    const isLoading = React__namespace["default"].useContext(LoadingContext);
+    const aiContext = React__namespace["default"].useContext(AIContextContext);
+    const ref = React__namespace["default"].useRef(null);
     const controls = React__namespace["default"].useContext(ControlsContext);
+    const [composing, setComposing] = React__namespace["default"].useState(false);
     const submitMessage = async () => {
         ref.current?.reset();
         const submittedContent = [];
@@ -596,6 +594,7 @@ const FieldControl = () => {
         if (handleSendMessage) {
             handleSendMessage({
                 content: submittedContent,
+                aiContext: ui.isFunction(aiContext) ? aiContext() : undefined,
                 toolConfiguration: convertResponseComponentsToToolConfiguration(responseComponents),
             });
         }
@@ -608,7 +607,7 @@ const FieldControl = () => {
     };
     const handleOnKeyDown = (event) => {
         const { key, shiftKey } = event;
-        if (key === 'Enter' && !shiftKey) {
+        if (key === 'Enter' && !shiftKey && !composing) {
             event.preventDefault();
             const hasInput = !!input?.text || (input?.files?.length && input?.files?.length > 0);
             if (hasInput) {
@@ -617,77 +616,72 @@ const FieldControl = () => {
         }
     };
     if (controls?.Form) {
-        return (React__namespace["default"].createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, allowAttachments: allowAttachments }));
+        return (React__namespace["default"].createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, allowAttachments: allowAttachments, isLoading: isLoading }));
     }
     return (React__namespace["default"].createElement("form", { className: `${FIELD_BLOCK}__form`, onSubmit: handleSubmit, method: "post", ref: ref },
         allowAttachments ? React__namespace["default"].createElement(AttachFileControl, null) : null,
         React__namespace["default"].createElement(InputContainer, null,
             React__namespace["default"].createElement(VisuallyHidden, null,
                 React__namespace["default"].createElement(Label, null)),
-            React__namespace["default"].createElement(TextInput, { onKeyDown: handleOnKeyDown }),
+            React__namespace["default"].createElement(TextInput, { onKeyDown: handleOnKeyDown, onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false) }),
             React__namespace["default"].createElement(AttachmentListControl, null)),
         React__namespace["default"].createElement(SendButton, null,
             React__namespace["default"].createElement(SendIcon, null))));
 };
-FieldControl.AttachFile = AttachFileControl;
-FieldControl.InputContainer = InputContainer;
-FieldControl.Label = Label;
-FieldControl.TextInput = TextInput;
-FieldControl.SendButton = SendButton;
-FieldControl.SendIcon = SendIcon;
+FormControl.AttachFile = AttachFileControl;
+FormControl.InputContainer = InputContainer;
+FormControl.Label = Label;
+FormControl.TextInput = TextInput;
+FormControl.SendButton = SendButton;
+FormControl.SendIcon = SendIcon;
 
-const { Image, Span, Text: Text$1, View: View$1 } = AIConversationElements;
-const MESSAGES_BLOCK = 'ai-messages';
-const MESSAGE_BLOCK = 'ai-message';
-const MediaContentBase = elements.withBaseElementProps(Image, {
-    alt: 'Image attachment',
-});
-const MediaContent = React__namespace["default"].forwardRef(function MediaContent(props, ref) {
+const { Text, View: View$1 } = AIConversationElements;
+const MESSAGES_BLOCK = 'amplify-ai-conversation__message__list';
+const MESSAGE_BLOCK = 'amplify-ai-conversation__message';
+const MediaContent = (props) => {
     const variant = React__namespace["default"].useContext(MessageVariantContext);
     const role = React__namespace["default"].useContext(RoleContext);
-    return (React__namespace["default"].createElement(MediaContentBase, { ref: ref, className: `${MESSAGE_BLOCK}__image ${MESSAGE_BLOCK}__image--${variant} ${MESSAGE_BLOCK}__image--${role}`, ...props }));
-});
+    return (React__namespace["default"].createElement(uiReact.Image, { className: ui.classNames(`${MESSAGE_BLOCK}__image`, variant && `${MESSAGE_BLOCK}__image--${variant}`, `${MESSAGE_BLOCK}__image--${role}`), ...props }));
+};
 const TextContent = React__namespace["default"].forwardRef(function TextContent(props, ref) {
-    return React__namespace["default"].createElement(Text$1, { ref: ref, className: `${MESSAGE_BLOCK}__text`, ...props });
-});
-const ContentContainer = React__namespace["default"].forwardRef(function ContentContainer(props, ref) {
-    const variant = React__namespace["default"].useContext(MessageVariantContext);
-    return (React__namespace["default"].createElement(View$1, { "data-testid": 'content', className: `${MESSAGE_BLOCK}__content ${MESSAGE_BLOCK}__content--${variant}`, ref: ref, ...props }));
+    return React__namespace["default"].createElement(Text, { ref: ref, className: `${MESSAGE_BLOCK}__text`, ...props });
 });
+const ToolContent = ({ toolUse, }) => {
+    const responseComponents = React__namespace["default"].useContext(ResponseComponentsContext) ?? {};
+    const FallbackComponent = React__namespace["default"].useContext(FallbackComponentContext);
+    // For now tool use is limited to custom response components
+    const { name, input } = toolUse;
+    if (!name || !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
+        return;
+    }
+    else {
+        const response = responseComponents[name];
+        if (response) {
+            const CustomComponent = response.component;
+            return React__namespace["default"].createElement(CustomComponent, { ...input });
+        }
+        // fallback if there is a UI component message but we don't have
+        // a React component that matches
+        if (FallbackComponent) {
+            return React__namespace["default"].createElement(FallbackComponent, { ...input });
+        }
+    }
+};
 const MessageControl = ({ message }) => {
-    const responseComponents = React__namespace["default"].useContext(ResponseComponentsContext);
-    return (React__namespace["default"].createElement(ContentContainer, null, message.content.map((content, index) => {
+    const messageRenderer = React__namespace["default"].useContext(MessageRendererContext);
+    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, message.content.map((content, index) => {
         if (content.text) {
-            return (React__namespace["default"].createElement(TextContent, { "data-testid": 'text-content', key: index }, content.text));
+            return messageRenderer?.text ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, { key: index }, messageRenderer.text({ text: content.text }))) : (React__namespace["default"].createElement(TextContent, { "data-testid": 'text-content', key: index }, content.text));
         }
         else if (content.image) {
-            return (React__namespace["default"].createElement(MediaContent, { "data-testid": 'image-content', key: index, src: convertBufferToBase64(content.image?.source.bytes, content.image?.format) }));
+            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.toolUse) {
-            // For now tool use is limited to custom response components
-            const { name, input } = content.toolUse;
-            if (!responseComponents ||
-                !name ||
-                !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
-                return;
-            }
-            else {
-                const response = responseComponents[name];
-                const CustomComponent = response.component;
-                return React__namespace["default"].createElement(CustomComponent, { ...input, key: index });
-            }
+            return React__namespace["default"].createElement(ToolContent, { toolUse: content.toolUse, key: index });
         }
     })));
 };
-MessageControl.Container = ContentContainer;
-MessageControl.MediaContent = MediaContent;
-MessageControl.TextContent = TextContent;
-const Separator = elements.withBaseElementProps(Span, {
-    'aria-hidden': true,
-    children: '|',
-    className: `${MESSAGE_BLOCK}__separator`,
-});
-const Timestamp = elements.withBaseElementProps(Text$1, {
+const Timestamp = elements.withBaseElementProps(Text, {
     className: `${MESSAGE_BLOCK}__timestamp`,
 });
 const HeaderContainer = React__namespace["default"].forwardRef(function HeaderContainer(props, ref) {
@@ -703,7 +697,7 @@ const Layout = React__namespace["default"].forwardRef(function Layout(props, ref
     const variant = React__namespace["default"].useContext(MessageVariantContext);
     return (React__namespace["default"].createElement(View$1, { ref: ref, className: `${MESSAGES_BLOCK}__container ${MESSAGES_BLOCK}__container--${variant}`, "aria-live": 'assertive', ...props }));
 });
-const MessagesControl = ({ renderMessage }) => {
+const MessagesControl = () => {
     const messages = React__namespace["default"].useContext(MessagesContext);
     const controls = React__namespace["default"].useContext(ControlsContext);
     const { getMessageTimestampText } = useConversationDisplayText();
@@ -743,11 +737,10 @@ const MessagesControl = ({ renderMessage }) => {
         content.text ??
         content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
     return (React__namespace["default"].createElement(Layout, null, messagesWithRenderableContent?.map((message, index) => {
-        return renderMessage ? (renderMessage(message)) : (React__namespace["default"].createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
+        return (React__namespace["default"].createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
             React__namespace["default"].createElement(MessageContainer, { "data-testid": `message`, key: `message-${index}`, tabIndex: focusedItemIndex === index ? 0 : -1, onFocus: () => handleFocus(index), onKeyDown: (event) => onKeyDown(index, event), ref: (el) => (messagesRef.current[index] = el) },
                 React__namespace["default"].createElement(HeaderContainer, null,
                     React__namespace["default"].createElement(AvatarControl, null),
-                    React__namespace["default"].createElement(Separator, null),
                     React__namespace["default"].createElement(Timestamp, null, getMessageTimestampText(new Date(message.createdAt)))),
                 React__namespace["default"].createElement(MessageControl, { message: message }),
                 message.role === 'assistant' ? (React__namespace["default"].createElement(ActionsBarControl, { message: message, focusable: focusedItemIndex === index })) : null)));
@@ -759,9 +752,8 @@ MessagesControl.Container = MessageContainer;
 MessagesControl.HeaderContainer = HeaderContainer;
 MessagesControl.Layout = Layout;
 MessagesControl.Message = MessageControl;
-MessagesControl.Separator = Separator;
 
-const { View, Button, Text, Heading, Icon } = AIConversationElements;
+const { View, Button } = AIConversationElements;
 const PROMPT_BLOCK = 'ai-prompts';
 const PROMPT_CONTROL = `${PROMPT_BLOCK}__prompt`;
 const PROMPT_CARD = `${PROMPT_CONTROL}__card`;
@@ -769,25 +761,6 @@ const PromptCard = elements.withBaseElementProps(Button, {
     className: PROMPT_CARD,
     type: 'button',
 });
-const AIIconProps = () => ({
-    children: (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
-        React__namespace["default"].createElement("path", { d: "M17.5 1.64858C19.047 0.755412 20.953 0.755412 22.5 1.64858L34.6428 8.65923C36.1898 9.55239 37.1428 11.203 37.1428 12.9894V27.0107C37.1428 28.797 36.1898 30.4476 34.6428 31.3408L22.5 38.3514C20.953 39.2446 19.047 39.2446 17.5 38.3514L5.35718 31.3408C3.81017 30.4476 2.85718 28.797 2.85718 27.0107V12.9894C2.85718 11.203 3.81017 9.55239 5.35718 8.65923L17.5 1.64858Z", fill: "white" }),
-        React__namespace["default"].createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22.5 1.64851C20.953 0.755347 19.047 0.755347 17.5 1.64851L5.35718 8.65916C3.81017 9.55233 2.85718 11.203 2.85718 12.9893V27.0106C2.85718 28.7969 3.81017 30.4476 5.35718 31.3407L17.5 38.3514C19.047 39.2445 20.953 39.2445 22.5 38.3514L34.6428 31.3407C36.1898 30.4476 37.1428 28.7969 37.1428 27.0106V12.9893C37.1428 11.203 36.1898 9.55233 34.6428 8.65916L22.5 1.64851ZM20.9378 8.01826C20.6156 7.14764 19.3843 7.14764 19.0621 8.01825L16.2388 15.648C16.1375 15.9217 15.9217 16.1375 15.648 16.2388L8.01826 19.0621C7.14765 19.3842 7.14765 20.6156 8.01826 20.9378L15.648 23.7611C15.9217 23.8623 16.1375 24.0782 16.2388 24.3519L19.0621 31.9816C19.3843 32.8522 20.6156 32.8522 20.9378 31.9816L23.7611 24.3519C23.8624 24.0782 24.0782 23.8623 24.3519 23.7611L31.9816 20.9378C32.8523 20.6156 32.8523 19.3842 31.9816 19.0621L24.3519 16.2388C24.0782 16.1375 23.8624 15.9217 23.7611 15.648L20.9378 8.01826Z", fill: "url(#paint0_linear_395_1815)" }),
-        React__namespace["default"].createElement("defs", null,
-            React__namespace["default"].createElement("linearGradient", { id: "paint0_linear_395_1815", x1: "20", y1: "0.978638", x2: "20", y2: "39.0213", gradientUnits: "userSpaceOnUse" },
-                React__namespace["default"].createElement("stop", { stopColor: "#7DD6E8" }),
-                React__namespace["default"].createElement("stop", { offset: "1", stopColor: "#BF40BF" }))))),
-    className: `${PROMPT_CONTROL}__icon`,
-    width: '40',
-    height: '40',
-    viewBox: '0 0 40 40',
-    fill: 'none',
-    xmlns: 'http://www.w3.org/2000/svg',
-});
-const AIIcon = elements.withBaseElementProps(Icon, AIIconProps);
-const HeaderText = elements.withBaseElementProps(Heading, {
-    className: `${PROMPT_CONTROL}__header`,
-});
 const PromptGroupBase = elements.withBaseElementProps(View, {
     className: `${PROMPT_CONTROL}__buttongroup`,
 });
@@ -802,9 +775,7 @@ const PromptGroup = React__namespace["default"].forwardRef(function ButtonGroup(
                 setInput((prevInput) => ({
                     ...prevInput,
                     text: prompt.inputText,
-                })) },
-            React__namespace["default"].createElement(Text, { className: ui.classNames(`${PROMPT_CARD}__header`, `${PROMPT_CARD}__text`) }, prompt.header),
-            React__namespace["default"].createElement(Text, { className: `${PROMPT_CARD}__text` }, prompt.inputText)));
+                })) }, prompt.component));
     })));
 });
 const Container = elements.withBaseElementProps(View, {
@@ -818,61 +789,50 @@ const PromptControl = () => {
         return (React__namespace["default"].createElement(controls.PromptList, { setInput: setInput, suggestedPrompts: suggestedPromptsArray }));
     }
     return (React__namespace["default"].createElement(Container, null,
-        React__namespace["default"].createElement(AIIcon, null),
-        React__namespace["default"].createElement(HeaderText, null, "How can I help you today?"),
         React__namespace["default"].createElement(PromptGroup, null)));
 };
-const AutoHidablePromptControl = () => {
-    const messages = React__namespace["default"].useContext(MessagesContext);
-    if (!messages || messages.length === 0) {
-        return React__namespace["default"].createElement(PromptControl, null);
-    }
-};
 PromptControl.Container = Container;
-PromptControl.Header = HeaderText;
-PromptControl.Icon = AIIcon;
 PromptControl.PromptGroup = PromptGroup;
 PromptControl.PromptCard = PromptCard;
 
-function Conversation() {
-    return (React__namespace["default"].createElement(ViewElement, null,
-        React__namespace["default"].createElement(HeaderControl, null),
-        React__namespace["default"].createElement(ViewElement, null,
-            React__namespace["default"].createElement(AutoHidablePromptControl, null),
-            React__namespace["default"].createElement(MessagesControl, null)),
-        React__namespace["default"].createElement(ViewElement, null,
-            React__namespace["default"].createElement(FieldControl, null))));
-}
-
-const AIConversationProvider = ({ elements: elements$1, actions, suggestedPrompts, responseComponents, variant, controls, displayText, allowAttachments, messages, handleSendMessage, avatars, isLoading, children, }) => {
+const AIConversationProvider = ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }) => {
     const _displayText = {
         ...defaultAIConversationDisplayTextEn,
         ...displayText,
     };
-    return (React__namespace["default"].createElement(elements.ElementsProvider, { elements: elements$1 },
-        React__namespace["default"].createElement(ControlsProvider, { controls: controls },
-            React__namespace["default"].createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
-                React__namespace["default"].createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                    React__namespace["default"].createElement(AttachmentProvider, { allowAttachments: allowAttachments },
-                        React__namespace["default"].createElement(ConversationDisplayTextProvider, { ..._displayText },
-                            React__namespace["default"].createElement(ConversationInputContextProvider, null,
-                                React__namespace["default"].createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
-                                    React__namespace["default"].createElement(AvatarsProvider, { avatars: avatars },
-                                        React__namespace["default"].createElement(ActionsProvider, { actions: actions },
-                                            React__namespace["default"].createElement(MessageVariantProvider, { variant: variant },
-                                                React__namespace["default"].createElement(MessagesProvider, { messages: messages },
-                                                    React__namespace["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children))))))))))))));
+    return (React__namespace["default"].createElement(ControlsProvider, { controls: controls },
+        React__namespace["default"].createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
+            React__namespace["default"].createElement(WelcomeMessageProvider, { welcomeMessage: welcomeMessage },
+                React__namespace["default"].createElement(FallbackComponentProvider, { FallbackComponent: FallbackResponseComponent },
+                    React__namespace["default"].createElement(MessageRendererProvider, { ...messageRenderer },
+                        React__namespace["default"].createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
+                            React__namespace["default"].createElement(AttachmentProvider, { allowAttachments: allowAttachments },
+                                React__namespace["default"].createElement(ConversationDisplayTextProvider, { ..._displayText },
+                                    React__namespace["default"].createElement(ConversationInputContextProvider, null,
+                                        React__namespace["default"].createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
+                                            React__namespace["default"].createElement(AvatarsProvider, { avatars: avatars },
+                                                React__namespace["default"].createElement(ActionsProvider, { actions: actions },
+                                                    React__namespace["default"].createElement(MessageVariantProvider, { variant: variant },
+                                                        React__namespace["default"].createElement(MessagesProvider, { messages: messages },
+                                                            React__namespace["default"].createElement(AIContextProvider, { aiContext: aiContext },
+                                                                React__namespace["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children)))))))))))))))));
+};
+
+const DefaultMessageControl = () => {
+    const messages = React__namespace.useContext(MessagesContext);
+    const welcomeMessage = React__namespace.useContext(WelcomeMessageContext);
+    if (!messages || messages.length === 0) {
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            welcomeMessage,
+            React__namespace.createElement(PromptControl, null)));
+    }
 };
 
-/**
- * @experimental
- */
 function createAIConversation(input = {}) {
-    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, allowAttachments, } = input;
+    const { suggestedPrompts, actions, responseComponents, variant, controls, displayText, allowAttachments, messageRenderer, FallbackResponseComponent, } = input;
     function AIConversation(props) {
         const { messages, avatars, handleSendMessage, isLoading } = props;
         const providerProps = {
-            elements,
             actions,
             suggestedPrompts,
             responseComponents,
@@ -884,24 +844,34 @@ function createAIConversation(input = {}) {
             avatars,
             handleSendMessage,
             isLoading,
+            messageRenderer,
+            FallbackResponseComponent,
         };
         return (React__namespace["default"].createElement(AIConversationProvider, { ...providerProps },
-            React__namespace["default"].createElement(Conversation, null)));
+            React__namespace["default"].createElement(ViewElement, null,
+                React__namespace["default"].createElement(ViewElement, null,
+                    React__namespace["default"].createElement(DefaultMessageControl, null),
+                    React__namespace["default"].createElement(MessagesControl, null)),
+                React__namespace["default"].createElement(ViewElement, null,
+                    React__namespace["default"].createElement(FormControl, null)))));
     }
-    const Controls = {
-        ActionsBar: ActionsBarControl,
-        Avatars: AvatarControl,
-        Field: FieldControl,
-        Header: HeaderControl,
-        Messages: MessagesControl,
-        SuggestedPrompts: PromptControl,
-    };
     AIConversation.Provider = AIConversationProvider;
-    AIConversation.Conversation = Conversation;
-    AIConversation.Controls = Controls;
+    AIConversation.DefaultMessage = DefaultMessageControl;
+    AIConversation.Messages = MessagesControl;
+    AIConversation.Form = FormControl;
     return { AIConversation };
 }
 
+const PlaceholderMessage = ({ role }) => {
+    const variant = React__namespace.useContext(MessageVariantContext);
+    return (React__namespace.createElement(uiReact.View, { className: ui.classNames(ui.ComponentClassName.AIConversationMessage, ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, variant), ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, role)) },
+        React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageAvatar },
+            React__namespace.createElement(uiReact.Avatar, null)),
+        React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageBody },
+            React__namespace.createElement(uiReact.Placeholder, { width: "25%" }),
+            React__namespace.createElement(uiReact.Placeholder, { width: "50%" }),
+            React__namespace.createElement(uiReact.Placeholder, { width: "25%" }))));
+};
 const MessageMeta = ({ message }) => {
     // need to pass this in as props in order for it to be overridable
     const avatars = React__namespace.useContext(AvatarsContext);
@@ -913,29 +883,30 @@ const MessageMeta = ({ message }) => {
         React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username),
         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 MessageActions = ({ message }) => {
+    const actions = React__namespace.useContext(ActionsContext);
+    if (!actions)
+        return null;
+    return (React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageActions }, actions.map((action, i) => {
+        return (React__namespace.createElement(uiReact.Button, { key: i, size: "small", onClick: () => {
+                action.handler(message);
+            } }, action.component));
+    })));
 };
 const Message = ({ message }) => {
     const avatars = React__namespace.useContext(AvatarsContext);
     const variant = React__namespace.useContext(MessageVariantContext);
+    const { isLoading } = message;
     const avatar = message.role === 'assistant' ? avatars?.ai : avatars?.user;
     return (React__namespace.createElement(RoleContext.Provider, { value: message.role },
         React__namespace.createElement(uiReact.View, { className: ui.classNames(ui.ComponentClassName.AIConversationMessage, ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, variant), ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, message.role)) },
             React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageAvatar },
-                React__namespace.createElement(uiReact.Avatar, null, avatar?.avatar)),
+                React__namespace.createElement(uiReact.Avatar, { isLoading: isLoading }, avatar?.avatar)),
             React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageBody },
                 React__namespace.createElement(MessageMeta, { message: message }),
                 React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageContent },
-                    React__namespace.createElement(MessageControl, { message: message }))))));
+                    React__namespace.createElement(MessageControl, { message: message })),
+                message.role === 'assistant' ? (React__namespace.createElement(MessageActions, { message: message })) : null))));
 };
 const MessageList = ({ messages, }) => {
     const isLoading = React__namespace.useContext(LoadingContext);
@@ -943,8 +914,10 @@ const MessageList = ({ messages, }) => {
         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));
+        isLoading ? (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(PlaceholderMessage, { role: "user" }),
+            React__namespace.createElement(PlaceholderMessage, { role: "assistant" }))) : null,
+        messagesWithRenderableContent.map((message, i) => (React__namespace.createElement(Message, { key: `message-${i}`, message: message })))));
 };
 
 const Attachment = ({ file, handleRemove, }) => {
@@ -990,12 +963,12 @@ const FormWrapper = ({ children, allowAttachments, setInput, }) => {
         return children;
     }
 };
-const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
+const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) => {
     const icons = internal.useIcons('aiConversation');
     const sendIcon = icons?.send ?? React__namespace.createElement(internal.IconSend, null);
     const attachIcon = icons?.attach ?? React__namespace.createElement(internal.IconAttach, null);
     const hiddenInput = React__namespace.useRef(null);
-    const isLoading = React__namespace.useContext(LoadingContext);
+    const [composing, setComposing] = React__namespace.useState(false);
     const isInputEmpty = !input?.text?.length && !input?.files?.length;
     return (React__namespace.createElement(FormWrapper, { allowAttachments: allowAttachments, setInput: setInput },
         React__namespace.createElement(uiReact.View, { as: "form", className: ui.ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
@@ -1017,9 +990,9 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
                                 files: [...(prevValue?.files ?? []), ...Array.from(files)],
                             }));
                         }, multiple: true, accept: "*", "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", onKeyDown: (e) => {
+            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';
+                    const shouldSubmit = !e.shiftKey && e.key === 'Enter' && !composing;
                     if (shouldSubmit && isHTMLFormElement(e.target)) {
                         e.target.form.requestSubmit();
                         e.preventDefault();
@@ -1045,89 +1018,69 @@ const PromptList = ({ setInput, suggestedPrompts = [], }) => {
                     ...prevInput,
                     text: prompt.inputText,
                 }));
-            } }, prompt.header));
+            } }, prompt.component));
     })));
 };
 
-function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, allowAttachments, }) {
+const VERSION = '1.0.0';
+
+function AIConversationBase({ avatars, controls, ...rest }) {
+    uiReactCore.useSetUserAgent({
+        componentName: 'AIConversation',
+        packageName: 'react-ai',
+        version: VERSION,
+    });
     const icons = internal.useIcons('aiConversation');
     const defaultAvatars = {
         ai: {
             username: 'Assistant',
-            avatar: icons?.assistant ?? React__namespace.createElement(internal.IconAssistant, null),
+            avatar: icons?.assistant ?? React__namespace.createElement(internal.IconAssistant, { testId: "icon-assistant" }),
         },
         user: {
             username: 'User',
-            avatar: icons?.user ?? React__namespace.createElement(internal.IconUser, null),
+            avatar: icons?.user ?? React__namespace.createElement(internal.IconUser, { testId: "icon-user" }),
         },
     };
     const providerProps = {
-        messages,
-        handleSendMessage,
+        ...rest,
         avatars: {
             ...defaultAvatars,
             ...avatars,
         },
-        isLoading,
-        elements: {
-            Text: React__namespace.forwardRef(function _Text(props, ref) {
-                return React__namespace.createElement(uiReact.Text, { ...props, ref: ref });
-            }),
-        },
-        actions,
-        suggestedPrompts,
-        responseComponents,
-        variant,
         controls: {
             MessageList,
             PromptList,
             Form,
             ...controls,
         },
-        displayText,
-        allowAttachments,
     };
     return (React__namespace.createElement(AIConversationProvider, { ...providerProps },
-        React__namespace.createElement(uiReact.Flex, { className: ui.ComponentClassName.AIConversation },
+        React__namespace.createElement(uiReact.Flex, { className: ui.ComponentClassName.AIConversation, testId: "ai-conversation" },
             React__namespace.createElement(uiReact.ScrollView, { autoScroll: "smooth", flex: "1" },
-                React__namespace.createElement(AutoHidablePromptControl, null),
+                React__namespace.createElement(DefaultMessageControl, null),
                 React__namespace.createElement(MessagesControl, null)),
-            React__namespace.createElement(FieldControl, null))));
+            React__namespace.createElement(FormControl, null))));
 }
-/**
- * @experimental
- */
 const AIConversation = Object.assign(AIConversationBase, {
-    MessageList,
-    PromptList,
-    Form,
+    Provider: AIConversationProvider,
+    DefaultMessage: DefaultMessageControl,
+    Messages: MessagesControl,
+    Form: FormControl,
 });
 
-const AIContext = React__namespace["default"].createContext(undefined);
-const useAIContext = () => {
-    const context = React__namespace["default"].useContext(AIContext);
-    const [routeToConversationsMap, setRouteToConversationsMap] = React__namespace["default"].useState({});
-    if (context) {
-        return context;
-    }
-    return { routeToConversationsMap, setRouteToConversationsMap };
-};
-/**
- * @experimental
- */
-const AIContextProvider = ({ children, }) => {
-    const context = useAIContext();
-    return React__namespace["default"].createElement(AIContext.Provider, { value: context }, children);
-};
-
 // default state
 const INITIAL_STATE = {
     hasError: false,
     isLoading: false,
     messages: undefined,
 };
-const LOADING_STATE = { hasError: false, isLoading: true, messages: undefined };
+const LOADING_STATE = {
+    hasError: false,
+    isLoading: true,
+    messages: undefined,
+};
 const ERROR_STATE = { hasError: true, isLoading: false };
+
 function createUseAIGeneration(client) {
     const useAIGeneration = (routeName) => {
         const [dataState, setDataState] = React__namespace.useState(() => ({
@@ -1154,142 +1107,314 @@ function createUseAIGeneration(client) {
     return useAIGeneration;
 }
 
-function createNewConversationMessageInRoute({ previousValue, routeName, conversationId, messages, }) {
+const contentFromEvents = (contentBlocks) => {
+    if (!contentBlocks)
+        return [];
+    return contentBlocks.map((contentBlock) => {
+        const isTextBlock = contentBlock.some((event) => event.text);
+        if (isTextBlock) {
+            return {
+                text: contentBlock
+                    .map((event) => {
+                    return event.text;
+                })
+                    .join(''),
+            };
+        }
+        // tool use is never chunked
+        if (contentBlock[0].toolUse) {
+            return { toolUse: contentBlock[0].toolUse };
+        }
+    });
+};
+
+async function exhaustivelyListMessages({ conversation, messages = [], nextToken, }) {
+    const result = await conversation.listMessages({ nextToken });
+    if (result.data) {
+        messages?.push(...result.data);
+    }
+    if (result.nextToken) {
+        return exhaustivelyListMessages({
+            conversation,
+            messages,
+            nextToken: result.nextToken,
+        });
+    }
     return {
-        ...previousValue,
-        [routeName]: {
-            ...previousValue[routeName],
-            [conversationId]: messages,
-        },
+        ...result,
+        data: messages,
     };
 }
+
+function hasStarted(state) {
+    return ['initialLoading', 'initialized'].includes(state);
+}
 function createUseAIConversation(client) {
+    // This is a bit complicated so buckle up.
+    // The way the data client works is conversation.get() or conversation.create()
+    // is an async function because it makes a graphql call to appsync
+    // then it returns a conversation object, which is like a normal
+    // data client record, except that it also has functions on it,
+    // like sendMessage and onStreamEvent. onStreamEvent sets up a
+    // subscription using a websocket connection, which ideally we only want to
+    // do once per conversation. Because we can only subscribe AFTER the
+    // async call to get/create the conversation is made, the cleanup
+    // function in the effect will won't actually unsubscribe
     const useAIConversation = (routeName, input = {}) => {
         const clientRoute = client.conversations[routeName];
-        const { routeToConversationsMap, setRouteToConversationsMap } = useAIContext();
-        const messagesFromAIContext = input.id
-            ? routeToConversationsMap[routeName]?.[input.id]
-            : undefined;
-        const [localMessages, setLocalMessages] = React__namespace["default"].useState(messagesFromAIContext ?? []);
-        const [conversation, setConversation] = React__namespace["default"].useState(undefined);
-        const [waitingForAIResponse, setWaitingForAIResponse] = React__namespace["default"].useState(false);
-        const [errorMessage, setErrorMessage] = React__namespace["default"].useState();
-        const [hasError, setHasError] = React__namespace["default"].useState(false);
-        // On hook initialization get conversation and load all messages
+        // We need to keep track of the stream events as the come in
+        // for an assistant message, but don't need to keep them in state
+        const contentBlocksRef = React__namespace["default"].useRef();
+        // Using this hook without an existing conversation id means
+        // it will create a new conversation when it is executed
+        // we don't want to create 2 conversations
+        const initRef = React__namespace["default"].useRef('initial');
+        const [dataState, setDataState] = React__namespace["default"].useState(() => ({
+            ...INITIAL_STATE,
+            data: { messages: [], conversation: undefined },
+        }));
+        const { conversation } = dataState.data;
+        const { id, onInitialize, onMessage } = input;
         React__namespace["default"].useEffect(() => {
             async function initialize() {
-                const { data: conversation } = input.id
-                    ? await clientRoute.get({ id: input.id })
-                    : await clientRoute.create();
-                if (!conversation) {
-                    const errorString = 'No conversation found';
-                    setHasError(true);
-                    setErrorMessage(errorString);
-                    throw new Error(errorString);
+                // We don't want to run the effect multiple times
+                // because that could create multiple conversation records
+                if (hasStarted(initRef.current))
+                    return;
+                initRef.current = 'initialLoading';
+                // Only show component loading state if we are
+                // actually loading messages
+                if (id) {
+                    setDataState({
+                        ...LOADING_STATE,
+                        data: { messages: [], conversation: undefined },
+                    });
                 }
-                const { data: messages } = await conversation.listMessages();
-                setLocalMessages(messages);
-                setConversation(conversation);
-                setRouteToConversationsMap((previousValue) => {
-                    return createNewConversationMessageInRoute({
-                        previousValue,
-                        routeName: routeName,
-                        conversationId: conversation.id,
-                        messages,
+                const { data: conversation, errors } = id
+                    ? await clientRoute.get({ id })
+                    : await clientRoute.create();
+                if (errors ?? !conversation) {
+                    setDataState({
+                        ...ERROR_STATE,
+                        data: { messages: [] },
+                        messages: errors,
                     });
+                }
+                else {
+                    if (id) {
+                        const { data: messages } = await exhaustivelyListMessages({
+                            conversation,
+                        });
+                        setDataState({
+                            ...INITIAL_STATE,
+                            data: { messages, conversation },
+                        });
+                    }
+                    else {
+                        setDataState({
+                            ...INITIAL_STATE,
+                            data: { conversation, messages: [] },
+                        });
+                    }
+                    initRef.current = 'initialized';
+                }
+            }
+            // this is a runtime guard to make catch an error if
+            // the route name wrong, or there is a mismatch
+            // between the gen2 schema definition and
+            // whats in amplify_outputs
+            if (!clientRoute) {
+                setDataState({
+                    ...ERROR_STATE,
+                    data: { messages: [] },
+                    messages: [
+                        {
+                            message: 'Conversation route does not exist',
+                            errorInfo: null,
+                            errorType: '',
+                        },
+                    ],
                 });
+                return;
             }
             initialize();
-        }, [clientRoute, input.id, routeName, setRouteToConversationsMap]);
-        // Update messages to match what is in AIContext if they aren't equal
+            return () => {
+                contentBlocksRef.current = undefined;
+                if (hasStarted(initRef.current))
+                    return;
+                setDataState({
+                    ...INITIAL_STATE,
+                    data: { messages: [], conversation: undefined },
+                });
+            };
+        }, [clientRoute, id, setDataState]);
+        // 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
         React__namespace["default"].useEffect(() => {
-            if (!!messagesFromAIContext && messagesFromAIContext !== localMessages)
-                setLocalMessages(messagesFromAIContext);
-        }, [messagesFromAIContext, localMessages]);
-        const sendMessage = React__namespace["default"].useCallback((input) => {
-            const { content, aiContext, toolConfiguration } = input;
-            conversation
-                ?.sendMessage({ content, aiContext, toolConfiguration })
-                .then((value) => {
-                const { data: sentMessage } = value;
-                if (sentMessage) {
-                    setWaitingForAIResponse(true);
-                    setLocalMessages((previousLocalMessages) => [
-                        ...previousLocalMessages,
-                        sentMessage,
-                    ]);
-                    setRouteToConversationsMap((previousValue) => {
-                        return createNewConversationMessageInRoute({
-                            previousValue,
-                            routeName: routeName,
-                            conversationId: conversation.id,
-                            messages: [
-                                ...previousValue[routeName][conversation.id],
-                                sentMessage,
-                            ],
+            if (!conversation)
+                return;
+            const subscription = conversation.onStreamEvent({
+                next: (event) => {
+                    const { 
+                    // messages have a content block array,
+                    // this is the index of the content block that was updated
+                    contentBlockIndex, 
+                    // this is the index of the content chunk, ensure these are in order!
+                    contentBlockDeltaIndex, 
+                    // this is sent after the last content chunk, verify this matches the
+                    // previous contentBlockDeltaIndex
+                    contentBlockDoneAtIndex, 
+                    // this is the final event of the conversation turn
+                    stopReason, conversationId, id, } = event;
+                    // return early for content blocks being done
+                    // or conversation turn being over
+                    if (contentBlockDoneAtIndex) {
+                        return;
+                    }
+                    // stop reason will signify end of conversation turn
+                    if (stopReason) {
+                        // remove loading state from streamed message
+                        setDataState((prev) => {
+                            return {
+                                ...prev,
+                                data: {
+                                    ...prev.data,
+                                    messages: prev.data.messages.map((message) => ({
+                                        ...message,
+                                        isLoading: false,
+                                    })),
+                                },
+                            };
                         });
-                    });
-                }
-            })
-                .catch((reason) => {
-                setHasError(true);
-                setErrorMessage(`error sending message ${reason}`);
-            });
-        }, [conversation, routeName, setRouteToConversationsMap]);
-        const subscribe = React__namespace["default"].useCallback((handleStoreChange) => {
-            const subscription = conversation &&
-                conversation.onMessage((message) => {
-                    if (input.onResponse)
-                        input.onResponse(message);
-                    setWaitingForAIResponse(false);
-                    setLocalMessages((previousLocalMessages) => [
-                        ...previousLocalMessages,
-                        message,
-                    ]);
-                    setRouteToConversationsMap((previousValue) => {
-                        return createNewConversationMessageInRoute({
-                            previousValue,
-                            routeName: routeName,
-                            conversationId: conversation.id,
-                            messages: [
-                                ...previousValue[routeName][conversation.id],
-                                message,
-                            ],
+                        onMessage?.({
+                            id,
+                            conversationId,
+                            content: contentFromEvents(contentBlocksRef.current),
+                            createdAt: new Date().toISOString(),
+                            role: 'assistant',
+                            isLoading: true,
                         });
+                        // clear out the stream cache
+                        contentBlocksRef.current = undefined;
+                        return;
+                    }
+                    // no ref means its the first event for the message stream
+                    // so lets create the contentBlocks ref or else we will
+                    // add the incoming event to the right content content block
+                    if (!contentBlocksRef.current) {
+                        contentBlocksRef.current = [[event]];
+                    }
+                    else {
+                        // place the incoming event in the right content block
+                        // and order. message content is an array so a single message
+                        // can have multiple content blocks, and each content block
+                        // can have multiple events/chunks
+                        const currentBlock = contentBlocksRef.current[contentBlockIndex];
+                        if (!currentBlock) {
+                            contentBlocksRef.current[contentBlockIndex] = [event];
+                        }
+                        else {
+                            contentBlocksRef.current[contentBlockIndex] = [
+                                ...currentBlock.slice(0, contentBlockDeltaIndex),
+                                event,
+                                ...currentBlock.slice(contentBlockDeltaIndex),
+                            ];
+                        }
+                    }
+                    setDataState((prev) => {
+                        const message = {
+                            id,
+                            conversationId,
+                            content: contentFromEvents(contentBlocksRef.current),
+                            createdAt: new Date().toISOString(),
+                            role: 'assistant',
+                            isLoading: true,
+                        };
+                        return {
+                            ...prev,
+                            data: {
+                                ...prev.data,
+                                // TODO: we are assuming we only update the last
+                                // message, but maybe we should match it by message ID?
+                                messages: [...prev.data.messages.slice(0, -1), message],
+                            },
+                        };
                     });
-                    handleStoreChange(); // should cause a re-render
-                });
+                },
+                error: (error) => {
+                    setDataState((prev) => {
+                        return {
+                            ...prev,
+                            ...ERROR_STATE,
+                            messages: error.errors,
+                        };
+                    });
+                },
+            });
+            if (ui.isFunction(onInitialize)) {
+                onInitialize(conversation);
+            }
             return () => {
-                subscription?.unsubscribe();
+                contentBlocksRef.current = undefined;
+                subscription.unsubscribe();
             };
-        }, [conversation, routeName, setRouteToConversationsMap, input]);
-        const getSnapshot = React__namespace["default"].useCallback(() => localMessages, [localMessages]);
-        // Using useSyncExternalStore to subscribe to external data updates
-        // Have to provide third optional argument in next - https://github.com/vercel/next.js/issues/54685
-        const messagesFromStore = React__namespace["default"].useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-        return [
-            {
-                data: { messages: messagesFromStore },
-                isLoading: waitingForAIResponse,
-                message: errorMessage,
-                hasError,
-            },
-            sendMessage,
-        ];
+        }, [conversation, onInitialize, onMessage, setDataState]);
+        const handleSendMessage = React__namespace["default"].useCallback((input) => {
+            const { content } = input;
+            if (conversation) {
+                setDataState((prevState) => ({
+                    ...prevState,
+                    data: {
+                        ...prevState.data,
+                        // optimistically add user and assistant messages
+                        messages: [
+                            ...prevState.data.messages,
+                            {
+                                content,
+                                role: 'user',
+                                createdAt: new Date().toISOString(),
+                                id: 'temp-id',
+                                conversationId: conversation.id ?? '',
+                            },
+                            {
+                                content: [{ text: ' ' }],
+                                role: 'assistant',
+                                createdAt: new Date().toISOString(),
+                                id: 'temp-id-2',
+                                conversationId: conversation.id ?? '',
+                                isLoading: true,
+                            },
+                        ],
+                    },
+                }));
+                conversation.sendMessage(input);
+            }
+            else {
+                setDataState((prev) => ({
+                    ...prev,
+                    ...ERROR_STATE,
+                    messages: [
+                        {
+                            message: 'No conversation found',
+                            errorInfo: null,
+                            errorType: '',
+                        },
+                    ],
+                }));
+            }
+        }, [conversation]);
+        return [dataState, handleSendMessage];
     };
     return useAIConversation;
 }
 
-/**
- * @experimental
- */
 function createAIHooks(_client) {
     const useAIConversation = createUseAIConversation(_client);
     const useAIGeneration = createUseAIGeneration(_client);
     return { useAIConversation, useAIGeneration };
 }
 
-exports.AIContextProvider = AIContextProvider;
 exports.AIConversation = AIConversation;
 exports.createAIConversation = createAIConversation;
 exports.createAIHooks = createAIHooks;