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

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

@@ -1,71 +1,59 @@
 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 './context/elements/definitions.mjs';
-import './views/Controls/ActionsBarControl.mjs';
-import './views/Controls/AvatarControl.mjs';
-import './views/Controls/HeaderControl.mjs';
-import { FieldControl } from './views/Controls/FieldControl.mjs';
-import { AutoHidablePromptControl } from './views/Controls/PromptControl.mjs';
+import { FormControl } from './views/Controls/FormControl.mjs';
 import { MessageList } from './views/default/MessageList.mjs';
 import { Form } from './views/default/Form.mjs';
 import { PromptList } from './views/default/PromptList.mjs';
 import { ComponentClassName } from '@aws-amplify/ui';
 import { AIConversationProvider } from './AIConversationProvider.mjs';
+import { useSetUserAgent } from '@aws-amplify/ui-react-core';
+import { VERSION } from '../../version.mjs';
+import { DefaultMessageControl } from './views/Controls/DefaultMessageControl.mjs';
 
-function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, allowAttachments, }) {
+function AIConversationBase({ avatars, controls, ...rest }) {
+    useSetUserAgent({
+        componentName: 'AIConversation',
+        packageName: 'react-ai',
+        version: VERSION,
+    });
     const icons = useIcons('aiConversation');
     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: React.forwardRef(function _Text(props, ref) {
-                return React.createElement(Text, { ...props, ref: ref });
-            }),
-        },
-        actions,
-        suggestedPrompts,
-        responseComponents,
-        variant,
         controls: {
             MessageList,
             PromptList,
             Form,
             ...controls,
         },
-        displayText,
-        allowAttachments,
     };
     return (React.createElement(AIConversationProvider, { ...providerProps },
-        React.createElement(Flex, { className: ComponentClassName.AIConversation },
+        React.createElement(Flex, { className: ComponentClassName.AIConversation, testId: "ai-conversation" },
             React.createElement(ScrollView, { autoScroll: "smooth", flex: "1" },
-                React.createElement(AutoHidablePromptControl, null),
+                React.createElement(DefaultMessageControl, null),
                 React.createElement(MessagesControl, null)),
-            React.createElement(FieldControl, null))));
+            React.createElement(FormControl, null))));
 }
