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

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

@@ -1,5 +1,7 @@
 import React__default from 'react';
+import { Image } from '@aws-amplify/ui-react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';
@@ -14,66 +16,59 @@ import '../../context/SendMessageContext.mjs';
 import { MessageRendererContext } from '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import { FallbackComponentContext } from '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { convertBufferToBase64 } from '../../utils.mjs';
 import { ActionsBarControl } from './ActionsBarControl.mjs';
 import { AvatarControl } from './AvatarControl.mjs';
+import { classNames } from '@aws-amplify/ui';
 
-const { Image, Span, Text, View } = AIConversationElements;
-const MESSAGES_BLOCK = 'ai-messages';
-const MESSAGE_BLOCK = 'ai-message';
-const MediaContentBase = withBaseElementProps(Image, {
-    alt: 'Image attachment',
-});
-const MediaContent = React__default.forwardRef(function MediaContent(props, ref) {
+const { Text, View } = AIConversationElements;
+const MESSAGES_BLOCK = 'amplify-ai-conversation__message__list';
+const MESSAGE_BLOCK = 'amplify-ai-conversation__message';
+const MediaContent = (props) => {
     const variant = React__default.useContext(MessageVariantContext);
     const role = React__default.useContext(RoleContext);
-    return (React__default.createElement(MediaContentBase, { ref: ref, className: `${MESSAGE_BLOCK}__image ${MESSAGE_BLOCK}__image--${variant} ${MESSAGE_BLOCK}__image--${role}`, ...props }));
-});
+    return (React__default.createElement(Image, { className: classNames(`${MESSAGE_BLOCK}__image`, variant && `${MESSAGE_BLOCK}__image--${variant}`, `${MESSAGE_BLOCK}__image--${role}`), ...props }));
+};
 const TextContent = React__default.forwardRef(function TextContent(props, ref) {
     return React__default.createElement(Text, { ref: ref, className: `${MESSAGE_BLOCK}__text`, ...props });
 });
-const ContentContainer = React__default.forwardRef(function ContentContainer(props, ref) {
-    const variant = React__default.useContext(MessageVariantContext);
-    return (React__default.createElement(View, { "data-testid": 'content', className: `${MESSAGE_BLOCK}__content ${MESSAGE_BLOCK}__content--${variant}`, ref: ref, ...props }));
-});
 const ToolContent = ({ toolUse, }) => {
-    const responseComponents = React__default.useContext(ResponseComponentsContext);
+    const responseComponents = React__default.useContext(ResponseComponentsContext) ?? {};
+    const FallbackComponent = React__default.useContext(FallbackComponentContext);
     // For now tool use is limited to custom response components
     const { name, input } = toolUse;
-    if (!responseComponents ||
-        !name ||
-        !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
+    if (!name || !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
         return;
     }
     else {
         const response = responseComponents[name];
-        const CustomComponent = response.component;
-        return React__default.createElement(CustomComponent, { ...input });
+        if (response) {
+            const CustomComponent = response.component;
+            return React__default.createElement(CustomComponent, { ...input });
+        }
+        // fallback if there is a UI component message but we don't have
+        // a React component that matches
+        if (FallbackComponent) {
+            return React__default.createElement(FallbackComponent, { ...input });
+        }
     }
 };
 const MessageControl = ({ message }) => {
     const messageRenderer = React__default.useContext(MessageRendererContext);
-    return (React__default.createElement(ContentContainer, null, message.content.map((content, index) => {
+    return (React__default.createElement(React__default.Fragment, null, message.content.map((content, index) => {
         if (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 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) }));
+            return messageRenderer?.image ? (React__default.createElement(React__default.Fragment, { key: index }, messageRenderer?.image({ image: content.image }))) : (React__default.createElement(MediaContent, { "data-testid": 'image-content', key: index, alt: "", src: convertBufferToBase64(content.image?.source.bytes, content.image?.format) }));
         }
         else if (content.toolUse) {
             return React__default.createElement(ToolContent, { toolUse: content.toolUse, key: index });
         }
     })));
 };
-MessageControl.Container = ContentContainer;
-MessageControl.MediaContent = MediaContent;
-MessageControl.TextContent = TextContent;
-const Separator = withBaseElementProps(Span, {
-    'aria-hidden': true,
-    children: '|',
-    className: `${MESSAGE_BLOCK}__separator`,
-});
 const Timestamp = withBaseElementProps(Text, {
     className: `${MESSAGE_BLOCK}__timestamp`,
 });
@@ -134,7 +129,6 @@ const MessagesControl = () => {
             React__default.createElement(MessageContainer, { "data-testid": `message`, key: `message-${index}`, tabIndex: focusedItemIndex === index ? 0 : -1, onFocus: () => handleFocus(index), onKeyDown: (event) => onKeyDown(index, event), ref: (el) => (messagesRef.current[index] = el) },
                 React__default.createElement(HeaderContainer, null,
                     React__default.createElement(AvatarControl, null),
-                    React__default.createElement(Separator, null),
                     React__default.createElement(Timestamp, null, getMessageTimestampText(new Date(message.createdAt)))),
                 React__default.createElement(MessageControl, { message: message }),
                 message.role === 'assistant' ? (React__default.createElement(ActionsBarControl, { message: message, focusable: focusedItemIndex === index })) : null)));
