webinterface/client/js/chat.js

388 lines
14 KiB
JavaScript
Raw Permalink Normal View History

2024-11-14 17:43:37 +01:00
import { showAlert } from './shared_functions.js';
2024-10-30 15:06:17 +01:00
let chatCount = 0; // Zähler für Chat-Sessions
2024-10-30 15:11:26 +01:00
let currentChatId = null; // Aktuell angezeigte Chat-ID
2024-10-31 16:33:05 +01:00
let useMarkdown = true;
2024-10-30 15:06:17 +01:00
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();
2024-10-30 15:11:26 +01:00
if (messageText !== '' && currentChatId !== null) { // Stelle sicher, dass eine Chat-ID vorhanden ist
2024-10-30 15:06:17 +01:00
const messageElement = document.createElement('div');
messageElement.classList.add('chat-message', 'user');
2024-10-31 16:33:05 +01:00
//messageElement.innerText = messageText;
if (useMarkdown) {
messageElement.innerHTML = renderMarkdown(messageText);
} else {
messageElement.innerText = messageText;
}
2024-10-30 15:06:17 +01:00
chatBox.prepend(messageElement);
// Nachricht speichern
2024-10-30 15:11:26 +01:00
saveMessage(currentChatId, messageText); // Verwende die aktuelle Chat-ID
2024-10-30 15:06:17 +01:00
// Sidebar-Button für den Chat-Verlauf erstellen, falls noch nicht vorhanden
2024-10-30 15:11:26 +01:00
if (document.getElementById(`chatSession-${currentChatId}`) === null) {
createChatSessionButton(currentChatId);
2024-10-30 15:06:17 +01:00
}
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
2024-10-30 15:11:26 +01:00
currentChatId = newChatId; // Setze die aktuelle Chat-ID
2024-10-30 16:16:39 +01:00
loadChatHistory(currentChatId); // Lade den neuen Chat
2024-10-30 15:06:17 +01:00
}
2024-10-31 14:45:19 +01:00
async function saveMessage(chatId, message) {
2024-10-30 15:06:17 +01:00
const chatHistory = JSON.parse(localStorage.getItem(`chatHistory-${chatId}`)) || [];
2024-10-31 15:02:07 +01:00
chatHistory.push({ role: "user", content: message });
2024-10-30 15:06:17 +01:00
localStorage.setItem(`chatHistory-${chatId}`, JSON.stringify(chatHistory));
2024-10-30 15:11:26 +01:00
// Aktualisiere den Button-Text in der Sidebar
2024-10-31 16:08:07 +01:00
updateChatSessionButton(chatId);
2024-10-31 14:45:19 +01:00
// Sende die Nachricht an den Chatbot
const userMessage = getLastUserMessage();
if (userMessage) {
let a = await stream_api_open_ai(userMessage);
console.log("Komplette Nachricht: " + a)
// Update progress bar:
let consumption = await tokenize_api_open_ai()
updateProgressBar(consumption.count, consumption.max_model_len);
2024-10-31 14:45:19 +01:00
const chatHistory = JSON.parse(localStorage.getItem(`chatHistory-${chatId}`)) || [];
2024-10-31 15:02:07 +01:00
chatHistory.push({ role: "assistant", content: a });
2024-10-31 14:45:19 +01:00
localStorage.setItem(`chatHistory-${chatId}`, JSON.stringify(chatHistory));
}
2024-10-30 15:11:26 +01:00
}
2024-10-31 16:08:07 +01:00
function updateChatSessionButton(chatId) {
2024-10-30 15:11:26 +01:00
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
2024-10-31 15:02:07 +01:00
const chatName = chatHistory.length > 0 ? chatHistory[0].content.slice(0, 10) : ''; // Nimm die ersten 10 Zeichen der ersten Nachricht
2024-10-30 15:11:26 +01:00
button.innerText = chatName + "..." || `Chat ${chatId + 1}`; // Falls leer, setze auf "Chat x"
}
2024-10-30 15:06:17 +01:00
}
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}`;
2024-10-30 15:11:26 +01:00
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
});
2024-10-30 15:06:17 +01:00
// 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);
2024-10-30 16:16:39 +01:00
clearChat();
2024-10-30 15:06:17 +01:00
});
// Elemente hinzufügen
buttonContainer.appendChild(button);
buttonContainer.appendChild(deleteButton);
chatList.appendChild(buttonContainer);
}
2024-10-30 16:16:39 +01:00
function clearChat(){
const chatBox = document.getElementById('chatBox');
chatBox.innerHTML = ''; // Aktuellen Chat leeren
}
2024-10-30 15:06:17 +01:00
function loadChatHistory(chatId) {
const chatBox = document.getElementById('chatBox');
chatBox.innerHTML = ''; // Aktuellen Chat leeren
2024-10-30 16:16:39 +01:00
if (currentChatId === null) {
return; // Wenn kein Chat ausgewählt ist, nichts laden
}
2024-10-30 15:06:17 +01:00
const chatHistory = JSON.parse(localStorage.getItem(`chatHistory-${chatId}`)) || [];
chatHistory.forEach(entry => {
const messageElement = document.createElement('div');
2024-10-31 15:02:07 +01:00
messageElement.classList.add('chat-message', entry.role);
2024-11-18 17:48:18 +01:00
messageElement.innerHTML = renderMarkdown(entry.content);
2024-10-30 15:06:17 +01:00
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();
}
2024-10-30 16:16:39 +01:00
// Lade alle Chat-Sitzungen beim Start
2024-10-30 15:06:17 +01:00
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
}
});
2024-10-31 16:08:07 +01:00
for (let i = 0; i < chatCount; i++) {// Aktualisiere die Namen an der Seite
updateChatSessionButton(i);
}
2024-10-30 15:06:17 +01:00
// Lade den neuesten Chat-Verlauf
if (chatCount > 0) {
loadChatHistory(chatCount - 1);
2024-10-30 16:16:39 +01:00
currentChatId = chatCount - 1; // Setze die aktuelle Chat-ID
} else {
const chatBox = document.getElementById('chatBox');
chatBox.innerHTML = ''; // Chat-Box leer, wenn keine Chats existieren
2024-10-30 15:06:17 +01:00
}
}
// Beim Laden der Seite alle Chat-Sitzungen laden
window.addEventListener('DOMContentLoaded', loadAllChatSessions);
2024-10-30 16:07:52 +01:00
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') {
2024-10-31 15:52:28 +01:00
if (currentChatId == null){
createNewChat();
}
2024-10-30 16:07:52 +01:00
// 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
}
}
});
2024-10-30 19:21:33 +01:00
/* OpenAI zeug */
async function getModels() {
try {
const response = await fetch(`http://localhost:8015/v1/models`, {
method: 'GET',
headers: {
'Authorization': `Bearer YOUR_API_KEY`,
'Content-Type': 'application/json',
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const models = await response.json();
return models.data[0].id
} catch (error) {
2024-11-14 17:43:37 +01:00
if (error.message.includes('502')) {
showAlert("Server Error: 502 \nMaybe the LLM is offline?")
console.error('Bad Gateway: The server is acting as a gateway or proxy and received an invalid response from the upstream server.');
} else {
// Handle other errors here
console.error('Error fetching models:', error);
}
2024-10-30 19:21:33 +01:00
}
}
2024-10-31 15:02:07 +01:00
function getAllCurrentChatMessages() {
const cookieData = JSON.parse(localStorage.getItem(`chatHistory-${currentChatId}`)) || [];
return cookieData
}
2024-10-31 14:45:19 +01:00
function getLastUserMessage() {
// Lade die Cookie-Daten (ersetze dies durch den tatsächlichen Weg zur Cookie-Datenstruktur)
const cookieData = JSON.parse(localStorage.getItem(`chatHistory-${currentChatId}`)) || [];
2024-10-31 15:02:07 +01:00
2024-10-31 14:45:19 +01:00
// Filter nur die User-Nachrichten heraus
2024-10-31 15:02:07 +01:00
const userMessages = cookieData.filter(message => message.role === "user");
2024-10-31 14:45:19 +01:00
// Falls es User-Nachrichten gibt, die letzte davon zurückgeben
if (userMessages.length > 0) {
2024-10-31 15:02:07 +01:00
return userMessages[userMessages.length - 1].content;
2024-10-31 14:45:19 +01:00
}
return ''; // Rückgabe eines leeren Strings, falls keine Nachricht gefunden wird
}
2024-10-31 16:33:05 +01:00
function renderMarkdown(content) {
return marked.parse(content);
}
2024-10-31 14:45:19 +01:00
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 assistant';
2024-10-31 14:45:19 +01:00
chatBox.prepend(botMessageDiv);
2024-10-30 19:21:33 +01:00
let send_message_system = [{ role: "system", content: "You are a knowledgeable assistant." }];
let send_message_user = getAllCurrentChatMessages();
let send_message_final = send_message_system.concat(send_message_user)
console.log(send_message_final)
2024-10-30 19:21:33 +01:00
const response = await fetch('http://localhost:8015/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer YOUR_API_KEY`,
},
body: JSON.stringify({
model: await getModels(),
messages: send_message_final,
2024-10-30 19:21:33 +01:00
stream: true,
temperature: 0.3
})
});
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let result = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
2024-10-31 14:45:19 +01:00
2024-10-30 19:21:33 +01:00
const chunk = decoder.decode(value, { stream: true });
const lines = chunk.split('\n');
2024-10-31 14:45:19 +01:00
2024-10-30 19:21:33 +01:00
for (const line of lines) {
if (line && line.includes('data: ')) {
2024-10-31 14:45:19 +01:00
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;
2024-10-31 16:33:05 +01:00
if (useMarkdown) {
botMessageDiv.innerHTML = renderMarkdown(result);
} else {
botMessageDiv.textContent = result;
}
2024-10-31 14:45:19 +01:00
}
} catch (error) {
console.error('Error parsing JSON:', error, 'Received:', jsonStr);
2024-10-30 19:21:33 +01:00
}
}
}
}
return result;
}
function formatArrayToCustomString(array) {
return '[' +
array.map(dict => {
return '{' +
Object.entries(dict)
.map(([key, value]) => `'${key}':'${value}'`)
.join(', ') +
'}';
}).join(', ') +
']';
}
// Tokenizer
async function tokenize_api_open_ai() {
let send_message_system = [{ role: "system", content: "You are a knowledgeable assistant." }];
let send_message_user = getAllCurrentChatMessages();
let send_message_final = send_message_system.concat(send_message_user)
let formattedString = `"${formatArrayToCustomString(send_message_final)}"`;
console.log(formattedString)
const response = await fetch('http://localhost:8015/tokenize', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer YOUR_API_KEY`,
},
body: JSON.stringify({
model: await getModels(),
prompt: formattedString,
add_special_tokens: true
})
});
// Check if the response is successful
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const json = await response.json(); // Await the response.json() promise
console.log(json); // Log the parsed JSON response
return json
}
// Progress Bar
// Function to update the progress bar
function updateProgressBar(currentUsage, maxUsage) {
const percentage = (currentUsage / maxUsage) * 100;
// Update the width of the progress bar
const progressBar = document.getElementById('progress-bar');
progressBar.style.width = `${percentage}%`;
// Update the text
const usageText = document.getElementById('usage-text');
usageText.innerText = `${currentUsage} / ${maxUsage} used`;
}