Spaces:

DataEyond
/

Demo-Frontend-Voice-Agent

Paused

ishaq101 commited on Apr 24

Commit

5ca6cf1

1 Parent(s): 10d1f27

[NOTICKET] Branding Styling and Integration (Chat & Voice)

- update styling for product branding (logo, wording, color, style)
- integration with chatbot backend
- integration with voice backend

Files changed (27) hide show

.gitignore +2 -1
README.md +1 -1
index.html +2 -2
public/maintiva-logo.jpg +0 -0
src/app/components/KnowledgeManagement.tsx +1 -1
src/app/components/Login.tsx +38 -38
src/app/components/Main.tsx +223 -581
src/app/components/chat/ChatInput.tsx +107 -0
src/app/components/chat/ChatLayout.tsx +17 -0
src/app/components/chat/ChatWindow.tsx +83 -0
src/app/components/chat/FeedbackWidget.tsx +146 -0
src/app/components/chat/MessageBubble.tsx +78 -0
src/app/components/chat/Sidebar.tsx +282 -0
src/app/components/chat/TypingIndicator.tsx +70 -0
src/app/components/chat/VoiceMicButton.tsx +93 -0
src/app/components/chat/VoiceStatusBar.tsx +75 -0
src/app/components/chat/renderers/MarkdownRenderer.tsx +126 -0
src/app/components/chat/types.ts +26 -0
src/assets/maintiva-logo.jpg +0 -0
src/audio/AudioPlayer.ts +81 -0
src/audio/AudioRecorder.ts +68 -0
src/hooks/useVoiceSession.ts +274 -0
src/services/api.ts +9 -1
src/services/voiceApi.ts +21 -0
src/styles/theme.css +17 -0
src/vite-env.d.ts +21 -0
tsconfig.json +24 -0

.gitignore CHANGED Viewed

@@ -36,8 +36,9 @@ Thumbs.db
 *.local
 vite.config.ts.timestamp-*
-API_CONTRACT.md
 API_CONTRACT_VOICE.md
 # Database logos (served via CDN)
 public/databases/

 *.local
 vite.config.ts.timestamp-*
+API_CONTRACT_CHATBOT.md
 API_CONTRACT_VOICE.md
+STYLE.md
 # Database logos (served via CDN)
 public/databases/

README.md CHANGED Viewed

@@ -4,7 +4,7 @@ emoji: 🐠
 colorFrom: green
 colorTo: purple
 sdk: docker
-pinned: false
 short_description: Demo Frontend Voice Agent
 ---

 colorFrom: green
 colorTo: purple
 sdk: docker
+pinned: true
 short_description: Demo Frontend Voice Agent
 ---

index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <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>
     <body>

     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="icon" type="image/jpeg" href="/maintiva-logo.jpg" />
+      <title>Maintiva Agent</title>
     </head>
     <body>

public/maintiva-logo.jpg ADDED Viewed

src/app/components/KnowledgeManagement.tsx CHANGED Viewed

