app/backend/InputOutputHandler.tsx

@@ -23,7 +23,7 @@ const InputOutputBackend: React.FC = () => {
   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[]>(chatHistory.chats[chatHistory.selectedIndex].messages || []);
+  const [messages, setMessages] = useState<Message[]>([]);
   const [myBoolean, setMyBoolean] = useState<boolean>(false);
   const [systemMessage, setSystemMessage] = useState<string>("You are a helpful assistant")
   const [weatherData, setWeatherData] = useState<string>("")
@@ -38,11 +38,16 @@ const InputOutputBackend: React.FC = () => {
 
   console.log(setSelectedIndex)
 
+  useEffect(() => {
+    setMessages(chatHistory.chats[chatHistory.selectedIndex].messages)
+  }, [chatHistory.selectedIndex])
+
 
   useEffect(() => {
     console.log("History", chatHistory);
     console.log("Messages", messages);
 
+
     // Get the current chat's messages
     const currentMessages = chatHistory.chats[chatHistory.selectedIndex].messages || [];
 

app/components/History.tsx

@@ -2,10 +2,11 @@ import React, { useState } from 'react';
 import { useChatHistory } from '../hooks/useChatHistory';
 
 const History: React.FC = () => {
-  const [chatHistory, setSelectedIndex] = useChatHistory()
+  const [chatHistory, setSelectedIndex, setChatHistory] = useChatHistory()
   const [isEditing, setIsEditing] = useState(false);
   const [inputValue, setInputValue] = useState<string>('');
-
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  
 
   const handleEditButtonClick = () => {
     setIsEditing(true);
@@ -24,23 +25,73 @@ const History: React.FC = () => {
   const handleHistoryClick = (index: number) => {
     setSelectedIndex(index)
     console.log("index",index);
-    
   }
 
+  const handleHistoryHover = (index:number) => {
+    setHoveredIndex(index)
+  }
 
+  const handleHistoryNotHover = () => {
+    setHoveredIndex(null)
+  }
+  
+  console.log("chat length",chatHistory.chats.length)
+  console.log("index",chatHistory.selectedIndex)
+
+  const handleHistoryDeletion = (index: number) => {
+    const currentIndex = chatHistory.selectedIndex;
+
+    // Create a new copy of the current chat history
+    const copyChats = { ...chatHistory };
+    copyChats.chats = [...chatHistory.chats]
+  
+  // Remove the chat at the specified index
+    copyChats.chats.splice(index,1)
+
+  // Determine new selectedIndex
+  let newSelectedIndex = currentIndex;
+
+  // Adjust selectedIndex based on the deletion
+  if (index === currentIndex) {
+    // If the deleted index is the currently selected one, reset the selected index
+    newSelectedIndex = copyChats.chats.length > 0 ? (index > 0 ? index - 1 : 0) : -1; // Set to previous or first chat or -1 if no chats left
+  } else if (index < currentIndex) {
+    // If the deleted chat is before the current selected index, decrement the selected index
+    newSelectedIndex = currentIndex - 1;
+    }
+  
+    copyChats.selectedIndex = newSelectedIndex
+    
+    console.log(copyChats)
+
+  // Set the updated chat history
+  setChatHistory(copyChats);
+};
+  
   return (
     <div className="history-background">
       <div className="history">
         <ul>
           {/* Populate with history items */}
           {chatHistory.chats.map((chats, index) => (
-            <li key={index}>
+            <li key={index} onMouseOver={()=>handleHistoryHover(index)} onMouseOut={handleHistoryNotHover} >
               <a href="#" onClick={() => handleHistoryClick(index)} style={{
                 backgroundColor: chatHistory.selectedIndex == index ? "var(--input-button-color)" : "",
-                borderRadius:"5px"
+                borderRadius: "5px",
+                width: index==hoveredIndex && chatHistory.chats.length >1 ? "85%":"100%"
               }}>
                 {chatHistory.chats[index].name}
               </a>
+              <button id="delete-chat-button"
+                onClick={()=>handleHistoryDeletion(index)}
+                disabled={(index == hoveredIndex && chatHistory.chats.length >1) ? false : true}
+                style={{
+                  width: index == hoveredIndex && chatHistory.chats.length >1 ? "15%" : "0",
+                  visibility: index == hoveredIndex && chatHistory.chats.length >1 ? "visible" : "hidden",
+                  marginLeft: index == hoveredIndex && chatHistory.chats.length >1? "0.5em":0
+              }}>
+                <svg viewBox="0 0 448 512"><path d="M135.2 17.7L128 32 32 32C14.3 32 0 46.3 0 64S14.3 96 32 96l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-96 0-7.2-14.3C307.4 6.8 296.3 0 284.2 0L163.8 0c-12.1 0-23.2 6.8-28.6 17.7zM416 128L32 128 53.2 467c1.6 25.3 22.6 45 47.9 45l245.8 0c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
+              </button>
             </li>
           ))}
           <li>
@@ -52,7 +103,7 @@ const History: React.FC = () => {
                   onChange={handleInputChange}
                   placeholder="Enter text"
                   className="chat-input"
-                />
+                  />
                 <button onClick={handleSaveButtonClick} className="save-btn">
                   Save
                 </button>
@@ -67,6 +118,6 @@ const History: React.FC = () => {
       </div>
     </div>
   );  
-};
+}
 
-export default History;
+  export default History;

app/styles/history.css

@@ -21,14 +21,40 @@
     padding: 10px 0;
     border-bottom: 1px solid var(--text-color);
     width: 100%;
+    height: fit-content;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    overflow: hidden;
 }
 .history ul li a{
-    display: block;
+    word-break: break-word;
+    overflow-wrap: break-word;
+    display: inline-block;
     text-decoration: none;
     color: var(--text-color); /* Use variable for link text color */
     width: 100%;
     padding: 5px;
 }
+
+#delete-chat-button{
+    width: 0;
+    height: 80%;
+    visibility: hidden;
+    border-radius: 5px;
+    background-color: var(--close-button-color);
+    transition: all 0.2s ease-in-out;
+}
+
+#delete-chat-button svg{
+    width: 100%;
+    padding: 3px;
+}
+
+#delete-chat-button:hover{
+    background-color: var(--close-button-hover-color);
+}
+
 .history ul li a:hover{
     background-color: var(--input-button-hover-color);
 }

app/styles/models.css

@@ -45,7 +45,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--text-color); /* Use variable for text color */
+    color: white; /* Use variable for text color */
     border-radius: 5%;
     overflow: hidden;
     position: relative;
@@ -67,7 +67,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: large;
+    font-size:medium;
     transition: opacity 0.5s ease;
     pointer-events: none;
     opacity: 0;
@@ -85,6 +85,11 @@
 .model-box:hover .overlay {
     opacity: 1;
 }
+
+.overlay h3{
+    color: var(--overlay-text-color);
+    width: 95%;
+}
 /* Model background styles */
 .code-model {
     background-image: url(/img/code.jpg);