Ai conversation composable

examples/next/pages/ui/components/ai/ai-conversation-composable/amplify_outputs.js

@@ -0,0 +1,2 @@
+import amplifyOutputs from '@environments/ai/gen2/amplify_outputs';
+export default amplifyOutputs;

examples/next/pages/ui/components/ai/ai-conversation-composable/index.page.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Amplify } from 'aws-amplify';
+import { createAIHooks, AIConversation } from '@aws-amplify/ui-react-ai';
+import { generateClient } from 'aws-amplify/api';
+import '@aws-amplify/ui-react/styles.css';
+import '@aws-amplify/ui-react-ai/ai-conversation-styles.css';
+
+import outputs from './amplify_outputs';
+import type { Schema } from '@environments/ai/gen2/amplify/data/resource';
+import { Authenticator, Card, Flex } from '@aws-amplify/ui-react';
+
+const client = generateClient<Schema>({ authMode: 'userPool' });
+const { useAIConversation } = createAIHooks(client);
+
+Amplify.configure(outputs);
+
+// function Chat() {
+// const [
+// {
+// data: { messages },
+// isLoading,
+// },
+// sendMessage,
+// ] = useAIConversation('pirateChat');
+
+// return (
+// <Card variation="outlined" width="50%" height="300px" margin="0 auto">
+// <AIConversation.Provider
+// messages={messages}
+// handleSendMessage={sendMessage}
+// isLoading={isLoading}
+// allowAttachments
+// suggestedPrompts={[
+// {
+// inputText: 'hello',
+// header: 'hello',
+// },
+// {
+// inputText: 'how are you?',
+// header: 'how are you?',
+// },
+// ]}
+// variant="bubble"
+// >
+// <AIConversation.Messages />
+// <AIConversation.Form />
+// </AIConversation.Provider>
+// </Card>
+// );
+// }
+
+function Chat() {
+ const [
+ {
+ data: { messages },
+ isLoading,
+ },
+ sendMessage,
+ ] = useAIConversation('chat', { id: '29d29c3c-9216-4b77-b44b-b5ec69c9f235' });
+
+ React.useEffect(() => {
+ client.conversations.chat.list().then((res) => {
+ res.data.forEach((convo) => {
+ convo.listMessages().then((res) => {
+ console.log(res.data);
+ });
+ });
+ });
+ }, []);
+
+ return (
+ <AIConversation.Provider
+ messages={messages}
+ handleSendMessage={sendMessage}
+ avatars={{
+ user: {
+ username: 'XXXX',
+ },
+ }}
+ >
+ <Flex direction="row">
+ <Card variation="outlined" width="50%" flex="1">
+ <AIConversation.MessagesControl />
+ </Card>
+ <Card variation="outlined" width="50%" flex="1">
+ <AIConversation.FieldControl />
+ </Card>
+ </Flex>
+ </AIConversation.Provider>
+ );
+}
+
+export default function Example() {
+ return (
+ <Authenticator>
+ {({ user, signOut }) => {
+ return <Chat />;
+ }}
+ </Authenticator>
+ );
+}

packages/react-ai/src/components/AIConversation/AIConversation.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Flex, ScrollView, Text, TextProps } from '@aws-amplify/ui-react';
+import { Flex, ScrollView, Text } from '@aws-amplify/ui-react';
 import {
  IconAssistant,
  IconUser,
  useIcons,
 } from '@aws-amplify/ui-react/internal';
 import { AIConversationInput, AIConversationProps, Avatars } from './types';
 import { MessagesControl } from './views/Controls/MessagesControl';
-import { FieldControl } from './views';
+import { FormControl } from './views/Controls/FormControl';
 import { MessageList } from './views/default/MessageList';
 import { Form } from './views/default/Form';
 import { PromptList } from './views/default/PromptList';
@@ -17,11 +17,7 @@ import { AIConversationProvider } from './AIConversationProvider';
 import { useSetUserAgent } from '@aws-amplify/ui-react-core';
 import { VERSION } from '../../version';
 
