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