Sessions: Sidebar, Session-Wechsel, Archivieren-Button, alles session-bezogen

wwwroot/css/style.css

@@ -4,10 +4,16 @@ body {
   background: #222;
   color: #eee;
   display: flex;
-  flex-direction: column;
   height: 100vh;
 }
 
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
 body, input, select, button, textarea {
   font-family: monospace;
   font-size: 1em;
@@ -28,6 +34,7 @@ button:hover, select:hover, input:hover, textarea:hover {
 
 button {
   cursor: pointer;
+  line-height: 1.25;
 }
 
 textarea {
@@ -46,6 +53,68 @@ textarea {
   cursor: pointer;
 }
 
+/* ── Sidebar ── */
+
+#sidebar {
+  width: 260px;
+  background: #1a1a1a;
+  border-right: 1px solid #444;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.sidebar-header {
+  padding: 1em;
+  border-bottom: 1px solid #444;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-header h2 {
+  font-size: 1em;
+}
+
+#sessionList {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.session-item {
+  padding: 1em;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  border-left: 3px solid transparent;
+}
+
+.session-item:hover { background: #333; }
+
+.session-item.active {
+  background: #333;
+  border-left-color: #eee;
+}
+
+.session-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid transparent;
+}
+
+.session-date {
+  color: #888;
+}
+
+.session-rename {
+  background: #222;
+  border: 1px solid #888;
+  outline: none;
+  width: 100%;
+}
+
 /* ── Header ── */
 
 header {
@@ -79,7 +148,7 @@ header h1 {
   background: #111;
   border-bottom: 1px solid #333;
   flex-shrink: 0;
-  min-height: 2em;
+  min-height: 2.5em;
 }
 
 /* ── Chat ── */

wwwroot/index.html

@@ -8,30 +8,41 @@
 </head>
 <body>
 
-<header>
-  <h1>// gott</h1>
-  <select id="model">
-    <option value="sonnet">Sonnet 4.6</option>
-    <option value="opus">Opus 4.6</option>
-  </select>
-  <button class="clear-btn" id="clearBtn">Clear</button>
-  <div class="toggle">
-    <input type="checkbox" id="showSystem">
-    <label for="showSystem">System Prompt</label>
+<aside id="sidebar">
+  <div class="sidebar-header">
+    <h2>Sessions</h2>
+    <button id="newSessionBtn" title="Neue Session">+</button>
   </div>
-</header>
+  <div id="sessionList"></div>
+</aside>
 
-<textarea id="systemPrompt" placeholder="System Prompt (SOUL.md Inhalt etc.)"></textarea>
-<div class="meta-bar" id="meta"></div>
-<div id="chat"></div>
+<main>
+  <header>
+    <h1>// gott</h1>
+    <select id="model">
+      <option value="sonnet">Sonnet 4.6</option>
+      <option value="opus">Opus 4.6</option>
+    </select>
+    <button class="clear-btn" id="clearBtn">Archivieren</button>
+    <div class="toggle">
+      <input type="checkbox" id="showSystem">
+      <label for="showSystem">System Prompt</label>
+    </div>
+  </header>
 
-<div class="input-area">
-  <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
-  <button id="send">Senden</button>
-</div>
+  <textarea id="systemPrompt" placeholder="System Prompt (SOUL.md Inhalt etc.)"></textarea>
+  <div class="meta-bar" id="meta"></div>
+  <div id="chat"></div>
+
+  <div class="input-area">
+    <textarea id="input" placeholder="Nachricht eingeben... (Ctrl+Enter)" rows="2"></textarea>
+    <button id="send">Senden</button>
+  </div>
+</main>
 
 <script src="js/ui.js"></script>
 <script src="js/api.js"></script>
+<script src="js/session.js"></script>
 <script src="js/chat.js"></script>
 <script src="js/history.js"></script>
 <script src="js/app.js"></script>

wwwroot/js/api.js

@@ -1,31 +1,31 @@
 // ── API Calls ──
 
-async function apiChat(model, messages, systemPrompt) {
+async function apiChat(model, messages, systemPrompt, sessionId) {
   return fetch('/api/chat', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ model, messages, systemPrompt })
+    body: JSON.stringify({ model, messages, systemPrompt, sessionId })
   });
 }
 
