use streaming API route to driectly upload to backend without nextjs server loads, use rich color toasts

app/api/upload/route.ts

@@ -0,0 +1,101 @@
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { headers } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+import { revalidatePath } from "next/cache";
+
+const BACKEND_API_BASE =
+ process.env.BACKEND_API_BASE ?? "http://127.0.0.1:8000/api/v1";
+
+/**
+ * Streaming upload proxy – authenticates the user, verifies chat
+ * ownership, then pipes the raw request body directly to the Python
+ * backend without buffering the file into Node.js memory.
+ */
+export async function POST(request: NextRequest) {
+ // 1. Authenticate
+ const session = await auth.api.getSession({
+ headers: await headers(),
+ });
+
+ if (!session) {
+ return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
+ }
+
+ // 2. Read chatId from query params
+ const chatId = request.nextUrl.searchParams.get("chatId");
+
+ if (!chatId) {
+ return NextResponse.json(
+ { error: "chatId query parameter is required" },
+ { status: 400 },
+ );
+ }
+
+ // 3. Verify chat ownership
+ const chat = await prisma.chat.findUnique({
+ where: { id: chatId },
+ });
+
+ if (!chat || chat.userId !== session.user.id) {
+ return NextResponse.json(
+ { error: "Chat not found or unauthorized" },
+ { status: 403 },
+ );
+ }
+
+ // 4. Stream the request body directly to the Python backend.
+ // The verified chatId is passed as a query param so the backend
+ // derives the target chat solely from the server-verified value.
+ const contentType = request.headers.get("content-type");
+ const backendUrl = `${BACKEND_API_BASE}/ingest?chat_id=${encodeURIComponent(chatId)}`;
+
+ let backendResponse: Response;
+ try {
+ backendResponse = await fetch(backendUrl, {
+ method: "POST",
+ body: request.body,
+ headers: {
+ ...(contentType ? { "Content-Type": contentType } : {}),
+ },
+ // @ts-expect-error -- Node 18+ supports duplex for streaming request bodies
+ duplex: "half",
+ });
+ } catch (error) {
+ console.error("Python ingestion transport error:", error);
+ return NextResponse.json({ error: "Backend unavailable" }, { status: 502 });
+ }
+
+ if (!backendResponse.ok) {
+ const errText = await backendResponse.text();
+ console.error("Python ingestion error:", errText);
+ return NextResponse.json(
+ { error: "Backend processing failed", detail: errText },
+ { status: backendResponse.status },
+ );
+ }
+
+ let result;
+ try {
+ result = await backendResponse.json();
+ } catch {
+ console.error("Failed to parse Python backend response as JSON");
+ return NextResponse.json(
+ { error: "Invalid response from backend" },
+ { status: 502 },
+ );
+ }
+
+ // 5. Increment document count in Prisma
+ await prisma.chat.update({
+ where: { id: chatId },
+ data: {
+ documentCount: { increment: 1 },
+ updatedAt: new Date(),
+ },
+ });
+
+ revalidatePath("/chat");
+
+ return NextResponse.json({ success: true, result });
+}

app/layout.tsx

