@aws-amplify/ui-react-ai 0.3.2 → 1.0.0

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

@@ -1,9 +1,10 @@
 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';
-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 +12,13 @@ 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 '../../context/FallbackComponentContext.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 +26,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 +40,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 +54,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/Form.mjs

@@ -3,7 +3,6 @@ import { View, Button, VisuallyHidden, TextAreaField, DropZone } from '@aws-ampl
 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;
@@ -25,12 +24,12 @@ const FormWrapper = ({ children, allowAttachments, setInput, }) => {
         return children;
     }
 };
-const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
+const Form = ({ setInput, input, handleSubmit, allowAttachments, isLoading, }) => {
     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 },
         React.createElement(View, { as: "form", className: ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
@@ -52,9 +51,9 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, }) => {
                                 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) => {
+            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();

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';
@@ -12,9 +13,23 @@ 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/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);
@@ -26,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);
@@ -56,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/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/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 };