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

package/dist/index.js

@@ -5,9 +5,9 @@ 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 ui = require('@aws-amplify/ui');
 
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
@@ -29,94 +29,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-const DEFAULT_ICON_PATHS = {
-    attach: 'M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z',
-    close: 'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
-    image: 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z',
-    'send-message': 'M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z',
-    'user-avatar': 'M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z',
-};
-const DEFAULT_ICON_ATTRIBUTES = {
-    'aria-hidden': true,
-    width: '24',
-    height: '24',
-    // `viewBox` coordinates map to `path` data in DEFAULT_ICON_PATHS
-    viewBox: '0 -960 960 960',
-    fill: 'none',
-    xmlns: 'http://www.w3.org/2000/svg',
-};
-const BaseIconElement = elements.defineBaseElement({
-    type: 'svg',
-    displayName: 'Icon',
-});
-const getIconProps = ({ variant, ...props }) => {
-    const pathData = variant ? DEFAULT_ICON_PATHS[variant] : undefined;
-    const children = pathData ? (React__namespace["default"].createElement("path", { d: pathData, fill: "currentColor" })) : undefined;
-    return {
-        ...DEFAULT_ICON_ATTRIBUTES,
-        ...props,
-        children: props.children ?? children,
-        variant,
-    };
-};
-const IconElement = elements.withBaseElementProps(BaseIconElement, getIconProps);
-
-const LabelElement$1 = elements.defineBaseElement({
-    type: 'label',
-    displayName: 'Label',
-});
-const TextElement = elements.defineBaseElement({
-    type: 'p',
-    displayName: 'Text',
-});
-const UnorderedListElement = elements.defineBaseElement({
-    type: 'ul',
-    displayName: 'UnorderedList',
-});
-const ListItemElement = elements.defineBaseElement({
-    type: 'li',
-    displayName: 'ListItem',
-});
-const HeadingElement = elements.defineBaseElement({
-    type: 'h2',
-    displayName: 'Title',
-});
-const ImageElement = elements.defineBaseElement({
-    type: 'img',
-    displayName: 'Image',
-});
-const InputElement = elements.defineBaseElement({
-    type: 'input',
-    displayName: 'Input',
-});
-const ButtonElement = elements.defineBaseElement({ type: 'button', displayName: 'Button' });
-const ViewElement = elements.defineBaseElement({
-    type: 'div',
-    displayName: 'View',
-});
-const SpanElement = elements.defineBaseElement({
-    type: 'span',
-    displayName: 'Span',
-});
-const TextAreaElement = elements.defineBaseElement({
-    type: 'textarea',
-    displayName: 'TextArea',
-});
-const AIConversationElements = {
-    Button: ButtonElement,
-    Heading: HeadingElement,
-    Icon: IconElement,
-    Input: InputElement,
-    Image: ImageElement,
-    Label: LabelElement$1,
-    ListItem: ListItemElement,
-    Span: SpanElement,
-    Text: TextElement,
-    TextArea: TextAreaElement,
-    UnorderedList: UnorderedListElement,
-    View: ViewElement,
-};
-
 const ActionsContext = React__namespace["default"].createContext(undefined);
 const ActionsProvider = ({ children, actions, }) => {
     return (React__namespace["default"].createElement(ActionsContext.Provider, { value: actions }, children));
@@ -253,46 +165,150 @@ const SendMessageContextProvider = ({ children, handleSendMessage, }) => {
     return (React__namespace["default"].createElement(SendMessageContext.Provider, { value: handleSendMessage }, children));
 };
 
-const { Button: Button$5, Span: Span$3, View: View$7 } = AIConversationElements;
+const { MessageRendererContext, MessageRendererProvider, useMessageRenderer, } = uiReactCore.createContextUtilities({
+    contextName: 'MessageRenderer',
+    defaultValue: undefined,
+    errorMessage: '`useMessageRenderer` must be used with an AIConversation component',
+});
+
+const AttachmentContext = React__namespace.createContext(false);
+const AttachmentProvider = ({ children, allowAttachments, }) => {
+    return (React__namespace.createElement(AttachmentContext.Provider, { value: allowAttachments ?? false }, children));
+};
+
+const WelcomeMessageContext = React__namespace.createContext(undefined);
+const WelcomeMessageProvider = ({ children, welcomeMessage, }) => {
+    return (React__namespace.createElement(WelcomeMessageContext.Provider, { value: welcomeMessage }, children));
+};
+
+const DEFAULT_ICON_PATHS = {
+    attach: 'M720-330q0 104-73 177T470-80q-104 0-177-73t-73-177v-370q0-75 52.5-127.5T400-880q75 0 127.5 52.5T580-700v350q0 46-32 78t-78 32q-46 0-78-32t-32-78v-370h80v370q0 13 8.5 21.5T470-320q13 0 21.5-8.5T500-350v-350q-1-42-29.5-71T400-800q-42 0-71 29t-29 71v370q-1 71 49 120.5T470-160q70 0 119-49.5T640-330v-390h80v390Z',
+    close: 'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
+    image: 'M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm40-80h480L570-480 450-320l-90-120-120 160Zm-40 80v-560 560Z',
+    'send-message': 'M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z',
+    'user-avatar': 'M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z',
+};
+const DEFAULT_ICON_ATTRIBUTES = {
+    'aria-hidden': true,
+    width: '24',
+    height: '24',
+    // `viewBox` coordinates map to `path` data in DEFAULT_ICON_PATHS
+    viewBox: '0 -960 960 960',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+};
+const BaseIconElement = elements.defineBaseElement({
+    type: 'svg',
+    displayName: 'Icon',
+});
+const getIconProps = ({ variant, ...props }) => {
+    const pathData = variant ? DEFAULT_ICON_PATHS[variant] : undefined;
+    const children = pathData ? (React__namespace["default"].createElement("path", { d: pathData, fill: "currentColor" })) : undefined;
+    return {
+        ...DEFAULT_ICON_ATTRIBUTES,
+        ...props,
+        children: props.children ?? children,
+        variant,
+    };
+};
+const IconElement = elements.withBaseElementProps(BaseIconElement, getIconProps);
+
+const LabelElement$1 = elements.defineBaseElement({
+    type: 'label',
+    displayName: 'Label',
+});
+const TextElement = elements.defineBaseElement({
+    type: 'p',
+    displayName: 'Text',
+});
+const UnorderedListElement = elements.defineBaseElement({
+    type: 'ul',
+    displayName: 'UnorderedList',
+});
+const ListItemElement = elements.defineBaseElement({
+    type: 'li',
+    displayName: 'ListItem',
+});
+const HeadingElement = elements.defineBaseElement({
+    type: 'h2',
+    displayName: 'Title',
+});
+const ImageElement = elements.defineBaseElement({
+    type: 'img',
+    displayName: 'Image',
+});
+const InputElement = elements.defineBaseElement({
+    type: 'input',
+    displayName: 'Input',
+});
+const ButtonElement = elements.defineBaseElement({ type: 'button', displayName: 'Button' });
+const ViewElement = elements.defineBaseElement({
+    type: 'div',
+    displayName: 'View',
+});
+const SpanElement = elements.defineBaseElement({
+    type: 'span',
+    displayName: 'Span',
+});
+const TextAreaElement = elements.defineBaseElement({
+    type: 'textarea',
+    displayName: 'TextArea',
+});
+const AIConversationElements = {
+    Button: ButtonElement,
+    Heading: HeadingElement,
+    Icon: IconElement,
+    Input: InputElement,
+    Image: ImageElement,
+    Label: LabelElement$1,
+    ListItem: ListItemElement,
+    Span: SpanElement,
+    Text: TextElement,
+    TextArea: TextAreaElement,
+    UnorderedList: UnorderedListElement,
+    View: ViewElement,
+};
+
+const { Button: Button$4, Span: Span$3, View: View$6 } = AIConversationElements;
 const ACTIONS_BAR_BLOCK = 'ai-actions-bar';
 const ActionIcon = elements.withBaseElementProps(Span$3, {
     'aria-hidden': 'true',
     className: `${ACTIONS_BAR_BLOCK}__icon`,
 });
-const ActionButtonBase = elements.withBaseElementProps(Button$5, {
+const ActionButtonBase = elements.withBaseElementProps(Button$4, {
     className: `${ACTIONS_BAR_BLOCK}__button`,
 });
 const ActionButton = React__namespace["default"].forwardRef(function ActionButton(props, ref) {
     return React__namespace["default"].createElement(ActionButtonBase, { ...props, ref: ref });
 });
-const Container$4 = elements.withBaseElementProps(View$7, {
+const Container$3 = elements.withBaseElementProps(View$6, {
     className: `${ACTIONS_BAR_BLOCK}__container`,
 });
 const ActionsBarControl = ({ message, focusable, }) => {
     const actions = React__namespace["default"].useContext(ActionsContext);
-    return (React__namespace["default"].createElement(Container$4, null, actions?.map((action, index) => (React__namespace["default"].createElement(ActionButton, { "aria-label": action.displayName, key: index, onClick: () => action.handler(message), tabIndex: focusable ? 0 : -1 },
+    return (React__namespace["default"].createElement(Container$3, null, actions?.map((action, index) => (React__namespace["default"].createElement(ActionButton, { "aria-label": action.displayName, key: index, onClick: () => action.handler(message), tabIndex: focusable ? 0 : -1 },
         React__namespace["default"].createElement(ActionIcon, { "data-testid": `action-icon-${action.displayName}` }, action.icon))))));
 };
 ActionsBarControl.Button = ActionButton;
-ActionsBarControl.Container = Container$4;
+ActionsBarControl.Container = Container$3;
 ActionsBarControl.Icon = ActionIcon;
 
-const { Icon: Icon$5, Span: Span$2, Text: Text$4, View: View$6 } = AIConversationElements;
+const { Icon: Icon$3, Span: Span$2, Text: Text$2, View: View$5 } = AIConversationElements;
 const AVATAR_BLOCK = 'ai-avatar';
-const DEFAULT_USER_ICON = elements.withBaseElementProps(Icon$5, {
+const DEFAULT_USER_ICON = elements.withBaseElementProps(Icon$3, {
     variant: 'user-avatar',
 });
 const DEFAULT_AI_ICON = () => (React__namespace["default"].createElement("svg", { width: "28", height: "28", viewBox: "0 0 28 28", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
     React__namespace["default"].createElement("g", { id: "raven-logo" },
         React__namespace["default"].createElement("path", { id: "Subtract", fillRule: "evenodd", clipRule: "evenodd", d: "M16 1.29833C14.7624 0.583803 13.2376 0.583804 12 1.29833L4.00006 5.91711C2.76246 6.63165 2.00006 7.95216 2.00006 9.38122V18.6188C2.00006 20.0478 2.76246 21.3684 4.00006 22.0829L12 26.7017C13.2376 27.4162 14.7624 27.4162 16 26.7017L24 22.0829C25.2376 21.3684 26 20.0478 26 18.6188V9.38122C26 7.95215 25.2376 6.63164 24 5.91711L16 1.29833ZM14.9379 6.37317C14.6157 5.50255 13.3843 5.50255 13.0622 6.37317L11.4151 10.8243C11.3138 11.098 11.098 11.3138 10.8243 11.4151L6.37317 13.0621C5.50256 13.3843 5.50256 14.6157 6.37317 14.9378L10.8243 16.5849C11.098 16.6862 11.3138 16.902 11.4151 17.1757L13.0622 21.6268C13.3843 22.4974 14.6157 22.4974 14.9379 21.6268L16.5849 17.1757C16.6862 16.902 16.902 16.6862 17.1757 16.5849L21.6268 14.9378C22.4974 14.6157 22.4974 13.3843 21.6268 13.0621L17.1757 11.4151C16.902 11.3138 16.6862 11.098 16.5849 10.8243L14.9379 6.37317Z", fill: "#0D1A26" }))));
-const AvatarDisplayName = elements.withBaseElementProps(Text$4, {
+const AvatarDisplayName = elements.withBaseElementProps(Text$2, {
     className: `${AVATAR_BLOCK}__display-name`,
 });
 const AvatarIcon = elements.withBaseElementProps(Span$2, {
     'aria-hidden': true,
     className: `${AVATAR_BLOCK}__icon`,
 });
-const Container$3 = elements.withBaseElementProps(View$6, {
+const Container$2 = elements.withBaseElementProps(View$5, {
     className: `${AVATAR_BLOCK}__container`,
 });
 const AvatarControl = () => {
@@ -301,47 +317,18 @@ const AvatarControl = () => {
     const avatar = role === 'assistant' ? avatars?.ai : avatars?.user;
     const defaultIcon = role === 'assistant' ? React__namespace["default"].createElement(DEFAULT_AI_ICON, null) : React__namespace["default"].createElement(DEFAULT_USER_ICON, null);
     const defaultDisplayName = role === 'user' ? 'User' : 'Assistant';
-    return (React__namespace["default"].createElement(Container$3, { "data-testid": 'avatar' },
+    return (React__namespace["default"].createElement(Container$2, { "data-testid": 'avatar' },
         React__namespace["default"].createElement(AvatarIcon, { "data-testid": `avatar-icon-${role}` }, avatar?.avatar ?? defaultIcon),
         React__namespace["default"].createElement(AvatarDisplayName, null, avatar?.username ?? defaultDisplayName)));
 };
-AvatarControl.Container = Container$3;
+AvatarControl.Container = Container$2;
 AvatarControl.DisplayName = AvatarDisplayName;
 AvatarControl.Icon = AvatarIcon;
 
-const { View: View$5, Button: Button$4, Icon: Icon$4, Text: Text$3 } = AIConversationElements;
-const HEADER_BLOCK = 'ai-header';
-const HeaderTextBase = elements.withBaseElementProps(Text$3, {
-    className: `${HEADER_BLOCK}__text`,
-});
-const HeaderText$1 = React__namespace["default"].forwardRef(function HeaderText(props, ref) {
-    return React__namespace["default"].createElement(HeaderTextBase, { ...props, ref: ref });
-});
-const CloseIcon = elements.withBaseElementProps(Icon$4, {
-    className: `${HEADER_BLOCK}__icon`,
-    variant: 'close',
-});
-const CloseButtonBase = elements.withBaseElementProps(Button$4, {
-    className: `${HEADER_BLOCK}__button`,
-});
-const CloseButton = React__namespace["default"].forwardRef(function CloseButton(props, ref) {
-    return React__namespace["default"].createElement(CloseButtonBase, { ...props, ref: ref });
-});
-const Container$2 = elements.withBaseElementProps(View$5, {
-    className: `${HEADER_BLOCK}__container`,
-});
-const HeaderControl = () => (React__namespace["default"].createElement(Container$2, null,
-    React__namespace["default"].createElement(HeaderText$1, null, "Raven Chat"),
-    React__namespace["default"].createElement(CloseButton, null,
-        React__namespace["default"].createElement(CloseIcon, null))));
-HeaderControl.Container = Container$2;
-HeaderControl.Text = HeaderText$1;
-HeaderControl.Button = CloseButton;
-
-const { Button: Button$3, Icon: Icon$3, View: View$4 } = AIConversationElements;
+const { Button: Button$3, Icon: Icon$2, View: View$4 } = AIConversationElements;
 const ATTACH_FILE_BLOCK = 'ai-attach-file';
 const FIELD_BLOCK$1 = 'ai-field';
-const AttachFileIcon = elements.withBaseElementProps(Icon$3, {
+const AttachFileIcon = elements.withBaseElementProps(Icon$2, {
     className: `${ATTACH_FILE_BLOCK}__icon`,
     variant: 'attach',
 });
@@ -398,12 +385,12 @@ AttachFileControl.Icon = AttachFileIcon;
 AttachFileControl.Button = AttachFileButton;
 AttachFileControl.Container = AttachFileContainer;
 
-const { Button: Button$2, Icon: Icon$2, ListItem, UnorderedList: ListElement, Span: Span$1, Text: Text$2, View: View$3, } = AIConversationElements;
+const { Button: Button$2, Icon: Icon$1, ListItem, UnorderedList: ListElement, Span: Span$1, Text: Text$1, View: View$3, } = AIConversationElements;
 const IMAGE_LIST_BLOCK = 'ai-attachment-list';
 const IMAGE_ITEM_BLOCK = 'ai-attachment';
 const REMOVE_IMAGE_BLOCK = 'ai-remove-attachment';
 const IMAGE_TEXT_BLOCK = 'ai-attachment-text';
-const RemoveIcon = elements.withBaseElementProps(Icon$2, {
+const RemoveIcon = elements.withBaseElementProps(Icon$1, {
     className: `${REMOVE_IMAGE_BLOCK}__icon`,
     variant: 'close',
 });
@@ -419,14 +406,14 @@ const RemoveButtonControl = ({ onRemove }) => {
 };
 RemoveButtonControl.Icon = RemoveIcon;
 RemoveButtonControl.Button = RemoveButton;
-const ImageIcon = elements.withBaseElementProps(Icon$2, {
+const ImageIcon = elements.withBaseElementProps(Icon$1, {
     className: `${IMAGE_ITEM_BLOCK}__icon`,
     variant: 'image',
 });
-const FileNameText = elements.withBaseElementProps(Text$2, {
+const FileNameText = elements.withBaseElementProps(Text$1, {
     className: `${IMAGE_TEXT_BLOCK}__file-name`,
 });
-const FileSizeText = elements.withBaseElementProps(Text$2, {
+const FileSizeText = elements.withBaseElementProps(Text$1, {
     className: `${IMAGE_TEXT_BLOCK}__file-size`,
 });
 const Separator$1 = elements.withBaseElementProps(Span$1, {
@@ -480,14 +467,9 @@ const AttachmentListControl = () => {
 AttachmentListControl.List = UnorderedList;
 AttachmentListControl.Item = AttachmentControl;
 
-const AttachmentContext = React__namespace.createContext(false);
-const AttachmentProvider = ({ children, allowAttachments, }) => {
-    return (React__namespace.createElement(AttachmentContext.Provider, { value: allowAttachments ?? false }, children));
-};
-
-const { Button: Button$1, Icon: Icon$1, Label: LabelElement, TextArea, View: View$2, } = AIConversationElements;
+const { Button: Button$1, Icon, Label: LabelElement, TextArea, View: View$2, } = AIConversationElements;
 const FIELD_BLOCK = 'ai-field';
-const SendIcon = elements.withBaseElementProps(Icon$1, {
+const SendIcon = elements.withBaseElementProps(Icon, {
     className: `${FIELD_BLOCK}__icon`,
     variant: 'send-message',
 });
@@ -565,7 +547,7 @@ const TextInput = React__namespace["default"].forwardRef(function TextInput(prop
 const InputContainer = elements.withBaseElementProps(View$2, {
     className: `${FIELD_BLOCK}__input-container`,
 });
-const FieldControl = () => {
+const FormControl = () => {
     const { input, setInput } = React__namespace["default"].useContext(ConversationInputContext);
     const handleSendMessage = React__namespace["default"].useContext(SendMessageContext);
     const allowAttachments = React__namespace["default"].useContext(AttachmentContext);
@@ -629,14 +611,14 @@ const FieldControl = () => {
         React__namespace["default"].createElement(SendButton, null,
             React__namespace["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;
 
-const { Image, Span, Text: Text$1, View: View$1 } = AIConversationElements;
+const { Image, Span, Text, View: View$1 } = AIConversationElements;
 const MESSAGES_BLOCK = 'ai-messages';
 const MESSAGE_BLOCK = 'ai-message';
 const MediaContentBase = elements.withBaseElementProps(Image, {
@@ -648,34 +630,38 @@ const MediaContent = React__namespace["default"].forwardRef(function MediaConten
     return (React__namespace["default"].createElement(MediaContentBase, { ref: ref, className: `${MESSAGE_BLOCK}__image ${MESSAGE_BLOCK}__image--${variant} ${MESSAGE_BLOCK}__image--${role}`, ...props }));
 });
 const TextContent = React__namespace["default"].forwardRef(function TextContent(props, ref) {
-    return React__namespace["default"].createElement(Text$1, { ref: ref, className: `${MESSAGE_BLOCK}__text`, ...props });
+    return React__namespace["default"].createElement(Text, { ref: ref, className: `${MESSAGE_BLOCK}__text`, ...props });
 });
 const ContentContainer = React__namespace["default"].forwardRef(function ContentContainer(props, ref) {
     const variant = React__namespace["default"].useContext(MessageVariantContext);
     return (React__namespace["default"].createElement(View$1, { "data-testid": 'content', className: `${MESSAGE_BLOCK}__content ${MESSAGE_BLOCK}__content--${variant}`, ref: ref, ...props }));
 });
-const MessageControl = ({ message }) => {
+const ToolContent = ({ toolUse, }) => {
     const responseComponents = React__namespace["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__namespace["default"].createElement(CustomComponent, { ...input });
+    }
+};
+const MessageControl = ({ message }) => {
+    const messageRenderer = React__namespace["default"].useContext(MessageRendererContext);
     return (React__namespace["default"].createElement(ContentContainer, null, message.content.map((content, index) => {
         if (content.text) {
-            return (React__namespace["default"].createElement(TextContent, { "data-testid": 'text-content', key: index }, content.text));
+            return messageRenderer?.text ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, { key: index }, messageRenderer.text({ text: content.text }))) : (React__namespace["default"].createElement(TextContent, { "data-testid": 'text-content', key: index }, content.text));
         }
         else if (content.image) {
-            return (React__namespace["default"].createElement(MediaContent, { "data-testid": 'image-content', key: index, src: convertBufferToBase64(content.image?.source.bytes, content.image?.format) }));
+            return messageRenderer?.image ? (React__namespace["default"].createElement(React__namespace["default"].Fragment, { key: index }, messageRenderer?.image({ image: content.image }))) : (React__namespace["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__namespace["default"].createElement(CustomComponent, { ...input, key: index });
-            }
+            return React__namespace["default"].createElement(ToolContent, { toolUse: content.toolUse, key: index });
         }
     })));
 };
@@ -687,7 +673,7 @@ const Separator = elements.withBaseElementProps(Span, {
     children: '|',
     className: `${MESSAGE_BLOCK}__separator`,
 });
-const Timestamp = elements.withBaseElementProps(Text$1, {
+const Timestamp = elements.withBaseElementProps(Text, {
     className: `${MESSAGE_BLOCK}__timestamp`,
 });
 const HeaderContainer = React__namespace["default"].forwardRef(function HeaderContainer(props, ref) {
@@ -703,7 +689,7 @@ const Layout = React__namespace["default"].forwardRef(function Layout(props, ref
     const variant = React__namespace["default"].useContext(MessageVariantContext);
     return (React__namespace["default"].createElement(View$1, { ref: ref, className: `${MESSAGES_BLOCK}__container ${MESSAGES_BLOCK}__container--${variant}`, "aria-live": 'assertive', ...props }));
 });
-const MessagesControl = ({ renderMessage }) => {
+const MessagesControl = () => {
     const messages = React__namespace["default"].useContext(MessagesContext);
     const controls = React__namespace["default"].useContext(ControlsContext);
     const { getMessageTimestampText } = useConversationDisplayText();
@@ -743,7 +729,7 @@ const MessagesControl = ({ renderMessage }) => {
         content.text ??
         content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
     return (React__namespace["default"].createElement(Layout, null, messagesWithRenderableContent?.map((message, index) => {
-        return renderMessage ? (renderMessage(message)) : (React__namespace["default"].createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
+        return (React__namespace["default"].createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
             React__namespace["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__namespace["default"].createElement(HeaderContainer, null,
                     React__namespace["default"].createElement(AvatarControl, null),
@@ -761,7 +747,7 @@ MessagesControl.Layout = Layout;
 MessagesControl.Message = MessageControl;
 MessagesControl.Separator = Separator;
 
-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`;
@@ -769,25 +755,6 @@ const PromptCard = elements.withBaseElementProps(Button, {
     className: PROMPT_CARD,
     type: 'button',
 });
-const AIIconProps = () => ({
-    children: (React__namespace["default"].createElement(React__namespace["default"].Fragment, null,
-        React__namespace["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__namespace["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__namespace["default"].createElement("defs", null,
-            React__namespace["default"].createElement("linearGradient", { id: "paint0_linear_395_1815", x1: "20", y1: "0.978638", x2: "20", y2: "39.0213", gradientUnits: "userSpaceOnUse" },
-                React__namespace["default"].createElement("stop", { stopColor: "#7DD6E8" }),
-                React__namespace["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 = elements.withBaseElementProps(Icon, AIIconProps);
-const HeaderText = elements.withBaseElementProps(Heading, {
-    className: `${PROMPT_CONTROL}__header`,
-});
 const PromptGroupBase = elements.withBaseElementProps(View, {
     className: `${PROMPT_CONTROL}__buttongroup`,
 });
@@ -802,9 +769,7 @@ const PromptGroup = React__namespace["default"].forwardRef(function ButtonGroup(
                 setInput((prevInput) => ({
                     ...prevInput,
                     text: prompt.inputText,
-                })) },
-            React__namespace["default"].createElement(Text, { className: ui.classNames(`${PROMPT_CARD}__header`, `${PROMPT_CARD}__text`) }, prompt.header),
-            React__namespace["default"].createElement(Text, { className: `${PROMPT_CARD}__text` }, prompt.inputText)));
+                })) }, prompt.component));
     })));
 });
 const Container = elements.withBaseElementProps(View, {
@@ -818,41 +783,21 @@ const PromptControl = () => {
         return (React__namespace["default"].createElement(controls.PromptList, { setInput: setInput, suggestedPrompts: suggestedPromptsArray }));
     }
     return (React__namespace["default"].createElement(Container, null,
-        React__namespace["default"].createElement(AIIcon, null),
-        React__namespace["default"].createElement(HeaderText, null, "How can I help you today?"),
         React__namespace["default"].createElement(PromptGroup, null)));
 };
-const AutoHidablePromptControl = () => {
-    const messages = React__namespace["default"].useContext(MessagesContext);
-    if (!messages || messages.length === 0) {
-        return React__namespace["default"].createElement(PromptControl, null);
-    }
-};
 PromptControl.Container = Container;
-PromptControl.Header = HeaderText;
-PromptControl.Icon = AIIcon;
 PromptControl.PromptGroup = PromptGroup;
 PromptControl.PromptCard = PromptCard;
 
-function Conversation() {
-    return (React__namespace["default"].createElement(ViewElement, null,
-        React__namespace["default"].createElement(HeaderControl, null),
-        React__namespace["default"].createElement(ViewElement, null,
-            React__namespace["default"].createElement(AutoHidablePromptControl, null),
-            React__namespace["default"].createElement(MessagesControl, null)),
-        React__namespace["default"].createElement(ViewElement, null,
-            React__namespace["default"].createElement(FieldControl, null))));
-}
-
-function createProvider({ elements: elements$1, actions, suggestedPrompts, responseComponents, variant, controls, displayText, allowAttachments, }) {
-    return function Provider({ children, messages, avatars, handleSendMessage, isLoading, }) {
-        const _displayText = {
-            ...defaultAIConversationDisplayTextEn,
-            ...displayText,
-        };
-        return (React__namespace["default"].createElement(elements.ElementsProvider, { elements: elements$1 },
-            React__namespace["default"].createElement(ControlsProvider, { controls: controls },
-                React__namespace["default"].createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
+const AIConversationProvider = ({ actions, allowAttachments, avatars, children, controls, displayText, elements: elements$1, handleSendMessage, isLoading, messages, responseComponents, suggestedPrompts, variant, welcomeMessage, }) => {
+    const _displayText = {
+        ...defaultAIConversationDisplayTextEn,
+        ...displayText,
+    };
+    return (React__namespace["default"].createElement(elements.ElementsProvider, { elements: elements$1 },
+        React__namespace["default"].createElement(ControlsProvider, { controls: controls },
+            React__namespace["default"].createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
+                React__namespace["default"].createElement(WelcomeMessageProvider, { welcomeMessage: welcomeMessage },
                     React__namespace["default"].createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
                         React__namespace["default"].createElement(AttachmentProvider, { allowAttachments: allowAttachments },
                             React__namespace["default"].createElement(ConversationDisplayTextProvider, { ..._displayText },
@@ -862,41 +807,53 @@ function createProvider({ elements: elements$1, actions, suggestedPrompts, respo
                                             React__namespace["default"].createElement(ActionsProvider, { actions: actions },
                                                 React__namespace["default"].createElement(MessageVariantProvider, { variant: variant },
                                                     React__namespace["default"].createElement(MessagesProvider, { messages: messages },
-                                                        React__namespace["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children))))))))))))));
-    };
-}
+                                                        React__namespace["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children)))))))))))))));
+};
+
+const DefaultMessageControl = () => {
+    const messages = React__namespace.useContext(MessagesContext);
+    const welcomeMessage = React__namespace.useContext(WelcomeMessageContext);
+    if (!messages || messages.length === 0) {
+        return (React__namespace.createElement(React__namespace.Fragment, null,
+            welcomeMessage,
+            React__namespace.createElement(PromptControl, null)));
+    }
+};
 
 /**
  * @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__namespace["default"].createElement(Provider, { messages: messages, avatars: avatars, handleSendMessage: handleSendMessage, isLoading: isLoading },
-            React__namespace["default"].createElement(Conversation, null)));
+        const providerProps = {
+            elements,
+            actions,
+            suggestedPrompts,
+            responseComponents,
+            variant,
+            controls,
+            displayText,
+            allowAttachments,
+            messages,
+            avatars,
+            handleSendMessage,
+            isLoading,
+            messageRenderer,
+        };
+        return (React__namespace["default"].createElement(AIConversationProvider, { ...providerProps },
+            React__namespace["default"].createElement(ViewElement, null,
+                React__namespace["default"].createElement(ViewElement, null,
+                    React__namespace["default"].createElement(DefaultMessageControl, null),
+                    React__namespace["default"].createElement(MessagesControl, null)),
+                React__namespace["default"].createElement(ViewElement, null,
+                    React__namespace["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 };
 }
 
@@ -1043,11 +1000,18 @@ const PromptList = ({ setInput, suggestedPrompts = [], }) => {
                     ...prevInput,
                     text: prompt.inputText,
                 }));
-            } }, prompt.header));
+            } }, prompt.component));
     })));
 };
 
-function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, allowAttachments, }) {
+const VERSION = '0.4.0';
+
+function Provider({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, allowAttachments, messageRenderer, children, }) {
+    uiReactCore.useSetUserAgent({
+        componentName: 'AIConversation',
+        packageName: 'react-ai',
+        version: VERSION,
+    });
     const icons = internal.useIcons('aiConversation');
     const defaultAvatars = {
         ai: {
@@ -1059,11 +1023,16 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
             avatar: icons?.user ?? React__namespace.createElement(internal.IconUser, null),
         },
     };
-    const Provider = createProvider({
+    const providerProps = {
+        messages,
+        handleSendMessage,
+        avatars: {
+            ...defaultAvatars,
+            ...avatars,
+        },
+        isLoading,
         elements: {
-            Text: React__namespace.forwardRef(function _Text(props, ref) {
-                return React__namespace.createElement(uiReact.Text, { ...props, ref: ref });
-            }),
+            Text: uiReact.Text,
         },
         actions,
         suggestedPrompts,
@@ -1077,30 +1046,26 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
         },
         displayText,
         allowAttachments,
-    });
-    const providerProps = {
-        messages,
-        handleSendMessage,
-        avatars: {
-            ...defaultAvatars,
-            ...avatars,
-        },
-        isLoading,
+        messageRenderer,
     };
-    return (React__namespace.createElement(Provider, { ...providerProps },
+    return (React__namespace.createElement(AIConversationProvider, { ...providerProps }, children));
+}
+function AIConversationBase(props) {
+    return (React__namespace.createElement(Provider, { ...props },
         React__namespace.createElement(uiReact.Flex, { className: ui.ComponentClassName.AIConversation },
             React__namespace.createElement(uiReact.ScrollView, { autoScroll: "smooth", flex: "1" },
-                React__namespace.createElement(AutoHidablePromptControl, null),
+                React__namespace.createElement(DefaultMessageControl, null),
                 React__namespace.createElement(MessagesControl, null)),
-            React__namespace.createElement(FieldControl, null))));
+            React__namespace.createElement(FormControl, null))));
 }
 /**
  * @experimental
  */
 const AIConversation = Object.assign(AIConversationBase, {
-    MessageList,
-    PromptList,
-    Form,
+    Provider,
+    DefaultMessage: DefaultMessageControl,
+    Messages: MessagesControl,
+    Form: FormControl,
 });
 
 const AIContext = React__namespace["default"].createContext(undefined);
@@ -1120,22 +1085,36 @@ const AIContextProvider = ({ children, }) => {
     return React__namespace["default"].createElement(AIContext.Provider, { value: context }, children);
 };
 
+// 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 uiReactCore.useDataState(updateAIGenerationStateAction, {});
+        const [dataState, setDataState] = React__namespace.useState(() => ({
+            ...INITIAL_STATE,
+            data: undefined,
+        }));
+        const handleGeneration = React__namespace.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;
 }