@@ -146,6 +140,5 @@ MessagesControl.Container = MessageContainer;
 MessagesControl.HeaderContainer = HeaderContainer;
 MessagesControl.Layout = Layout;
 MessagesControl.Message = MessageControl;
-MessagesControl.Separator = Separator;
 
 export { MessageControl, MessagesControl };

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

@@ -1,5 +1,6 @@
 import React__default from 'react';
 import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
+import '../../context/AIContextContext.mjs';
 import '../../context/ActionsContext.mjs';
 import '../../context/AvatarsContext.mjs';
 import { ConversationInputContext } from '../../context/ConversationInputContext.mjs';
@@ -14,6 +15,7 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 
 const { View, Button } = AIConversationElements;

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { View, Button, VisuallyHidden, TextAreaField, DropZone } from '@aws-amplify/ui-react';
+import { View, Button, VisuallyHidden, TextAreaField, Message, DropZone } from '@aws-amplify/ui-react';
 import { useIcons, IconSend, IconAttach } from '@aws-amplify/ui-react/internal';
 import { ComponentClassName } from '@aws-amplify/ui';
 import { Attachments } from './Attachments.mjs';
-import { LoadingContext } from '../../context/LoadingContext.mjs';
 
 function isHTMLFormElement(target) {
     return 'form' in target;
@@ -12,27 +11,24 @@ function isHTMLFormElement(target) {
  * Will conditionally render the DropZone if allowAttachments
  * is true
  */
-const FormWrapper = ({ children, allowAttachments, setInput, }) => {
+const FormWrapper = ({ children, allowAttachments, onValidate, }) => {
     if (allowAttachments) {
         return (React.createElement(DropZone, { className: ComponentClassName.AIConversationFormDropzone, onDropComplete: ({ acceptedFiles }) => {
-                setInput?.((prevInput) => ({
-                    ...prevInput,
-                    files: [...(prevInput?.files ?? []), ...acceptedFiles],
-                }));
+                onValidate(acceptedFiles);
             } }, children));
     }
     else {
         return children;
     }
 };
-const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
+const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isLoading, error, }) => {
     const icons = useIcons('aiConversation');
     const sendIcon = icons?.send ?? React.createElement(IconSend, null);
     const attachIcon = icons?.attach ?? React.createElement(IconAttach, null);
     const hiddenInput = React.useRef(null);
-    const isLoading = React.useContext(LoadingContext);
+    const [composing, setComposing] = React.useState(false);
     const isInputEmpty = !input?.text?.length && !input?.files?.length;
-    return (React.createElement(FormWrapper, { allowAttachments: allowAttachments, setInput: setInput },
+    return (React.createElement(FormWrapper, { onValidate: onValidate, allowAttachments: allowAttachments },
         React.createElement(View, { as: "form", className: ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
             allowAttachments ? (React.createElement(Button, { className: ComponentClassName.AIConversationFormAttach, onClick: () => {
                     hiddenInput?.current?.click();
@@ -43,24 +39,20 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
                 React.createElement("span", null, attachIcon),
                 React.createElement(VisuallyHidden, null,
                     React.createElement("input", { type: "file", tabIndex: -1, ref: hiddenInput, onChange: (e) => {
-                            const { files } = e.target;
-                            if (!files || files.length === 0) {
+                            if (!e.target.files || e.target.files.length === 0) {
                                 return;
                             }
-                            setInput((prevValue) => ({
-                                ...prevValue,
-                                files: [...(prevValue?.files ?? []), ...Array.from(files)],
-                            }));
-                        }, multiple: true, accept: "*", "data-testid": "hidden-file-input" })))) : null,
-            React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', testId: "text-input", onKeyDown: (e) => {
+                            onValidate(Array.from(e.target.files));
+                        }, multiple: true, accept: ".jpeg,.png,.webp,.gif", "data-testid": "hidden-file-input" })))) : null,
+            React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', testId: "text-input", onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false), onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
-                    const shouldSubmit = !e.shiftKey && e.key === 'Enter';
+                    const shouldSubmit = !e.shiftKey && e.key === 'Enter' && !composing;
                     if (shouldSubmit && isHTMLFormElement(e.target)) {
                         e.target.form.requestSubmit();
                         e.preventDefault();
                     }
                 }, onChange: (e) => {
-                    setInput((prevValue) => ({
+                    setInput?.((prevValue) => ({
                         ...prevValue,
                         text: e.target.value,
                     }));
@@ -70,6 +62,7 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
                 // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                 isDisabled: isLoading || isInputEmpty },
                 React.createElement("span", null, sendIcon))),
+        error ? (React.createElement(Message, { className: ComponentClassName.AIConversationFormError, variation: "plain", colorTheme: "warning" }, error)) : null,
         React.createElement(Attachments, { setInput: setInput, files: input?.files })));
 };
 

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { View, Avatar, Text } from '@aws-amplify/ui-react';
+import { View, Avatar, Placeholder, Text, Button } from '@aws-amplify/ui-react';
 import { MessageControl } from '../Controls/MessagesControl.mjs';
-import '../../context/ActionsContext.mjs';
+import '../../context/AIContextContext.mjs';
+import { ActionsContext } from '../../context/ActionsContext.mjs';
 import { AvatarsContext } from '../../context/AvatarsContext.mjs';
 import '../../context/ConversationInputContext.mjs';
 import { RoleContext } from '../../context/MessagesContext.mjs';
@@ -15,9 +16,20 @@ import '../../context/SendMessageContext.mjs';
 import '../../context/MessageRenderContext.mjs';
 import '../../context/AttachmentContext.mjs';
 import '../../context/WelcomeMessageContext.mjs';
+import '../../context/FallbackComponentContext.mjs';
 import '../../context/elements/definitions.mjs';
 import { ComponentClassName, classNames, classNameModifier } from '@aws-amplify/ui';
 
+const PlaceholderMessage = ({ role }) => {
+    const variant = React.useContext(MessageVariantContext);
+    return (React.createElement(View, { className: classNames(ComponentClassName.AIConversationMessage, classNameModifier(ComponentClassName.AIConversationMessage, variant), classNameModifier(ComponentClassName.AIConversationMessage, role)) },
+        React.createElement(View, { className: ComponentClassName.AIConversationMessageAvatar },
+            React.createElement(Avatar, null)),
+        React.createElement(View, { className: ComponentClassName.AIConversationMessageBody },
+            React.createElement(Placeholder, { width: "25%" }),
+            React.createElement(Placeholder, { width: "50%" }),
+            React.createElement(Placeholder, { width: "25%" }))));
+};
 const MessageMeta = ({ message }) => {
     // need to pass this in as props in order for it to be overridable
     const avatars = React.useContext(AvatarsContext);
@@ -29,29 +41,30 @@ const MessageMeta = ({ message }) => {
         React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username),
         React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderTimestamp }, getMessageTimestampText(new Date(message.createdAt)))));
 };
