Spaces:

DataEyond
/

Frontend-Data-Eyond

Running

ishaq101 Claude Sonnet 4.6 (1M context) commited on about 2 hours ago

Commit

8fa19d9

1 Parent(s): 91cd4b2

feat: integrate room & chat API contract updates

## API Integration
- Align LoginResponse type with full backend schema (id, fullname, company, role, etc.)
- Fix Login.tsx field mapping: res.data.user_id → res.data.id, res.data.name → res.data.fullname
- Add RoomMessage and RoomDetail interfaces for GET /api/v1/room/{room_id}
- Add getRoom() to fetch room detail with full chat history
- Add deleteRoom() for soft-delete via DELETE /api/v1/room/{room_id}?user_id=...

## Chat History Loading
- Add messagesLoaded flag to ChatRoom interface to track fetch state
- Add useEffect watching currentChatId to auto-load messages when a room is selected
- Covers both auto-selected room on page load and manual sidebar clicks
- Newly created rooms are marked messagesLoaded: true (no fetch needed)

## Delete Room
- deleteChat() now calls deleteRoom API before removing from local state
- If API fails (403/404), deletion is cancelled — room stays in sidebar
- deleteAllChats() calls deleteRoom in parallel via Promise.allSettled
- Deleted rooms disappear permanently after refresh (backend filters inactive rooms)

## Chat Stream Fixes
- Fix SSE parsing: split buffer by /\r?\n/ instead of \n to strip \r from chunks
- Prevents mid-word spacing artifacts in rendered AI responses
- Handle done SSE event with break to terminate stream cleanly
- Fix data line regex: /^data: ?/ to preserve intentional content spacing

## UI & Rendering
- Add ReactMarkdown with remark-gfm, remark-math, rehype-katex for rich AI responses
- Add TypingIndicator component with animated loading messages from loading-messages.yaml
- Add Database icon to Knowledge button, Bot avatar for assistant messages
- Add favicon: public/logo.png as browser tab icon
- Refresh chat UI: bubble styles, input area shadow, sidebar gradient polish
- Add streamingMsgId state to correctly show typing indicator per message

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

Files changed (9) hide show

index.html +1 -0
package.json +6 -1
pnpm-lock.yaml +0 -0
public/loading-messages.yaml +21 -0
public/logo.png +0 -0
src/app/components/Login.tsx +5 -5
src/app/components/Main.tsx +244 -24
src/main.tsx +1 -1
src/services/api.ts +33 -2

index.html CHANGED Viewed

@@ -4,6 +4,7 @@
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Chatbot application</title>
     </head>

     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="icon" type="image/png" href="/logo.png" />
       <title>Chatbot application</title>
     </head>

package.json CHANGED Viewed

@@ -36,8 +36,8 @@
     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-switch": "1.1.3",
     "@radix-ui/react-tabs": "1.1.3",
-    "@radix-ui/react-toggle-group": "1.1.2",
     "@radix-ui/react-toggle": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.8",
     "canvas-confetti": "1.9.4",
     "class-variance-authority": "0.7.1",
@@ -46,6 +46,7 @@
     "date-fns": "3.6.0",
     "embla-carousel-react": "8.6.0",
     "input-otp": "1.4.2",
     "lucide-react": "0.487.0",
     "motion": "12.23.24",
     "next-themes": "0.4.6",
@@ -53,12 +54,16 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-hook-form": "7.55.0",
     "react-popper": "2.3.0",
     "react-resizable-panels": "2.1.7",
     "react-responsive-masonry": "2.7.1",
     "react-router": "7.13.0",
     "react-slick": "0.31.0",
     "recharts": "2.15.2",
     "sonner": "2.0.3",
     "tailwind-merge": "3.2.0",
     "tw-animate-css": "1.3.8",

     "@radix-ui/react-slot": "1.1.2",
     "@radix-ui/react-switch": "1.1.3",
     "@radix-ui/react-tabs": "1.1.3",
     "@radix-ui/react-toggle": "1.1.2",
