From 363a7d2fc3a407cc46dc8d0e81e3fe80091f0ed1 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Wed, 9 Oct 2024 13:27:35 +0200
Subject: [PATCH] New and improved buttons for the history
---
app/components/History.tsx | 35 +++++++++++++++++++++--------------
app/styles/history.css | 36 ++++++++++++++++++++++++++++++++++++
2 files changed, 57 insertions(+), 14 deletions(-)
diff --git a/app/components/History.tsx b/app/components/History.tsx
index e4d593a..d109f24 100644
--- a/app/components/History.tsx
+++ b/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>
- <input
- type="text"
- value={inputValue}
- onChange={handleInputChange}
- placeholder="Enter text"
- />
- <button onClick={handleSaveButtonClick}>Save</button>
- </div>
- ) : (
- <button onClick={handleEditButtonClick}>{'New Chat'}</button>
- )}
+ <div className="input-container">
+ <input
+ type="text"
+ value={inputValue}
+ onChange={handleInputChange}
+ placeholder="Enter text"
+ className="chat-input"
+ />
+ <button onClick={handleSaveButtonClick} className="save-btn">
+ Save
+ </button>
+ </div>
+ ) : (
+ <button onClick={handleEditButtonClick} className="newChat-btn">
+ New Chat
+ </button>
+ )}
</li>
</ul>
</div>
</div>
- );
+ );
};
export default History;
diff --git a/app/styles/history.css b/app/styles/history.css
index bf92b8e..3580acf 100644
--- a/app/styles/history.css
+++ b/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;
+}
+