app/components/History.tsx

@@ -34,35 +34,28 @@ const History: React.FC = () => {
           {/* Populate with history items */}
           {chatHistory.chats.map((chats, index) => (
             <li key={index}>
-              <a href="#" onClick={() => handleHistoryClick(index)}>
+              <a href="#" onClick={() => handleHistoryClick(index)}>{chatHistory.chats[index].name}</a>
-                {chatHistory.chats[index].name}
-              </a>
             </li>
           ))}
           <li>
             {isEditing ? (
-              <div className="input-container">
+        <div>
-                <input
+          <input
-                  type="text"
+            type="text"
-                  value={inputValue}
+            value={inputValue}
-                  onChange={handleInputChange}
+            onChange={handleInputChange}
-                  placeholder="Enter text"
+            placeholder="Enter text"
-                  className="chat-input"
+          />
-                />
+          <button onClick={handleSaveButtonClick}>Save</button>
-                <button onClick={handleSaveButtonClick} className="save-btn">
+        </div>
-                  Save
+      ) : (
-                </button>
+        <button onClick={handleEditButtonClick}>{'New Chat'}</button>
-              </div>
+      )}
-            ) : (
-              <button onClick={handleEditButtonClick} className="newChat-btn">
-                New Chat
-              </button>
-            )}
           </li>
         </ul>
       </div>
     </div>
-  );  
+  );
 };
 
 export default History;

app/styles/history.css

@@ -37,39 +37,3 @@
     height: 86dvh;
     /* padding-bottom: 3dvh; */
 }
-.input-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-}
-.chat-input {
-    border-color: var(--input-border-color);
-    color: var(--text-color);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    padding: 10px;
-    border-radius: 5px;
-    width: 80%;
-    height: 50px;
-    box-sizing: border-box;
-    line-height: 30px;
-}
-.save-btn, .newChat-btn {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    width: 20%;
-    height: 50px;
-    background-color: var(--input-button-color);
-    color: var(--text-color);
-    border: none;
-    font-size: 0.9em;
-    border-radius: 5px;
-    margin-left: 10px;
-}
-
-.newChat-btn{
-    margin-left: 0px;
-}
-