checkpoint chat
This commit is contained in:
parent
8d1ec4245f
commit
1102404c9d
35
client/chat.html
Normal file
35
client/chat.html
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Chat Interface</title>
|
||||||
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="main-container">
|
||||||
|
<!-- Linke Seitenleiste für Chat-Sessions -->
|
||||||
|
<div class="sidebar" id="chatSidebar">
|
||||||
|
<h3>Gespeicherte Chats</h3>
|
||||||
|
<button id="newChatButton">Neuer Chat</button>
|
||||||
|
<div id="chatList"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Chatbereich -->
|
||||||
|
<div class="chat-container">
|
||||||
|
|
||||||
|
|
||||||
|
<div class="chat-box" id="chatBox">
|
||||||
|
<!-- Nachrichten werden hier angezeigt -->
|
||||||
|
</div>
|
||||||
|
<div class="chat-input-container">
|
||||||
|
<textarea id="chatInput" class="chat-input" placeholder="Schreibe eine Nachricht..."></textarea>
|
||||||
|
<button id="sendButton" class="chat-send-button">Senden</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="js/chat.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -169,3 +169,200 @@ main {
|
|||||||
color: red;
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Chat Interface Styles */
|
||||||
|
.chat-container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: #f4f6f8;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-box {
|
||||||
|
flex: 1;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-message {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
max-width: 80%;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-message.user {
|
||||||
|
background-color: #007bff;
|
||||||
|
color: #fff;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-message.bot {
|
||||||
|
background-color: #e0e0e0;
|
||||||
|
color: #000;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input-container {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input {
|
||||||
|
flex: 1;
|
||||||
|
padding: 8px;
|
||||||
|
border-radius: 4px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
font-size: 16px;
|
||||||
|
resize: none; /* Entfernt die Möglichkeit, das Textfeld zu vergrößern */
|
||||||
|
overflow-y: auto; /* Fügt einen vertikalen Scroll hinzu, wenn nötig */
|
||||||
|
max-height: 80px; /* Maximale Höhe für das Textfeld */
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-input:focus {
|
||||||
|
outline: none; /* Entfernt den Standard-Fokusrahmen */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Kleinere Sendetaste */
|
||||||
|
.chat-send-button {
|
||||||
|
padding: 8px 12px; /* Kleinere Abmessungen */
|
||||||
|
background-color: #007bff;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 14px; /* Kleinere Schriftgröße */
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-send-button:hover {
|
||||||
|
background-color: #0056b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Haupt-Container für Layout mit Seitenleiste */
|
||||||
|
.main-container {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Linke Seitenleiste */
|
||||||
|
.sidebar {
|
||||||
|
width: 200px;
|
||||||
|
background-color: #2c3e50;
|
||||||
|
color: #fff;
|
||||||
|
padding: 15px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar h3 {
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-bottom: 1px solid #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-session-button {
|
||||||
|
background-color: #34495e;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
width: 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-session-button:hover {
|
||||||
|
background-color: #3b5998;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Chatbereich Styles (wie oben beschrieben) */
|
||||||
|
.chat-container {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #f4f6f8;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-box {
|
||||||
|
flex: 1;
|
||||||
|
padding: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatBox {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sendButton {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hinzufügen von Lösch-Button-Stilen */
|
||||||
|
.chat-session-button-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-session-button {
|
||||||
|
flex: 1;
|
||||||
|
background-color: #34495e;
|
||||||
|
color: #fff;
|
||||||
|
padding: 8px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: left;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-session-button:hover {
|
||||||
|
background-color: #3b5998;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Löschen-Button */
|
||||||
|
.delete-chat-button {
|
||||||
|
width: auto;
|
||||||
|
background-color: #e74c3c;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 5px;
|
||||||
|
margin-left: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.delete-chat-button:hover {
|
||||||
|
background-color: #c0392b;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Neuer Chat-Button */
|
||||||
|
#newChatButton {
|
||||||
|
background-color: #2ecc71;
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#newChatButton:hover {
|
||||||
|
background-color: #27ae60;
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
109
client/js/chat.js
Normal file
109
client/js/chat.js
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
let chatCount = 0; // Zähler für Chat-Sessions
|
||||||
|
|
||||||
|
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 !== '') {
|
||||||
|
const messageElement = document.createElement('div');
|
||||||
|
messageElement.classList.add('chat-message', 'user');
|
||||||
|
messageElement.innerText = messageText;
|
||||||
|
chatBox.prepend(messageElement);
|
||||||
|
|
||||||
|
// Nachricht speichern
|
||||||
|
saveMessage(chatCount, messageText);
|
||||||
|
|
||||||
|
// Sidebar-Button für den Chat-Verlauf erstellen, falls noch nicht vorhanden
|
||||||
|
if (document.getElementById(`chatSession-${chatCount}`) === null) {
|
||||||
|
createChatSessionButton(chatCount);
|
||||||
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
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));
|
||||||
|
}
|
||||||
|
|
||||||
|
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}`;
|
||||||
|
button.addEventListener('click', () => loadChatHistory(chatId));
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
Loading…
Reference in New Issue
Block a user