fix(ai): fixes reattaching the same file by always triggering the onC… (

#5776)

* fix(ai): fixes reattaching the same file by always triggering the onChange event

* Create thin-pants-turn.md

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

Co-authored-by: Danny Banks <[email protected]>

* fix changeset comment

---------

Co-authored-by: Danny Banks <[email protected]>

.changeset/thin-pants-turn.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-ai": patch
+---
+
+fix(ai): fixes reattaching the same file by always triggering the onChange event

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

@@ -16,7 +16,7 @@ function isHTMLFormElement(target: EventTarget): target is HTMLFormElement {
   return 'form' in target;
 }
 
-export const Form: ControlsContextProps['Form'] = ({
+export const Form: NonNullable<ControlsContextProps['Form']> = ({
   setInput,
   input,
   handleSubmit,
@@ -47,6 +47,9 @@ export const Form: ControlsContextProps['Form'] = ({
           className={ComponentClassName.AIConversationFormAttach}
           onClick={() => {
             hiddenInput?.current?.click();
+            if (hiddenInput?.current) {
+              hiddenInput.current.value = '';
+            }
           }}
         >
           <span>{attachIcon}</span>
@@ -67,6 +70,7 @@ export const Form: ControlsContextProps['Form'] = ({
               }}
               multiple
               accept="*"
+              data-testid="hidden-file-input"
             />
           </VisuallyHidden>
         </Button>
@@ -78,6 +82,7 @@ export const Form: ControlsContextProps['Form'] = ({
           flex="1"
           rows={1}
           value={input?.text ?? ''}
+          testId="text-input"
           onKeyDown={(e) => {
             // Submit on enter key if shift is not pressed also
             const shouldSubmit = !e.shiftKey && e.key === 'Enter';

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { Form } from '../Form';
+
+const setInput = jest.fn();
+const input = {};
+const handleSubmit = jest.fn();
+
+describe('Form', () => {
+  beforeEach(() => {
+    setInput.mockClear();
+    handleSubmit.mockClear();
+  });
+
+  it('renders a Form component with the correct elements', () => {
+    const result = render(
+      <Form setInput={setInput} input={input} handleSubmit={handleSubmit} />
+    );
+    expect(result.container).toBeDefined();
+
+    const form = screen.findByRole('form');
+    const buttons = screen.getAllByRole('button');
+    const textInput = screen.getByTestId('text-input');
+    const fileInput = screen.getByTestId('hidden-file-input');
+
+    expect(form).toBeDefined();
+    expect(buttons).toHaveLength(2);
+    expect(textInput).toBeDefined();
+    expect(fileInput).toBeDefined();
+  });
+
+  it('can upload files to the input', async () => {
+    const result = render(
+      <Form setInput={setInput} input={input} handleSubmit={handleSubmit} />
+    );
+    expect(result.container).toBeDefined();
+
+    const fileInput: HTMLInputElement = screen.getByTestId('hidden-file-input');
+    const testFile = new File(['file content'], 'file.txt', {
+      type: 'text/plain',
+    });
+    File.prototype.text = jest.fn().mockResolvedValueOnce('foo.txt');
+    await waitFor(() =>
+      fireEvent.change(fileInput, {
+        target: { files: [testFile] },
+      })
+    );
+    expect(setInput).toHaveBeenCalledTimes(1);
+    expect(fileInput.files).not.toBeNull();
+    expect(fileInput.files![0]).toStrictEqual(testFile);
+  });
+});