@aws-amplify/ui-react-ai 0.1.0 → 0.1.1

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, }) {
     const icons = useIcons('aiConversation');
     const defaultAvatars = {
         ai: {
@@ -42,6 +42,7 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
             Form,
             ...controls,
         },
+        displayText,
     });
     const providerProps = {
         messages,

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/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, } = input;
     const Provider = createProvider({
         elements,
         actions,
@@ -20,6 +20,7 @@ function createAIConversation(input = {}) {
         responseComponents,
         variant,
         controls,
+        displayText,
     });
     function AIConversation(props) {
         const { messages, avatars, handleSendMessage, isLoading } = props;

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

@@ -1,29 +1,37 @@
 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';
 
-function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, }) {
+function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, displayText, }) {
     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(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,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, View } = AIConversationElements;

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,15 @@ 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';
 
 const { Button, Icon, Label: LabelElement, TextArea, View, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
@@ -116,7 +117,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);

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 } 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';
@@ -81,6 +84,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);
@@ -119,7 +123,7 @@ const MessagesControl = ({ renderMessage }) => {
                 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/MessageList.mjs

@@ -7,19 +7,24 @@ 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 '../../context/LoadingContext.mjs';
+import '../../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 Message = ({ message }) => {
     const avatars = React.useContext(AvatarsContext);

package/dist/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var elements = require('@aws-amplify/ui-react-core/elements');
+var uiReactCore = require('@aws-amplify/ui-react-core');
 var ui = require('@aws-amplify/ui');
 var uiReact = require('@aws-amplify/ui-react');
 var internal = require('@aws-amplify/ui-react/internal');
-var uiReactCore = require('@aws-amplify/ui-react-core');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -154,6 +154,100 @@ const MessageVariantProvider = ({ children, variant, }) => {
     return (React__default["default"].createElement(MessageVariantContext.Provider, { value: variant }, children));
 };
 
+function formatDate(date) {
+    const dateString = date.toLocaleDateString('en-US', {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+    });
+    const timeString = date.toLocaleTimeString('en-US', {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+    });
+    return `${dateString} at ${timeString}`;
+}
+function arrayBufferToBase64(buffer) {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+function convertBufferToBase64(buffer, format) {
+    let base64string = '';
+    // Use node-based buffer if available
+    // fall back on browser if not
+    if (typeof Buffer !== 'undefined') {
+        base64string = Buffer.from(new Uint8Array(buffer)).toString('base64');
+    }
+    else {
+        base64string = arrayBufferToBase64(buffer);
+    }
+    return `data:image/${format};base64,${base64string}`;
+}
+function getImageTypeFromMimeType(mimeType) {
+    return mimeType.split('/')[1];
+}
+
+const defaultAIConversationDisplayTextEn = {
+    getMessageTimestampText: (date) => formatDate(date),
+};
+
+const { ConversationDisplayTextContext, ConversationDisplayTextProvider, useConversationDisplayText, } = uiReactCore.createContextUtilities({
+    contextName: 'ConversationDisplayText',
+    defaultValue: defaultAIConversationDisplayTextEn,
+});
+
+const ControlsContext = React__default["default"].createContext(undefined);
+const ControlsProvider = ({ children, controls, }) => {
+    return (React__default["default"].createElement(ControlsContext.Provider, { value: controls }, children));
+};
+
+const LoadingContext = React__default["default"].createContext(undefined);
+const LoadingContextProvider = ({ children, isLoading, }) => {
+    return (React__default["default"].createElement(LoadingContext.Provider, { value: isLoading }, children));
+};
+
+const ResponseComponentsContext = React__default["default"].createContext(undefined);
+const ResponseComponentsProvider = ({ children, responseComponents, }) => {
+    return (React__default["default"].createElement(ResponseComponentsContext.Provider, { value: responseComponents }, children));
+};
+const convertResponseComponentsToToolConfiguration = (responseComponents) => {
+    if (!responseComponents) {
+        return;
+    }
+    const tools = {};
+    Object.keys(responseComponents).forEach((toolName) => {
+        const { props } = responseComponents[toolName];
+        const requiredProps = [];
+        Object.keys(props).forEach((propName) => {
+            if (props[propName].required)
+                requiredProps.push(propName);
+        });
+        tools[toolName] = {
+            description: responseComponents[toolName].description,
+            inputSchema: {
+                json: {
+                    type: 'object',
+                    required: requiredProps,
+                    properties: {
+                        ...props,
+                    },
+                },
+            },
+        };
+    });
+    return { tools };
+};
+
+const SendMessageContext = React__default["default"].createContext(undefined);
+const SendMessageContextProvider = ({ children, handleSendMessage, }) => {
+    return (React__default["default"].createElement(SendMessageContext.Provider, { value: handleSendMessage }, children));
+};
+
 const { Button: Button$5, Span: Span$3, View: View$7 } = AIConversationElements;
 const ACTIONS_BAR_BLOCK = 'ai-actions-bar';
 const ActionIcon = elements.withBaseElementProps(Span$3, {
@@ -370,91 +464,6 @@ const AttachmentListControl = () => {
 AttachmentListControl.List = UnorderedList;
 AttachmentListControl.Item = AttachmentControl;
 
-const SendMessageContext = React__default["default"].createContext(undefined);
-const SendMessageContextProvider = ({ children, handleSendMessage, }) => {
-    return (React__default["default"].createElement(SendMessageContext.Provider, { value: handleSendMessage }, children));
-};
-
-const ResponseComponentsContext = React__default["default"].createContext(undefined);
-const ResponseComponentsProvider = ({ children, responseComponents, }) => {
-    return (React__default["default"].createElement(ResponseComponentsContext.Provider, { value: responseComponents }, children));
-};
-const convertResponseComponentsToToolConfiguration = (responseComponents) => {
-    if (!responseComponents) {
-        return;
-    }
-    const tools = {};
-    Object.keys(responseComponents).forEach((toolName) => {
-        const { props } = responseComponents[toolName];
-        const requiredProps = [];
-        Object.keys(props).forEach((propName) => {
-            if (props[propName].required)
-                requiredProps.push(propName);
-        });
-        tools[toolName] = {
-            description: responseComponents[toolName].description,
-            inputSchema: {
-                json: {
-                    type: 'object',
-                    required: requiredProps,
-                    properties: {
-                        ...props,
-                    },
-                },
-            },
-        };
-    });
-    return { tools };
-};
-
-const ControlsContext = React__default["default"].createContext(undefined);
-const ControlsProvider = ({ children, controls, }) => {
-    return (React__default["default"].createElement(ControlsContext.Provider, { value: controls }, children));
-};
-
-function formatDate(date) {
-    const dateString = date.toLocaleDateString('en-US', {
-        weekday: 'short',
-        month: 'short',
-        day: 'numeric',
-    });
-    const timeString = date.toLocaleTimeString('en-US', {
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: true,
-    });
-    return `${dateString} at ${timeString}`;
-}
-function arrayBufferToBase64(buffer) {
-    let binary = '';
-    const bytes = new Uint8Array(buffer);
-    const len = bytes.byteLength;
-    for (let i = 0; i < len; i++) {
-        binary += String.fromCharCode(bytes[i]);
-    }
-    return window.btoa(binary);
-}
-function convertBufferToBase64(buffer, format) {
-    let base64string = '';
-    // Use node-based buffer if available
-    // fall back on browser if not
-    if (typeof Buffer !== 'undefined') {
-        base64string = Buffer.from(new Uint8Array(buffer)).toString('base64');
-    }
-    else {
-        base64string = arrayBufferToBase64(buffer);
-    }
-    return `data:image/${format};base64,${base64string}`;
-}
-function getImageTypeFromMimeType(mimeType) {
-    return mimeType.split('/')[1];
-}
-
-const LoadingContext = React__default["default"].createContext(undefined);
-const LoadingContextProvider = ({ children, isLoading, }) => {
-    return (React__default["default"].createElement(LoadingContext.Provider, { value: isLoading }, children));
-};
-
 const { Button: Button$1, Icon: Icon$1, Label: LabelElement, TextArea, View: View$2, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
 const SendIcon = elements.withBaseElementProps(Icon$1, {
@@ -556,7 +565,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);
@@ -673,6 +682,7 @@ const Layout = React__default["default"].forwardRef(function Layout(props, ref)
 const MessagesControl = ({ renderMessage }) => {
     const messages = React__default["default"].useContext(MessagesContext);
     const controls = React__default["default"].useContext(ControlsContext);
+    const { getMessageTimestampText } = useConversationDisplayText();
     const messagesRef = React__default["default"].useRef([]);
     const [focusedItemIndex, setFocusedItemIndex] = React__default["default"].useState(messages ? messages.length - 1 : 0);
     const handleFocus = (index) => setFocusedItemIndex(index);
@@ -711,7 +721,7 @@ const MessagesControl = ({ renderMessage }) => {
                 React__default["default"].createElement(HeaderContainer, null,
                     React__default["default"].createElement(AvatarControl, null),
                     React__default["default"].createElement(Separator, null),
-                    React__default["default"].createElement(Timestamp, null, formatDate(new Date(message.createdAt)))),
+                    React__default["default"].createElement(Timestamp, null, getMessageTimestampText(new Date(message.createdAt)))),
                 React__default["default"].createElement(MessageControl, { message: message }),
                 message.role === 'assistant' ? (React__default["default"].createElement(ActionsBarControl, { message: message, focusable: focusedItemIndex === index })) : null)));
     })));
@@ -807,19 +817,24 @@ function Conversation() {
             React__default["default"].createElement(FieldControl, null))));
 }
 
