Merge pull request #111 from bettersg/110_localstorage_ui_hotfix

refine ui and fix log error for resetIcon

frontend/src/app/page.tsx

@@ -20,7 +20,7 @@ export default function Home() {
         <>
           {/* Desktop Layout */}
           <div className={classes.mainLayout}>
-            <div className="flex md:hidden">
+            <div className="flex pt-28 md:hidden">
               <UserQuery />
             </div>
             <div className="hidden md:flex">

frontend/src/app/providers.tsx

@@ -31,17 +31,47 @@ 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(() => {
-    const storedSchemes = localStorage.getItem('schemes');
-    if (storedSchemes) {
-      setSchemes(JSON.parse(storedSchemes));
+    if (!isInitialized) {
+      try {
+        const storedSchemes = localStorage.getItem("schemes");
+        const storedQuery = localStorage.getItem("userQuery");
+
+        if (storedSchemes) {
+          const parsedSchemes = JSON.parse(storedSchemes);
+          setSchemes(parsedSchemes);
+        }
+        if (storedQuery) {
+          setUserQuery(storedQuery);
+        }
+        setIsInitialized(true);
+      } catch (error) {
+        console.error("Error loading from localStorage:", error);
+      }
     }
-  }, []);
+  }, [isInitialized]);
 
   useEffect(() => {
-    localStorage.setItem("schemes", JSON.stringify(schemes));
-  }, [schemes]);
+    if (isInitialized) {
+      try {
+        localStorage.setItem("schemes", JSON.stringify(schemes));
+      } catch (error) {
+        console.error("Error saving schemes to localStorage:", error);
+      }
+    }
+  }, [schemes, isInitialized]);
+
+  useEffect(() => {
+    if (isInitialized) {
+      try {
+        localStorage.setItem("userQuery", userQuery);
+      } catch (error) {
+        console.error("Error saving userQuery to localStorage:", error);
+      }
+    }
+  }, [userQuery, isInitialized]);
 
   return (
     <ChatContext.Provider

frontend/src/assets/icons/reset-icon.jsx

@@ -1,19 +1,32 @@
 export const ResetIcon = () => {
-    return (
-        <svg
-            width="1.5em"
-            height="1.5em"
-            viewBox="0 0 21 21"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none">
-                <g id="SVGRepo_bgCarrier" stroke-width="7"></g>
-                <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
-                    <g id="SVGRepo_iconCarrier"> <g fill="none" fill-rule="evenodd" stroke="#006FEE" stroke-linecap="round" stroke-linejoin="round" transform="matrix(0 1 1 0 2.5 2.5)">
-
-                        <path d="m3.98652376 1.07807068c-2.38377179 1.38514556-3.98652376 3.96636605-3.98652376 6.92192932 0 4.418278 3.581722 8 8 8s8-3.581722 8-8-3.581722-8-8-8"></path>
-                        <path d="m4 1v4h-4" transform="matrix(1 0 0 -1 0 6)"></path>
-                    </g>
-                </g>
-        </svg>
-    )
-}
+  return (
+    <svg
+      width="1.5em"
+      height="1.5em"
+      viewBox="0 0 21 21"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+    >
+      <g id="SVGRepo_bgCarrier" strokeWidth="7"></g>
+      <g
+        id="SVGRepo_tracerCarrier"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      ></g>
+      <g id="SVGRepo_iconCarrier">
+        {" "}
+        <g
+          fill="none"
+          fillRule="evenodd"
+          stroke="#006FEE"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          transform="matrix(0 1 1 0 2.5 2.5)"
+        >
+          <path d="m3.98652376 1.07807068c-2.38377179 1.38514556-3.98652376 3.96636605-3.98652376 6.92192932 0 4.418278 3.581722 8 8 8s8-3.581722 8-8-3.581722-8-8-8"></path>
+          <path d="m4 1v4h-4" transform="matrix(1 0 0 -1 0 6)"></path>
+        </g>
+      </g>
+    </svg>
+  );
+};

