@aws-amplify/ui-react-ai 1.4.0 → 1.5.0

package/README.md

@@ -1,23 +1,29 @@
-# Amplify UI
+# Amplify UI React AI
 
-Amplify UI is an open-source UI library with cloud-connected components that are endlessly customizable, accessible, and can integrate into _any_ application. Amplify UI consists of:
+The React AI package provides components and utilities for AI-powered conversations and interactions in Amplify connected applications.
 
-1. Connected components that simplify complex cloud-connected workflows, like Authenticator.
-2. Primitive components that create consistency across Amplify UI and allow you to build complete applications that fit your brand, like Buttons and Badges.
-3. Data-bound components that make it easy to display dynamic data, like DataStoreCollections.
-4. Theming capabilities that allow you to customize the appearance of Amplify UI to match your brand.
+## Contents
 
-## React Documentation
+### Core Components
 
-- https://ui.docs.amplify.aws/react
+- `AIConversation` - Component for AI-powered conversations
+- `createAIConversation` - Factory function for creating AI conversation components
+
+### Utility Functions
 
-## Features 🚀
+- `createAIHooks` - Factory function for creating AI-related hooks
 
-- **Better developer experience** Connected-components like Authenticator are being written with framework-specific implementations so that they follow framework conventions and are easier to integrate into your application.
-- **Endlessly customizable** Every detail of Amplify UI is customizable to match your brand. Style all of Amplify UI with themes, override components with your own, or build your own UI and use Amplify for complex state management.
-- **Accessible** Amplify UI components follow [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) and [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) best practices and guidelines such as color contrast, keyboard navigation, accessible labels, and focus management.
-- **Primitive components (React only right now)** Primitive components are used in the connected components, like Authenticator, you can also customize them and use them to build the rest of your UI.
+### Type Definitions
 
-## We love contributors!!
+- `Avatars` - Type for avatar configurations
+- `CustomAction` - Type for custom actions
+- `ResponseComponent` - Type for response components
+- `SuggestedPrompt` - Type for suggested prompts
+- `ConversationMessage` - Type for conversation messages
+- `ConversationMessageContent` - Type for conversation message content
+- `SendMessage` - Type for send message function
+- `SendMesageParameters` - Type for send message parameters
 
-See our contributing guide [CONTRIBUTING.md](/CONTRIBUTING.md) to help us scale Amplify UI!
+## React Documentation
+
+- https://ui.docs.amplify.aws/react

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Flex, ScrollView } from '@aws-amplify/ui-react';
-import { useIcons, IconAssistant, IconUser } from '@aws-amplify/ui-react/internal';
+import { useIcons, IconUser, IconAssistant } from '@aws-amplify/ui-react/internal';
+import useConversationScrollProps from './useConversationScrollProps.mjs';
 import { MessagesControl } from './views/Controls/MessagesControl.mjs';
 import { FormControl } from './views/Controls/FormControl.mjs';
 import { MessageList } from './views/default/MessageList.mjs';
@@ -12,7 +13,7 @@ import { useSetUserAgent } from '@aws-amplify/ui-react-core';
 import { VERSION } from '../../version.mjs';
 import { DefaultMessageControl } from './views/Controls/DefaultMessageControl.mjs';
 