-function createProvider({ elements: elements$1, actions, suggestedPrompts, responseComponents, variant, controls, }) {
+function createProvider({ elements: elements$1, actions, suggestedPrompts, responseComponents, variant, controls, displayText, }) {
     return function Provider({ children, messages, avatars, handleSendMessage, isLoading, }) {
+        const _displayText = {
+            ...defaultAIConversationDisplayTextEn,
+            ...displayText,
+        };
         return (React__default["default"].createElement(elements.ElementsProvider, { elements: elements$1 },
             React__default["default"].createElement(ControlsProvider, { controls: controls },
                 React__default["default"].createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
                     React__default["default"].createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                        React__default["default"].createElement(ConversationInputContextProvider, null,
-                            React__default["default"].createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
-                                React__default["default"].createElement(AvatarsProvider, { avatars: avatars },
-                                    React__default["default"].createElement(ActionsProvider, { actions: actions },
-                                        React__default["default"].createElement(MessageVariantProvider, { variant: variant },
-                                            React__default["default"].createElement(MessagesProvider, { messages: messages },
-                                                React__default["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children))))))))))));
+                        React__default["default"].createElement(ConversationDisplayTextProvider, { ..._displayText },
+                            React__default["default"].createElement(ConversationInputContextProvider, null,
+                                React__default["default"].createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
+                                    React__default["default"].createElement(AvatarsProvider, { avatars: avatars },
+                                        React__default["default"].createElement(ActionsProvider, { actions: actions },
+                                            React__default["default"].createElement(MessageVariantProvider, { variant: variant },
+                                                React__default["default"].createElement(MessagesProvider, { messages: messages },
+                                                    React__default["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children)))))))))))));
     };
 }
 
@@ -827,7 +842,7 @@ function createProvider({ elements: elements$1, actions, suggestedPrompts, respo
  * @experimental
  */
 function createAIConversation(input = {}) {
-    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, } = input;
+    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, } = input;
     const Provider = createProvider({
         elements,
         actions,
@@ -835,6 +850,7 @@ function createAIConversation(input = {}) {
         responseComponents,
         variant,
         controls,
+        displayText,
     });
     function AIConversation(props) {
         const { messages, avatars, handleSendMessage, isLoading } = props;
@@ -859,11 +875,12 @@ const MessageMeta = ({ message }) => {
     // need to pass this in as props in order for it to be overridable
     const avatars = React__namespace.useContext(AvatarsContext);
     const role = React__namespace.useContext(RoleContext);
+    const { getMessageTimestampText } = useConversationDisplayText();
     // maybe rename 'avatar' to something else
     const avatar = role === 'assistant' ? avatars?.ai : avatars?.user;
     return (React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageSender },
         React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username),
-        React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderTimestamp }, formatDate(new Date(message.createdAt)))));
+        React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderTimestamp }, getMessageTimestampText(new Date(message.createdAt)))));
 };
 const Message = ({ message }) => {
     const avatars = React__namespace.useContext(AvatarsContext);
@@ -969,7 +986,7 @@ const PromptList = ({ setInput, suggestedPrompts = [], }) => {
     })));
 };
 
-function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, }) {
+function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, }) {
     const icons = internal.useIcons('aiConversation');
     const defaultAvatars = {
         ai: {
@@ -997,6 +1014,7 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
             Form,
             ...controls,
         },
+        displayText,
     });
     const providerProps = {
         messages,

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { AIConversationInput, AIConversationProps } from './types';
 interface AIConversationBaseProps extends AIConversationProps, AIConversationInput {
 }
-declare function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, }: AIConversationBaseProps): JSX.Element;
+declare function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, }: AIConversationBaseProps): JSX.Element;
 /**
  * @experimental
  */
@@ -12,7 +12,7 @@ export declare const AIConversation: typeof AIConversationBase & {
     }> | undefined;
     PromptList: React.ComponentType<{
         suggestedPrompts?: import("./types").SuggestedPrompt[] | undefined;
-        setInput: React.Dispatch<React.SetStateAction<import("./context/ConversationInputContext").ConversationInput | undefined>> | undefined;
+        setInput: React.Dispatch<React.SetStateAction<import("./context").ConversationInput | undefined>> | undefined;
     }> | undefined;
     Form: React.ComponentType<{
         handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ConversationDisplayText } from '../displayText';
+export declare const ConversationDisplayTextContext: import("react").Context<Required<ConversationDisplayText> | undefined>, ConversationDisplayTextProvider: import("react").ComponentType<import("react").PropsWithChildren<Required<ConversationDisplayText>>>, useConversationDisplayText: (params?: {
+    errorMessage?: string | undefined;
+} | undefined) => Required<ConversationDisplayText>;

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

@@ -1,8 +1,12 @@
-import { ActionsContext } from './ActionsContext';
-import { AvatarsContext } from './AvatarsContext';
-import { ConversationInputContext } from './ConversationInputContext';
-import { MessagesContext, RoleContext } from './MessagesContext';
-import { SuggestedPromptsContext } from './SuggestedPromptsContext';
-import { MessageVariantContext } from './MessageVariantContext';
-export { ActionsContext, AvatarsContext, ConversationInputContext, MessagesContext, RoleContext, SuggestedPromptsContext, MessageVariantContext, };
+export { ActionsContext, ActionsProvider } from './ActionsContext';
+export { AvatarsContext, AvatarsProvider } from './AvatarsContext';
+export { ConversationInputContext, ConversationInput, ConversationInputContextProvider, } from './ConversationInputContext';
+export { MessagesContext, RoleContext, MessagesProvider, } from './MessagesContext';
+export { SuggestedPromptsContext, SuggestedPromptProvider, } from './SuggestedPromptsContext';
+export { MessageVariantContext, MessageVariantProvider, } from './MessageVariantContext';
+export { ConversationDisplayTextContext, useConversationDisplayText, ConversationDisplayTextProvider, } from './DisplayTextContext';
+export { ControlsContext, ControlsContextProps, ControlsProvider, } from './ControlsContext';
+export { LoadingContextProvider } from './LoadingContext';
+export { ResponseComponentsProvider } from './ResponseComponentsContext';
+export { SendMessageContextProvider } from './SendMessageContext';
 export * from './elements';

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { AIConversationInput, AIConversationProps } from './types';
-export default function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, }: Pick<AIConversationInput, 'elements' | 'actions' | 'suggestedPrompts' | 'responseComponents' | 'variant' | 'controls'>): ({ children, messages, avatars, handleSendMessage, isLoading, }: {
+export default function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, displayText, }: Pick<AIConversationInput, 'elements' | 'actions' | 'suggestedPrompts' | 'responseComponents' | 'variant' | 'controls' | 'displayText'>): ({ children, messages, avatars, handleSendMessage, isLoading, }: {
     children?: React.ReactNode;
-} & Pick<AIConversationProps, "avatars" | "messages" | "handleSendMessage" | "isLoading">) => React.JSX.Element;
+} & Pick<AIConversationProps, "avatars" | "messages" | "isLoading" | "handleSendMessage">) => React.JSX.Element;

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

