fix: Set stream: true when decoding streamed chunks (#182)

.changeset/lazy-ligers-shave.md

@@ -0,0 +1,5 @@
+---
+'ai': patch
+---
+
+Set stream: true when decoding streamed chunks

packages/core/react/use-chat.ts

@@ -1,7 +1,7 @@
 import { useCallback, useId, useRef, useEffect, useState } from 'react'
 import useSWRMutation from 'swr/mutation'
 import useSWR from 'swr'
-import { nanoid, decodeAIStreamChunk } from '../shared/utils'
+import { nanoid, createChunkDecoder } from '../shared/utils'
 
 import type { Message, CreateMessage, UseChatOptions } from '../shared/types'
 export type { Message, CreateMessage, UseChatOptions }
@@ -154,14 +154,15 @@ export function useChat({
         const createdAt = new Date()
         const replyId = nanoid()
         const reader = res.body.getReader()
+        const decode = createChunkDecoder()
 
         while (true) {
           const { done, value } = await reader.read()
           if (done) {
             break
           }
           // Update the chat state with the new message tokens.
-          result += decodeAIStreamChunk(value)
+          result += decode(value)
           mutate(
             [
               ...messagesSnapshot,

packages/core/react/use-completion.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useId, useRef, useState } from 'react'
 import useSWRMutation from 'swr/mutation'
 import useSWR from 'swr'
-import { decodeAIStreamChunk } from '../shared/utils'
+import { createChunkDecoder } from '../shared/utils'
 import { UseCompletionOptions } from '../shared/types'
 
 export type UseCompletionHelpers = {
@@ -136,6 +136,7 @@ export function useCompletion({
 
         let result = ''
         const reader = res.body.getReader()
+        const decoder = createChunkDecoder()
 
         while (true) {
           const { done, value } = await reader.read()
@@ -144,7 +145,7 @@ export function useCompletion({
           }
 
           // Update the completion state with the new message tokens.
-          result += decodeAIStreamChunk(value)
+          result += decoder(value)
           mutate(result, false)
 
           // The request has been aborted, stop reading the stream.

packages/core/shared/utils.test.ts

@@ -0,0 +1,11 @@
+import { createChunkDecoder } from './utils'
+
+describe('utils', () => {
+  it('correctly decode streamed utf8 chunks', () => {
+    const decoder = createChunkDecoder()
+    // Without `stream: true` this will fail.
+    const chunk1 = new Uint8Array([226, 153])
+    const chunk2 = new Uint8Array([165])
+    expect(decoder(chunk1) + decoder(chunk2)).toBe('♥')
+  })
+})

packages/core/shared/utils.ts

@@ -6,7 +6,9 @@ export const nanoid = customAlphabet(
   7
 )
 
-const decoder = new TextDecoder()
-export function decodeAIStreamChunk(chunk: Uint8Array): string {
-  return decoder.decode(chunk)
+export function createChunkDecoder() {
+  const decoder = new TextDecoder()
+  return function (chunk: Uint8Array): string {
+    return decoder.decode(chunk, { stream: true })
+  }
 }

packages/core/svelte/use-chat.ts

@@ -1,9 +1,9 @@
 import { useSWR } from 'sswr'
-import { Readable, get, readable, writable } from 'svelte/store'
+import { Readable, get, writable } from 'svelte/store'
 
 import type { Message, CreateMessage, UseChatOptions } from '../shared/types'
 import { Writable } from 'svelte/store'
-import { decodeAIStreamChunk, nanoid } from '../shared/utils'
+import { nanoid, createChunkDecoder } from '../shared/utils'
 
 export type { Message, CreateMessage, UseChatOptions }
 
@@ -134,14 +134,15 @@ export function useChat({
       const createdAt = new Date()
       const replyId = nanoid()
       const reader = res.body.getReader()
+      const decoder = createChunkDecoder()
 
       while (true) {
         const { done, value } = await reader.read()
         if (done) {
           break
         }
         // Update the chat state with the new message tokens.
-        result += decodeAIStreamChunk(value)
+        result += decoder(value)
         mutate([
           ...messagesSnapshot,
           {

packages/core/svelte/use-completion.ts

@@ -2,7 +2,7 @@ import { useSWR } from 'sswr'
 import { Readable, get, writable } from 'svelte/store'
 
 import { Writable } from 'svelte/store'
-import { decodeAIStreamChunk } from '../shared/utils'
+import { createChunkDecoder } from '../shared/utils'
 import { UseCompletionOptions } from '../shared/types'
 
 export type UseCompletionHelpers = {
@@ -116,14 +116,15 @@ export function useCompletion({
 
       let result = ''
       const reader = res.body.getReader()
+      const decoder = createChunkDecoder()
 
       while (true) {
         const { done, value } = await reader.read()
         if (done) {
           break
         }
         // Update the chat state with the new message tokens.
-        result += decodeAIStreamChunk(value)
+        result += decoder(value)
         mutate(result)
 
         // The request has been aborted, stop reading the stream.

packages/core/vue/use-chat.ts

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import type { Ref } from 'vue'
 
 import type { Message, CreateMessage, UseChatOptions } from '../shared/types'
-import { decodeAIStreamChunk, nanoid } from '../shared/utils'
+import { createChunkDecoder, nanoid } from '../shared/utils'
 
 export type { Message, CreateMessage, UseChatOptions }
 
@@ -136,14 +136,15 @@ export function useChat({
       const createdAt = new Date()
       const replyId = nanoid()
       const reader = res.body.getReader()
+      const decoder = createChunkDecoder()
 
       while (true) {
         const { done, value } = await reader.read()
         if (done) {
           break
         }
         // Update the chat state with the new message tokens.
-        result += decodeAIStreamChunk(value)
+        result += decoder(value)
         mutate([
           ...messagesSnapshot,
           {

packages/core/vue/use-completion.ts

@@ -2,7 +2,7 @@ import swrv from 'swrv'
 import { ref } from 'vue'
 import type { Ref } from 'vue'
 
-import { decodeAIStreamChunk } from '../shared/utils'
+import { createChunkDecoder } from '../shared/utils'
 import { UseCompletionOptions } from '../shared/types'
 
 export type UseCompletionHelpers = {
@@ -119,14 +119,15 @@ export function useCompletion({
 
       let result = ''
       const reader = res.body.getReader()
+      const decoder = createChunkDecoder()
 
       while (true) {
         const { done, value } = await reader.read()
         if (done) {
           break
         }
         // Update the chat state with the new message tokens.
-        result += decodeAIStreamChunk(value)
+        result += decoder(value)
         mutate(result)
 
         // The request has been aborted, stop reading the stream.