-async function apiHistory(sessionId = 'null') {
+async function apiHistory(sessionId) {
   const resp = await fetch(`/api/history?sessionId=${sessionId}`);
   return resp.json();
 }
 
-async function apiHistoryPoll(afterId) {
-  const resp = await fetch(`/api/history/poll?afterId=${afterId}`);
+async function apiHistoryPoll(sessionId, afterId) {
+  const resp = await fetch(`/api/history/poll?sessionId=${sessionId}&afterId=${afterId}`);
   return resp.json();
 }
 
-async function apiArchive() {
-  const resp = await fetch('/api/archive', { method: 'POST' });
+async function apiArchive(sessionId) {
+  const resp = await fetch(`/api/archive?sessionId=${sessionId}`, { method: 'POST' });
   if (resp.status === 204) return null;
   return resp.json();
 }
 
-async function apiListArchives() {
-  const resp = await fetch('/api/archives');
+async function apiListArchives(sessionId) {
+  const resp = await fetch(`/api/archives?sessionId=${sessionId}`);
   return resp.json();
 }
 
@@ -33,3 +33,24 @@ async function apiGetArchive(archiveId) {
   const resp = await fetch(`/api/archive/${archiveId}`);
   return resp.json();
 }
+
+// ── Session API ──
+
+async function apiGetSessions() {
+  const resp = await fetch('/api/sessions');
+  return resp.json();
+}
+
+async function apiCreateSession() {
+  const resp = await fetch('/api/sessions', { method: 'POST' });
+  return resp.json();
+}
+
+async function apiUpdateSession(sessionId, data) {
+  const resp = await fetch(`/api/sessions/${sessionId}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
+  return resp.json();
+}

wwwroot/js/app.js

@@ -1,13 +1,18 @@
 // ── App Init ──
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
+  // Session initialisieren (vor allem anderen)
+  await initSession();
+
   // System Prompt Toggle
   $('#showSystem').addEventListener('change', () => {
     $('#systemPrompt').classList.toggle('visible', $('#showSystem').checked);
   });
 
-  // Send Button
+  // Buttons
   $('#send').addEventListener('click', sendMessage);
+  $('#clearBtn').addEventListener('click', clearChat);
+  $('#newSessionBtn').addEventListener('click', createNewSession);
 
   // Ctrl+Enter
   $('#input').addEventListener('keydown', (e) => {
@@ -20,9 +25,6 @@ document.addEventListener('DOMContentLoaded', () => {
     this.style.height = Math.min(this.scrollHeight, 150) + 'px';
   });
 
-  // Clear Button
-  $('#clearBtn').addEventListener('click', clearChat);
-
   // History laden
-  loadHistory();
+  await loadHistory();
 });

wwwroot/js/chat.js

@@ -4,17 +4,16 @@ const messages = [];
 let isStreaming = false;
 
 async function clearChat() {
-  const archive = await apiArchive();
+  const archive = await apiArchive(getCurrentSessionId());
+  if (!archive) return;
+
   messages.length = 0;
   chatEl().innerHTML = '';
   lastKnownMessageId = 0;
+  loadedArchiveCount = 0;
 
-  if (archive) {
-    setMeta(`Archiviert: ${archive.chainCount} Chains, ${archive.messageCount} Messages`);
-    showArchiveLoadButton();
-  } else {
-    setMeta('');
-  }
+  setMeta(`Archiviert: ${archive.chainCount} Chains, ${archive.messageCount} Messages`);
+  showArchiveLoadButton();
 }
 
 // ── Send Message ──
@@ -40,7 +39,7 @@ async function sendMessage() {
   let currentToolBox = null;
 
   try {
-    const resp = await apiChat(model, messages, systemPrompt);
+    const resp = await apiChat(model, messages, systemPrompt, getCurrentSessionId());
     const reader = resp.body.getReader();
     const decoder = new TextDecoder();
     let buffer = '';

wwwroot/js/history.js

@@ -6,12 +6,13 @@ let loadedArchiveCount = 0;
 
 async function loadHistory() {
   try {
-    const archives = await apiListArchives();
+    const sid = getCurrentSessionId();
+    const archives = await apiListArchives(sid);
     if (archives.length > 0) {
       showArchiveLoadButton();
     }
 
-    const data = await apiHistory('null');
+    const data = await apiHistory(sid);
     data.reverse();
 
     for (const entry of data) {
@@ -82,7 +83,7 @@ function getOrCreateArchiveDivider() {
 
 async function loadLatestArchive() {
   try {
-    const archives = await apiListArchives();
+    const archives = await apiListArchives(getCurrentSessionId());
     if (archives.length <= loadedArchiveCount) return;
 
     const latest = archives[loadedArchiveCount];
@@ -163,7 +164,7 @@ async function pollHistory() {
   if (isStreaming) return;
 
   try {
-    const newMessages = await apiHistoryPoll(lastKnownMessageId);
+    const newMessages = await apiHistoryPoll(getCurrentSessionId(), lastKnownMessageId);
     if (newMessages.length > 0) {
       renderMessages(newMessages, true);
       scrollDown();

wwwroot/js/session.js

@@ -0,0 +1,108 @@
+// ── Session State ──
+
+let currentSessionId = null;
+
+function getCurrentSessionId() {
+  return currentSessionId;
+}
+
+async function initSession() {
+  // SessionId 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);
+  }
+
+  await refreshSessionList();
+}
+
+async function createNewSession() {
+  const session = await apiCreateSession();
+  currentSessionId = session.sessionId;
+  localStorage.setItem('sessionId', currentSessionId);
+
+  // Chat leeren und neu laden
+  messages.length = 0;
+  chatEl().innerHTML = '';
+  lastKnownMessageId = 0;
+  loadedArchiveCount = 0;
+  setMeta('');
+
+  await refreshSessionList();
+  await loadHistory();
+}
+
+async function switchSession(sessionId) {
+  if (sessionId === currentSessionId) return;
+
+  currentSessionId = sessionId;
+  localStorage.setItem('sessionId', currentSessionId);
+
+  // Chat leeren und Session laden
+  messages.length = 0;
+  chatEl().innerHTML = '';
+  lastKnownMessageId = 0;
+  loadedArchiveCount = 0;
+  setMeta('');
+
+  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' : '');
+    div.dataset.sessionId = s.sessionId;
+
+    const name = document.createElement('span');
+    name.className = 'session-name';
+    name.textContent = s.name || 'Unbenannt';
+    name.addEventListener('dblclick', () => renameSession(s.sessionId, name));
+
+    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', () => switchSession(s.sessionId));
+
+    list.appendChild(div);
+  }
+}
+
+async function renameSession(sessionId, nameEl) {
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.className = 'session-rename';
+  input.value = nameEl.textContent;
+
+  nameEl.replaceWith(input);
+  input.focus();
+  input.select();
+
+  const save = async () => {
+    const newName = input.value.trim();
+    if (newName) {
+      await apiUpdateSession(sessionId, { name: newName });
+    }
+    await refreshSessionList();
+  };
+
+  input.addEventListener('blur', save);
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') input.blur();
+    if (e.key === 'Escape') { input.value = nameEl.textContent; input.blur(); }
+  });
+}