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

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

@@ -1,22 +1,8 @@
-import * as React from 'react';
-import { AIConversationInput, AIConversationProps } from './types';
+import { AIConversation as AIConversationType, AIConversationInput, AIConversationProps } from './types';
 interface AIConversationBaseProps extends AIConversationProps, AIConversationInput {
 }
-declare function AIConversationBase({ actions, avatars, controls, handleSendMessage, messages, responseComponents, suggestedPrompts, variant, isLoading, displayText, allowAttachments, }: AIConversationBaseProps): JSX.Element;
 /**
  * @experimental
  */
-export declare const AIConversation: typeof AIConversationBase & {
-    MessageList: React.ComponentType<{
-        messages: import("@aws-amplify/data-schema/dist/esm/ai/ConversationType").ConversationMessage[];
-    }> | undefined;
-    PromptList: React.ComponentType<{
-        suggestedPrompts?: import("./types").SuggestedPrompt[] | undefined;
-        setInput: React.Dispatch<React.SetStateAction<import("./context").ConversationInput | undefined>> | undefined;
-    }> | undefined;
-    Form: NonNullable<React.ComponentType<{
-        handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
-        allowAttachments?: boolean | undefined;
-    } & Required<import("./context").ConversationInputContext>> | undefined>;
-};
+export declare const AIConversation: AIConversationType<AIConversationBaseProps>;
 export {};

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

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

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

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

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+type WelcomeMessageContextProps = React.ReactNode | undefined;
+export declare const WelcomeMessageContext: React.Context<WelcomeMessageContextProps>;
+export declare const WelcomeMessageProvider: ({ children, welcomeMessage, }: {
+    children?: React.ReactNode;
+    welcomeMessage?: React.ReactNode;
+}) => JSX.Element;
+export {};

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

@@ -9,4 +9,7 @@ export { ControlsContext, ControlsContextProps, ControlsProvider, } from './Cont
 export { LoadingContextProvider } from './LoadingContext';
 export { ResponseComponentsProvider, RESPONSE_COMPONENT_PREFIX, } from './ResponseComponentsContext';
 export { SendMessageContextProvider } from './SendMessageContext';
+export { MessageRendererProvider, MessageRendererContext, useMessageRenderer, } from './MessageRenderContext';
+export { AttachmentProvider, AttachmentContext } from './AttachmentContext';
+export { WelcomeMessageContext, WelcomeMessageProvider, } from './WelcomeMessageContext';
 export * from './elements';

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

@@ -1,27 +1,29 @@
 import React from 'react';
 import { AIConversationElements } from './context/elements';
-import { ActionsBarControl, AvatarControl, FieldControl, HeaderControl, MessagesControl, PromptControl } from './views';
+import { ActionsBarControl, AvatarControl, FormControl, MessagesControl, PromptControl } from './views';
 import { DisplayTextTemplate } from '@aws-amplify/ui';
 import { AIConversationDisplayText } from './displayText';
-import { ConversationMessage, SendMessage } from '../../types';
+import { ConversationMessage, ImageContentBlock, SendMessage, TextContentBlock } from '../../types';
 import { ControlsContextProps } from './context/ControlsContext';
