@ai-sdk/react 0.0.20 → 0.0.22

package/src/use-chat.ui.test.tsx

@@ -1,14 +1,21 @@
+/* eslint-disable @next/next/no-img-element */
 import {
   mockFetchDataStream,
   mockFetchDataStreamWithGenerator,
   mockFetchError,
 } from '@ai-sdk/ui-utils/test';
 import '@testing-library/jest-dom/vitest';
-import { cleanup, findByText, render, screen } from '@testing-library/react';
+import {
+  act,
+  cleanup,
+  findByText,
+  render,
+  screen,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { useChat } from './use-chat';
-import { formatStreamPart } from '@ai-sdk/ui-utils';
+import { formatStreamPart, getTextFromDataUrl } from '@ai-sdk/ui-utils';
 
 describe('stream data stream', () => {
   const TestComponent = () => {
@@ -227,12 +234,11 @@ describe('form actions', () => {
           </div>
         ))}
 
-        <form onSubmit={handleSubmit} className="fixed bottom-0 w-full p-2">
+        <form onSubmit={handleSubmit}>
           <input
             value={input}
             placeholder="Send message..."
             onChange={handleInputChange}
-            className="w-full p-2 bg-zinc-100"
             disabled={isLoading}
             data-testid="do-input"
           />
@@ -556,3 +562,290 @@ describe('maxToolRoundtrips', () => {
     });
   });
 });
