Merge pull request #113 from bettersg/110_localstorage_ui_hotfix

110 localstorage UI hotfix
bettersg · Dec 16, 2024 · 7b5fc95 · 7b5fc95
2 parents 38720db + ef562cd
commit 7b5fc95
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 81 deletions.
diff --git 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">
@@ -31,8 +31,8 @@ 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
-            ${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/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,23 +27,24 @@ 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);
 
   useEffect(() => {
     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/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/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;
+  }
 }
diff --git 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-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/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
@@ -32,7 +32,7 @@
 /* Tablet Breakpoint (768px) */
 @media (max-width: 768px) {
   .contentWrapper {
-    padding: 0.5em 1em;
+    padding: 0.5em 2em;
   }
 
   .homePage {
@@ -54,12 +54,3 @@
     height: 90vh;
   }
 }
-
-.homePage {
-  max-width: 1500px;
-  height: 90vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
diff --git 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.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;
 }
diff --git 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>
   );