@@ -1,6 +1,6 @@
 import { DisplayTextTemplate } from '@aws-amplify/ui';
 export type ConversationDisplayText = {
-    conversationHeaderText?: string;
+    getMessageTimestampText?: (date: Date) => string;
 };
-export declare const defaultAIConversationDisplayText: Required<AIConversationDisplayText>;
+export declare const defaultAIConversationDisplayTextEn: Required<AIConversationDisplayText>;
 export type AIConversationDisplayText = DisplayTextTemplate<ConversationDisplayText>;

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

@@ -1,3 +1,4 @@
 import { createAIConversation } from './createAIConversation';
 import { AIConversation } from './AIConversation';
-export { createAIConversation, AIConversation };
+import { Avatars, CustomAction, ResponseComponent, SuggestedPrompt } from './types';
+export { createAIConversation, AIConversation, Avatars, CustomAction, ResponseComponent, SuggestedPrompt, };

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-import { createAIConversation, AIConversation } from './components';
-import { createAIHooks, AIContextProvider } from './hooks';
-export { createAIConversation, createAIHooks, AIContextProvider, AIConversation, };
+export { createAIConversation, AIConversation, Avatars, CustomAction, ResponseComponent, SuggestedPrompt, } from './components';
+export { createAIHooks, AIContextProvider } from './hooks';
+export { ConversationMessage, ConversationMessageContent, SendMessage, SendMesageParameters, } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-ai",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -47,9 +47,9 @@
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "^6.4.0",
-    "@aws-amplify/ui-react": "^6.3.0",
-    "@aws-amplify/ui-react-core": "^3.0.21"
+    "@aws-amplify/ui": "^6.4.1",
+    "@aws-amplify/ui-react": "^6.3.1",
+    "@aws-amplify/ui-react-core": "^3.0.22"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^22.0.1",