From df5f3d467bcb8a7c8e2c4c712464925db2cf619d Mon Sep 17 00:00:00 2001
From: Elroy Chua <elroymx@gmail.com>
Date: Mon, 16 Dec 2024 10:59:57 +0800
Subject: [PATCH 1/4] refine styling for home page responsiveness

---
 frontend/src/app/page.tsx                                | 2 +-
 .../src/components/main-layout/main-layout.module.css    | 9 ---------
 2 files changed, 1 insertion(+), 10 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index d866cc1..a8b6abe 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -20,7 +20,7 @@ export default function Home() {
         <>
           {/* Desktop Layout */}
           <div className={classes.mainLayout}>
-            <div className="flex pt-28 md:hidden">
+            <div className="flex md:hidden">
               <UserQuery />
             </div>
             <div className="hidden md:flex">
diff --git a/frontend/src/components/main-layout/main-layout.module.css b/frontend/src/components/main-layout/main-layout.module.css
index 547fa97..6fcd9d2 100644
--- a/frontend/src/components/main-layout/main-layout.module.css
+++ b/frontend/src/components/main-layout/main-layout.module.css
@@ -54,12 +54,3 @@
     height: 90vh;
   }
 }
-
-.homePage {
-  max-width: 1500px;
-  height: 90vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}

From b5f1748bad881b0c4ae76cd33050ca03f4380a3d Mon Sep 17 00:00:00 2001
From: Elroy Chua <elroymx@gmail.com>
Date: Mon, 16 Dec 2024 13:33:19 +0800
Subject: [PATCH 2/4] refine ui

