added localStorage functionality to the entire project, LLM keeps getting overloaded

app/chatbot/page.tsx

@@ -5,22 +5,47 @@ import { useSearchParams } from "next/navigation";
 import ChatInput from "../utils/component/ui/ChatInput";
 import MessageWindow from "../utils/component/ui/MessageWindow";
 import { ChatHistory, ChatSetting, Message, MessageRole } from "@/app/exportType/types";
+import { getChatSessionByProjectId, saveChatSession } from "../utils/storage";
+
+
+function getInitialChatState(
+  projectId: string | null,
+): ChatHistory {
+  if (typeof window === 'undefined' || !projectId) {
+    return [];
+  }
+  const existingSession = getChatSessionByProjectId(projectId);
+  if (existingSession) {
+    return existingSession.history;
+  }
+  return [];
+}
 
 export default function Home() {
-  const [history, setHistory] = useState<ChatHistory>([])
-  const historyRef = useRef<ChatHistory>([]); // Create a ref for history
+  const searchParams = useSearchParams();
+  const projectId = searchParams.get('projectId');
+  const projectTitle = searchParams.get('projectTitle');
+  const cardTitle = searchParams.get('cardTitle');
+  const cardSummary = searchParams.get('cardSummary');
+
+  const [history, setHistory] = useState<ChatHistory>(() => getInitialChatState(projectId));
+  const [loading, setLoading] = useState(false);
+  const historyRef = useRef<ChatHistory>(history); // Create a ref for history
   const [settings] = useState<ChatSetting>({
     temperature: 1,
     model: "gemini-2.5-pro",
-    sysTemInstructions: "you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
+    systemInstructions: "you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
 
   });
-  const searchParams = useSearchParams();
+
   const initialMessageSent = useRef(false);
 
   useEffect(() => {
     historyRef.current = history; // Keep the ref updated with the latest history
-  }, [history]);
+    if (history.length > 0 && projectId && projectTitle) {
+      saveChatSession(projectId, projectTitle, history);
+    }
+  }, [history, projectId, projectTitle]);
 
   const handleSend = useCallback(async (message: string) => {
     const newUserMessage: Message = {
@@ -28,24 +53,90 @@ export default function Home() {
       parts: [{ text: message }],
     };
 
-    setHistory(prevHistory => {
-      const currentHistory = [...prevHistory, newUserMessage];
+    const currentHistory = [...historyRef.current, newUserMessage];
+    setHistory(currentHistory);
+    setLoading(true);
 
-      const sendApiRequest = async () => {
+    try {
+      const response = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          userMessage: message,
+          history: historyRef.current, // Use the ref for history *before* the new user message
+          settings: settings,
+        }),
+      });
+
+      const data = await response.json();
+      setLoading(false);
+
+      if (data.error) {
+        console.error("AI Error:", data.error);
+        // Add an error message to chat
+        const aiErrorMessage: Message = {
+          role: "model",
+          parts: [{ text: `Error: ${data.error}` }],
+        };
+        setHistory(prevHistory => [...prevHistory, aiErrorMessage]);
+        return;
+      }
+
+      const aiMessage: Message = {
+        role: "model" as MessageRole,
+        parts: [{ text: data.response }],
+      };
+
+      // Set the final history with the AI response
+      // This will trigger the useEffect to save
+      setHistory(prevHistory => [...prevHistory, aiMessage]);
+
+    } catch (error) {
+      console.error("Request Failed:", error);
+      setLoading(false);
+      const aiErrorMessage: Message = {
+        role: "model",
+        parts: [{ text: `Error: Could not connect to AI service.` }],
+      };
+      setHistory(prevHistory => [...prevHistory, aiErrorMessage]);
+    }
+  }, [settings, projectId, projectTitle]); // Added projectId and projectTitle
+
+  // This effect handles the *very first* message when selecting a card
+  useEffect(() => {
+    // Only run if:
+    // 1. We have a cardTitle (meaning we came from the cards page)
+    // 2. The history is empty (it's a new chat)
+    // 3. We haven't already tried to send this (initialMessageSent ref)
+    if (cardTitle && cardSummary && history.length === 0 && !initialMessageSent.current) {
+      initialMessageSent.current = true; // Mark as "attempted"
+      setLoading(true);
+
+      const message = `Explain the project titled '${cardTitle}' with the summary '${cardSummary}' in detail, and suggest suitable roles for a team working on it.`;
+
+      const newUserMessage: Message = {
+        role: "user",
+        parts: [{ text: message }],
+      };
+
+      // Add user message to history
+      // The useEffect for 'history' will save this
+      setHistory([newUserMessage]);
+
+      const sendInitialApiRequest = async () => {
         try {
           const response = await fetch("/api/chat", {
             method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
+            headers: { "Content-Type": "application/json" },
             body: JSON.stringify({
               userMessage: message,
-              history: historyRef.current, // Use the ref for history
+              history: [], // Send empty history for the first message
               settings: settings,
             }),
           });
 
           const data = await response.json();
+          setLoading(false);
 
           if (data.error) {
             console.error("AI Error:", data.error);
@@ -57,78 +148,24 @@ export default function Home() {
             parts: [{ text: data.response }],
           };
 
-          setHistory(prevHistory => [...prevHistory, aiMessage]);
-
-        }
-        catch (error) {
+          // Add AI response
+          // The useEffect for 'history' will save this new state
+          setHistory((prevHistory) => [...prevHistory, aiMessage]);
+        } catch (error) {
           console.error("Request Failed:", error);
+          setLoading(false);
         }
       };
-      sendApiRequest();
 
-      return currentHistory;
-    });
-  }, [settings]); // Now handleSend only depends on settings
-
-  useEffect(() => {
-    if (!initialMessageSent.current) {
-      const title = searchParams.get('title');
-      const summary = searchParams.get('summary');
-
-      if (title && summary) {
-        const message = `Explain the project titled '${title}' with the summary '${summary}' in detail, and suggest suitable roles for a team working on it.`;
-
-        const newUserMessage: Message = {
-          role: "user",
-          parts: [{ text: message }],
-        };
-
-        setTimeout(() => {
-          setHistory((prevHistory) => [...prevHistory, newUserMessage]); // Add user message to history
-        }, 0);
-
-        const sendInitialApiRequest = async () => {
-          try {
-            const response = await fetch("/api/chat", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                userMessage: message,
-                history: [...historyRef.current, newUserMessage], // Use ref for history
-                settings: settings,
-              }),
-            });
-
-            const data = await response.json();
-
-            if (data.error) {
-              console.error("AI Error:", data.error);
-              return;
-            }
-
-            const aiMessage: Message = {
-              role: "model" as MessageRole,
-              parts: [{ text: data.response }],
-            };
-
-            setHistory((prevHistory) => [...prevHistory, aiMessage]);
-          } catch (error) {
-            console.error("Request Failed:", error);
-          }
-        };
-
-        sendInitialApiRequest();
-        initialMessageSent.current = true;
-      }
+      sendInitialApiRequest();
     }
-  }, [searchParams, settings]); // Dependencies for this useEffect
+  }, [cardTitle, cardSummary, history.length, settings, projectId, projectTitle]);
 
 
   return (
     <div className="flex flex-col py-32">
-      <MessageWindow history={history} />
+      {/* Pass loading state to MessageWindow */}
+      <MessageWindow history={history} isLoading={loading} />
       <ChatInput onSend={handleSend} onOpenSettings={() => { }} />
     </div>
   );