From 357fac2d56229c4d6910cf6a2f843c6ade93de22 Mon Sep 17 00:00:00 2001
From: augmentedpotato <shivchevli2000@gmail.com>
Date: Sun, 19 Apr 2026 08:25:14 -0600
Subject: [PATCH] Mobile UI for ai chat, fixed backend issue

---
 .../repository/AppointmentRepository.java     |  2 +-
 web/app/ai-chat/page.js                       | 32 ++++++++++++-------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/backend/src/main/java/com/petshop/backend/repository/AppointmentRepository.java b/backend/src/main/java/com/petshop/backend/repository/AppointmentRepository.java
index 59243df2..b23b1902 100644
--- a/backend/src/main/java/com/petshop/backend/repository/AppointmentRepository.java
+++ b/backend/src/main/java/com/petshop/backend/repository/AppointmentRepository.java
@@ -53,7 +53,7 @@ public interface AppointmentRepository extends JpaRepository<Appointment, Long>
 
     List<Appointment> findByPet_Id(Long petId);
 
-    @Query("SELECT a FROM Appointment a JOIN FETCH a.service WHERE a.pet.petId = :petId AND a.appointmentDate = :date AND LOWER(a.appointmentStatus) NOT IN ('cancelled', 'missed')")
+    @Query("SELECT a FROM Appointment a JOIN FETCH a.service WHERE a.pet.id = :petId AND a.appointmentDate = :date AND LOWER(a.appointmentStatus) NOT IN ('cancelled', 'missed')")
     List<Appointment> findByPetIdAndAppointmentDate(@Param("petId") Long petId, @Param("date") LocalDate date);
 
     List<Appointment> findByAppointmentDateAndAppointmentStatusIgnoreCase(LocalDate date, String status);
diff --git a/web/app/ai-chat/page.js b/web/app/ai-chat/page.js
index 13ed9ae4..b6ac0816 100644
--- a/web/app/ai-chat/page.js
+++ b/web/app/ai-chat/page.js
@@ -68,11 +68,23 @@ function AttachmentPreview({ url, name, token }) {
   );
 }
 
+function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth < 640);
+    check();
+    window.addEventListener("resize", check);
+    return () => window.removeEventListener("resize", check);
+  }, []);
+  return isMobile;
+}
+
 function AiChatPage() {
   const { user, token, loading: authLoading } = useAuth();
   const router = useRouter();
   const searchParams = useSearchParams();
   const conversationIdParam = searchParams.get("id");
+  const isMobile = useIsMobile();
 
   const [conversation, setConversation] = useState(null);
   const [messages, setMessages] = useState([]);
@@ -496,8 +508,8 @@ function AiChatPage() {
       </section>
 
       <section style={s.chatSection}>
-        <div style={{ display: "flex", gap: "1rem", alignItems: "flex-start" }}>
-          <div style={s.sidebar}>
+        <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", gap: "1rem", alignItems: "flex-start" }}>
+          <div style={{ ...s.sidebar, width: isMobile ? "100%" : 230, maxHeight: isMobile ? 260 : "calc(100vh - 220px)" }}>
             <div style={s.sidebarHeader}>
               <span style={s.sidebarTitle}>All Conversations</span>
             </div>
@@ -552,7 +564,7 @@ function AiChatPage() {
             </button>
           </div>
 
-          <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ flex: 1, minWidth: 0, width: isMobile ? "100%" : undefined }}>
             {!conversation ? (
               <div style={s.noConvCard}>
                 <div style={s.noConvIcon}>🐾</div>
@@ -568,7 +580,7 @@ function AiChatPage() {
               </div>
             ) : (
               <div style={s.chatCard}>
-                <div style={s.chatHeader}>
+                <div style={{ ...s.chatHeader, flexDirection: isMobile ? "column" : "row", alignItems: isMobile ? "flex-start" : "center", gap: isMobile ? "0.6rem" : 0 }}>
                   <div style={s.chatHeaderLeft}>
                     <div style={isEscalated ? s.agentAvatar : s.aiAvatar}>{isEscalated ? "👤" : "🐾"}</div>
                     <div>
@@ -581,14 +593,14 @@ function AiChatPage() {
                       </div>
                     </div>
                   </div>
-                  <div style={{ display: "flex", gap: "0.5rem" }}>
+                  <div style={{ display: "flex", gap: "0.5rem", width: isMobile ? "100%" : undefined }}>
                     {!isEscalated && !isClosed && (
-                      <button style={s.humanBtn} onClick={handleSwitchToHuman} title="Connect with a human support agent">
+                      <button style={{ ...s.humanBtn, flex: isMobile ? 1 : undefined, fontSize: isMobile ? "0.75rem" : undefined, padding: isMobile ? "0.4rem 0.6rem" : undefined }} onClick={handleSwitchToHuman} title="Connect with a human support agent">
                         Chat with a Real Person
                       </button>
                     )}
                     {!isClosed && (
-                      <button style={s.closeConvBtn} onClick={handleCloseConversation} title="Close this conversation">
+                      <button style={{ ...s.closeConvBtn, flex: isMobile ? 1 : undefined, fontSize: isMobile ? "0.75rem" : undefined, padding: isMobile ? "0.4rem 0.6rem" : undefined }} onClick={handleCloseConversation} title="Close this conversation">
                         Close Chat
                       </button>
                     )}
@@ -790,7 +802,6 @@ const s = {
     padding: "1.5rem 1rem 2rem",
   },
   sidebar: {
-    width: 230,
     flexShrink: 0,
     background: "white",
     borderRadius: 16,
@@ -798,8 +809,7 @@ const s = {
     display: "flex",
     flexDirection: "column",
     overflow: "hidden",
-    maxHeight: "calc(100vh - 220px)",
-    minHeight: 300,
+    minHeight: 200,
   },
   sidebarHeader: {
     display: "flex",
@@ -899,7 +909,7 @@ const s = {
     display: "flex",
     flexDirection: "column",
     height: "calc(100vh - 220px)",
-    minHeight: 450,
+    minHeight: 400,
   },
   chatHeader: {
     display: "flex",