From f22a187148272494c2767a57efb122b06e475745 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Wed, 15 Apr 2026 01:31:29 -0600
Subject: [PATCH 1/2] always show chat sidebar

---
 web/app/chat/page.js | 81 +++++++++++++++++++++++---------------------
 1 file changed, 42 insertions(+), 39 deletions(-)

diff --git a/web/app/chat/page.js b/web/app/chat/page.js
index 0bc1bf26..74a2834e 100644
--- a/web/app/chat/page.js
+++ b/web/app/chat/page.js
@@ -22,7 +22,6 @@ function ChatPage() {
   const [error, setError] = useState(null);
   const [conversations, setConversations] = useState([]);
   const [convsLoading, setConvsLoading] = useState(false);
-  const [showSidebar, setShowSidebar] = useState(false);
   const [selectedFile, setSelectedFile] = useState(null);
 
   const messagesEndRef = useRef(null);
@@ -172,13 +171,17 @@ function ChatPage() {
       }
 
       if (!convId) {
+        await fetchConversations();
         setLoadingConv(false);
         setConversation(null);
         return;
       }
 
-      await fetchConversation(convId);
-      await fetchMessages(convId);
+      await Promise.all([
+        fetchConversation(convId),
+        fetchMessages(convId),
+        fetchConversations(),
+      ]);
       setLoadingConv(false);
       startPolling(convId);
     }
@@ -188,11 +191,7 @@ function ChatPage() {
     return () => {
       if (pollRef.current) clearInterval(pollRef.current);
     };
-  }, [token, authLoading, conversationIdParam, fetchConversation, fetchMessages, startPolling]);
-
-  useEffect(() => {
-    if (showSidebar && token) fetchConversations();
-  }, [showSidebar, token, fetchConversations]);
+  }, [token, authLoading, conversationIdParam, fetchConversation, fetchMessages, startPolling, fetchConversations]);
 
   async function handleSend(e) {
     e?.preventDefault();
@@ -334,7 +333,7 @@ function ChatPage() {
       });
 
       setConversation(conv);
-      await fetchMessages(conv.id);
+      await Promise.all([fetchMessages(conv.id), fetchConversations()]);
       setLoadingConv(false);
       startPolling(conv.id);
       router.replace(`/chat?id=${conv.id}`, { scroll: false });