+    "@radix-ui/react-toggle-group": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.8",
     "canvas-confetti": "1.9.4",
     "class-variance-authority": "0.7.1",
     "date-fns": "3.6.0",
     "embla-carousel-react": "8.6.0",
     "input-otp": "1.4.2",
+    "katex": "^0.16.45",
     "lucide-react": "0.487.0",
     "motion": "12.23.24",
     "next-themes": "0.4.6",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-hook-form": "7.55.0",
+    "react-markdown": "^10.1.0",
     "react-popper": "2.3.0",
     "react-resizable-panels": "2.1.7",
     "react-responsive-masonry": "2.7.1",
     "react-router": "7.13.0",
     "react-slick": "0.31.0",
     "recharts": "2.15.2",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
     "sonner": "2.0.3",
     "tailwind-merge": "3.2.0",
     "tw-animate-css": "1.3.8",

pnpm-lock.yaml ADDED Viewed

The diff for this file is too large to render. See raw diff

public/loading-messages.yaml ADDED Viewed

	@@ -0,0 +1,21 @@

+messages:
+  - Routing
+  - Parsing
+  - Mapping
+  - Tracing
+  - Linking
+  - Binding
+  - Buffering
+  - Merging
+  - Resolving
+  - Scanning
+  - Collating
+  - Filtering
+  - Balancing
+  - Shaping
+  - Aligning
+  - Weaving
+  - Framing
+  - Tuning
+  - Grounding
+  - Composing

public/logo.png ADDED Viewed

src/app/components/Login.tsx CHANGED Viewed

@@ -28,9 +28,9 @@ export default function Login() {
     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));
@@ -43,11 +43,11 @@ export default function Login() {
   };
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#4FC3F7] via-[#00C853] to-[#FF8F00]">
       <div className="w-full max-w-md px-4">
         <div className="bg-white rounded-xl shadow-2xl p-6 border border-slate-200">
           <div className="flex items-center justify-center mb-6">
-            <div className="bg-gradient-to-br from-[#00C853] to-[#00A843] p-2.5 rounded-lg">
               <LogIn className="w-6 h-6 text-white" />
             </div>
           </div>