@@ -36,7 +36,7 @@ export default function RootLayout({
  >
  <TooltipProvider>{children}</TooltipProvider>
  </ThemeProvider>
- <Toaster />
+ <Toaster richColors />
  </body>
  </html>
  );

backend/api/v1/ingestion_routes.py

@@ -4,7 +4,7 @@
 """
 import logging
 
-from fastapi import APIRouter, HTTPException, UploadFile, File, Form, Depends
+from fastapi import APIRouter, HTTPException, UploadFile, File, Query, Depends
 
 from datetime import datetime
 from ...schemas.ingestion import IngestResponse, IngestError
@@ -44,14 +44,14 @@ def get_service() -> IngestionService:
  ),
 )
 async def ingest_document(
- chat_id: str = Form(..., description="UUID of the chat session"),
+ chat_id: str = Query(..., description="UUID of the chat session"),
  file: UploadFile = File(..., description="Document file to ingest"),
  service: IngestionService = Depends(get_service),
 ) -> IngestResponse:
  """
  Ingest a document into a chat-specific collection.
 
- - **chat_id**: UUID of the chat session (form field)
+ - **chat_id**: UUID of the chat session (query parameter)
  - **file**: Document file (PDF, TXT, or MD)
 
  The document will be:

components/chat-area.tsx

@@ -3,7 +3,7 @@
 import React, { useState, useRef, useEffect } from "react";
 import { useRouter } from "next/navigation";
 
-import { Send, FileUp, Paperclip, File, X } from "lucide-react";
+import { Send, FileUp, Paperclip, File, X, Loader2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -19,11 +19,7 @@ import {
 } from "@/lib/date-format";
 // Import shared types
 import type { Chat as ChatModel, Message } from "@/lib/types";
-import {
- sendMessageAction,
- uploadDocumentAction,
- deleteDocumentAction,
-} from "@/lib/actions/chat";
+import { sendMessageAction, deleteDocumentAction } from "@/lib/actions/chat";
 import { toast } from "sonner";
 import { Greeting } from "@/components/greeting";
 
@@ -41,6 +37,7 @@ interface UploadedDocument {
  name: string;
  size: string;
  filename: string;
+ uploading?: boolean;
 }
 
 export function ChatArea({
@@ -97,6 +94,9 @@ export function ChatArea({
  }
  } catch (error) {
  console.error("Failed to send message:", error);
+ toast.error("Failed to send message", {
+ description: "Could not reach the server. Please try again.",
+ });
  } finally {
  setIsGenerating(false);
  // Removed router.refresh() because the Server Action handles revalidation natively!
@@ -120,14 +120,14 @@ export function ChatArea({
  const files = e.target.files;
  if (!files || files.length === 0) return;
 
- const MAX_SIZE_BYTES = 1 * 1024 * 1024; // 1 MB
+ const MAX_SIZE_BYTES = 50 * 1024 * 1024; // 50 MB
 
  // Filter out oversized files and show a toast for each rejected one
  const validFiles: File[] = [];
  for (const file of Array.from(files)) {
  if (file.size > MAX_SIZE_BYTES) {
  toast.error(`"${file.name}" is too large`, {
- description: `Files must be under 1 MB. This file is ${(file.size / (1024 * 1024)).toFixed(2)} MB.`,
+ description: `Files must be under ${(MAX_SIZE_BYTES / (1024 * 1024)).toFixed(2)} MB. This file is ${(file.size / (1024 * 1024)).toFixed(2)} MB.`,
  });
  } else {
  validFiles.push(file);
@@ -148,6 +148,7 @@ export function ChatArea({
  name: file.name,
  size: (file.size / 1024).toFixed(2) + " KB",
  filename: file.name,
+ uploading: true,
  } satisfies UploadedDocument,
  }));
 
@@ -156,25 +157,45 @@ export function ChatArea({
  ...uploadQueue.map((item) => item.optimisticDocument),
  ]);
 
- // Upload to backend
+ // Upload to backend via streaming API route
  for (const { file, optimisticDocument } of uploadQueue) {
  const formData = new FormData();
  formData.append("file", file);
- formData.append("chat_id", currentChat?.id || "default-chat");
 
  try {
- const result = await uploadDocumentAction(formData);
- console.log("File uploaded successfully:", result);
+ const uploadPromise = fetch(
+ `/api/upload?chatId=${encodeURIComponent(currentChat?.id || "default-chat")}`,
+ { method: "POST", body: formData },
+ ).then(async (response) => {
+ if (!response.ok) {
+ const err = await response.json().catch(() => ({}));
+ throw new Error(err.error || "Upload failed");
+ }
+ return response.json();
+ });
 
- // Trigger navigation refresh to update document count in layout
- router.refresh();
- } catch (error) {
- console.error("Error uploading file:", error);
- // Remove failed document from optimistic UI.
- setDocuments((prev) =>
- prev.filter((d) => d.id !== optimisticDocument.id),
- );
- toast.error(`Failed to upload "${file.name}"`);
+ toast.promise(uploadPromise, {
+ loading: `Uploading "${file.name}"...`,
+ success: () => {
+ setDocuments((prev) =>
+ prev.map((d) =>
+ d.id === optimisticDocument.id ? { ...d, uploading: false } : d,
+ ),
+ );
+ router.refresh();
+ return `"${file.name}" uploaded successfully`;
+ },
+ error: (err) => {
+ setDocuments((prev) =>
+ prev.filter((d) => d.id !== optimisticDocument.id),
+ );
+ return `Failed to upload "${file.name}": ${err.message}`;
+ },
+ });
+
+ await uploadPromise;
+ } catch {
+ console.error("Failed to upload file");
  }
  }
 
@@ -193,6 +214,9 @@ export function ChatArea({
  router.refresh();
  } catch (error) {
  console.error("Failed to delete document from collection:", error);
+ toast.error(`Failed to remove "${doc.name}"`, {
+ description: "Could not delete the document. Please try again.",
+ });
  }
  }
  };
@@ -260,7 +284,11 @@ export function ChatArea({
  key={doc.id}
  className="group flex items-center gap-2 rounded-lg bg-accent px-3 py-1.5 text-sm"
  >
- <File className="size-4 text-muted-foreground" />
+ {doc.uploading ? (
+ <Loader2 className="size-4 text-muted-foreground animate-spin" />
+ ) : (
+ <File className="size-4 text-muted-foreground" />
+ )}
  <span className="max-w-50 truncate text-accent-foreground">
  {doc.name}
  </span>
@@ -321,7 +349,10 @@ export function ChatArea({
  {showDateDivider && ts !== null && (
  <div className="my-2 flex items-center gap-1">
  <Separator className="flex-1" />
- <span className="min-w-max text-xs font-semibold text-muted-foreground" suppressHydrationWarning>
+ <span
+ className="min-w-max text-xs font-semibold text-muted-foreground"
+ suppressHydrationWarning
+ >
  {formatChatLongDate(ts)}
  </span>
  <Separator className="flex-1" />
@@ -378,7 +409,9 @@ export function ChatArea({
  {message.role === "assistant" ? "AI" : "You"}
  </span>
  {ts !== null ? (
- <span suppressHydrationWarning>{formatChatTime(ts)}</span>
+ <span suppressHydrationWarning>
+ {formatChatTime(ts)}
+ </span>
  ) : (
  <span>{message.timestamp}</span>
  )}

lib/actions/chat.ts

@@ -137,57 +137,8 @@ export async function sendMessageAction(chatId: string, content: string) {
  };
 }
 
-export async function uploadDocumentAction(formData: FormData) {
- const session = await auth.api.getSession({
- headers: await headers(),
- });
-
- if (!session) {
- throw new Error("Unauthorized");
- }
-
- const chatId = formData.get("chat_id") as string;
- const file = formData.get("file");
-
- if (!chatId || !file) {
- throw new Error("chat_id and file are required");
- }
-
- // Verify chat ownership
- const chat = await prisma.chat.findUnique({
- where: { id: chatId },
- });
-
- if (!chat || chat.userId !== session.user.id) {
- throw new Error("Chat not found or unauthorized");
- }
 
- // Forward the file to Python ML backend
- const response = await fetch(`${BACKEND_API_BASE}/ingest`, {
- method: "POST",
- body: formData,
- });
 
- if (!response.ok) {
- const errText = await response.text();
- console.error("Python ingestion error:", errText);
- throw new Error(`Backend processing failed: ${errText}`);
- }
-
- const result = await response.json();
-
- // Increment document count in Next.js Prisma
- await prisma.chat.update({
- where: { id: chatId },
- data: {
- documentCount: { increment: 1 },
- updatedAt: new Date(),
- },
- });
-
- revalidatePath("/chat");
- return { success: true, result };
-}
 
 export async function deleteDocumentAction(chatId: string, filename: string) {
  const session = await auth.api.getSession({