-/**
- * @experimental
- */
 const AIConversation = Object.assign(AIConversationBase, {
-    MessageList,
-    PromptList,
-    Form,
+    Provider: AIConversationProvider,
+    DefaultMessage: DefaultMessageControl,
+    Messages: MessagesControl,
+    Form: FormControl,
 });
 
 export { AIConversation };

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,27 +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/elements/definitions.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 = ({ elements, 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__default.createElement(ElementsProvider, { elements: elements },
-        React__default.createElement(ControlsProvider, { controls: controls },
-            React__default.createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
-                React__default.createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                    React__default.createElement(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/MessageRenderContext.mjs

@@ -0,0 +1,9 @@
+import { createContextUtilities } from '@aws-amplify/ui-react-core';
+
+const { MessageRendererContext, MessageRendererProvider, useMessageRenderer, } = createContextUtilities({
+    contextName: 'MessageRenderer',
+    defaultValue: undefined,
+    errorMessage: '`useMessageRenderer` must be used with an AIConversation component',
+});
+
+export { MessageRendererContext, MessageRendererProvider, useMessageRenderer };

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+const WelcomeMessageContext = React.createContext(undefined);
+const WelcomeMessageProvider = ({ children, welcomeMessage, }) => {
+    return (React.createElement(WelcomeMessageContext.Provider, { value: welcomeMessage }, children));
+};
+
+export { WelcomeMessageContext, WelcomeMessageProvider };

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

@@ -1,22 +1,18 @@
 import React__default from 'react';
-import Conversation from './views/ConversationView.mjs';
-import { ActionsBarControl } from './views/Controls/ActionsBarControl.mjs';
-import { AvatarControl } from './views/Controls/AvatarControl.mjs';
-import { HeaderControl } from './views/Controls/HeaderControl.mjs';
-import { FieldControl } from './views/Controls/FieldControl.mjs';
+import './views/Controls/ActionsBarControl.mjs';
+import './views/Controls/AvatarControl.mjs';
+import { FormControl } from './views/Controls/FormControl.mjs';
 import { MessagesControl } from './views/Controls/MessagesControl.mjs';
-import { PromptControl } from './views/Controls/PromptControl.mjs';
+import './views/Controls/PromptControl.mjs';
+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, } = 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,
@@ -28,21 +24,21 @@ function createAIConversation(input = {}) {
             avatars,
             handleSendMessage,
             isLoading,
+            messageRenderer,
+            FallbackResponseComponent,
         };
         return (React__default.createElement(AIConversationProvider, { ...providerProps },
-            React__default.createElement(Conversation, null)));
+            React__default.createElement(ViewElement, null,
+                React__default.createElement(ViewElement, null,
+                    React__default.createElement(DefaultMessageControl, null),
+                    React__default.createElement(MessagesControl, null)),
+                React__default.createElement(ViewElement, null,
+                    React__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 };
 }
 

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';
@@ -11,6 +12,10 @@ import '../../context/ControlsContext.mjs';
 import '../../context/LoadingContext.mjs';
 import '../../context/ResponseComponentsContext.mjs';
 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;
@@ -30,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';
@@ -11,6 +12,10 @@ import '../../context/ControlsContext.mjs';
 import '../../context/LoadingContext.mjs';
 import '../../context/ResponseComponentsContext.mjs';
 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';
@@ -11,6 +12,10 @@ import '../../context/ControlsContext.mjs';
 import '../../context/LoadingContext.mjs';
 import '../../context/ResponseComponentsContext.mjs';
 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';
@@ -11,6 +12,10 @@ import '../../context/ControlsContext.mjs';
 import '../../context/LoadingContext.mjs';
 import '../../context/ResponseComponentsContext.mjs';
 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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import '../../context/AIContextContext.mjs';
+import '../../context/ActionsContext.mjs';
+import '../../context/AvatarsContext.mjs';
+import '../../context/ConversationInputContext.mjs';
+import { MessagesContext } from '../../context/MessagesContext.mjs';
+import '../../context/SuggestedPromptsContext.mjs';
+import '../../context/MessageVariantContext.mjs';
+import '../../context/DisplayTextContext.mjs';
+import '../../context/ControlsContext.mjs';
+import '../../context/LoadingContext.mjs';
+import '../../context/ResponseComponentsContext.mjs';
+import '../../context/SendMessageContext.mjs';
+import '../../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';
+
+const DefaultMessageControl = () => {
+    const messages = React.useContext(MessagesContext);
+    const welcomeMessage = React.useContext(WelcomeMessageContext);
+    if (!messages || messages.length === 0) {
+        return (React.createElement(React.Fragment, null,
+            welcomeMessage,
+            React.createElement(PromptControl, null)));
+    }
+};
+
+export { DefaultMessageControl };

package/dist/esm/components/AIConversation/views/Controls/{FieldControl.mjs → 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';
@@ -11,11 +12,15 @@ import { ControlsContext } from '../../context/ControlsContext.mjs';
 import { LoadingContext } from '../../context/LoadingContext.mjs';
 import { ResponseComponentsContext, convertResponseComponentsToToolConfiguration } from '../../context/ResponseComponentsContext.mjs';
 import { SendMessageContext } from '../../context/SendMessageContext.mjs';
+import '../../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 { AttachmentContext } from '../../context/AttachmentContext.mjs';
+import { isFunction } from '@aws-amplify/ui';
 
 const { Button, Icon, Label: LabelElement, TextArea, View, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
@@ -97,13 +102,16 @@ const TextInput = React__default.forwardRef(function TextInput(props, ref) {
 const InputContainer = withBaseElementProps(View, {
     className: `${FIELD_BLOCK}__input-container`,
 });
-const FieldControl = () => {
+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 = [];
@@ -128,6 +136,7 @@ const FieldControl = () => {
         if (handleSendMessage) {
             handleSendMessage({
                 content: submittedContent,
+                aiContext: isFunction(aiContext) ? aiContext() : undefined,
                 toolConfiguration: convertResponseComponentsToToolConfiguration(responseComponents),
             });
         }
@@ -140,7 +149,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) {
@@ -149,23 +158,23 @@ const FieldControl = () => {
         }
     };
     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))));
 };
-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;
 
-export { FieldControl };
+export { FormControl };

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';
@@ -9,64 +11,64 @@ import { MessageVariantContext } from '../../context/MessageVariantContext.mjs';
 import { useConversationDisplayText } from '../../context/DisplayTextContext.mjs';
 import { ControlsContext } from '../../context/ControlsContext.mjs';
 import '../../context/LoadingContext.mjs';
-import { ResponseComponentsContext, RESPONSE_COMPONENT_PREFIX } from '../../context/ResponseComponentsContext.mjs';
+import { RESPONSE_COMPONENT_PREFIX, ResponseComponentsContext } from '../../context/ResponseComponentsContext.mjs';
 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 FallbackComponent = React__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__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 responseComponents = React__default.useContext(ResponseComponentsContext);
-    return (React__default.createElement(ContentContainer, null, message.content.map((content, index) => {
+    const messageRenderer = React__default.useContext(MessageRendererContext);
+    return (React__default.createElement(React__default.Fragment, null, message.content.map((content, index) => {
         if (content.text) {
-            return (React__default.createElement(TextContent, { "data-testid": 'text-content', key: index }, 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 (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) {
-            // 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__default.createElement(CustomComponent, { ...input, key: index });
-            }
+            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`,
 });
@@ -83,7 +85,7 @@ const Layout = React__default.forwardRef(function Layout(props, ref) {
     const variant = React__default.useContext(MessageVariantContext);
     return (React__default.createElement(View, { ref: ref, className: `${MESSAGES_BLOCK}__container ${MESSAGES_BLOCK}__container--${variant}`, "aria-live": 'assertive', ...props }));
 });
-const MessagesControl = ({ renderMessage }) => {
+const MessagesControl = () => {
     const messages = React__default.useContext(MessagesContext);
     const controls = React__default.useContext(ControlsContext);
     const { getMessageTimestampText } = useConversationDisplayText();
@@ -123,11 +125,10 @@ const MessagesControl = ({ renderMessage }) => {
         content.text ??
         content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
     return (React__default.createElement(Layout, null, messagesWithRenderableContent?.map((message, index) => {
-        return renderMessage ? (renderMessage(message)) : (React__default.createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
+        return (React__default.createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
             React__default.createElement(MessageContainer, { "data-testid": `message`, key: `message-${index}`, tabIndex: focusedItemIndex === index ? 0 : -1, onFocus: () => handleFocus(index), onKeyDown: (event) => onKeyDown(index, event), ref: (el) => (messagesRef.current[index] = el) },
                 React__default.createElement(HeaderContainer, null,
                     React__default.createElement(AvatarControl, null),
-                    React__default.createElement(Separator, null),
                     React__default.createElement(Timestamp, null, getMessageTimestampText(new Date(message.createdAt)))),
                 React__default.createElement(MessageControl, { message: message }),
                 message.role === 'assistant' ? (React__default.createElement(ActionsBarControl, { message: message, focusable: focusedItemIndex === index })) : null)));
@@ -139,6 +140,5 @@ MessagesControl.Container = MessageContainer;
 MessagesControl.HeaderContainer = HeaderContainer;
 MessagesControl.Layout = Layout;
 MessagesControl.Message = MessageControl;
-MessagesControl.Separator = Separator;
 
 export { MessageControl, MessagesControl };