CSS aufgeteilt (base/main/prototype), prototype.html eigenes Init-Script

wwwroot/prototype.html

@@ -4,7 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Gott - Debug Console</title>
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/prototype.css">
 </head>
 <body>
 
@@ -45,6 +46,81 @@
 <script src="js/session.js"></script>
 <script src="js/chat.js"></script>
 <script src="js/history.js"></script>
-<script src="js/app.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', async () => {
+  // Session aus localStorage oder neue erstellen
+  const stored = localStorage.getItem('sessionId');
+  if (stored) {
+    currentSessionId = stored;
+  } else {
+    const session = await apiCreateSession();
+    currentSessionId = session.sessionId;
+    localStorage.setItem('sessionId', currentSessionId);
+  }
+
+  $('#showSystem').addEventListener('change', () => {
+    $('#systemPrompt').classList.toggle('visible', $('#showSystem').checked);
+  });
+
+  $('#send').addEventListener('click', sendMessage);
+  $('#clearBtn').addEventListener('click', clearChat);
+  $('#newSessionBtn').addEventListener('click', async () => {
+    const session = await apiCreateSession();
+    currentSessionId = session.sessionId;
+    localStorage.setItem('sessionId', currentSessionId);
+    messages.length = 0;
+    chatEl().innerHTML = '';
+    lastKnownMessageId = 0;
+    loadedArchiveCount = 0;
+    setMeta('');
+    await refreshSessionList();
+    await loadHistory();
+  });
+
+  $('#input').addEventListener('keydown', (e) => {
+    if (e.ctrlKey && e.key === 'Enter') sendMessage();
+  });
+
+  $('#input').addEventListener('input', function () {
+    this.style.height = 'auto';
+    this.style.height = Math.min(this.scrollHeight, 150) + 'px';
+  });
+
+  await refreshSessionList();
+  await loadHistory();
+});
+
+async function refreshSessionList() {
+  const sessions = await apiGetSessions();
+  const list = $('#sessionList');
+  list.innerHTML = '';
+  for (const s of sessions) {
+    const div = document.createElement('div');
+    div.className = 'session-item' + (s.sessionId === currentSessionId ? ' active' : '');
+    const name = document.createElement('span');
+    name.className = 'session-name';
+    name.textContent = s.name || 'Unbenannt';
+    const date = document.createElement('span');
+    date.className = 'session-date';
+    date.textContent = new Date(s.updatedAt).toLocaleString('de-AT', {
+      day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
+    });
+    div.appendChild(name);
+    div.appendChild(date);
+    div.addEventListener('click', async () => {
+      currentSessionId = s.sessionId;
+      localStorage.setItem('sessionId', currentSessionId);
+      messages.length = 0;
+      chatEl().innerHTML = '';
+      lastKnownMessageId = 0;
+      loadedArchiveCount = 0;
+      setMeta('');
+      await refreshSessionList();
+      await loadHistory();
+    });
+    list.appendChild(div);
+  }
+}
+</script>
 </body>
 </html>