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

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

@@ -1,8 +1,16 @@
 import React__default from 'react';
 
+const RESPONSE_COMPONENT_PREFIX = 'AMPLIFY_UI_';
 const ResponseComponentsContext = React__default.createContext(undefined);
+const prependResponseComponents = (responseComponents) => {
+    if (!responseComponents)
+        return responseComponents;
+    return Object.keys(responseComponents).reduce((prev, key) => ((prev[`${RESPONSE_COMPONENT_PREFIX}${key}`] = responseComponents[key]),
+        prev), {});
+};
 const ResponseComponentsProvider = ({ children, responseComponents, }) => {
-    return (React__default.createElement(ResponseComponentsContext.Provider, { value: responseComponents }, children));
+    const _responseComponents = React__default.useMemo(() => prependResponseComponents(responseComponents), [responseComponents]);
+    return (React__default.createElement(ResponseComponentsContext.Provider, { value: _responseComponents }, children));
 };
 const convertResponseComponentsToToolConfiguration = (responseComponents) => {
     if (!responseComponents) {
@@ -32,4 +40,4 @@ const convertResponseComponentsToToolConfiguration = (responseComponents) => {
     return { tools };
 };
 
-export { ResponseComponentsContext, ResponseComponentsProvider, convertResponseComponentsToToolConfiguration };
+export { RESPONSE_COMPONENT_PREFIX, ResponseComponentsContext, ResponseComponentsProvider, convertResponseComponentsToToolConfiguration };

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

@@ -9,7 +9,7 @@ import { MessageVariantContext } from '../../context/MessageVariantContext.mjs';
 import { useConversationDisplayText } from '../../context/DisplayTextContext.mjs';
 import { ControlsContext } from '../../context/ControlsContext.mjs';
 import '../../context/LoadingContext.mjs';
-import { ResponseComponentsContext } from '../../context/ResponseComponentsContext.mjs';
+import { ResponseComponentsContext, RESPONSE_COMPONENT_PREFIX } from '../../context/ResponseComponentsContext.mjs';
 import '../../context/SendMessageContext.mjs';
 import { AIConversationElements } from '../../context/elements/definitions.mjs';
 import { convertBufferToBase64 } from '../../utils.mjs';
@@ -46,7 +46,9 @@ const MessageControl = ({ message }) => {
         else if (content.toolUse) {
             // For now tool use is limited to custom response components
             const { name, input } = content.toolUse;
-            if (!responseComponents || !name) {
+            if (!responseComponents ||
+                !name ||
+                !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
                 return;
             }
             else {
@@ -117,7 +119,10 @@ const MessagesControl = ({ renderMessage }) => {
     if (controls?.MessageList) {
         return React__default.createElement(controls.MessageList, { messages: messages });
     }
-    return (React__default.createElement(Layout, null, messages?.map((message, index) => {
+    const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
+        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}` },
             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,

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

@@ -24,6 +24,9 @@ const Form = ({ setInput, input, handleSubmit, }) => {
         React.createElement(View, { as: "form", className: ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
             React.createElement(Button, { className: ComponentClassName.AIConversationFormAttach, onClick: () => {
                     hiddenInput?.current?.click();
+                    if (hiddenInput?.current) {
+                        hiddenInput.current.value = '';
+                    }
                 } },
                 React.createElement("span", null, attachIcon),
                 React.createElement(VisuallyHidden, null,
@@ -36,8 +39,8 @@ const Form = ({ setInput, input, handleSubmit, }) => {
                                 ...prevValue,
                                 files: [...(prevValue?.files ?? []), ...Array.from(files)],
                             }));
-                        }, multiple: true, accept: "*" }))),
-            React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', onKeyDown: (e) => {
+                        }, multiple: true, accept: "*", "data-testid": "hidden-file-input" }))),
+            React.createElement(TextAreaField, { className: ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', testId: "text-input", onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
                     const shouldSubmit = !e.shiftKey && e.key === 'Enter';
                     if (shouldSubmit && isHTMLFormElement(e.target)) {

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

@@ -9,8 +9,8 @@ import '../../context/SuggestedPromptsContext.mjs';
 import { MessageVariantContext } from '../../context/MessageVariantContext.mjs';
 import { useConversationDisplayText } from '../../context/DisplayTextContext.mjs';
 import '../../context/ControlsContext.mjs';
-import '../../context/LoadingContext.mjs';
-import '../../context/ResponseComponentsContext.mjs';
+import { LoadingContext } from '../../context/LoadingContext.mjs';
+import { RESPONSE_COMPONENT_PREFIX } from '../../context/ResponseComponentsContext.mjs';
 import '../../context/SendMessageContext.mjs';
 import '../../context/elements/definitions.mjs';
 import { ComponentClassName, classNames, classNameModifier } from '@aws-amplify/ui';
@@ -26,6 +26,17 @@ 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 Message = ({ message }) => {
     const avatars = React.useContext(AvatarsContext);
     const variant = React.useContext(MessageVariantContext);
@@ -40,7 +51,13 @@ const Message = ({ message }) => {
                     React.createElement(MessageControl, { message: message }))))));
 };
 const MessageList = ({ messages, }) => {
-    return (React.createElement(View, { className: ComponentClassName.AIConversationMessageList }, messages.map((message, i) => (React.createElement(Message, { key: `message-${i}`, message: message })))));
+    const isLoading = React.useContext(LoadingContext);
+    const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
+        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));
 };
 
 export { MessageList };

package/dist/index.js

@@ -211,9 +211,17 @@ const LoadingContextProvider = ({ children, isLoading, }) => {
     return (React__default["default"].createElement(LoadingContext.Provider, { value: isLoading }, children));
 };
 
+const RESPONSE_COMPONENT_PREFIX = 'AMPLIFY_UI_';
 const ResponseComponentsContext = React__default["default"].createContext(undefined);
+const prependResponseComponents = (responseComponents) => {
+    if (!responseComponents)
+        return responseComponents;
+    return Object.keys(responseComponents).reduce((prev, key) => ((prev[`${RESPONSE_COMPONENT_PREFIX}${key}`] = responseComponents[key]),
+        prev), {});
+};
 const ResponseComponentsProvider = ({ children, responseComponents, }) => {
-    return (React__default["default"].createElement(ResponseComponentsContext.Provider, { value: responseComponents }, children));
+    const _responseComponents = React__default["default"].useMemo(() => prependResponseComponents(responseComponents), [responseComponents]);
+    return (React__default["default"].createElement(ResponseComponentsContext.Provider, { value: _responseComponents }, children));
 };
 const convertResponseComponentsToToolConfiguration = (responseComponents) => {
     if (!responseComponents) {
@@ -644,7 +652,9 @@ const MessageControl = ({ message }) => {
         else if (content.toolUse) {
             // For now tool use is limited to custom response components
             const { name, input } = content.toolUse;
-            if (!responseComponents || !name) {
+            if (!responseComponents ||
+                !name ||
+                !name.startsWith(RESPONSE_COMPONENT_PREFIX)) {
                 return;
             }
             else {
@@ -715,7 +725,10 @@ const MessagesControl = ({ renderMessage }) => {
     if (controls?.MessageList) {
         return React__default["default"].createElement(controls.MessageList, { messages: messages });
     }
-    return (React__default["default"].createElement(Layout, null, messages?.map((message, index) => {
+    const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
+        content.text ??
+        content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
+    return (React__default["default"].createElement(Layout, null, messagesWithRenderableContent?.map((message, index) => {
         return renderMessage ? (renderMessage(message)) : (React__default["default"].createElement(RoleContext.Provider, { value: message.role, key: `message-${index}` },
             React__default["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["default"].createElement(HeaderContainer, null,
@@ -882,6 +895,17 @@ const MessageMeta = ({ message }) => {
         React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username),
         React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderTimestamp }, getMessageTimestampText(new Date(message.createdAt)))));
 };
+const LoadingMessage = () => {
+    const avatars = React__namespace.useContext(AvatarsContext);
+    const variant = React__namespace.useContext(MessageVariantContext);
+    const avatar = avatars?.ai;
+    return (React__namespace.createElement(uiReact.View, { className: ui.classNames(ui.ComponentClassName.AIConversationMessage, ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, variant), ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, 'assistant')) },
+        React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageAvatar },
+            React__namespace.createElement(uiReact.Avatar, { isLoading: true }, avatar?.avatar)),
+        React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageBody },
+            React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageSender },
+                React__namespace.createElement(uiReact.Text, { className: ui.ComponentClassName.AIConversationMessageSenderUsername }, avatar?.username)))));
+};
 const Message = ({ message }) => {
     const avatars = React__namespace.useContext(AvatarsContext);
     const variant = React__namespace.useContext(MessageVariantContext);
@@ -896,7 +920,13 @@ const Message = ({ message }) => {
                     React__namespace.createElement(MessageControl, { message: message }))))));
 };
 const MessageList = ({ messages, }) => {
-    return (React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageList }, messages.map((message, i) => (React__namespace.createElement(Message, { key: `message-${i}`, message: message })))));
+    const isLoading = React__namespace.useContext(LoadingContext);
+    const messagesWithRenderableContent = messages?.filter((message) => message.content.some((content) => content.image ??
+        content.text ??
+        content.toolUse?.name.startsWith(RESPONSE_COMPONENT_PREFIX))) ?? [];
+    return (React__namespace.createElement(uiReact.View, { className: ui.ComponentClassName.AIConversationMessageList },
+        messagesWithRenderableContent.map((message, i) => (React__namespace.createElement(Message, { key: `message-${i}`, message: message }))),
+        isLoading ? React__namespace.createElement(LoadingMessage, null) : null));
 };
 
 const Attachment = ({ file, handleRemove, }) => {
@@ -941,6 +971,9 @@ const Form = ({ setInput, input, handleSubmit, }) => {
         React__namespace.createElement(uiReact.View, { as: "form", className: ui.ComponentClassName.AIConversationForm, onSubmit: handleSubmit },
             React__namespace.createElement(uiReact.Button, { className: ui.ComponentClassName.AIConversationFormAttach, onClick: () => {
                     hiddenInput?.current?.click();
+                    if (hiddenInput?.current) {
+                        hiddenInput.current.value = '';
+                    }
                 } },
                 React__namespace.createElement("span", null, attachIcon),
                 React__namespace.createElement(uiReact.VisuallyHidden, null,
@@ -953,8 +986,8 @@ const Form = ({ setInput, input, handleSubmit, }) => {
                                 ...prevValue,
                                 files: [...(prevValue?.files ?? []), ...Array.from(files)],
                             }));
-                        }, multiple: true, accept: "*" }))),
-            React__namespace.createElement(uiReact.TextAreaField, { className: ui.ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', onKeyDown: (e) => {
+                        }, multiple: true, accept: "*", "data-testid": "hidden-file-input" }))),
+            React__namespace.createElement(uiReact.TextAreaField, { className: ui.ComponentClassName.AIConversationFormField, label: "input", labelHidden: true, autoResize: true, flex: "1", rows: 1, value: input?.text ?? '', testId: "text-input", onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
                     const shouldSubmit = !e.shiftKey && e.key === 'Enter';
                     if (shouldSubmit && isHTMLFormElement(e.target)) {

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

@@ -14,8 +14,8 @@ export declare const AIConversation: typeof AIConversationBase & {
         suggestedPrompts?: import("./types").SuggestedPrompt[] | undefined;
         setInput: React.Dispatch<React.SetStateAction<import("./context").ConversationInput | undefined>> | undefined;
     }> | undefined;
-    Form: React.ComponentType<{
+    Form: NonNullable<React.ComponentType<{
         handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-    } & Required<import("./context").ConversationInputContext>> | undefined;
+    } & Required<import("./context").ConversationInputContext>> | undefined>;
 };
 export {};

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { ResponseComponents } from '../types';
 import { ToolConfiguration } from '../../../types';
 type ResponseComponentsContextProps = ResponseComponents | undefined;
+export declare const RESPONSE_COMPONENT_PREFIX = "AMPLIFY_UI_";
 export declare const ResponseComponentsContext: React.Context<ResponseComponentsContextProps>;
 export declare const ResponseComponentsProvider: ({ children, responseComponents, }: {
     children?: React.ReactNode;

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

@@ -7,6 +7,6 @@ export { MessageVariantContext, MessageVariantProvider, } from './MessageVariant
 export { ConversationDisplayTextContext, useConversationDisplayText, ConversationDisplayTextProvider, } from './DisplayTextContext';
 export { ControlsContext, ControlsContextProps, ControlsProvider, } from './ControlsContext';
 export { LoadingContextProvider } from './LoadingContext';
-export { ResponseComponentsProvider } from './ResponseComponentsContext';
+export { ResponseComponentsProvider, RESPONSE_COMPONENT_PREFIX, } from './ResponseComponentsContext';
 export { SendMessageContextProvider } from './SendMessageContext';
 export * from './elements';

package/dist/types/components/AIConversation/views/default/Form.d.ts

@@ -1,2 +1,2 @@
 import { ControlsContextProps } from '../../context/ControlsContext';
-export declare const Form: ControlsContextProps['Form'];
+export declare const Form: NonNullable<ControlsContextProps['Form']>;

package/package.json

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