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

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

@@ -2,19 +2,22 @@ import * as React from 'react';
 import { Text, 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 createProvider from './createProvider.mjs';
+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 Provider({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, allowAttachments, messageRenderer, children, }) {
+    useSetUserAgent({
+        componentName: 'AIConversation',
+        packageName: 'react-ai',
+        version: VERSION,
+    });
     const icons = useIcons('aiConversation');
     const defaultAvatars = {
         ai: {
@@ -26,11 +29,16 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
             avatar: icons?.user ?? React.createElement(IconUser, null),
         },
     };
-    const Provider = createProvider({
+    const providerProps = {
+        messages,
+        handleSendMessage,
+        avatars: {
+            ...defaultAvatars,
+            ...avatars,
+        },
+        isLoading,
         elements: {
-            Text: React.forwardRef(function _Text(props, ref) {
-                return React.createElement(Text, { ...props, ref: ref });
-            }),
+            Text,
         },
         actions,
         suggestedPrompts,
@@ -44,30 +52,26 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
         },
         displayText,
         allowAttachments,
-    });
-    const providerProps = {
-        messages,
-        handleSendMessage,
-        avatars: {
-            ...defaultAvatars,
-            ...avatars,
-        },
-        isLoading,
+        messageRenderer,
     };
-    return (React.createElement(Provider, { ...providerProps },
+    return (React.createElement(AIConversationProvider, { ...providerProps }, children));
+}
+function AIConversationBase(props) {
+    return (React.createElement(Provider, { ...props },
         React.createElement(Flex, { className: ComponentClassName.AIConversation },
             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,
+    DefaultMessage: DefaultMessageControl,
+    Messages: MessagesControl,
+    Form: FormControl,
 });
 
 export { AIConversation };

package/dist/esm/components/AIConversation/{createProvider.mjs → AIConversationProvider.mjs}

@@ -12,18 +12,20 @@ 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 './context/MessageRenderContext.mjs';
 import { AttachmentProvider } from './context/AttachmentContext.mjs';
+import { WelcomeMessageProvider } from './context/WelcomeMessageContext.mjs';
+import './context/elements/definitions.mjs';
 
-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 },
+const AIConversationProvider = ({ actions, allowAttachments, avatars, children, controls, displayText, elements, handleSendMessage, isLoading, messages, responseComponents, suggestedPrompts, variant, welcomeMessage, }) => {
+    const _displayText = {
+        ...defaultAIConversationDisplayTextEn,
+        ...displayText,
+    };
+    return (React__default.createElement(ElementsProvider, { elements: elements },
+        React__default.createElement(ControlsProvider, { controls: controls },
+            React__default.createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
+                React__default.createElement(WelcomeMessageProvider, { welcomeMessage: welcomeMessage },
                     React__default.createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
                         React__default.createElement(AttachmentProvider, { allowAttachments: allowAttachments },
                             React__default.createElement(ConversationDisplayTextProvider, { ..._displayText },
@@ -33,8 +35,7 @@ function createProvider({ elements, actions, suggestedPrompts, responseComponent
                                             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(LoadingContextProvider, { isLoading: isLoading }, children)))))))))))))));
+};
 
-export { createProvider as default };
+export { AIConversationProvider };

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/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,44 +1,47 @@
 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 createProvider from './createProvider.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 Provider = createProvider({