@@ -354,7 +353,26 @@ function ChatPage() {
     setLoadingConv(false);
     startPolling(convId);
     router.replace(`/chat?id=${convId}`, { scroll: false });
-    setShowSidebar(false);
+  }
+
+  async function handleCloseConversation() {
+    if (!conversation || conversation.status === "CLOSED") return;
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${conversation.id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ status: "CLOSED" }),
+      });
+      if (!res.ok) return;
+      const updated = await res.json();
+      setConversation(updated);
+      await fetchConversations();
+    } catch {
+      // silent
+    }
   }
 
   if (authLoading || loadingConv) {
@@ -392,11 +410,9 @@ function ChatPage() {
 
       <section style={s.chatSection}>
         <div style={{ display: "flex", gap: "1rem", alignItems: "flex-start" }}>
-        {showSidebar && (
           <div style={s.sidebar}>
             <div style={s.sidebarHeader}>
               <span style={s.sidebarTitle}>All Conversations</span>
-              <button style={s.sidebarClose} onClick={() => setShowSidebar(false)}>✕</button>
             </div>
             {convsLoading && <p style={s.sidebarEmpty}>Loading...</p>}
             {!convsLoading && conversations.length === 0 && (
@@ -422,12 +438,11 @@ function ChatPage() {
                 </button>
               ))}
             </div>
-            <button style={s.newConvSidebarBtn} onClick={() => { setShowSidebar(false); handleNewConversation(); }}>
+            <button style={s.newConvSidebarBtn} onClick={() => handleNewConversation()}>
               + New Conversation
             </button>
           </div>
-        )}
-        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
         {!conversation ? (
           <div style={s.noConvCard}>
             <div style={s.noConvIcon}>💬</div>
@@ -437,9 +452,6 @@ function ChatPage() {
             <button style={s.startBtn} onClick={handleNewConversation}>
               Start a Conversation
             </button>
-            <button style={s.backBtn} onClick={() => setShowSidebar(true)}>
-              View Past Conversations
-            </button>
             <button style={s.backBtn} onClick={() => router.push("/ai-chat")}>
               Back to AI Assistant
             </button>
@@ -460,12 +472,15 @@ function ChatPage() {
                 </div>
               </div>
               <div style={{ display: "flex", gap: "0.5rem" }}>
-                <button
-                  style={{ ...s.historyBtn, ...(showSidebar ? s.historyBtnActive : {}) }}
-                  onClick={() => setShowSidebar((v) => !v)}
-                >
-                  History
-                </button>
+                {!isClosed && (
+                  <button
+                    style={s.closeConvBtn}
+                    onClick={handleCloseConversation}
+                    title="Close this conversation"
+                  >
+                    Close Chat
+                  </button>
+                )}
                 <button
                   style={s.aiBtn}
                   onClick={() => router.push("/ai-chat")}
@@ -992,10 +1007,10 @@ const s = {
     padding: "0 0.15rem",
     flexShrink: 0,
   },
-  historyBtn: {
+  closeConvBtn: {
     background: "white",
-    border: "2px solid #555",
-    color: "#555",
+    border: "2px solid #c0392b",
+    color: "#c0392b",
     borderRadius: 8,
     padding: "0.45rem 0.9rem",
     fontSize: "0.82rem",
@@ -1003,10 +1018,6 @@ const s = {
     cursor: "pointer",
     whiteSpace: "nowrap",
   },
-  historyBtnActive: {
-    background: "#555",
-    color: "white",
-  },
   sidebar: {
     width: 230,
     flexShrink: 0,
@@ -1028,14 +1039,6 @@ const s = {
     flexShrink: 0,
   },
   sidebarTitle: { fontWeight: 700, fontSize: "0.88rem", color: "#333" },
-  sidebarClose: {
-    background: "none",
-    border: "none",
-    cursor: "pointer",
-    fontSize: "0.85rem",
-    color: "#999",
-    padding: "0.1rem 0.25rem",
-  },
   sidebarEmpty: {
     color: "#aaa",
     fontSize: "0.82rem",

From fb7d71c86ecee7251dc7fca2a3a6f6231d33e1c7 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Wed, 15 Apr 2026 01:35:54 -0600
Subject: [PATCH 2/2] unify ai and live chat

---
 web/app/ai-chat/page.js | 963 ++++++++++++++++++++++++++++++----------
 1 file changed, 724 insertions(+), 239 deletions(-)

diff --git a/web/app/ai-chat/page.js b/web/app/ai-chat/page.js
index 32bb38e9..4e7ff875 100644
--- a/web/app/ai-chat/page.js
+++ b/web/app/ai-chat/page.js
@@ -2,105 +2,225 @@
 
 import dynamic from "next/dynamic";
 import { useState, useEffect, useRef, useCallback } from "react";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useAuth } from "@/context/AuthContext";
 
 const API_BASE = "";
+const POLL_INTERVAL = 2500;
 
 function AiChatPage() {
   const { user, token, loading: authLoading } = useAuth();
   const router = useRouter();
+  const searchParams = useSearchParams();
+  const conversationIdParam = searchParams.get("id");
 
+  const [conversation, setConversation] = useState(null);
   const [messages, setMessages] = useState([]);
   const [input, setInput] = useState("");
   const [sending, setSending] = useState(false);
+  const [loadingConv, setLoadingConv] = useState(true);
   const [error, setError] = useState(null);
-  const [switchingToHuman, setSwitchingToHuman] = useState(false);
-  const [humanRequested, setHumanRequested] = useState(false);
+  const [conversations, setConversations] = useState([]);
+  const [convsLoading, setConvsLoading] = useState(false);
+  const [selectedFile, setSelectedFile] = useState(null);
 
   const messagesEndRef = useRef(null);
+  const messagesAreaRef = useRef(null);
   const inputRef = useRef(null);
+  const pollRef = useRef(null);
+  const lastMessageIdRef = useRef(null);
+  const fileInputRef = useRef(null);
 
   useEffect(() => {
     if (!authLoading && !user) {
-      router.push("/login?next=" + encodeURIComponent("/ai-chat"));
+      router.push("/login?next=" + encodeURIComponent("/ai-chat" + (conversationIdParam ? `?id=${conversationIdParam}` : "")));
     }
-  }, [authLoading, user, router]);
+  }, [authLoading, user, router, conversationIdParam]);
 
   useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    const area = messagesAreaRef.current;
+    if (!area) return;
+    const nearBottom = area.scrollHeight - area.scrollTop - area.clientHeight < 150;
+    if (nearBottom) {
+      messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+    }
   }, [messages]);
 
-  const buildHistory = useCallback(() => {
+  const fetchMessages = useCallback(async (convId) => {
+    if (!token || !convId) return;
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!res.ok) return;
+      const data = await res.json();
+      if (Array.isArray(data)) {
+        setMessages(data);
+        if (data.length > 0) lastMessageIdRef.current = data[data.length - 1].id;
+      }
+    } catch {
+      // silent
+    }
+  }, [token]);
 
-    return messages.map((m) => ({
-      role: m.role,
-      content: m.content,
-    }));
-  }, [messages]);
+  const fetchConversation = useCallback(async (convId) => {
+    if (!token || !convId) return null;
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${convId}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!res.ok) return null;
+      const data = await res.json();
+      setConversation(data);
+      return data;
+    } catch {
+      return null;
+    }
+  }, [token]);
+
+  const fetchConversations = useCallback(async () => {
+    if (!token) return;
+    setConvsLoading(true);
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!res.ok) return;
+      const data = await res.json();
+      setConversations(Array.isArray(data) ? data : (data.content ?? []));
+    } catch {
+      // silent
+    } finally {
+      setConvsLoading(false);
+    }
+  }, [token]);
+
+  const startPolling = useCallback((convId) => {
+    if (pollRef.current) clearInterval(pollRef.current);
+    pollRef.current = setInterval(async () => {
+      if (!token || !convId) return;
+      try {
+        const [msgsRes, convRes] = await Promise.all([
+          fetch(`${API_BASE}/api/v1/chat/conversations/${convId}/messages`, {
+            headers: { Authorization: `Bearer ${token}` },
+          }),
+          fetch(`${API_BASE}/api/v1/chat/conversations/${convId}`, {
+            headers: { Authorization: `Bearer ${token}` },
+          }),
+        ]);
+        if (msgsRes.ok) {
+          const data = await msgsRes.json();
+          if (Array.isArray(data)) {
+            const lastId = data.length > 0 ? data[data.length - 1].id : null;
+            if (lastId !== lastMessageIdRef.current) {
+              lastMessageIdRef.current = lastId;
+              setMessages(data);
+            }
+          }
+        }
+        if (convRes.ok) {
+          const convData = await convRes.json();
+          setConversation(convData);
+        }
+      } catch {
+        // silent
+      }
+    }, POLL_INTERVAL);
+  }, [token]);
+
+  useEffect(() => {
+    if (!token || authLoading) return;
+
+    async function init() {
+      setLoadingConv(true);
+      setError(null);
+
+      let convId = conversationIdParam ? Number(conversationIdParam) : null;
+
+      if (!convId) {
+        try {
+          const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
+            headers: { Authorization: `Bearer ${token}` },
+          });
+          if (res.ok) {
+            const list = await res.json();
+            const openAi = Array.isArray(list)
+              ? list.find((c) => c.status === "OPEN" && c.mode === "AUTOMATED")
+              : null;
+            if (openAi) convId = openAi.id;
+          }
+        } catch {
+          setError("Failed to load conversations.");
+        }
+      }
+
+      if (!convId) {
+        // Auto-create a new AI conversation
+        try {
+          const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+            body: JSON.stringify({ message: "Hello! I'd like to chat with the AI assistant." }),
+          });
+          if (res.ok) {
+            const conv = await res.json();
+            convId = conv.id;
+          }
+        } catch {
+          // silent
+        }
+      }
+
+      if (!convId) {
+        await fetchConversations();
+        setLoadingConv(false);
+        return;
+      }
+
+      await Promise.all([
+        fetchConversation(convId),
+        fetchMessages(convId),
+        fetchConversations(),
+      ]);
+      setLoadingConv(false);
+      startPolling(convId);
+      router.replace(`/ai-chat?id=${convId}`, { scroll: false });
+    }
+
+    init();
+
+    return () => {
+      if (pollRef.current) clearInterval(pollRef.current);
+    };
+  }, [token, authLoading, conversationIdParam, fetchConversation, fetchMessages, startPolling, fetchConversations, router]);
 
   async function handleSend(e) {
     e?.preventDefault();
     const text = input.trim();
-    if (!text || sending) return;
-
-    setInput("");
-    setError(null);
-    setSending(true);
-
-    const userMsg = { role: "user", content: text, id: Date.now() };
-    setMessages((prev) => [...prev, userMsg]);
-
-    try {
-      const res = await fetch(`${API_BASE}/api/v1/ai-chat/message`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          message: text,
-          history: buildHistory(),
-        }),
-      });
-
-      if (res.status === 401 || res.status === 403) {
-        router.push("/login?next=" + encodeURIComponent("/ai-chat"));
-        return;
-      }
-
-      const data = await res.json();
-
-      if (!res.ok || !data.success) {
-        setError(data.error || "Failed to get a response. Please try again.");
-        return;
-      }
-
-      const aiMsg = { role: "assistant", content: data.message, id: Date.now() + 1 };
-      setMessages((prev) => [...prev, aiMsg]);
-    } catch {
-      setError("Network error. Please check your connection and try again.");
-    } finally {
-      setSending(false);
-      inputRef.current?.focus();
+    if ((!text && !selectedFile) || sending || !conversation) return;
+    if (selectedFile) {
+      await handleSendAttachment(text);
+    } else {
+      await handleSendText(text);
     }
   }
 