+
+describe('file attachments with data url', () => {
+  const TestComponent = () => {
+    const { messages, handleSubmit, handleInputChange, isLoading, input } =
+      useChat({
+        api: '/api/stream-chat',
+      });
+
+    const [attachments, setAttachments] = useState<FileList | undefined>(
+      undefined,
+    );
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    return (
+      <div>
+        {messages.map((m, idx) => (
+          <div data-testid={`message-${idx}`} key={m.id}>
+            {m.role === 'user' ? 'User: ' : 'AI: '}
+            {m.content}
+            {m.experimental_attachments?.map(attachment => {
+              if (attachment.contentType?.startsWith('image/')) {
+                return (
+                  <img
+                    key={attachment.name}
+                    src={attachment.url}
+                    alt={attachment.name}
+                    data-testid={`attachment-${idx}`}
+                  />
+                );
+              } else if (attachment.contentType?.startsWith('text/')) {
+                return (
+                  <div key={attachment.name} data-testid={`attachment-${idx}`}>
+                    {getTextFromDataUrl(attachment.url)}
+                  </div>
+                );
+              }
+            })}
+          </div>
+        ))}
+
+        <form
+          onSubmit={event => {
+            handleSubmit(event, {
+              experimental_attachments: attachments,
+            });
+            setAttachments(undefined);
+            if (fileInputRef.current) {
+              fileInputRef.current.value = '';
+            }
+          }}
+          data-testid="chat-form"
+        >
+          <input
+            type="file"
+            onChange={event => {
+              if (event.target.files) {
+                setAttachments(event.target.files);
+              }
+            }}
+            multiple
+            ref={fileInputRef}
+            data-testid="file-input"
+          />
+          <input
+            value={input}
+            onChange={handleInputChange}
+            disabled={isLoading}
+            data-testid="message-input"
+          />
+          <button type="submit" data-testid="submit-button">
+            Send
+          </button>
+        </form>
+      </div>
+    );
+  };
+
+  beforeEach(() => {
+    render(<TestComponent />);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    cleanup();
+  });
+
+  it('should handle text file attachment and submission', async () => {
+    const file = new File(['test file content'], 'test.txt', {
+      type: 'text/plain',
+    });
+
+    const { requestBody } = mockFetchDataStream({
+      url: '/api/stream-chat',
+      chunks: ['0:"Response to message with text attachment"\n'],
+    });
+
+    const fileInput = screen.getByTestId('file-input');
+    await userEvent.upload(fileInput, file);
+
+    const messageInput = screen.getByTestId('message-input');
+    await userEvent.type(messageInput, 'Message with text attachment');
+
+    const submitButton = screen.getByTestId('submit-button');
+    await userEvent.click(submitButton);
+
+    const sentBody = JSON.parse((await requestBody) as string);
+    expect(sentBody.messages[0].content).toBe('Message with text attachment');
+    expect(sentBody.messages[0].experimental_attachments).toBeDefined();
+    expect(sentBody.messages[0].experimental_attachments.length).toBe(1);
+    expect(sentBody.messages[0].experimental_attachments[0].name).toBe(
+      'test.txt',
+    );
+
+    await screen.findByTestId('message-0');
+    expect(screen.getByTestId('message-0')).toHaveTextContent(
+      'User: Message with text attachment',
+    );
+
+    await screen.findByTestId('attachment-0');
+    expect(screen.getByTestId('attachment-0')).toHaveTextContent(
+      'test file content',
+    );
+
+    await screen.findByTestId('message-1');
+    expect(screen.getByTestId('message-1')).toHaveTextContent(
+      'AI: Response to message with text attachment',
+    );
+  });
+
+  // image file
+
+  it('should handle image file attachment and submission', async () => {
+    const file = new File(['test image content'], 'test.png', {
+      type: 'image/png',
+    });
+
+    const { requestBody } = mockFetchDataStream({
+      url: '/api/stream-chat',
+      chunks: ['0:"Response to message with image attachment"\n'],
+    });
+
+    const fileInput = screen.getByTestId('file-input');
+    await userEvent.upload(fileInput, file);
+
+    const messageInput = screen.getByTestId('message-input');
+    await userEvent.type(messageInput, 'Message with image attachment');
+
+    const submitButton = screen.getByTestId('submit-button');
+    await userEvent.click(submitButton);
+
+    const sentBody = JSON.parse((await requestBody) as string);
+    expect(sentBody.messages[0].content).toBe('Message with image attachment');
+    expect(sentBody.messages[0].experimental_attachments).toBeDefined();
+    expect(sentBody.messages[0].experimental_attachments.length).toBe(1);
+    expect(sentBody.messages[0].experimental_attachments[0].name).toBe(
+      'test.png',
+    );
+
+    await screen.findByTestId('message-0');
+    expect(screen.getByTestId('message-0')).toHaveTextContent(
+      'User: Message with image attachment',
+    );
+
+    await screen.findByTestId('attachment-0');
+    expect(screen.getByTestId('attachment-0')).toHaveAttribute(
+      'src',
+      expect.stringContaining('data:image/png;base64'),
+    );
+
+    await screen.findByTestId('message-1');
+    expect(screen.getByTestId('message-1')).toHaveTextContent(
+      'AI: Response to message with image attachment',
+    );
+  });
+});
+
+describe('file attachments with url', () => {
+  const TestComponent = () => {
+    const { messages, handleSubmit, handleInputChange, isLoading, input } =
+      useChat({
+        api: '/api/stream-chat',
+      });
+
+    return (
+      <div>
+        {messages.map((m, idx) => (
+          <div data-testid={`message-${idx}`} key={m.id}>
+            {m.role === 'user' ? 'User: ' : 'AI: '}
+            {m.content}
+            {m.experimental_attachments?.map(attachment => {
+              if (attachment.contentType?.startsWith('image/')) {
+                return (
+                  <img
+                    key={attachment.name}
+                    src={attachment.url}
+                    alt={attachment.name}
+                    data-testid={`attachment-${idx}`}
+                  />
+                );
+              } else if (attachment.contentType?.startsWith('text/')) {
+                return (
+                  <div key={attachment.name} data-testid={`attachment-${idx}`}>
+                    {Buffer.from(
+                      attachment.url.split(',')[1],
+                      'base64',
+                    ).toString('utf-8')}
+                  </div>
+                );
+              }
+            })}
+          </div>
+        ))}
+
+        <form
+          onSubmit={event => {
+            handleSubmit(event, {
+              experimental_attachments: [
+                {
+                  name: 'test.png',
+                  contentType: 'image/png',
+                  url: 'https://example.com/image.png',
+                },
+              ],
+            });
+          }}
+          data-testid="chat-form"
+        >
+          <input
+            value={input}
+            onChange={handleInputChange}
+            disabled={isLoading}
+            data-testid="message-input"
+          />
+          <button type="submit" data-testid="submit-button">
+            Send
+          </button>
+        </form>
+      </div>
+    );
+  };
+
+  beforeEach(() => {
+    render(<TestComponent />);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    cleanup();
+  });
+
+  it('should handle image file attachment and submission', async () => {
+    const { requestBody } = mockFetchDataStream({
+      url: '/api/stream-chat',
+      chunks: ['0:"Response to message with image attachment"\n'],
+    });
+
+    const messageInput = screen.getByTestId('message-input');
+    await userEvent.type(messageInput, 'Message with image attachment');
+
+    const submitButton = screen.getByTestId('submit-button');
+    await userEvent.click(submitButton);
+
+    const sentBody = JSON.parse((await requestBody) as string);
+    expect(sentBody.messages[0].content).toBe('Message with image attachment');
+    expect(sentBody.messages[0].experimental_attachments).toBeDefined();
+    expect(sentBody.messages[0].experimental_attachments.length).toBe(1);
+    expect(sentBody.messages[0].experimental_attachments[0].name).toBe(
+      'test.png',
+    );
+
+    await screen.findByTestId('message-0');
+    expect(screen.getByTestId('message-0')).toHaveTextContent(
+      'User: Message with image attachment',
+    );
+
+    await screen.findByTestId('attachment-0');
+    expect(screen.getByTestId('attachment-0')).toHaveAttribute(
+      'src',
+      expect.stringContaining('https://example.com/image.png'),
+    );
+
+    await screen.findByTestId('message-1');
+    expect(screen.getByTestId('message-1')).toHaveTextContent(
+      'AI: Response to message with image attachment',
+    );
+  });
+});