From 1102404c9d23605b6e37e806c1c4483f5e8b0eb1 Mon Sep 17 00:00:00 2001 From: Christian Rute Date: Wed, 30 Oct 2024 15:06:17 +0100 Subject: [PATCH] checkpoint chat --- client/chat.html | 35 ++++++++ client/css/styles.css | 197 ++++++++++++++++++++++++++++++++++++++++++ client/js/chat.js | 109 +++++++++++++++++++++++ 3 files changed, 341 insertions(+) create mode 100644 client/chat.html create mode 100644 client/js/chat.js diff --git a/client/chat.html b/client/chat.html new file mode 100644 index 0000000..3bf84ca --- /dev/null +++ b/client/chat.html @@ -0,0 +1,35 @@ + + + + + + Chat Interface + + + + +
+ + + + +
+ + +
+ +
+
+ + +
+
+
+ + + + diff --git a/client/css/styles.css b/client/css/styles.css index 04189cd..86d495a 100644 --- a/client/css/styles.css +++ b/client/css/styles.css @@ -169,3 +169,200 @@ main { color: red; } +/* Chat Interface Styles */ +.chat-container { + width: 100%; + max-width: 600px; + margin: 0 auto; + display: flex; + flex-direction: column; + height: 100vh; + background-color: #f4f6f8; + border: 1px solid #ccc; + border-radius: 8px; + overflow: hidden; +} + +.chat-box { + flex: 1; + padding: 15px; + display: flex; + flex-direction: column-reverse; + overflow-y: auto; +} + +.chat-message { + margin-bottom: 10px; + padding: 10px; + border-radius: 8px; + max-width: 80%; + word-wrap: break-word; +} + +.chat-message.user { + background-color: #007bff; + color: #fff; + align-self: flex-end; +} + +.chat-message.bot { + background-color: #e0e0e0; + color: #000; + align-self: flex-start; +} + +.chat-input-container { + display: flex; + padding: 10px; + background-color: #ffffff; + border-top: 1px solid #ccc; +} + +.chat-input { + flex: 1; + padding: 8px; + border-radius: 4px; + border: 1px solid #ccc; + font-size: 16px; + resize: none; /* Entfernt die Möglichkeit, das Textfeld zu vergrößern */ + overflow-y: auto; /* Fügt einen vertikalen Scroll hinzu, wenn nötig */ + max-height: 80px; /* Maximale Höhe für das Textfeld */ +} + +.chat-input:focus { + outline: none; /* Entfernt den Standard-Fokusrahmen */ +} + +/* Kleinere Sendetaste */ +.chat-send-button { + padding: 8px 12px; /* Kleinere Abmessungen */ + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; + font-size: 14px; /* Kleinere Schriftgröße */ + cursor: pointer; +} + +.chat-send-button:hover { + background-color: #0056b3; +} + +/* Haupt-Container für Layout mit Seitenleiste */ +.main-container { + display: flex; + height: 100vh; +} + +/* Linke Seitenleiste */ +.sidebar { + width: 200px; + background-color: #2c3e50; + color: #fff; + padding: 15px; + overflow-y: auto; +} + +.sidebar h3 { + margin: 0; + padding-bottom: 10px; + border-bottom: 1px solid #fff; + font-size: 18px; +} + +.chat-session-button { + background-color: #34495e; + color: #fff; + padding: 10px; + margin-top: 10px; + border: none; + border-radius: 4px; + width: 100%; + cursor: pointer; + text-align: left; +} + +.chat-session-button:hover { + background-color: #3b5998; +} + +/* Chatbereich Styles (wie oben beschrieben) */ +.chat-container { + flex: 1; + display: flex; + flex-direction: column; + background-color: #f4f6f8; + border-left: 1px solid #ccc; + overflow: hidden; +} + +.chat-box { + flex: 1; + padding: 15px; + display: flex; + flex-direction: column-reverse; + overflow-y: auto; +} + +#chatBox { + display: flex; + flex-direction: column-reverse; +} + +#sendButton { + width: auto; +} + +/* Hinzufügen von Lösch-Button-Stilen */ +.chat-session-button-container { + display: flex; + align-items: center; + margin-top: 10px; +} + +.chat-session-button { + flex: 1; + background-color: #34495e; + color: #fff; + padding: 8px; + border: none; + border-radius: 4px; + text-align: left; + cursor: pointer; +} + +.chat-session-button:hover { + background-color: #3b5998; +} + +/* Löschen-Button */ +.delete-chat-button { + width: auto; + background-color: #e74c3c; + color: #fff; + border: none; + border-radius: 4px; + padding: 5px; + margin-left: 8px; + cursor: pointer; +} + +.delete-chat-button:hover { + background-color: #c0392b; +} + +/* Neuer Chat-Button */ +#newChatButton { + background-color: #2ecc71; + color: #fff; + border: none; + border-radius: 4px; + padding: 10px; + margin-bottom: 10px; + cursor: pointer; +} + +#newChatButton:hover { + background-color: #27ae60; +} + diff --git a/client/js/chat.js b/client/js/chat.js new file mode 100644 index 0000000..e24d90d --- /dev/null +++ b/client/js/chat.js @@ -0,0 +1,109 @@ +let chatCount = 0; // Zähler für Chat-Sessions + +document.getElementById('newChatButton').addEventListener('click', () => { + createNewChat(); +}); + +document.getElementById('sendButton').addEventListener('click', () => { + const chatBox = document.getElementById('chatBox'); + const chatInput = document.getElementById('chatInput'); + const messageText = chatInput.value.trim(); + + if (messageText !== '') { + const messageElement = document.createElement('div'); + messageElement.classList.add('chat-message', 'user'); + messageElement.innerText = messageText; + chatBox.prepend(messageElement); + + // Nachricht speichern + saveMessage(chatCount, messageText); + + // Sidebar-Button für den Chat-Verlauf erstellen, falls noch nicht vorhanden + if (document.getElementById(`chatSession-${chatCount}`) === null) { + createChatSessionButton(chatCount); + } + + chatInput.value = ''; // Input-Feld leeren + } +}); + +function createNewChat() { + // Erhöhe den Chat-Zähler und erstelle einen neuen Chat + const newChatId = chatCount++; + localStorage.setItem(`chatHistory-${newChatId}`, JSON.stringify([])); // Leeren Chat speichern + createChatSessionButton(newChatId); // Button für den neuen Chat erstellen + loadChatHistory(newChatId); // Lade den neuen Chat +} + +function saveMessage(chatId, message) { + const chatHistory = JSON.parse(localStorage.getItem(`chatHistory-${chatId}`)) || []; + chatHistory.push({ user: "user", text: message }); + localStorage.setItem(`chatHistory-${chatId}`, JSON.stringify(chatHistory)); +} + +function createChatSessionButton(chatId) { + const chatList = document.getElementById('chatList'); + + // Container für Chat-Button und Löschen-Button + const buttonContainer = document.createElement('div'); + buttonContainer.classList.add('chat-session-button-container'); + + // Chat-Button + const button = document.createElement('button'); + button.classList.add('chat-session-button'); + button.id = `chatSession-${chatId}`; + button.innerText = `Chat ${chatId + 1}`; + button.addEventListener('click', () => loadChatHistory(chatId)); + + // Löschen-Button + const deleteButton = document.createElement('button'); + deleteButton.classList.add('delete-chat-button'); + deleteButton.innerText = "✕"; + deleteButton.addEventListener('click', (event) => { + event.stopPropagation(); // Verhindert, dass der Chat geladen wird, wenn auf Löschen geklickt wird + deleteChat(chatId, buttonContainer); + }); + + // Elemente hinzufügen + buttonContainer.appendChild(button); + buttonContainer.appendChild(deleteButton); + chatList.appendChild(buttonContainer); +} + +function loadChatHistory(chatId) { + const chatBox = document.getElementById('chatBox'); + chatBox.innerHTML = ''; // Aktuellen Chat leeren + + const chatHistory = JSON.parse(localStorage.getItem(`chatHistory-${chatId}`)) || []; + chatHistory.forEach(entry => { + const messageElement = document.createElement('div'); + messageElement.classList.add('chat-message', entry.user); + messageElement.innerText = entry.text; + chatBox.prepend(messageElement); + }); +} + +function deleteChat(chatId, buttonContainer) { + // Entferne den Chat-Verlauf aus dem LocalStorage + localStorage.removeItem(`chatHistory-${chatId}`); + // Entferne den Button aus der Sidebar + buttonContainer.remove(); +} + +function loadAllChatSessions() { + Object.keys(localStorage).forEach((key) => { + if (key.startsWith('chatHistory-')) { + const chatId = parseInt(key.split('-')[1], 10); + createChatSessionButton(chatId); + chatCount = Math.max(chatCount, chatId + 1); // Chat-Zähler aktualisieren + } + }); + + // Lade den neuesten Chat-Verlauf + if (chatCount > 0) { + loadChatHistory(chatCount - 1); + } +} + +// Beim Laden der Seite alle Chat-Sitzungen laden +window.addEventListener('DOMContentLoaded', loadAllChatSessions);