@@ -105,7 +105,7 @@ export default function Login() {
             <button
               type="submit"
               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"
             >
               {isLoading ? (
                 <Loader2 className="w-4 h-4 animate-spin" />

     try {
       const res = await login(email, password);
       const user = {
+        user_id: res.data.id,
         email: res.data.email,
+        name: res.data.fullname,
         loginTime: new Date().toISOString(),
       };
       localStorage.setItem("chatbot_user", JSON.stringify(user));
   };
   return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-[#BAE6FD] via-[#A7F3D0] to-[#FDE68A]">
       <div className="w-full max-w-md px-4">
         <div className="bg-white rounded-xl shadow-2xl p-6 border border-slate-200">
           <div className="flex items-center justify-center mb-6">
+            <div className="bg-gradient-to-br from-[#059669] to-[#047857] p-2.5 rounded-lg">
               <LogIn className="w-6 h-6 text-white" />
             </div>
           </div>
             <button
               type="submit"
               disabled={isLoading}
+              className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-[#059669] to-[#047857] text-white py-2.5 text-sm rounded-lg hover:from-[#047857] hover:to-[#065F46] transition font-medium disabled:opacity-60 disabled:cursor-not-allowed"
             >
               {isLoading ? (
                 <Loader2 className="w-4 h-4 animate-spin" />

src/app/components/Main.tsx CHANGED Viewed

@@ -9,13 +9,21 @@ import {
   X,
   MessageSquare,
   User,
-  Database,
   Loader2,
 } from "lucide-react";
 import KnowledgeManagement from "./KnowledgeManagement";
 import {
   getRooms,
   createRoom,
   streamChat,
   type ChatSource,
 } from "../../services/api";
@@ -41,6 +49,138 @@ interface ChatRoom {
   messages: Message[];
   createdAt: string;
   updatedAt: string | null;
 }
 export default function Main() {
@@ -50,6 +190,7 @@ export default function Main() {
   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);
@@ -70,6 +211,15 @@ export default function Main() {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [currentChatId, chats]);
   const loadRooms = async (userId: string) => {
     setRoomsLoading(true);
     setRoomsError(null);
@@ -81,6 +231,7 @@ export default function Main() {
         messages: [],
         createdAt: r.created_at,
         updatedAt: r.updated_at,
       }));
       setChats(mapped);
       if (mapped.length > 0) {
@@ -95,13 +246,44 @@ export default function Main() {
     }
   };
   const currentChat = chats.find((chat) => chat.id === currentChatId);
   const createNewChat = () => {
     setCurrentChatId(null);
   };
-  const deleteChat = (chatId: string) => {
     const updatedChats = chats.filter((chat) => chat.id !== chatId);
     setChats(updatedChats);
     if (currentChatId === chatId) {
@@ -109,7 +291,11 @@ export default function Main() {
     }
   };
-  const deleteAllChats = () => {
     setChats([]);
     setCurrentChatId(null);
   };
@@ -133,6 +319,7 @@ export default function Main() {
           messages: [],
           createdAt: res.data.created_at,
           updatedAt: res.data.updated_at,
         };
         setChats((prev) => [newRoom, ...prev]);
         roomId = newRoom.id;
@@ -166,6 +353,7 @@ export default function Main() {
     setIsStreaming(true);
     const assistantMsgId = crypto.randomUUID();
     setChats((prev) =>
       prev.map((chat) =>
@@ -204,14 +392,14 @@ export default function Main() {
         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);
@@ -257,6 +445,8 @@ export default function Main() {
                     : chat
                 )
               );
             }
           }
         }
@@ -273,7 +463,7 @@ export default function Main() {
                       ? {
                           ...m,
                           content:
-                            "Error: Failed to get response. Please try again.",
                         }
                       : m
                   ),
@@ -284,6 +474,7 @@ export default function Main() {
       }
     } finally {
       setIsStreaming(false);
       abortControllerRef.current = null;
     }
   };
@@ -301,7 +492,7 @@ export default function Main() {
       <div
         className={`${
           sidebarOpen ? "w-64" : "w-0"
-        } bg-gradient-to-br from-[#00C853] to-[#00A843] text-white transition-all duration-300 flex flex-col overflow-hidden`}
       >
         <div className="p-3 border-b border-white/20">
           <button
@@ -386,7 +577,7 @@ export default function Main() {
       </div>
       {/* Main Content */}
-      <div className="flex-1 flex flex-col">
         {/* Header */}
         <div className="bg-white border-b border-slate-200 p-3 flex items-center gap-3">
           <button
@@ -399,12 +590,12 @@ export default function Main() {
               <Menu className="w-5 h-5" />
             )}
           </button>
-          <h1 className="text-base text-slate-900 flex-1">
             {currentChat?.title || "Chatbot"}
           </h1>
           <button
             onClick={() => setKnowledgeOpen(true)}
-            className="flex items-center gap-2 bg-gradient-to-r from-[#FF8F00] to-[#FF6F00] text-white px-3 py-2 rounded-lg hover:from-[#FF6F00] hover:to-[#F57C00] transition text-sm"
           >
             <Database className="w-4 h-4" />
             Knowledge
@@ -434,35 +625,60 @@ export default function Main() {
                 message.role === "user" ? "justify-end" : "justify-start"
               }`}
             >
               <div
-                className={`max-w-2xl px-4 py-2.5 rounded-xl ${
                   message.role === "user"
-                    ? "bg-gradient-to-r from-[#4FC3F7] to-[#29B6F6] text-white"
-                    : "bg-white border border-slate-200 text-slate-900"
                 }`}
               >
-                <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>
                         ))}
@@ -491,24 +707,28 @@ export default function Main() {
         </div>
         {/* Input Area */}
-        <div className="bg-white border-t border-slate-200 p-3">
           <div className="max-w-4xl mx-auto">
             <div className="flex gap-2 items-end">
               <textarea
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 onKeyDown={handleKeyPress}
-                placeholder="Type your message..."
                 rows={1}
-                className="flex-1 px-3 py-2 text-sm rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#4FC3F7] focus:border-transparent resize-none max-h-32"
                 disabled={isStreaming}
               />
               <button
                 onClick={handleSend}
                 disabled={!input.trim() || isStreaming}
-                className="bg-gradient-to-r from-[#4FC3F7] to-[#29B6F6] text-white p-2.5 rounded-lg hover:from-[#29B6F6] hover:to-[#039BE5] transition disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                <Send className="w-4 h-4" />
               </button>
             </div>
           </div>

   X,
   MessageSquare,
   User,
+  Bot,
   Loader2,
+  Database,
 } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import type { Components } from "react-markdown";
 import KnowledgeManagement from "./KnowledgeManagement";
 import {
   getRooms,
+  getRoom,
   createRoom,
+  deleteRoom,
   streamChat,
   type ChatSource,
 } from "../../services/api";
   messages: Message[];
   createdAt: string;
   updatedAt: string | null;
+  messagesLoaded: boolean;
+}
+// Markdown component overrides for clean rendering inside chat bubbles
+const markdownComponents: Components = {
+  p: ({ children }) => (
+    <p className="text-sm mb-2 last:mb-0 leading-relaxed">{children}</p>
+  ),
+  h1: ({ children }) => (
+    <h1 className="text-lg font-bold mb-3 mt-4 first:mt-0">{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className="text-base font-bold mb-2 mt-3 first:mt-0">{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="text-sm font-semibold mb-2 mt-2 first:mt-0">{children}</h3>
+  ),
+  ul: ({ children }) => (
+    <ul className="list-disc pl-5 mb-2 space-y-1 text-sm">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="list-decimal pl-5 mb-2 space-y-1 text-sm">{children}</ol>
+  ),
+  li: ({ children }) => <li className="text-sm leading-relaxed">{children}</li>,
+  code: ({ children, className }) => {
+    const isBlock = className?.startsWith("language-");
+    if (isBlock) {
+      return (
+        <code className="block text-xs font-mono text-slate-100 leading-relaxed">
+          {children}
+        </code>
+      );
+    }
+    return (
+      <code className="bg-slate-100 text-pink-600 px-1.5 py-0.5 rounded text-xs font-mono">
+        {children}
+      </code>
+    );
+  },
+  pre: ({ children }) => (
+    <pre className="bg-slate-900 rounded-lg p-3 mb-2 mt-1 overflow-x-auto text-xs">
+      {children}
+    </pre>
+  ),
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-4 border-slate-300 pl-3 text-slate-500 italic mb-2 text-sm">
+      {children}
+    </blockquote>
+  ),
+  table: ({ children }) => (
+    <div className="overflow-x-auto mb-2">
+      <table className="w-full text-sm border-collapse">{children}</table>
+    </div>
+  ),
+  th: ({ children }) => (
+    <th className="border border-slate-200 px-3 py-1.5 bg-slate-100 font-medium text-left text-xs">
+      {children}
+    </th>
+  ),
+  td: ({ children }) => (
+    <td className="border border-slate-200 px-3 py-1.5 text-xs">{children}</td>
+  ),
+  a: ({ children, href }) => (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-blue-600 underline hover:text-blue-800"
+    >
+      {children}
+    </a>
+  ),
+  strong: ({ children }) => (
+    <strong className="font-semibold">{children}</strong>
+  ),
+  hr: () => <hr className="border-slate-200 my-3" />,
+};
+// Typing indicator — three bouncing dots
+function useLoadingMessages() {
+  const [messages, setMessages] = useState<string[]>([]);
+  useEffect(() => {
+    fetch("/loading-messages.yaml")
+      .then((r) => r.text())
+      .then((text) => {
+        const parsed = text
+          .split("\n")
+          .filter((l) => l.trimStart().startsWith("- "))
+          .map((l) => l.replace(/^\s*- /, "").trim())
+          .filter(Boolean);
+        if (parsed.length > 0) setMessages(parsed);
+      })
+      .catch(() => {});
+  }, []);
+  return messages;
+}
+function TypingIndicator() {
+  const messages = useLoadingMessages();
+  const [index, setIndex] = useState(0);
+  useEffect(() => {
+    if (messages.length === 0) return;
+    setIndex(Math.floor(Math.random() * messages.length));
+    const id = setInterval(() => {
+      setIndex((prev) => {
+        let next: number;
+        do { next = Math.floor(Math.random() * messages.length); } while (messages.length > 1 && next === prev);
+        return next;
+      });
+    }, 300);
+    return () => clearInterval(id);
+  }, [messages]);
+  if (messages.length === 0) {
+    return (
+      <div className="flex gap-1.5 items-center py-1 px-0.5">
+        <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: "0ms", animationDuration: "1s" }} />
+        <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: "200ms", animationDuration: "1s" }} />
+        <span className="w-2 h-2 bg-slate-400 rounded-full animate-bounce" style={{ animationDelay: "400ms", animationDuration: "1s" }} />
+      </div>
+    );
+  }
+  return (
+    <div className="flex items-center gap-2 py-1 px-0.5 text-sm text-slate-400 italic">
+      <span className="inline-block w-2 h-2 rounded-full bg-slate-400 animate-pulse" />
+      <span>{messages[index]}…</span>
+    </div>
+  );
 }
 export default function Main() {
   const [currentChatId, setCurrentChatId] = useState<string | null>(null);
   const [input, setInput] = useState("");
   const [isStreaming, setIsStreaming] = useState(false);
+  const [streamingMsgId, setStreamingMsgId] = useState<string | null>(null);
   const [roomsLoading, setRoomsLoading] = useState(false);
   const [roomsError, setRoomsError] = useState<string | null>(null);
   const messagesEndRef = useRef<HTMLDivElement>(null);
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [currentChatId, chats]);
+  useEffect(() => {
+    if (!currentChatId) return;
+    const chat = chats.find((c) => c.id === currentChatId);
+    if (chat && !chat.messagesLoaded) {
+      loadRoomMessages(currentChatId);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentChatId]);
   const loadRooms = async (userId: string) => {
     setRoomsLoading(true);
     setRoomsError(null);
         messages: [],
         createdAt: r.created_at,
         updatedAt: r.updated_at,
+        messagesLoaded: false,
       }));
       setChats(mapped);
       if (mapped.length > 0) {
     }
   };
+  const loadRoomMessages = async (roomId: string) => {
+    try {
+      const detail = await getRoom(roomId);
+      const messages: Message[] = detail.messages.map((m) => ({
+        id: m.id,
+        role: m.role,
+        content: m.content,
+        timestamp: new Date(m.created_at).getTime(),
+      }));
+      setChats((prev) =>
+        prev.map((chat) =>
+          chat.id === roomId
+            ? { ...chat, messages, messagesLoaded: true }
+            : chat
+        )
+      );
+    } catch {
+      setChats((prev) =>
+        prev.map((chat) =>
+          chat.id === roomId ? { ...chat, messagesLoaded: true } : chat
+        )
+      );
+    }
+  };
   const currentChat = chats.find((chat) => chat.id === currentChatId);
   const createNewChat = () => {
     setCurrentChatId(null);
   };
+  const deleteChat = async (chatId: string) => {
+    if (!user) return;
+    try {
+      await deleteRoom(chatId, user.user_id);
+    } catch {
+      return;
+    }
     const updatedChats = chats.filter((chat) => chat.id !== chatId);
     setChats(updatedChats);
     if (currentChatId === chatId) {
     }
   };
+  const deleteAllChats = async () => {
+    if (!user) return;
+    await Promise.allSettled(
+      chats.map((chat) => deleteRoom(chat.id, user.user_id))
+    );
     setChats([]);
     setCurrentChatId(null);
   };
           messages: [],
           createdAt: res.data.created_at,
           updatedAt: res.data.updated_at,
+          messagesLoaded: true,
         };
         setChats((prev) => [newRoom, ...prev]);
         roomId = newRoom.id;
     setIsStreaming(true);
     const assistantMsgId = crypto.randomUUID();
+    setStreamingMsgId(assistantMsgId);
     setChats((prev) =>
       prev.map((chat) =>
         if (done) break;
         buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split(/\r?\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: ?/, "");
             if (currentEvent === "sources" && data) {
               const sources: ChatSource[] = JSON.parse(data);
                     : chat
                 )
               );
+            } else if (currentEvent === "done") {
+              break;
             }
           }
         }
                       ? {
                           ...m,
                           content:
+                            "Sorry, I couldn't get a response. Please try again.",
                         }
                       : m
                   ),
       }
     } finally {
       setIsStreaming(false);
+      setStreamingMsgId(null);
       abortControllerRef.current = null;
     }
   };
       <div
         className={`${
           sidebarOpen ? "w-64" : "w-0"
+        } bg-gradient-to-b from-[#059669] to-[#047857] text-white transition-all duration-300 flex flex-col overflow-hidden`}
       >
         <div className="p-3 border-b border-white/20">
           <button
       </div>
       {/* Main Content */}
+      <div className="flex-1 flex flex-col min-w-0">
         {/* Header */}
         <div className="bg-white border-b border-slate-200 p-3 flex items-center gap-3">
           <button
               <Menu className="w-5 h-5" />
             )}
           </button>
+          <h1 className="text-base text-slate-900 flex-1 truncate">
             {currentChat?.title || "Chatbot"}
           </h1>
           <button
             onClick={() => setKnowledgeOpen(true)}
+            className="flex items-center gap-2 bg-[#F59E0B] hover:bg-[#D97706] text-white px-3 py-2 rounded-lg transition-all duration-200 hover:scale-105 text-sm flex-shrink-0"
           >
             <Database className="w-4 h-4" />
             Knowledge
                 message.role === "user" ? "justify-end" : "justify-start"
               }`}
             >
+              {/* Avatar for assistant */}
+              {message.role === "assistant" && (
+                <div className="w-7 h-7 rounded-full bg-gradient-to-br from-[#059669] to-[#047857] flex items-center justify-center flex-shrink-0 mt-0.5 mr-2">
+                  <Bot className="w-3.5 h-3.5 text-white" />
+                </div>
+              )}
               <div
+                className={`max-w-2xl px-4 py-3 rounded-2xl ${
                   message.role === "user"
+                    ? "bg-[#3B82F6] text-white rounded-tr-sm shadow-sm"
+                    : "bg-[#F3F4F6] border-0 text-slate-900 rounded-tl-sm shadow-sm"
                 }`}
               >
+                {message.role === "user" ? (
+                  <p className="text-sm whitespace-pre-wrap break-words leading-relaxed">
+                    {message.content}
+                  </p>
+                ) : message.content === "" && streamingMsgId === message.id ? (
+                  // Waiting for first chunk — show typing indicator
+                  <TypingIndicator />
+                ) : (
+                  // Render markdown for assistant messages
+                  <div className="text-slate-900">
+                    <ReactMarkdown
+                      remarkPlugins={[remarkGfm, remarkMath]}
+                      rehypePlugins={[rehypeKatex]}
+                      components={markdownComponents}
+                    >
+                      {message.content}
+                    </ReactMarkdown>
+                  </div>
+                )}
+                {/* Sources */}
                 {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.5">
                         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-2 py-0.5 rounded-full border border-slate-200"
                             title={
                               src.page_label
                                 ? `Page ${src.page_label}`
                                 : undefined
                             }
                           >
+                            📄 {src.filename}
                             {src.page_label ? ` p.${src.page_label}` : ""}
                           </span>
                         ))}
         </div>
         {/* Input Area */}
+        <div className="bg-white border-t border-slate-200 p-3 shadow-[0_-2px_10px_rgba(0,0,0,0.06)]">
           <div className="max-w-4xl mx-auto">
             <div className="flex gap-2 items-end">
               <textarea
                 value={input}
                 onChange={(e) => setInput(e.target.value)}
                 onKeyDown={handleKeyPress}
+                placeholder="Ask me anything... (Enter to send, Shift+Enter for newline)"
                 rows={1}
+                className="flex-1 px-3 py-2 text-sm rounded-lg border border-slate-300 focus:outline-none focus:ring-2 focus:ring-[#3B82F6] focus:border-transparent resize-none max-h-32"
                 disabled={isStreaming}
               />
               <button
                 onClick={handleSend}
                 disabled={!input.trim() || isStreaming}
+                className="bg-[#3B82F6] hover:bg-[#2563EB] text-white p-2.5 rounded-lg transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
               >
+                {isStreaming ? (
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                ) : (
+                  <Send className="w-4 h-4" />
+                )}
               </button>
             </div>
           </div>

src/main.tsx CHANGED Viewed

@@ -2,6 +2,6 @@
   import { createRoot } from "react-dom/client";
   import App from "./app/App.tsx";
   import "./styles/index.css";
   createRoot(document.getElementById("root")!).render(<App />);

   import { createRoot } from "react-dom/client";
   import App from "./app/App.tsx";
   import "./styles/index.css";
+  import "katex/dist/katex.min.css";
   createRoot(document.getElementById("root")!).render(<App />);

src/services/api.ts CHANGED Viewed

@@ -3,7 +3,18 @@
 export interface LoginResponse {
   status: string;
   message: string;
-  data: { user_id: string; email: string; name: string };
 }
 export interface Room {
@@ -19,6 +30,17 @@ export interface CreateRoomResponse {
   data: Room;
 }
 export type DocumentStatus = "pending" | "processing" | "completed" | "failed";
 export interface ApiDocument {
@@ -44,7 +66,7 @@ export interface ChatSource {
 // ─── 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}`, {
@@ -73,6 +95,15 @@ export const login = (email: string, password: string) =>
 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",

 export interface LoginResponse {
   status: string;
   message: string;
+  data: {
+    id: string;
+    fullname: string;
+    email: string;
+    company: string;
+    company_size: string;
+    function: string;
+    site: string;
+    role: string;
+    status: string;
+    created_at: string;
+  };
 }
 export interface Room {
   data: Room;
 }
+export interface RoomMessage {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  created_at: string;
+}
+export interface RoomDetail extends Room {
+  messages: RoomMessage[];
+}
 export type DocumentStatus = "pending" | "processing" | "completed" | "failed";
 export interface ApiDocument {
 // ─── Base Client ──────────────────────────────────────────────────────────────
+const BASE_URL = ((import.meta as unknown as { env: Record<string, string> }).env.VITE_API_BASE_URL) ?? "";
 async function request<T>(path: string, options?: RequestInit): Promise<T> {
   const res = await fetch(`${BASE_URL}${path}`, {
 export const getRooms = (userId: string) =>
   request<Room[]>(`/api/v1/rooms/${userId}`);
+export const getRoom = (roomId: string) =>
+  request<RoomDetail>(`/api/v1/room/${roomId}`);
+export const deleteRoom = (roomId: string, userId: string) =>
+  request<{ status: string; message: string }>(
+    `/api/v1/room/${roomId}?user_id=${userId}`,
+    { method: "DELETE" }
+  );
 export const createRoom = (userId: string, title?: string) =>
   request<CreateRoomResponse>("/api/v1/room/create", {
     method: "POST",