come on mannnnnn

app/backend/InputOutputHandler.tsx

@@ -5,33 +5,26 @@ 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 {
+const InputOutputBackend: React.FC = () => {
-  selectedIndex: number;
-}
-
-const InputOutputBackend: React.FC<InputOutputHandlerProps> = ({selectedIndex}) => {
   // # 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;
@@ -39,6 +32,23 @@ const InputOutputBackend: React.FC<InputOutputHandlerProps> = ({selectedIndex})
     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 },
+    setSystemMessage(newSystemMessage)
-      { role: "assistant", content: "Hello! How may I help you?" },
-    ]);
   }, [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 != "") {

app/components/ConversationFrontend.tsx

@@ -2,6 +2,7 @@ import React, { ForwardedRef, useState, useEffect, useRef } from 'react';
 import Markdown from 'react-markdown'
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
+import { useChatHistory } from '../hooks/useChatHistory';
 
 type Message = {
   role: string
@@ -21,6 +22,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
   ({ messages, onStopClick, onResendClick, onEditClick, onCopyClick, isClicked }, ref: ForwardedRef<HTMLDivElement>) => {
     const [isScrolling, setIsScrolling] = useState(true);
     const messagesEndRef = useRef<HTMLDivElement | null>(null);
+    const [chatHistory, setChatHistory, setSelectedIndex] = useChatHistory()
 
     useEffect(() => {
       const observer = new IntersectionObserver(
@@ -61,7 +63,7 @@ const ConversationFrontend = React.forwardRef<HTMLDivElement, ConversationProps>
     return (
       <div className="output" ref={ref}>
         <div className="conversation resize" id="conversation">
-          {messages.map((message, index) => {
+          {chatHistory.chats[chatHistory.selectedIndex].messages.map((message, index) => {
             if (index >= 1) {
 
               return (

app/components/History.tsx

@@ -1,11 +1,8 @@
 import React, { useState } from 'react';
+import { useChatHistory } from '../hooks/useChatHistory';
 
-interface HistoryProps{
+const History: React.FC = () => {
-  selectedIndex: number;
+  const [chatHistory, setChatHistory, setSelectedIndex] = useChatHistory()
-  setSelectedIndex: (index: number) => void;
-}
-
-const History: React.FC<HistoryProps> = ({selectedIndex, setSelectedIndex}) => {
 
   const handleHistoryClick = (index: number) => {
     setSelectedIndex(index)
@@ -16,9 +13,9 @@ const History: React.FC<HistoryProps> = ({selectedIndex, setSelectedIndex}) => {
       <div className="history">
         <ul>
           {/* Populate with history items */}
-          {Array.from({ length: 20 }, (_, index) => (
+          {chatHistory.chats.map((chats, index) => (
             <li key={index}>
-              <a href="#" onClick={()=>handleHistoryClick(index)}>history{index + 1}</a>
+              <a href="#" onClick={() => handleHistoryClick(index)}>{chatHistory.chats[index].name}</a>
             </li>
           ))}
         </ul>

app/hooks/useChatHistory.tsx

@@ -1,14 +1,55 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
-const useChatHistory = () => {
+interface Message {
-    type ChatMessages = {
+    role: string
-        name: string
+    content:string
-        messages: {}
-        timestamp: number
-    }
-
-
-    const [chathistory, setChatHistory] = useState<ChatMessages[]>()
 }
 
-export default useChatHistory
+interface ChatMessages {
+    name: string
+    messages: Message[]
+    timestamp: number
+    
+}
+
+interface GlobalChatHistory {
+    chats: ChatMessages[]
+    selectedIndex: number
+}
+
+let globalChatHistory: GlobalChatHistory = {
+    chats: [
+        { name: "Chat 1", messages: [], timestamp: 4 }
+    ],
+    selectedIndex:0
+}
+let listeners: ((state: GlobalChatHistory) => void)[] = []
+
+const setGlobalState = (newState: GlobalChatHistory): void => {
+    globalChatHistory = newState;
+    listeners.forEach((listener) => listener(globalChatHistory))
+}
+
+export const useChatHistory = (): [GlobalChatHistory, (newState:GlobalChatHistory) => void, (index:number)=>void] => {
+    const [state, setState] = useState<GlobalChatHistory>(globalChatHistory)
+
+    useEffect(() => {
+        console.log("help", globalChatHistory);
+        
+        const listener = (newState: GlobalChatHistory) => {
+            setState(newState)
+        }
+
+        listeners.push(listener)
+
+        return () => {
+            listeners = listeners.filter((l) => l!== listener)
+        }
+    }, [])
+
+    const setSelectedIndex = (index: number) => {
+        setGlobalState({...state,selectedIndex:index})
+    }
+
+    return [state, setGlobalState, setSelectedIndex]
+}