handle partial chunks in react getStreamedResponse (vercel#524)

Co-authored-by: Max Leiter <max.leiter@vercel.com>
Co-authored-by: Justin Ridgewell <justin@ridgewell.name>

Author: 3 people

.changeset/popular-badgers-applaud.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+ai/react: fix: handle partial chunks in react getStreamedResponse

docs/pages/docs/api-reference/use-chat.mdx

@@ -109,7 +109,7 @@ Options passed to `useChat`:
     [
       'sendExtraMessageFields',
       'boolean',
-      'An optional boolean that determines whether to send extra fields you\'ve added to `messages`. Defaults to `false` and only the `content` and `role` fields will be sent to the API endpoint.'
+      "An optional boolean that determines whether to send extra fields you've added to `messages`. Defaults to `false` and only the `content` and `role` fields will be sent to the API endpoint."
     ]
   ]}
 />

packages/core/react/use-chat.ts

@@ -156,15 +156,39 @@ const getStreamedResponse = async (
   }
 
   const prefixMap: PrefixMap = {}
+  const NEWLINE = '\n'.charCodeAt(0)
+  let chunks: Uint8Array[] = []
+  let totalLength = 0
 
   if (isComplexMode) {
     while (true) {
-      const { done, value } = await reader.read()
-      if (done) {
+      const { value } = await reader.read()
+      if (value) {
+        chunks.push(value)
+        totalLength += value.length
+        if (value[value.length - 1] !== NEWLINE) {
+          // if the last character is not a newline, we have not read the whole JSON value
+          continue
+        }
+      }
+
+      if (chunks.length === 0) {
+        // we have reached the end of the stream
         break
       }
+
+      // concatenate all the chunks into a single Uint8Array
+      let concatenatedChunks = new Uint8Array(totalLength)
+      let offset = 0
+      for (const chunk of chunks) {
+        concatenatedChunks.set(chunk, offset)
+        offset += chunk.length
+      }
+      chunks.length = 0
+      totalLength = 0
+
       // Update the chat state with the new message tokens.
-      const lines = decode(value)
+      const lines = decode(concatenatedChunks)
       if (typeof lines === 'string') {
         throw new Error(
           'Invalid response format. Complex mode was set but the response is a string. This should never happen.'