-const LoadingMessage = () => {
-    const avatars = React.useContext(AvatarsContext);
-    const variant = React.useContext(MessageVariantContext);
-    const avatar = avatars?.ai;
-    return (React.createElement(View, { className: classNames(ComponentClassName.AIConversationMessage, classNameModifier(ComponentClassName.AIConversationMessage, variant), classNameModifier(ComponentClassName.AIConversationMessage, 'assistant')) },
-        React.createElement(View, { className: ComponentClassName.AIConversationMessageAvatar },
-            React.createElement(Avatar, { isLoading: true }, avatar?.avatar)),
-        React.createElement(View, { className: ComponentClassName.AIConversationMessageBody },
-            React.createElement(View, { className: ComponentClassName.AIConversationMessageSender },
-                React.createElement(Text, { className: ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username)))));
+const MessageActions = ({ message }) => {
+    const actions = React.useContext(ActionsContext);
+    if (!actions)
+        return null;
+    return (React.createElement(View, { className: ComponentClassName.AIConversationMessageActions }, actions.map((action, i) => {
+        return (React.createElement(Button, { key: i, size: "small", onClick: () => {
+                action.handler(message);
+            } }, action.component));
+    })));
 };
 const Message = ({ message }) => {
     const avatars = React.useContext(AvatarsContext);
     const variant = React.useContext(MessageVariantContext);
+    const { isLoading } = message;
     const avatar = message.role === 'assistant' ? avatars?.ai : avatars?.user;
     return (React.createElement(RoleContext.Provider, { value: message.role },
         React.createElement(View, { className: classNames(ComponentClassName.AIConversationMessage, classNameModifier(ComponentClassName.AIConversationMessage, variant), classNameModifier(ComponentClassName.AIConversationMessage, message.role)) },
             React.createElement(View, { className: ComponentClassName.AIConversationMessageAvatar },
-                React.createElement(Avatar, null, avatar?.avatar)),
+                React.createElement(Avatar, { isLoading: isLoading }, avatar?.avatar)),
             React.createElement(View, { className: ComponentClassName.AIConversationMessageBody },
                 React.createElement(MessageMeta, { message: message }),
                 React.createElement(View, { className: ComponentClassName.AIConversationMessageContent },
-                    React.createElement(MessageControl, { message: message }))))));
+                    React.createElement(MessageControl, { message: message })),
+                message.role === 'assistant' ? (React.createElement(MessageActions, { message: message })) : null))));
 };
 const MessageList = ({ messages, }) => {
     const isLoading = React.useContext(LoadingContext);
@@ -59,8 +72,10 @@ const MessageList = ({ messages, }) => {
         content.text ??
         content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
     return (React.createElement(View, { className: ComponentClassName.AIConversationMessageList },
-        messagesWithRenderableContent.map((message, i) => (React.createElement(Message, { key: `message-${i}`, message: message }))),
-        isLoading ? React.createElement(LoadingMessage, null) : null));
+        isLoading ? (React.createElement(React.Fragment, null,
+            React.createElement(PlaceholderMessage, { role: "user" }),
+            React.createElement(PlaceholderMessage, { role: "assistant" }))) : null,
+        messagesWithRenderableContent.map((message, i) => (React.createElement(Message, { key: `message-${i}`, message: message })))));
 };
 
 export { MessageList };

