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

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';
@@ -12,7 +12,7 @@ import { useSetUserAgent } from '@aws-amplify/ui-react-core';
 import { VERSION } from '../../version.mjs';
 import { DefaultMessageControl } from './views/Controls/DefaultMessageControl.mjs';
 
-function Provider({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, allowAttachments, messageRenderer, children, }) {
+function AIConversationBase({ avatars, controls, ...rest }) {
     useSetUserAgent({
         componentName: 'AIConversation',
         packageName: 'react-ai',
@@ -22,53 +22,35 @@ function Provider({ actions, avatars, controls, handleSendMessage, messages, res
     const defaultAvatars = {
         ai: {
             username: 'Assistant',
-            avatar: icons?.assistant ?? React.createElement(IconAssistant, null),
+            avatar: icons?.assistant ?? React.createElement(IconAssistant, { testId: "icon-assistant" }),
         },
         user: {
             username: 'User',
-            avatar: icons?.user ?? React.createElement(IconUser, null),
+            avatar: icons?.user ?? React.createElement(IconUser, { testId: "icon-user" }),
         },
     };
     const providerProps = {
-        messages,
-        handleSendMessage,
+        ...rest,
         avatars: {
             ...defaultAvatars,
             ...avatars,
         },
-        isLoading,
-        elements: {
-            Text,
-        },
-        actions,
-        suggestedPrompts,
-        responseComponents,
-        variant,
         controls: {
             MessageList,
             PromptList,
             Form,
             ...controls,
         },
-        displayText,
-        allowAttachments,
-        messageRenderer,
     };
-    return (React.createElement(AIConversationProvider, { ...providerProps }, children));
-}
-function AIConversationBase(props) {
-    return (React.createElement(Provider, { ...props },
-        React.createElement(Flex, { className: ComponentClassName.AIConversation },
+    return (React.createElement(AIConversationProvider, { ...providerProps },
+        React.createElement(Flex, { className: ComponentClassName.AIConversation, testId: "ai-conversation" },
             React.createElement(ScrollView, { autoScroll: "smooth", flex: "1" },
                 React.createElement(DefaultMessageControl, null),
                 React.createElement(MessagesControl, null)),
             React.createElement(FormControl, null))));
 }
-/**
- * @experimental
- */
 const AIConversation = Object.assign(AIConversationBase, {
-    Provider,
+    Provider: AIConversationProvider,
     DefaultMessage: DefaultMessageControl,
     Messages: MessagesControl,
     Form: FormControl,

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';
@@ -12,30 +12,33 @@ import { ControlsProvider } from './context/ControlsContext.mjs';
 import { LoadingContextProvider } from './context/LoadingContext.mjs';
 import { ResponseComponentsProvider } from './context/ResponseComponentsContext.mjs';
 import { SendMessageContextProvider } from './context/SendMessageContext.mjs';
-import './context/MessageRenderContext.mjs';
+import { MessageRendererProvider } from './context/MessageRenderContext.mjs';
 import { AttachmentProvider } from './context/AttachmentContext.mjs';
 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, responseComponents, suggestedPrompts, variant, welcomeMessage, }) => {
+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(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(LoadingContextProvider, { isLoading: isLoading }, children)))))))))))))));
+    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)))))))))))))))));
 };
 
 export { AIConversationProvider };

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/context/FallbackComponentContext.mjs

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

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

@@ -21,8 +21,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,
@@ -40,4 +44,4 @@ const convertResponseComponentsToToolConfiguration = (responseComponents) => {
     return { tools };
 };
 
