come on mannnnnn

app/backend/InputOutputHandler.tsx

@@ -5,40 +5,50 @@ import InputFrontend from "../components/InputFrontend";
 import { sendToVoiceRecognition } from "./voice_backend"
 import axios from "axios";
 import { changeHistory, checkCredentials, getHistory } from './database';
+import { useChatHistory } from '../hooks/useChatHistory';
 
-interface InputOutputHandlerProps {
-  selectedIndex: number;
-}
-
-const InputOutputBackend: React.FC<InputOutputHandlerProps> = ({selectedIndex}) => {
+const InputOutputBackend: React.FC = () => {
   // # variables
   type Message = {
     role: string
     content: string
   }
 
-  type Chat = {
-    name?: string
-    messages: Message[]
-    timestamp: string
-  }
-
   // Define state variables for user preferences and messages
+  const [chatHistory, setChatHistory, setSelectedIndex] = useChatHistory()
   const [preferredCurrency, setPreferredCurrency] = useState<string>("USD");
   const [preferredLanguage, setPreferredLanguage] = useState<string>("english");
   const [timeFormat, setTimeFormat] = useState<string>("24-hour");
   const [preferredMeasurement, setPreferredMeasurement] = useState<string>("metric");
   const [timeZone, setTimeZone] = useState<string>("GMT");
   const [dateFormat, setDateFormat] = useState<string>("DD-MM-YYYY");
-  const [messages, setMessages] = useState<Message[]>([]);
+  const [messages, setMessages] = useState<Message[]>(chatHistory.chats[chatHistory.selectedIndex]?.messages || []);
   const [myBoolean, setMyBoolean] = useState<boolean>(false);
+  const [systemMessage, setSystemMessage] = useState<string>("You are a helpful assistant")
   const apiURL = new URL("http://localhost:5000/interstellar_ai/api/ai_create")
   if (typeof window !== 'undefined') {
     apiURL.hostname = window.location.hostname;
   } else {
     apiURL.hostname = "localhost"
   }
-  
+
+
+  useEffect(() => {
+
+    console.log("History", chatHistory);
+    console.log("Messages", messages);
+
+    // Get the current chat's messages
+    const currentMessages = chatHistory.chats[chatHistory.selectedIndex]?.messages || [];
+
+    // If currentMessages is not empty, update messages only if it's not the same
+    if (currentMessages.length > 0 && JSON.stringify(currentMessages) !== JSON.stringify(messages)) {
+        setMessages(currentMessages);
+    } else if (messages.length === 0) {
+        setMessages([{ role: "system", content: systemMessage }, { role: "assistant", content: "Hello! How can I help you?" }]);
+    }
+}, [chatHistory, setSelectedIndex]);
+
   // Update messages when any of the settings change
   useEffect(() => {
     if (typeof localStorage !== 'undefined') {
@@ -50,11 +60,14 @@ const InputOutputBackend: React.FC<InputOutputHandlerProps> = ({selectedIndex})
       setDateFormat(localStorage.getItem("dateFormat") || "DD-MM-YYYY");
       setMyBoolean(localStorage.getItem('myBoolean') === 'true');
     }
+  },[])
+
+  useEffect(() => {
     const measurementString = (preferredMeasurement == "Metric")
       ? "All measurements follow the metric system. Refuse to use any other measurement system."
       : "All measurements follow the imperial system. Refuse to use any other measurement system.";
 
-    const systemMessage = myBoolean
+    const newSystemMessage = myBoolean
       ? `You are operating in the timezone: ${timeZone}. Use the ${timeFormat} time format and ${dateFormat} for dates. 
       ${measurementString} 
       The currency is ${preferredCurrency}. 
@@ -62,12 +75,20 @@ const InputOutputBackend: React.FC<InputOutputHandlerProps> = ({selectedIndex})
       You are only able to change language if the user specifically states you must. 
       Do not answer in multiple languages or multiple measurement systems under any circumstances other than the user requesting it.`
       : `You are a helpful assistant`;
-    setMessages([
-      { role: "system", content: systemMessage },
-      { role: "assistant", content: "Hello! How may I help you?" },
-    ]);
+
+    setSystemMessage(newSystemMessage)
   }, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean]);
 
+  useEffect(() => {
+    const updateSystemprompt = (prompt: string) => {
+      setMessages(prevMessages => {
+        const newMessage = { role: "system", content: prompt }
+        return [newMessage, ...prevMessages]
+      })
+    }
+    updateSystemprompt
+  },[systemMessage])
+
 
   const conversationRef = useRef<HTMLDivElement>(null)
   const [copyClicked, setCopyClicked] = useState(false)
@@ -179,7 +200,11 @@ const InputOutputBackend: React.FC<InputOutputHandlerProps> = ({selectedIndex})
   };
 
   const addMessage = (role: string, content: string) => {
-    setMessages(previous => [...previous, { role, content }])
+    const newMessage: Message = { role: role, content: content }
+    setMessages((prevMessages) => [...prevMessages, newMessage])
+    const updatedChats = [...chatHistory.chats]
+    updatedChats[chatHistory.selectedIndex].messages.push(newMessage)
+    setChatHistory({...chatHistory, chats:updatedChats})
   }
   const handleSendClick = (inputValue: string, override: boolean) => {
     if (inputValue != "") {