fix (ai/ui): useChat messages have stable ids with streamProtocol: "t…

…ext" (#2515)
vercel · Aug 1, 2024 · 5be2512 · 5be2512
1 parent ffed3a5
commit 5be2512
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 9 deletions.
diff --git a/.changeset/thin-cooks-march.md b/.changeset/thin-cooks-march.md
@@ -0,0 +1,6 @@
+---
+'@ai-sdk/ui-utils': patch
+'@ai-sdk/react': patch
+---
+
+fix (ai/ui): useChat messages have stable ids with streamProtocol: "text"
diff --git a/packages/react/src/use-chat.ui.test.tsx b/packages/react/src/use-chat.ui.test.tsx
@@ -265,8 +265,11 @@ describe('text stream', () => {
       <div>
         {messages.map((m, idx) => (
           <div data-testid={`message-${idx}-text-stream`} key={m.id}>
-            {m.role === 'user' ? 'User: ' : 'AI: '}
-            {m.content}
+            <div data-testid={`message-${idx}-id`}>{m.id}</div>
+            <div data-testid={`message-${idx}-role`}>
+              {m.role === 'user' ? 'User: ' : 'AI: '}
+            </div>
+            <div data-testid={`message-${idx}-content`}>{m.content}</div>
           </div>
         ))}
 
@@ -302,15 +305,39 @@ describe('text stream', () => {
       async () => {
         await userEvent.click(screen.getByTestId('do-append-text-stream'));
 
-        await screen.findByTestId('message-0-text-stream');
-        expect(screen.getByTestId('message-0-text-stream')).toHaveTextContent(
-          'User: hi',
+        await screen.findByTestId('message-0-content');
+        expect(screen.getByTestId('message-0-content')).toHaveTextContent('hi');
+
+        await screen.findByTestId('message-1-content');
+        expect(screen.getByTestId('message-1-content')).toHaveTextContent(
+          'Hello, world.',
         );
+      },
+    ),
+  );
 
-        await screen.findByTestId('message-1-text-stream');
-        expect(screen.getByTestId('message-1-text-stream')).toHaveTextContent(
-          'AI: Hello, world.',
+  it(
+    'should have stable message ids',
+    withTestServer(
+      { url: '/api/chat', type: 'controlled-stream' },
+      async ({ streamController }) => {
+        streamController.enqueue('He');
+
+        await userEvent.click(screen.getByTestId('do-append-text-stream'));
+
+        await screen.findByTestId('message-1-content');
+        expect(screen.getByTestId('message-1-content')).toHaveTextContent('He');
+
+        const id = screen.getByTestId('message-1-id').textContent;
+
+        streamController.enqueue('llo');
+        streamController.close();
+
+        await screen.findByTestId('message-1-content');
+        expect(screen.getByTestId('message-1-content')).toHaveTextContent(
+          'Hello',
         );
+        expect(screen.getByTestId('message-1-id').textContent).toBe(id);
       },
     ),
   );

diff --git a/packages/ui-utils/src/call-chat-api.ts b/packages/ui-utils/src/call-chat-api.ts
@@ -87,7 +87,6 @@ export async function callChatApi({
         }
 
         resultMessage.content += decoder(value);
-        resultMessage.id = generateId();
 
         // note: creating a new message object is required for Solid.js streaming
         onUpdate([{ ...resultMessage }], []);