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

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

@@ -12,7 +12,7 @@ import { MessageList } from './views/default/MessageList.mjs';
 import { Form } from './views/default/Form.mjs';
 import { PromptList } from './views/default/PromptList.mjs';
 import { ComponentClassName } from '@aws-amplify/ui';
-import createProvider from './createProvider.mjs';
+import { AIConversationProvider } from './AIConversationProvider.mjs';
 
 function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, allowAttachments, }) {
     const icons = useIcons('aiConversation');
@@ -26,7 +26,14 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
             avatar: icons?.user ?? React.createElement(IconUser, null),
         },
     };
-    const Provider = createProvider({
+    const providerProps = {
+        messages,
+        handleSendMessage,
+        avatars: {
+            ...defaultAvatars,
+            ...avatars,
+        },
+        isLoading,
         elements: {
             Text: React.forwardRef(function _Text(props, ref) {
                 return React.createElement(Text, { ...props, ref: ref });
@@ -44,17 +51,8 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
         },
         displayText,
         allowAttachments,
-    });
-    const providerProps = {
-        messages,
-        handleSendMessage,
-        avatars: {
-            ...defaultAvatars,
-            ...avatars,
-        },
-        isLoading,
     };
-    return (React.createElement(Provider, { ...providerProps },
+    return (React.createElement(AIConversationProvider, { ...providerProps },
         React.createElement(Flex, { className: ComponentClassName.AIConversation },
             React.createElement(ScrollView, { autoScroll: "smooth", flex: "1" },
                 React.createElement(AutoHidablePromptControl, null),

package/dist/esm/components/AIConversation/{createProvider.mjs → AIConversationProvider.mjs}

@@ -15,26 +15,24 @@ import { SendMessageContextProvider } from './context/SendMessageContext.mjs';
 import './context/elements/definitions.mjs';
 import { AttachmentProvider } from './context/AttachmentContext.mjs';
 
-function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, displayText, allowAttachments, }) {
-    return function Provider({ children, messages, avatars, handleSendMessage, isLoading, }) {
-        const _displayText = {
-            ...defaultAIConversationDisplayTextEn,
-            ...displayText,
-        };
-        return (React__default.createElement(ElementsProvider, { elements: elements },
-            React__default.createElement(ControlsProvider, { controls: controls },
-                React__default.createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
-                    React__default.createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                        React__default.createElement(AttachmentProvider, { allowAttachments: allowAttachments },
-                            React__default.createElement(ConversationDisplayTextProvider, { ..._displayText },
-                                React__default.createElement(ConversationInputContextProvider, null,
-                                    React__default.createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
-                                        React__default.createElement(AvatarsProvider, { avatars: avatars },
-                                            React__default.createElement(ActionsProvider, { actions: actions },
-                                                React__default.createElement(MessageVariantProvider, { variant: variant },
-                                                    React__default.createElement(MessagesProvider, { messages: messages },
-                                                        React__default.createElement(LoadingContextProvider, { isLoading: isLoading }, children))))))))))))));
+const AIConversationProvider = ({ elements, actions, suggestedPrompts, responseComponents, variant, controls, displayText, allowAttachments, messages, handleSendMessage, avatars, isLoading, children, }) => {
+    const _displayText = {
+        ...defaultAIConversationDisplayTextEn,
+        ...displayText,
     };
-}
+    return (React__default.createElement(ElementsProvider, { elements: elements },
+        React__default.createElement(ControlsProvider, { controls: controls },
+            React__default.createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
+                React__default.createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
+                    React__default.createElement(AttachmentProvider, { allowAttachments: allowAttachments },
+                        React__default.createElement(ConversationDisplayTextProvider, { ..._displayText },
+                            React__default.createElement(ConversationInputContextProvider, null,
+                                React__default.createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
+                                    React__default.createElement(AvatarsProvider, { avatars: avatars },
+                                        React__default.createElement(ActionsProvider, { actions: actions },
+                                            React__default.createElement(MessageVariantProvider, { variant: variant },
+                                                React__default.createElement(MessagesProvider, { messages: messages },
+                                                    React__default.createElement(LoadingContextProvider, { isLoading: isLoading }, children))))))))))))));
+};
 
-export { createProvider as default };
+export { AIConversationProvider };

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

@@ -6,26 +6,30 @@ import { HeaderControl } from './views/Controls/HeaderControl.mjs';
 import { FieldControl } from './views/Controls/FieldControl.mjs';
 import { MessagesControl } from './views/Controls/MessagesControl.mjs';
 import { PromptControl } from './views/Controls/PromptControl.mjs';
-import createProvider from './createProvider.mjs';
+import { AIConversationProvider } from './AIConversationProvider.mjs';
 
 /**
  * @experimental
  */
 function createAIConversation(input = {}) {
     const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, allowAttachments, } = input;
-    const Provider = createProvider({
-        elements,
-        actions,
-        suggestedPrompts,
-        responseComponents,
-        variant,
-        controls,
-        displayText,
-        allowAttachments,
-    });
     function AIConversation(props) {
         const { messages, avatars, handleSendMessage, isLoading } = props;
-        return (React__default.createElement(Provider, { messages: messages, avatars: avatars, handleSendMessage: handleSendMessage, isLoading: isLoading },
+        const providerProps = {
+            elements,
+            actions,
+            suggestedPrompts,
+            responseComponents,
+            variant,
+            controls,
+            displayText,
+            allowAttachments,
+            messages,
+            avatars,
+            handleSendMessage,
+            isLoading,
+        };
+        return (React__default.createElement(AIConversationProvider, { ...providerProps },
             React__default.createElement(Conversation, null)));
     }
     const Controls = {
@@ -36,7 +40,7 @@ function createAIConversation(input = {}) {
         Messages: MessagesControl,
         SuggestedPrompts: PromptControl,
     };
-    AIConversation.Provider = Provider;
+    AIConversation.Provider = AIConversationProvider;
     AIConversation.Conversation = Conversation;
     AIConversation.Controls = Controls;
     return { AIConversation };

package/dist/esm/hooks/useAIGeneration.mjs

@@ -1,21 +1,35 @@
-import { useDataState } from '@aws-amplify/ui-react-core';
+import * as React from 'react';
 
+// default state
+const INITIAL_STATE = {
+    hasError: false,
+    isLoading: false,
+    messages: undefined,
+};
+const LOADING_STATE = { hasError: false, isLoading: true, messages: undefined };
+const ERROR_STATE = { hasError: true, isLoading: false };
 function createUseAIGeneration(client) {
     const useAIGeneration = (routeName) => {
-        const handleGenerate = client.generations[routeName];
-        const updateAIGenerationStateAction = async (_prev, input) => {
-            const result = await handleGenerate(input);
-            // handleGenerate returns a Promised wrapper around Schema[Key]['returnType'] which includes data, errors, and clientExtensions
-            // The type of data is Schema[Key]['returnType'] which useDataState also wraps in a data return
-            // TODO: follow up with how to type handleGenerate to properly return the promise wrapper shape
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            const data = result.data;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-            const graphqlErrors = result.errors;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment
-            return { ...data, ...(graphqlErrors ? { graphqlErrors } : {}) };
-        };
-        return useDataState(updateAIGenerationStateAction, {});
+        const [dataState, setDataState] = React.useState(() => ({
+            ...INITIAL_STATE,
+            data: undefined,
+        }));
+        const handleGeneration = React.useCallback(async (input) => {
+            setDataState(({ data }) => ({ ...LOADING_STATE, data }));
+            const result = await client.generations[routeName](input);
+            const { data, errors } = result;
+            if (errors) {
+                setDataState({
+                    ...ERROR_STATE,
+                    data,
+                    messages: errors,
+                });
+            }
+            else {
+                setDataState({ ...INITIAL_STATE, data });
+            }
+        }, [routeName]);
+        return [dataState, handleGeneration];
     };
     return useAIGeneration;
 }

package/dist/index.js

@@ -844,46 +844,48 @@ function Conversation() {
             React__namespace["default"].createElement(FieldControl, null))));
 }
 
-function createProvider({ elements: elements$1, actions, suggestedPrompts, responseComponents, variant, controls, displayText, allowAttachments, }) {
-    return function Provider({ children, messages, avatars, handleSendMessage, isLoading, }) {
-        const _displayText = {
-            ...defaultAIConversationDisplayTextEn,
-            ...displayText,
-        };
-        return (React__namespace["default"].createElement(elements.ElementsProvider, { elements: elements$1 },
-            React__namespace["default"].createElement(ControlsProvider, { controls: controls },
-                React__namespace["default"].createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
-                    React__namespace["default"].createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
-                        React__namespace["default"].createElement(AttachmentProvider, { allowAttachments: allowAttachments },
-                            React__namespace["default"].createElement(ConversationDisplayTextProvider, { ..._displayText },
-                                React__namespace["default"].createElement(ConversationInputContextProvider, null,
-                                    React__namespace["default"].createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
-                                        React__namespace["default"].createElement(AvatarsProvider, { avatars: avatars },
-                                            React__namespace["default"].createElement(ActionsProvider, { actions: actions },
-                                                React__namespace["default"].createElement(MessageVariantProvider, { variant: variant },
-                                                    React__namespace["default"].createElement(MessagesProvider, { messages: messages },
-                                                        React__namespace["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children))))))))))))));
+const AIConversationProvider = ({ elements: elements$1, actions, suggestedPrompts, responseComponents, variant, controls, displayText, allowAttachments, messages, handleSendMessage, avatars, isLoading, children, }) => {
+    const _displayText = {
+        ...defaultAIConversationDisplayTextEn,
+        ...displayText,
     };
-}
+    return (React__namespace["default"].createElement(elements.ElementsProvider, { elements: elements$1 },
+        React__namespace["default"].createElement(ControlsProvider, { controls: controls },
+            React__namespace["default"].createElement(SuggestedPromptProvider, { suggestedPrompts: suggestedPrompts },
+                React__namespace["default"].createElement(ResponseComponentsProvider, { responseComponents: responseComponents },
+                    React__namespace["default"].createElement(AttachmentProvider, { allowAttachments: allowAttachments },
+                        React__namespace["default"].createElement(ConversationDisplayTextProvider, { ..._displayText },
+                            React__namespace["default"].createElement(ConversationInputContextProvider, null,
+                                React__namespace["default"].createElement(SendMessageContextProvider, { handleSendMessage: handleSendMessage },
+                                    React__namespace["default"].createElement(AvatarsProvider, { avatars: avatars },
+                                        React__namespace["default"].createElement(ActionsProvider, { actions: actions },
+                                            React__namespace["default"].createElement(MessageVariantProvider, { variant: variant },
+                                                React__namespace["default"].createElement(MessagesProvider, { messages: messages },
+                                                    React__namespace["default"].createElement(LoadingContextProvider, { isLoading: isLoading }, children))))))))))))));
+};
 
 /**
  * @experimental
  */
 function createAIConversation(input = {}) {
     const { elements, suggestedPrompts, actions, responseComponents, variant, controls, displayText, allowAttachments, } = input;
-    const Provider = createProvider({
-        elements,
-        actions,
-        suggestedPrompts,
-        responseComponents,
-        variant,
-        controls,
-        displayText,
-        allowAttachments,
-    });
     function AIConversation(props) {
         const { messages, avatars, handleSendMessage, isLoading } = props;
-        return (React__namespace["default"].createElement(Provider, { messages: messages, avatars: avatars, handleSendMessage: handleSendMessage, isLoading: isLoading },
+        const providerProps = {
+            elements,
+            actions,
+            suggestedPrompts,
+            responseComponents,
+            variant,
+            controls,
+            displayText,
+            allowAttachments,
+            messages,
+            avatars,
+            handleSendMessage,
+            isLoading,
+        };
+        return (React__namespace["default"].createElement(AIConversationProvider, { ...providerProps },
             React__namespace["default"].createElement(Conversation, null)));
     }
     const Controls = {
@@ -894,7 +896,7 @@ function createAIConversation(input = {}) {
         Messages: MessagesControl,
         SuggestedPrompts: PromptControl,
     };
-    AIConversation.Provider = Provider;
+    AIConversation.Provider = AIConversationProvider;
     AIConversation.Conversation = Conversation;
     AIConversation.Controls = Controls;
     return { AIConversation };
@@ -1059,7 +1061,14 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
             avatar: icons?.user ?? React__namespace.createElement(internal.IconUser, null),
         },
     };
-    const Provider = createProvider({
+    const providerProps = {
+        messages,
+        handleSendMessage,
+        avatars: {
+            ...defaultAvatars,
+            ...avatars,
+        },
+        isLoading,
         elements: {
             Text: React__namespace.forwardRef(function _Text(props, ref) {
                 return React__namespace.createElement(uiReact.Text, { ...props, ref: ref });
@@ -1077,17 +1086,8 @@ function AIConversationBase({ actions, avatars, controls, handleSendMessage, mes
         },
         displayText,
         allowAttachments,
-    });
-    const providerProps = {
-        messages,
-        handleSendMessage,
-        avatars: {
-            ...defaultAvatars,
-            ...avatars,
-        },
-        isLoading,
     };
-    return (React__namespace.createElement(Provider, { ...providerProps },
+    return (React__namespace.createElement(AIConversationProvider, { ...providerProps },
         React__namespace.createElement(uiReact.Flex, { className: ui.ComponentClassName.AIConversation },
             React__namespace.createElement(uiReact.ScrollView, { autoScroll: "smooth", flex: "1" },
                 React__namespace.createElement(AutoHidablePromptControl, null),
@@ -1120,22 +1120,36 @@ const AIContextProvider = ({ children, }) => {
     return React__namespace["default"].createElement(AIContext.Provider, { value: context }, children);
 };
 
+// default state
+const INITIAL_STATE = {
+    hasError: false,
+    isLoading: false,
+    messages: undefined,
+};
+const LOADING_STATE = { hasError: false, isLoading: true, messages: undefined };
+const ERROR_STATE = { hasError: true, isLoading: false };
 function createUseAIGeneration(client) {
     const useAIGeneration = (routeName) => {
-        const handleGenerate = client.generations[routeName];
-        const updateAIGenerationStateAction = async (_prev, input) => {
-            const result = await handleGenerate(input);
-            // handleGenerate returns a Promised wrapper around Schema[Key]['returnType'] which includes data, errors, and clientExtensions
-            // The type of data is Schema[Key]['returnType'] which useDataState also wraps in a data return
-            // TODO: follow up with how to type handleGenerate to properly return the promise wrapper shape
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            const data = result.data;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-            const graphqlErrors = result.errors;
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment
-            return { ...data, ...(graphqlErrors ? { graphqlErrors } : {}) };
-        };
-        return uiReactCore.useDataState(updateAIGenerationStateAction, {});
+        const [dataState, setDataState] = React__namespace.useState(() => ({
+            ...INITIAL_STATE,
+            data: undefined,
+        }));
+        const handleGeneration = React__namespace.useCallback(async (input) => {
+            setDataState(({ data }) => ({ ...LOADING_STATE, data }));
+            const result = await client.generations[routeName](input);
+            const { data, errors } = result;
+            if (errors) {
+                setDataState({
+                    ...ERROR_STATE,
+                    data,
+                    messages: errors,
+                });
+            }
+            else {
+                setDataState({ ...INITIAL_STATE, data });
+            }
+        }, [routeName]);
+        return [dataState, handleGeneration];
     };
     return useAIGeneration;
 }

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { AIConversationInput, AIConversationProps } from './types';
+interface AIConversationProviderProps extends AIConversationInput, AIConversationProps {
+    children?: React.ReactNode;
+}
+export declare const AIConversationProvider: ({ elements, actions, suggestedPrompts, responseComponents, variant, controls, displayText, allowAttachments, messages, handleSendMessage, avatars, isLoading, children, }: AIConversationProviderProps) => React.JSX.Element;
+export {};

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

@@ -3,14 +3,24 @@ import { V6Client } from '@aws-amplify/api-graphql';
 import { getSchema } from '../types';
 export interface UseAIGenerationHookWrapper<Key extends keyof AIGenerationClient<Schema>['generations'], Schema extends Record<any, any>> {
     useAIGeneration: <U extends Key>(routeName: U) => [
-        Awaited<DataState<Schema[U]['returnType']>>,
+        Awaited<GenerationState<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<DataState<Schema[Key]['returnType']>>,
+    Awaited<GenerationState<Schema[Key]['returnType']>>,
     (input: Schema[Key]['args']) => void
 ];
 type AIGenerationClient<T extends Record<any, any>> = Pick<V6Client<T>, 'generations'>;
+interface GraphQLFormattedError {
+    readonly message: string;
+    readonly errorType: string;
+    readonly errorInfo: null | {
+        [key: string]: unknown;
+    };
+}
+type GenerationState<T> = Omit<DataState<T>, 'message'> & {
+    messages?: GraphQLFormattedError[];
+};
 export declare function createUseAIGeneration<Client extends Record<'generations' | 'conversations', Record<string, any>>, Schema extends getSchema<Client>>(client: Client): UseAIGenerationHook<keyof Client['generations'], Client>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-ai",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -48,9 +48,9 @@
     "react-dom": "^16.14.0 || ^17.0 || ^18.0"
   },
   "dependencies": {
-    "@aws-amplify/ui": "^6.6.3",
-    "@aws-amplify/ui-react": "^6.5.3",
-    "@aws-amplify/ui-react-core": "^3.0.27"
+    "@aws-amplify/ui": "^6.6.4",
+    "@aws-amplify/ui-react": "^6.5.4",
+    "@aws-amplify/ui-react-core": "^3.0.28"
   },
   "devDependencies": {
     "@types/jest-when": "^3.5.0",

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

@@ -1,5 +0,0 @@
-import React from 'react';
-import { AIConversationInput, AIConversationProps } from './types';
-export default function createProvider({ elements, actions, suggestedPrompts, responseComponents, variant, controls, displayText, allowAttachments, }: Pick<AIConversationInput, 'elements' | 'actions' | 'suggestedPrompts' | 'responseComponents' | 'variant' | 'controls' | 'displayText' | 'allowAttachments'>): ({ children, messages, avatars, handleSendMessage, isLoading, }: {
-    children?: React.ReactNode;
-} & Pick<AIConversationProps, "avatars" | "messages" | "isLoading" | "handleSendMessage">) => React.JSX.Element;