-function AIConversationBase({ avatars, controls, ...rest }) {
+function AIConversationBase({ avatars, controls, messages, ...rest }) {
     useSetUserAgent({
         componentName: 'AIConversation',
         packageName: 'react-ai',
@@ -31,20 +32,14 @@ function AIConversationBase({ avatars, controls, ...rest }) {
     };
     const providerProps = {
         ...rest,
-        avatars: {
-            ...defaultAvatars,
-            ...avatars,
-        },
-        controls: {
-            MessageList,
-            PromptList,
-            Form,
-            ...controls,
-        },
+        avatars: { ...defaultAvatars, ...avatars },
+        controls: { MessageList, PromptList, Form, ...controls },
+        messages,
     };
+    const scrollProps = useConversationScrollProps(messages);
     return (React.createElement(AIConversationProvider, { ...providerProps },
         React.createElement(Flex, { className: ComponentClassName.AIConversation, testId: "ai-conversation" },
-            React.createElement(ScrollView, { autoScroll: "smooth", flex: "1" },
+            React.createElement(ScrollView, { ...scrollProps, flex: "1" },
                 React.createElement(DefaultMessageControl, null),
                 React.createElement(MessagesControl, null)),
             React.createElement(FormControl, null))));

package/dist/esm/components/AIConversation/context/elements/definitions.mjs

@@ -17,15 +17,15 @@ const ListItemElement = defineBaseElementWithRef({
     type: 'li',
     displayName: 'ListItem',
 });
-const HeadingElement = defineBaseElementWithRef({
+defineBaseElementWithRef({
     type: 'h2',
     displayName: 'Title',
 });
-const ImageElement = defineBaseElementWithRef({
+defineBaseElementWithRef({
     type: 'img',
     displayName: 'Image',
 });
-const InputElement = defineBaseElementWithRef({
+defineBaseElementWithRef({
     type: 'input',
     displayName: 'Input',
 });
@@ -44,10 +44,7 @@ const TextAreaElement = defineBaseElementWithRef({
 });
 const AIConversationElements = {
     Button: ButtonElement,
-    Heading: HeadingElement,
     Icon: IconElement,
-    Input: InputElement,
-    Image: ImageElement,
     Label: LabelElement,
     ListItem: ListItemElement,
     Span: SpanElement,
@@ -57,4 +54,4 @@ const AIConversationElements = {
     View: ViewElement,
 };
 
-export { AIConversationElements, ButtonElement, HeadingElement, ImageElement, InputElement, LabelElement, ListItemElement, SpanElement, TextAreaElement, TextElement, UnorderedListElement, ViewElement };
+export { AIConversationElements, ButtonElement, LabelElement, ListItemElement, SpanElement, TextAreaElement, TextElement, UnorderedListElement, ViewElement };

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

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { useHasValueUpdated } from '@aws-amplify/ui-react-core';
+
+function useConversationScrollProps(messages) {
+    const [autoScroll, setAutoScroll] = React.useState('smooth');
+    const messagesLength = messages.length;
+    const hasMessagesLengthChanged = useHasValueUpdated(messagesLength, true);
+    const lastScrollTop = React.useRef();
+    const onScroll = ({ currentTarget }) => {
+        if (autoScroll !== 'smooth')
+            return;
+        const { scrollTop } = currentTarget;
+        // set `autoScroll` and `lastScrollTop` to `undefined` on user scroll up
+        if (lastScrollTop.current && scrollTop < lastScrollTop.current) {
+            setAutoScroll(undefined);
+            lastScrollTop.current = undefined;
+        }
+        else {
+            lastScrollTop.current = scrollTop;
+        }
+    };
+    React.useEffect(() => {
+        // reset `autoScroll` to 'smooth' on new message
+        if (hasMessagesLengthChanged) {
+            setAutoScroll('smooth');
+        }
+    }, [hasMessagesLengthChanged]);
+    return { autoScroll, onScroll };
+}
+
+export { useConversationScrollProps as default };

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

@@ -46,7 +46,20 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isL
                             }
                             onValidate(Array.from(e.target.files));
                         }, multiple: true, accept: [...validFileTypes].map((type) => `.${type}`).join(','), "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) => {
+            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), onCompositionUpdate: (e) => {
+                    const composedText = e?.currentTarget?.value || '';
+                    setInput?.((prevValue) => ({
+                        ...prevValue,
+                        text: composedText,
+                    }));
+                }, onCompositionEnd: (e) => {
+                    setComposing(false);
+                    const composedText = e?.currentTarget?.value || '';
+                    setInput?.((prevValue) => ({
+                        ...prevValue,
+                        text: composedText,
+                    }));
+                }, onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
                     const shouldSubmit = !e.shiftKey && e.key === 'Enter' && !composing;
                     if (shouldSubmit && isHTMLFormElement(e.target)) {

package/dist/esm/hooks/useAIConversation.mjs

@@ -27,11 +27,11 @@ function createUseAIConversation(client) {
         // it will create a new conversation when it is executed
         // we don't want to create 2 conversations
         const initRef = React__default.useRef('initial');
-        const [dataState, setDataState] = React__default.useState(() => ({
+        const [clientState, setClientState] = React__default.useState(() => ({
             ...INITIAL_STATE,
             data: { messages: [], conversation: undefined },
         }));
-        const { conversation } = dataState.data;
+        const { conversation } = clientState.data;
         const { id, onInitialize, onMessage } = input;
         React__default.useEffect(() => {
             async function initialize() {
@@ -43,7 +43,7 @@ function createUseAIConversation(client) {
                 // Only show component loading state if we are
                 // actually loading messages
                 if (id) {
-                    setDataState({
+                    setClientState({
                         ...LOADING_STATE,
                         data: { messages: [], conversation: undefined },
                     });
@@ -52,7 +52,7 @@ function createUseAIConversation(client) {
                     ? await clientRoute.get({ id })
                     : await clientRoute.create();
                 if (errors ?? !conversation) {
-                    setDataState({
+                    setClientState({
                         ...ERROR_STATE,
                         data: { messages: [] },
                         messages: errors,
@@ -63,13 +63,13 @@ function createUseAIConversation(client) {
                         const { data: messages } = await exhaustivelyListMessages({
                             conversation,
                         });
-                        setDataState({
+                        setClientState({
                             ...INITIAL_STATE,
                             data: { messages, conversation },
                         });
                     }
                     else {
-                        setDataState({
+                        setClientState({
                             ...INITIAL_STATE,
                             data: { conversation, messages: [] },
                         });
@@ -87,7 +87,7 @@ function createUseAIConversation(client) {
                     errorInfo: null,
                     errorType: '',
                 };
-                setDataState({
+                setClientState({
                     ...ERROR_STATE,
                     data: { messages: [] },
                     // TODO in MV bump: remove `messages`
@@ -101,12 +101,12 @@ function createUseAIConversation(client) {
                 contentBlocksRef.current = undefined;
                 if (hasStarted(initRef.current))
                     return;
-                setDataState({
+                setClientState({
                     ...INITIAL_STATE,
                     data: { messages: [], conversation: undefined },
                 });
             };
-        }, [clientRoute, id, setDataState]);
+        }, [clientRoute, id, setClientState]);
         // Run a separate effect that is triggered by the conversation state
         // so that we know we have a conversation object to set up the subscription
         // and also unsubscribe on cleanup
@@ -134,7 +134,7 @@ function createUseAIConversation(client) {
                     // stop reason will signify end of conversation turn
                     if (stopReason) {
                         // remove loading state from streamed message
-                        setDataState((prev) => {
+                        setClientState((prev) => {
                             return {
                                 ...prev,
                                 data: {
@@ -181,7 +181,7 @@ function createUseAIConversation(client) {
                             ];
                         }
                     }
-                    setDataState((prev) => {
+                    setClientState((prev) => {
                         const message = {
                             id,
                             conversationId,
@@ -202,7 +202,7 @@ function createUseAIConversation(client) {
                     });
                 },
                 error: (error) => {
-                    setDataState((prev) => {
+                    setClientState((prev) => {
                         return {
                             ...prev,
                             ...ERROR_STATE,
@@ -220,11 +220,11 @@ function createUseAIConversation(client) {
                 contentBlocksRef.current = undefined;
                 subscription.unsubscribe();
             };
-        }, [conversation, onInitialize, onMessage, setDataState]);
+        }, [conversation, onInitialize, onMessage, setClientState]);
         const handleSendMessage = React__default.useCallback((input) => {
             const { content } = input;
             if (conversation) {
-                setDataState((prevState) => ({
+                setClientState((prevState) => ({
                     ...prevState,
                     data: {
                         ...prevState.data,
@@ -257,7 +257,7 @@ function createUseAIConversation(client) {
                     errorInfo: null,
                     errorType: '',
                 };
-                setDataState((prev) => ({
+                setClientState((prev) => ({
                     ...prev,
                     ...ERROR_STATE,
                     // TODO in MV bump: remove `messages`
@@ -266,7 +266,7 @@ function createUseAIConversation(client) {
                 }));
             }
         }, [conversation]);
-        return [dataState, handleSendMessage];
+        return [clientState, handleSendMessage];
     };
     return useAIConversation;
 }

package/dist/esm/hooks/useAIGeneration.mjs

@@ -3,26 +3,19 @@ import { INITIAL_STATE, LOADING_STATE, ERROR_STATE } from './shared.mjs';
 
 function createUseAIGeneration(client) {
     const useAIGeneration = (routeName) => {
-        const [dataState, setDataState] = React.useState(() => ({
-            ...INITIAL_STATE,
-            data: undefined,
-        }));
+        const [clientState, setClientState] = React.useState(() => ({ ...INITIAL_STATE, data: undefined }));
         const handleGeneration = React.useCallback(async (input) => {
-            setDataState(({ data }) => ({ ...LOADING_STATE, data }));
+            setClientState(({ data }) => ({ ...LOADING_STATE, data }));
             const result = await client.generations[routeName](input);
             const { data, errors } = result;
             if (errors) {
-                setDataState({
-                    ...ERROR_STATE,
-                    data,
-                    messages: errors,
-                });
+                setClientState({ ...ERROR_STATE, data, messages: errors });
             }
             else {
-                setDataState({ ...INITIAL_STATE, data });
+                setClientState({ ...INITIAL_STATE, data });
             }
         }, [routeName]);
-        return [dataState, handleGeneration];
+        return [clientState, handleGeneration];
     };
     return useAIGeneration;
 }

package/dist/esm/version.mjs

@@ -1,3 +1,3 @@
-const VERSION = '1.4.0';
+const VERSION = '1.5.0';
 
 export { VERSION };

package/dist/index.js

@@ -342,15 +342,15 @@ const ListItemElement = elements.defineBaseElementWithRef({
     type: 'li',
     displayName: 'ListItem',
 });
-const HeadingElement = elements.defineBaseElementWithRef({
+elements.defineBaseElementWithRef({
     type: 'h2',
     displayName: 'Title',
 });
-const ImageElement = elements.defineBaseElementWithRef({
+elements.defineBaseElementWithRef({
     type: 'img',
     displayName: 'Image',
 });
-const InputElement = elements.defineBaseElementWithRef({
+elements.defineBaseElementWithRef({
     type: 'input',
     displayName: 'Input',
 });
@@ -369,10 +369,7 @@ const TextAreaElement = elements.defineBaseElementWithRef({
 });
 const AIConversationElements = {
     Button: ButtonElement,
-    Heading: HeadingElement,
     Icon: IconElement,
-    Input: InputElement,
-    Image: ImageElement,
     Label: LabelElement$1,
     ListItem: ListItemElement,
     Span: SpanElement,
@@ -1037,6 +1034,33 @@ function createAIConversation(input = {}) {
     return { AIConversation };
 }
 
+function useConversationScrollProps(messages) {
+    const [autoScroll, setAutoScroll] = React__namespace.useState('smooth');
+    const messagesLength = messages.length;
+    const hasMessagesLengthChanged = uiReactCore.useHasValueUpdated(messagesLength, true);
+    const lastScrollTop = React__namespace.useRef();
+    const onScroll = ({ currentTarget }) => {
+        if (autoScroll !== 'smooth')
+            return;
+        const { scrollTop } = currentTarget;
+        // set `autoScroll` and `lastScrollTop` to `undefined` on user scroll up
+        if (lastScrollTop.current && scrollTop < lastScrollTop.current) {
+            setAutoScroll(undefined);
+            lastScrollTop.current = undefined;
+        }
+        else {
+            lastScrollTop.current = scrollTop;
+        }
+    };
+    React__namespace.useEffect(() => {
+        // reset `autoScroll` to 'smooth' on new message
+        if (hasMessagesLengthChanged) {
+            setAutoScroll('smooth');
+        }
+    }, [hasMessagesLengthChanged]);
+    return { autoScroll, onScroll };
+}
+
 const PlaceholderMessage = ({ role }) => {
     const variant = React__namespace.useContext(MessageVariantContext);
     return (React__namespace.createElement(uiReact.View, { className: ui.classNames(ui.ComponentClassName.AIConversationMessage, ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, variant), ui.classNameModifier(ui.ComponentClassName.AIConversationMessage, role)) },
@@ -1163,7 +1187,20 @@ const Form = ({ setInput, input, handleSubmit, allowAttachments, onValidate, isL
                             }
                             onValidate(Array.from(e.target.files));
                         }, multiple: true, accept: [...validFileTypes].map((type) => `.${type}`).join(','), "data-testid": "hidden-file-input" })))) : null,
-            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", onCompositionStart: () => setComposing(true), onCompositionEnd: () => setComposing(false), onKeyDown: (e) => {
+            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", onCompositionStart: () => setComposing(true), onCompositionUpdate: (e) => {
+                    const composedText = e?.currentTarget?.value || '';
+                    setInput?.((prevValue) => ({
+                        ...prevValue,
+                        text: composedText,
+                    }));
+                }, onCompositionEnd: (e) => {
+                    setComposing(false);
+                    const composedText = e?.currentTarget?.value || '';
+                    setInput?.((prevValue) => ({
+                        ...prevValue,
+                        text: composedText,
+                    }));
+                }, onKeyDown: (e) => {
                     // Submit on enter key if shift is not pressed also
                     const shouldSubmit = !e.shiftKey && e.key === 'Enter' && !composing;
                     if (shouldSubmit && isHTMLFormElement(e.target)) {
@@ -1193,9 +1230,9 @@ const PromptList = ({ setInput, suggestedPrompts = [], }) => {
     })));
 };
 
-const VERSION = '1.4.0';
+const VERSION = '1.5.0';
 
-function AIConversationBase({ avatars, controls, ...rest }) {
+function AIConversationBase({ avatars, controls, messages, ...rest }) {
     uiReactCore.useSetUserAgent({
         componentName: 'AIConversation',
         packageName: 'react-ai',
@@ -1214,20 +1251,14 @@ function AIConversationBase({ avatars, controls, ...rest }) {
     };
     const providerProps = {
         ...rest,
-        avatars: {
-            ...defaultAvatars,
-            ...avatars,
-        },
-        controls: {
-            MessageList,
-            PromptList,
-            Form,
-            ...controls,
-        },
+        avatars: { ...defaultAvatars, ...avatars },
+        controls: { MessageList, PromptList, Form, ...controls },
+        messages,
     };
+    const scrollProps = useConversationScrollProps(messages);
     return (React__namespace.createElement(AIConversationProvider, { ...providerProps },
         React__namespace.createElement(uiReact.Flex, { className: ui.ComponentClassName.AIConversation, testId: "ai-conversation" },
-            React__namespace.createElement(uiReact.ScrollView, { autoScroll: "smooth", flex: "1" },
+            React__namespace.createElement(uiReact.ScrollView, { ...scrollProps, flex: "1" },
                 React__namespace.createElement(DefaultMessageControl, null),
                 React__namespace.createElement(MessagesControl, null)),
             React__namespace.createElement(FormControl, null))));
@@ -1254,26 +1285,19 @@ const ERROR_STATE = { hasError: true, isLoading: false };
 
 function createUseAIGeneration(client) {
     const useAIGeneration = (routeName) => {
-        const [dataState, setDataState] = React__namespace.useState(() => ({
-            ...INITIAL_STATE,
-            data: undefined,
-        }));
+        const [clientState, setClientState] = React__namespace.useState(() => ({ ...INITIAL_STATE, data: undefined }));
         const handleGeneration = React__namespace.useCallback(async (input) => {
-            setDataState(({ data }) => ({ ...LOADING_STATE, data }));
+            setClientState(({ data }) => ({ ...LOADING_STATE, data }));
             const result = await client.generations[routeName](input);
             const { data, errors } = result;
             if (errors) {
-                setDataState({
-                    ...ERROR_STATE,
-                    data,
-                    messages: errors,
-                });
+                setClientState({ ...ERROR_STATE, data, messages: errors });
             }
             else {
-                setDataState({ ...INITIAL_STATE, data });
+                setClientState({ ...INITIAL_STATE, data });
             }
         }, [routeName]);
-        return [dataState, handleGeneration];
+        return [clientState, handleGeneration];
     };
     return useAIGeneration;
 }
@@ -1340,11 +1364,11 @@ function createUseAIConversation(client) {
         // it will create a new conversation when it is executed
         // we don't want to create 2 conversations
         const initRef = React__namespace["default"].useRef('initial');
-        const [dataState, setDataState] = React__namespace["default"].useState(() => ({
+        const [clientState, setClientState] = React__namespace["default"].useState(() => ({
             ...INITIAL_STATE,
             data: { messages: [], conversation: undefined },
         }));
-        const { conversation } = dataState.data;
+        const { conversation } = clientState.data;
         const { id, onInitialize, onMessage } = input;
         React__namespace["default"].useEffect(() => {
             async function initialize() {
@@ -1356,7 +1380,7 @@ function createUseAIConversation(client) {
                 // Only show component loading state if we are
                 // actually loading messages
                 if (id) {
-                    setDataState({
+                    setClientState({
                         ...LOADING_STATE,
                         data: { messages: [], conversation: undefined },
                     });
@@ -1365,7 +1389,7 @@ function createUseAIConversation(client) {
                     ? await clientRoute.get({ id })
                     : await clientRoute.create();
                 if (errors ?? !conversation) {
-                    setDataState({
+                    setClientState({
                         ...ERROR_STATE,
                         data: { messages: [] },
                         messages: errors,
@@ -1376,13 +1400,13 @@ function createUseAIConversation(client) {
                         const { data: messages } = await exhaustivelyListMessages({
                             conversation,
                         });
-                        setDataState({
+                        setClientState({
                             ...INITIAL_STATE,
                             data: { messages, conversation },
                         });
                     }
                     else {
-                        setDataState({
+                        setClientState({
                             ...INITIAL_STATE,
                             data: { conversation, messages: [] },
                         });
@@ -1400,7 +1424,7 @@ function createUseAIConversation(client) {
                     errorInfo: null,
                     errorType: '',
                 };
-                setDataState({
+                setClientState({
                     ...ERROR_STATE,
                     data: { messages: [] },
                     // TODO in MV bump: remove `messages`
@@ -1414,12 +1438,12 @@ function createUseAIConversation(client) {
                 contentBlocksRef.current = undefined;
                 if (hasStarted(initRef.current))
                     return;
-                setDataState({
+                setClientState({
                     ...INITIAL_STATE,
                     data: { messages: [], conversation: undefined },
                 });
             };
-        }, [clientRoute, id, setDataState]);
+        }, [clientRoute, id, setClientState]);
         // Run a separate effect that is triggered by the conversation state
         // so that we know we have a conversation object to set up the subscription
         // and also unsubscribe on cleanup
@@ -1447,7 +1471,7 @@ function createUseAIConversation(client) {
                     // stop reason will signify end of conversation turn
                     if (stopReason) {
                         // remove loading state from streamed message
-                        setDataState((prev) => {
+                        setClientState((prev) => {
                             return {
                                 ...prev,
                                 data: {
@@ -1494,7 +1518,7 @@ function createUseAIConversation(client) {
                             ];
                         }
                     }
-                    setDataState((prev) => {
+                    setClientState((prev) => {
                         const message = {
                             id,
                             conversationId,
@@ -1515,7 +1539,7 @@ function createUseAIConversation(client) {
                     });
                 },
                 error: (error) => {
-                    setDataState((prev) => {
+                    setClientState((prev) => {
                         return {
                             ...prev,
                             ...ERROR_STATE,
@@ -1533,11 +1557,11 @@ function createUseAIConversation(client) {
                 contentBlocksRef.current = undefined;
                 subscription.unsubscribe();
             };
-        }, [conversation, onInitialize, onMessage, setDataState]);
+        }, [conversation, onInitialize, onMessage, setClientState]);
         const handleSendMessage = React__namespace["default"].useCallback((input) => {
             const { content } = input;
             if (conversation) {
-                setDataState((prevState) => ({
+                setClientState((prevState) => ({
                     ...prevState,
                     data: {
                         ...prevState.data,
@@ -1570,7 +1594,7 @@ function createUseAIConversation(client) {
                     errorInfo: null,
                     errorType: '',
                 };
-                setDataState((prev) => ({
+                setClientState((prev) => ({
                     ...prev,
                     ...ERROR_STATE,
                     // TODO in MV bump: remove `messages`
@@ -1579,7 +1603,7 @@ function createUseAIConversation(client) {
                 }));
             }
         }, [conversation]);
-        return [dataState, handleSendMessage];
+        return [clientState, handleSendMessage];
     };
     return useAIConversation;
 }

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

@@ -1,4 +1,4 @@
-import { AIConversation as AIConversationType, AIConversationInput, AIConversationProps } from './types';
+import type { AIConversation as AIConversationType, AIConversationInput, AIConversationProps } from './types';
 interface AIConversationBaseProps extends AIConversationProps, AIConversationInput {
 }
 export declare const AIConversation: AIConversationType<AIConversationBaseProps>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AIConversationInput, AIConversationProps } from './types';
+import type { AIConversationInput, AIConversationProps } from './types';
 export interface AIConversationProviderProps extends AIConversationInput, AIConversationProps {
     children?: React.ReactNode;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CustomAction } from '../types';
+import type { CustomAction } from '../types';
 export declare const ActionsContext: React.Context<CustomAction[] | undefined>;
 export declare const ActionsProvider: ({ children, actions, }: {
     children?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AIConversationInput } from '../types';
+import type { AIConversationInput } from '../types';
 export interface AttachmentContextProps extends Pick<AIConversationInput, 'allowAttachments' | 'maxAttachments' | 'maxAttachmentSize'> {
 }
 export declare const AttachmentContext: React.Context<Required<AttachmentContextProps>>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Avatars } from '../types';
+import type { Avatars } from '../types';
 export declare const AvatarsContext: React.Context<Avatars | undefined>;
 export declare const AvatarsProvider: ({ children, avatars, }: {
     children?: React.ReactNode;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ConversationInputContextProps } from './ConversationInputContext';
-import { SuggestedPrompt } from '../types';
-import { ConversationMessage } from '../../../types';
+import type { ConversationInputContextProps } from './ConversationInputContext';
+import type { SuggestedPrompt } from '../types';
+import type { ConversationMessage } from '../../../types';
 export interface ControlsContextProps {
     Form?: React.ComponentType<{
         handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;

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

@@ -1,4 +1,4 @@
-import { ConversationDisplayText } from '../displayText';
+import type { ConversationDisplayText } from '../displayText';
 export declare const ConversationDisplayTextContext: import("react").Context<Required<ConversationDisplayText>>, ConversationDisplayTextProvider: import("react").ComponentType<import("react").PropsWithChildren<Required<ConversationDisplayText>>>, useConversationDisplayText: (params?: {
     errorMessage?: string | undefined;
 } | undefined) => Required<ConversationDisplayText>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AIConversationInput } from '../types';
+import type { AIConversationInput } from '../types';
 export declare const FallbackComponentContext: React.Context<React.ComponentType<any> | undefined>;
 export declare const FallbackComponentProvider: ({ children, FallbackComponent, }: {
     children?: React.ReactNode;

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

@@ -1,4 +1,4 @@
-import { MessageRenderer } from '../types';
+import type { MessageRenderer } from '../types';
 export declare const MessageRendererContext: import("react").Context<MessageRenderer>, MessageRendererProvider: import("react").ComponentType<import("react").PropsWithChildren<MessageRenderer>>, useMessageRenderer: (params?: {
     errorMessage?: string | undefined;
 } | undefined) => MessageRenderer;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MessageVariant } from '../types';
+import type { MessageVariant } from '../types';
 export declare const MessageVariantContext: React.Context<MessageVariant | undefined>;
 export declare const MessageVariantProvider: ({ children, variant, }: {
     children?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ConversationMessage } from '../../../types';
+import type { ConversationMessage } from '../../../types';
 type MessagesContextProps = ConversationMessage[] | undefined;
 export declare const MessagesContext: React.Context<MessagesContextProps>;
 export declare const RoleContext: React.Context<"user" | "assistant" | undefined>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToolConfiguration, ResponseComponents } from '../../../types';
+import type { ToolConfiguration, ResponseComponents } from '../../../types';
 type ResponseComponentsContextProps = ResponseComponents | undefined;
 export declare const RESPONSE_COMPONENT_PREFIX = "AMPLIFY_UI_";
 export declare const ResponseComponentsContext: React.Context<ResponseComponentsContextProps>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SendMessage } from '../../../types';
+import type { SendMessage } from '../../../types';
 export declare const SendMessageContext: React.Context<SendMessage | undefined>;
 export declare const SendMessageContextProvider: ({ children, handleSendMessage, }: {
     children?: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SuggestedPrompt } from '../types';
+import type { SuggestedPrompt } from '../types';
 type SuggestedPromptsContextProps = SuggestedPrompt[] | undefined;
 export declare const SuggestedPromptsContext: React.Context<SuggestedPromptsContextProps>;
 export declare const SuggestedPromptProvider: ({ children, suggestedPrompts, }: {

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

@@ -1,17 +1,20 @@
 export { AIContextContext, AIContextProvider } from './AIContextContext';
 export { ActionsContext, ActionsProvider } from './ActionsContext';
 export { AvatarsContext, AvatarsProvider } from './AvatarsContext';
-export { ConversationInputContextProps, ConversationInputContext, ConversationInput, ConversationInputContextProvider, } from './ConversationInputContext';
+export type { ConversationInputContextProps, ConversationInput, } from './ConversationInputContext';
+export { ConversationInputContext, ConversationInputContextProvider, } from './ConversationInputContext';
 export { MessagesContext, RoleContext, MessagesProvider, } from './MessagesContext';
 export { SuggestedPromptsContext, SuggestedPromptProvider, } from './SuggestedPromptsContext';
 export { MessageVariantContext, MessageVariantProvider, } from './MessageVariantContext';
 export { ConversationDisplayTextContext, useConversationDisplayText, ConversationDisplayTextProvider, } from './DisplayTextContext';
-export { ControlsContext, ControlsContextProps, ControlsProvider, } from './ControlsContext';
+export type { ControlsContextProps } from './ControlsContext';
+export { ControlsContext, ControlsProvider } from './ControlsContext';
 export { LoadingContextProvider } from './LoadingContext';
 export { ResponseComponentsProvider, RESPONSE_COMPONENT_PREFIX, } from './ResponseComponentsContext';
 export { SendMessageContextProvider } from './SendMessageContext';
 export { MessageRendererProvider, MessageRendererContext, useMessageRenderer, } from './MessageRenderContext';
-export { AttachmentProvider, AttachmentContext, AttachmentContextProps, } from './AttachmentContext';
+export type { AttachmentContextProps } from './AttachmentContext';
+export { AttachmentProvider, AttachmentContext } from './AttachmentContext';
 export { WelcomeMessageContext, WelcomeMessageProvider, } from './WelcomeMessageContext';
 export { FallbackComponentContext, FallbackComponentProvider, } from './FallbackComponentContext';
 export * from './elements';

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

@@ -1,4 +1,4 @@
-import { AIConversationInput, AIConversation } from './types';
+import type { AIConversationInput, AIConversation } from './types';
 export declare function createAIConversation(input?: AIConversationInput): {
     AIConversation: AIConversation;
 };

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

@@ -1,4 +1,4 @@
-import { DisplayTextTemplate } from '@aws-amplify/ui';
+import type { DisplayTextTemplate } from '@aws-amplify/ui';
 export type ConversationDisplayText = {
     getMessageTimestampText?: (date: Date) => string;
     getMaxAttachmentErrorText?: (count: number) => string;

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

@@ -1,5 +1,6 @@
 import { createAIConversation } from './createAIConversation';
 import { AIConversation } from './AIConversation';
-import { Avatars, CustomAction, SuggestedPrompt } from './types';
-import { ResponseComponent } from '../../types';
-export { createAIConversation, AIConversation, Avatars, CustomAction, ResponseComponent, SuggestedPrompt, };
+import type { Avatars, CustomAction, SuggestedPrompt } from './types';
+import type { ResponseComponent } from '../../types';
+export type { Avatars, CustomAction, ResponseComponent, SuggestedPrompt };
+export { createAIConversation, AIConversation };

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import { ActionsBarControl, AvatarControl, FormControl, MessagesControl, PromptControl } from './views';
-import { DisplayTextTemplate } from '@aws-amplify/ui';
-import { AIConversationDisplayText } from './displayText';
-import { ConversationMessage, SendMessage, ResponseComponents, TextContentBlock, ImageContentBlock } from '../../types';
-import { ControlsContextProps } from './context/ControlsContext';
-import { AIConversationProviderProps } from './AIConversationProvider';
+import type React from 'react';
+import type { ActionsBarControl, AvatarControl, FormControl, MessagesControl, PromptControl } from './views';
+import type { DisplayTextTemplate } from '@aws-amplify/ui';
+import type { AIConversationDisplayText } from './displayText';
+import type { ConversationMessage, SendMessage, ResponseComponents, TextContentBlock, ImageContentBlock } from '../../types';
+import type { ControlsContextProps } from './context/ControlsContext';
+import type { AIConversationProviderProps } from './AIConversationProvider';
 export interface Controls {
     Avatars: AvatarControl;
     ActionsBar: ActionsBarControl;

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

@@ -0,0 +1,6 @@
+import type { ScrollViewProps } from '@aws-amplify/ui-react';
+import type { ConversationMessage } from '../../types';
+interface ConverationScrollProps extends Pick<ScrollViewProps, 'onScroll' | 'autoScroll'> {
+}
+export default function useConversationScrollProps(messages: ConversationMessage[]): ConverationScrollProps;
+export {};

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

@@ -1,4 +1,4 @@
-import { ImageContentBlock, DocumentContentBlock } from '../../types';
+import type { ImageContentBlock, DocumentContentBlock } from '../../types';
 export declare function formatDate(date: Date): string;
 export declare function convertBufferToBase64(buffer: ArrayBuffer, format: ImageContentBlock['format']): string;
 export declare function getAttachmentFormat(file: File): string;

package/dist/types/components/AIConversation/views/Controls/ActionsBarControl.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { AIConversationElements } from '../../context/elements';
-import { ConversationMessage } from '../../../../types';
+import type { ConversationMessage } from '../../../../types';
 export declare const ActionsBarControl: ActionsBarControl;
 export interface ActionsBarControl {
     (props: {

package/dist/types/components/AIConversation/views/Controls/MessagesControl.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AIConversationElements } from '../../context/elements';
 import { ActionsBarControl } from './ActionsBarControl';
 import { AvatarControl } from './AvatarControl';
-import { ConversationMessage } from '../../../../types';
+import type { ConversationMessage } from '../../../../types';
 export declare const DocumentContent: ({ format, name, source, }: NonNullable<ConversationMessage['content'][number]['document']>) => React.JSX.Element;
 export declare const MessageControl: MessageControl;
 interface MessageControl {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ConversationInputContextProps } from '../../context';
+import type { ConversationInputContextProps } from '../../context';
 export declare const Attachments: ({ files, setInput, }: {
     files?: File[] | undefined;
     setInput: ConversationInputContextProps['setInput'];

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

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

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

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

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

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

package/dist/types/hooks/contentFromEvents.d.ts

@@ -1,2 +1,2 @@
-import { ConversationMessage, ConversationStreamEvent } from '../types';
+import type { ConversationMessage, ConversationStreamEvent } from '../types';
 export declare const contentFromEvents: (contentBlocks?: ConversationStreamEvent[][]) => ConversationMessage['content'];

package/dist/types/hooks/createAIHooks.d.ts

@@ -1,6 +1,6 @@
-import { UseAIGenerationHookWrapper } from './useAIGeneration';
-import { UseAIConversationHook } from './useAIConversation';
-import { getSchema } from '../types';
+import type { UseAIGenerationHookWrapper } from './useAIGeneration';
+import type { UseAIConversationHook } from './useAIConversation';
+import type { getSchema } from '../types';
 type UseAIHooks<Client extends Record<'generations' | 'conversations', Record<string, any>>, Schema extends Record<any, any>> = {
     useAIConversation: UseAIConversationHook<Extract<keyof Client['conversations'], string>>;
 } & UseAIGenerationHookWrapper<keyof Client['generations'], Schema>;

package/dist/types/hooks/exhaustivelyListMessages.d.ts

@@ -1,4 +1,4 @@
-import { Conversation, ConversationMessage } from '../types';
+import type { Conversation, ConversationMessage } from '../types';
 interface ExhaustivelyListMessagesParams {
     conversation: Conversation;
     messages?: ConversationMessage[];

package/dist/types/hooks/shared.d.ts

@@ -1,6 +1,8 @@
-import { DataState } from '@aws-amplify/ui-react-core';
-import { GraphQLFormattedError } from '../types';
-export type DataClientState<T> = Omit<DataState<T>, 'message'> & {
+import type { GraphQLFormattedError } from '../types';
+export interface AiClientState<T> {
+    data: T;
+    hasError: boolean;
+    isLoading: boolean;
     /**
      * @deprecated will be removed in a future major version. Superseded by `errors`
      * @description errors returned from the websocket connection
@@ -10,11 +12,11 @@ export type DataClientState<T> = Omit<DataState<T>, 'message'> & {
      * @description errors returned from the websocket connection
      */
     errors?: GraphQLFormattedError[];
-};
-export type DataClientResponse<T> = {
+}
+export interface AiClientResponse<T> {
     data: T | null;
     errors?: GraphQLFormattedError[];
-};
+}
 export declare const INITIAL_STATE: {
     hasError: boolean;
     isLoading: boolean;

package/dist/types/hooks/useAIConversation.d.ts

@@ -1,5 +1,5 @@
-import { Conversation, ConversationMessage, ConversationRoute, SendMessage } from '../types';
-import { DataClientState } from './shared';
+import type { Conversation, ConversationMessage, ConversationRoute, SendMessage } from '../types';
+import type { AiClientState } from './shared';
 interface UseAIConversationInput {
     id?: string;
     onMessage?: (message: ConversationMessage) => void;
@@ -9,6 +9,6 @@ interface AIConversationState {
     messages: ConversationMessage[];
     conversation?: Conversation;
 }
-export type UseAIConversationHook<T extends string> = (routeName: T, input?: UseAIConversationInput) => [DataClientState<AIConversationState>, SendMessage];
+export type UseAIConversationHook<T extends string> = (routeName: T, input?: UseAIConversationInput) => [AiClientState<AIConversationState>, SendMessage];
 export declare function createUseAIConversation<T extends Record<'conversations', Record<string, ConversationRoute>>>(client: T): UseAIConversationHook<Extract<keyof T['conversations'], string>>;
 export {};

package/dist/types/hooks/useAIGeneration.d.ts

@@ -1,14 +1,14 @@
 import type { ClientExtensions } from '@aws-amplify/data-schema/runtime';
-import { getSchema } from '../types';
-import { DataClientState } from './shared';
+import type { getSchema } from '../types';
+import type { AiClientState } from './shared';
 export interface UseAIGenerationHookWrapper<Key extends keyof AIGenerationClient<Schema>['generations'], Schema extends Record<any, any>> {
     useAIGeneration: <U extends Key>(routeName: U) => [
-        Awaited<DataClientState<Schema[U]['returnType']>>,
+        Awaited<AiClientState<Schema[U]['returnType']>>,
         (input: Schema[U]['args']) => void
     ];
 }
 export type UseAIGenerationHook<Key extends keyof AIGenerationClient<Schema>['generations'], Schema extends Record<any, any>> = (routeName: Key) => [
-    Awaited<DataClientState<Schema[Key]['returnType']>>,
+    Awaited<AiClientState<Schema[Key]['returnType']>>,
     (input: Schema[Key]['args']) => void
 ];
 type AIGenerationClient<T extends Record<any, any>> = Pick<ClientExtensions<T>, 'generations'>;

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
-export { createAIConversation, AIConversation, Avatars, CustomAction, ResponseComponent, SuggestedPrompt, } from './components';
+export type { Avatars, CustomAction, ResponseComponent, SuggestedPrompt, } from './components';
+export { createAIConversation, AIConversation } from './components';
 export { createAIHooks } from './hooks';
-export { ConversationMessage, ConversationMessageContent, SendMessage, SendMesageParameters, } from './types';
+export type { ConversationMessage, ConversationMessageContent, SendMessage, SendMesageParameters, } from './types';

package/dist/types/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "1.4.0";
+export declare const VERSION = "1.5.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-ai",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -43,14 +43,14 @@
   },
   "peerDependencies": {
     "@aws-amplify/data-schema": "^1.19.0",
-    "aws-amplify": "^6.9.0",
+    "aws-amplify": "^6.14.3",
     "react": "^16.14 || ^17 || ^18 || ^19",
     "react-dom": "^16.14 || ^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@aws-amplify/ui": "^6.10.1",
-    "@aws-amplify/ui-react": "^6.11.0",
-    "@aws-amplify/ui-react-core": "^3.4.1"
+    "@aws-amplify/ui": "^6.10.3",
+    "@aws-amplify/ui-react": "^6.11.2",
+    "@aws-amplify/ui-react-core": "^3.4.3"
   },
   "size-limit": [
     {