update dockerfile

.env.example

@@ -0,0 +1 @@
+VITE_API_BASE_URL=

Dockerfile

@@ -18,7 +18,7 @@ COPY --from=builder /app/dist /usr/share/nginx/html
 
 # SPA fallback: route all requests to index.html
 RUN printf 'server {\n\
-    listen 80;\n\
+    listen 7860;\n\
     root /usr/share/nginx/html;\n\
     index index.html;\n\
     location / {\n\
@@ -26,6 +26,6 @@ RUN printf 'server {\n\
     }\n\
 }\n' > /etc/nginx/conf.d/default.conf
 
-EXPOSE 80
+EXPOSE 7860
 
 CMD ["nginx", "-g", "daemon off;"]

src/app/components/KnowledgeManagement.tsx

@@ -8,111 +8,144 @@ import {
   Database,
   X,
 } from "lucide-react";
-
-interface Document {
-  id: string;
-  name: string;
-  size: number;
-  uploadedAt: number;
-  processed: boolean;
-  content?: string;
-}
+import {
+  getDocuments,
+  uploadDocument,
+  processDocument,
+  deleteDocument,
+  type ApiDocument,
+  type DocumentStatus,
+} from "../../services/api";
 
 interface KnowledgeManagementProps {
   open: boolean;
   onClose: () => void;
 }
 
+const getUserId = (): string | null => {
+  const stored = localStorage.getItem("chatbot_user");
+  if (!stored) return null;
+  return (JSON.parse(stored).user_id as string) ?? null;
+};
+
 export default function KnowledgeManagement({
   open,
   onClose,
 }: KnowledgeManagementProps) {
-  const [documents, setDocuments] = useState<Document[]>([]);
+  const [documents, setDocuments] = useState<ApiDocument[]>([]);
+  const [loadingDocs, setLoadingDocs] = useState(false);
+  const [docsError, setDocsError] = useState<string | null>(null);
   const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState<string | null>(null);
   const [processing, setProcessing] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState<string | null>(null);
 
   useEffect(() => {
-    const storedDocs = localStorage.getItem("chatbot_documents");
-    if (storedDocs) {
-      setDocuments(JSON.parse(storedDocs));
-    }
-  }, []);
+    if (!open) return;
+    const userId = getUserId();
+    if (!userId) return;
+    loadDocuments(userId);
+  }, [open]);
 
-  useEffect(() => {
-    if (documents.length > 0) {
-      localStorage.setItem("chatbot_documents", JSON.stringify(documents));
+  const loadDocuments = async (userId: string) => {
+    setLoadingDocs(true);
+    setDocsError(null);
+    try {
+      setDocuments(await getDocuments(userId));
+    } catch (err) {
+      setDocsError(
+        err instanceof Error ? err.message : "Failed to load documents"
+      );
+    } finally {
+      setLoadingDocs(false);
     }
-  }, [documents]);
+  };
 
   const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (!files || files.length === 0) return;
+    const userId = getUserId();
+    if (!userId) return;
 
     setUploading(true);
+    setUploadError(null);
 
     for (let i = 0; i < files.length; i++) {
       const file = files[i];
-      if (file.type !== "application/pdf") {
-        alert("Please upload PDF files only");
-        continue;
-      }
-
-      const newDoc: Document = {
-        id: Date.now().toString() + i,
-        name: file.name,
-        size: file.size,
-        uploadedAt: Date.now(),
-        processed: false,
-      };
+      try {
+        const uploadRes = await uploadDocument(userId, file);
+        const newDoc: ApiDocument = {
+          id: uploadRes.data.id,
+          filename: uploadRes.data.filename,
+          status: "pending",
+          file_size: file.size,
+          file_type: file.name.split(".").pop() ?? "",
+          created_at: new Date().toISOString(),
+        };
+        setDocuments((prev) => [newDoc, ...prev]);
 
-      setDocuments((prev) => [...prev, newDoc]);
+        await processDocumentById(userId, uploadRes.data.id);
+      } catch (err) {
+        setUploadError(err instanceof Error ? err.message : "Upload failed");
+      }
     }
 
     setUploading(false);
     e.target.value = "";
   };
 