package/dist/esm/hooks/contentFromEvents.mjs

@@ -0,0 +1,22 @@
+const contentFromEvents = (contentBlocks) => {
+    if (!contentBlocks)
+        return [];
+    return contentBlocks.map((contentBlock) => {
+        const isTextBlock = contentBlock.some((event) => event.text);
+        if (isTextBlock) {
+            return {
+                text: contentBlock
+                    .map((event) => {
+                    return event.text;
+                })
+                    .join(''),
+            };
+        }
+        // tool use is never chunked
+        if (contentBlock[0].toolUse) {
+            return { toolUse: contentBlock[0].toolUse };
+        }
+    });
+};
+
+export { contentFromEvents };

package/dist/esm/hooks/createAIHooks.mjs

@@ -1,9 +1,6 @@
 import { createUseAIGeneration } from './useAIGeneration.mjs';
 import { createUseAIConversation } from './useAIConversation.mjs';
 
-/**
- * @experimental
- */
 function createAIHooks(_client) {
     const useAIConversation = createUseAIConversation(_client);
     const useAIGeneration = createUseAIGeneration(_client);

package/dist/esm/hooks/exhaustivelyListMessages.mjs

@@ -0,0 +1,19 @@
+async function exhaustivelyListMessages({ conversation, messages = [], nextToken, }) {
+    const result = await conversation.listMessages({ nextToken });
+    if (result.data) {
+        messages?.push(...result.data);
+    }
+    if (result.nextToken) {
+        return exhaustivelyListMessages({
+            conversation,
+            messages,
+            nextToken: result.nextToken,
+        });
+    }
+    return {
+        ...result,
+        data: messages,
+    };
+}
+
+export { exhaustivelyListMessages };

package/dist/esm/hooks/shared.mjs

@@ -0,0 +1,14 @@
+// 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 };
+
+export { ERROR_STATE, INITIAL_STATE, LOADING_STATE };