@aws-amplify/ui-react-ai 0.0.0-storage-browser-alpha-da8934f-20241119010337 → 0.0.0-storage-browser-alpha-f2b530b-20241119020257

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, Flex, ScrollView } from '@aws-amplify/ui-react';
+import { Flex, ScrollView } from '@aws-amplify/ui-react';
 import { useIcons, IconAssistant, IconUser } from '@aws-amplify/ui-react/internal';
 import { MessagesControl } from './views/Controls/MessagesControl.mjs';
 import { FormControl } from './views/Controls/FormControl.mjs';
@@ -35,9 +35,6 @@ function AIConversationBase({ avatars, controls, ...rest }) {
             ...defaultAvatars,
             ...avatars,
         },
-        elements: {
-            Text,
-        },
         controls: {
             MessageList,
             PromptList,
@@ -52,9 +49,6 @@ function AIConversationBase({ avatars, controls, ...rest }) {
                 React.createElement(MessagesControl, null)),
             React.createElement(FormControl, null))));
 }
-/**
- * @experimental
- */
 const AIConversation = Object.assign(AIConversationBase, {
     Provider: AIConversationProvider,
     DefaultMessage: DefaultMessageControl,

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

@@ -1,6 +1,6 @@
 import React__default from 'react';
-import { ElementsProvider } from '@aws-amplify/ui-react-core/elements';
 import { defaultAIConversationDisplayTextEn } from './displayText.mjs';
+import { AIContextProvider } from './context/AIContextContext.mjs';
 import { ActionsProvider } from './context/ActionsContext.mjs';
 import { AvatarsProvider } from './context/AvatarsContext.mjs';
 import { ConversationInputContextProvider } from './context/ConversationInputContext.mjs';
@@ -18,26 +18,26 @@ import { WelcomeMessageProvider } from './context/WelcomeMessageContext.mjs';
 import { FallbackComponentProvider } from './context/FallbackComponentContext.mjs';
 import './context/elements/definitions.mjs';
 
-const AIConversationProvider = ({ actions, allowAttachments, avatars, children, controls, displayText, elements, handleSendMessage, isLoading, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }) => {
+const AIConversationProvider = ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }) => {
     const _displayText = {
         ...defaultAIConversationDisplayTextEn,
         ...displayText,
     };
-    return (React__default.createElement(ElementsProvider, { elements: elements },
-        React__default.createElement(ControlsProvider, { controls: controls },
-            React__default.createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
-                React__default.createElement(WelcomeMessageProvider, { welcomeMessage: welcomeMessage },
-                    React__default.createElement(FallbackComponentProvider, { FallbackComponent: FallbackResponseComponent },
-                        React__default.createElement(MessageRendererProvider, { ...messageRenderer },
-                            React__default.createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                                React__default.createElement(AttachmentProvider, { allowAttachments: allowAttachments },
-                                    React__default.createElement(ConversationDisplayTextProvider, { ..._displayText },
-                                        React__default.createElement(ConversationInputContextProvider, null,
-                                            React__default.createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
-                                                React__default.createElement(AvatarsProvider, { avatars: avatars },
-                                                    React__default.createElement(ActionsProvider, { actions: actions },
-                                                        React__default.createElement(MessageVariantProvider, { variant: variant },
-                                                            React__default.createElement(MessagesProvider, { messages: messages },
+    return (React__default.createElement(ControlsProvider, { controls: controls },
+        React__default.createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
+            React__default.createElement(WelcomeMessageProvider, { welcomeMessage: welcomeMessage },
+                React__default.createElement(FallbackComponentProvider, { FallbackComponent: FallbackResponseComponent },
+                    React__default.createElement(MessageRendererProvider, { ...messageRenderer },
+                        React__default.createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
+                            React__default.createElement(AttachmentProvider, { allowAttachments: allowAttachments },
+                                React__default.createElement(ConversationDisplayTextProvider, { ..._displayText },
+                                    React__default.createElement(ConversationInputContextProvider, null,
+                                        React__default.createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
+                                            React__default.createElement(AvatarsProvider, { avatars: avatars },
+                                                React__default.createElement(ActionsProvider, { actions: actions },
+                                                    React__default.createElement(MessageVariantProvider, { variant: variant },
+                                                        React__default.createElement(MessagesProvider, { messages: messages },
+                                                            React__default.createElement(AIContextProvider, { aiContext: aiContext },
                                                                 React__default.createElement(LoadingContextProvider, { isLoading: isLoading }, children)))))))))))))))));
 };
 

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

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

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

@@ -8,15 +8,11 @@ import { ViewElement } from './context/elements/definitions.mjs';
 import { AIConversationProvider } from './AIConversationProvider.mjs';
 import { DefaultMessageControl } from './views/Controls/DefaultMessageControl.mjs';
 
-/**
- * @experimental
- */
 function createAIConversation(input = {}) {
-    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, allowAttachments, messageRenderer, FallbackResponseComponent, } = 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,

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import { ActionsContext } from '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import { ConversationInputContext } from '../../context/ConversationInputContext.mjs';

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import { ConversationInputContext } from '../../context/ConversationInputContext.mjs';

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import { AvatarsContext } from '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import { AIContextContext } from '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import { ConversationInputContext } from '../../context/ConversationInputContext.mjs';
@@ -19,6 +20,7 @@ import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { AttachFileControl } from './AttachFileControl.mjs';
 import { AttachmentListControl } from './AttachmentListControl.mjs';
 import { getImageTypeFromMimeType } from '../../utils.mjs';
+import { isFunction } from '@aws-amplify/ui';
 
 const { Button, Icon, Label: LabelElement, TextArea, View, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
@@ -104,8 +106,10 @@ const FormControl = () => {
     const { input, setInput } = React__default.useContext(ConversationInputContext);
     const handleSendMessage = React__default.useContext(SendMessageContext);
     const allowAttachments = React__default.useContext(AttachmentContext);
-    const ref = React__default.useRef(null);
     const responseComponents = React__default.useContext(ResponseComponentsContext);
+    const isLoading = React__default.useContext(LoadingContext);
+    const aiContext = React__default.useContext(AIContextContext);
+    const ref = React__default.useRef(null);
     const controls = React__default.useContext(ControlsContext);
     const [composing, setComposing] = React__default.useState(false);
     const submitMessage = async () => {
@@ -132,6 +136,7 @@ const FormControl = () => {
         if (handleSendMessage) {
             handleSendMessage({
                 content: submittedContent,
+                aiContext: isFunction(aiContext) ? aiContext() : undefined,
                 toolConfiguration: convertResponseComponentsToToolConfiguration(responseComponents),
             });
         }
@@ -153,7 +158,7 @@ const FormControl = () => {
         }
     };
     if (controls?.Form) {
-        return (React__default.createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, allowAttachments: allowAttachments }));
+        return (React__default.createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, allowAttachments: allowAttachments, isLoading: isLoading }));
     }
     return (React__default.createElement("form", { className: `${FIELD_BLOCK}__form`, onSubmit: handleSubmit, method: "post", ref: ref },
         allowAttachments ? React__default.createElement(AttachFileControl, null) : null,

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

@@ -1,5 +1,7 @@
 import React__default from 'react';
+import { Image } from '@aws-amplify/ui-react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';
@@ -19,25 +21,19 @@ import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { convertBufferToBase64 } from '../../utils.mjs';
 import { ActionsBarControl } from './ActionsBarControl.mjs';
 import { AvatarControl } from './AvatarControl.mjs';
+import { classNames } from '@aws-amplify/ui';
 
-const { Image, Span, Text, View } = AIConversationElements;
-const MESSAGES_BLOCK = 'ai-messages';
-const MESSAGE_BLOCK = 'ai-message';
-const MediaContentBase = withBaseElementProps(Image, {
-    alt: 'Image attachment',
-});
-const MediaContent = React__default.forwardRef(function MediaContent(props, ref) {
+const { Text, View } = AIConversationElements;
+const MESSAGES_BLOCK = 'amplify-ai-conversation__message__list';
+const MESSAGE_BLOCK = 'amplify-ai-conversation__message';
+const MediaContent = (props) => {
     const variant = React__default.useContext(MessageVariantContext);
     const role = React__default.useContext(RoleContext);
-    return (React__default.createElement(MediaContentBase, { ref: ref, className: `${MESSAGE_BLOCK}__image ${MESSAGE_BLOCK}__image--${variant} ${MESSAGE_BLOCK}__image--${role}`, ...props }));
-});
+    return (React__default.createElement(Image, { className: classNames(`${MESSAGE_BLOCK}__image`, variant && `${MESSAGE_BLOCK}__image--${variant}`, `${MESSAGE_BLOCK}__image--${role}`), ...props }));
+};
 const TextContent = React__default.forwardRef(function TextContent(props, ref) {
     return React__default.createElement(Text, { ref: ref, className: `${MESSAGE_BLOCK}__text`, ...props });
 });
-const ContentContainer = React__default.forwardRef(function ContentContainer(props, ref) {
-    const variant = React__default.useContext(MessageVariantContext);
-    return (React__default.createElement(View, { "data-testid": 'content', className: `${MESSAGE_BLOCK}__content ${MESSAGE_BLOCK}__content--${variant}`, ref: ref, ...props }));
-});
 const ToolContent = ({ toolUse, }) => {
     const responseComponents = React__default.useContext(ResponseComponentsContext) ?? {};
     const FallbackComponent = React__default.useContext(FallbackComponentContext);
@@ -61,26 +57,18 @@ const ToolContent = ({ toolUse, }) => {
 };
 const MessageControl = ({ message }) => {
     const messageRenderer = React__default.useContext(MessageRendererContext);
-    return (React__default.createElement(ContentContainer, null, message.content.map((content, index) => {
+    return (React__default.createElement(React__default.Fragment, null, message.content.map((content, index) => {
         if (content.text) {
             return messageRenderer?.text ? (React__default.createElement(React__default.Fragment, { key: index }, messageRenderer.text({ text: content.text }))) : (React__default.createElement(TextContent, { "data-testid": 'text-content', key: index }, content.text));
         }
         else if (content.image) {
-            return messageRenderer?.image ? (React__default.createElement(React__default.Fragment, { key: index }, messageRenderer?.image({ image: content.image }))) : (React__default.createElement(MediaContent, { "data-testid": 'image-content', key: index, src: convertBufferToBase64(content.image?.source.bytes, content.image?.format) }));
+            return messageRenderer?.image ? (React__default.createElement(React__default.Fragment, { key: index }, messageRenderer?.image({ image: content.image }))) : (React__default.createElement(MediaContent, { "data-testid": 'image-content', key: index, alt: "", src: convertBufferToBase64(content.image?.source.bytes, content.image?.format) }));
         }
         else if (content.toolUse) {
             return React__default.createElement(ToolContent, { toolUse: content.toolUse, key: index });
         }
     })));
 };
-MessageControl.Container = ContentContainer;
-MessageControl.MediaContent = MediaContent;
-MessageControl.TextContent = TextContent;
-const Separator = withBaseElementProps(Span, {
-    'aria-hidden': true,
-    children: '|',
-    className: `${MESSAGE_BLOCK}__separator`,
-});
 const Timestamp = withBaseElementProps(Text, {
     className: `${MESSAGE_BLOCK}__timestamp`,
 });
@@ -141,7 +129,6 @@ const MessagesControl = () => {
             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, getMessageTimestampText(new Date(message.createdAt)))),
                 React__default.createElement(MessageControl, { message: message }),
                 message.role === 'assistant' ? (React__default.createElement(ActionsBarControl, { message: message, focusable: focusedItemIndex === index })) : null)));
@@ -153,6 +140,5 @@ MessagesControl.Container = MessageContainer;
 MessagesControl.HeaderContainer = HeaderContainer;
 MessagesControl.Layout = Layout;
 MessagesControl.Message = MessageControl;
-MessagesControl.Separator = Separator;
 
 export { MessageControl, MessagesControl };

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import { ConversationInputContext } from '../../context/ConversationInputContext.mjs';

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

@@ -3,7 +3,6 @@ import { View, Button, VisuallyHidden, TextAreaField, DropZone } from '@aws-ampl
 import { useIcons, IconSend, IconAttach } from '@aws-amplify/ui-react/internal';
 import { ComponentClassName } from '@aws-amplify/ui';
 import { Attachments } from './Attachments.mjs';
-import { LoadingContext } from '../../context/LoadingContext.mjs';
 
 function isHTMLFormElement(target) {
     return 'form' in target;
@@ -25,12 +24,11 @@ const FormWrapper = ({ children, allowAttachments, setInput, }) => {
         return children;
     }
 };
-const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
+const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) => {
     const icons = useIcons('aiConversation');
     const sendIcon = icons?.send ?? React.createElement(IconSend, null);
     const attachIcon = icons?.attach ?? React.createElement(IconAttach, null);
     const hiddenInput = React.useRef(null);
-    const isLoading = React.useContext(LoadingContext);
     const [composing, setComposing] = React.useState(false);
     const isInputEmpty = !input?.text?.length && !input?.files?.length;
     return (React.createElement(FormWrapper, { allowAttachments: allowAttachments, setInput: setInput },

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Avatar, Placeholder, Text, Button } from '@aws-amplify/ui-react';
 import { MessageControl } from '../Controls/MessagesControl.mjs';
+import '../../context/AIContextContext.mjs';
 import { ActionsContext } from '../../context/ActionsContext.mjs';
 import { AvatarsContext } from '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';

package/dist/esm/hooks/createAIHooks.mjs

@@ -1,9 +1,6 @@
 import { createUseAIGeneration } from './useAIGeneration.mjs';
 import { createUseAIConversation } from './useAIConversation.mjs';
 
-/**
- * @experimental
- */
 function createAIHooks(_client) {
     const useAIConversation = createUseAIConversation(_client);
     const useAIGeneration = createUseAIGeneration(_client);

package/dist/index.js

@@ -5,9 +5,9 @@ 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 ui = require('@aws-amplify/ui');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -29,6 +29,11 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+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);
 const ActionsProvider = ({ children, actions, }) => {
     return (React__namespace["default"].createElement(ActionsContext.Provider, { value: actions }, children));
@@ -278,9 +283,9 @@ const AIConversationElements = {
     View: ViewElement,
 };
 
-const { Button: Button$4, Span: Span$3, View: View$6 } = AIConversationElements;
+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`,
 });
@@ -301,7 +306,7 @@ ActionsBarControl.Button = ActionButton;
 ActionsBarControl.Container = Container$3;
 ActionsBarControl.Icon = ActionIcon;
 
-const { Icon: Icon$3, Span: Span$2, Text: Text$2, View: View$5 } = 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$3, {
     variant: 'user-avatar',
@@ -312,7 +317,7 @@ const DEFAULT_AI_ICON = () => (React__namespace["default"].createElement("svg",
 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`,
 });
@@ -393,7 +398,7 @@ AttachFileControl.Icon = AttachFileIcon;
 AttachFileControl.Button = AttachFileButton;
 AttachFileControl.Container = AttachFileContainer;
 
-const { Button: Button$2, Icon: Icon$1, ListItem, UnorderedList: ListElement, Span: Span$1, Text: Text$1, 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';
@@ -424,7 +429,7 @@ const FileNameText = elements.withBaseElementProps(Text$1, {
 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: '|',
@@ -435,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`,
 });
@@ -559,8 +564,10 @@ 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 () => {
@@ -587,6 +594,7 @@ const FormControl = () => {
         if (handleSendMessage) {
             handleSendMessage({
                 content: submittedContent,
+                aiContext: ui.isFunction(aiContext) ? aiContext() : undefined,
                 toolConfiguration: convertResponseComponentsToToolConfiguration(responseComponents),
             });
         }
@@ -608,7 +616,7 @@ const FormControl = () => {
         }
     };
     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,
@@ -627,24 +635,17 @@ FormControl.TextInput = TextInput;
 FormControl.SendButton = SendButton;
 FormControl.SendIcon = SendIcon;
 
-const { Image, Span, Text, 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, { 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 }));
-});
 const ToolContent = ({ toolUse, }) => {
     const responseComponents = React__namespace["default"].useContext(ResponseComponentsContext) ?? {};
     const FallbackComponent = React__namespace["default"].useContext(FallbackComponentContext);
@@ -668,26 +669,18 @@ const ToolContent = ({ toolUse, }) => {
 };
 const MessageControl = ({ message }) => {
     const messageRenderer = React__namespace["default"].useContext(MessageRendererContext);
-    return (React__namespace["default"].createElement(ContentContainer, null, message.content.map((content, index) => {
+    return (React__namespace["default"].createElement(React__namespace["default"].Fragment, null, message.content.map((content, index) => {
         if (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 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, 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) {
             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, {
     className: `${MESSAGE_BLOCK}__timestamp`,
 });
@@ -748,7 +741,6 @@ const MessagesControl = () => {
             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)));
@@ -760,7 +752,6 @@ MessagesControl.Container = MessageContainer;
 MessagesControl.HeaderContainer = HeaderContainer;
 MessagesControl.Layout = Layout;
 MessagesControl.Message = MessageControl;
-MessagesControl.Separator = Separator;
 
 const { View, Button } = AIConversationElements;
 const PROMPT_BLOCK = 'ai-prompts';
@@ -804,26 +795,26 @@ PromptControl.Container = Container;
 PromptControl.PromptGroup = PromptGroup;
 PromptControl.PromptCard = PromptCard;
 
-const AIConversationProvider = ({ actions, allowAttachments, avatars, children, controls, displayText, elements: elements$1, handleSendMessage, isLoading, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }) => {
+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(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 },
+    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)))))))))))))))));
 };
 
@@ -837,15 +828,11 @@ const DefaultMessageControl = () => {
     }
 };
 
-/**
- * @experimental
- */
 function createAIConversation(input = {}) {
-    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, allowAttachments, messageRenderer, FallbackResponseComponent, } = 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,
@@ -976,12 +963,11 @@ 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 },
@@ -1061,9 +1047,6 @@ function AIConversationBase({ avatars, controls, ...rest }) {
             ...defaultAvatars,
             ...avatars,
         },
-        elements: {
-            Text: uiReact.Text,
-        },
         controls: {
             MessageList,
             PromptList,
@@ -1078,9 +1061,6 @@ function AIConversationBase({ avatars, controls, ...rest }) {
                 React__namespace.createElement(MessagesControl, null)),
             React__namespace.createElement(FormControl, null))));
 }
-/**
- * @experimental
- */
 const AIConversation = Object.assign(AIConversationBase, {
     Provider: AIConversationProvider,
     DefaultMessage: DefaultMessageControl,
@@ -1429,9 +1409,6 @@ function createUseAIConversation(client) {
     return useAIConversation;
 }
 
-/**
- * @experimental
- */
 function createAIHooks(_client) {
     const useAIConversation = createUseAIConversation(_client);
     const useAIGeneration = createUseAIGeneration(_client);

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

@@ -1,8 +1,5 @@
 import { AIConversation as AIConversationType, AIConversationInput, AIConversationProps } from './types';
 interface AIConversationBaseProps extends AIConversationProps, AIConversationInput {
 }
-/**
- * @experimental
- */
 export declare const AIConversation: AIConversationType<AIConversationBaseProps>;
 export {};

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

@@ -3,4 +3,4 @@ import { AIConversationInput, AIConversationProps } from './types';
 export interface AIConversationProviderProps extends AIConversationInput, AIConversationProps {
     children?: React.ReactNode;
 }
-export declare const AIConversationProvider: ({ actions, allowAttachments, avatars, children, controls, displayText, elements, handleSendMessage, isLoading, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }: AIConversationProviderProps) => React.JSX.Element;
+export declare const AIConversationProvider: ({ aiContext, actions, allowAttachments, avatars, children, controls, displayText, handleSendMessage, isLoading, messages, messageRenderer, responseComponents, suggestedPrompts, variant, welcomeMessage, FallbackResponseComponent, }: AIConversationProviderProps) => React.JSX.Element;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const AIContextContext: React.Context<(() => object) | undefined>;
+export declare const AIContextProvider: ({ children, aiContext, }: {
+    children?: React.ReactNode;
+    aiContext?: (() => object) | undefined;
+}) => JSX.Element;

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

@@ -6,6 +6,7 @@ export interface ControlsContextProps {
     Form?: React.ComponentType<{
         handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
         allowAttachments?: boolean;
+        isLoading?: boolean;
     } & Required<ConversationInputContext>>;
     MessageList?: React.ComponentType<{
         messages: ConversationMessage[];

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

@@ -1,3 +1,4 @@
+export { AIContextContext, AIContextProvider } from './AIContextContext';
 export { ActionsContext, ActionsProvider } from './ActionsContext';
 export { AvatarsContext, AvatarsProvider } from './AvatarsContext';
 export { ConversationInputContext, ConversationInput, ConversationInputContextProvider, } from './ConversationInputContext';

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

@@ -1,7 +1,4 @@
 import { AIConversationInput, AIConversation } from './types';
-/**
- * @experimental
- */
 export declare function createAIConversation(input?: AIConversationInput): {
     AIConversation: AIConversation;
 };

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { AIConversationElements } from './context/elements';
 import { ActionsBarControl, AvatarControl, FormControl, MessagesControl, PromptControl } from './views';
 import { DisplayTextTemplate } from '@aws-amplify/ui';
 import { AIConversationDisplayText } from './displayText';
@@ -14,7 +13,6 @@ export interface Controls {
     SuggestedPrompts: PromptControl;
 }
 export interface AIConversationInput {
-    elements?: Partial<AIConversationElements>;
     displayText?: DisplayTextTemplate<AIConversationDisplayText>;
     welcomeMessage?: React.ReactNode;
     suggestedPrompts?: SuggestedPrompt[];
@@ -31,6 +29,7 @@ export interface AIConversationProps {
     handleSendMessage: SendMessage;
     avatars?: Avatars;
     isLoading?: boolean;
+    aiContext?: () => object;
 }
 export interface AIConversation<PropsType extends AIConversationProps = AIConversationProps> {
     (props: PropsType): JSX.Element;

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

@@ -4,13 +4,10 @@ import { ActionsBarControl } from './ActionsBarControl';
 import { AvatarControl } from './AvatarControl';
 import { ConversationMessage } from '../../../../types';
 export declare const MessageControl: MessageControl;
-interface MessageControl<T extends Partial<AIConversationElements> = AIConversationElements> {
+interface MessageControl {
     (props: {
         message: ConversationMessage;
     }): JSX.Element;
-    Container: T['View'];
-    MediaContent: T['Image'];
-    TextContent: T['Text'];
 }
 export declare const MessagesControl: MessagesControl;
 export interface MessagesControl {
@@ -21,6 +18,5 @@ export interface MessagesControl {
     HeaderContainer: AIConversationElements['View'];
     Layout: AIConversationElements['View'];
     Message: MessageControl;
-    Separator: AIConversationElements['Span'];
 }
 export {};

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

@@ -4,8 +4,5 @@ import { getSchema } from '../types';
 type UseAIHooks<Client extends Record<'generations' | 'conversations', Record<string, any>>, Schema extends Record<any, any>> = {
     useAIConversation: UseAIConversationHook<Extract<keyof Client['conversations'], string>>;
 } & UseAIGenerationHookWrapper<keyof Client['generations'], Schema>;
-/**
- * @experimental
- */
 export declare function createAIHooks<Client extends Record<'generations' | 'conversations', Record<string, any>>, Schema extends getSchema<Client>>(_client: Client): UseAIHooks<Client, Schema>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-ai",
-  "version": "0.0.0-storage-browser-alpha-da8934f-20241119010337",
+  "version": "0.0.0-storage-browser-alpha-f2b530b-20241119020257",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -48,9 +48,9 @@
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "0.0.0-storage-browser-alpha-da8934f-20241119010337",
-    "@aws-amplify/ui-react": "0.0.0-storage-browser-alpha-da8934f-20241119010337",
-    "@aws-amplify/ui-react-core": "0.0.0-storage-browser-alpha-da8934f-20241119010337"
+    "@aws-amplify/ui": "0.0.0-storage-browser-alpha-f2b530b-20241119020257",
+    "@aws-amplify/ui-react": "0.0.0-storage-browser-alpha-f2b530b-20241119020257",
+    "@aws-amplify/ui-react-core": "0.0.0-storage-browser-alpha-f2b530b-20241119020257"
   },
   "devDependencies": {
     "@types/jest-when": "^3.5.0",