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
    loadChatHistory(newChatId); // Lade den neuen Chat
    currentChatId = newChatId; // Setze die aktuelle Chat-ID
}

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

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

    currentChatId = chatId; // Setze die aktuelle Chat-ID
}

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