ai 2.1.2 → 2.1.6

package/README.md

@@ -0,0 +1,91 @@
+# Vercel AI SDK
+
+The Vercel AI SDK is **a library for building edge-ready AI-powered streaming text and chat UIs**.
+
+## Features
+
+- [SWR](https://swr.vercel.app)-powered React, Svelte and Vue helpers for streaming text responses and building chat and completion UIs
+- First-class support for [LangChain](js.langchain.com/docs) and [OpenAI](https://openai.com), [Anthropic](https://www.anthropic.com), and [HuggingFace](https://huggingface.co)
+- [Edge Runtime](https://edge-runtime.vercel.app/) compatibility
+- Callbacks for saving completed streaming responses to a database (in the same request)
+
+## Installation
+
+```sh
+pnpm install ai
+```
+
+View the full documentation and examples on [sdk.vercel.ai/docs](https://sdk.vercel.ai/docs)
+
+## Example: An AI Chatbot with Next.js and OpenAI
+
+With the Vercel AI SDK, you can build a ChatGPT-like app in just a few lines of code:
+
+```tsx
+// ./app/api/chat/route.js
+import { Configuration, OpenAIApi } from 'openai-edge'
+import { OpenAIStream, StreamingTextResponse } from 'ai'
+
+const config = new Configuration({
+  apiKey: process.env.OPENAI_API_KEY
+})
+const openai = new OpenAIApi(config)
+
+export const runtime = 'edge'
+
+export async function POST(req) {
+  const { messages } = await req.json()
+  const response = await openai.createChatCompletion({
+    model: 'gpt-4',
+    stream: true,
+    messages
+  })
+  const stream = OpenAIStream(response)
+  return new StreamingTextResponse(stream)
+}
+```
+
+```tsx
+// ./app/page.js
+'use client'
+
+import { useChat } from 'ai/react'
+
+export default function Chat() {
+  const { messages, input, handleInputChange, handleSubmit } = useChat()
+
+  return (
+    <div>
+      {messages.map(m => (
+        <div key={m.id}>
+          {m.role}: {m.content}
+        </div>
+      ))}
+
+      <form onSubmit={handleSubmit}>
+        <input
+          value={input}
+          placeholder="Say something..."
+          onChange={handleInputChange}
+        />
+      </form>
+    </div>
+  )
+}
+```
+
+---
+
+View the full documentation and examples on [sdk.vercel.ai/docs](https://sdk.vercel.ai/docs)
+
+## Authors
+
+This library is created by [Vercel](https://vercel.com) and [Next.js](https://nextjs.org) team members, with contributions from:
+
+- Jared Palmer ([@jaredpalmer](https://twitter.com/jaredpalmer)) - [Vercel](https://vercel.com)
+- Shu Ding ([@shuding\_](https://twitter.com/shuding_)) - [Vercel](https://vercel.com)
+- Max Leiter ([@max_leiter](https://twitter.com/max_leiter)) - [Vercel](https://vercel.com)
+- Malte Ubl ([@cramforce](https://twitter.com/cramforce)) - [Vercel](https://vercel.com)
+- Justin Ridgewell ([@jridgewell](https://github.com/jridgewell)) - [Vercel](https://vercel.com)
+
+[Contributors](https://github.com/vercel-labs/ai/graphs/contributors)

package/dist/index.d.ts

@@ -1,21 +1,75 @@
 import { ServerResponse } from 'node:http';
 
+/**
+ * Helper callback methods for AIStream stream lifecycle events
+ * @interface
+ */
 interface AIStreamCallbacks {
     onStart?: () => Promise<void>;
     onCompletion?: (completion: string) => Promise<void>;
     onToken?: (token: string) => Promise<void>;
 }
+/**
+ * Custom parser for AIStream data.
+ * @interface
+ */
 interface AIStreamParser {
     (data: string): string | void;
 }
+/**
+ * Creates a TransformStream that parses events from an EventSource stream using a custom parser.
+ * @param {AIStreamParser} customParser - Function to handle event data.
+ * @returns {TransformStream<Uint8Array, string>} TransformStream parsing events.
+ */
 declare function createEventStreamTransformer(customParser: AIStreamParser): TransformStream<Uint8Array, string>;
 /**
- * This stream forks input stream, allowing us to use the result as a
- * bytestream of the messages and pass the messages to our callback interface.
+ * Creates a transform stream that encodes input messages and invokes optional callback functions.
+ * The transform stream uses the provided callbacks to execute custom logic at different stages of the stream's lifecycle.
+ * - `onStart`: Called once when the stream is initialized.
+ * - `onToken`: Called for each tokenized message.
+ * - `onCompletion`: Called once when the stream is flushed, with the aggregated messages.
+ *
+ * This function is useful when you want to process a stream of messages and perform specific actions during the stream's lifecycle.
+ *
+ * @param {AIStreamCallbacks} [callbacks] - An object containing the callback functions.
+ * @return {TransformStream<string, Uint8Array>} A transform stream that encodes input messages as Uint8Array and allows the execution of custom logic through callbacks.
+ *
+ * @example
+ * const callbacks = {
+ *   onStart: async () => console.log('Stream started'),
+ *   onToken: async (token) => console.log(`Token: ${token}`),
+ *   onCompletion: async (completion) => console.log(`Completion: ${completion}`)
+ * };
+ * const transformer = createCallbacksTransformer(callbacks);
  */
 declare function createCallbacksTransformer(callbacks: AIStreamCallbacks | undefined): TransformStream<string, Uint8Array>;
+/**
+ * Returns a stateful function that, when invoked, trims leading whitespace
+ * from the input text. The trimming only occurs on the first invocation, ensuring that
+ * subsequent calls do not alter the input text. This is particularly useful in scenarios
+ * where a text stream is being processed and only the initial whitespace should be removed.
+ *
+ * @return {function(string): string} A function that takes a string as input and returns a string
+ * with leading whitespace removed if it is the first invocation; otherwise, it returns the input unchanged.
+ *
+ * @example
+ * const trimStart = trimStartOfStreamHelper();
+ * const output1 = trimStart("   text"); // "text"
+ * const output2 = trimStart("   text"); // "   text"
+ *
+ */
 declare function trimStartOfStreamHelper(): (text: string) => string;
-declare function AIStream(res: Response, customParser: AIStreamParser, callbacks?: AIStreamCallbacks): ReadableStream;
+/**
+ * Returns a ReadableStream created from the response, parsed and handled with custom logic.
+ * The stream goes through two transformation stages, first parsing the events and then
+ * invoking the provided callbacks.
+ * @param {Response} response - The response.
+ * @param {AIStreamParser} customParser - The custom parser function.
+ * @param {AIStreamCallbacks} callbacks - The callbacks.
+ * @return {ReadableStream} The AIStream.
+ * @throws Will throw an error if the response is not OK.
+ */
+declare function AIStream(response: Response, customParser: AIStreamParser, callbacks?: AIStreamCallbacks): ReadableStream;
 
 declare function OpenAIStream(res: Response, cb?: AIStreamCallbacks): ReadableStream;
 
@@ -49,19 +103,19 @@ declare function LangChainStream(callbacks?: AIStreamCallbacks): {
 /**
  * Shared types between the API and UI packages.
  */
-type Message = {
+declare type Message = {
     id: string;
     createdAt?: Date;
     content: string;
     role: 'system' | 'user' | 'assistant';
 };
-type CreateMessage = {
+declare type CreateMessage = {
     id?: string;
     createdAt?: Date;
     content: string;
     role: 'system' | 'user' | 'assistant';
 };
-type UseChatOptions = {
+declare type UseChatOptions = {
     /**
      * The API endpoint that accepts a `{ messages: Message[] }` object and returns
      * a stream of tokens of the AI chat response. Defaults to `/api/chat`.
@@ -117,7 +171,7 @@ type UseChatOptions = {
      */
     sendExtraMessageFields?: boolean;
 };
-type UseCompletionOptions = {
+declare type UseCompletionOptions = {
     /**
      * The API endpoint that accepts a `{ prompt: string }` object and returns
      * a stream of tokens of the AI completion response. Defaults to `/api/completion`.

package/dist/index.js

@@ -73,34 +73,34 @@ module.exports = __toCommonJS(streams_exports);
 // streams/ai-stream.ts
 var import_eventsource_parser = require("eventsource-parser");
 function createEventStreamTransformer(customParser) {
-  const decoder = new TextDecoder();
-  let parser;
+  const textDecoder = new TextDecoder();
+  let eventSourceParser;
   return new TransformStream({
     start(controller) {
       return __async(this, null, function* () {
-        function onParse(event) {
-          if (event.type === "event") {
-            const data = event.data;
-            if (data === "[DONE]") {
+        eventSourceParser = (0, import_eventsource_parser.createParser)(
+          (event) => {
+            if ("data" in event && event.type === "event" && event.data === "[DONE]") {
               controller.terminate();
               return;
             }
-            const message = customParser(data);
-            if (message)
-              controller.enqueue(message);
+            if ("data" in event) {
+              const parsedMessage = customParser(event.data);
+              if (parsedMessage)
+                controller.enqueue(parsedMessage);
+            }
           }
-        }
-        parser = (0, import_eventsource_parser.createParser)(onParse);
+        );
       });
     },
     transform(chunk) {
-      parser.feed(decoder.decode(chunk));
+      eventSourceParser.feed(textDecoder.decode(chunk));
     }
   });
 }
 function createCallbacksTransformer(callbacks) {
-  const encoder = new TextEncoder();
-  let fullResponse = "";
+  const textEncoder = new TextEncoder();
+  let aggregatedResponse = "";
   const { onStart, onToken, onCompletion } = callbacks || {};
   return new TransformStream({
     start() {
@@ -111,42 +111,47 @@ function createCallbacksTransformer(callbacks) {
     },
     transform(message, controller) {
       return __async(this, null, function* () {
-        controller.enqueue(encoder.encode(message));
+        controller.enqueue(textEncoder.encode(message));
         if (onToken)
           yield onToken(message);
         if (onCompletion)
-          fullResponse += message;
+          aggregatedResponse += message;
       });
     },
     flush() {
       return __async(this, null, function* () {
-        yield onCompletion == null ? void 0 : onCompletion(fullResponse);
+        if (onCompletion)
+          yield onCompletion(aggregatedResponse);
       });
     }
   });
 }
 function trimStartOfStreamHelper() {
-  let start = true;
+  let isStreamStart = true;
   return (text) => {
-    if (start)
+    if (isStreamStart) {
       text = text.trimStart();
-    if (text)
-      start = false;
+      if (text)
+        isStreamStart = false;
+    }
     return text;
   };
 }
-function AIStream(res, customParser, callbacks) {
-  if (!res.ok) {
+function AIStream(response, customParser, callbacks) {
+  if (!response.ok) {
     throw new Error(
-      `Failed to convert the response to stream. Received status code: ${res.status}.`
+      `Failed to convert the response to stream. Received status code: ${response.status}.`
     );
   }
-  const stream = res.body || new ReadableStream({
+  const responseBodyStream = response.body || createEmptyReadableStream();
+  return responseBodyStream.pipeThrough(createEventStreamTransformer(customParser)).pipeThrough(createCallbacksTransformer(callbacks));
+}
+function createEmptyReadableStream() {
+  return new ReadableStream({
     start(controller) {
       controller.close();
     }
   });
-  return stream.pipeThrough(createEventStreamTransformer(customParser)).pipeThrough(createCallbacksTransformer(callbacks));
 }
 
 // streams/openai-stream.ts

package/dist/index.mjs

@@ -43,34 +43,34 @@ import {
   createParser
 } from "eventsource-parser";
 function createEventStreamTransformer(customParser) {
-  const decoder = new TextDecoder();
-  let parser;
+  const textDecoder = new TextDecoder();
+  let eventSourceParser;
   return new TransformStream({
     start(controller) {
       return __async(this, null, function* () {
-        function onParse(event) {
-          if (event.type === "event") {
-            const data = event.data;
-            if (data === "[DONE]") {
+        eventSourceParser = createParser(
+          (event) => {
+            if ("data" in event && event.type === "event" && event.data === "[DONE]") {
               controller.terminate();
               return;
             }
-            const message = customParser(data);
-            if (message)
-              controller.enqueue(message);
+            if ("data" in event) {
+              const parsedMessage = customParser(event.data);
+              if (parsedMessage)
+                controller.enqueue(parsedMessage);
+            }
           }
-        }
-        parser = createParser(onParse);
+        );
       });
     },
     transform(chunk) {
-      parser.feed(decoder.decode(chunk));
+      eventSourceParser.feed(textDecoder.decode(chunk));
     }
   });
 }
 function createCallbacksTransformer(callbacks) {
-  const encoder = new TextEncoder();
-  let fullResponse = "";
+  const textEncoder = new TextEncoder();
+  let aggregatedResponse = "";
   const { onStart, onToken, onCompletion } = callbacks || {};
   return new TransformStream({
     start() {
@@ -81,42 +81,47 @@ function createCallbacksTransformer(callbacks) {
     },
     transform(message, controller) {
       return __async(this, null, function* () {
-        controller.enqueue(encoder.encode(message));
+        controller.enqueue(textEncoder.encode(message));
         if (onToken)
           yield onToken(message);
         if (onCompletion)
-          fullResponse += message;
+          aggregatedResponse += message;
       });
     },
     flush() {
       return __async(this, null, function* () {
-        yield onCompletion == null ? void 0 : onCompletion(fullResponse);
+        if (onCompletion)
+          yield onCompletion(aggregatedResponse);
       });
     }
   });
 }
 function trimStartOfStreamHelper() {
-  let start = true;
+  let isStreamStart = true;
   return (text) => {
-    if (start)
+    if (isStreamStart) {
       text = text.trimStart();
-    if (text)
-      start = false;
+      if (text)
+        isStreamStart = false;
+    }
     return text;
   };
 }
-function AIStream(res, customParser, callbacks) {
-  if (!res.ok) {
+function AIStream(response, customParser, callbacks) {
+  if (!response.ok) {
     throw new Error(
-      `Failed to convert the response to stream. Received status code: ${res.status}.`
+      `Failed to convert the response to stream. Received status code: ${response.status}.`
     );
   }
-  const stream = res.body || new ReadableStream({
+  const responseBodyStream = response.body || createEmptyReadableStream();
+  return responseBodyStream.pipeThrough(createEventStreamTransformer(customParser)).pipeThrough(createCallbacksTransformer(callbacks));
+}
+function createEmptyReadableStream() {
+  return new ReadableStream({
     start(controller) {
       controller.close();
     }
   });
-  return stream.pipeThrough(createEventStreamTransformer(customParser)).pipeThrough(createCallbacksTransformer(callbacks));
 }
 
 // streams/openai-stream.ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ai",
-  "version": "2.1.2",
+  "version": "2.1.6",
   "license": "Apache-2.0",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -61,8 +61,8 @@
     "ts-jest": "29.0.3",
     "tsup": "^6.7.0",
     "typescript": "^4.5.3",
-    "eslint-config-vercel-ai": "0.0.0",
-    "@vercel/ai-tsconfig": "0.0.0"
+    "@vercel/ai-tsconfig": "0.0.0",
+    "eslint-config-vercel-ai": "0.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/react/dist/index.d.ts

@@ -1,19 +1,19 @@
 /**
  * Shared types between the API and UI packages.
  */
-type Message = {
+declare type Message = {
     id: string;
     createdAt?: Date;
     content: string;
     role: 'system' | 'user' | 'assistant';
 };
-type CreateMessage = {
+declare type CreateMessage = {
     id?: string;
     createdAt?: Date;
     content: string;
     role: 'system' | 'user' | 'assistant';
 };
-type UseChatOptions = {
+declare type UseChatOptions = {
     /**
      * The API endpoint that accepts a `{ messages: Message[] }` object and returns
      * a stream of tokens of the AI chat response. Defaults to `/api/chat`.
@@ -69,7 +69,7 @@ type UseChatOptions = {
      */
     sendExtraMessageFields?: boolean;
 };
-type UseCompletionOptions = {
+declare type UseCompletionOptions = {
     /**
      * The API endpoint that accepts a `{ prompt: string }` object and returns
      * a stream of tokens of the AI completion response. Defaults to `/api/completion`.
@@ -120,7 +120,7 @@ type UseCompletionOptions = {
     body?: object;
 };
 
-type UseChatHelpers = {
+declare type UseChatHelpers = {
     /** Current messages in the chat */
     messages: Message[];
     /** The error object of the API request */
@@ -151,7 +151,7 @@ type UseChatHelpers = {
     /** setState-powered method to update the input value */
     setInput: React.Dispatch<React.SetStateAction<string>>;
     /** An input/textarea-ready onChange handler to control the value of the input */
-    handleInputChange: (e: any) => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     /** Form submission handler to automattically reset input and append a user message  */
     handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
     /** Whether the API request is in progress */
@@ -159,7 +159,7 @@ type UseChatHelpers = {
 };
 declare function useChat({ api, id, initialMessages, initialInput, sendExtraMessageFields, onResponse, onFinish, onError, headers, body }?: UseChatOptions): UseChatHelpers;
 
-type UseCompletionHelpers = {
+declare type UseCompletionHelpers = {
     /** The current completion result */
     completion: string;
     /**
@@ -187,7 +187,7 @@ type UseCompletionHelpers = {
      * <input onChange={handleInputChange} value={input} />
      * ```
      */
-    handleInputChange: (e: any) => void;
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void;
     /**
      * Form submission handler to automattically reset input and append a user message
      * @example

package/react/dist/index.js

@@ -81,9 +81,13 @@ var nanoid = (0, import_nanoid.customAlphabet)(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
   7
 );
-var decoder = new TextDecoder();
-function decodeAIStreamChunk(chunk) {
-  return decoder.decode(chunk);
+function createChunkDecoder() {
+  const decoder = new TextDecoder();
+  return function(chunk) {
+    if (!chunk)
+      return "";
+    return decoder.decode(chunk, { stream: true });
+  };
 }
 
 // react/use-chat.ts
@@ -162,12 +166,13 @@ function useChat({
         const createdAt = /* @__PURE__ */ new Date();
         const replyId = nanoid();
         const reader = res.body.getReader();
+        const decode = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decode(value);
           mutate(
             [
               ...messagesSnapshot,
@@ -250,7 +255,8 @@ function useChat({
         return;
       append({
         content: input,
-        role: "user"
+        role: "user",
+        createdAt: /* @__PURE__ */ new Date()
       });
       setInput("");
     },
@@ -340,12 +346,13 @@ function useCompletion({
         }
         let result = "";
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate(result, false);
           if (abortController2 === null) {
             reader.cancel();

package/react/dist/index.mjs

@@ -47,9 +47,13 @@ var nanoid = customAlphabet(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
   7
 );
-var decoder = new TextDecoder();
-function decodeAIStreamChunk(chunk) {
-  return decoder.decode(chunk);
+function createChunkDecoder() {
+  const decoder = new TextDecoder();
+  return function(chunk) {
+    if (!chunk)
+      return "";
+    return decoder.decode(chunk, { stream: true });
+  };
 }
 
 // react/use-chat.ts
@@ -128,12 +132,13 @@ function useChat({
         const createdAt = /* @__PURE__ */ new Date();
         const replyId = nanoid();
         const reader = res.body.getReader();
+        const decode = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decode(value);
           mutate(
             [
               ...messagesSnapshot,
@@ -216,7 +221,8 @@ function useChat({
         return;
       append({
         content: input,
-        role: "user"
+        role: "user",
+        createdAt: /* @__PURE__ */ new Date()
       });
       setInput("");
     },
@@ -306,12 +312,13 @@ function useCompletion({
         }
         let result = "";
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate(result, false);
           if (abortController2 === null) {
             reader.cancel();

package/svelte/dist/index.d.ts

@@ -3,19 +3,19 @@ import { Readable, Writable } from 'svelte/store';
 /**
  * Shared types between the API and UI packages.
  */
-type Message = {
+declare type Message = {
     id: string;
     createdAt?: Date;
     content: string;
     role: 'system' | 'user' | 'assistant';
 };
-type CreateMessage = {
+declare type CreateMessage = {
     id?: string;
     createdAt?: Date;
     content: string;
     role: 'system' | 'user' | 'assistant';
 };
-type UseChatOptions = {
+declare type UseChatOptions = {
     /**
      * The API endpoint that accepts a `{ messages: Message[] }` object and returns
      * a stream of tokens of the AI chat response. Defaults to `/api/chat`.
@@ -71,7 +71,7 @@ type UseChatOptions = {
      */
     sendExtraMessageFields?: boolean;
 };
-type UseCompletionOptions = {
+declare type UseCompletionOptions = {
     /**
      * The API endpoint that accepts a `{ prompt: string }` object and returns
      * a stream of tokens of the AI completion response. Defaults to `/api/completion`.
@@ -122,7 +122,7 @@ type UseCompletionOptions = {
     body?: object;
 };
 
-type UseChatHelpers = {
+declare type UseChatHelpers = {
     /** Current messages in the chat */
     messages: Readable<Message[]>;
     /** The error object of the API request */
@@ -157,7 +157,7 @@ type UseChatHelpers = {
 };
 declare function useChat({ api, id, initialMessages, initialInput, sendExtraMessageFields, onResponse, onFinish, onError, headers, body }?: UseChatOptions): UseChatHelpers;
 
-type UseCompletionHelpers = {
+declare type UseCompletionHelpers = {
     /** The current completion result */
     completion: Readable<string>;
     /** The error object of the API request */

package/svelte/dist/index.js

@@ -395,7 +395,7 @@ var SWR = class {
   }
 };
 
-// ../../node_modules/.pnpm/sswr@1.10.0_svelte@3.59.1/node_modules/sswr/dist/sswr.mjs
+// ../../node_modules/.pnpm/sswr@1.10.0_svelte@3.54.0/node_modules/sswr/dist/sswr.mjs
 var import_svelte = require("svelte");
 function h() {
 }
@@ -506,9 +506,13 @@ var nanoid = (0, import_nanoid.customAlphabet)(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
   7
 );
-var decoder = new TextDecoder();
-function decodeAIStreamChunk(chunk) {
-  return decoder.decode(chunk);
+function createChunkDecoder() {
+  const decoder = new TextDecoder();
+  return function(chunk) {
+    if (!chunk)
+      return "";
+    return decoder.decode(chunk, { stream: true });
+  };
 }
 
 // svelte/use-chat.ts
@@ -582,12 +586,13 @@ function useChat({
         const createdAt = /* @__PURE__ */ new Date();
         const replyId = nanoid();
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate([
             ...messagesSnapshot,
             {
@@ -659,7 +664,8 @@ function useChat({
       return;
     append({
       content: inputValue,
-      role: "user"
+      role: "user",
+      createdAt: /* @__PURE__ */ new Date()
     });
     input.set("");
   };
@@ -739,12 +745,13 @@ function useCompletion({
         }
         let result = "";
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate(result);
           if (abortController === null) {
             reader.cancel();

package/svelte/dist/index.mjs

@@ -371,7 +371,7 @@ var SWR = class {
   }
 };
 
-// ../../node_modules/.pnpm/sswr@1.10.0_svelte@3.59.1/node_modules/sswr/dist/sswr.mjs
+// ../../node_modules/.pnpm/sswr@1.10.0_svelte@3.54.0/node_modules/sswr/dist/sswr.mjs
 import { beforeUpdate as _, onDestroy as D } from "svelte";
 function h() {
 }
@@ -482,9 +482,13 @@ var nanoid = customAlphabet(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
   7
 );
-var decoder = new TextDecoder();
-function decodeAIStreamChunk(chunk) {
-  return decoder.decode(chunk);
+function createChunkDecoder() {
+  const decoder = new TextDecoder();
+  return function(chunk) {
+    if (!chunk)
+      return "";
+    return decoder.decode(chunk, { stream: true });
+  };
 }
 
 // svelte/use-chat.ts
@@ -558,12 +562,13 @@ function useChat({
         const createdAt = /* @__PURE__ */ new Date();
         const replyId = nanoid();
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate([
             ...messagesSnapshot,
             {
@@ -635,7 +640,8 @@ function useChat({
       return;
     append({
       content: inputValue,
-      role: "user"
+      role: "user",
+      createdAt: /* @__PURE__ */ new Date()
     });
     input.set("");
   };
@@ -715,12 +721,13 @@ function useCompletion({
         }
         let result = "";
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate(result);
           if (abortController === null) {
             reader.cancel();

package/vue/dist/index.d.ts

@@ -3,19 +3,19 @@ import { Ref } from 'vue';
 /**
  * Shared types between the API and UI packages.
  */
-type Message = {
+declare type Message = {
     id: string;
     createdAt?: Date;
     content: string;
     role: 'system' | 'user' | 'assistant';
 };
-type CreateMessage = {
+declare type CreateMessage = {
     id?: string;
     createdAt?: Date;
     content: string;
     role: 'system' | 'user' | 'assistant';
 };
-type UseChatOptions = {
+declare type UseChatOptions = {
     /**
      * The API endpoint that accepts a `{ messages: Message[] }` object and returns
      * a stream of tokens of the AI chat response. Defaults to `/api/chat`.
@@ -71,7 +71,7 @@ type UseChatOptions = {
      */
     sendExtraMessageFields?: boolean;
 };
-type UseCompletionOptions = {
+declare type UseCompletionOptions = {
     /**
      * The API endpoint that accepts a `{ prompt: string }` object and returns
      * a stream of tokens of the AI completion response. Defaults to `/api/completion`.
@@ -122,7 +122,7 @@ type UseCompletionOptions = {
     body?: object;
 };
 
-type UseChatHelpers = {
+declare type UseChatHelpers = {
     /** Current messages in the chat */
     messages: Ref<Message[]>;
     /** The error object of the API request */
@@ -157,7 +157,7 @@ type UseChatHelpers = {
 };
 declare function useChat({ api, id, initialMessages, initialInput, sendExtraMessageFields, onResponse, onFinish, onError, headers, body }?: UseChatOptions): UseChatHelpers;
 
-type UseCompletionHelpers = {
+declare type UseCompletionHelpers = {
     /** The current completion result */
     completion: Ref<string>;
     /** The error object of the API request */

package/vue/dist/index.js

@@ -79,9 +79,13 @@ var nanoid = (0, import_nanoid.customAlphabet)(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
   7
 );
-var decoder = new TextDecoder();
-function decodeAIStreamChunk(chunk) {
-  return decoder.decode(chunk);
+function createChunkDecoder() {
+  const decoder = new TextDecoder();
+  return function(chunk) {
+    if (!chunk)
+      return "";
+    return decoder.decode(chunk, { stream: true });
+  };
 }
 
 // vue/use-chat.ts
@@ -156,12 +160,13 @@ function useChat({
         const createdAt = /* @__PURE__ */ new Date();
         const replyId = nanoid();
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate([
             ...messagesSnapshot,
             {
@@ -315,12 +320,13 @@ function useCompletion({
         }
         let result = "";
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate(result);
           if (abortController === null) {
             reader.cancel();

package/vue/dist/index.mjs

@@ -45,9 +45,13 @@ var nanoid = customAlphabet(
   "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",
   7
 );
-var decoder = new TextDecoder();
-function decodeAIStreamChunk(chunk) {
-  return decoder.decode(chunk);
+function createChunkDecoder() {
+  const decoder = new TextDecoder();
+  return function(chunk) {
+    if (!chunk)
+      return "";
+    return decoder.decode(chunk, { stream: true });
+  };
 }
 
 // vue/use-chat.ts
@@ -122,12 +126,13 @@ function useChat({
         const createdAt = /* @__PURE__ */ new Date();
         const replyId = nanoid();
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate([
             ...messagesSnapshot,
             {
@@ -281,12 +286,13 @@ function useCompletion({
         }
         let result = "";
         const reader = res.body.getReader();
+        const decoder = createChunkDecoder();
         while (true) {
           const { done, value } = yield reader.read();
           if (done) {
             break;
           }
-          result += decodeAIStreamChunk(value);
+          result += decoder(value);
           mutate(result);
           if (abortController === null) {
             reader.cancel();