app/backend/InputOutputHandler.tsx

@@ -4,6 +4,7 @@ import ConversationFrontend from '../components/ConversationFrontend';
 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';
 
 const InputOutputBackend: React.FC = () => {
@@ -79,9 +80,13 @@ const InputOutputBackend: React.FC = () => {
   }, [preferredCurrency, preferredLanguage, timeFormat, preferredMeasurement, timeZone, dateFormat, myBoolean]);
 
   useEffect(() => {
-    const messageIndex = 0 // system prompt is the first so index 0
+    const updateSystemprompt = (prompt: string) => {
-    updateMessage(messageIndex, systemMessage)
+      setMessages(prevMessages => {
-    console.log(messages)
+        const newMessage = { role: "system", content: prompt }
+        return [newMessage, ...prevMessages]
+      })
+    }
+    updateSystemprompt
   },[systemMessage])
 
 
@@ -183,6 +188,17 @@ const InputOutputBackend: React.FC = () => {
     }
     const messageIndex = chatHistory.chats[chatHistory.selectedIndex].messages.length-1
     updateMessage(messageIndex,newContent)
+    // setMessages((prevMessages) => {
+    //   const updatedMessages = prevMessages.slice(); // Create a shallow copy of the current messages
+    //   if (updatedMessages.length > 0) {
+    //     const lastMessage = updatedMessages[updatedMessages.length - 1];
+    //     updatedMessages[updatedMessages.length - 1] = {
+    //       ...lastMessage, // Keep the existing role and other properties
+    //       content: newContent, // Update only the content
+    //     };
+    //   }
+    //   return updatedMessages; // Return the updated array
+    // });
   };
 
   const addMessage = (role: string, content: string) => {

app/components/AI.tsx

@@ -2,10 +2,14 @@
 import React from 'react';
 import InputOutputBackend from '../backend/InputOutputHandler';
 
-const AI: React.FC = () => {
+interface AIProps{
+  selectedIndex:number
+}
+
+const AI: React.FC<AIProps> = ({selectedIndex}) => {
   return (
       <div className="ai-container">
-        <InputOutputBackend />
+        <InputOutputBackend selectedIndex={selectedIndex}/>
       </div>
   );
 };

app/components/History.tsx

@@ -6,8 +6,6 @@ const History: React.FC = () => {
   const [isEditing, setIsEditing] = useState(false);
   const [inputValue, setInputValue] = useState<string>('');
 
-  setChatHistory(chatHistory)
-
   const handleEditButtonClick = () => {
     setIsEditing(true);
 

app/page.tsx

@@ -14,6 +14,7 @@ const LandingPage: React.FC = () => {
   const [showDivs, setShowDivs] = useState(true);
   const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI');
   const conversationRef = useRef<HTMLDivElement>(null);
+  const [selectedHistoryIndex, setSelectedHistoryIndex] = useState<number>(0)
 
     const [primaryColor, setPrimaryColor] = useState("#fefefe");
     const [secondaryColor, setSecondaryColor] = useState("#fefefe");
@@ -91,13 +92,13 @@ const LandingPage: React.FC = () => {
         <div className={`left-panel ${showDivs ? 'visible' : 'hidden'}`}>
           {showDivs && (
             <div className="history-models">
-              <History />
+              <History selectedIndex={selectedHistoryIndex} setSelectedIndex={setSelectedHistoryIndex}/>
               <Models />
             </div>
           )}
         </div>
         <div className={`conversation-container ${showDivs ? 'collapsed' : 'expanded'}`} ref={conversationRef}>
-          {view === 'AI' && <AI />}
+          {view === 'AI' && <AI selectedIndex={selectedHistoryIndex} />}
           {view === 'FAQ' && <FAQ />}
           {view === 'Documentation' && <Documentation />}
           {view === 'Credits' && <Credits />}