From 7b92eb44ff148b1517ae3c1d1d288691e9daee51 Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Sun, 8 Mar 2026 01:47:54 +0000
Subject: [PATCH] source/templates/index.html aktualisiert

---
 source/templates/index.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/source/templates/index.html b/source/templates/index.html
index fed95aa..1f01539 100644
--- a/source/templates/index.html
+++ b/source/templates/index.html
@@ -108,6 +108,18 @@
             background: #334155; padding: 2px 5px; border-radius: 4px;
             font-size: 8px; text-transform: uppercase; font-weight: bold; color: #94a3b8;
         }
+        .timestamp {
+            font-size: 0.7em;
+            color: #888; /* Ein dezentes Grau */
+            text-align: right;
+            margin-top: 4px;
+            opacity: 0.8;
+        }
+
+        /* Optional: Falls der KI-Text dunkel und der User-Text auf farbigem Grund ist */
+        .message.user .timestamp {
+            color: #e0e0e0; /* Helleres Grau, falls deine User-Bubble z.B. blau ist */
+        }
 
         .markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
     </style>
@@ -508,7 +520,17 @@
             initChat(chatWs);
 
             window.appendChat = function(user, msg, classes) {
+                const now = new Date();
+                const timeString = now.toLocaleDateString('de-DE') + " " + now.toLocaleTimeString('de-DE', {hour: '2-digit', minute:'2-digit'});
                 const win = document.getElementById('chat-window');
+                const msgDiv = document.createElement("div");
+                msgDiv.className = `message ${role}`;
+                msgDiv.innerHTML = `
+                    <div class="message-content">${text}</div>
+                    <div class="timestamp">${timeString}</div>
+                `;
+                chatBox.appendChild(msgDiv);
+                chatBox.scrollTop = chatBox.scrollHeight; // Automatisch nach unten scrollen
                 let formattedMsg = (user === "J.A.R.V.I.S.") ? marked.parse(msg) : msg;
                 win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1 text-[10px] uppercase">${user}</span><div class="markdown-content text-slate-300 text-sm">${formattedMsg}</div></div>`;
                 win.scrollTop = win.scrollHeight;