feat(ai-conversation): add allowAttachments prop

.changeset/seven-bats-travel.md

@@ -0,0 +1,13 @@
+---
+"@aws-amplify/ui-react-ai": minor
+---
+
+feat(ai-conversation): add allowAttachments prop
+
+```jsx
+<AIConversation
+  allowAttachments
+  messages={messages}
+  handleSendMessage={handleSendMessage}
+/>
+```

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

@@ -36,6 +36,7 @@ function Chat() {
         messages={messages}
         handleSendMessage={sendMessage}
         isLoading={isLoading}
+        allowAttachments
         suggestedPrompts={[
           {
             inputText: 'hello',

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

@@ -30,6 +30,7 @@ function AIConversationBase({
   variant,
   isLoading,
   displayText,
+  allowAttachments,
 }: AIConversationBaseProps): JSX.Element {
   const icons = useIcons('aiConversation');
   const defaultAvatars: Avatars = {
@@ -72,6 +73,7 @@ function AIConversationBase({
       ...avatars,
     },
     isLoading,
+    allowAttachments,
   };
 
   return (

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export const AttachmentContext = React.createContext(false);
+
+export const AttachmentProvider = ({
+  children,
+  allowAttachments,
+}: {
+  children?: React.ReactNode;
+  allowAttachments?: boolean;
+}): JSX.Element => {
+  return (
+    <AttachmentContext.Provider value={allowAttachments ?? false}>
+      {children}
+    </AttachmentContext.Provider>
+  );
+};

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

@@ -7,6 +7,7 @@ export interface ControlsContextProps {
   Form?: React.ComponentType<
     {
       handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+      allowAttachments?: boolean;
     } & Required<ConversationInputContext>
   >;
   MessageList?: React.ComponentType<{ messages: ConversationMessage[] }>;

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

@@ -30,6 +30,7 @@ export function createAIConversation(input: AIConversationInput = {}): {
     variant,
     controls,
     displayText,
+    allowAttachments,
   } = input;
 
   const Provider = createProvider({
@@ -40,6 +41,7 @@ export function createAIConversation(input: AIConversationInput = {}): {
     variant,
     controls,
     displayText,
+    allowAttachments,
   });
 
   function AIConversation(props: AIConversationProps): JSX.Element {

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

@@ -17,6 +17,7 @@ import {
   ResponseComponentsProvider,
   SendMessageContextProvider,
 } from './context';
+import { AttachmentProvider } from './context/AttachmentContext';
 
 export default function createProvider({
   elements,
@@ -26,6 +27,7 @@ export default function createProvider({
   variant,
   controls,
   displayText,
+  allowAttachments,
 }: Pick<
   AIConversationInput,
   | 'elements'
@@ -35,6 +37,7 @@ export default function createProvider({
   | 'variant'
   | 'controls'
   | 'displayText'
+  | 'allowAttachments'
 >) {
   return function Provider({
     children,
@@ -57,25 +60,27 @@ export default function createProvider({
         <ControlsProvider controls={controls}>
           <SuggestedPromptProvider suggestedPrompts={suggestedPrompts}>
             <ResponseComponentsProvider responseComponents={responseComponents}>
-              <ConversationDisplayTextProvider {..._displayText}>
-                <ConversationInputContextProvider>
-                  <SendMessageContextProvider
-                    handleSendMessage={handleSendMessage}
-                  >
-                    <AvatarsProvider avatars={avatars}>
-                      <ActionsProvider actions={actions}>
-                        <MessageVariantProvider variant={variant}>
-                          <MessagesProvider messages={messages}>
-                            <LoadingContextProvider isLoading={isLoading}>
-                              {children}
-                            </LoadingContextProvider>
-                          </MessagesProvider>
-                        </MessageVariantProvider>
-                      </ActionsProvider>
-                    </AvatarsProvider>
-                  </SendMessageContextProvider>
-                </ConversationInputContextProvider>
-              </ConversationDisplayTextProvider>
+              <AttachmentProvider allowAttachments={allowAttachments}>
+                <ConversationDisplayTextProvider {..._displayText}>
+                  <ConversationInputContextProvider>
+                    <SendMessageContextProvider
+                      handleSendMessage={handleSendMessage}
+                    >
+                      <AvatarsProvider avatars={avatars}>
+                        <ActionsProvider actions={actions}>
+                          <MessageVariantProvider variant={variant}>
+                            <MessagesProvider messages={messages}>
+                              <LoadingContextProvider isLoading={isLoading}>
+                                {children}
+                              </LoadingContextProvider>
+                            </MessagesProvider>
+                          </MessageVariantProvider>
+                        </ActionsProvider>
+                      </AvatarsProvider>
+                    </SendMessageContextProvider>
+                  </ConversationInputContextProvider>
+                </ConversationDisplayTextProvider>
+              </AttachmentProvider>
             </ResponseComponentsProvider>
           </SuggestedPromptProvider>
         </ControlsProvider>

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

@@ -31,6 +31,7 @@ export interface AIConversationInput {
   responseComponents?: ResponseComponents;
   variant?: MessageVariant;
   controls?: ControlsContextProps;
+  allowAttachments?: boolean;
 }
 
 export interface AIConversationProps {

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

@@ -15,6 +15,7 @@ import {
 import { ControlsContext } from '../../context/ControlsContext';
 import { getImageTypeFromMimeType } from '../../utils';
 import { LoadingContext } from '../../context/LoadingContext';
+import { AttachmentContext } from '../../context/AttachmentContext';
 
 const {
   Button,
@@ -148,6 +149,7 @@ const InputContainer = withBaseElementProps(View, {
 export const FieldControl: FieldControl = () => {
   const { input, setInput } = React.useContext(ConversationInputContext);
   const handleSendMessage = React.useContext(SendMessageContext);
+  const allowAttachments = React.useContext(AttachmentContext);
   const ref = React.useRef<HTMLFormElement | null>(null);
   const responseComponents = React.useContext(ResponseComponentsContext);
   const controls = React.useContext(ControlsContext);
@@ -212,6 +214,7 @@ export const FieldControl: FieldControl = () => {
         handleSubmit={handleSubmit}
         input={input!}
         setInput={setInput!}
+        allowAttachments={allowAttachments}
       />
     );
   }
@@ -223,7 +226,7 @@ export const FieldControl: FieldControl = () => {
       method="post"
       ref={ref}
     >
-      <AttachFileControl />
+      {allowAttachments ? <AttachFileControl /> : null}
       <InputContainer>
         <VisuallyHidden>
           <Label />

packages/react-ai/src/components/AIConversation/views/Controls/__tests__/FieldControl.spec.tsx

@@ -5,10 +5,15 @@ import { FieldControl } from '../FieldControl';
 import { ConversationInputContextProvider } from '../../../context/ConversationInputContext';
 import userEvent from '@testing-library/user-event';
 import { SendMessageContextProvider } from '../../../context/SendMessageContext';
+import { AttachmentProvider } from '../../../context/AttachmentContext';
 
 describe('FieldControl', () => {
   it('renders a FieldControl component with the correct elements', () => {
-    const result = render(<FieldControl />);
+    const result = render(
+      <AttachmentProvider allowAttachments>
+        <FieldControl />
+      </AttachmentProvider>
+    );
     expect(result.container).toBeDefined();
 
     const form = screen.findByRole('form');
@@ -23,7 +28,11 @@ describe('FieldControl', () => {
   });
 
   it('renders FieldControl with the correct accessibility roles', () => {
-    render(<FieldControl />);
+    render(
+      <AttachmentProvider allowAttachments>
+        <FieldControl />
+      </AttachmentProvider>
+    );
 
     const actionButtons = screen.getAllByRole('button');
     const sendButton = actionButtons[1];

packages/react-ai/src/components/AIConversation/views/default/Form.tsx

@@ -11,15 +11,49 @@ import { ComponentClassName } from '@aws-amplify/ui';
 import { ControlsContextProps } from '../../context/ControlsContext';
 import { Attachments } from './Attachments';
 import { LoadingContext } from '../../context/LoadingContext';
+import { ConversationInputContext } from '../../context';
 
 function isHTMLFormElement(target: EventTarget): target is HTMLFormElement {
   return 'form' in target;
 }
 
+/**
+ * Will conditionally render the DropZone if allowAttachments
+ * is true
+ */
+const FormWrapper = ({
+  children,
+  allowAttachments,
+  setInput,
+}: {
+  children: React.ReactNode;
+  allowAttachments?: boolean;
+  setInput: ConversationInputContext['setInput'];
+}) => {
+  if (allowAttachments) {
+    return (
+      <DropZone
+        className={ComponentClassName.AIConversationFormDropzone}
+        onDropComplete={({ acceptedFiles }) => {
+          setInput?.((prevInput) => ({
+            ...prevInput,
+            files: [...(prevInput?.files ?? []), ...acceptedFiles],
+          }));
+        }}
+      >
+        {children}
+      </DropZone>
+    );
+  } else {
+    return children;
+  }
+};
+
 export const Form: NonNullable<ControlsContextProps['Form']> = ({
   setInput,
   input,
   handleSubmit,
+  allowAttachments,
 }) => {
   const icons = useIcons('aiConversation');
   const sendIcon = icons?.send ?? <IconSend />;
@@ -29,51 +63,46 @@ export const Form: NonNullable<ControlsContextProps['Form']> = ({
   const isInputEmpty = !input?.text?.length && !input?.files?.length;
 
   return (
-    <DropZone
-      className={ComponentClassName.AIConversationFormDropzone}
-      onDropComplete={({ acceptedFiles }) => {
-        setInput((prevInput) => ({
-          ...prevInput,
-          files: [...(prevInput?.files ?? []), ...acceptedFiles],
-        }));
-      }}
-    >
+    <FormWrapper allowAttachments={allowAttachments} setInput={setInput}>
       <View
         as="form"
         className={ComponentClassName.AIConversationForm}
         onSubmit={handleSubmit}
       >
-        <Button
-          className={ComponentClassName.AIConversationFormAttach}
-          onClick={() => {
-            hiddenInput?.current?.click();
-            if (hiddenInput?.current) {
-              hiddenInput.current.value = '';
-            }
-          }}
-        >
-          <span>{attachIcon}</span>
-          <VisuallyHidden>
-            <input
-              type="file"
-              tabIndex={-1}
-              ref={hiddenInput}
-              onChange={(e) => {
-                const { files } = e.target;
-                if (!files || files.length === 0) {
-                  return;
-                }
-                setInput((prevValue) => ({
-                  ...prevValue,
-                  files: [...(prevValue?.files ?? []), ...Array.from(files)],
-                }));
-              }}
-              multiple
-              accept="*"
-              data-testid="hidden-file-input"
-            />
-          </VisuallyHidden>
-        </Button>
+        {allowAttachments ? (
+          <Button
+            className={ComponentClassName.AIConversationFormAttach}
+            onClick={() => {
+              hiddenInput?.current?.click();
+              if (hiddenInput?.current) {
+                hiddenInput.current.value = '';
+              }
+            }}
+          >
+            <span>{attachIcon}</span>
+            <VisuallyHidden>
+              <input
+                type="file"
+                tabIndex={-1}
+                ref={hiddenInput}
+                onChange={(e) => {
+                  const { files } = e.target;
+                  if (!files || files.length === 0) {
+                    return;
+                  }
+                  setInput((prevValue) => ({
+                    ...prevValue,
+                    files: [...(prevValue?.files ?? []), ...Array.from(files)],
+                  }));
+                }}
+                multiple
+                accept="*"
+                data-testid="hidden-file-input"
+              />
+            </VisuallyHidden>
+          </Button>
+        ) : null}
+
         <TextAreaField
           className={ComponentClassName.AIConversationFormField}
           label="input"
@@ -111,6 +140,6 @@ export const Form: NonNullable<ControlsContextProps['Form']> = ({
         </Button>
       </View>
       <Attachments setInput={setInput} files={input?.files} />
-    </DropZone>
+    </FormWrapper>
   );
 };

packages/react-ai/src/components/AIConversation/views/default/__tests__/Form.spec.tsx

@@ -14,7 +14,12 @@ describe('Form', () => {
 
   it('renders a Form component with the correct elements', () => {
     const result = render(
-      <Form setInput={setInput} input={input} handleSubmit={handleSubmit} />
+      <Form
+        allowAttachments
+        setInput={setInput}
+        input={input}
+        handleSubmit={handleSubmit}
+      />
     );
     expect(result.container).toBeDefined();
 
@@ -31,7 +36,12 @@ describe('Form', () => {
 
   it('can upload files to the input', async () => {
     const result = render(
-      <Form setInput={setInput} input={input} handleSubmit={handleSubmit} />
+      <Form
+        allowAttachments
+        setInput={setInput}
+        input={input}
+        handleSubmit={handleSubmit}
+      />
     );
     expect(result.container).toBeDefined();