-  async function handleHumanChat() {
-    if (switchingToHuman || !token) return;
-    setSwitchingToHuman(true);
+  async function handleSendText(text) {
+    setInput("");
+    setSending(true);
     setError(null);
 
     try {
-      const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
+      const res = await fetch(`${API_BASE}/api/v1/chat/conversations/${conversation.id}/messages`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-        body: JSON.stringify({
-          message: "Hi, I'd like to speak with a real support agent.",
-        }),
+        body: JSON.stringify({ content: text }),
       });
 
       if (res.status === 401) {
@@ -108,46 +228,78 @@ function AiChatPage() {
         return;
       }
 
-      const data = await res.json().catch(() => null);
-
       if (!res.ok) {
-        setError(data?.message || "Could not connect to live support. Please try again.");
+        const data = await res.json().catch(() => null);
+        setError(data?.message || "Failed to send message.");
+        setInput(text);
         return;
       }
 
-      const conv = data;
+      const msg = await res.json();
+      setMessages((prev) => prev.some((m) => m.id === msg.id) ? prev : [...prev, msg]);
+      lastMessageIdRef.current = msg.id;
+    } catch {
+      setError("Network error. Please try again.");
+      setInput(text);
+    } finally {
+      setSending(false);
+      inputRef.current?.focus();
+    }
+  }
 
-      //Flag conversation staff, also should notify them
-      await fetch(`${API_BASE}/api/v1/chat/conversations/${conv.id}/request-human`, {
-        method: "POST",
-        headers: { Authorization: `Bearer ${token}` },
-      });
+  async function handleSendAttachment(optionalText) {
+    setSending(true);
+    setError(null);
+    const file = selectedFile;
+    setSelectedFile(null);
+    setInput("");
 
-      try {
-        for (const msg of messages) {
-          const prefix = msg.role === "assistant" ? "[AI Assistant] " : "[Customer] ";
-          await fetch(`${API_BASE}/api/v1/chat/conversations/${conv.id}/messages`, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-              Authorization: `Bearer ${token}`,
-            },
-            body: JSON.stringify({ content: prefix + msg.content }),
-          });
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      if (optionalText) formData.append("content", optionalText);
+
+      const res = await fetch(
+        `${API_BASE}/api/v1/chat/conversations/${conversation.id}/attachments`,
+        {
+          method: "POST",
+          headers: { Authorization: `Bearer ${token}` },
+          body: formData,
         }
-      } catch {
-        // Navigate anyway — agent has partial context
+      );
+
+      if (res.status === 401) {
+        router.push("/login?next=" + encodeURIComponent("/ai-chat"));
+        return;
       }
 
-      setHumanRequested(true);
-      router.push(`/chat?id=${conv.id}`);
+      if (!res.ok) {
+        const data = await res.json().catch(() => null);
+        setError(data?.message || "Failed to send attachment.");
+        setSelectedFile(file);
+        setInput(optionalText);
+        return;
+      }
+
+      const msg = await res.json();
+      setMessages((prev) => prev.some((m) => m.id === msg.id) ? prev : [...prev, msg]);
+      lastMessageIdRef.current = msg.id;
     } catch {
-      setError("Network error. Could not connect to live support.");
+      setError("Network error. Please try again.");
+      setSelectedFile(file);
+      setInput(optionalText);
     } finally {
-      setSwitchingToHuman(false);
+      setSending(false);
+      inputRef.current?.focus();
     }
   }
 
