diff --git a/client/css/styles.css b/client/css/styles.css index 8722562..c69b4ff 100644 --- a/client/css/styles.css +++ b/client/css/styles.css @@ -310,7 +310,9 @@ main { #chatBox { display: flex; - flex-direction: column-reverse; + /*flex-direction: column-reverse; /* flex-direction: column-reverse; */ + flex-direction: column; /* normale Richtung */ + overflow-y: auto; } #sendButton { diff --git a/client/js/chat.js b/client/js/chat.js index e83ace9..0bc9bb7 100644 --- a/client/js/chat.js +++ b/client/js/chat.js @@ -37,13 +37,23 @@ function createNewChat() { loadChatHistory(currentChatId); // Lade den neuen Chat } -function saveMessage(chatId, message) { +async 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); + + // Sende die Nachricht an den Chatbot + const userMessage = getLastUserMessage(); + if (userMessage) { + let a = await stream_api_open_ai(userMessage); + console.log("Komplette Nachricht: " + a) + const chatHistory = JSON.parse(localStorage.getItem(`chatHistory-${chatId}`)) || []; + chatHistory.push({ user: "bot", text: a }); + localStorage.setItem(`chatHistory-${chatId}`, JSON.stringify(chatHistory)); + } } function updateChatSessionButton(chatId, message) { @@ -170,8 +180,6 @@ chatInput.addEventListener('keydown', (event) => { // Shift + Enter: Zeilenumbruch chatInput.value += '\n'; // Zeilenumbruch in das Textfeld einfügen } - let a = stream_api_open_ai() - console.log(a) } }); @@ -200,7 +208,27 @@ async function getModels() { } } -async function stream_api_open_ai() { +function getLastUserMessage() { + // Lade die Cookie-Daten (ersetze dies durch den tatsächlichen Weg zur Cookie-Datenstruktur) + const cookieData = JSON.parse(localStorage.getItem(`chatHistory-${currentChatId}`)) || []; + + // Filter nur die User-Nachrichten heraus + const userMessages = cookieData.filter(message => message.user === "user"); + + // Falls es User-Nachrichten gibt, die letzte davon zurückgeben + if (userMessages.length > 0) { + return userMessages[userMessages.length - 1].text; + } + + return ''; // Rückgabe eines leeren Strings, falls keine Nachricht gefunden wird +} + +async function stream_api_open_ai(userMessage) { + // Neues div-Element für die Antwort des Chatbots erstellen + const chatBox = document.getElementById('chatBox'); + const botMessageDiv = document.createElement('div'); + botMessageDiv.className = 'chat-message bot'; + chatBox.prepend(botMessageDiv); const response = await fetch('http://localhost:8015/v1/chat/completions', { method: 'POST', @@ -212,7 +240,7 @@ async function stream_api_open_ai() { model: await getModels(), messages: [ { role: 'system', content: 'You are a knowledgeable assistant.' }, - { role: 'user', content: 'Hi, i have to go, bye.' } + { role: 'user', content: userMessage } ], stream: true, temperature: 0.3 @@ -226,17 +254,35 @@ async function stream_api_open_ai() { while (true) { const { done, value } = await reader.read(); if (done) break; + const chunk = decoder.decode(value, { stream: true }); const lines = chunk.split('\n'); + for (const line of lines) { if (line && line.includes('data: ')) { - const json = JSON.parse(line.replace('data: ', '')); - if (json.choices[0].delta.content) { - result += json.choices[0].delta.content; - console.log(json.choices[0].delta.content); // Ausgabe in der Konsole + const jsonStr = line.replace('data: ', '').trim(); + + if (jsonStr === '[DONE]'){ + break; + } + + try { + const json = JSON.parse(jsonStr); + if (json.choices[0].delta.content) { + const token = json.choices[0].delta.content; + result += token; + + // Live-Update des Chatbot-Textes + botMessageDiv.textContent = result; + } + } catch (error) { + console.error('Error parsing JSON:', error, 'Received:', jsonStr); } } } } return result; } + + +//TODO: Die Chatbot-Nachrichten müssen noch in den Cache geladen werden!!! \ No newline at end of file