app/backend/ChatHistory.ts

@@ -1,23 +1,25 @@
-/* type ChatMessage = {
+
+type Message = {
+    role: string;
+    content:string
+}
+
+type Chat = {
     name: string;
-    messages: any;
+    messages: Message[];
     timestamp: number;
 };
 
-let chatHistory: ChatMessage[] = [];
+export let chatHistory: Chat[] = [];
 
-function addMessageToHistory(name: string, message: any): void {
+export function addMessageToHistory(index: number, chat: Chat): void {
-    const newMessage: ChatMessage = {
+    if (index >= 0 && index < chatHistory.length) {
-        name: name,
+        chatHistory[index] = chat;
-        messages: message,
-        timestamp: Date.now()
-    };
-    chatHistory.push(newMessage);
-    console.log(`Added message from ${name}: ${message}`);
         chatHistory.sort((a, b) => b.timestamp - a.timestamp)
     }
+}
 
-function removeMessageFromHistory(timestamp: number): void {
+export function removeMessageFromHistory(timestamp: number): void {
     const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp);
     if (index > -1) {
         chatHistory.splice(index, 1);
@@ -26,4 +28,3 @@ function removeMessageFromHistory(timestamp: number): void {
         console.log(`Message not found with timestamp: ${timestamp}`);
     }
 }
- */

app/backend/InputOutputHandler.tsx

@@ -4,14 +4,26 @@ 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 { addMessageToHistory, removeMessageFromHistory } from "./ChatHistory";
 
-const InputOutputBackend: React.FC = () => {
+interface InputOutputHandlerProps {
+  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 [preferredCurrency, setPreferredCurrency] = useState<string>("USD");
   const [preferredLanguage, setPreferredLanguage] = useState<string>("english");
@@ -242,6 +254,7 @@ const InputOutputBackend: React.FC = () => {
   const handleStopClick = () => {
     endGetWorker()
     getNewToken()
+    setInputDisabled(false)
   }
 
   const handleResendClick = () => {

app/backend/database.ts

@@ -75,7 +75,7 @@ export const changePassword = async (usernameOrEmail: string, password: string,
   return await sendToDatabase(data);
 };
 
-export const getData = async (usernameOrEmail: string, password: string) => {
+export const getSettings = async (usernameOrEmail: string, password: string) => {
   const data = {
     action: "get_settings",
     username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
@@ -85,6 +85,38 @@ export const getData = async (usernameOrEmail: string, password: string) => {
   return await sendToDatabaseAndGetString(data);
 };
 
+export const changeSettings = async (usernameOrEmail: string, password: string, newData: object) => {
+  const data = {
+    action: "change_settings",
+    username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
+    email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
+    password,
+    data: newData,
+  };
+  return await sendToDatabase(data);
+};
+
+export const getHistory = async (usernameOrEmail: string, password: string) => {
+  const data = {
+    action: "get_history",
+    username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
+    email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
+    password,
+  };
+  return await sendToDatabaseAndGetString(data);
+};
+
+export const changeHistory = async (usernameOrEmail: string, password: string, newData: object) => {
+  const data = {
+    action: "change_history",
+    username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
+    email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
+    password,
+    data: newData,
+  };
+  return await sendToDatabase(data);
+};
+
 export const getEmail = async (usernameOrEmail: string, password: string): Promise<string> => {
   const data = {
     action: "get_email",
@@ -105,16 +137,6 @@ export const getName = async (usernameOrEmail: string, password: string): Promis
   return await sendToDatabaseAndGetString(data);
 };
 
-export const changeData = async (usernameOrEmail: string, password: string, newData: object) => {
-  const data = {
-    action: "change_settings",
-    username: usernameOrEmail.includes('@') ? undefined : usernameOrEmail,
-    email: usernameOrEmail.includes('@') ? usernameOrEmail : undefined,
-    password,
-    data: newData,
-  };
-  return await sendToDatabase(data);
-};
 
 export const checkCredentials = async (usernameOrEmail: string, password: string) => {
   const data = {

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

@@ -1,6 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
+
+interface HistoryProps{
+  selectedIndex: number;
+  setSelectedIndex: (index: number) => void;
+}
+
+const History: React.FC<HistoryProps> = ({selectedIndex, setSelectedIndex}) => {
+
+  const handleHistoryClick = (index: number) => {
+    setSelectedIndex(index)
+  }
 
-const History: React.FC = () => {
   return (
     <div className="history-background">
       <div className="history">
@@ -8,7 +18,7 @@ const History: React.FC = () => {
           {/* Populate with history items */}
           {Array.from({ length: 20 }, (_, index) => (
             <li key={index}>
-              <a href="#">history{index + 1}</a>
+              <a href="#" onClick={()=>handleHistoryClick(index)}>history{index + 1}</a>
             </li>
           ))}
         </ul>

app/components/Login.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import {
   createAccount,
   checkCredentials,
-  getData
+  getSettings
 } from '../backend/database';
 import Settings from './settings/Settings'; // Import the Settings component
 
@@ -62,7 +62,7 @@ const Login: React.FC = () => {
       const success = await checkCredentials(accountName, password);
       if (success) {
         setIsLoggedIn(true); // Successful login
-        const data = await getData(accountName, password)
+        const data = await getSettings(accountName, password)
         if (data) {
           if (typeof localStorage !== 'undefined') { 
             localStorage.setItem("dataFromServer", data)

app/components/settings/Settings.tsx

@@ -12,7 +12,7 @@ import PrivacySettings from './PrivacySettings';
 import FontSizeSetting from './FontSize';
 import OpenSourceModeToggle from './OpenSourceToggle';
 import {
-  changeData,
+  changeSettings,
   createAccount,
   deleteAccount,
 } from '../../backend/database';
@@ -355,7 +355,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
       }
 
       if (await createAccount(useName, useEmail, usePassword)) {
-        if (await changeData(useName, usePassword, settings)) {
+        if (await changeSettings(useName, usePassword, settings)) {
           localStorage.setItem("currentName", useName)
           localStorage.setItem("currentPassword", usePassword)
           localStorage.setItem("currentEmail", useEmail)
@@ -750,7 +750,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
             <button className="apply" onClick={async () => {
               getAllLocalStorageItems();
               closeSettings();
-              await changeData(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
+              await changeSettings(localStorage.getItem('accountName') ?? "hello", localStorage.getItem('accountPassword') ?? "hello", settings) // ????
               window.location.reload();
             }}>
               Apply

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 />}