Webseite überarbeitet und Telegram Bot funktion hinzugefügt #1
@@ -179,7 +179,11 @@
|
|||||||
<div class="widget-header"><span>💬 J.A.R.V.I.S. - Chat</span> <span>⠿</span></div>
|
<div class="widget-header"><span>💬 J.A.R.V.I.S. - Chat</span> <span>⠿</span></div>
|
||||||
<div id="chat-window" class="flex-1 p-4 overflow-y-auto text-sm space-y-2 bg-[#0f172a]/50"></div>
|
<div id="chat-window" class="flex-1 p-4 overflow-y-auto text-sm space-y-2 bg-[#0f172a]/50"></div>
|
||||||
<div class="p-2 border-t border-slate-700 flex bg-slate-800">
|
<div class="p-2 border-t border-slate-700 flex bg-slate-800">
|
||||||
<input id="user-input" type="text" class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none border border-slate-700 focus:border-blue-500" placeholder="Frage eingeben...">
|
<textarea id="user-input"
|
||||||
|
class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none border border-slate-700 focus:border-blue-500 resize-none overflow-y-hidden"
|
||||||
|
placeholder="Frage eingeben... (Shift+Enter für neue Zeile)"
|
||||||
|
rows="1"
|
||||||
|
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"></textarea>
|
||||||
<button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-4 py-1 rounded text-xs">Senden</button>
|
<button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-4 py-1 rounded text-xs">Senden</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -280,15 +284,27 @@
|
|||||||
// 1. CHAT LOGIK
|
// 1. CHAT LOGIK
|
||||||
function initChat(chatWs) {
|
function initChat(chatWs) {
|
||||||
const input = document.getElementById('user-input');
|
const input = document.getElementById('user-input');
|
||||||
|
|
||||||
window.sendMessage = function() {
|
window.sendMessage = function() {
|
||||||
const msg = input.value.trim();
|
const msg = input.value.trim();
|
||||||
if(!msg) return;
|
if(!msg) return;
|
||||||
chatWs.send(msg);
|
chatWs.send(msg);
|
||||||
appendChat("Du", msg, "text-slate-400 font-bold");
|
appendChat("Du", msg, "text-slate-400 font-bold");
|
||||||
|
|
||||||
|
// Input zurücksetzen
|
||||||
input.value = '';
|
input.value = '';
|
||||||
|
input.style.height = 'auto'; // Höhe wieder einklappen
|
||||||
input.focus();
|
input.focus();
|
||||||
};
|
};
|
||||||
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); sendMessage(); } });
|
|
||||||
|
input.addEventListener('keydown', (e) => {
|
||||||
|
// Wenn ENTER gedrückt wird OHNE Shift -> Senden
|
||||||
|
if (e.key === 'Enter' && !e.shiftKey) {
|
||||||
|
e.preventDefault(); // Verhindert den Zeilenumbruch
|
||||||
|
sendMessage();
|
||||||
|
}
|
||||||
|
// Wenn ENTER + Shift gedrückt wird -> Standardverhalten (neue Zeile) bleibt
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// 2. MODAL LOGIK
|
// 2. MODAL LOGIK
|
||||||
|
|||||||
Reference in New Issue
Block a user