Persistenz: SQLite + Dapper, chains/messages Tabellen, History-Endpoint, Frontend History-Load

wwwroot/index.html

@@ -269,6 +269,52 @@ document.getElementById('input').addEventListener('input', function() {
   this.style.height = 'auto';
   this.style.height = Math.min(this.scrollHeight, 150) + 'px';
 });
+
+async function loadHistory() {
+  try {
+    const resp = await fetch('/api/history?sessionId=null');
+    const data = await resp.json();
+    const chat = document.getElementById('chat');
+
+    // Chains sind DESC sortiert, also umkehren für chronologische Reihenfolge
+    data.reverse();
+
+    for (const entry of data) {
+      for (const msg of entry.messages) {
+        if (msg.role === 'user' && msg.type === 'text') {
+          const div = document.createElement('div');
+          div.className = 'msg user';
+          div.textContent = msg.content;
+          chat.appendChild(div);
+          messages.push({ role: 'user', content: msg.content });
+        } else if (msg.role === 'assistant' && msg.type === 'text') {
+          const div = document.createElement('div');
+          div.className = 'msg assistant';
+          div.textContent = msg.content;
+          chat.appendChild(div);
+          messages.push({ role: 'assistant', content: msg.content });
+        } else if (msg.role === 'assistant' && msg.type === 'tool_use') {
+          const div = document.createElement('div');
+          div.className = 'tool-box';
+          div.innerHTML = '<span class="tool-name">' + esc(msg.toolName) + '</span>'
+            + '<span class="tool-input">' + esc(truncate(msg.content, 120)) + '</span>';
+          chat.appendChild(div);
+        } else if (msg.type === 'tool_result') {
+          const div = document.createElement('div');
+          div.className = 'tool-box';
+          div.innerHTML = '<div class="tool-result ' + (msg.isError ? 'tool-error' : '') + '">'
+            + esc(truncate(msg.content, 300)) + '</div>';
+          chat.appendChild(div);
+        }
+      }
+    }
+    scrollDown();
+  } catch (e) {
+    console.error('History laden fehlgeschlagen:', e);
+  }
+}
+
+loadHistory();
 </script>
 </body>
 </html>