@ai-sdk/react 0.0.40 → 0.0.41

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @ai-sdk/react@0.0.40 build /home/runner/work/ai/ai/packages/react
+> @ai-sdk/react@0.0.41 build /home/runner/work/ai/ai/packages/react
 > tsup
 
 CLI Building entry: src/index.ts
@@ -11,11 +11,11 @@
 ESM Build start
 ESM dist/index.mjs     25.67 KB
 ESM dist/index.mjs.map 55.94 KB
-ESM ⚡️ Build success in 55ms
+ESM ⚡️ Build success in 52ms
 CJS dist/index.js     28.14 KB
 CJS dist/index.js.map 56.02 KB
-CJS ⚡️ Build success in 59ms
+CJS ⚡️ Build success in 53ms
 DTS Build start
-DTS ⚡️ Build success in 5273ms
+DTS ⚡️ Build success in 5278ms
 DTS dist/index.d.ts  10.99 KB
 DTS dist/index.d.mts 10.99 KB

package/.turbo/turbo-clean.log

@@ -1,4 +1,4 @@
 
-> @ai-sdk/react@0.0.40 clean /home/runner/work/ai/ai/packages/react
+> @ai-sdk/react@0.0.41 clean /home/runner/work/ai/ai/packages/react
 > rm -rf dist
 

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @ai-sdk/react
 