@@ -158,7 +158,7 @@ export default function KnowledgeManagement({
         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(),

         const newDoc: ApiDocument = {
           id: uploadRes.data.id,
           filename: uploadRes.data.filename,
+          status: uploadRes.data.status,
           file_size: file.size,
           file_type: file.name.split(".").pop() ?? "",
           created_at: new Date().toISOString(),

src/app/components/Login.tsx CHANGED Viewed

@@ -1,14 +1,15 @@
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import { LogIn, Loader2 } from "lucide-react";
 import { login } from "../../services/api";
-import logoUrl from "../../assets/logo.png";
 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 = async (e: React.FormEvent) => {
@@ -44,7 +45,7 @@ export default function Login() {
   };
   return (
-    <div className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#1e2d45]">
       {/* ── Dot grid texture ── */}
       <div
@@ -124,9 +125,6 @@ export default function Login() {
         <circle cx="30" cy="25" r="2.5" fill="#f97316" fillOpacity="0.5"/>
       </svg>
-      {/* ── Large ring — top right ── */}
-      <div className="absolute -top-24 -right-24 w-80 h-80 rounded-full border border-slate-700 animate-float-slow opacity-50" />
-      <div className="absolute -top-10 -right-10 w-48 h-48 rounded-full border border-slate-800 opacity-60" />
       {/* ── Rotated square — bottom left ── */}
       <div
@@ -155,15 +153,6 @@ export default function Login() {
         />
       </svg>
-      {/* ── Rotated square — bottom left ── */}
-      <div
-        className="absolute bottom-16 left-16 w-24 h-24 border border-slate-700 opacity-50 animate-float"
-        style={{ transform: "rotate(20deg)", "--float-rotate": "20deg" } as React.CSSProperties}
-      />
-      <div
-        className="absolute bottom-28 left-28 w-12 h-12 border border-slate-700 opacity-30"
-        style={{ transform: "rotate(45deg)" }}
-      />
       {/* ── Small floating dots ── */}
       <div className="absolute top-1/4 left-12 w-2 h-2 rounded-full bg-sky-400 opacity-60 animate-float" style={{ animationDelay: "1s" }} />
@@ -172,21 +161,21 @@ export default function Login() {
       <div className="absolute top-2/3 right-1/3 w-1 h-1 rounded-full bg-violet-400 opacity-50 animate-float-slow" style={{ animationDelay: "4s" }} />
       {/* ── Login card ── */}
-      <div className="relative z-10 w-full max-w-md px-4">
-        <div className="bg-white rounded-2xl shadow-2xl shadow-black/40 p-7 border border-white/10">
           {/* Brand logo */}
-          <div className="flex flex-col items-center gap-3 mb-6">
-            <img src={logoUrl} alt="DataEyond" className="w-12 h-12 object-contain" />
             <div className="text-center">
-              <h1 className="text-xl font-semibold text-slate-900">Welcome Back</h1>
-              <p className="text-slate-400 text-sm mt-0.5">Sign in to continue to your chatbot</p>
             </div>
           </div>
-          <form onSubmit={handleLogin} className="space-y-4">
             <div>
-              <label htmlFor="email" className="block text-xs font-medium mb-1.5 text-slate-600">
                 Email Address
               </label>
               <input
@@ -194,29 +183,40 @@ export default function Login() {
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition"
                 placeholder="you@example.com"
                 disabled={isLoading}
               />
             </div>
             <div>
-              <label htmlFor="password" className="block text-xs font-medium mb-1.5 text-slate-600">
                 Password
               </label>
-              <input
-                id="password"
-                type="password"
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full px-3 py-2 text-sm rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition"
-                placeholder="Enter your password"
-                disabled={isLoading}
-              />
             </div>
             {error && (
-              <div className="bg-red-50 border border-red-100 text-red-600 px-3 py-2 rounded-xl text-xs">
                 {error}
               </div>
             )}
@@ -224,12 +224,12 @@ export default function Login() {
             <button
               type="submit"
               disabled={isLoading}
-              className="w-full flex items-center justify-center gap-2 bg-[#059669] hover:bg-[#047857] active:bg-[#065F46] text-white py-2.5 text-sm rounded-xl transition font-medium disabled:opacity-50 disabled:cursor-not-allowed mt-1"
             >
               {isLoading ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
               ) : (
-                <LogIn className="w-4 h-4" />
               )}
               {isLoading ? "Signing in…" : "Sign In"}
             </button>

 import { useState } from "react";
 import { useNavigate } from "react-router";
+import { LogIn, Loader2, Eye, EyeOff } from "lucide-react";
 import { login } from "../../services/api";
+import logoUrl from "../../assets/maintiva-logo.jpg";
 export default function Login() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [isLoading, setIsLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const navigate = useNavigate();
   const handleLogin = async (e: React.FormEvent) => {
   };
   return (
+    <div className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#fcfdfd]">
       {/* ── Dot grid texture ── */}
       <div
         <circle cx="30" cy="25" r="2.5" fill="#f97316" fillOpacity="0.5"/>
       </svg>
       {/* ── Rotated square — bottom left ── */}
       <div
         />
       </svg>
       {/* ── Small floating dots ── */}
       <div className="absolute top-1/4 left-12 w-2 h-2 rounded-full bg-sky-400 opacity-60 animate-float" style={{ animationDelay: "1s" }} />
       <div className="absolute top-2/3 right-1/3 w-1 h-1 rounded-full bg-violet-400 opacity-50 animate-float-slow" style={{ animationDelay: "4s" }} />
       {/* ── Login card ── */}
+      <div className="relative z-10 w-full max-w-md xl:max-w-lg 2xl:max-w-xl px-4">
+        <div className="bg-white rounded-2xl shadow-2xl shadow-black/40 p-7 xl:p-10 border border-white/10">
           {/* Brand logo */}
+          <div className="flex flex-col items-center gap-2 xl:gap-4 mb-6 xl:mb-8">
+            <img src={logoUrl} alt="Maintiva" className="w-12 h-12 xl:w-20 xl:h-20 object-contain" />
             <div className="text-center">
+              <h1 className="text-xl xl:text-3xl font-semibold text-slate-900">Maintiva Agent</h1>
+              <p className="text-slate-400 text-sm xl:text-base mt-0.5 xl:mt-1">Welcome back to your AI Based Virtual Agent for Analysis, Learning & RCA</p>
             </div>
           </div>
+          <form onSubmit={handleLogin} className="space-y-4 xl:space-y-5">
             <div>
+              <label htmlFor="email" className="block text-xs xl:text-sm font-medium mb-1.5 text-slate-600">
                 Email Address
               </label>
               <input
                 type="email"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-3 xl:px-4 py-2 xl:py-3 text-sm xl:text-base rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition"
                 placeholder="you@example.com"
                 disabled={isLoading}
               />
             </div>
             <div>
+              <label htmlFor="password" className="block text-xs xl:text-sm font-medium mb-1.5 text-slate-600">
                 Password
               </label>
+              <div className="relative">
+                <input
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="w-full px-3 xl:px-4 py-2 xl:py-3 pr-10 xl:pr-12 text-sm xl:text-base rounded-xl border border-slate-200 bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-400/30 focus:border-sky-400 placeholder:text-slate-300 transition"
+                  placeholder="Enter your password"
+                  disabled={isLoading}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 transition"
+                  tabIndex={-1}
+                  aria-label={showPassword ? "Hide password" : "Show password"}
+                >
+                  {showPassword ? <EyeOff className="w-4 h-4 xl:w-5 xl:h-5" /> : <Eye className="w-4 h-4 xl:w-5 xl:h-5" />}
+                </button>
+              </div>
             </div>
             {error && (
+              <div className="bg-red-50 border border-red-100 text-red-600 px-3 py-2 rounded-xl text-xs xl:text-sm">
                 {error}
               </div>
             )}
             <button
               type="submit"
               disabled={isLoading}
+              className="w-full flex items-center justify-center gap-2 bg-[#059669] hover:bg-[#047857] active:bg-[#065F46] text-white py-2.5 xl:py-3.5 text-sm xl:text-base rounded-xl transition font-medium disabled:opacity-50 disabled:cursor-not-allowed mt-1"
             >
               {isLoading ? (
+                <Loader2 className="w-4 h-4 xl:w-5 xl:h-5 animate-spin" />
               ) : (
+                <LogIn className="w-4 h-4 xl:w-5 xl:h-5" />
               )}
               {isLoading ? "Signing in…" : "Sign In"}
             </button>

src/app/components/Main.tsx CHANGED Viewed

@@ -1,23 +1,7 @@
-import { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router";
-import {
-  Send,
-  Plus,
-  Trash2,
-  LogOut,
-  Menu,
-  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,
@@ -27,21 +11,15 @@ import {
   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 ChatRoom {
   id: string;
@@ -52,177 +30,26 @@ interface ChatRoom {
   messagesLoaded: boolean;
 }
-// Preprocess markdown to ensure tables are properly separated from surrounding text
-function preprocessMarkdown(content: string): string {
-  // Step 1: Split concatenated table rows — "| val ||" means end of row + start of next
-  let result = content.replace(/\|\|/g, "|\n|");
-  // Step 2: Per-line — if a line has non-pipe text before a pipe table row, split them
-  const lines = result.split("\n");
-  const processed = lines.map((line) => {
-    const tableStart = line.indexOf("|");
-    if (tableStart > 0) {
-      const tableContent = line.slice(tableStart);
-      // Confirm it looks like a table row (at least 2 pipes)
-      if ((tableContent.match(/\|/g) ?? []).length >= 2) {
-        return line.slice(0, tableStart).trimEnd() + "\n\n" + tableContent;
-      }
-    }
-    return line;
-  });
-  result = processed.join("\n");
-  // Step 3: Ensure blank line before table rows preceded by non-table text (not another row ending with |)
-  result = result.replace(/([^|\n])\n(\|)/g, "$1\n\n$2");
-  return result;
-}
-// 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 navigate = useNavigate();
-  const [sidebarOpen, setSidebarOpen] = useState(true);
   const [chats, setChats] = useState<ChatRoom[]>([]);
   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);
   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");
@@ -233,10 +60,6 @@ export default function Main() {
     }
   }, []);
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [currentChatId, chats]);
   useEffect(() => {
     if (!currentChatId) return;
     const chat = chats.find((c) => c.id === currentChatId);
@@ -248,7 +71,6 @@ export default function Main() {
   const loadRooms = async (userId: string) => {
     setRoomsLoading(true);
-    setRoomsError(null);
     try {
       const apiRooms = await getRooms(userId);
       const mapped: ChatRoom[] = apiRooms.map((r) => ({
@@ -263,10 +85,8 @@ export default function Main() {
       if (mapped.length > 0) {
         setCurrentChatId(mapped[0].id);
       }
-    } catch (err) {
-      setRoomsError(
-        err instanceof Error ? err.message : "Failed to load chats"
-      );
     } finally {
       setRoomsLoading(false);
     }
@@ -284,9 +104,7 @@ export default function Main() {
       }));
       setChats((prev) =>
         prev.map((chat) =>
-          chat.id === roomId
-            ? { ...chat, messages, messagesLoaded: true }
-            : chat
         )
       );
     } catch {
@@ -298,68 +116,66 @@ export default function Main() {
     }
   };
   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) {
-      setCurrentChatId(updatedChats.length > 0 ? updatedChats[0].id : null);
     }
   };
-  const deleteAllChats = async () => {
-    if (!user) return;
-    await Promise.allSettled(
-      chats.map((chat) => deleteRoom(chat.id, user.user_id))
-    );
-    setChats([]);
-    setCurrentChatId(null);
-  };
   const handleLogout = () => {
     localStorage.removeItem("chatbot_user");
     navigate("/login");
   };
-  const handleSend = async () => {
-    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,
-          messagesLoaded: true,
-        };
-        setChats((prev) => [newRoom, ...prev]);
-        roomId = newRoom.id;
-        setCurrentChatId(roomId);
-      } catch {
-        return;
-      }
-    }
     const userMessage: Message = {
       id: crypto.randomUUID(),
       role: "user",
-      content: input,
       timestamp: Date.now(),
     };
@@ -375,10 +191,7 @@ export default function Main() {
       )
     );
-    const sentMessage = input;
-    setInput("");
     setIsStreaming(true);
     const assistantMsgId = crypto.randomUUID();
     setStreamingMsgId(assistantMsgId);
@@ -394,7 +207,7 @@ export default function Main() {
                   role: "assistant",
                   content: "",
                   timestamp: Date.now(),
-                  sources: [],
                 },
               ],
             }
@@ -404,9 +217,13 @@ export default function Main() {
     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();
@@ -464,23 +281,58 @@ export default function Main() {
                     ? {
                         ...chat,
                         messages: chat.messages.map((m) =>
-                          m.id === assistantMsgId
-                            ? { ...m, content: data }
-                            : m
                         ),
                       }
                     : chat
                 )
               );
             } else if (currentEvent === "done") {
               break;
             }
           }
         }
       }
-      // Re-fetch from API after stream ends to get the authoritative
-      // stored content — guarantees formatting matches page-refresh behavior
       await loadRoomMessages(roomId);
     } catch (err: unknown) {
       if ((err as Error).name !== "AbortError") {
         setChats((prev) =>
@@ -492,8 +344,7 @@ export default function Main() {
                     m.id === assistantMsgId
                       ? {
                           ...m,
-                          content:
-                            "Sorry, I couldn't get a response. Please try again.",
                         }
                       : m
                   ),
@@ -506,342 +357,133 @@ export default function Main() {
       setIsStreaming(false);
       setStreamingMsgId(null);
       abortControllerRef.current = null;
     }
-  };
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-  return (
-    <div className="flex h-screen bg-slate-50">
-      {/* Sidebar */}
-      <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
-            onClick={createNewChat}
-            className="w-full flex items-center justify-center gap-2 bg-white/20 hover:bg-white/30 px-3 py-2 rounded-lg transition text-sm"
-          >
-            <Plus className="w-4 h-4" />
-            New Chat
-          </button>
-        </div>
-        <div className="flex-1 overflow-y-auto p-2 space-y-1">
-          {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
-                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" />
-                <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>
-            ))
-          )}
-        </div>
-        <div className="border-t border-white/20 p-3 space-y-2">
-          {chats.length > 0 && (
-            <button
-              onClick={deleteAllChats}
-              className="w-full flex items-center justify-center gap-2 text-red-100 hover:text-white px-3 py-2 rounded-lg hover:bg-white/15 transition text-xs"
-            >
-              <Trash2 className="w-3.5 h-3.5" />
-              Clear All Chats
-            </button>
-          )}
-          <div className="flex items-center gap-2 p-2 rounded-lg bg-white/20">
-            <div className="w-7 h-7 bg-white/30 rounded-full flex items-center justify-center">
-              <User className="w-3.5 h-3.5" />
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="text-xs truncate">{user?.name}</div>
-              <div className="text-[10px] text-white/70 truncate">
-                {user?.email}
-              </div>
-            </div>
-            <button
-              onClick={handleLogout}
-              className="text-white/70 hover:text-white transition"
-              title="Logout"
-            >
-              <LogOut className="w-3.5 h-3.5" />
-            </button>
-          </div>
-        </div>
       </div>
-      {/* Main Content */}
-      <div className="flex-1 flex flex-col min-w-0 relative">
-        {/* ── Subtle background — harmonizes with Login page ── */}
-        <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
-          {/* Dot grid */}
-          <div
-            className="absolute inset-0 opacity-[0.13]"
-            style={{
-              backgroundImage: "radial-gradient(circle, #94a3b8 1px, transparent 1px)",
-              backgroundSize: "28px 28px",
-            }}
-          />
-          {/* Cyan orb — top right */}
-          <div
-            className="absolute -top-28 -right-28 w-80 h-80 rounded-full blur-3xl opacity-[0.08]"
-            style={{ background: "#0ea5e9" }}
-          />
-          {/* Orange orb — bottom left */}
-          <div
-            className="absolute -bottom-28 -left-28 w-96 h-96 rounded-full blur-3xl opacity-[0.07]"
-            style={{ background: "#f97316" }}
-          />
-          {/* Green orb — center left */}
-          <div
-            className="absolute top-1/2 -left-32 w-64 h-64 rounded-full blur-3xl opacity-[0.05]"
-            style={{ background: "#10b981" }}
-          />
-          {/* Neural network — bottom right */}
-          <svg
-            className="absolute bottom-20 right-4 opacity-[0.07]"
-            width="160" height="160" viewBox="0 0 200 200"
-            fill="none" xmlns="http://www.w3.org/2000/svg"
-          >
-            <line x1="20" y1="150" x2="65" y2="90" stroke="#0ea5e9" strokeWidth="1.2"/>
-            <line x1="20" y1="150" x2="55" y2="170" stroke="#0ea5e9" strokeWidth="1.2"/>
-            <line x1="65" y1="90" x2="110" y2="125" stroke="#0ea5e9" strokeWidth="1.2"/>
-            <line x1="65" y1="90" x2="130" y2="55" stroke="#10b981" strokeWidth="1.2"/>
-            <line x1="110" y1="125" x2="170" y2="105" stroke="#0ea5e9" strokeWidth="1.2"/>
-            <line x1="130" y1="55" x2="170" y2="105" stroke="#10b981" strokeWidth="1.2"/>
-            <line x1="130" y1="55" x2="175" y2="30" stroke="#10b981" strokeWidth="1.2"/>
-            <line x1="55" y1="170" x2="110" y2="125" stroke="#0ea5e9" strokeWidth="1.2"/>
-            <line x1="175" y1="30" x2="170" y2="105" stroke="#10b981" strokeWidth="1.2"/>
-            <circle cx="20" cy="150" r="4" fill="#0ea5e9"/>
-            <circle cx="55" cy="170" r="3" fill="#0ea5e9"/>
-            <circle cx="65" cy="90" r="5.5" fill="#0ea5e9"/>
-            <circle cx="110" cy="125" r="4" fill="#0ea5e9"/>
-            <circle cx="130" cy="55" r="5.5" fill="#10b981"/>
-            <circle cx="170" cy="105" r="4" fill="#10b981"/>
-            <circle cx="175" cy="30" r="3" fill="#10b981"/>
-          </svg>
-          {/* Neural network — top left (small) */}
-          <svg
-            className="absolute top-16 left-4 opacity-[0.06]"
-            width="110" height="110" viewBox="0 0 180 180"
-            fill="none" xmlns="http://www.w3.org/2000/svg"
-          >
-            <line x1="160" y1="30" x2="115" y2="80" stroke="#f97316" strokeWidth="1.2"/>
-            <line x1="115" y1="80" x2="70" y2="55" stroke="#f97316" strokeWidth="1.2"/>
-            <line x1="115" y1="80" x2="130" y2="135" stroke="#0ea5e9" strokeWidth="1.2"/>
-            <line x1="70" y1="55" x2="25" y2="90" stroke="#f97316" strokeWidth="1.2"/>
-            <line x1="25" y1="90" x2="80" y2="155" stroke="#0ea5e9" strokeWidth="1.2"/>
-            <line x1="80" y1="155" x2="130" y2="135" stroke="#0ea5e9" strokeWidth="1.2"/>
-            <circle cx="160" cy="30" r="4" fill="#f97316"/>
-            <circle cx="115" cy="80" r="5.5" fill="#f97316"/>
-            <circle cx="70" cy="55" r="4" fill="#f97316"/>
-            <circle cx="130" cy="135" r="3" fill="#0ea5e9"/>
-            <circle cx="25" cy="90" r="4" fill="#0ea5e9"/>
-            <circle cx="80" cy="155" r="3" fill="#0ea5e9"/>
-          </svg>
-        </div>
-        {/* Header */}
-        <div className="relative z-10 bg-white border-b border-slate-200 p-3 flex items-center gap-3">
-          <button
-            onClick={() => setSidebarOpen(!sidebarOpen)}
-            className="text-slate-600 hover:text-slate-900 transition"
-          >
-            {sidebarOpen ? (
-              <X className="w-5 h-5" />
-            ) : (
-              <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
-          </button>
-        </div>
-        {/* Messages */}
-        <div className="relative z-10 flex-1 overflow-y-auto p-4 space-y-4">
-          {currentChat?.messages.length === 0 && (
-            <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" />
-                <h2 className="text-base text-slate-600 mb-1">
-                  Start a conversation
-                </h2>
-                <p className="text-sm text-slate-400">
-                  Send a message to begin chatting
-                </p>
-              </div>
-            </div>
-          )}
-          {currentChat?.messages.map((message) => (
-            <div
-              key={message.id}
-              className={`flex ${
-                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}
-                    >
-                      {streamingMsgId === message.id
-                        ? message.content
-                        : preprocessMarkdown(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>
-                    </div>
-                  )}
-              </div>
-            </div>
-          ))}
-          {!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" />
-                <h2 className="text-base text-slate-600 mb-1">
-                  Welcome to Chatbot
-                </h2>
-                <p className="text-sm text-slate-400">
-                  Create a new chat to get started
-                </p>
-              </div>
-            </div>
-          )}
-          <div ref={messagesEndRef} />
-        </div>
-        {/* Input Area */}
-        <div className="relative z-10 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>
         </div>
       </div>
-      {/* Knowledge Management Modal */}
       <KnowledgeManagement
         open={knowledgeOpen}
         onClose={() => setKnowledgeOpen(false)}
       />
-    </div>
   );
 }

+import { useState, useEffect, useRef, useCallback } from "react";
 import { useNavigate } from "react-router";
+import { Database, Menu } from "lucide-react";
+import { AnimatePresence } from "motion/react";
 import KnowledgeManagement from "./KnowledgeManagement";
 import {
   getRooms,
   streamChat,
   type ChatSource,
 } from "../../services/api";
+import { textToSpeech } from "../../services/voiceApi";
+import { AudioPlayer } from "../../audio/AudioPlayer";
+import ChatLayout from "./chat/ChatLayout";
+import Sidebar from "./chat/Sidebar";
+import ChatWindow from "./chat/ChatWindow";
+import ChatInput from "./chat/ChatInput";
+import VoiceStatusBar from "./chat/VoiceStatusBar";
+import { useVoiceSession } from "../../hooks/useVoiceSession";
+import type { Message, ChatSession, StoredUser } from "./chat/types";
 interface ChatRoom {
   id: string;
   messagesLoaded: boolean;
 }
 export default function Main() {
   const navigate = useNavigate();
   const [chats, setChats] = useState<ChatRoom[]>([]);
   const [currentChatId, setCurrentChatId] = useState<string | null>(null);
   const [isStreaming, setIsStreaming] = useState(false);
   const [streamingMsgId, setStreamingMsgId] = useState<string | null>(null);
   const [roomsLoading, setRoomsLoading] = useState(false);
   const [user, setUser] = useState<StoredUser | null>(null);
   const [knowledgeOpen, setKnowledgeOpen] = useState(false);
+  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const abortControllerRef = useRef<AbortController | null>(null);
+  const ttsPlayerRef = useRef<AudioPlayer | null>(null);
+  const isVoiceActiveRef = useRef(false);
+  // Stable refs so voice callbacks always see the latest values
+  const currentChatIdRef = useRef<string | null>(null);
+  useEffect(() => { currentChatIdRef.current = currentChatId; }, [currentChatId]);
+  const userRef = useRef<StoredUser | null>(null);
+  useEffect(() => { userRef.current = user; }, [user]);
   useEffect(() => {
     const storedUser = localStorage.getItem("chatbot_user");
     }
   }, []);
   useEffect(() => {
     if (!currentChatId) return;
     const chat = chats.find((c) => c.id === currentChatId);
   const loadRooms = async (userId: string) => {
     setRoomsLoading(true);
     try {
       const apiRooms = await getRooms(userId);
       const mapped: ChatRoom[] = apiRooms.map((r) => ({
       if (mapped.length > 0) {
         setCurrentChatId(mapped[0].id);
       }
+    } catch {
+      // silently fail — UI shows empty state
     } finally {
       setRoomsLoading(false);
     }
       }));
       setChats((prev) =>
         prev.map((chat) =>
+          chat.id === roomId ? { ...chat, messages, messagesLoaded: true } : chat
         )
       );
     } catch {
     }
   };
+  // Ensures a chat room exists; creates one for voice if needed.
+  const ensureRoom = useCallback(async (title?: string): Promise<string | null> => {
+    if (currentChatIdRef.current) return currentChatIdRef.current;
+    const currentUser = userRef.current;
+    if (!currentUser) return null;
+    try {
+      const res = await createRoom(currentUser.user_id, title ?? "Voice Session");
+      const newRoom: ChatRoom = {
+        id: res.data.id,
+        title: res.data.title,
+        messages: [],
+        createdAt: res.data.created_at,
+        updatedAt: res.data.updated_at,
+        messagesLoaded: true,
+      };
+      setChats((prev) => [newRoom, ...prev]);
+      setCurrentChatId(newRoom.id);
+      return newRoom.id;
+    } catch {
+      return null;
+    }
+  }, []);
   const currentChat = chats.find((chat) => chat.id === currentChatId);
+  const handleNewChat = () => setCurrentChatId(null);
+  const handleDeleteSession = async (chatId: string) => {
     if (!user) return;
     try {
       await deleteRoom(chatId, user.user_id);
     } catch {
       return;
     }
+    const updated = chats.filter((c) => c.id !== chatId);
+    setChats(updated);
     if (currentChatId === chatId) {
+      setCurrentChatId(updated.length > 0 ? updated[0].id : null);
     }
   };
   const handleLogout = () => {
     localStorage.removeItem("chatbot_user");
     navigate("/login");
   };
+  const handleStop = () => {
+    abortControllerRef.current?.abort();
+  };
+  const handleSend = useCallback(async (text: string) => {
+    if (!user) return;
+    let roomId = await ensureRoom(text.slice(0, 50));
+    if (!roomId) return;
     const userMessage: Message = {
       id: crypto.randomUUID(),
       role: "user",
+      content: text,
       timestamp: Date.now(),
     };
       )
     );
     setIsStreaming(true);
     const assistantMsgId = crypto.randomUUID();
     setStreamingMsgId(assistantMsgId);
                   role: "assistant",
                   content: "",
                   timestamp: Date.now(),
+                  sources: [] as ChatSource[],
                 },
               ],
             }
     abortControllerRef.current = new AbortController();
+    // TTS state — only used when voice is active
+    const audioChunks: ArrayBuffer[] = [];
+    let audioSampleRate = 24000;
+    let ttsChain = Promise.resolve();
+    try {
+      const response = await streamChat(user.user_id, roomId, text);
       if (!response.body) throw new Error("No response body");
       const reader = response.body.getReader();
                     ? {
                         ...chat,
                         messages: chat.messages.map((m) =>
+                          m.id === assistantMsgId ? { ...m, content: data } : m
                         ),
                       }
                     : chat
                 )
               );
+            } else if (currentEvent === "audio" && data && isVoiceActiveRef.current) {
+              // TTS: only during active voice session
+              const sentence = data;
+              ttsChain = ttsChain.then(async () => {
+                try {
+                  const { pcm, sampleRate } = await textToSpeech(sentence);
+                  audioChunks.push(pcm);
+                  audioSampleRate = sampleRate;
+                  if (!ttsPlayerRef.current) {
+                    ttsPlayerRef.current = new AudioPlayer();
+                  }
+                  ttsPlayerRef.current.init(sampleRate);
+                  ttsPlayerRef.current.enqueue(pcm);
+                } catch {
+                  // TTS failure is non-fatal; chat continues
+                }
+              });
             } else if (currentEvent === "done") {
               break;
             }
           }
         }
       }
+      // Wait for all queued TTS calls to finish
+      await ttsChain;
+      // Reload messages from server (may reassign IDs)
       await loadRoomMessages(roomId);
+      // Re-attach audio chunks to the last assistant message after server sync
+      if (audioChunks.length > 0) {
+        setChats((prev) =>
+          prev.map((chat) => {
+            if (chat.id !== roomId) return chat;
+            const msgs = [...chat.messages];
+            for (let i = msgs.length - 1; i >= 0; i--) {
+              if (msgs[i].role === "assistant") {
+                msgs[i] = { ...msgs[i], audioChunks, audioSampleRate };
+                break;
+              }
+            }
+            return { ...chat, messages: msgs };
+          })
+        );
+      }
     } catch (err: unknown) {
       if ((err as Error).name !== "AbortError") {
         setChats((prev) =>
                     m.id === assistantMsgId
                       ? {
                           ...m,
+                          content: "Sorry, I couldn't get a response. Please try again.",
                         }
                       : m
                   ),
       setIsStreaming(false);
       setStreamingMsgId(null);
       abortControllerRef.current = null;
+      ttsPlayerRef.current = null;
     }
+  }, [user, ensureRoom, loadRoomMessages]);
+  // Voice callbacks
+  const handleVoiceTranscript = useCallback(async (text: string) => {
+    // Route the STT transcript through the chatbot (same as typing)
+    await handleSend(text);
+  }, [handleSend]);
+  const { voiceState, start, stop, isActive: isVoiceActive } = useVoiceSession({
+    onTranscript: handleVoiceTranscript,
+    onReply: () => { /* WebSocket reply ignored — chatbot SSE handles response */ },
+    bypassWsTts: true,
+  });
+  // Keep isVoiceActiveRef in sync so handleSend can read it synchronously
+  useEffect(() => { isVoiceActiveRef.current = isVoiceActive; }, [isVoiceActive]);
+  const handleVoiceToggle = useCallback(() => {
+    if (isVoiceActive) stop();
+    else start();
+  }, [isVoiceActive, start, stop]);
+  const sessions: ChatSession[] = chats.map((c) => ({
+    id: c.id,
+    title: c.title,
+    createdAt: c.createdAt,
+    updatedAt: c.updatedAt,
+  }));
+  return (
+    <ChatLayout
+      sidebar={
+        <Sidebar
+          sessions={sessions}
+          activeSessionId={currentChatId}
+          isLoadingSessions={roomsLoading}
+          user={user}
+          onNewChat={handleNewChat}
+          onSelectSession={setCurrentChatId}
+          onDeleteSession={handleDeleteSession}
+          onLogout={handleLogout}
+          mobileOpen={mobileSidebarOpen}
+          onMobileClose={() => setMobileSidebarOpen(false)}
+        />
+      }
+    >
+      {/* Background decoration */}
+      <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
+        <div
+          className="absolute inset-0 opacity-[0.13]"
+          style={{
+            backgroundImage: "radial-gradient(circle, #94a3b8 1px, transparent 1px)",
+            backgroundSize: "28px 28px",
+          }}
+        />
+        <div
+          className="absolute -top-28 -right-28 w-80 h-80 rounded-full blur-3xl opacity-[0.08]"
+          style={{ background: "#0ea5e9" }}
+        />
+        <div
+          className="absolute -bottom-28 -left-28 w-96 h-96 rounded-full blur-3xl opacity-[0.07]"
+          style={{ background: "#f97316" }}
+        />
+        <div
+          className="absolute top-1/2 -left-32 w-64 h-64 rounded-full blur-3xl opacity-[0.05]"
+          style={{ background: "#10b981" }}
+        />
       </div>
+      {/* Header */}
+      <div className="relative z-10 bg-white border-b border-neutral-100 px-4 py-3 flex items-center gap-3">
+        {/* Hamburger — mobile only */}
+        <button
+          className="md:hidden flex-shrink-0 p-1.5 rounded-lg text-neutral-500 hover:text-brand-green hover:bg-brand-green-50 transition-all"
+          onClick={() => setMobileSidebarOpen(true)}
+          aria-label="Open menu"
+        >
+          <Menu className="w-5 h-5" />
+        </button>
+        <h1 className="text-base font-bold text-neutral-900 flex-1 truncate">
+          {currentChat?.title ?? "New Chat"}
+        </h1>
+        <button
+          onClick={() => setKnowledgeOpen(true)}
+          className="flex items-center gap-2 bg-brand-amber text-white px-3 py-2 rounded-lg text-sm font-semibold hover:brightness-105 hover:scale-105 transition-all duration-200 flex-shrink-0"
+        >
+          <Database className="w-4 h-4" />
+          <span className="hidden sm:inline">Knowledge</span>
+        </button>
+      </div>
+      {/* Chat window */}
+      <div className="relative z-10 flex-1 flex flex-col min-h-0">
+        <ChatWindow
+          messages={currentChat?.messages ?? []}
+          isLoading={isStreaming}
+          streamingMsgId={streamingMsgId}
+          userName={user?.name}
+        />
+      </div>
+      {/* Input area */}
+      <div className="relative z-10 border-t border-neutral-100 bg-white/80 backdrop-blur-sm">
+        <div className="w-full max-w-4xl xl:max-w-5xl mx-auto flex flex-col gap-2 px-3 sm:px-4 pt-3 pb-4">
+          <AnimatePresence>
+            {isVoiceActive && (
+              <VoiceStatusBar voiceState={voiceState} onStop={stop} />
+            )}
+          </AnimatePresence>
+          <ChatInput
+            onSend={handleSend}
+            onStop={handleStop}
+            isLoading={isStreaming}
+            voiceState={voiceState}
+            onVoiceToggle={handleVoiceToggle}
+          />
         </div>
       </div>
       <KnowledgeManagement
         open={knowledgeOpen}
         onClose={() => setKnowledgeOpen(false)}
       />
+    </ChatLayout>
   );
 }

src/app/components/chat/ChatInput.tsx ADDED Viewed

	@@ -0,0 +1,107 @@

+import { useState, useRef, useEffect } from "react";
+import { SendHorizontal, Square } from "lucide-react";
+import type { VoiceState } from "../../../hooks/useVoiceSession";
+import VoiceMicButton from "./VoiceMicButton";
+interface ChatInputProps {
+  onSend: (text: string) => void;
+  onStop?: () => void;
+  isLoading: boolean;
+  disabled?: boolean;
+  voiceState: VoiceState;
+  onVoiceToggle: () => void;
+}
+export default function ChatInput({
+  onSend,
+  onStop,
+  isLoading,
+  disabled,
+  voiceState,
+  onVoiceToggle,
+}: ChatInputProps) {
+  const [value, setValue] = useState("");
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const isVoiceActive = voiceState !== "IDLE" && voiceState !== "ERROR";
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = Math.min(el.scrollHeight, 50) + "px";
+  }, [value]);
+  const handleSend = () => {
+    const trimmed = value.trim();
+    if (!trimmed || isLoading || disabled || isVoiceActive) return;
+    onSend(trimmed);
+    setValue("");
+  };
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  const canSend = value.trim().length > 0 && !disabled && !isVoiceActive;
+  return (
+    <div
+      className={`bg-white border rounded-2xl shadow-sm px-4 py-3 transition-all ${
+        disabled || isVoiceActive
+          ? "opacity-80 border-neutral-200"
+          : "border-neutral-200 focus-within:border-brand-green focus-within:shadow-md focus-within:shadow-brand-green/10"
+      }`}
+    >
+      <div className="flex items-end gap-3">
+        <VoiceMicButton
+          voiceState={voiceState}
+          onToggle={onVoiceToggle}
+          disabled={isLoading}
+        />
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder={
+            isVoiceActive
+              ? "Voice session active — speak to interact"
+              : "Ask me anything… (Enter to send, Shift+Enter for newline)"
+          }
+          disabled={isLoading || disabled || isVoiceActive}
+          rows={1}
+          className="flex-1 resize-none bg-transparent text-sm text-neutral-900 leading-6 placeholder:text-neutral-400 outline-none overflow-y-auto"
+          style={{ minHeight: "24px", maxHeight: "50px" }}
+        />
+        {isLoading ? (
+          <button
+            onClick={onStop}
+            className="w-9 h-9 flex-shrink-0 rounded-xl bg-gradient-to-br from-brand-green-light to-brand-green text-white shadow-md shadow-brand-green/25 hover:brightness-105 flex items-center justify-center transition-all"
+            aria-label="Stop"
+          >
+            <Square className="h-3.5 w-3.5" />
+          </button>
+        ) : (
+          <button
+            onClick={handleSend}
+            disabled={!canSend}
+            className={`w-9 h-9 flex-shrink-0 rounded-xl flex items-center justify-center transition-all ${
+              canSend
+                ? "bg-gradient-to-br from-brand-green-light to-brand-green text-white shadow-md shadow-brand-green/25 hover:brightness-105"
+                : "bg-neutral-100 text-neutral-300 cursor-not-allowed"
+            }`}
+            aria-label="Send"
+          >
+            <SendHorizontal className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

src/app/components/chat/ChatLayout.tsx ADDED Viewed

	@@ -0,0 +1,17 @@

+import type { ReactNode } from "react";
+interface ChatLayoutProps {
+  sidebar: ReactNode;
+  children: ReactNode;
+}
+export default function ChatLayout({ sidebar, children }: ChatLayoutProps) {
+  return (
+    <div className="flex h-screen bg-neutral-50 overflow-hidden">
+      {sidebar}
+      <div className="flex-1 flex flex-col min-w-0 relative">
+        {children}
+      </div>
+    </div>
+  );
+}

src/app/components/chat/ChatWindow.tsx ADDED Viewed

	@@ -0,0 +1,83 @@

+import { useEffect, useRef } from "react";
+import { motion } from "motion/react";
+import { Bot } from "lucide-react";
+import type { Message } from "./types";
+import MessageBubble from "./MessageBubble";
+const WELCOME_FEATURES = [
+  { emoji: "📊", title: "Data Analysis", desc: "Get actionable insights and root cause" },
+  { emoji: "🧠", title: "Knowledge Based", desc: "Handbook, SOP, Documents, or Databases" },
+  { emoji: "🎤", title: "Voice Mode", desc: "Ask questions using your voice" },
+  { emoji: "💬", title: "Natural language", desc: "Natural interaction" },
+];
+interface ChatWindowProps {
+  messages: Message[];
+  isLoading: boolean;
+  streamingMsgId: string | null;
+  userName?: string;
+}
+export default function ChatWindow({ messages, isLoading, streamingMsgId, userName }: ChatWindowProps) {
+  const firstName = userName?.split(" ")[0] ?? "";
+  const bottomRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isLoading]);
+  if (messages.length === 0 && !isLoading) {
+    return (
+      <div className="flex-1 overflow-y-auto flex flex-col items-center justify-center gap-6 px-4 sm:px-6 xl:px-8 pb-4">
+        <motion.div
+          className="flex flex-col items-center gap-4 xl:gap-6 w-full max-w-sm sm:max-w-md xl:max-w-2xl"
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.5, ease: "easeOut" }}
+        >
+          <div className="w-20 h-20 xl:w-28 xl:h-28 rounded-3xl bg-gradient-to-br from-brand-green-light to-brand-green shadow-xl shadow-brand-green/25 flex items-center justify-center">
+            <Bot className="h-10 w-10 xl:h-14 xl:w-14 text-white" />
+          </div>
+          <div className="text-center">
+            <h2 className="text-2xl xl:text-4xl font-bold text-neutral-900">
+              {firstName ? `Hi, ${firstName}! 👋` : "Hello! 👋"}
+            </h2>
+            <p className="mt-2 text-neutral-500 text-sm xl:text-base leading-relaxed">
+              Leverage AI to analyze data, learn from patterns, and identify root causes automatically. Maintiva Agent acts as a virtual assistant, helping teams diagnose issues faster and make smarter decisions.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 xl:grid-cols-4 gap-3 xl:gap-4 w-full mt-2">
+            {WELCOME_FEATURES.map((f) => (
+              <div
+                key={f.title}
+                className="flex flex-col gap-1 xl:gap-2 p-3 xl:p-4 rounded-xl bg-white border border-neutral-100 shadow-sm text-left"
+              >
+                <span className="text-xl xl:text-3xl">{f.emoji}</span>
+                <span className="text-sm xl:text-base font-semibold text-neutral-800">{f.title}</span>
+                <span className="text-xs xl:text-sm text-neutral-400">{f.desc}</span>
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    );
+  }
+  return (
+    <div className="flex-1 overflow-y-auto py-4 space-y-1">
+      {/* Constrain message width on large/seminar screens */}
+      <div className="w-full max-w-4xl xl:max-w-5xl mx-auto">
+        {messages.map((message) => (
+          <MessageBubble
+            key={message.id}
+            message={message}
+            isStreamingPlaceholder={streamingMsgId === message.id}
+          />
+        ))}
+        <div ref={bottomRef} />
+      </div>
+    </div>
+  );
+}

src/app/components/chat/FeedbackWidget.tsx ADDED Viewed

	@@ -0,0 +1,146 @@

+import { useState, useRef } from "react";
+import { ThumbsUp, ThumbsDown, Copy, Check, Loader2, Volume2, VolumeX } from "lucide-react";
+import { replayAudio } from "../../../audio/AudioPlayer";
+import { textToSpeech } from "../../../services/voiceApi";
+interface FeedbackWidgetProps {
+  messageId: string;
+  content: string;
+  audioChunks?: ArrayBuffer[];
+  audioSampleRate?: number;
+}
+export default function FeedbackWidget({
+  content,
+  audioChunks,
+  audioSampleRate,
+}: FeedbackWidgetProps) {
+  const [thumbsUp, setThumbsUp] = useState(false);
+  const [thumbsDown, setThumbsDown] = useState(false);
+  const [copyState, setCopyState] = useState<"idle" | "loading" | "success">("idle");
+  const [speakerState, setSpeakerState] = useState<"idle" | "loading" | "playing">("idle");
+  const cancelPlayRef = useRef<(() => void) | null>(null);
+  const handleThumbsUp = () => {
+    setThumbsUp((v) => !v);
+    if (thumbsDown) setThumbsDown(false);
+  };
+  const handleThumbsDown = () => {
+    setThumbsDown((v) => !v);
+    if (thumbsUp) setThumbsUp(false);
+  };
+  const handleCopy = async () => {
+    if (copyState !== "idle") return;
+    setCopyState("loading");
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopyState("success");
+      setTimeout(() => setCopyState("idle"), 2000);
+    } catch {
+      setCopyState("idle");
+    }
+  };
+  const handleSpeaker = async () => {
+    if (speakerState === "playing") {
+      cancelPlayRef.current?.();
+      cancelPlayRef.current = null;
+      setSpeakerState("idle");
+      return;
+    }
+    if (speakerState === "loading") return;
+    if (audioChunks && audioChunks.length > 0) {
+      // Voice mode: replay pre-stored audio immediately
+      setSpeakerState("playing");
+      const cancel = replayAudio(audioChunks, audioSampleRate ?? 24000);
+      cancelPlayRef.current = cancel;
+      // Calculate approx duration to reset state
+      const totalSamples = audioChunks.reduce((acc, c) => acc + c.byteLength / 2, 0);
+      const duration = (totalSamples / (audioSampleRate ?? 24000)) * 1000;
+      setTimeout(() => {
+        cancelPlayRef.current = null;
+        setSpeakerState("idle");
+      }, duration + 200);
+    } else {
+      // Text mode: request TTS now
+      setSpeakerState("loading");
+      try {
+        const { pcm, sampleRate } = await textToSpeech(content);
+        setSpeakerState("playing");
+        const cancel = replayAudio([pcm], sampleRate);
+        cancelPlayRef.current = cancel;
+        const duration = (pcm.byteLength / 2 / sampleRate) * 1000;
+        setTimeout(() => {
+          cancelPlayRef.current = null;
+          setSpeakerState("idle");
+        }, duration + 200);
+      } catch {
+        setSpeakerState("idle");
+      }
+    }
+  };
+  return (
+    <div className="flex items-center gap-1 ml-10 mt-1 px-4">
+      <button
+        onClick={handleThumbsUp}
+        className={`p-1 rounded transition-colors ${
+          thumbsUp ? "text-brand-green" : "text-neutral-300 hover:text-neutral-500"
+        }`}
+        aria-label="Thumbs up"
+      >
+        <ThumbsUp className="h-3.5 w-3.5" />
+      </button>
+      <button
+        onClick={handleThumbsDown}
+        className={`p-1 rounded transition-colors ${
+          thumbsDown ? "text-red-400" : "text-neutral-300 hover:text-neutral-500"
+        }`}
+        aria-label="Thumbs down"
+      >
+        <ThumbsDown className="h-3.5 w-3.5" />
+      </button>
+      <button
+        onClick={handleCopy}
+        className={`p-1 rounded transition-colors ${
+          copyState === "success"
+            ? "text-brand-green"
+            : "text-neutral-300 hover:text-neutral-500"
+        }`}
+        aria-label="Copy message"
+      >
+        {copyState === "loading" ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin text-neutral-400" />
+        ) : copyState === "success" ? (
+          <Check className="h-3.5 w-3.5" />
+        ) : (
+          <Copy className="h-3.5 w-3.5" />
+        )}
+      </button>
+      <button
+        onClick={handleSpeaker}
+        className={`p-1 rounded transition-colors ${
+          speakerState === "playing"
+            ? "text-brand-green"
+            : "text-neutral-300 hover:text-neutral-500"
+        }`}
+        aria-label="Play audio"
+      >
+        {speakerState === "loading" ? (
+          <Loader2 className="h-3.5 w-3.5 animate-spin text-neutral-400" />
+        ) : speakerState === "playing" ? (
+          <VolumeX className="h-3.5 w-3.5" />
+        ) : (
+          <Volume2 className="h-3.5 w-3.5" />
+        )}
+      </button>
+    </div>
+  );
+}

src/app/components/chat/MessageBubble.tsx ADDED Viewed

	@@ -0,0 +1,78 @@

+import { motion } from "motion/react";
+import { Bot } from "lucide-react";
+import type { Message } from "./types";
+import TypingIndicator from "./TypingIndicator";
+import FeedbackWidget from "./FeedbackWidget";
+import MarkdownRenderer from "./renderers/MarkdownRenderer";
+interface MessageBubbleProps {
+  message: Message;
+  isStreamingPlaceholder?: boolean;
+}
+export default function MessageBubble({ message, isStreamingPlaceholder }: MessageBubbleProps) {
+  if (message.role === "user") {
+    return (
+      <motion.div
+        className="flex justify-end px-3 sm:px-4 py-1"
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.3, ease: "easeOut" }}
+      >
+        <div className="max-w-[88%] sm:max-w-[75%] xl:max-w-[65%] px-4 py-3 rounded-2xl rounded-br-sm bg-gradient-to-br from-brand-green-light to-brand-green text-white text-sm xl:text-base leading-relaxed shadow-md shadow-brand-green/20">
+          {message.content}
+        </div>
+      </motion.div>
+    );
+  }
+  // Show TypingIndicator when the assistant placeholder has no content yet
+  if (isStreamingPlaceholder && message.content === "") {
+    return <TypingIndicator />;
+  }
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, ease: "easeOut" }}
+    >
+      <div className="flex gap-3 px-3 sm:px-4 py-2">
+        <div className="w-7 h-7 xl:w-8 xl:h-8 rounded-full bg-gradient-to-br from-brand-green-light to-brand-green flex-shrink-0 flex items-center justify-center shadow-sm">
+          <Bot className="h-4 w-4 text-white" />
+        </div>
+        <div className="max-w-[92%] sm:max-w-[88%] xl:max-w-[80%] bg-white border border-neutral-100 rounded-2xl rounded-tl-sm shadow-sm px-4 xl:px-5 py-3 xl:py-4">
+          <MarkdownRenderer content={message.content} skipPreprocess={isStreamingPlaceholder} />
+          {message.sources && message.sources.length > 0 && (
+            <div className="mt-3 pt-2 border-t border-neutral-100">
+              <p className="text-[10px] text-neutral-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-neutral-100 text-neutral-600 px-2 py-0.5 rounded-full border border-neutral-200"
+                    title={src.page_label ? `Page ${src.page_label}` : undefined}
+                  >
+                    📄 {src.filename}
+                    {src.page_label ? ` p.${src.page_label}` : ""}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+      {!isStreamingPlaceholder && (
+        <FeedbackWidget
+          messageId={message.id}
+          content={message.content}
+          audioChunks={message.audioChunks}
+          audioSampleRate={message.audioSampleRate}
+        />
+      )}
+    </motion.div>
+  );
+}

src/app/components/chat/Sidebar.tsx ADDED Viewed

	@@ -0,0 +1,282 @@

+import { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import {
+  Plus,
+  MessageSquare,
+  Trash2,
+  ChevronLeft,
+  ChevronRight,
+  Settings,
+  LogOut,
+} from "lucide-react";
+import maintivalogoUrl from "../../../assets/maintiva-logo.jpg";
+import type { ChatSession, StoredUser } from "./types";
+interface SidebarProps {
+  sessions: ChatSession[];
+  activeSessionId: string | null;
+  isLoadingSessions: boolean;
+  user: StoredUser | null;
+  onNewChat: () => void;
+  onSelectSession: (id: string) => void;
+  onDeleteSession: (id: string) => void;
+  onLogout: () => void;
+  mobileOpen: boolean;
+  onMobileClose: () => void;
+}
+function formatTime(dateStr: string | null | undefined): string {
+  if (!dateStr) return "";
+  const d = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffDays = Math.floor(diffMs / 86400000);
+  if (diffDays === 0) {
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  }
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return d.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+export default function Sidebar({
+  sessions,
+  activeSessionId,
+  isLoadingSessions,
+  user,
+  onNewChat,
+  onSelectSession,
+  onDeleteSession,
+  onLogout,
+  mobileOpen,
+  onMobileClose,
+}: SidebarProps) {
+  const [collapsed, setCollapsed] = useState(false);
+  const [hoveredSession, setHoveredSession] = useState<string | null>(null);
+  return (
+    <>
+      {/* Mobile backdrop */}
+      <AnimatePresence>
+        {mobileOpen && (
+          <motion.div
+            className="fixed inset-0 bg-black/40 z-40 md:hidden"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            onClick={onMobileClose}
+          />
+        )}
+      </AnimatePresence>
+      <motion.div
+        className={[
+          "flex flex-col h-full flex-shrink-0 bg-white border-r border-neutral-100 overflow-hidden",
+          // Mobile: fixed overlay drawer; desktop: in-flow
+          "fixed inset-y-0 left-0 z-50 md:relative md:inset-auto md:z-auto",
+          // Mobile slide in/out; always visible on desktop
+          mobileOpen ? "translate-x-0" : "-translate-x-full",
+          "md:translate-x-0",
+          // CSS transition for mobile only; framer-motion handles desktop width
+          "transition-transform duration-300 ease-in-out md:transition-none",
+          // Never overflow phone screen
+          "max-w-[85vw] md:max-w-none",
+        ].join(" ")}
+        animate={{ width: collapsed ? 72 : 280 }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+      >
+        {/* Collapse toggle — desktop only */}
+        <button
+          onClick={() => setCollapsed((v) => !v)}
+          className="hidden md:flex absolute -right-3 top-1/2 -translate-y-1/2 z-20 w-6 h-6 rounded-full bg-white border border-neutral-200 shadow-sm text-neutral-500 hover:text-brand-green hover:border-brand-green transition-all items-center justify-center"
+          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          {collapsed ? (
+            <ChevronRight className="h-3.5 w-3.5" />
+          ) : (
+            <ChevronLeft className="h-3.5 w-3.5" />
+          )}
+        </button>
+        {/* Header */}
+        <div className="flex items-center gap-3 px-4 py-4 border-b border-neutral-100">
+          <motion.div
+            className="w-9 h-9 rounded-xl overflow-hidden flex-shrink-0 shadow-md"
+            whileHover={{ scale: 1.05 }}
+          >
+            <img src={maintivalogoUrl} alt="Maintiva" className="w-full h-full object-cover" />
+          </motion.div>
+          <AnimatePresence>
+            {!collapsed && (
+              <motion.div
+                initial={{ opacity: 0, width: 0 }}
+                animate={{ opacity: 1, width: "auto" }}
+                exit={{ opacity: 0, width: 0 }}
+                transition={{ duration: 0.2 }}
+                className="overflow-hidden"
+              >
+                <p className="font-bold text-neutral-900 text-base whitespace-nowrap">Maintiva Agent</p>
+                <p className="text-xs text-neutral-400 whitespace-nowrap">AI Data Assistant</p>
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </div>
+        {/* New Chat button */}
+        <div className="px-3 py-3">
+          <button
+            onClick={() => { onNewChat(); onMobileClose(); }}
+            className={`w-full flex items-center gap-3 rounded-xl px-3 py-2.5 bg-gradient-to-br from-brand-green-light to-brand-green text-white text-sm font-semibold shadow-md shadow-brand-green/20 hover:shadow-lg hover:shadow-brand-green/25 hover:brightness-105 transition-all ${
+              collapsed ? "justify-center px-0" : ""
+            }`}
+          >
+            <Plus className="h-4 w-4 flex-shrink-0" />
+            <AnimatePresence>
+              {!collapsed && (
+                <motion.span
+                  initial={{ opacity: 0, width: 0 }}
+                  animate={{ opacity: 1, width: "auto" }}
+                  exit={{ opacity: 0, width: 0 }}
+                  transition={{ duration: 0.2 }}
+                  className="overflow-hidden whitespace-nowrap"
+                >
+                  New Chat
+                </motion.span>
+              )}
+            </AnimatePresence>
+          </button>
+        </div>
+        {/* Sessions */}
+        <div className="flex-1 overflow-y-auto">
+          {!collapsed && sessions.length > 0 && (
+            <p className="text-xs font-semibold text-neutral-400 uppercase tracking-wider px-4 pt-2 pb-1">
+              Recent
+            </p>
+          )}
+          {isLoadingSessions ? (
+            <div className="flex justify-center py-4">
+              <div className="w-4 h-4 rounded-full border-2 border-brand-green border-t-transparent animate-spin" />
+            </div>
+          ) : (
+            <div className="px-2 space-y-0.5">
+              {sessions.map((session) => {
+                const isActive = session.id === activeSessionId;
+                return (
+                  <div
+                    key={session.id}
+                    className={`relative flex items-center gap-3 rounded-xl px-3 py-2.5 cursor-pointer transition-all duration-150 ${
+                      isActive
+                        ? "bg-brand-green-50 text-brand-green"
+                        : "text-neutral-700 hover:bg-neutral-50"
+                    }`}
+                    onClick={() => { onSelectSession(session.id); onMobileClose(); }}
+                    onMouseEnter={() => setHoveredSession(session.id)}
+                    onMouseLeave={() => setHoveredSession(null)}
+                  >
+                    <MessageSquare
+                      className={`h-4 w-4 flex-shrink-0 ${
+                        isActive ? "text-brand-green" : "text-neutral-400"
+                      }`}
+                    />
+                    <AnimatePresence>
+                      {!collapsed && (
+                        <motion.div
+                          initial={{ opacity: 0, width: 0 }}
+                          animate={{ opacity: 1, width: "auto" }}
+                          exit={{ opacity: 0, width: 0 }}
+                          transition={{ duration: 0.2 }}
+                          className="flex-1 min-w-0 overflow-hidden"
+                        >
+                          <p className="text-sm font-medium truncate">{session.title}</p>
+                          <p className="text-xs text-neutral-400 truncate">
+                            {formatTime(session.updatedAt ?? session.createdAt)}
+                          </p>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                    {!collapsed && hoveredSession === session.id && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          onDeleteSession(session.id);
+                        }}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 rounded-lg text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-all"
+                        aria-label="Delete session"
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </button>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+        {/* Footer */}
+        <div className="border-t border-neutral-100 p-3">
+          <div className="flex items-center gap-3 rounded-xl px-2 py-2">
+            <div className="h-7 w-7 rounded-full bg-gradient-to-br from-brand-green-light to-brand-green flex items-center justify-center flex-shrink-0">
+              <span className="text-xs font-bold text-white">
+                {user?.name?.[0]?.toUpperCase() ?? "U"}
+              </span>
+            </div>
+            <AnimatePresence>
+              {!collapsed && (
+                <motion.div
+                  initial={{ opacity: 0, width: 0 }}
+                  animate={{ opacity: 1, width: "auto" }}
+                  exit={{ opacity: 0, width: 0 }}
+                  transition={{ duration: 0.2 }}
+                  className="flex-1 min-w-0 overflow-hidden"
+                >
+                  <p className="text-sm font-semibold text-neutral-900 truncate whitespace-nowrap">
+                    {user?.name ?? "User"}
+                  </p>
+                  <p className="text-xs text-neutral-400 truncate whitespace-nowrap">
+                    {user?.email ?? ""}
+                  </p>
+                </motion.div>
+              )}
+            </AnimatePresence>
+            {!collapsed && (
+              <div className="flex items-center gap-0.5">
+                <button
+                  className="p-1.5 rounded-lg text-neutral-400 hover:text-brand-green hover:bg-brand-green-50 transition-all"
+                  aria-label="Settings"
+                >
+                  <Settings className="h-4 w-4" />
+                </button>
+                <button
+                  onClick={onLogout}
+                  className="p-1.5 rounded-lg text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-all"
+                  aria-label="Logout"
+                >
+                  <LogOut className="h-4 w-4" />
+                </button>
+              </div>
+            )}
+            {collapsed && (
+              <button
+                onClick={onLogout}
+                className="p-1.5 rounded-lg text-neutral-400 hover:text-red-500 hover:bg-red-50 transition-all"
+                aria-label="Logout"
+              >
+                <LogOut className="h-4 w-4" />
+              </button>
+            )}
+          </div>
+        </div>
+      </motion.div>
+    </>
+  );
+}

src/app/components/chat/TypingIndicator.tsx ADDED Viewed

	@@ -0,0 +1,70 @@

+import { useState, useEffect } from "react";
+import { motion } from "motion/react";
+import { Bot } from "lucide-react";
+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;
+}
+export default function TypingIndicator() {
+  const loadingMessages = useLoadingMessages();
+  const [phraseIndex, setPhraseIndex] = useState(0);
+  useEffect(() => {
+    if (loadingMessages.length === 0) return;
+    setPhraseIndex(Math.floor(Math.random() * loadingMessages.length));
+    const id = setInterval(() => {
+      setPhraseIndex((prev) => {
+        let next: number;
+        do {
+          next = Math.floor(Math.random() * loadingMessages.length);
+        } while (loadingMessages.length > 1 && next === prev);
+        return next;
+      });
+    }, 300);
+    return () => clearInterval(id);
+  }, [loadingMessages]);
+  return (
+    <motion.div
+      className="flex gap-3 px-4 py-2"
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25, ease: "easeOut" }}
+    >
+      <div className="w-7 h-7 rounded-full bg-gradient-to-br from-brand-green-light to-brand-green flex-shrink-0 flex items-center justify-center shadow-sm">
+        <Bot className="h-4 w-4 text-white" />
+      </div>
+      <div className="bg-white border border-neutral-100 rounded-2xl rounded-tl-sm shadow-sm px-4 py-3 min-w-[6rem]">
+        {loadingMessages.length > 0 ? (
+          <span className="text-sm text-neutral-400 font-medium">
+            {loadingMessages[phraseIndex]}…
+          </span>
+        ) : (
+          <div className="flex items-center gap-1.5 animate-pulse">
+            <span className="w-2 h-2 rounded-full bg-neutral-300" />
+            <span className="w-2 h-2 rounded-full bg-neutral-300" style={{ animationDelay: "150ms" }} />
+            <span className="w-2 h-2 rounded-full bg-neutral-300" style={{ animationDelay: "300ms" }} />
+          </div>
+        )}
+      </div>
+    </motion.div>
+  );
+}

src/app/components/chat/VoiceMicButton.tsx ADDED Viewed

	@@ -0,0 +1,93 @@

+import { motion } from "motion/react";
+import { Loader2, Mic, MicOff, Volume2, WifiOff } from "lucide-react";
+import type { VoiceState } from "../../../hooks/useVoiceSession";
+interface VoiceMicButtonProps {
+  voiceState: VoiceState;
+  onToggle: () => void;
+  disabled?: boolean;
+}
+export default function VoiceMicButton({ voiceState, onToggle, disabled }: VoiceMicButtonProps) {
+  const isDisabled = disabled || voiceState === "RECONNECTING";
+  const stateConfig: Record<
+    VoiceState,
+    { icon: React.ReactNode; className: string; title: string; pulse: boolean; scalePulse: boolean }
+  > = {
+    IDLE: {
+      icon: <Mic className="h-4 w-4" />,
+      className: "bg-neutral-100 text-neutral-400 hover:bg-brand-green/10 hover:text-brand-green",
+      title: "Start voice session",
+      pulse: false,
+      scalePulse: false,
+    },
+    CONNECTING: {
+      icon: <Loader2 className="h-4 w-4 animate-spin" />,
+      className: "bg-brand-green/10 text-brand-green/60",
+      title: "Connecting...",
+      pulse: false,
+      scalePulse: false,
+    },
+    LISTENING: {
+      icon: <Mic className="h-4 w-4" />,
+      className: "bg-brand-green text-white shadow-md shadow-brand-green/25",
+      title: "Listening — click to stop",
+      pulse: true,
+      scalePulse: false,
+    },
+    PROCESSING: {
+      icon: <Loader2 className="h-4 w-4 animate-spin" />,
+      className: "bg-brand-amber text-white",
+      title: "Processing...",
+      pulse: false,
+      scalePulse: false,
+    },
+    SPEAKING: {
+      icon: <Volume2 className="h-4 w-4" />,
+      className: "bg-brand-cyan text-white",
+      title: "Agent is speaking — click to stop",
+      pulse: false,
+      scalePulse: true,
+    },
+    RECONNECTING: {
+      icon: <WifiOff className="h-4 w-4" />,
+      className: "bg-neutral-200 text-neutral-400 cursor-not-allowed",
+      title: "Reconnecting...",
+      pulse: false,
+      scalePulse: false,
+    },
+    ERROR: {
+      icon: <MicOff className="h-4 w-4" />,
+      className: "bg-red-100 text-red-400 hover:bg-red-200",
+      title: "Connection failed — click to retry",
+      pulse: false,
+      scalePulse: false,
+    },
+  };
+  const cfg = stateConfig[voiceState];
+  return (
+    <div className="relative flex-shrink-0">
+      {cfg.pulse && (
+        <motion.span
+          className="absolute inset-0 rounded-xl bg-brand-green/30"
+          animate={{ scale: [1, 1.6], opacity: [0.6, 0] }}
+          transition={{ duration: 1.2, repeat: Infinity, ease: "easeOut" }}
+        />
+      )}
+      <motion.button
+        onClick={onToggle}
+        disabled={isDisabled}
+        title={cfg.title}
+        animate={cfg.scalePulse ? { scale: [1, 1.05, 1] } : { scale: 1 }}
+        transition={cfg.scalePulse ? { duration: 1.4, repeat: Infinity, ease: "easeInOut" } : {}}
+        className={`relative w-9 h-9 rounded-xl flex items-center justify-center transition-all duration-200 ${cfg.className} ${isDisabled ? "pointer-events-none" : ""}`}
+        aria-label={cfg.title}
+      >
+        {cfg.icon}
+      </motion.button>
+    </div>
+  );
+}

src/app/components/chat/VoiceStatusBar.tsx ADDED Viewed

	@@ -0,0 +1,75 @@

+import { X } from "lucide-react";
+import { motion } from "motion/react";
+import type { VoiceState } from "../../../hooks/useVoiceSession";
+interface VoiceStatusBarProps {
+  voiceState: VoiceState;
+  onStop: () => void;
+}
+const STATE_LABELS: Record<VoiceState, string> = {
+  IDLE: "",
+  CONNECTING: "Connecting...",
+  LISTENING: "Listening...",
+  PROCESSING: "Processing...",
+  SPEAKING: "Agent is speaking",
+  RECONNECTING: "Reconnecting...",
+  ERROR: "Connection error",
+};
+const STATE_COLORS: Record<VoiceState, string> = {
+  IDLE: "",
+  CONNECTING: "bg-brand-green/10 text-brand-green border-brand-green/20",
+  LISTENING: "bg-brand-green/10 text-brand-green border-brand-green/20",
+  PROCESSING: "bg-brand-amber/10 text-brand-amber border-brand-amber/20",
+  SPEAKING: "bg-brand-cyan/10 text-brand-cyan border-brand-cyan/20",
+  RECONNECTING: "bg-neutral-100 text-neutral-500 border-neutral-200",
+  ERROR: "bg-red-50 text-red-500 border-red-200",
+};
+export default function VoiceStatusBar({ voiceState, onStop }: VoiceStatusBarProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: 6 }}
+      transition={{ duration: 0.2 }}
+      className={`flex items-center justify-between gap-2 px-3 py-1.5 rounded-xl border text-xs font-medium ${STATE_COLORS[voiceState]}`}
+    >
+      <div className="flex items-center gap-2">
+        <span className="relative flex h-2 w-2">
+          <span
+            className={`animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 ${
+              voiceState === "LISTENING"
+                ? "bg-brand-green"
+                : voiceState === "SPEAKING"
+                ? "bg-brand-cyan"
+                : voiceState === "PROCESSING"
+                ? "bg-brand-amber"
+                : "bg-neutral-400"
+            }`}
+          />
+          <span
+            className={`relative inline-flex rounded-full h-2 w-2 ${
+              voiceState === "LISTENING"
+                ? "bg-brand-green"
+                : voiceState === "SPEAKING"
+                ? "bg-brand-cyan"
+                : voiceState === "PROCESSING"
+                ? "bg-brand-amber"
+                : "bg-neutral-400"
+            }`}
+          />
+        </span>
+        <span>{STATE_LABELS[voiceState]}</span>
+      </div>
+      <button
+        onClick={onStop}
+        className="p-0.5 rounded hover:bg-black/10 transition-colors"
+        aria-label="End voice session"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+    </motion.div>
+  );
+}

src/app/components/chat/renderers/MarkdownRenderer.tsx ADDED Viewed

	@@ -0,0 +1,126 @@

+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";
+function preprocessMarkdown(content: string): string {
+  let result = content.replace(/\|\|/g, "|\n|");
+  const lines = result.split("\n");
+  const processed = lines.map((line) => {
+    const tableStart = line.indexOf("|");
+    if (tableStart > 0) {
+      const tableContent = line.slice(tableStart);
+      if ((tableContent.match(/\|/g) ?? []).length >= 2) {
+        return line.slice(0, tableStart).trimEnd() + "\n\n" + tableContent;
+      }
+    }
+    return line;
+  });
+  result = processed.join("\n");
+  result = result.replace(/([^|\n])\n(\|)/g, "$1\n\n$2");
+  return result;
+}
+const components: Components = {
+  p: ({ children }) => (
+    <p className="text-sm text-neutral-800 leading-relaxed mb-3 last:mb-0">{children}</p>
+  ),
+  h1: ({ children }) => (
+    <h1 className="text-xl font-bold text-neutral-900 mt-4 mb-2 first:mt-0">{children}</h1>
+  ),
+  h2: ({ children }) => (
+    <h2 className="text-lg font-semibold text-neutral-800 mt-4 mb-2 first:mt-0">{children}</h2>
+  ),
+  h3: ({ children }) => (
+    <h3 className="text-base font-semibold text-neutral-700 mt-3 mb-1.5 first:mt-0">{children}</h3>
+  ),
+  ul: ({ children }) => (
+    <ul className="list-disc list-outside pl-5 mb-3 space-y-1 text-sm text-neutral-800">{children}</ul>
+  ),
+  ol: ({ children }) => (
+    <ol className="list-decimal list-outside pl-5 mb-3 space-y-1 text-sm text-neutral-800">{children}</ol>
+  ),
+  li: ({ children }) => <li className="leading-relaxed">{children}</li>,
+  code: ({ children, className }) => {
+    const isBlock = className?.startsWith("language-");
+    const language = className?.replace("language-", "") ?? "";
+    if (isBlock) {
+      return (
+        <div className="my-3 rounded-xl overflow-hidden border border-neutral-200">
+          {language && (
+            <div className="bg-neutral-50 border-b border-neutral-200 px-4 py-2">
+              <span className="text-xs font-mono text-neutral-500">{language}</span>
+            </div>
+          )}
+          <div className="p-4 bg-neutral-50 overflow-x-auto">
+            <code className="text-xs font-mono leading-relaxed text-neutral-800 whitespace-pre">
+              {children}
+            </code>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <code className="px-1.5 py-0.5 rounded-md bg-neutral-100 text-brand-green font-mono text-xs">
+        {children}
+      </code>
+    );
+  },
+  pre: ({ children }) => <>{children}</>,
+  blockquote: ({ children }) => (
+    <blockquote className="border-l-4 border-brand-green pl-4 py-1 my-3 text-sm text-neutral-600 italic bg-brand-green-50 rounded-r-xl">
+      {children}
+    </blockquote>
+  ),
+  a: ({ children, href }) => (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-brand-green underline underline-offset-2 hover:text-brand-green/80 transition-colors"
+    >
+      {children}
+    </a>
+  ),
+  strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+  hr: () => <hr className="border-neutral-200 my-3" />,
+  table: ({ children }) => (
+    <div className="my-3 overflow-x-auto rounded-xl border border-neutral-200 shadow-sm">
+      <table className="w-full text-sm border-collapse">{children}</table>
+    </div>
+  ),
+  thead: ({ children }) => (
+    <thead className="bg-neutral-50 border-b border-neutral-200">{children}</thead>
+  ),
+  th: ({ children }) => (
+    <th className="px-4 py-3 text-left text-xs font-semibold text-neutral-600 uppercase tracking-wider">
+      {children}
+    </th>
+  ),
+  td: ({ children }) => (
+    <td className="px-4 py-3 text-sm text-neutral-800 border-b border-neutral-100">{children}</td>
+  ),
+  tr: ({ children }) => (
+    <tr className="hover:bg-neutral-50 transition-colors">{children}</tr>
+  ),
+};
+interface MarkdownRendererProps {
+  content: string;
+  skipPreprocess?: boolean;
+}
+export default function MarkdownRenderer({ content, skipPreprocess }: MarkdownRendererProps) {
+  const processed = skipPreprocess ? content : preprocessMarkdown(content);
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex]}
+      components={components}
+    >
+      {processed}
+    </ReactMarkdown>
+  );
+}

src/app/components/chat/types.ts ADDED Viewed

	@@ -0,0 +1,26 @@

+import type { ChatSource } from "../../../services/api";
+export interface Message {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+  timestamp: number;
+  sources?: ChatSource[];
+  /** PCM audio chunks from TTS — only populated when sent via voice mode */
+  audioChunks?: ArrayBuffer[];
+  audioSampleRate?: number;
+}
+export interface ChatSession {
+  id: string;
+  title: string;
+  createdAt: string;
+  updatedAt: string | null;
+}
+export interface StoredUser {
+  user_id: string;
+  email: string;
+  name: string;
+  loginTime: string;
+}

src/assets/maintiva-logo.jpg ADDED Viewed

src/audio/AudioPlayer.ts ADDED Viewed

	@@ -0,0 +1,81 @@

+const DEFAULT_SAMPLE_RATE = 16000;
+const BUFFER_THRESHOLD_BYTES = 6400; // 200ms = 2 chunks before starting playback
+export class AudioPlayer {
+  private context: AudioContext | null = null;
+  private nextPlayTime = 0;
+  private started = false;
+  private pendingBytes = 0;
+  init(sampleRate = DEFAULT_SAMPLE_RATE): void {
+    if (this.context) return;
+    this.context = new AudioContext({ sampleRate });
+    this.nextPlayTime = 0;
+    this.started = false;
+    this.pendingBytes = 0;
+  }
+  enqueue(rawPcm: ArrayBuffer): void {
+    if (!this.context) return;
+    const int16 = new Int16Array(rawPcm);
+    const float32 = new Float32Array(int16.length);
+    for (let i = 0; i < int16.length; i++) {
+      float32[i] = int16[i] / 32768;
+    }
+    const audioBuffer = this.context.createBuffer(1, float32.length, PLAYBACK_SAMPLE_RATE);
+    audioBuffer.copyToChannel(float32, 0);
+    this.pendingBytes += rawPcm.byteLength;
+    if (!this.started && this.pendingBytes >= BUFFER_THRESHOLD_BYTES) {
+      this.started = true;
+      this.nextPlayTime = this.context.currentTime;
+    }
+    if (this.started) {
+      const source = this.context.createBufferSource();
+      source.buffer = audioBuffer;
+      source.connect(this.context.destination);
+      source.start(this.nextPlayTime);
+      this.nextPlayTime += audioBuffer.duration;
+    }
+  }
+  drain(): void {
+    // Let queued buffers play out — nothing to do, the AudioContext schedule handles it
+  }
+  stopImmediately(): void {
+    if (!this.context) return;
+    this.context.close();
+    this.context = null;
+    this.nextPlayTime = 0;
+    this.started = false;
+    this.pendingBytes = 0;
+  }
+}
+export function replayAudio(
+  chunks: ArrayBuffer[],
+  sampleRate: number
+): () => void {
+  const ctx = new AudioContext({ sampleRate });
+  let nextTime = ctx.currentTime + 0.05;
+  for (const chunk of chunks) {
+    const int16 = new Int16Array(chunk);
+    const float32 = new Float32Array(int16.length);
+    for (let i = 0; i < int16.length; i++) float32[i] = int16[i] / 32768;
+    const buf = ctx.createBuffer(1, float32.length, sampleRate);
+    buf.copyToChannel(float32, 0);
+    const src = ctx.createBufferSource();
+    src.buffer = buf;
+    src.connect(ctx.destination);
+    src.start(nextTime);
+    nextTime += buf.duration;
+  }
+  return () => ctx.close();
+}

src/audio/AudioRecorder.ts ADDED Viewed

	@@ -0,0 +1,68 @@

+const TARGET_SAMPLE_RATE = 16000;
+const CHUNK_SAMPLES = 3200; // 100ms at 16kHz
+export class AudioRecorder {
+  private context: AudioContext | null = null;
+  private stream: MediaStream | null = null;
+  private processor: ScriptProcessorNode | null = null;
+  private accumulator: Float32Array = new Float32Array(0);
+  micLevel = 0;
+  async start(onChunk: (pcm: ArrayBuffer) => void): Promise<void> {
+    this.stream = await navigator.mediaDevices.getUserMedia({
+      audio: {
+        sampleRate: TARGET_SAMPLE_RATE,
+        channelCount: 1,
+        echoCancellation: true,
+        noiseSuppression: true,
+      },
+    });
+    this.context = new AudioContext({ sampleRate: TARGET_SAMPLE_RATE });
+    const source = this.context.createMediaStreamSource(this.stream);
+    // bufferSize 512 → fires every ~32ms at 16kHz; we accumulate to 100ms
+    this.processor = this.context.createScriptProcessor(512, 1, 1);
+    this.processor.onaudioprocess = (e) => {
+      const input = e.inputBuffer.getChannelData(0);
+      const combined = new Float32Array(this.accumulator.length + input.length);
+      combined.set(this.accumulator);
+      combined.set(input, this.accumulator.length);
+      this.accumulator = combined;
+      while (this.accumulator.length >= CHUNK_SAMPLES) {
+        const chunk = this.accumulator.slice(0, CHUNK_SAMPLES);
+        this.accumulator = this.accumulator.slice(CHUNK_SAMPLES);
+        // RMS for barge-in detection
+        let sumSq = 0;
+        for (let i = 0; i < chunk.length; i++) sumSq += chunk[i] * chunk[i];
+        this.micLevel = Math.sqrt(sumSq / chunk.length) * 32767;
+        // Convert float32 → int16 PCM
+        const int16 = new Int16Array(chunk.length);
+        for (let i = 0; i < chunk.length; i++) {
+          const s = Math.max(-1, Math.min(1, chunk[i]));
+          int16[i] = s < 0 ? s * 32768 : s * 32767;
+        }
+        onChunk(int16.buffer);
+      }
+    };
+    source.connect(this.processor);
+    this.processor.connect(this.context.destination);
+  }
+  stop(): void {
+    this.processor?.disconnect();
+    this.processor = null;
+    this.stream?.getTracks().forEach((t) => t.stop());
+    this.stream = null;
+    this.context?.close();
+    this.context = null;
+    this.accumulator = new Float32Array(0);
+    this.micLevel = 0;
+  }
+}

src/hooks/useVoiceSession.ts ADDED Viewed

	@@ -0,0 +1,274 @@

+import { useState, useRef, useEffect, useCallback } from "react";
+import { AudioRecorder } from "../audio/AudioRecorder";
+import { AudioPlayer } from "../audio/AudioPlayer";
+export type VoiceState =
+  | "IDLE"
+  | "CONNECTING"
+  | "LISTENING"
+  | "PROCESSING"
+  | "SPEAKING"
+  | "RECONNECTING"
+  | "ERROR";
+interface UseVoiceSessionOptions {
+  onTranscript: (text: string) => void;
+  onReply: (text: string) => void;
+  onError?: (code: string, message: string) => void;
+  /** When true, binary TTS audio frames from the WebSocket are ignored. */
+  bypassWsTts?: boolean;
+}
+export interface UseVoiceSessionReturn {
+  voiceState: VoiceState;
+  start: () => Promise<void>;
+  stop: () => void;
+  isActive: boolean;
+}
+const BARGE_IN_THRESHOLD = 500;
+const MAX_RECONNECT_ATTEMPTS = 10;
+const HEARTBEAT_INTERVAL_MS = 20_000;
+const PONG_TIMEOUT_MS = 5_000;
+function getWsUrl(): string {
+  return (import.meta as unknown as { env: Record<string, string> }).env
+    .VITE_API_BASE_VOICE_WS_URL ?? "wss://localhost:7861/ws/voice";
+}
+export function useVoiceSession(opts: UseVoiceSessionOptions): UseVoiceSessionReturn {
+  const [voiceState, setVoiceState] = useState<VoiceState>("IDLE");
+  const stateRef = useRef<VoiceState>("IDLE");
+  const wsRef = useRef<WebSocket | null>(null);
+  const recorderRef = useRef<AudioRecorder | null>(null);
+  const playerRef = useRef<AudioPlayer | null>(null);
+  const heartbeatTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const pongTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const rafRef = useRef<number | null>(null);
+  const reconnectAttemptRef = useRef(0);
+  // Keep opts in a ref so callbacks never go stale
+  const optsRef = useRef(opts);
+  useEffect(() => { optsRef.current = opts; });
+  const setState = useCallback((s: VoiceState) => {
+    stateRef.current = s;
+    setVoiceState(s);
+  }, []);
+  const clearHeartbeat = useCallback(() => {
+    if (heartbeatTimerRef.current) clearInterval(heartbeatTimerRef.current);
+    if (pongTimeoutRef.current) clearTimeout(pongTimeoutRef.current);
+    heartbeatTimerRef.current = null;
+    pongTimeoutRef.current = null;
+  }, []);
+  const stopBargeInLoop = useCallback(() => {
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+  }, []);
+  const closeWs = useCallback(() => {
+    if (wsRef.current) {
+      wsRef.current.onopen = null;
+      wsRef.current.onmessage = null;
+      wsRef.current.onerror = null;
+      wsRef.current.onclose = null;
+      wsRef.current.close();
+      wsRef.current = null;
+    }
+  }, []);
+  const stopSession = useCallback(() => {
+    stopBargeInLoop();
+    clearHeartbeat();
+    if (wsRef.current?.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ action: "stop" }));
+    }
+    closeWs();
+    recorderRef.current?.stop();
+    playerRef.current?.stopImmediately();
+    reconnectAttemptRef.current = 0;
+    setState("IDLE");
+  }, [clearHeartbeat, closeWs, setState, stopBargeInLoop]);
+  const startBargeInLoop = useCallback(() => {
+    const check = () => {
+      if (stateRef.current !== "SPEAKING") {
+        rafRef.current = null;
+        return;
+      }
+      const level = recorderRef.current?.micLevel ?? 0;
+      if (level > BARGE_IN_THRESHOLD && wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ action: "interrupt" }));
+        playerRef.current?.stopImmediately();
+        playerRef.current?.init();
+      }
+      rafRef.current = requestAnimationFrame(check);
+    };
+    rafRef.current = requestAnimationFrame(check);
+  }, []);
+  const startHeartbeat = useCallback(() => {
+    clearHeartbeat();
+    heartbeatTimerRef.current = setInterval(() => {
+      if (wsRef.current?.readyState === WebSocket.OPEN) {
+        wsRef.current.send(JSON.stringify({ action: "ping" }));
+        pongTimeoutRef.current = setTimeout(() => {
+          // No pong received — reconnect
+          wsRef.current?.close();
+        }, PONG_TIMEOUT_MS);
+      }
+    }, HEARTBEAT_INTERVAL_MS);
+  }, [clearHeartbeat]);
+  const openWebSocket = useCallback(() => {
+    closeWs();
+    const ws = new WebSocket(getWsUrl());
+    ws.binaryType = "arraybuffer";
+    wsRef.current = ws;
+    ws.onopen = () => {
+      reconnectAttemptRef.current = 0;
+      setState("LISTENING");
+      startHeartbeat();
+    };
+    ws.onmessage = (event) => {
+      if (event.data instanceof ArrayBuffer) {
+        // Binary frame = TTS audio chunk from voice backend
+        if (!optsRef.current.bypassWsTts) {
+          if (stateRef.current === "SPEAKING" || stateRef.current === "PROCESSING") {
+            if (stateRef.current === "PROCESSING") {
+              setState("SPEAKING");
+              startBargeInLoop();
+            }
+            playerRef.current?.enqueue(event.data);
+          }
+        }
+        return;
+      }
+      try {
+        const msg = JSON.parse(event.data as string);
+        switch (msg.event) {
+          case "transcript":
+            if (!msg.is_partial) {
+              setState("PROCESSING");
+              stopBargeInLoop();
+              optsRef.current.onTranscript(msg.text as string);
+            }
+            break;
+          case "reply":
+            optsRef.current.onReply(msg.text as string);
+            playerRef.current?.init();
+            break;
+          case "tts_end":
+            playerRef.current?.drain();
+            setState("LISTENING");
+            stopBargeInLoop();
+            break;
+          case "interrupted":
+            playerRef.current?.stopImmediately();
+            setState("LISTENING");
+            stopBargeInLoop();
+            break;
+          case "pong":
+            if (pongTimeoutRef.current) clearTimeout(pongTimeoutRef.current);
+            break;
+          case "error":
+            optsRef.current.onError?.(msg.code as string, msg.message as string);
+            break;
+        }
+      } catch {
+        // non-JSON frame — ignore
+      }
+    };
+    ws.onerror = () => {
+      // onclose will fire next and handle reconnect
+    };
+    ws.onclose = () => {
+      clearHeartbeat();
+      stopBargeInLoop();
+      recorderRef.current?.stop();
+      if (stateRef.current === "IDLE") return; // intentional stop
+      // Reconnect with exponential backoff
+      if (reconnectAttemptRef.current >= MAX_RECONNECT_ATTEMPTS) {
+        setState("ERROR");
+        return;
+      }
+      setState("RECONNECTING");
+      const delay = Math.min(Math.pow(2, reconnectAttemptRef.current), 8) * 1000;
+      reconnectAttemptRef.current++;
+      setTimeout(async () => {
+        if (stateRef.current !== "RECONNECTING") return;
+        try {
+          if (!recorderRef.current) recorderRef.current = new AudioRecorder();
+          await recorderRef.current.start((chunk) => {
+            if (wsRef.current?.readyState === WebSocket.OPEN) {
+              wsRef.current.send(chunk);
+            }
+          });
+          setState("CONNECTING");
+          openWebSocket();
+        } catch {
+          setState("ERROR");
+        }
+      }, delay);
+    };
+  }, [clearHeartbeat, closeWs, setState, startBargeInLoop, startHeartbeat, stopBargeInLoop]);
+  const start = useCallback(async () => {
+    if (stateRef.current !== "IDLE" && stateRef.current !== "ERROR") return;
+    setState("CONNECTING");
+    try {
+      if (!recorderRef.current) recorderRef.current = new AudioRecorder();
+      if (!playerRef.current) playerRef.current = new AudioPlayer();
+      await recorderRef.current.start((chunk) => {
+        if (wsRef.current?.readyState === WebSocket.OPEN) {
+          wsRef.current.send(chunk);
+        }
+      });
+      // Init player inside user-gesture chain to satisfy autoplay policy
+      playerRef.current.init();
+      openWebSocket();
+    } catch {
+      recorderRef.current?.stop();
+      setState("ERROR");
+    }
+  }, [openWebSocket, setState]);
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      stopSession();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return {
+    voiceState,
+    start,
+    stop: stopSession,
+    isActive: voiceState !== "IDLE" && voiceState !== "ERROR",
+  };
+}

src/services/api.ts CHANGED Viewed

@@ -48,7 +48,7 @@ export interface RoomDetail extends Room {
   messages: RoomMessage[];
 }
-export type DocumentStatus = "pending" | "processing" | "completed" | "failed";
 export interface ApiDocument {
   id: string;
@@ -231,6 +231,14 @@ export const ingestDatabaseClient = (clientId: string, userId: string): Promise<
     { method: "POST" }
   );
 // ─── Chat ─────────────────────────────────────────────────────────────────────
 export const streamChat = (

   messages: RoomMessage[];
 }
+export type DocumentStatus = "uploaded" | "processing" | "completed" | "failed";
 export interface ApiDocument {
   id: string;
     { method: "POST" }
   );
+// ─── Knowledge (Admin) ────────────────────────────────────────────────────────
+export const rebuildKnowledge = (userId: string) =>
+  request<{ status: string; message: string }>(
+    `/api/v1/knowledge/rebuild?user_id=${userId}`,
+    { method: "POST" }
+  );
 // ─── Chat ─────────────────────────────────────────────────────────────────────
 export const streamChat = (

src/services/voiceApi.ts ADDED Viewed

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

+const VOICE_BASE_URL =
+  (import.meta as unknown as { env: Record<string, string> }).env
+    .VITE_API_BASE_VOICE_URL ?? "http://localhost:7860";
+export async function textToSpeech(
+  text: string,
+  provider = "gemini"
+): Promise<{ pcm: ArrayBuffer; sampleRate: number }> {
+  const response = await fetch(`${VOICE_BASE_URL}/tts`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ text, provider }),
+  });
+  if (!response.ok) throw new Error(`TTS error: ${response.status}`);
+  const sampleRate = parseInt(
+    response.headers.get("X-Sample-Rate") ?? "24000",
+    10
+  );
+  const pcm = await response.arrayBuffer();
+  return { pcm, sampleRate };
+}

src/styles/theme.css CHANGED Viewed

@@ -2,6 +2,8 @@
 :root {
   --font-size: 16px;
   --background: #ffffff;
   --foreground: oklch(0.145 0 0);
   --card: #ffffff;
@@ -117,6 +119,12 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 }
 @layer base {
@@ -126,8 +134,16 @@
   body {
     @apply bg-background text-foreground;
   }
   /**
   * Default typography styles for HTML elements (h1-h4, p, label, button, input).
   * These are in @layer base, so Tailwind utility classes (like text-sm, text-lg) automatically override them.
@@ -135,6 +151,7 @@
   html {
     font-size: var(--font-size);
   }
   h1 {

 :root {
   --font-size: 16px;
+  --brand-green: #18AF4A;
+  --brand-green-light: #1EC75A;
   --background: #ffffff;
   --foreground: oklch(0.145 0 0);
   --card: #ffffff;
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --color-brand-green: var(--brand-green);
+  --color-brand-green-light: var(--brand-green-light);
+  --color-brand-green-50: #F0FDF5;
+  --color-brand-green-100: #BBF7D0;
+  --color-brand-amber: #F5A623;
+  --color-brand-cyan: #48C8E8;
 }
 @layer base {
   body {
     @apply bg-background text-foreground;
+    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
   }
+  ::-webkit-scrollbar { width: 6px; height: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }
   /**
   * Default typography styles for HTML elements (h1-h4, p, label, button, input).
   * These are in @layer base, so Tailwind utility classes (like text-sm, text-lg) automatically override them.
   html {
     font-size: var(--font-size);
+    scroll-behavior: smooth;
   }
   h1 {

src/vite-env.d.ts ADDED Viewed

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

+/// <reference types="vite/client" />
+declare module "*.jpg" {
+  const src: string;
+  export default src;
+}
+declare module "*.jpeg" {
+  const src: string;
+  export default src;
+}
+declare module "*.png" {
+  const src: string;
+  export default src;
+}
+declare module "*.svg" {
+  const src: string;
+  export default src;
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}