app/components/History.tsx

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

app/styles/history.css

@@ -37,3 +37,39 @@
     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;
+}
+