let chatCount = 0; // Zähler für Chat-Sessions let currentChatId = null; // Aktuell angezeigte Chat-ID 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 !== '' && currentChatId !== null) { // Stelle sicher, dass eine Chat-ID vorhanden ist const messageElement = document.createElement('div'); messageElement.classList.add('chat-message', 'user'); messageElement.innerText = messageText; chatBox.prepend(messageElement); // Nachricht speichern saveMessage(currentChatId, messageText); // Verwende die aktuelle Chat-ID // Sidebar-Button für den Chat-Verlauf erstellen, falls noch nicht vorhanden if (document.getElementById(`chatSession-${currentChatId}`) === null) { createChatSessionButton(currentChatId); } 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 currentChatId = newChatId; // Setze die aktuelle Chat-ID loadChatHistory(currentChatId); // 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)); // Aktualisiere den Button-Text in der Sidebar updateChatSessionButton(chatId, message); } function updateChatSessionButton(chatId, message) { const button = document.getElementById(`chatSession-${chatId}`); if (button) { const chatHistory = JSON.parse(localStorage.getItem(`chatHistory-${chatId}`)) || []; // Hole die erste Nachricht oder lasse es leer, wenn keine vorhanden ist const chatName = chatHistory.length > 0 ? chatHistory[0].text.slice(0, 10) : ''; // Nimm die ersten 10 Zeichen der ersten Nachricht button.innerText = chatName + "..." || `Chat ${chatId + 1}`; // Falls leer, setze auf "Chat x" } } 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}`; // Vorläufiger Name button.addEventListener('click', () => { loadChatHistory(chatId); // Lade den Chat-Verlauf und setze die aktuelle Chat-ID currentChatId = chatId; // Setze die aktuelle Chat-ID auf die ausgewählte Chat-ID }); // 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); clearChat(); }); // Elemente hinzufügen buttonContainer.appendChild(button); buttonContainer.appendChild(deleteButton); chatList.appendChild(buttonContainer); } function clearChat(){ const chatBox = document.getElementById('chatBox'); chatBox.innerHTML = ''; // Aktuellen Chat leeren } function loadChatHistory(chatId) { const chatBox = document.getElementById('chatBox'); chatBox.innerHTML = ''; // Aktuellen Chat leeren if (currentChatId === null) { return; // Wenn kein Chat ausgewählt ist, nichts laden } 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(); } // Lade alle Chat-Sitzungen beim Start 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); currentChatId = chatCount - 1; // Setze die aktuelle Chat-ID } else { const chatBox = document.getElementById('chatBox'); chatBox.innerHTML = ''; // Chat-Box leer, wenn keine Chats existieren } } // Beim Laden der Seite alle Chat-Sitzungen laden window.addEventListener('DOMContentLoaded', loadAllChatSessions); const chatInput = document.getElementById('chatInput'); // Event-Listener für das Senden der Nachricht und das Erstellen eines Zeilenumbruchs chatInput.addEventListener('keydown', (event) => { if (event.key === 'Enter') { // Prüfen, ob die Shift-Taste nicht gedrückt wird if (!event.shiftKey) { event.preventDefault(); // Verhindert das Standardverhalten (Absenden des Formulars) const messageText = chatInput.value.trim(); if (messageText !== '' && currentChatId !== null) { const messageElement = document.createElement('div'); messageElement.classList.add('chat-message', 'user'); messageElement.innerText = messageText; document.getElementById('chatBox').prepend(messageElement); // Nachricht speichern saveMessage(currentChatId, messageText); // Sidebar-Button für den Chat-Verlauf erstellen, falls noch nicht vorhanden if (document.getElementById(`chatSession-${currentChatId}`) === null) { createChatSessionButton(currentChatId); } chatInput.value = ''; // Input-Feld leeren } } else { // Shift + Enter: Zeilenumbruch chatInput.value += '\n'; // Zeilenumbruch in das Textfeld einfügen } } });