chore: bump ai v4 (#449)

Author: thucpn

.changeset/chilly-eels-retire.md

@@ -0,0 +1,5 @@
+---
+"create-llama": patch
+---
+
+chore: bump ai v4

templates/components/multiagent/typescript/express/chat.controller.ts

@@ -1,4 +1,4 @@
-import { Message, streamToResponse } from "ai";
+import { LlamaIndexAdapter, Message } from "ai";
 import { Request, Response } from "express";
 import {
   convertToChatHistory,
@@ -28,7 +28,20 @@ export const chat = async (req: Request, res: Response) => {
     const { stream, dataStream } =
       await createStreamFromWorkflowContext(context);
 
-    return streamToResponse(stream, res, {}, dataStream);
+    const streamResponse = LlamaIndexAdapter.toDataStreamResponse(stream, {
+      data: dataStream,
+    });
+    if (streamResponse.body) {
+      const reader = streamResponse.body.getReader();
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          res.end();
+          return;
+        }
+        res.write(value);
+      }
+    }
   } catch (error) {
     console.error("[LlamaIndex]", error);
     return res.status(500).json({

templates/components/multiagent/typescript/nextjs/route.ts

@@ -1,5 +1,5 @@
 import { initObservability } from "@/app/observability";
-import { StreamingTextResponse, type Message } from "ai";
+import { LlamaIndexAdapter, type Message } from "ai";
 import { NextRequest, NextResponse } from "next/server";
 import { initSettings } from "./engine/settings";
 import {
@@ -41,9 +41,9 @@ export async function POST(request: NextRequest) {
     });
     const { stream, dataStream } =
       await createStreamFromWorkflowContext(context);
-
-    // Return the two streams in one response
-    return new StreamingTextResponse(stream, {}, dataStream);
+    return LlamaIndexAdapter.toDataStreamResponse(stream, {
+      data: dataStream,
+    });
   } catch (error) {
     console.error("[LlamaIndex]", error);
     return NextResponse.json(

templates/components/multiagent/typescript/workflow/stream.ts

@@ -3,31 +3,26 @@ import {
   WorkflowContext,
   WorkflowEvent,
 } from "@llamaindex/workflow";
-import {
-  StreamData,
-  createStreamDataTransformer,
-  trimStartOfStreamHelper,
-} from "ai";
-import { ChatResponseChunk } from "llamaindex";
+import { StreamData } from "ai";
+import { ChatResponseChunk, EngineResponse } from "llamaindex";
+import { ReadableStream } from "stream/web";
 import { AgentRunEvent } from "./type";
 
 export async function createStreamFromWorkflowContext<Input, Output, Context>(
   context: WorkflowContext<Input, Output, Context>,
-): Promise<{ stream: ReadableStream<string>; dataStream: StreamData }> {
-  const trimStartOfStream = trimStartOfStreamHelper();
+): Promise<{ stream: ReadableStream<EngineResponse>; dataStream: StreamData }> {
   const dataStream = new StreamData();
-  const encoder = new TextEncoder();
   let generator: AsyncGenerator<ChatResponseChunk> | undefined;
 
   const closeStreams = (controller: ReadableStreamDefaultController) => {
     controller.close();
     dataStream.close();
   };
 
-  const mainStream = new ReadableStream({
+  const stream = new ReadableStream<EngineResponse>({
     async start(controller) {
       // Kickstart the stream by sending an empty string
-      controller.enqueue(encoder.encode(""));
+      controller.enqueue({ delta: "" } as EngineResponse);
     },
     async pull(controller) {
       while (!generator) {
@@ -46,17 +41,14 @@ export async function createStreamFromWorkflowContext<Input, Output, Context>(
         closeStreams(controller);
         return;
       }
-      const text = trimStartOfStream(chunk.delta ?? "");
-      if (text) {
-        controller.enqueue(encoder.encode(text));
+      const delta = chunk.delta ?? "";
+      if (delta) {
+        controller.enqueue({ delta } as EngineResponse);
       }
     },
   });
 
-  return {
-    stream: mainStream.pipeThrough(createStreamDataTransformer()),
-    dataStream,
-  };
+  return { stream, dataStream };
 }
 
 function handleEvent(

templates/types/streaming/express/package.json

@@ -16,7 +16,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
-    "ai": "3.3.42",
+    "ai": "4.0.3",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
     "duck-duck-scrape": "^2.2.5",

templates/types/streaming/express/src/controllers/chat.controller.ts

@@ -1,4 +1,4 @@
-import { LlamaIndexAdapter, Message, StreamData, streamToResponse } from "ai";
+import { LlamaIndexAdapter, Message, StreamData } from "ai";
 import { Request, Response } from "express";
 import { ChatMessage, Settings } from "llamaindex";
 import { createChatEngine } from "./engine/chat";
@@ -43,7 +43,7 @@ export const chat = async (req: Request, res: Response) => {
       });
     });
 
-    const onFinal = (content: string) => {
+    const onCompletion = (content: string) => {
       chatHistory.push({ role: "assistant", content: content });
       generateNextQuestions(chatHistory)
         .then((questions: string[]) => {
@@ -59,8 +59,21 @@ export const chat = async (req: Request, res: Response) => {
         });
     };
 
-    const stream = LlamaIndexAdapter.toDataStream(response, { onFinal });
-    return streamToResponse(stream, res, {}, vercelStreamData);
+    const streamResponse = LlamaIndexAdapter.toDataStreamResponse(response, {
+      data: vercelStreamData,
+      callbacks: { onCompletion },
+    });
+    if (streamResponse.body) {
+      const reader = streamResponse.body.getReader();
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) {
+          res.end();
+          return;
+        }
+        res.write(value);
+      }
+    }
   } catch (error) {
     console.error("[LlamaIndex]", error);
     return res.status(500).json({

templates/types/streaming/nextjs/app/api/chat/route.ts

@@ -56,7 +56,7 @@ export async function POST(request: NextRequest) {
       });
     });
 
-    const onFinal = (content: string) => {
+    const onCompletion = (content: string) => {
       chatHistory.push({ role: "assistant", content: content });
       generateNextQuestions(chatHistory)
         .then((questions: string[]) => {
@@ -74,7 +74,7 @@ export async function POST(request: NextRequest) {
 
     return LlamaIndexAdapter.toDataStreamResponse(response, {
       data: vercelStreamData,
-      callbacks: { onFinal },
+      callbacks: { onCompletion },
     });
   } catch (error) {
     console.error("[LlamaIndex]", error);

templates/types/streaming/nextjs/package.json

@@ -16,8 +16,8 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.1.0",
-    "@llamaindex/chat-ui": "0.0.9",
-    "ai": "3.4.33",
+    "@llamaindex/chat-ui": "0.0.11",
+    "ai": "4.0.3",
     "ajv": "^8.12.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",