-interface AIConversationBaseProps
- extends AIConversationProps,
- AIConversationInput {}
-
-function AIConversationBase({
+function Provider({
  actions,
  avatars,
  controls,
@@ -34,12 +30,14 @@ function AIConversationBase({
  displayText,
  allowAttachments,
  messageRenderer,
+ children,
 }: AIConversationBaseProps): JSX.Element {
  useSetUserAgent({
  componentName: 'AIConversation',
  packageName: 'react-ai',
  version: VERSION,
  });
+
  const icons = useIcons('aiConversation');
  const defaultAvatars: Avatars = {
  ai: {
@@ -61,11 +59,7 @@ function AIConversationBase({
  },
  isLoading,
  elements: {
- Text: React.forwardRef<HTMLParagraphElement, TextProps>(
- function _Text(props, ref) {
- return <Text {...props} ref={ref} />;
- }
- ),
+ Text,
  },
  actions,
  suggestedPrompts,
@@ -84,22 +78,38 @@ function AIConversationBase({
 
  return (
  <AIConversationProvider {...providerProps}>
+ {children}
+ </AIConversationProvider>
+ );
+}
+
+interface AIConversationBaseProps
+ extends AIConversationProps,
+ AIConversationInput {}
+
+function AIConversationBase(props: AIConversationBaseProps): JSX.Element {
+ return (
+ <Provider {...props}>
  <Flex className={ComponentClassName.AIConversation}>
+ {/* messages list view */}
  <ScrollView autoScroll="smooth" flex="1">
  <AutoHidablePromptControl />
  <MessagesControl />
  </ScrollView>
- <FieldControl />
+ {/* form view */}
+ <FormControl />
  </Flex>
- </AIConversationProvider>
+ </Provider>
  );
 }
 
+//
+
 /**
  * @experimental
  */
 export const AIConversation = Object.assign(AIConversationBase, {
- MessageList,
- PromptList,
- Form,
+ Provider,
+ MessageHistory: MessagesControl,
+ Form: FormControl,
 });

packages/react-ai/src/components/AIConversation/AIConversationProvider.tsx

@@ -19,7 +19,7 @@ import {
 } from './context';
 import { AttachmentProvider } from './context/AttachmentContext';
 
-interface AIConversationProviderProps
+export interface AIConversationProviderProps
  extends AIConversationInput,
  AIConversationProps {
  children?: React.ReactNode;

packages/react-ai/src/components/AIConversation/createAIConversation.tsx

@@ -8,13 +8,13 @@ import {
 import {
  ActionsBarControl,
  AvatarControl,
- Conversation,
- FieldControl,
- HeaderControl,
+ FormControl,
  MessagesControl,
  PromptControl,
 } from './views';
+import { ViewElement as View } from './context/elements/definitions';
 import { AIConversationProvider } from './AIConversationProvider';
+import { AutoHidablePromptControl } from './views/Controls/PromptControl';
 
 /**
  * @experimental
@@ -53,23 +53,31 @@ export function createAIConversation(input: AIConversationInput = {}): {
  };
  return (
  <AIConversationProvider {...providerProps}>
- <Conversation />
+ <View>
+ <View>
+ <AutoHidablePromptControl />
+ <MessagesControl />
+ </View>
+ <View>
+ <FormControl />
+ </View>
+ </View>
  </AIConversationProvider>
  );
  }
 
  const Controls: Controls = {
  ActionsBar: ActionsBarControl,
  Avatars: AvatarControl,
- Field: FieldControl,
- Header: HeaderControl,
+ Form: FormControl,
  Messages: MessagesControl,
  SuggestedPrompts: PromptControl,
  };
 
  AIConversation.Provider = AIConversationProvider;
- AIConversation.Conversation = Conversation;
  AIConversation.Controls = Controls;
+ AIConversation.Form = FormControl;
+ AIConversation.MessageList = MessagesControl;
 
  return { AIConversation };
 }

packages/react-ai/src/components/AIConversation/types.ts

@@ -4,8 +4,7 @@ import { AIConversationElements } from './context/elements';
 import {
  ActionsBarControl,
  AvatarControl,
- FieldControl,
- HeaderControl,
+ FormControl,
  MessagesControl,
  PromptControl,
 } from './views';
@@ -22,15 +21,15 @@ import { ControlsContextProps } from './context/ControlsContext';
 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;
@@ -49,7 +48,7 @@ export interface AIConversationProps {
 
 export interface AIConversation {
  (props: AIConversationProps): JSX.Element;
- Conversation: () => React.JSX.Element;
+
  Controls: Controls;
  Provider: (
  props: {
@@ -84,6 +83,7 @@ export interface CustomAction {
 export interface SuggestedPrompt {
  icon?: React.ReactNode;
  header: string;
+ component?: React.ReactNode;
  inputText: string;
 }
 

packages/react-ai/src/components/AIConversation/views/Controls/FieldControl.tsx → packages/react-ai/src/components/AIConversation/views/Controls/FormControl.tsx

@@ -146,7 +146,7 @@ const InputContainer = withBaseElementProps(View, {
  className: `${FIELD_BLOCK}__input-container`,
 });
 
-export const FieldControl: FieldControl = () => {
+export const FormControl: FormControl = () => {
  const { input, setInput } = React.useContext(ConversationInputContext);
  const handleSendMessage = React.useContext(SendMessageContext);
  const allowAttachments = React.useContext(AttachmentContext);
@@ -241,14 +241,14 @@ export const FieldControl: FieldControl = () => {
  );
 };
 
-FieldControl.AttachFile = AttachFileControl;
-FieldControl.InputContainer = InputContainer;
-FieldControl.Label = Label;
-FieldControl.TextInput = TextInput;
-FieldControl.SendButton = SendButton;
-FieldControl.SendIcon = SendIcon;
+FormControl.AttachFile = AttachFileControl;
+FormControl.InputContainer = InputContainer;
+FormControl.Label = Label;
+FormControl.TextInput = TextInput;
+FormControl.SendButton = SendButton;
+FormControl.SendIcon = SendIcon;
 
-export interface FieldControl {
+export interface FormControl {
  (): React.JSX.Element;
  AttachFile: AttachFileControl;
  InputContainer: AIConversationElements['View'];