-export { RESPONSE_COMPONENT_PREFIX, ResponseComponentsContext, ResponseComponentsProvider, convertResponseComponentsToToolConfiguration };
+export { RESPONSE_COMPONENT_PREFIX, ResponseComponentsContext, ResponseComponentsProvider, convertResponseComponentsToToolConfiguration, prependResponseComponents };

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, } = 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,
@@ -29,6 +25,7 @@ function createAIConversation(input = {}) {
             handleSendMessage,
             isLoading,
             messageRenderer,
+            FallbackResponseComponent,
         };
         return (React__default.createElement(AIConversationProvider, { ...providerProps },
             React__default.createElement(ViewElement, null,

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';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Button, Span, View } = AIConversationElements;
@@ -33,8 +35,7 @@ const Container = withBaseElementProps(View, {
 });
 const ActionsBarControl = ({ message, focusable, }) => {
     const actions = React__default.useContext(ActionsContext);
-    return (React__default.createElement(Container, null, actions?.map((action, index) => (React__default.createElement(ActionButton, { "aria-label": action.displayName, key: index, onClick: () => action.handler(message), tabIndex: focusable ? 0 : -1 },
-        React__default.createElement(ActionIcon, { "data-testid": `action-icon-${action.displayName}` }, action.icon))))));
+    return (React__default.createElement(Container, null, actions?.map((action, index) => (React__default.createElement(ActionButton, { key: index, onClick: () => action.handler(message), tabIndex: focusable ? 0 : -1 }, action.component)))));
 };
 ActionsBarControl.Button = ActionButton;
 ActionsBarControl.Container = Container;

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';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { useDropZone } from '@aws-amplify/ui-react-core';
 

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';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Button, Icon, ListItem, UnorderedList: ListElement, Span, Text, View, } = AIConversationElements;

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

@@ -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';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Icon, Span, Text, View } = AIConversationElements;

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';
@@ -13,6 +14,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import { WelcomeMessageContext } from '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import '../../context/elements/definitions.mjs';
 import { PromptControl } from './PromptControl.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';
@@ -14,10 +15,12 @@ import { SendMessageContext } from '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import { AttachmentContext } from '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 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';
@@ -103,9 +106,12 @@ 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 () => {
         ref.current?.reset();
         const submittedContent = [];
@@ -130,6 +136,7 @@ const FormControl = () => {
         if (handleSendMessage) {
             handleSendMessage({
                 content: submittedContent,
+                aiContext: isFunction(aiContext) ? aiContext() : undefined,
                 toolConfiguration: convertResponseComponentsToToolConfiguration(responseComponents),
             });
         }
@@ -142,7 +149,7 @@ const FormControl = () => {
     };
     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) {
@@ -151,14 +158,14 @@ 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,
         React__default.createElement(InputContainer, null,
             React__default.createElement(VisuallyHidden, null,
                 React__default.createElement(Label, null)),
-            React__default.createElement(TextInput, { onKeyDown: handleOnKeyDown }),
+            React__default.createElement(TextInput, { onKeyDown: handleOnKeyDown, onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false) }),
             React__default.createElement(AttachmentListControl, null)),
         React__default.createElement(SendButton, null,
             React__default.createElement(SendIcon, 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';
@@ -14,66 +16,59 @@ import '../../context/SendMessageContext.mjs';
 import { MessageRendererContext } from '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import { FallbackComponentContext } from '../../context/FallbackComponentContext.mjs';
 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 responseComponents = React__default.useContext(ResponseComponentsContext) ?? {};
+    const FallbackComponent = React__default.useContext(FallbackComponentContext);
     // For now tool use is limited to custom response components
     const { name, input } = toolUse;
-    if (!responseComponents ||
-        !name ||
-        !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
+    if (!name || !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
         return;
     }
     else {
         const response = responseComponents[name];
-        const CustomComponent = response.component;
-        return React__default.createElement(CustomComponent, { ...input });
+        if (response) {
+            const CustomComponent = response.component;
+            return React__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__default.createElement(FallbackComponent, { ...input });
+        }
     }
 };
 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`,
 });
@@ -134,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)));
@@ -146,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';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { View, Button } = AIConversationElements;

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,12 @@ 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 },
         React.createElement(View, { as: "form", className: ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
@@ -52,9 +51,9 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
                                 files: [...(prevValue?.files ?? []), ...Array.from(files)],
                             }));
                         }, multiple: true, accept: "*", "data-testid": "hidden-file-input" })))) : null,
-            React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', testId: "text-input", onKeyDown: (e) => {
+            React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', testId: "text-input", onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false), onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
-                    const shouldSubmit = !e.shiftKey && e.key === 'Enter';
+                    const shouldSubmit = !e.shiftKey && e.key === 'Enter' && !composing;
                     if (shouldSubmit && isHTMLFormElement(e.target)) {
                         e.target.form.requestSubmit();
                         e.preventDefault();

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { View, Avatar, Text } from '@aws-amplify/ui-react';
+import { View, Avatar, Placeholder, Text, Button } from '@aws-amplify/ui-react';
 import { MessageControl } from '../Controls/MessagesControl.mjs';
-import '../../context/ActionsContext.mjs';
+import '../../context/AIContextContext.mjs';
+import { ActionsContext } from '../../context/ActionsContext.mjs';
 import { AvatarsContext } from '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';
 import { RoleContext } from '../../context/MessagesContext.mjs';
@@ -15,9 +16,20 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import '../../context/elements/definitions.mjs';
 import { ComponentClassName, classNames, classNameModifier } from '@aws-amplify/ui';
 
+const PlaceholderMessage = ({ role }) => {
+    const variant = React.useContext(MessageVariantContext);
+    return (React.createElement(View, { className: classNames(ComponentClassName.AIConversationMessage, classNameModifier(ComponentClassName.AIConversationMessage, variant), classNameModifier(ComponentClassName.AIConversationMessage, role)) },
+        React.createElement(View, { className: ComponentClassName.AIConversationMessageAvatar },
+            React.createElement(Avatar, null)),
+        React.createElement(View, { className: ComponentClassName.AIConversationMessageBody },
+            React.createElement(Placeholder, { width: "25%" }),
+            React.createElement(Placeholder, { width: "50%" }),
+            React.createElement(Placeholder, { width: "25%" }))));
+};
 const MessageMeta = ({ message }) => {
     // need to pass this in as props in order for it to be overridable
     const avatars = React.useContext(AvatarsContext);
@@ -29,29 +41,30 @@ const MessageMeta = ({ message }) => {
         React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username),
         React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderTimestamp }, getMessageTimestampText(new Date(message.createdAt)))));
 };
-const LoadingMessage = () => {
-    const avatars = React.useContext(AvatarsContext);
-    const variant = React.useContext(MessageVariantContext);
-    const avatar = avatars?.ai;
-    return (React.createElement(View, { className: classNames(ComponentClassName.AIConversationMessage, classNameModifier(ComponentClassName.AIConversationMessage, variant), classNameModifier(ComponentClassName.AIConversationMessage, 'assistant')) },
-        React.createElement(View, { className: ComponentClassName.AIConversationMessageAvatar },
-            React.createElement(Avatar, { isLoading: true }, avatar?.avatar)),
-        React.createElement(View, { className: ComponentClassName.AIConversationMessageBody },
-            React.createElement(View, { className: ComponentClassName.AIConversationMessageSender },
-                React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username)))));
+const MessageActions = ({ message }) => {
+    const actions = React.useContext(ActionsContext);
+    if (!actions)
+        return null;
+    return (React.createElement(View, { className: ComponentClassName.AIConversationMessageActions }, actions.map((action, i) => {
+        return (React.createElement(Button, { key: i, size: "small", onClick: () => {
+                action.handler(message);
+            } }, action.component));
+    })));
 };
 const Message = ({ message }) => {
     const avatars = React.useContext(AvatarsContext);
     const variant = React.useContext(MessageVariantContext);
+    const { isLoading } = message;
     const avatar = message.role === 'assistant' ? avatars?.ai : avatars?.user;
     return (React.createElement(RoleContext.Provider, { value: message.role },
         React.createElement(View, { className: classNames(ComponentClassName.AIConversationMessage, classNameModifier(ComponentClassName.AIConversationMessage, variant), classNameModifier(ComponentClassName.AIConversationMessage, message.role)) },
             React.createElement(View, { className: ComponentClassName.AIConversationMessageAvatar },
-                React.createElement(Avatar, null, avatar?.avatar)),
+                React.createElement(Avatar, { isLoading: isLoading }, avatar?.avatar)),
             React.createElement(View, { className: ComponentClassName.AIConversationMessageBody },
                 React.createElement(MessageMeta, { message: message }),
                 React.createElement(View, { className: ComponentClassName.AIConversationMessageContent },
-                    React.createElement(MessageControl, { message: message }))))));
+                    React.createElement(MessageControl, { message: message })),
+                message.role === 'assistant' ? (React.createElement(MessageActions, { message: message })) : null))));
 };
 const MessageList = ({ messages, }) => {
     const isLoading = React.useContext(LoadingContext);
@@ -59,8 +72,10 @@ const MessageList = ({ messages, }) => {
         content.text ??
         content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
     return (React.createElement(View, { className: ComponentClassName.AIConversationMessageList },
-        messagesWithRenderableContent.map((message, i) => (React.createElement(Message, { key: `message-${i}`, message: message }))),
-        isLoading ? React.createElement(LoadingMessage, null) : null));
+        isLoading ? (React.createElement(React.Fragment, null,
+            React.createElement(PlaceholderMessage, { role: "user" }),
+            React.createElement(PlaceholderMessage, { role: "assistant" }))) : null,
+        messagesWithRenderableContent.map((message, i) => (React.createElement(Message, { key: `message-${i}`, message: message })))));
 };
 
 export { MessageList };