+## 0.0.41
+
+### Patch Changes
+
+- e5b58f3: fix (ai/ui): forward streaming errors in useChat
+- Updated dependencies [e5b58f3]
+  - @ai-sdk/ui-utils@0.0.29
+
 ## 0.0.40
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ai-sdk/react",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "license": "Apache-2.0",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -16,13 +16,13 @@
   },
   "dependencies": {
     "@ai-sdk/provider-utils": "1.0.9",
-    "@ai-sdk/ui-utils": "0.0.28",
+    "@ai-sdk/ui-utils": "0.0.29",
     "swr": "2.2.5"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/user-event": "^14.5.1",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/react": "^16.0.0",
     "@types/node": "^18",
     "@types/react": "^18",
     "@types/react-dom": "^18",

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

@@ -121,7 +121,7 @@ describe('stream data stream', () => {
   );
 
   it(
-    'should show error response',
+    'should show error response when there is a server error',
     withTestServer(
       { type: 'error', url: '/api/chat', status: 404, content: 'Not found' },
       async () => {
@@ -135,6 +135,25 @@ describe('stream data stream', () => {
     ),
   );
 
+  it(
+    'should show error response when there is a streaming error',
+    withTestServer(
+      {
+        type: 'stream-values',
+        url: '/api/chat',
+        content: ['3:"custom error message"\n'],
+      },
+      async () => {
+        await userEvent.click(screen.getByTestId('do-append'));
+
+        await screen.findByTestId('error');
+        expect(screen.getByTestId('error')).toHaveTextContent(
+          'Error: custom error message',
+        );
+      },
+    ),
+  );
+
   describe('loading state', () => {
     it(
       'should show loading state',
@@ -1016,327 +1035,325 @@ describe('maxToolRoundtrips', () => {
   });
 });
 
-// Disabled: unstable with React 18.3.3 TODO re-enable
-//
-// describe('file attachments with data url', () => {
-//   const TestComponent = () => {
-//     const { messages, handleSubmit, handleInputChange, isLoading, input } =
-//       useChat();
-
-//     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',
-//     withTestServer(
-//       {
-//         url: '/api/chat',
-//         type: 'stream-values',
-//         content: ['0:"Response to message with text attachment"\n'],
-//       },
-//       async ({ call }) => {
-//         const file = new File(['test file content'], 'test.txt', {
-//           type: 'text/plain',
-//         });
-
-//         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);
-
-//         expect(await call(0).getRequestBodyJson()).toStrictEqual({
-//           messages: [
-//             {
-//               role: 'user',
-//               content: 'Message with text attachment',
-//               experimental_attachments: [
-//                 {
-//                   name: 'test.txt',
-//                   contentType: 'text/plain',
-//                   url: 'data:text/plain;base64,dGVzdCBmaWxlIGNvbnRlbnQ=',
-//                 },
-//               ],
-//             },
-//           ],
-//         });
-
-//         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',
-//         );
-//       },
-//     ),
-//   );
-
-//   it(
-//     'should handle image file attachment and submission',
-//     withTestServer(
-//       {
-//         url: '/api/chat',
-//         type: 'stream-values',
-//         content: ['0:"Response to message with image attachment"\n'],
-//       },
-//       async ({ call }) => {
-//         const file = new File(['test image content'], 'test.png', {
-//           type: 'image/png',
-//         });
-
-//         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);
-
-//         expect(await call(0).getRequestBodyJson()).toStrictEqual({
-//           messages: [
-//             {
-//               role: 'user',
-//               content: 'Message with image attachment',
-//               experimental_attachments: [
-//                 {
-//                   name: 'test.png',
-//                   contentType: 'image/png',
-//                   url: 'data:image/png;base64,dGVzdCBpbWFnZSBjb250ZW50',
-//                 },
-//               ],
-//             },
-//           ],
-//         });
-
-//         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();
-
-//     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',
-//     withTestServer(
-//       {
-//         url: '/api/chat',
-//         type: 'stream-values',
-//         content: ['0:"Response to message with image attachment"\n'],
-//       },
-//       async ({ call }) => {
-//         const messageInput = screen.getByTestId('message-input');
-//         await userEvent.type(messageInput, 'Message with image attachment');
-
-//         const submitButton = screen.getByTestId('submit-button');
-//         await userEvent.click(submitButton);
-
-//         expect(await call(0).getRequestBodyJson()).toStrictEqual({
-//           messages: [
-//             {
-//               role: 'user',
-//               content: 'Message with image attachment',
-//               experimental_attachments: [
-//                 {
-//                   name: 'test.png',
-//                   contentType: 'image/png',
-//                   url: 'https://example.com/image.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',
-//         );
-//       },
-//     ),
-//   );
-// });
+describe('file attachments with data url', () => {
+  const TestComponent = () => {
+    const { messages, handleSubmit, handleInputChange, isLoading, input } =
+      useChat();
+
+    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',
+    withTestServer(
+      {
+        url: '/api/chat',
+        type: 'stream-values',
+        content: ['0:"Response to message with text attachment"\n'],
+      },
+      async ({ call }) => {
+        const file = new File(['test file content'], 'test.txt', {
+          type: 'text/plain',
+        });
+
+        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);
+
+        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',
+        );
+
+        expect(await call(0).getRequestBodyJson()).toStrictEqual({
+          messages: [
+            {
+              role: 'user',
+              content: 'Message with text attachment',
+              experimental_attachments: [
+                {
+                  name: 'test.txt',
+                  contentType: 'text/plain',
+                  url: 'data:text/plain;base64,dGVzdCBmaWxlIGNvbnRlbnQ=',
+                },
+              ],
+            },
+          ],
+        });
+      },
+    ),
+  );
+
+  it(
+    'should handle image file attachment and submission',
+    withTestServer(
+      {
+        url: '/api/chat',
+        type: 'stream-values',
+        content: ['0:"Response to message with image attachment"\n'],
+      },
+      async ({ call }) => {
+        const file = new File(['test image content'], 'test.png', {
+          type: 'image/png',
+        });
+
+        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);
+
+        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',
+        );
+
+        expect(await call(0).getRequestBodyJson()).toStrictEqual({
+          messages: [
+            {
+              role: 'user',
+              content: 'Message with image attachment',
+              experimental_attachments: [
+                {
+                  name: 'test.png',
+                  contentType: 'image/png',
+                  url: 'data:image/png;base64,dGVzdCBpbWFnZSBjb250ZW50',
+                },
+              ],
+            },
+          ],
+        });
+      },
+    ),
+  );
+});
+
+describe('file attachments with url', () => {
+  const TestComponent = () => {
+    const { messages, handleSubmit, handleInputChange, isLoading, input } =
+      useChat();
+
+    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',
+    withTestServer(
+      {
+        url: '/api/chat',
+        type: 'stream-values',
+        content: ['0:"Response to message with image attachment"\n'],
+      },
+      async ({ call }) => {
+        const messageInput = screen.getByTestId('message-input');
+        await userEvent.type(messageInput, 'Message with image attachment');
+
+        const submitButton = screen.getByTestId('submit-button');
+        await userEvent.click(submitButton);
+
+        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',
+        );
+
+        expect(await call(0).getRequestBodyJson()).toStrictEqual({
+          messages: [
+            {
+              role: 'user',
+              content: 'Message with image attachment',
+              experimental_attachments: [
+                {
+                  name: 'test.png',
+                  contentType: 'image/png',
+                  url: 'https://example.com/image.png',
+                },
+              ],
+            },
+          ],
+        });
+      },
+    ),
+  );
+});
 
 describe('reload', () => {
   const TestComponent = () => {