+  function handleFileChange(e) {
+    const file = e.target.files?.[0];
+    if (file) setSelectedFile(file);
+    e.target.value = "";
+  }
+
   function handleKeyDown(e) {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -155,7 +307,63 @@ function AiChatPage() {
     }
   }
 
-  if (authLoading) {
+  async function handleNewConversation() {
+    if (pollRef.current) clearInterval(pollRef.current);
+    setError(null);
+    setLoadingConv(true);
+    try {
+      const res = await fetch(`${API_BASE}/api/v1/chat/conversations`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ message: "Hello! I'd like to chat with the AI assistant." }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => null);
+        setError(data?.message || "Failed to start a conversation.");
+        setLoadingConv(false);
+        return;
+      }
+      const conv = await res.json();
+      setConversation(conv);
+      await Promise.all([fetchMessages(conv.id), fetchConversations()]);
+      setLoadingConv(false);
+      startPolling(conv.id);
+      router.replace(`/ai-chat?id=${conv.id}`, { scroll: false });
+    } catch {
+      setError("Network error. Please try again.");
+      setLoadingConv(false);
+    }
+  }
+
+  async function switchConversation(convId) {
+    if (pollRef.current) clearInterval(pollRef.current);
+    setMessages([]);
+    setError(null);
+    setLoadingConv(true);
+    await fetchConversation(convId);
+    await fetchMessages(convId);
+    setLoadingConv(false);
+    startPolling(convId);
+    router.replace(`/ai-chat?id=${convId}`, { scroll: false });
+  }
+
+  async function handleSwitchToHuman() {
+    if (!conversation) return;
+    try {
+      await fetch(`${API_BASE}/api/v1/chat/conversations/${conversation.id}/request-human`, {
+        method: "POST",
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      router.push(`/chat?id=${conversation.id}`);
+    } catch {
+      setError("Could not connect to live support. Please try again.");
+    }
+  }
+
+  if (authLoading || loadingConv) {
     return (
       <main style={s.page}>
         <p style={s.loading}>Loading...</p>
@@ -165,135 +373,230 @@ function AiChatPage() {
 
   if (!user) return null;
 
+  const isEscalated = conversation?.mode === "HUMAN";
+  const isClosed = conversation?.status === "CLOSED";
+
   return (
     <main style={s.page}>
       <section style={s.hero}>
         <h1 style={s.heroTitle}>AI Pet Assistant</h1>
-        <p style={s.heroSubtitle}>
-          Ask me anything about pet care, adoption advice, or your pets!
-        </p>
+        <p style={s.heroSubtitle}>Ask me anything about pet care, adoption advice, or your pets!</p>
         <div style={s.titleDecoration} />
       </section>
 
       <section style={s.chatSection}>
-        <div style={s.chatCard}>
-          <div style={s.chatHeader}>
-            <div style={s.chatHeaderLeft}>
-              <div style={s.aiAvatar}>🐾</div>
-              <div>
-                <div style={s.chatHeaderTitle}>Leon's Pet Assistant</div>
-                <div style={s.chatHeaderStatus}>
-                  <span style={s.statusDot} /> Online
-                </div>
-              </div>
+        <div style={{ display: "flex", gap: "1rem", alignItems: "flex-start" }}>
+          <div style={s.sidebar}>
+            <div style={s.sidebarHeader}>
+              <span style={s.sidebarTitle}>All Conversations</span>
             </div>
-            <button
-              style={{
-                ...s.humanBtn,
-                ...(switchingToHuman ? s.humanBtnDisabled : {}),
-              }}
-              onClick={handleHumanChat}
-              disabled={switchingToHuman}
-              title="Connect with a human support agent"
-            >
-              {switchingToHuman ? "Connecting..." : "Chat with a Real Person"}
+            {convsLoading && <p style={s.sidebarEmpty}>Loading...</p>}
+            {!convsLoading && conversations.length === 0 && (
+              <p style={s.sidebarEmpty}>No conversations yet.</p>
+            )}
+            <div style={{ overflowY: "auto", flex: 1 }}>
+              {conversations.map((conv) => (
+                <button
+                  key={conv.id}
+                  style={{ ...s.convItem, ...(conv.id === conversation?.id ? s.convItemActive : {}) }}
+                  onClick={() => switchConversation(conv.id)}
+                >
+                  <div style={s.convItemTop}>
+                    <span style={s.convItemSubject}>{conv.subject || `Conversation #${conv.id}`}</span>
+                    <span style={{ ...s.convStatusBadge, ...(conv.status === "OPEN" ? s.convStatusOpen : s.convStatusClosed) }}>
+                      {conv.status}
+                    </span>
+                  </div>
+                  <div style={s.convItemBottom}>
+                    <span style={s.convItemMode}>{conv.mode === "HUMAN" ? "👤 Live" : "🤖 AI"}</span>
+                    <span style={s.convItemDate}>{conv.createdAt ? new Date(conv.createdAt).toLocaleDateString() : ""}</span>
+                  </div>
+                </button>
+              ))}
+            </div>
+            <button style={s.newConvSidebarBtn} onClick={handleNewConversation}>
+              + New Conversation
             </button>
           </div>
 
-          <div style={s.messagesArea}>
-            {messages.length === 0 && (
-              <div style={s.emptyState}>
-                <div style={s.emptyIcon}>🐾</div>
-                <p style={s.emptyText}>
-                  Hello{user.fullName ? `, ${user.fullName.split(" ")[0]}` : ""}! I'm your pet care assistant.
-                  Ask me about pet recommendations, care tips, supplies, or anything pet-related!
-                </p>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            {!conversation ? (
+              <div style={s.noConvCard}>
+                <div style={s.noConvIcon}>🐾</div>
+                <h2 style={s.noConvTitle}>No active conversation</h2>
+                <p style={s.noConvText}>Start a new conversation with the AI assistant.</p>
+                {error && <div style={s.errorInline}>{error}</div>}
+                <button style={s.startBtn} onClick={handleNewConversation}>
+                  Start a Conversation
+                </button>
+                <button style={s.backBtn} onClick={() => router.push("/chat")}>
+                  Live Support
+                </button>
               </div>
-            )}
-
-            {messages.map((msg) => (
-              <div
-                key={msg.id}
-                style={{
-                  ...s.messageRow,
-                  ...(msg.role === "user" ? s.messageRowUser : s.messageRowAi),
-                }}
-              >
-                {msg.role === "assistant" && (
-                  <div style={s.aiAvatarSmall}>🐾</div>
-                )}
-                <div
-                  style={{
-                    ...s.messageBubble,
-                    ...(msg.role === "user" ? s.bubbleUser : s.bubbleAi),
-                  }}
-                >
-                  {msg.content.split("\n").map((line, i) => (
-                    <span key={i}>
-                      {line}
-                      {i < msg.content.split("\n").length - 1 && <br />}
-                    </span>
-                  ))}
+            ) : (
+              <div style={s.chatCard}>
+                <div style={s.chatHeader}>
+                  <div style={s.chatHeaderLeft}>
+                    <div style={s.aiAvatar}>🐾</div>
+                    <div>
+                      <div style={s.chatHeaderTitle}>Leon's Pet Assistant</div>
+                      <div style={s.chatHeaderStatus}>
+                        <span style={s.statusDot} /> Online
+                      </div>
+                    </div>
+                  </div>
+                  <div style={{ display: "flex", gap: "0.5rem" }}>
+                    {!isEscalated && !isClosed && (
+                      <button
+                        style={s.humanBtn}
+                        onClick={handleSwitchToHuman}
+                        title="Connect with a human support agent"
+                      >
+                        Chat with a Real Person
+                      </button>
+                    )}
+                    <button
+                      style={s.liveBtn}
+                      onClick={() => router.push("/chat")}
+                      title="Go to Live Support"
+                    >
+                      Live Support
+                    </button>
+                  </div>
                 </div>
-                {msg.role === "user" && (
-                  <div style={s.userAvatarSmall}>
-                    {user.fullName ? user.fullName.charAt(0).toUpperCase() : "U"}
+
+                <div style={s.messagesArea} ref={messagesAreaRef}>
+                  {messages.length === 0 && (
+                    <div style={s.emptyState}>
+                      <div style={s.emptyIcon}>🐾</div>
+                      <p style={s.emptyText}>
+                        Hello{user.fullName ? `, ${user.fullName.split(" ")[0]}` : ""}! I'm your pet care assistant.
+                        Ask me about pet recommendations, care tips, supplies, or anything pet-related!
+                      </p>
+                    </div>
+                  )}
+
+                  {messages.map((msg) => {
+                    const isOwn = msg.senderId === user.id;
+                    return (
+                      <div
+                        key={msg.id}
+                        style={{
+                          ...s.messageRow,
+                          ...(isOwn ? s.messageRowUser : s.messageRowAgent),
+                        }}
+                      >
+                        {!isOwn && <div style={s.aiAvatarSmall}>🐾</div>}
+                        <div
+                          style={{
+                            ...s.messageBubble,
+                            ...(isOwn ? s.bubbleUser : s.bubbleAgent),
+                          }}
+                        >
+                          {msg.content && msg.content.split("\n").map((line, i, arr) => (
+                            <span key={i}>
+                              {line}
+                              {i < arr.length - 1 && <br />}
+                            </span>
+                          ))}
+                          {msg.attachmentUrl && (
+                            <div style={s.attachment}>
+                              <a
+                                href={msg.attachmentUrl}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                style={s.attachmentLink}
+                              >
+                                📎 {msg.attachmentName || "Attachment"}
+                              </a>
+                            </div>
+                          )}
+                          <div style={{ ...s.timestamp, ...(isOwn ? s.timestampUser : {}) }}>
+                            {msg.timestamp ? new Date(msg.timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : ""}
+                          </div>
+                        </div>
+                        {isOwn && (
+                          <div style={s.userAvatarSmall}>
+                            {user.fullName ? user.fullName.charAt(0).toUpperCase() : "U"}
+                          </div>
+                        )}
+                      </div>
+                    );
+                  })}
+                  <div ref={messagesEndRef} />
+                </div>
+
+                {error && (
+                  <div style={s.errorBar}>
+                    {error}
+                    <button style={s.errorClose} onClick={() => setError(null)}>✕</button>
                   </div>
                 )}
-              </div>
-            ))}
 
-            {sending && (
-              <div style={{ ...s.messageRow, ...s.messageRowAi }}>
-                <div style={s.aiAvatarSmall}>🐾</div>
-                <div style={{ ...s.messageBubble, ...s.bubbleAi, ...s.typingBubble }}>
-                  <span style={s.dot} />
-                  <span style={{ ...s.dot, animationDelay: "0.2s" }} />
-                  <span style={{ ...s.dot, animationDelay: "0.4s" }} />
-                </div>
+                {isClosed ? (
+                  <div style={s.closedBanner}>
+                    This conversation has been closed.
+                    <button style={s.newConvBtn} onClick={handleNewConversation}>
+                      Start New Conversation
+                    </button>
+                  </div>
+                ) : (
+                  <form style={s.inputArea} onSubmit={handleSend}>
+                    <input
+                      type="file"
+                      ref={fileInputRef}
+                      style={{ display: "none" }}
+                      onChange={handleFileChange}
+                    />
+                    {selectedFile && (
+                      <div style={s.filePreview}>
+                        <span style={s.filePreviewName}>📎 {selectedFile.name}</span>
+                        <button
+                          type="button"
+                          style={s.filePreviewRemove}
+                          onClick={() => setSelectedFile(null)}
+                        >
+                          ✕
+                        </button>
+                      </div>
+                    )}
+                    <div style={s.inputRow}>
+                      <button
+                        type="button"
+                        style={s.attachBtn}
+                        onClick={() => fileInputRef.current?.click()}
+                        disabled={sending}
+                        title="Attach a file"
+                      >
+                        📎
+                      </button>
+                      <textarea
+                        ref={inputRef}
+                        style={s.textarea}
+                        value={input}
+                        onChange={(e) => setInput(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                        placeholder={selectedFile ? "Add a caption (optional)..." : "Ask me about pet care, adoption, supplies..."}
+                        rows={1}
+                        disabled={sending}
+                        maxLength={2000}
+                      />
+                      <button
+                        type="submit"
+                        style={{
+                          ...s.sendBtn,
+                          ...((!input.trim() && !selectedFile) || sending ? s.sendBtnDisabled : {}),
+                        }}
+                        disabled={(!input.trim() && !selectedFile) || sending}
+                      >
+                        {sending ? "..." : "Send"}
+                      </button>
+                    </div>
+                  </form>
+                )}
               </div>
             )}
-
-            <div ref={messagesEndRef} />
           </div>
-
-          {error && (
-            <div style={s.errorBar}>
-              {error}
-              <button style={s.errorClose} onClick={() => setError(null)}>✕</button>
-            </div>
-          )}
-
-          {humanRequested && (
-            <div style={s.successBar}>
-              Connected to live support! Redirecting to chat...
-            </div>
-          )}
-
-          <form style={s.inputArea} onSubmit={handleSend}>
-            <textarea
-              ref={inputRef}
-              style={s.textarea}
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyDown={handleKeyDown}
-              placeholder="Ask me about pet care, adoption, supplies..."
-              rows={1}
-              disabled={sending}
-              maxLength={2000}
-            />
-            <button
-              type="submit"
-              style={{
-                ...s.sendBtn,
-                ...((!input.trim() || sending) ? s.sendBtnDisabled : {}),
-              }}
-              disabled={!input.trim() || sending}
-              title="Send message"
-            >
-              {sending ? "..." : "Send"}
-            </button>
-          </form>
         </div>
       </section>
     </main>
@@ -313,7 +616,7 @@ const s = {
     fontSize: "1rem",
   },
   hero: {
-    background: "linear-gradient(135deg, #ff8c00 0%, #ffa500 100%)",
+    background: "linear-gradient(135deg, #333 0%, #555 100%)",
     padding: "2.5rem 1.5rem 2rem",
     textAlign: "center",
     color: "white",
@@ -327,20 +630,107 @@ const s = {
   heroSubtitle: {
     fontSize: "clamp(0.9rem, 2vw, 1.1rem)",
     marginTop: "0.5rem",
-    opacity: 0.9,
+    opacity: 0.85,
   },
   titleDecoration: {
     width: 60,
     height: 4,
-    background: "rgba(255,255,255,0.6)",
+    background: "rgba(255,255,255,0.4)",
     borderRadius: 2,
     margin: "1rem auto 0",
   },
   chatSection: {
-    maxWidth: 800,
+    maxWidth: 1060,
     margin: "0 auto",
     padding: "1.5rem 1rem 2rem",
   },
+  sidebar: {
+    width: 230,
+    flexShrink: 0,
+    background: "white",
+    borderRadius: 16,
+    boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    maxHeight: "calc(100vh - 220px)",
+    minHeight: 300,
+  },
+  sidebarHeader: {
+    display: "flex",
+    alignItems: "center",
+    padding: "0.85rem 1rem",
+    borderBottom: "1px solid #f0f0f0",
+    flexShrink: 0,
+  },
+  sidebarTitle: { fontWeight: 700, fontSize: "0.88rem", color: "#333" },
+  sidebarEmpty: {
+    color: "#aaa",
+    fontSize: "0.82rem",
+    padding: "1rem",
+    textAlign: "center",
+    margin: 0,
+  },
+  convItem: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.2rem",
+    padding: "0.65rem 1rem",
+    background: "white",
+    border: "none",
+    borderBottomWidth: 1,
+    borderBottomStyle: "solid",
+    borderBottomColor: "#f0f0f0",
+    textAlign: "left",
+    cursor: "pointer",
+    width: "100%",
+  },
+  convItemActive: { background: "#f8f8f8" },
+  convItemTop: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "0.4rem",
+  },
+  convItemBottom: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  convItemSubject: {
+    fontSize: "0.82rem",
+    fontWeight: 600,
+    color: "#222",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    flex: 1,
+  },
+  convItemMode: { fontSize: "0.7rem", color: "#999" },
+  convItemDate: { fontSize: "0.68rem", color: "#bbb" },
+  convStatusBadge: {
+    fontSize: "0.62rem",
+    fontWeight: 700,
+    borderRadius: 20,
+    padding: "0.1rem 0.45rem",
+    flexShrink: 0,
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+  },
+  convStatusOpen: { background: "#e6f9ee", color: "#1a7a3c" },
+  convStatusClosed: { background: "#f0f0f0", color: "#888" },
+  newConvSidebarBtn: {
+    margin: "0.65rem 1rem",
+    background: "#333",
+    color: "white",
+    border: "none",
+    borderRadius: 8,
+    padding: "0.5rem 0.75rem",
+    fontSize: "0.8rem",
+    fontWeight: 600,
+    cursor: "pointer",
+    flexShrink: 0,
+  },
   chatCard: {
     background: "white",
     borderRadius: 16,
@@ -369,7 +759,7 @@ const s = {
     width: 44,
     height: 44,
     borderRadius: "50%",
-    background: "linear-gradient(135deg, #ff8c00, #ffa500)",
+    background: "linear-gradient(135deg, #444, #666)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -405,12 +795,62 @@ const s = {
     fontSize: "0.82rem",
     fontWeight: 600,
     cursor: "pointer",
-    transition: "all 0.2s",
     whiteSpace: "nowrap",
   },
-  humanBtnDisabled: {
-    opacity: 0.6,
-    cursor: "not-allowed",
+  liveBtn: {
+    background: "white",
+    border: "2px solid #555",
+    color: "#555",
+    borderRadius: 8,
+    padding: "0.45rem 0.9rem",
+    fontSize: "0.82rem",
+    fontWeight: 600,
+    cursor: "pointer",
+    whiteSpace: "nowrap",
+  },
+  noConvCard: {
+    background: "white",
+    borderRadius: 16,
+    boxShadow: "0 4px 24px rgba(0,0,0,0.08)",
+    padding: "3rem 2rem",
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "1rem",
+  },
+  noConvIcon: { fontSize: "3rem" },
+  noConvTitle: { fontSize: "1.4rem", fontWeight: 700, color: "#1a1a1a", margin: 0 },
+  noConvText: { color: "#666", fontSize: "0.95rem", maxWidth: 360 },
+  errorInline: {
+    background: "#fff0f0",
+    color: "#c0392b",
+    border: "1px solid #ffd0d0",
+    borderRadius: 8,
+    padding: "0.6rem 1rem",
+    fontSize: "0.875rem",
+    width: "100%",
+    maxWidth: 360,
+  },
+  startBtn: {
+    background: "#333",
+    color: "white",
+    border: "none",
+    borderRadius: 10,
+    padding: "0.7rem 2rem",
+    fontSize: "0.95rem",
+    fontWeight: 600,
+    cursor: "pointer",
+  },
+  backBtn: {
+    background: "none",
+    border: "1.5px solid #ff8c00",
+    color: "#ff8c00",
+    borderRadius: 10,
+    padding: "0.6rem 1.5rem",
+    fontSize: "0.9rem",
+    fontWeight: 600,
+    cursor: "pointer",
   },
   messagesArea: {
     flex: 1,
@@ -430,10 +870,7 @@ const s = {
     padding: "2rem",
     margin: "auto",
   },
-  emptyIcon: {
-    fontSize: "3rem",
-    marginBottom: "1rem",
-  },
+  emptyIcon: { fontSize: "3rem", marginBottom: "1rem" },
   emptyText: {
     color: "#666",
     fontSize: "0.95rem",
@@ -445,17 +882,13 @@ const s = {
     alignItems: "flex-end",
     gap: "0.5rem",
   },
-  messageRowUser: {
-    flexDirection: "row-reverse",
-  },
-  messageRowAi: {
-    flexDirection: "row",
-  },
+  messageRowUser: { flexDirection: "row-reverse" },
+  messageRowAgent: { flexDirection: "row" },
   aiAvatarSmall: {
     width: 30,
     height: 30,
     borderRadius: "50%",
-    background: "linear-gradient(135deg, #ff8c00, #ffa500)",
+    background: "linear-gradient(135deg, #444, #666)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -488,24 +921,23 @@ const s = {
     color: "white",
     borderBottomRightRadius: 4,
   },
-  bubbleAi: {
+  bubbleAgent: {
     background: "#f4f4f4",
     color: "#1a1a1a",
     borderBottomLeftRadius: 4,
   },
-  typingBubble: {
-    display: "flex",
-    alignItems: "center",
-    gap: "0.3rem",
-    padding: "0.75rem 1rem",
+  timestamp: {
+    fontSize: "0.7rem",
+    color: "#aaa",
+    marginTop: "0.3rem",
+    textAlign: "left",
   },
-  dot: {
-    display: "inline-block",
-    width: 7,
-    height: 7,
-    borderRadius: "50%",
-    background: "#aaa",
-    animation: "bounce 1s infinite",
+  timestampUser: { textAlign: "right", color: "rgba(255,255,255,0.7)" },
+  attachment: { marginTop: "0.4rem" },
+  attachmentLink: {
+    color: "inherit",
+    fontSize: "0.85rem",
+    opacity: 0.85,
   },
   errorBar: {
     background: "#fff0f0",
@@ -526,23 +958,78 @@ const s = {
     fontSize: "0.9rem",
     padding: "0 0.25rem",
   },
-  successBar: {
-    background: "#f0fff4",
-    borderTop: "1px solid #c3f0c3",
-    color: "#27ae60",
-    padding: "0.65rem 1.25rem",
+  closedBanner: {
+    background: "#f5f5f5",
+    borderTop: "1px solid #e0e0e0",
+    color: "#666",
+    padding: "0.85rem 1.25rem",
     fontSize: "0.875rem",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
     flexShrink: 0,
   },
+  newConvBtn: {
+    background: "#333",
+    color: "white",
+    border: "none",
+    borderRadius: 8,
+    padding: "0.4rem 1rem",
+    fontSize: "0.82rem",
+    fontWeight: 600,
+    cursor: "pointer",
+  },
   inputArea: {
     display: "flex",
-    gap: "0.6rem",
+    flexDirection: "column",
+    gap: "0.4rem",
     padding: "0.85rem 1.25rem",
     borderTop: "1px solid #f0f0f0",
     background: "#fff",
     flexShrink: 0,
+  },
+  inputRow: {
+    display: "flex",
+    gap: "0.6rem",
     alignItems: "flex-end",
   },
+  attachBtn: {
+    background: "none",
+    border: "1.5px solid #e0e0e0",
+    borderRadius: 8,
+    padding: "0.5rem 0.6rem",
+    fontSize: "1rem",
+    cursor: "pointer",
+    flexShrink: 0,
+    color: "#666",
+    lineHeight: 1,
+  },
+  filePreview: {
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+    background: "#f8f8f8",
+    border: "1px solid #e8e8e8",
+    borderRadius: 8,
+    padding: "0.35rem 0.75rem",
+  },
+  filePreviewName: {
+    fontSize: "0.82rem",
+    color: "#555",
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+  },
+  filePreviewRemove: {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    color: "#999",
+    fontSize: "0.8rem",
+    padding: "0 0.15rem",
+    flexShrink: 0,
+  },
   textarea: {
     flex: 1,
     border: "1.5px solid #e0e0e0",
@@ -555,10 +1042,9 @@ const s = {
     lineHeight: 1.5,
     maxHeight: 120,
     overflowY: "auto",
-    transition: "border-color 0.2s",
   },
   sendBtn: {
-    background: "#ff8c00",
+    background: "#333",
     color: "white",
     border: "none",
     borderRadius: 10,
@@ -567,10 +1053,9 @@ const s = {
     fontWeight: 600,
     cursor: "pointer",
     flexShrink: 0,
-    transition: "background 0.2s",
   },
   sendBtnDisabled: {
-    background: "#ffd0a0",
+    background: "#aaa",
     cursor: "not-allowed",
   },
 };