frontend/src/components/main-chat/main-chat.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Message, useChat } from "@/app/providers";
+import { useChat } from "@/app/providers";
 import ChatBar from "@/components/chat-bar/chat-bar";
 import ChatList from "@/components/chat-list/chat-list";
 import { Spacer } from "@nextui-org/react";
@@ -13,26 +13,38 @@ type MainChatProps = {
 };
 
 export default function MainChat({ sessionId }: MainChatProps) {
-  const { messages, setMessages } = useChat();
-
+  const { messages, setMessages, setUserQuery } = useChat();
   const [userInput, setUserInput] = useState("");
   const [isBotResponseGenerating, setIsBotResponseGenerating] =
     useState<boolean>(false);
   const [currentStreamingMessage, setCurrentStreamingMessage] = useState("");
-
   const scrollableDivRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    const storedQuery = localStorage.getItem("userQuery");
+    if (storedQuery && messages.length === 0) {
+      setMessages([
+        {
+          type: "bot",
+          text: "You can see the search results on the right. Please ask me any further questions about the schemes.",
+        },
+      ]);
+    }
+  }, []);
+
   useEffect(() => {
     handleScrollToBottom();
   }, [messages]);
 
   const handleUserInput = async (input: string) => {
-    setMessages(
-      (prevMessages: Message[]) =>
-        [...prevMessages, { type: "user", text: input }] as Message[]
-    );
+    setMessages((prevMessages) => [
+      ...prevMessages,
+      { type: "user", text: input },
+    ]);
+
+    setUserQuery(input);
+    localStorage.setItem("userQuery", input);
     setUserInput("");
-    // Trigger API call for bot response
     await fetchBotResponse(input);
   };
 
@@ -45,8 +57,7 @@ export default function MainChat({ sessionId }: MainChatProps) {
 
   const fetchBotResponse = async (userMessage: string) => {
     setIsBotResponseGenerating(true);
-    setCurrentStreamingMessage(""); // Reset streaming message
-
+    setCurrentStreamingMessage("");
     try {
       const response = await fetch(
         `${process.env.NEXT_PUBLIC_API_BASE_URL}/chat_message`,
@@ -74,7 +85,7 @@ export default function MainChat({ sessionId }: MainChatProps) {
         throw new Error("No reader available");
       }
 
-      let fullMessage = ""; // Keep track of the full message
+      let fullMessage = "";
 
       while (true) {
         const { done, value } = await reader.read();
@@ -87,8 +98,8 @@ export default function MainChat({ sessionId }: MainChatProps) {
           if (line.startsWith("data: ")) {
             try {
               const data = JSON.parse(line.slice(6));
-              fullMessage += data.chunk; // Add to full message
-              setCurrentStreamingMessage(fullMessage); // Update streaming with full message
+              fullMessage += data.chunk;
+              setCurrentStreamingMessage(fullMessage);
             } catch (e) {
               console.error("Error parsing SSE data:", e);
             }
@@ -101,7 +112,7 @@ export default function MainChat({ sessionId }: MainChatProps) {
       handleBotResponse("Sorry, something went wrong. Please try again.");
     } finally {
       setIsBotResponseGenerating(false);
-      setCurrentStreamingMessage(""); // Clear streaming message after adding to chat history
+      setCurrentStreamingMessage("");
     }
   };
 

frontend/src/components/main-layout/main-layout.module.css

@@ -56,15 +56,10 @@
 }
 
 .homePage {
-    max-width: 1500px;
-    height: 90vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-.welcomeMsg {
-    width: 35rem;
-    padding-bottom: 3rem;
+  max-width: 1500px;
+  height: 90vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }

frontend/src/components/user-query/user-query.tsx

@@ -6,12 +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 } = useChat();
+  const { userQuery, setSchemes, setUserQuery } = useChat();
   const { isOpen, onOpen, onOpenChange } = useDisclosure();
 
   const handleReset = () => {
     localStorage.removeItem("schemes");
+    localStorage.removeItem("userQuery");
     setSchemes([]);
+    setUserQuery("");
   };
 
   return (