-        elements,
-        actions,
-        suggestedPrompts,
-        responseComponents,
-        variant,
-        controls,
-        displayText,
-        allowAttachments,
-    });
+    const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, allowAttachments, messageRenderer, } = input;
     function AIConversation(props) {
         const { messages, avatars, handleSendMessage, isLoading } = props;
-        return (React__default.createElement(Provider, { messages: messages, avatars: avatars, handleSendMessage: handleSendMessage, isLoading: isLoading },
-            React__default.createElement(Conversation, null)));
+        const providerProps = {
+            elements,
+            actions,
+            suggestedPrompts,
+            responseComponents,
+            variant,
+            controls,
+            displayText,
+            allowAttachments,
+            messages,
+            avatars,
+            handleSendMessage,
+            isLoading,
+            messageRenderer,
+        };
+        return (React__default.createElement(AIConversationProvider, { ...providerProps },
+            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 = Provider;
-    AIConversation.Conversation = Conversation;
-    AIConversation.Controls = Controls;
+    AIConversation.Provider = AIConversationProvider;
+    AIConversation.DefaultMessage = DefaultMessageControl;
+    AIConversation.Messages = MessagesControl;
+    AIConversation.Form = FormControl;
     return { AIConversation };
 }
 

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

@@ -11,6 +11,9 @@ 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 { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Button, Span, View } = AIConversationElements;

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

@@ -11,6 +11,9 @@ 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 { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { useDropZone } from '@aws-amplify/ui-react-core';
 

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

@@ -11,6 +11,9 @@ 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 { 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

@@ -11,6 +11,9 @@ 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 { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { Icon, Span, Text, View } = AIConversationElements;

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+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/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}

@@ -11,11 +11,13 @@ 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 { 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';
 
 const { Button, Icon, Label: LabelElement, TextArea, View, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
@@ -97,7 +99,7 @@ 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);
@@ -161,11 +163,11 @@ const FieldControl = () => {
         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

@@ -9,8 +9,11 @@ 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 { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { convertBufferToBase64 } from '../../utils.mjs';
 import { ActionsBarControl } from './ActionsBarControl.mjs';
@@ -34,28 +37,32 @@ const ContentContainer = React__default.forwardRef(function ContentContainer(pro
     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 MessageControl = ({ message }) => {
+const ToolContent = ({ toolUse, }) => {
     const responseComponents = React__default.useContext(ResponseComponentsContext);
+    // For now tool use is limited to custom response components
+    const { name, input } = 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 });
+    }
+};
+const MessageControl = ({ message }) => {
+    const messageRenderer = React__default.useContext(MessageRendererContext);
     return (React__default.createElement(ContentContainer, 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, 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 });
         }
     })));
 };
@@ -83,7 +90,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,7 +130,7 @@ 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),

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

@@ -3,7 +3,7 @@ import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import { ConversationInputContext } from '../../context/ConversationInputContext.mjs';
-import { MessagesContext } from '../../context/MessagesContext.mjs';
+import '../../context/MessagesContext.mjs';
 import { SuggestedPromptsContext } from '../../context/SuggestedPromptsContext.mjs';
 import '../../context/MessageVariantContext.mjs';
 import '../../context/DisplayTextContext.mjs';
@@ -11,10 +11,12 @@ import { ControlsContext } from '../../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 { AIConversationElements } from '../../context/elements/definitions.mjs';
-import { classNames } from '@aws-amplify/ui';
 
-const { View, Button, Text, Heading, Icon } = AIConversationElements;
+const { View, Button } = AIConversationElements;
 const PROMPT_BLOCK = 'ai-prompts';
 const PROMPT_CONTROL = `${PROMPT_BLOCK}__prompt`;
 const PROMPT_CARD = `${PROMPT_CONTROL}__card`;
@@ -22,25 +24,6 @@ const PromptCard = withBaseElementProps(Button, {
     className: PROMPT_CARD,
     type: 'button',
 });
-const AIIconProps = () => ({
-    children: (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement("path", { d: "M17.5 1.64858C19.047 0.755412 20.953 0.755412 22.5 1.64858L34.6428 8.65923C36.1898 9.55239 37.1428 11.203 37.1428 12.9894V27.0107C37.1428 28.797 36.1898 30.4476 34.6428 31.3408L22.5 38.3514C20.953 39.2446 19.047 39.2446 17.5 38.3514L5.35718 31.3408C3.81017 30.4476 2.85718 28.797 2.85718 27.0107V12.9894C2.85718 11.203 3.81017 9.55239 5.35718 8.65923L17.5 1.64858Z", fill: "white" }),
-        React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M22.5 1.64851C20.953 0.755347 19.047 0.755347 17.5 1.64851L5.35718 8.65916C3.81017 9.55233 2.85718 11.203 2.85718 12.9893V27.0106C2.85718 28.7969 3.81017 30.4476 5.35718 31.3407L17.5 38.3514C19.047 39.2445 20.953 39.2445 22.5 38.3514L34.6428 31.3407C36.1898 30.4476 37.1428 28.7969 37.1428 27.0106V12.9893C37.1428 11.203 36.1898 9.55233 34.6428 8.65916L22.5 1.64851ZM20.9378 8.01826C20.6156 7.14764 19.3843 7.14764 19.0621 8.01825L16.2388 15.648C16.1375 15.9217 15.9217 16.1375 15.648 16.2388L8.01826 19.0621C7.14765 19.3842 7.14765 20.6156 8.01826 20.9378L15.648 23.7611C15.9217 23.8623 16.1375 24.0782 16.2388 24.3519L19.0621 31.9816C19.3843 32.8522 20.6156 32.8522 20.9378 31.9816L23.7611 24.3519C23.8624 24.0782 24.0782 23.8623 24.3519 23.7611L31.9816 20.9378C32.8523 20.6156 32.8523 19.3842 31.9816 19.0621L24.3519 16.2388C24.0782 16.1375 23.8624 15.9217 23.7611 15.648L20.9378 8.01826Z", fill: "url(#paint0_linear_395_1815)" }),
-        React__default.createElement("defs", null,
-            React__default.createElement("linearGradient", { id: "paint0_linear_395_1815", x1: "20", y1: "0.978638", x2: "20", y2: "39.0213", gradientUnits: "userSpaceOnUse" },
-                React__default.createElement("stop", { stopColor: "#7DD6E8" }),
-                React__default.createElement("stop", { offset: "1", stopColor: "#BF40BF" }))))),
-    className: `${PROMPT_CONTROL}__icon`,
-    width: '40',
-    height: '40',
-    viewBox: '0 0 40 40',
-    fill: 'none',
-    xmlns: 'http://www.w3.org/2000/svg',
-});
-const AIIcon = withBaseElementProps(Icon, AIIconProps);
-const HeaderText = withBaseElementProps(Heading, {
-    className: `${PROMPT_CONTROL}__header`,
-});
 const PromptGroupBase = withBaseElementProps(View, {
     className: `${PROMPT_CONTROL}__buttongroup`,
 });
@@ -55,9 +38,7 @@ const PromptGroup = React__default.forwardRef(function ButtonGroup(props, ref) {
                 setInput((prevInput) => ({
                     ...prevInput,
                     text: prompt.inputText,
-                })) },
-            React__default.createElement(Text, { className: classNames(`${PROMPT_CARD}__header`, `${PROMPT_CARD}__text`) }, prompt.header),
-            React__default.createElement(Text, { className: `${PROMPT_CARD}__text` }, prompt.inputText)));
+                })) }, prompt.component));
     })));
 });
 const Container = withBaseElementProps(View, {
@@ -71,20 +52,10 @@ const PromptControl = () => {
         return (React__default.createElement(controls.PromptList, { setInput: setInput, suggestedPrompts: suggestedPromptsArray }));
     }
     return (React__default.createElement(Container, null,
-        React__default.createElement(AIIcon, null),
-        React__default.createElement(HeaderText, null, "How can I help you today?"),
         React__default.createElement(PromptGroup, null)));
 };
-const AutoHidablePromptControl = () => {
-    const messages = React__default.useContext(MessagesContext);
-    if (!messages || messages.length === 0) {
-        return React__default.createElement(PromptControl, null);
-    }
-};
 PromptControl.Container = Container;
-PromptControl.Header = HeaderText;
-PromptControl.Icon = AIIcon;
 PromptControl.PromptGroup = PromptGroup;
 PromptControl.PromptCard = PromptCard;
 
-export { AutoHidablePromptControl, PromptControl };
+export { PromptControl };

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

@@ -12,6 +12,9 @@ import '../../context/ControlsContext.mjs';
 import { LoadingContext } from '../../context/LoadingContext.mjs';
 import { RESPONSE_COMPONENT_PREFIX } from '../../context/ResponseComponentsContext.mjs';
 import '../../context/SendMessageContext.mjs';
+import '../../context/MessageRenderContext.mjs';
+import '../../context/AttachmentContext.mjs';
+import '../../context/WelcomeMessageContext.mjs';
 import '../../context/elements/definitions.mjs';
 import { ComponentClassName, classNames, classNameModifier } from '@aws-amplify/ui';
 

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

@@ -9,7 +9,7 @@ const PromptList = ({ setInput, suggestedPrompts = [], }) => {
                     ...prevInput,
                     text: prompt.inputText,
                 }));
