@aws-amplify/ui-react-ai 0.0.0-storage-browser-alpha-5147028-20240909221818 → 0.0.0-storage-browser-alpha-4edafc6-20241001200620

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

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

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+const AttachmentContext = React.createContext(false);
+const AttachmentProvider = ({ children, allowAttachments, }) => {
+    return (React.createElement(AttachmentContext.Provider, { value: allowAttachments ?? false }, children));
+};
+
+export { AttachmentContext, AttachmentProvider };

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -6,7 +6,13 @@ import { ConversationInputContext } from '../../context/ConversationInputContext
 import '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
+import '../../context/DisplayTextContext.mjs';
+import '../../context/ControlsContext.mjs';
+import '../../context/LoadingContext.mjs';
+import '../../context/ResponseComponentsContext.mjs';
+import '../../context/SendMessageContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
+import { useDropZone } from '@aws-amplify/ui-react-core';
 
 const { Button, Icon, View } = AIConversationElements;
 const ATTACH_FILE_BLOCK = 'ai-attach-file';
@@ -30,6 +36,17 @@ const AttachFileButton = withBaseElementProps(Button, {
 const AttachFileControl = () => {
     const hiddenInput = React__default.useRef(null);
     const { setInput } = React__default.useContext(ConversationInputContext);
+    const { dragState, ...dropHandlers } = useDropZone({
+        acceptedFileTypes: ['.jpeg'],
+        onDropComplete: ({ acceptedFiles }) => {
+            if (acceptedFiles && acceptedFiles?.length > 0 && setInput) {
+                setInput((prevInput) => ({
+                    ...prevInput,
+                    files: [...(prevInput?.files ?? []), ...acceptedFiles],
+                }));
+            }
+        },
+    });
     function handleButtonClick() {
         if (hiddenInput.current) {
             hiddenInput.current.click();
@@ -47,7 +64,7 @@ const AttachFileControl = () => {
             });
         }
     }
-    return (React__default.createElement(AttachFileContainer, null,
+    return (React__default.createElement(AttachFileContainer, { ...dropHandlers },
         React__default.createElement(AttachFileButton, { onClick: handleButtonClick },
             React__default.createElement(AttachFileIcon, null)),
         React__default.createElement(VisuallyHidden, null,

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

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

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

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

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

@@ -6,14 +6,16 @@ import { ConversationInputContext } from '../../context/ConversationInputContext
 import { MessagesContext } from '../../context/MessagesContext.mjs';
 import '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
+import '../../context/DisplayTextContext.mjs';
+import { ControlsContext } from '../../context/ControlsContext.mjs';
+import { LoadingContext } from '../../context/LoadingContext.mjs';
+import { ResponseComponentsContext, convertResponseComponentsToToolConfiguration } from '../../context/ResponseComponentsContext.mjs';
+import { SendMessageContext } from '../../context/SendMessageContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { AttachFileControl } from './AttachFileControl.mjs';
 import { AttachmentListControl } from './AttachmentListControl.mjs';
-import { SendMessageContext } from '../../context/SendMessageContext.mjs';
-import { ResponseComponentsContext, convertResponseComponentsToToolConfiguration } from '../../context/ResponseComponentsContext.mjs';
-import { ControlsContext } from '../../context/ControlsContext.mjs';
 import { getImageTypeFromMimeType } from '../../utils.mjs';
-import { LoadingContext } from '../../context/LoadingContext.mjs';
+import { AttachmentContext } from '../../context/AttachmentContext.mjs';
 
 const { Button, Icon, Label: LabelElement, TextArea, View, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
@@ -98,6 +100,7 @@ const InputContainer = withBaseElementProps(View, {
 const FieldControl = () => {
     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 controls = React__default.useContext(ControlsContext);
@@ -116,7 +119,7 @@ const FieldControl = () => {
                 const fileContent = {
                     image: {
                         format: getImageTypeFromMimeType(file.type),
-                        source: { bytes: Uint8Array.from(Buffer.from(buffer)) },
+                        source: { bytes: new Uint8Array(buffer) },
                     },
                 };
                 submittedContent.push(fileContent);
@@ -146,10 +149,10 @@ const FieldControl = () => {
         }
     };
     if (controls?.Form) {
-        return (React__default.createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput }));
+        return (React__default.createElement(controls.Form, { handleSubmit: handleSubmit, input: input, setInput: setInput, allowAttachments: allowAttachments }));
     }
     return (React__default.createElement("form", { className: `${FIELD_BLOCK}__form`, onSubmit: handleSubmit, method: "post", ref: ref },
-        React__default.createElement(AttachFileControl, null),
+        allowAttachments ? React__default.createElement(AttachFileControl, null) : null,
         React__default.createElement(InputContainer, null,
             React__default.createElement(VisuallyHidden, null,
                 React__default.createElement(Label, null)),

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

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

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

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

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DropZone, View, Button, VisuallyHidden, TextAreaField } from '@aws-amplify/ui-react';
+import { View, Button, VisuallyHidden, TextAreaField, DropZone } from '@aws-amplify/ui-react';
 import { useIcons, IconSend, IconAttach } from '@aws-amplify/ui-react/internal';
 import { ComponentClassName } from '@aws-amplify/ui';
 import { Attachments } from './Attachments.mjs';
@@ -8,22 +8,37 @@ import { LoadingContext } from '../../context/LoadingContext.mjs';
 function isHTMLFormElement(target) {
     return 'form' in target;
 }
-const Form = ({ setInput, input, handleSubmit, }) => {
+/**
+ * Will conditionally render the DropZone if allowAttachments
+ * is true
+ */
+const FormWrapper = ({ children, allowAttachments, setInput, }) => {
+    if (allowAttachments) {
+        return (React.createElement(DropZone, { className: ComponentClassName.AIConversationFormDropzone, onDropComplete: ({ acceptedFiles }) => {
+                setInput?.((prevInput) => ({
+                    ...prevInput,
+                    files: [...(prevInput?.files ?? []), ...acceptedFiles],
+                }));
+            } }, children));
+    }
+    else {
+        return children;
+    }
+};
+const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
     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 isInputEmpty = !input?.text?.length && !input?.files?.length;
-    return (React.createElement(DropZone, { className: ComponentClassName.AIConversationFormDropzone, onDropComplete: ({ acceptedFiles }) => {
-            setInput((prevInput) => ({
-                ...prevInput,
-                files: [...(prevInput?.files ?? []), ...acceptedFiles],
-            }));
-        } },
+    return (React.createElement(FormWrapper, { allowAttachments: allowAttachments, setInput: setInput },
         React.createElement(View, { as: "form", className: ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
-            React.createElement(Button, { className: ComponentClassName.AIConversationFormAttach, onClick: () => {
+            allowAttachments ? (React.createElement(Button, { className: ComponentClassName.AIConversationFormAttach, onClick: () => {
                     hiddenInput?.current?.click();
+                    if (hiddenInput?.current) {
+                        hiddenInput.current.value = '';
+                    }
                 } },
                 React.createElement("span", null, attachIcon),
                 React.createElement(VisuallyHidden, null,
@@ -36,8 +51,8 @@ const Form = ({ setInput, input, handleSubmit, }) => {
                                 ...prevValue,
                                 files: [...(prevValue?.files ?? []), ...Array.from(files)],
                             }));
-                        }, multiple: true, accept: "*" }))),
-            React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', onKeyDown: (e) => {
+                        }, multiple: true, accept: "*", "data-testid": "hidden-file-input" })))) : 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) => {
                     // Submit on enter key if shift is not pressed also
                     const shouldSubmit = !e.shiftKey && e.key === 'Enter';
                     if (shouldSubmit && isHTMLFormElement(e.target)) {

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

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