webinterface/client/js/chat.js

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
        }
    }
});