feat: more uniform output

Author: sunls24

app/api/chat/route.ts

@@ -5,11 +5,16 @@ import { tools } from "@/app/api/chat/tools";
 import { NextResponse } from "next/server";
 import { ERROR_PREFIX, MODE_TRANSLATE } from "@/lib/constants";
 
+const STREAM_INTERVAL = 60;
+const MAX_SIZE = 6;
+
 export async function POST(req: Request) {
   const { messages, config } = await req.json();
 
   try {
+    const controller = new AbortController();
     const { fullStream } = streamText({
+      abortSignal: controller.signal,
       temperature: config.temperature,
       model: getOpenAI(config.apiKey).chat(config.model),
       system: getSystem(config.systemPrompt),
@@ -21,12 +26,33 @@ export async function POST(req: Request) {
       ),
     });
 
+    let intervalId: any;
     const stream = new ReadableStream({
       async start(controller) {
+        let buffer = "";
+        let done = false;
+        intervalId = setInterval(() => {
+          if (buffer.length === 0) {
+            if (done) {
+              clearInterval(intervalId);
+              controller.close();
+            }
+            return;
+          }
+          if (buffer.length <= MAX_SIZE) {
+            controller.enqueue(buffer);
+            buffer = "";
+          } else {
+            const chunk = buffer.slice(0, MAX_SIZE);
+            buffer = buffer.slice(MAX_SIZE);
+            controller.enqueue(chunk);
+          }
+        }, STREAM_INTERVAL);
+
         for await (const part of fullStream) {
           switch (part.type) {
             case "text-delta": {
-              controller.enqueue(part.textDelta);
+              buffer += part.textDelta;
               break;
             }
             case "error": {
@@ -38,7 +64,11 @@ export async function POST(req: Request) {
             }
           }
         }
-        controller.close();
+        done = true;
+      },
+      cancel() {
+        clearInterval(intervalId);
+        controller.abort();
       },
     });
 

components/chat.tsx

@@ -34,7 +34,6 @@ function Chat() {
     reload,
     stop,
   } = useChat({
-    experimental_throttle: 80,
     streamProtocol: "text",
     onError(err) {
       toast.error(err.message);

package.json

@@ -9,45 +9,45 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^1.0.7",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-scroll-area": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.1",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.4",
-    "ai": "^4.0.13",
+    "@ai-sdk/openai": "^1.0.8",
+    "@radix-ui/react-dialog": "^1.1.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.3",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.3",
+    "@radix-ui/react-separator": "^1.1.1",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.5",
+    "ai": "^4.0.18",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.468.0",
     "mitt": "^3.0.1",
-    "next": "^15.0.4",
+    "next": "^15.1.0",
     "next-themes": "^0.4.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-markdown": "8.0.7",
+    "react-markdown": "^8.0.7",
     "react-syntax-highlighter": "^15.6.1",
     "react-textarea-autosize": "^8.5.6",
-    "remark-breaks": "3.0.3",
-    "remark-gfm": "3.0.1",
+    "remark-breaks": "^3.0.3",
+    "remark-gfm": "^3.0.1",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.5",
-    "zod": "^3.23.8",
+    "zod": "^3.24.1",
     "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.15",
-    "@types/node": "^22.10.1",
-    "@types/react": "^18.3.14",
-    "@types/react-dom": "^18.3.2",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.16",
+    "@types/react-dom": "^18.3.5",
     "@types/react-syntax-highlighter": "^15.5.13",
     "autoprefixer": "^10.4.20",
-    "eslint": "9.16.0",
-    "eslint-config-next": "^15.0.4",
+    "eslint": "^9.17.0",
+    "eslint-config-next": "^15.1.0",
     "eslint-config-prettier": "^9.1.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",