-            } }, prompt.header));
+            } }, prompt.component));
     })));
 };
 

package/dist/esm/hooks/useAIGeneration.mjs

@@ -1,21 +1,35 @@
-import { useDataState } from '@aws-amplify/ui-react-core';
+import * as React from 'react';
 
+// default state
+const INITIAL_STATE = {
+    hasError: false,
+    isLoading: false,
+    messages: undefined,
+};
+const LOADING_STATE = { hasError: false, isLoading: true, messages: undefined };
+const ERROR_STATE = { hasError: true, isLoading: false };
 function createUseAIGeneration(client) {
     const useAIGeneration = (routeName) => {
-        const handleGenerate = client.generations[routeName];
-        const updateAIGenerationStateAction = async (_prev, input) => {
-            const result = await handleGenerate(input);
-            // handleGenerate returns a Promised wrapper around Schema[Key]['returnType'] which includes data, errors, and clientExtensions
-            // The type of data is Schema[Key]['returnType'] which useDataState also wraps in a data return
-            // TODO: follow up with how to type handleGenerate to properly return the promise wrapper shape
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            const data = result.data;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-            const graphqlErrors = result.errors;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment
-            return { ...data, ...(graphqlErrors ? { graphqlErrors } : {}) };
-        };
-        return useDataState(updateAIGenerationStateAction, {});
+        const [dataState, setDataState] = React.useState(() => ({
+            ...INITIAL_STATE,
+            data: undefined,
+        }));
+        const handleGeneration = React.useCallback(async (input) => {
+            setDataState(({ data }) => ({ ...LOADING_STATE, data }));
+            const result = await client.generations[routeName](input);
+            const { data, errors } = result;
+            if (errors) {
+                setDataState({
+                    ...ERROR_STATE,
+                    data,
+                    messages: errors,
+                });
+            }
+            else {
+                setDataState({ ...INITIAL_STATE, data });
+            }
+        }, [routeName]);
+        return [dataState, handleGeneration];
     };
     return useAIGeneration;
 }

package/dist/esm/version.mjs

@@ -0,0 +1,3 @@
+const VERSION = '0.4.0';
+
+export { VERSION };