---
 frontend/src/app/page.tsx                     |  2 +-
 .../components/chat-list/chat-list.module.css | 54 ++++++++++---------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index a8b6abe..2d729bc 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -31,7 +31,7 @@ export default function Home() {
 
           {/* Mobile Layout */}
           <div
-            className={`md:hidden fixed bottom-0 left-0 right-0 bg-white transition-all duration-300 ease-in-out z-50
+            className={`md:hidden flex fixed bottom-0 left-0 right-0 bg-white transition-all duration-300 ease-in-out z-50
             ${isExpanded ? "h-full" : "h-16"}`}
           >
             <div
diff --git a/frontend/src/components/chat-list/chat-list.module.css b/frontend/src/components/chat-list/chat-list.module.css
index cb3bdb1..c2b7eaf 100644
--- a/frontend/src/components/chat-list/chat-list.module.css
+++ b/frontend/src/components/chat-list/chat-list.module.css
@@ -1,50 +1,56 @@
 .chatList {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 16px;
-    overflow: hidden auto;
-    max-height: 68vh;
-    padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 16px;
+  overflow: hidden auto;
+  max-height: 68vh;
+  padding: 0.5rem;
 }
 
 .messageContainer {
-    display: flex;
-    align-items: flex-start;
+  display: flex;
+  align-items: flex-start;
 }
 
 .botContainer {
-    justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .userContainer {
-    justify-content: flex-end;
+  justify-content: flex-end;
 }
 
 .avatar {
-    margin-right: 8px;
+  margin-right: 8px;
 }
 
 .card {
-    max-width: 80%;
-    padding: 3px;
-    border-radius: 16px;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    word-wrap: break-word;
+  max-width: 80%;
+  padding: 3px;
+  border-radius: 16px;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  word-wrap: break-word;
 }
 
 .cardBody {
-    padding: 4px 8px;
+  padding: 4px 8px;
 }
 
 .bot {
-    background-color: #f1f5f9;
-    align-self: flex-start;
+  background-color: #f1f5f9;
+  align-self: flex-start;
 }
 
 .user {
-    background-color: #e6f1fe;
-    color: #006FEE;
-    align-self: flex-end;
+  background-color: #e6f1fe;
+  color: #006fee;
+  align-self: flex-end;
+}
+
+@media (max-width: 640px) {
+  .chatList {
+    max-height: 65vh;
+  }
 }

From 7ea37cb49299e2bf72ad2d20eecb8a43bc42c75c Mon Sep 17 00:00:00 2001
From: Elroy Chua <elroymx@gmail.com>
Date: Mon, 16 Dec 2024 13:33:32 +0800
Subject: [PATCH 3/4] refine user query state management

---
 frontend/src/app/providers.tsx                | 20 ++++++++-----------
 .../src/components/main-chat/main-chat.tsx    |  9 ++++-----
 .../src/components/search-bar/search-bar.tsx  |  4 ++--
 .../src/components/user-query/user-query.tsx  | 10 +++++-----
 4 files changed, 19 insertions(+), 24 deletions(-)

diff --git a/frontend/src/app/providers.tsx b/frontend/src/app/providers.tsx
index 73d3ddc..29b2f52 100644
--- a/frontend/src/app/providers.tsx
+++ b/frontend/src/app/providers.tsx
@@ -17,8 +17,6 @@ export type Message = {
 };
 
 type ChatContextType = {
-  userQuery: string;
-  setUserQuery: React.Dispatch<React.SetStateAction<string>>;
   messages: Message[];
   setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
   schemes: SearchResScheme[];
@@ -29,7 +27,6 @@ const ChatContext = createContext<ChatContextType | undefined>(undefined);
 
 export const ChatProvider = ({ children }: { children: ReactNode }) => {
   const [messages, setMessages] = useState<Message[]>([]);
-  const [userQuery, setUserQuery] = useState<string>("");
   const [schemes, setSchemes] = useState<SearchResScheme[]>([]);
   const [isInitialized, setIsInitialized] = useState(false);
 
@@ -37,15 +34,17 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
     if (!isInitialized) {
       try {
         const storedSchemes = localStorage.getItem("schemes");
-        const storedQuery = localStorage.getItem("userQuery");
+        const storedMessages = localStorage.getItem("userMessages");
 
         if (storedSchemes) {
           const parsedSchemes = JSON.parse(storedSchemes);
           setSchemes(parsedSchemes);
         }
-        if (storedQuery) {
-          setUserQuery(storedQuery);
+        if (storedMessages) {
+          const parsedMessages = JSON.parse(storedMessages);
+          setMessages(parsedMessages);
         }
+
         setIsInitialized(true);
       } catch (error) {
         console.error("Error loading from localStorage:", error);
@@ -66,20 +65,17 @@ export const ChatProvider = ({ children }: { children: ReactNode }) => {
   useEffect(() => {
     if (isInitialized) {
       try {
-        localStorage.setItem("userQuery", userQuery);
+        localStorage.setItem("userMessages", JSON.stringify(messages));
       } catch (error) {
-        console.error("Error saving userQuery to localStorage:", error);
+        console.error("Error saving messages to localStorage:", error);
       }
     }
-  }, [userQuery, isInitialized]);
-
+  }, [messages, isInitialized]);
   return (
     <ChatContext.Provider
       value={{
         messages,
         setMessages,
-        userQuery,
-        setUserQuery,
         schemes,
         setSchemes,
       }}
diff --git a/frontend/src/components/main-chat/main-chat.tsx b/frontend/src/components/main-chat/main-chat.tsx
index ab0ada8..dd1c59e 100644
--- a/frontend/src/components/main-chat/main-chat.tsx
+++ b/frontend/src/components/main-chat/main-chat.tsx
@@ -13,7 +13,7 @@ type MainChatProps = {
 };
 
 export default function MainChat({ sessionId }: MainChatProps) {
-  const { messages, setMessages, setUserQuery } = useChat();
+  const { messages, setMessages } = useChat();
   const [userInput, setUserInput] = useState("");
   const [isBotResponseGenerating, setIsBotResponseGenerating] =
     useState<boolean>(false);
@@ -22,7 +22,9 @@ export default function MainChat({ sessionId }: MainChatProps) {
 
   useEffect(() => {
     const storedQuery = localStorage.getItem("userQuery");
-    if (storedQuery && messages.length === 0) {
+    const storedMessages = localStorage.getItem("userMessages");
+
+    if (storedQuery && !storedMessages && messages.length === 0) {
       setMessages([
         {
           type: "bot",
@@ -42,9 +44,6 @@ export default function MainChat({ sessionId }: MainChatProps) {
       { type: "user", text: input },
     ]);
 
-    setUserQuery(input);
-    localStorage.setItem("userQuery", input);
-    setUserInput("");
     await fetchBotResponse(input);
   };
 
diff --git a/frontend/src/components/search-bar/search-bar.tsx b/frontend/src/components/search-bar/search-bar.tsx
index ad1c4fc..459de7d 100644
--- a/frontend/src/components/search-bar/search-bar.tsx
+++ b/frontend/src/components/search-bar/search-bar.tsx
@@ -30,19 +30,19 @@ const mapToSearchResScheme = (rawData: RawSchemeData): SearchResScheme => {
 };
 
 export default function SearchBar({ setSessionId }: SearchBarProps) {
-  const { setMessages, setUserQuery, setSchemes } = useChat();
+  const { setMessages, setSchemes } = useChat();
   const [userInput, setUserInput] = useState("");
   const [isBotResponseGenerating, setIsBotResponseGenerating] =
     useState<boolean>(false);
 
   const handleUserInput = (input: string) => {
     setMessages([
+      { type: "user", text: input },
       {
         type: "bot",
         text: "You can see the search results on the right. Please ask me any further questions about the schemes.",
       },
     ]);
-    setUserQuery(input);
     setUserInput("");
   };
 
diff --git a/frontend/src/components/user-query/user-query.tsx b/frontend/src/components/user-query/user-query.tsx
index da1223a..a00fb9f 100644
--- a/frontend/src/components/user-query/user-query.tsx
+++ b/frontend/src/components/user-query/user-query.tsx
@@ -6,14 +6,14 @@ import ResetQueryModal from "../reset-query-modal/reset-query-modal";
 import classes from "./user-query.module.css";
 
 export default function UserQuery() {
-  const { userQuery, setSchemes, setUserQuery } = useChat();
+  const { setSchemes, messages, setMessages } = useChat();
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
-
+  const firstMessage = messages[0].text;
   const handleReset = () => {
     localStorage.removeItem("schemes");
-    localStorage.removeItem("userQuery");
+    localStorage.removeItem("userMessages");
     setSchemes([]);
-    setUserQuery("");
+    setMessages([]);
   };
 
   return (
@@ -45,7 +45,7 @@ export default function UserQuery() {
         />
       </CardHeader>
       <CardBody className={`${classes.cardBody}`}>
-        <b>{userQuery}</b>
+        <b>{firstMessage}</b>
       </CardBody>
     </Card>
   );

From ef562cd6de81955c4b90e0a6eb6298ba7841bb49 Mon Sep 17 00:00:00 2001
From: Elroy Chua <elroymx@gmail.com>
Date: Mon, 16 Dec 2024 17:13:51 +0800
Subject: [PATCH 4/4] refine styling for mobile

---
 frontend/src/app/page.tsx                     |  4 +-
 .../src/components/chat-bar/mini-chat-bar.tsx |  2 +-
 .../components/main-chat/main-chat.module.css |  6 +++
 .../main-footer/main-footer.module.css        |  5 +--
 .../main-layout/main-layout.module.css        |  2 +-
 .../user-query/user-query.module.css          | 41 +++++++++++--------
 6 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 2d729bc..d822624 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -31,8 +31,8 @@ export default function Home() {
 
           {/* Mobile Layout */}
           <div
-            className={`md:hidden flex fixed bottom-0 left-0 right-0 bg-white transition-all duration-300 ease-in-out z-50
-            ${isExpanded ? "h-full" : "h-16"}`}
+            className={`md:hidden flex fixed bottom-0 left-0 right-0 bg-none transition-all duration-300 ease-in-out z-50
+            ${isExpanded ? "h-full" : "h-0"}`}
           >
             <div
               className={`absolute top-0 left-0 right-0 flex justify-between items-center p-2 bg-white border-b
diff --git a/frontend/src/components/chat-bar/mini-chat-bar.tsx b/frontend/src/components/chat-bar/mini-chat-bar.tsx
index 6162629..f27014e 100644
--- a/frontend/src/components/chat-bar/mini-chat-bar.tsx
+++ b/frontend/src/components/chat-bar/mini-chat-bar.tsx
@@ -15,7 +15,7 @@ export default function MiniChatBar({
       className={`absolute bottom-0 left-0 right-0 bg-none
         ${isExpanded ? "hidden" : "block"}`}
     >
-      <div className="p-4">
+      <div className="py-2 px-8">
         <Textarea
           readOnly
           onClick={onExpand}
diff --git a/frontend/src/components/main-chat/main-chat.module.css b/frontend/src/components/main-chat/main-chat.module.css
index 767f531..ada924d 100644
--- a/frontend/src/components/main-chat/main-chat.module.css
+++ b/frontend/src/components/main-chat/main-chat.module.css
@@ -9,3 +9,9 @@
   padding: 0.8rem;
   overflow-y: auto;
 }
+
+@media (max-width: 640px) {
+  .mainChat {
+    padding: 0.5rem 2rem;
+  }
+}
diff --git a/frontend/src/components/main-footer/main-footer.module.css b/frontend/src/components/main-footer/main-footer.module.css
index 60b7fa6..66f199e 100644
--- a/frontend/src/components/main-footer/main-footer.module.css
+++ b/frontend/src/components/main-footer/main-footer.module.css
@@ -42,10 +42,9 @@
   text-decoration: underline;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 640px) {
   .footer {
-    background-color: rgba(23, 19, 71, 1);
-    color: white;
+    margin-top: 1rem;
     padding: 2em 1.5em 7em 1.5em;
   }
 }
diff --git a/frontend/src/components/main-layout/main-layout.module.css b/frontend/src/components/main-layout/main-layout.module.css
index 6fcd9d2..20faea0 100644
--- a/frontend/src/components/main-layout/main-layout.module.css
+++ b/frontend/src/components/main-layout/main-layout.module.css
@@ -32,7 +32,7 @@
 /* Tablet Breakpoint (768px) */
 @media (max-width: 768px) {
   .contentWrapper {
-    padding: 0.5em 1em;
+    padding: 0.5em 2em;
   }
 
   .homePage {
diff --git a/frontend/src/components/user-query/user-query.module.css b/frontend/src/components/user-query/user-query.module.css
index e8021a6..20c8cb5 100644
--- a/frontend/src/components/user-query/user-query.module.css
+++ b/frontend/src/components/user-query/user-query.module.css
@@ -1,33 +1,42 @@
 .userQuery {
-    background: #E6F1FE;
-    margin: 0.5rem;
-    font-size: 0.875rem;
+  background: #e6f1fe;
+  margin: 0.5rem;
+  font-size: 0.875rem;
 }
 
 .card {
-    width: 95%;
-    padding: 3px;
-    border-radius: 16px;
-    line-height: 1.25rem;
+  width: 95%;
+  padding: 3px;
+  border-radius: 16px;
+  line-height: 1.25rem;
+}
+
+@media (max-width: 640px) {
+  .card {
+    width: 100%;
+  }
+  .userQuery {
+    margin: 0.5rem 0rem;
+  }
 }
 
 .cardHeader {
-    padding: 4px 8px;
+  padding: 4px 8px;
 }
 
 .cardBody {
-    padding: 4px 8px;
+  padding: 4px 8px;
 }
 
 .cardFooter {
-    padding: 0.25rem;
-    justify-content: right;
+  padding: 0.25rem;
+  justify-content: right;
 }
 
 .resetButton {
-    background: transparent;
-    border: none;
-    box-shadow: none;
-    width: 1.5em;
-    height: 1.5em;
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  width: 1.5em;
+  height: 1.5em;
 }