+import { AIConversationProviderProps } from './AIConversationProvider';
 export interface Controls {
     Avatars: AvatarControl;
     ActionsBar: ActionsBarControl;
-    Field: FieldControl;
-    Header: HeaderControl;
+    Form: FormControl;
     Messages: MessagesControl;
     SuggestedPrompts: PromptControl;
 }
 export interface AIConversationInput {
     elements?: Partial<AIConversationElements>;
     displayText?: DisplayTextTemplate<AIConversationDisplayText>;
+    welcomeMessage?: React.ReactNode;
     suggestedPrompts?: SuggestedPrompt[];
     actions?: CustomAction[];
     responseComponents?: ResponseComponents;
     variant?: MessageVariant;
     controls?: ControlsContextProps;
     allowAttachments?: boolean;
+    messageRenderer?: MessageRenderer;
 }
 export interface AIConversationProps {
     messages: ConversationMessage[];
@@ -29,15 +31,22 @@ export interface AIConversationProps {
     avatars?: Avatars;
     isLoading?: boolean;
 }
-export interface AIConversation {
-    (props: AIConversationProps): JSX.Element;
-    Conversation: () => React.JSX.Element;
-    Controls: Controls;
-    Provider: (props: {
-        children?: React.ReactNode;
-    } & Pick<AIConversationProps, 'messages' | 'avatars' | 'handleSendMessage'>) => React.JSX.Element;
+export interface AIConversation<PropsType extends AIConversationProps = AIConversationProps> {
+    (props: PropsType): JSX.Element;
+    DefaultMessage: () => JSX.Element | undefined;
+    Messages: () => JSX.Element;
+    Form: () => JSX.Element;
+    Provider: (props: AIConversationProviderProps) => React.JSX.Element;
 }
 export type MessageVariant = 'bubble' | 'default';
+export interface MessageRenderer {
+    text?: (input: {
+        text: TextContentBlock;
+    }) => React.JSX.Element;
+    image?: (input: {
+        image: ImageContentBlock;
+    }) => React.JSX.Element;
+}
 export interface Avatar {
     username?: string;
     avatar?: React.ReactNode;
@@ -52,8 +61,7 @@ export interface CustomAction {
     icon: React.ReactNode;
 }
 export interface SuggestedPrompt {
-    icon?: React.ReactNode;
-    header: string;
+    component?: React.ReactNode;
     inputText: string;
 }
 type JSONType = 'string' | 'number' | 'integer' | 'boolean' | 'object' | 'array' | 'null' | 'any';

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

@@ -1,4 +1,4 @@
-import { ImageContent } from '../../types';
+import { ImageContentBlock } from '../../types';
 export declare function formatDate(date: Date): string;
-export declare function convertBufferToBase64(buffer: ArrayBuffer, format: ImageContent['format']): string;
+export declare function convertBufferToBase64(buffer: ArrayBuffer, format: ImageContentBlock['format']): string;
 export declare function getImageTypeFromMimeType(mimeType: string): 'png' | 'jpeg' | 'gif' | 'webp';

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DefaultMessageControl: () => JSX.Element | undefined;

package/dist/types/components/AIConversation/views/Controls/{FieldControl.d.ts → FormControl.d.ts}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { AIConversationElements } from '../../context/elements';
 import { AttachFileControl } from './AttachFileControl';
-export declare const FieldControl: FieldControl;
-export interface FieldControl {
+export declare const FormControl: FormControl;
+export interface FormControl {
     (): React.JSX.Element;
     AttachFile: AttachFileControl;
     InputContainer: AIConversationElements['View'];

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

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { AIConversationElements } from '../../context/elements';
 import { ActionsBarControl } from './ActionsBarControl';
 import { AvatarControl } from './AvatarControl';
@@ -14,9 +14,7 @@ interface MessageControl<T extends Partial<AIConversationElements> = AIConversat
 }
 export declare const MessagesControl: MessagesControl;
 export interface MessagesControl {
-    (props: {
-        renderMessage?: (message: ConversationMessage) => React.ReactNode;
-    }): JSX.Element;
+    (): JSX.Element;
     ActionsBar: ActionsBarControl;
     Avatar: AvatarControl;
     Container: AIConversationElements['View'];

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

@@ -1,12 +1,9 @@
 import React from 'react';
 import { AIConversationElements } from '../../context';
 export declare const PromptControl: PromptControl;
-export declare const AutoHidablePromptControl: () => JSX.Element | undefined;
 export interface PromptControl {
     (): React.JSX.Element;
     Container: AIConversationElements['View'];
-    Header: AIConversationElements['Heading'];
-    Icon: AIConversationElements['Icon'];
     PromptGroup: AIConversationElements['View'];
     PromptCard: AIConversationElements['Button'];
 }

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

@@ -1,7 +1,6 @@
 import { ActionsBarControl } from './ActionsBarControl';
 import { AvatarControl } from './AvatarControl';
-import { HeaderControl } from './HeaderControl';
-import { FieldControl } from './FieldControl';
+import { FormControl } from './FormControl';
 import { MessagesControl } from './MessagesControl';
-import { AutoHidablePromptControl, PromptControl } from './PromptControl';
-export { ActionsBarControl, AvatarControl, HeaderControl, FieldControl, MessagesControl, PromptControl, AutoHidablePromptControl, };
+import { PromptControl } from './PromptControl';
+export { ActionsBarControl, AvatarControl, FormControl, MessagesControl, PromptControl, };

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

@@ -1,3 +1,2 @@
-import Conversation from './ConversationView';
-import { ActionsBarControl, AvatarControl, FieldControl, HeaderControl, MessagesControl, PromptControl } from './Controls';
-export { ActionsBarControl, AvatarControl, Conversation, FieldControl, HeaderControl, MessagesControl, PromptControl, };
+import { ActionsBarControl, AvatarControl, FormControl, MessagesControl, PromptControl } from './Controls';
+export { ActionsBarControl, AvatarControl, FormControl, MessagesControl, PromptControl, };

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/dist/types/types.d.ts

@@ -3,12 +3,12 @@ export type ConversationRoute = V6Client<any>['conversations'][string];
 export type Conversation = NonNullable<Awaited<ReturnType<ConversationRoute['create']>>['data']>;
 export type ConversationMessage = NonNullable<Awaited<ReturnType<Conversation['sendMessage']>>['data']>;
 export type ConversationMessageContent = ConversationMessage['content'][number];
-export type TextContent = NonNullable<ConversationMessageContent['text']>;
-export type ImageContent = NonNullable<ConversationMessageContent['image']>;
-export type InputContent = Parameters<Conversation['sendMessage']>[0]['content'][number];
-export type SendMessageContent = Parameters<Conversation['sendMessage']>[0]['content'];
-export type SendMessageContext = Parameters<Conversation['sendMessage']>[0]['aiContext'];
-export type ToolConfiguration = NonNullable<Parameters<Conversation['sendMessage']>[0]['toolConfiguration']>;
+export type TextContentBlock = NonNullable<ConversationMessageContent['text']>;
+export type ImageContentBlock = NonNullable<ConversationMessageContent['image']>;
+export type InputContent = Exclude<Parameters<Conversation['sendMessage']>[0], string>['content'][number];
+export type SendMessageContent = Exclude<Parameters<Conversation['sendMessage']>[0], string>['content'];
+export type SendMessageContext = Exclude<Parameters<Conversation['sendMessage']>[0], string>['aiContext'];
+export type ToolConfiguration = NonNullable<Exclude<Parameters<Conversation['sendMessage']>[0], string>['toolConfiguration']>;
 export interface SendMesageParameters {
     content: SendMessageContent;
     aiContext?: SendMessageContext;

package/dist/types/version.d.ts

@@ -0,0 +1 @@
+export declare const VERSION = "0.4.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aws-amplify/ui-react-ai",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/index.js",
   "module": "dist/esm/index.mjs",
   "exports": {
@@ -43,17 +43,31 @@
   },
   "peerDependencies": {
     "@aws-amplify/api-graphql": "^4.3.0",
-    "aws-amplify": "^6.6.0",
+    "aws-amplify": "^6.6.5",
     "react": "^16.14.0 || ^17.0 || ^18.0",
     "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.5",
+    "@aws-amplify/ui-react": "^6.5.5",
+    "@aws-amplify/ui-react-core": "^3.0.29"
   },
   "devDependencies": {
     "@types/jest-when": "^3.5.0",
     "jest-when": "^3.5.1"
-  }
+  },
+  "size-limit": [
+    {
+      "name": "AIConversation",
+      "path": "dist/esm/index.mjs",
+      "import": "{ AIConversation }",
+      "limit": "25 kB"
+    },
+    {
+      "name": "createAIConversation",
+      "path": "dist/esm/index.mjs",
+      "import": "{ createAIConversation }",
+      "limit": "7 kB"
+    }
+  ]
 }

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

@@ -1,34 +0,0 @@
-import React__default from 'react';
-import { withBaseElementProps } from '@aws-amplify/ui-react-core/elements';
-import { AIConversationElements } from '../../context/elements/definitions.mjs';
-
-const { View, Button, Icon, Text } = AIConversationElements;
-const HEADER_BLOCK = 'ai-header';
-const HeaderTextBase = withBaseElementProps(Text, {
-    className: `${HEADER_BLOCK}__text`,
-});
-const HeaderText = React__default.forwardRef(function HeaderText(props, ref) {
-    return React__default.createElement(HeaderTextBase, { ...props, ref: ref });
-});
-const CloseIcon = withBaseElementProps(Icon, {
-    className: `${HEADER_BLOCK}__icon`,
-    variant: 'close',
-});
-const CloseButtonBase = withBaseElementProps(Button, {
-    className: `${HEADER_BLOCK}__button`,
-});
-const CloseButton = React__default.forwardRef(function CloseButton(props, ref) {
-    return React__default.createElement(CloseButtonBase, { ...props, ref: ref });
-});
-const Container = withBaseElementProps(View, {
-    className: `${HEADER_BLOCK}__container`,
-});
-const HeaderControl = () => (React__default.createElement(Container, null,
-    React__default.createElement(HeaderText, null, "Raven Chat"),
-    React__default.createElement(CloseButton, null,
-        React__default.createElement(CloseIcon, null))));
-HeaderControl.Container = Container;
-HeaderControl.Text = HeaderText;
-HeaderControl.Button = CloseButton;
-
-export { HeaderControl };

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

@@ -1,20 +0,0 @@
-import React__default from 'react';
-import { ViewElement } from '../context/elements/definitions.mjs';
-import './Controls/ActionsBarControl.mjs';
-import './Controls/AvatarControl.mjs';
-import { HeaderControl } from './Controls/HeaderControl.mjs';
-import { FieldControl } from './Controls/FieldControl.mjs';
-import { MessagesControl } from './Controls/MessagesControl.mjs';
-import { AutoHidablePromptControl } from './Controls/PromptControl.mjs';
-
-function Conversation() {
-    return (React__default.createElement(ViewElement, null,
-        React__default.createElement(HeaderControl, null),
-        React__default.createElement(ViewElement, null,
-            React__default.createElement(AutoHidablePromptControl, null),
-            React__default.createElement(MessagesControl, null)),
-        React__default.createElement(ViewElement, null,
-            React__default.createElement(FieldControl, null))));
-}
-
-export { Conversation as default };

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;

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

@@ -1,9 +0,0 @@
-import React from 'react';
-import { AIConversationElements } from '../../context/elements';
-export declare const HeaderControl: HeaderControl;
-export interface HeaderControl {
-    (): React.JSX.Element;
-    Container: AIConversationElements['View'];
-    Button: AIConversationElements['Button'];
-    Text: AIConversationElements['Text'];
-}

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

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export default function Conversation(): JSX.Element;