-  const processDocument = async (docId: string) => {
+  const processDocumentById = async (userId: string, docId: string) => {
     setProcessing(docId);
-
-    // Simulate PDF processing (text extraction)
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-
-    const mockExtractedText = `This is simulated extracted text from the PDF document.
-
-In a real implementation, this would contain the actual text extracted from the PDF using a library like PDF.js or similar.
-
-The document has been processed and its content is now available for use in the chatbot knowledge base. You can use this information to answer questions and provide context-aware responses.
-
-Key features:
-- Text extraction from PDF
-- Knowledge storage
-- Searchable content
-- Integration with chat responses`;
-
     setDocuments((prev) =>
-      prev.map((doc) =>
-        doc.id === docId
-          ? { ...doc, processed: true, content: mockExtractedText }
-          : doc
+      prev.map((d) =>
+        d.id === docId ? { ...d, status: "processing" as DocumentStatus } : d
       )
     );
-
-    setProcessing(null);
+    try {
+      await processDocument(userId, docId);
+      setDocuments((prev) =>
+        prev.map((d) =>
+          d.id === docId ? { ...d, status: "completed" as DocumentStatus } : d
+        )
+      );
+    } catch {
+      setDocuments((prev) =>
+        prev.map((d) =>
+          d.id === docId ? { ...d, status: "failed" as DocumentStatus } : d
+        )
+      );
+    } finally {
+      setProcessing(null);
+    }
   };
 
-  const deleteDocument = (docId: string) => {
-    setDocuments((prev) => prev.filter((doc) => doc.id !== docId));
-    if (documents.length === 1) {
-      localStorage.removeItem("chatbot_documents");
+  const handleDeleteDocument = async (docId: string) => {
+    const userId = getUserId();
+    if (!userId) return;
+    setDeleting(docId);
+    try {
+      await deleteDocument(userId, docId);
+      setDocuments((prev) => prev.filter((d) => d.id !== docId));
+    } catch (err) {
+      console.error("Delete failed:", err);
+    } finally {
+      setDeleting(null);
     }
   };
 
-  const deleteAllDocuments = () => {
-    if (window.confirm("Are you sure you want to delete all documents?")) {
-      setDocuments([]);
-      localStorage.removeItem("chatbot_documents");
+  const deleteAllDocuments = async () => {
+    if (!window.confirm("Are you sure you want to delete all documents?"))
+      return;
+    const userId = getUserId();
+    if (!userId) return;
+    for (const doc of documents) {
+      try {
+        await deleteDocument(userId, doc.id);
+      } catch {
+        // continue deleting others
+      }
     }
+    setDocuments([]);
   };
 
   const formatFileSize = (bytes: number) => {
@@ -121,8 +154,43 @@ Key features:
     return (bytes / (1024 * 1024)).toFixed(2) + " MB";
   };
 
-  const formatDate = (timestamp: number) => {
-    return new Date(timestamp).toLocaleString();
+  const formatDate = (isoString: string) => {
+    return new Date(isoString).toLocaleString();
+  };
+
+  const renderStatus = (doc: ApiDocument) => {
+    if (doc.status === "completed") {
+      return (
+        <div className="flex items-center gap-1.5 text-green-600">
+          <Check className="w-3.5 h-3.5" />
+          <span className="text-xs font-medium">Processed</span>
+        </div>
+      );
+    }
+
+    if (doc.status === "processing" || processing === doc.id) {
+      return (
+        <div className="flex items-center gap-1.5 text-blue-600">
+          <Loader2 className="w-3.5 h-3.5 animate-spin" />
+          <span className="text-xs">Processing...</span>
+        </div>
+      );
+    }
+
+    // pending or failed
+    return (
+      <button
+        onClick={() => {
+          const userId = getUserId();
+          if (userId) processDocumentById(userId, doc.id);
+        }}
+        disabled={processing === doc.id}
+        className="flex items-center gap-1.5 bg-gradient-to-r from-[#00C853] to-[#00A843] text-white px-3 py-1.5 rounded-lg hover:from-[#00A843] hover:to-[#00962B] transition disabled:opacity-50 disabled:cursor-not-allowed text-xs"
+      >
+        <Database className="w-3.5 h-3.5" />
+        {doc.status === "failed" ? "Retry Process" : "Process to Knowledge"}
+      </button>
+    );
   };
 
   if (!open) return null;
@@ -155,7 +223,7 @@ Key features:
               <Upload className="w-5 h-5 text-slate-600" />
               <div className="text-center">
                 <p className="text-slate-900 font-medium text-sm">
-                  Upload PDF Documents
+                  Upload Documents (PDF, DOCX, TXT)
                 </p>
                 <p className="text-xs text-slate-500 mt-0.5">
                   Click to browse or drag and drop
@@ -164,13 +232,18 @@ Key features:
               <input
                 id="file-upload"
                 type="file"
-                accept=".pdf"
+                accept=".pdf,.docx,.txt"
                 multiple
                 onChange={handleFileUpload}
                 className="hidden"
                 disabled={uploading}
               />
             </label>
+            {uploadError && (
+              <p className="mt-2 text-xs text-red-600 bg-red-50 border border-red-200 px-3 py-2 rounded-lg">
+                {uploadError}
+              </p>
+            )}
           </div>
 
           {/* Documents List */}
@@ -190,12 +263,22 @@ Key features:
               )}
             </div>
 
-            {documents.length === 0 ? (
+            {loadingDocs ? (
+              <div className="flex justify-center py-8">
+                <Loader2 className="w-6 h-6 animate-spin text-slate-400" />
+              </div>
+            ) : docsError ? (
+              <p className="text-center text-sm text-red-600 py-4">
+                {docsError}
+              </p>
+            ) : documents.length === 0 ? (
               <div className="text-center py-8">
                 <FileText className="w-12 h-12 text-slate-300 mx-auto mb-3" />
-                <p className="text-slate-500 text-sm">No documents uploaded yet</p>
+                <p className="text-slate-500 text-sm">
+                  No documents uploaded yet
+                </p>
                 <p className="text-xs text-slate-400 mt-1">
-                  Upload PDF files to build your knowledge base
+                  Upload files to build your knowledge base
                 </p>
               </div>
             ) : (
@@ -210,61 +293,30 @@ Key features:
                       <div className="flex items-start justify-between gap-2">
                         <div className="flex-1 min-w-0">
                           <h4 className="text-slate-900 font-medium truncate text-sm">
-                            {doc.name}
+                            {doc.filename}
                           </h4>
                           <p className="text-xs text-slate-500 mt-0.5">
-                            {formatFileSize(doc.size)} •{" "}
-                            {formatDate(doc.uploadedAt)}
+                            {formatFileSize(doc.file_size)} •{" "}
+                            {formatDate(doc.created_at)}
                           </p>
                         </div>
                         <button
-                          onClick={() => deleteDocument(doc.id)}
-                          className="text-slate-400 hover:text-red-600 transition flex-shrink-0"
+                          onClick={() => handleDeleteDocument(doc.id)}
+                          disabled={deleting === doc.id}
+                          className="text-slate-400 hover:text-red-600 transition flex-shrink-0 disabled:opacity-50"
                           title="Delete document"
                         >
-                          <Trash2 className="w-4 h-4" />
+                          {deleting === doc.id ? (
+                            <Loader2 className="w-4 h-4 animate-spin" />
+                          ) : (
+                            <Trash2 className="w-4 h-4" />
+                          )}
                         </button>
                       </div>
 
                       <div className="mt-2 flex items-center gap-2">
-                        {doc.processed ? (
-                          <div className="flex items-center gap-1.5 text-green-600">
-                            <Check className="w-3.5 h-3.5" />
-                            <span className="text-xs font-medium">
-                              Processed
-                            </span>
-                          </div>
-                        ) : (
-                          <button
-                            onClick={() => processDocument(doc.id)}
-                            disabled={processing === doc.id}
-                            className="flex items-center gap-1.5 bg-gradient-to-r from-[#00C853] to-[#00A843] text-white px-3 py-1.5 rounded-lg hover:from-[#00A843] hover:to-[#00962B] transition disabled:opacity-50 disabled:cursor-not-allowed text-xs"
-                          >
-                            {processing === doc.id ? (
-                              <>
-                                <Loader2 className="w-3.5 h-3.5 animate-spin" />
-                                Processing...
-                              </>
-                            ) : (
-                              <>
-                                <Database className="w-3.5 h-3.5" />
-                                Process to Knowledge
-                              </>
-                            )}
-                          </button>
-                        )}
+                        {renderStatus(doc)}
                       </div>
-
-                      {doc.processed && doc.content && (
-                        <div className="mt-2 p-2 bg-white rounded border border-slate-200">
-                          <p className="text-[10px] text-slate-500 mb-1">
-                            Extracted Content Preview:
-                          </p>
-                          <p className="text-xs text-slate-700 line-clamp-3">
-                            {doc.content}
-                          </p>
-                        </div>
-                      )}
                     </div>
                   </div>
                 </div>
@@ -276,8 +328,7 @@ Key features:
         {/* Footer */}
         <div className="border-t border-slate-200 p-3 bg-slate-50 rounded-b-xl">
           <p className="text-[10px] text-slate-500 text-center">
-            Demo mode: PDF processing is simulated. In production, this would
-            extract actual text from PDFs.
+            Supported formats: PDF, DOCX, TXT
           </p>
         </div>
       </div>

src/app/components/Login.tsx

@@ -1,14 +1,16 @@
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import { LogIn } from "lucide-react";
+import { LogIn, Loader2 } from "lucide-react";
+import { login } from "../../services/api";
 
 export default function Login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
 
-  const handleLogin = (e: React.FormEvent) => {
+  const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
     setError("");
 
@@ -22,15 +24,22 @@ export default function Login() {
       return;
     }
 
-    // Demo login - store user info
-    const user = {
-      email,
-      name: email.split("@")[0],
-      loginTime: new Date().toISOString(),
-    };
-
-    localStorage.setItem("chatbot_user", JSON.stringify(user));
-    navigate("/");
+    setIsLoading(true);
+    try {
+      const res = await login(email, password);
+      const user = {
+        user_id: res.data.user_id,
+        email: res.data.email,
+        name: res.data.name,
+        loginTime: new Date().toISOString(),
+      };
+      localStorage.setItem("chatbot_user", JSON.stringify(user));
+      navigate("/");
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Login failed");
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   return (
@@ -65,6 +74,7 @@ export default function Login() {
                 onChange={(e) => setEmail(e.target.value)}
                 className="w-full px-3 py-2 text-sm rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#4FC3F7] focus:border-transparent transition"
                 placeholder="you@example.com"
+                disabled={isLoading}
               />
             </div>
 
@@ -82,6 +92,7 @@ export default function Login() {
                 onChange={(e) => setPassword(e.target.value)}
                 className="w-full px-3 py-2 text-sm rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#4FC3F7] focus:border-transparent transition"
                 placeholder="Enter your password"
+                disabled={isLoading}
               />
             </div>
 
@@ -93,15 +104,17 @@ export default function Login() {
 
             <button
               type="submit"
-              className="w-full bg-gradient-to-r from-[#00C853] to-[#00A843] text-white py-2.5 text-sm rounded-lg hover:from-[#00A843] hover:to-[#00962B] transition font-medium"
+              disabled={isLoading}
+              className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-[#00C853] to-[#00A843] text-white py-2.5 text-sm rounded-lg hover:from-[#00A843] hover:to-[#00962B] transition font-medium disabled:opacity-60 disabled:cursor-not-allowed"
             >
-              Sign In
+              {isLoading ? (
+                <Loader2 className="w-4 h-4 animate-spin" />
+              ) : (
+                <LogIn className="w-4 h-4" />
+              )}
+              {isLoading ? "Signing in..." : "Sign In"}
             </button>
           </form>
-
-          <p className="text-center text-slate-500 text-xs mt-4">
-            Demo mode: Use any email and password
-          </p>
         </div>
       </div>
     </div>

src/app/components/Main.tsx

@@ -10,73 +10,95 @@ import {
   MessageSquare,
   User,
   Database,
+  Loader2,
 } from "lucide-react";
 import KnowledgeManagement from "./KnowledgeManagement";
+import {
+  getRooms,
+  createRoom,
+  streamChat,
+  type ChatSource,
+} from "../../services/api";
+
+interface StoredUser {
+  user_id: string;
+  email: string;
+  name: string;
+  loginTime: string;
+}
 
 interface Message {
   id: string;
   role: "user" | "assistant";
   content: string;
   timestamp: number;
+  sources?: ChatSource[];
 }
 
-interface Chat {
+interface ChatRoom {
   id: string;
   title: string;
   messages: Message[];
-  createdAt: number;
-  updatedAt: number;
+  createdAt: string;
+  updatedAt: string | null;
 }
 
 export default function Main() {
   const navigate = useNavigate();
   const [sidebarOpen, setSidebarOpen] = useState(true);
-  const [chats, setChats] = useState<Chat[]>([]);
+  const [chats, setChats] = useState<ChatRoom[]>([]);
   const [currentChatId, setCurrentChatId] = useState<string | null>(null);
   const [input, setInput] = useState("");
   const [isStreaming, setIsStreaming] = useState(false);
+  const [roomsLoading, setRoomsLoading] = useState(false);
+  const [roomsError, setRoomsError] = useState<string | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const [user, setUser] = useState<any>(null);
+  const [user, setUser] = useState<StoredUser | null>(null);
   const [knowledgeOpen, setKnowledgeOpen] = useState(false);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
   useEffect(() => {
     const storedUser = localStorage.getItem("chatbot_user");
     if (storedUser) {
-      setUser(JSON.parse(storedUser));
-    }
-
-    const storedChats = localStorage.getItem("chatbot_chats");
-    if (storedChats) {
-      const parsedChats = JSON.parse(storedChats);
-      setChats(parsedChats);
-      if (parsedChats.length > 0) {
-        setCurrentChatId(parsedChats[0].id);
-      }
+      const parsedUser: StoredUser = JSON.parse(storedUser);
+      setUser(parsedUser);
+      loadRooms(parsedUser.user_id);
     }
   }, []);
 
-  useEffect(() => {
-    if (chats.length > 0) {
-      localStorage.setItem("chatbot_chats", JSON.stringify(chats));
-    }
-  }, [chats]);
-
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [currentChatId, chats]);
 
+  const loadRooms = async (userId: string) => {
+    setRoomsLoading(true);
+    setRoomsError(null);
+    try {
+      const apiRooms = await getRooms(userId);
+      const mapped: ChatRoom[] = apiRooms.map((r) => ({
+        id: r.id,
+        title: r.title,
+        messages: [],
+        createdAt: r.created_at,
+        updatedAt: r.updated_at,
+      }));
+      setChats(mapped);
+      if (mapped.length > 0) {
+        setCurrentChatId(mapped[0].id);
+      }
+    } catch (err) {
+      setRoomsError(
+        err instanceof Error ? err.message : "Failed to load chats"
+      );
+    } finally {
+      setRoomsLoading(false);
+    }
+  };
+
   const currentChat = chats.find((chat) => chat.id === currentChatId);
 
   const createNewChat = () => {
-    const newChat: Chat = {
-      id: Date.now().toString(),
-      title: "New Chat",
-      messages: [],
-      createdAt: Date.now(),
-      updatedAt: Date.now(),
-    };
-    setChats([newChat, ...chats]);
-    setCurrentChatId(newChat.id);
+    setCurrentChatId(null);
   };
 
   const deleteChat = (chatId: string) => {
@@ -90,7 +112,6 @@ export default function Main() {
   const deleteAllChats = () => {
     setChats([]);
     setCurrentChatId(null);
-    localStorage.removeItem("chatbot_chats");
   };
 
   const handleLogout = () => {
@@ -98,112 +119,173 @@ export default function Main() {
     navigate("/login");
   };
 
-  const simulateStreamingResponse = async (
-    userMessage: string,
-    chatId: string
-  ) => {
-    const responses = [
-      "I'm a demo chatbot. I can help you with various tasks and answer your questions.",
-      "That's an interesting question! In this demo version, I provide simulated responses.",
-      "I understand. Let me help you with that. This is a demonstration of how the chat interface works.",
-      "Great question! The actual AI responses would come from a backend API in a production environment.",
-      "I'm here to assist you. This demo showcases the chat interface with streaming responses.",
-    ];
-
-    const response =
-      responses[Math.floor(Math.random() * responses.length)] +
-      " " +
-      userMessage;
-    const assistantMessageId = Date.now().toString() + "-assistant";
-
-    setChats((prevChats) =>
-      prevChats.map((chat) => {
-        if (chat.id === chatId) {
-          return {
-            ...chat,
-            messages: [
-              ...chat.messages,
-              {
-                id: assistantMessageId,
-                role: "assistant",
-                content: "",
-                timestamp: Date.now(),
-              },
-            ],
-            updatedAt: Date.now(),
-          };
-        }
-        return chat;
-      })
-    );
-
-    for (let i = 0; i < response.length; i++) {
-      await new Promise((resolve) => setTimeout(resolve, 20));
-      setChats((prevChats) =>
-        prevChats.map((chat) => {
-          if (chat.id === chatId) {
-            return {
-              ...chat,
-              messages: chat.messages.map((msg) =>
-                msg.id === assistantMessageId
-                  ? { ...msg, content: response.slice(0, i + 1) }
-                  : msg
-              ),
-            };
-          }
-          return chat;
-        })
-      );
-    }
-  };
-
   const handleSend = async () => {
-    if (!input.trim() || isStreaming) return;
-
-    let chatId = currentChatId;
-
-    if (!chatId) {
-      const newChat: Chat = {
-        id: Date.now().toString(),
-        title: input.slice(0, 50),
-        messages: [],
-        createdAt: Date.now(),
-        updatedAt: Date.now(),
-      };
-      setChats([newChat, ...chats]);
-      chatId = newChat.id;
-      setCurrentChatId(chatId);
+    if (!input.trim() || isStreaming || !user) return;
+
+    let roomId = currentChatId;
+
+    if (!roomId) {
+      try {
+        const res = await createRoom(user.user_id, input.slice(0, 50));
+        const newRoom: ChatRoom = {
+          id: res.data.id,
+          title: res.data.title,
+          messages: [],
+          createdAt: res.data.created_at,
+          updatedAt: res.data.updated_at,
+        };
+        setChats((prev) => [newRoom, ...prev]);
+        roomId = newRoom.id;
+        setCurrentChatId(roomId);
+      } catch {
+        return;
+      }
     }
 
     const userMessage: Message = {
-      id: Date.now().toString(),
+      id: crypto.randomUUID(),
       role: "user",
       content: input,
       timestamp: Date.now(),
     };
 
-    setChats((prevChats) =>
-      prevChats.map((chat) => {
-        if (chat.id === chatId) {
-          const updatedChat = {
-            ...chat,
-            messages: [...chat.messages, userMessage],
-            updatedAt: Date.now(),
-          };
-          if (chat.messages.length === 0) {
-            updatedChat.title = input.slice(0, 50);
-          }
-          return updatedChat;
-        }
-        return chat;
-      })
+    setChats((prev) =>
+      prev.map((chat) =>
+        chat.id === roomId
+          ? {
+              ...chat,
+              messages: [...chat.messages, userMessage],
+              updatedAt: new Date().toISOString(),
+            }
+          : chat
+      )
     );
 
+    const sentMessage = input;
     setInput("");
     setIsStreaming(true);
 
-    await simulateStreamingResponse(input, chatId);
-    setIsStreaming(false);
+    const assistantMsgId = crypto.randomUUID();
+
+    setChats((prev) =>
+      prev.map((chat) =>
+        chat.id === roomId
+          ? {
+              ...chat,
+              messages: [
+                ...chat.messages,
+                {
+                  id: assistantMsgId,
+                  role: "assistant",
+                  content: "",
+                  timestamp: Date.now(),
+                  sources: [],
+                },
+              ],
+            }
+          : chat
+      )
+    );
+
+    abortControllerRef.current = new AbortController();
+
+    try {
+      const response = await streamChat(user.user_id, roomId, sentMessage);
+
+      if (!response.body) throw new Error("No response body");
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      let currentEvent = "";
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+
+        for (const line of lines) {
+          if (line.startsWith("event:")) {
+            currentEvent = line.replace("event:", "").trim();
+          } else if (line.startsWith("data:")) {
+            const data = line.replace("data:", "").trim();
+
+            if (currentEvent === "sources" && data) {
+              const sources: ChatSource[] = JSON.parse(data);
+              setChats((prev) =>
+                prev.map((chat) =>
+                  chat.id === roomId
+                    ? {
+                        ...chat,
+                        messages: chat.messages.map((m) =>
+                          m.id === assistantMsgId ? { ...m, sources } : m
+                        ),
+                      }
+                    : chat
+                )
+              );
+            } else if (currentEvent === "chunk" && data) {
+              setChats((prev) =>
+                prev.map((chat) =>
+                  chat.id === roomId
+                    ? {
+                        ...chat,
+                        messages: chat.messages.map((m) =>
+                          m.id === assistantMsgId
+                            ? { ...m, content: m.content + data }
+                            : m
+                        ),
+                      }
+                    : chat
+                )
+              );
+            } else if (currentEvent === "message" && data) {
+              setChats((prev) =>
+                prev.map((chat) =>
+                  chat.id === roomId
+                    ? {
+                        ...chat,
+                        messages: chat.messages.map((m) =>
+                          m.id === assistantMsgId
+                            ? { ...m, content: data }
+                            : m
+                        ),
+                      }
+                    : chat
+                )
+              );
+            }
+          }
+        }
+      }
+    } catch (err: unknown) {
+      if ((err as Error).name !== "AbortError") {
+        setChats((prev) =>
+          prev.map((chat) =>
+            chat.id === roomId
+              ? {
+                  ...chat,
+                  messages: chat.messages.map((m) =>
+                    m.id === assistantMsgId
+                      ? {
+                          ...m,
+                          content:
+                            "Error: Failed to get response. Please try again.",
+                        }
+                      : m
+                  ),
+                }
+              : chat
+          )
+        );
+      }
+    } finally {
+      setIsStreaming(false);
+      abortControllerRef.current = null;
+    }
   };
 
   const handleKeyPress = (e: React.KeyboardEvent) => {
@@ -232,33 +314,43 @@ export default function Main() {
         </div>
 
         <div className="flex-1 overflow-y-auto p-2 space-y-1">
-          {chats.map((chat) => (
-            <div
-              key={chat.id}
-              className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition group ${
-                currentChatId === chat.id
-                  ? "bg-white/25"
-                  : "hover:bg-white/15"
-              }`}
-            >
-              <MessageSquare className="w-3.5 h-3.5 flex-shrink-0" />
+          {roomsLoading ? (
+            <div className="flex justify-center py-4">
+              <Loader2 className="w-4 h-4 animate-spin text-white/70" />
+            </div>
+          ) : roomsError ? (
+            <p className="text-xs text-red-200 text-center px-2 py-2">
+              {roomsError}
+            </p>
+          ) : (
+            chats.map((chat) => (
               <div
-                className="flex-1 truncate text-sm"
-                onClick={() => setCurrentChatId(chat.id)}
+                key={chat.id}
+                className={`flex items-center gap-2 p-2 rounded-lg cursor-pointer transition group ${
+                  currentChatId === chat.id
+                    ? "bg-white/25"
+                    : "hover:bg-white/15"
+                }`}
               >
-                {chat.title}
+                <MessageSquare className="w-3.5 h-3.5 flex-shrink-0" />
+                <div
+                  className="flex-1 truncate text-sm"
+                  onClick={() => setCurrentChatId(chat.id)}
+                >
+                  {chat.title}
+                </div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    deleteChat(chat.id);
+                  }}
+                  className="opacity-0 group-hover:opacity-100 transition"
+                >
+                  <Trash2 className="w-3.5 h-3.5 text-red-100 hover:text-white" />
+                </button>
               </div>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  deleteChat(chat.id);
-                }}
-                className="opacity-0 group-hover:opacity-100 transition"
-              >
-                <Trash2 className="w-3.5 h-3.5 text-red-100 hover:text-white" />
-              </button>
-            </div>
-          ))}
+            ))
+          )}
         </div>
 
         <div className="border-t border-white/20 p-3 space-y-2">
@@ -352,11 +444,36 @@ export default function Main() {
                 <p className="whitespace-pre-wrap break-words text-sm">
                   {message.content}
                 </p>
+                {message.role === "assistant" &&
+                  message.sources &&
+                  message.sources.length > 0 && (
+                    <div className="mt-2 pt-2 border-t border-slate-100">
+                      <p className="text-[10px] text-slate-400 mb-1">
+                        Sources:
+                      </p>
+                      <div className="flex flex-wrap gap-1">
+                        {message.sources.map((src, i) => (
+                          <span
+                            key={i}
+                            className="text-[10px] bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded"
+                            title={
+                              src.page_label
+                                ? `Page ${src.page_label}`
+                                : undefined
+                            }
+                          >
+                            {src.filename}
+                            {src.page_label ? ` p.${src.page_label}` : ""}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                  )}
               </div>
             </div>
           ))}
 
-          {!currentChat && chats.length === 0 && (
+          {!currentChat && chats.length === 0 && !roomsLoading && (
             <div className="flex items-center justify-center h-full">
               <div className="text-center">
                 <MessageSquare className="w-12 h-12 text-slate-300 mx-auto mb-3" />
@@ -394,9 +511,6 @@ export default function Main() {
                 <Send className="w-4 h-4" />
               </button>
             </div>
-            <p className="text-[10px] text-slate-400 mt-1.5 text-center">
-              Demo mode: Responses are simulated
-            </p>
           </div>
         </div>
       </div>

src/services/api.ts

@@ -0,0 +1,133 @@
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface LoginResponse {
+  status: string;
+  message: string;
+  data: { user_id: string; email: string; name: string };
+}
+
+export interface Room {
+  id: string;
+  title: string;
+  created_at: string;
+  updated_at: string | null;
+}
+
+export interface CreateRoomResponse {
+  status: string;
+  message: string;
+  data: Room;
+}
+
+export type DocumentStatus = "pending" | "processing" | "completed" | "failed";
+
+export interface ApiDocument {
+  id: string;
+  filename: string;
+  status: DocumentStatus;
+  file_size: number;
+  file_type: string;
+  created_at: string;
+}
+
+export interface UploadDocumentResponse {
+  status: string;
+  message: string;
+  data: { id: string; filename: string; status: DocumentStatus };
+}
+
+export interface ChatSource {
+  document_id: string;
+  filename: string;
+  page_label: string | null;
+}
+
+// ─── Base Client ──────────────────────────────────────────────────────────────
+
+const BASE_URL = (import.meta.env.VITE_API_BASE_URL as string) ?? "";
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${BASE_URL}${path}`, {
+    headers: { "Content-Type": "application/json", ...options?.headers },
+    ...options,
+  });
+  if (!res.ok) {
+    const err = await res
+      .json()
+      .catch(() => ({ detail: `HTTP ${res.status}` }));
+    throw new Error(err.detail ?? `HTTP ${res.status}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+// ─── Auth ─────────────────────────────────────────────────────────────────────
+
+export const login = (email: string, password: string) =>
+  request<LoginResponse>("/api/login", {
+    method: "POST",
+    body: JSON.stringify({ email, password }),
+  });
+
+// ─── Rooms ────────────────────────────────────────────────────────────────────
+
+export const getRooms = (userId: string) =>
+  request<Room[]>(`/api/v1/rooms/${userId}`);
+
+export const createRoom = (userId: string, title?: string) =>
+  request<CreateRoomResponse>("/api/v1/room/create", {
+    method: "POST",
+    body: JSON.stringify({ user_id: userId, title }),
+  });
+
+// ─── Documents ────────────────────────────────────────────────────────────────
+
+export const getDocuments = (userId: string) =>
+  request<ApiDocument[]>(`/api/v1/documents/${userId}`);
+
+export const uploadDocument = async (
+  userId: string,
+  file: File
+): Promise<UploadDocumentResponse> => {
+  const form = new FormData();
+  form.append("file", file);
+  const res = await fetch(
+    `${BASE_URL}/api/v1/document/upload?user_id=${userId}`,
+    { method: "POST", body: form }
+  );
+  if (!res.ok) {
+    const err = await res
+      .json()
+      .catch(() => ({ detail: `HTTP ${res.status}` }));
+    throw new Error(err.detail ?? `HTTP ${res.status}`);
+  }
+  return res.json() as Promise<UploadDocumentResponse>;
+};
+
+export const processDocument = (userId: string, documentId: string) =>
+  request<{
+    status: string;
+    message: string;
+    data: { document_id: string; chunks_processed: number };
+  }>(
+    `/api/v1/document/process?document_id=${documentId}&user_id=${userId}`,
+    { method: "POST" }
+  );
+
+export const deleteDocument = (userId: string, documentId: string) =>
+  request<{ status: string; message: string }>(
+    `/api/v1/document/delete?document_id=${documentId}&user_id=${userId}`,
+    { method: "DELETE" }
+  );
+
+// ─── Chat ─────────────────────────────────────────────────────────────────────
+
+export const streamChat = (
+  userId: string,
+  roomId: string,
+  message: string
+): Promise<Response> =>
+  fetch(`${BASE_URL}/api/v1/chat/stream`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ user_id: userId, room_id: roomId, message }),
+  });