From 08b5b62442c50b81353139b7d4d7dc73263806d7 Mon Sep 17 00:00:00 2001
From: Christian Rute <chris@serve2calc.com>
Date: Thu, 31 Oct 2024 14:45:19 +0100
Subject: [PATCH] simple messages works

---
 client/css/styles.css |  4 ++-
 client/js/chat.js     | 64 +++++++++++++++++++++++++++++++++++++------
 2 files changed, 58 insertions(+), 10 deletions(-)

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