Archiv-System: Clear archiviert, Button lädt ältere Archive chronologisch, kein Limit

This commit is contained in:
Meleki committed 2026-02-26 16:52:58 +01:00
1 parent fb2c3a0720
commit 843c210209
9 files changed
+363 -129

No files matched your search

+43 -5
View File
@@ -15,19 +15,20 @@ public static class HistoryEndpoint
{
app.MapGet("/api/history", HandleHistory);
app.MapGet("/api/history/poll", HandlePoll);
app.MapPost("/api/archive", HandleArchive);
app.MapGet("/api/archives", HandleListArchives);
app.MapGet("/api/archive/{archiveId}", HandleGetArchive);
}
private static async Task HandleHistory(HttpContext ctx, DatabaseService db)
{
var sessionId = ctx.Request.Query["sessionId"].FirstOrDefault();
var limitStr = ctx.Request.Query["limit"].FirstOrDefault();
var limit = int.TryParse(limitStr, out var l) ? l : 50;
IEnumerable<ChainRecord> chains;
if (string.IsNullOrEmpty(sessionId) || sessionId == "null")
chains = await db.GetRecentChains(limit);
chains = await db.GetActiveChains();
else
chains = await db.GetSessionChains(sessionId, limit);
chains = await db.GetSessionChains(sessionId);
var result = new List<object>();
foreach (var chain in chains)
@@ -44,7 +45,44 @@ public static class HistoryEndpoint
var afterStr = ctx.Request.Query["afterId"].FirstOrDefault();
var afterId = long.TryParse(afterStr, out var a) ? a : 0;
var messages = await db.GetMessagesAfterId(afterId);
var messages = await db.GetActiveMessagesAfterId(afterId);
await ctx.Response.WriteAsJsonAsync(messages);
}
private static async Task HandleArchive(HttpContext ctx, DatabaseService db)
{
var archive = await db.CreateArchive();
if (archive == null)
{
ctx.Response.StatusCode = 204;
return;
}
await ctx.Response.WriteAsJsonAsync(archive);
}
private static async Task HandleListArchives(HttpContext ctx, DatabaseService db)
{
var archives = await db.GetArchives();
await ctx.Response.WriteAsJsonAsync(archives);
}
private static async Task HandleGetArchive(HttpContext ctx, DatabaseService db)
{
var archiveId = ctx.Request.RouteValues["archiveId"]?.ToString();
if (string.IsNullOrEmpty(archiveId))
{
ctx.Response.StatusCode = 400;
return;
}
var chains = await db.GetArchiveChains(archiveId);
var result = new List<object>();
foreach (var chain in chains)
{
var messages = await db.GetChainMessages(chain.ChainId);
result.Add(new { chain, messages });
}
await ctx.Response.WriteAsJsonAsync(result);
}
}
+11
View File
@@ -0,0 +1,11 @@
namespace Gott.Models;
public class ArchiveRecord
{
public long Id { get; set; }
public string ArchiveId { get; set; }
public string Name { get; set; }
public int ChainCount { get; set; }
public int MessageCount { get; set; }
public string CreatedAt { get; set; }
}
+1
View File
@@ -12,5 +12,6 @@ public class ChainRecord
public int Iterations { get; set; }
public string StopReason { get; set; }
public long DurationMs { get; set; }
public string ArchiveId { get; set; }
public string CreatedAt { get; set; }
}
+78 -15
View File
@@ -28,13 +28,23 @@ public class DatabaseService
{
using var conn = CreateConnection();
// Dapper: snake_case → PascalCase Mapping
Dapper.DefaultTypeMap.MatchNamesWithUnderscores = true;
conn.Execute(@"
CREATE TABLE IF NOT EXISTS archives (
id INTEGER PRIMARY KEY AUTOINCREMENT,
archive_id TEXT NOT NULL UNIQUE,
name TEXT,
chain_count INTEGER NOT NULL DEFAULT 0,
message_count INTEGER NOT NULL DEFAULT 0,
created_at TEXT NOT NULL
);
CREATE TABLE IF NOT EXISTS chains (
id INTEGER PRIMARY KEY AUTOINCREMENT,
chain_id TEXT NOT NULL UNIQUE,
session_id TEXT,
archive_id TEXT,
model TEXT NOT NULL,
system_prompt TEXT,
input_tokens INTEGER NOT NULL DEFAULT 0,
@@ -60,10 +70,63 @@ public class DatabaseService
);
CREATE INDEX IF NOT EXISTS idx_chains_session ON chains(session_id);
CREATE INDEX IF NOT EXISTS idx_chains_archive ON chains(archive_id);
CREATE INDEX IF NOT EXISTS idx_messages_chain ON messages(chain_id);
");
}
// ── Archives ──
public async Task<ArchiveRecord> CreateArchive(string name = null)
{
using var conn = CreateConnection();
// Zähle aktive Chains und Messages
var chainCount = await conn.ExecuteScalarAsync<int>(
"SELECT COUNT(*) FROM chains WHERE archive_id IS NULL");
if (chainCount == 0) return null;
var messageCount = await conn.ExecuteScalarAsync<int>(@"
SELECT COUNT(*) FROM messages
WHERE chain_id IN (SELECT chain_id FROM chains WHERE archive_id IS NULL)");
var archive = new ArchiveRecord
{
ArchiveId = Guid.NewGuid().ToString("N"),
Name = name,
ChainCount = chainCount,
MessageCount = messageCount,
CreatedAt = DateTime.UtcNow.ToString("o")
};
await conn.ExecuteAsync(@"
INSERT INTO archives (archive_id, name, chain_count, message_count, created_at)
VALUES (@ArchiveId, @Name, @ChainCount, @MessageCount, @CreatedAt)
", archive);
// Alle aktiven Chains diesem Archiv zuweisen
await conn.ExecuteAsync(
"UPDATE chains SET archive_id = @archiveId WHERE archive_id IS NULL",
new { archiveId = archive.ArchiveId });
return archive;
}
public async Task<IEnumerable<ArchiveRecord>> GetArchives(int limit = 20)
{
using var conn = CreateConnection();
return await conn.QueryAsync<ArchiveRecord>(
"SELECT * FROM archives ORDER BY id DESC LIMIT @limit", new { limit });
}
public async Task<IEnumerable<ChainRecord>> GetArchiveChains(string archiveId)
{
using var conn = CreateConnection();
return await conn.QueryAsync<ChainRecord>(
"SELECT * FROM chains WHERE archive_id = @archiveId ORDER BY id",
new { archiveId });
}
// ── Chains ──
public async Task CreateChain(ChainRecord chain)
@@ -71,8 +134,8 @@ public class DatabaseService
using var conn = CreateConnection();
chain.CreatedAt = DateTime.UtcNow.ToString("o");
await conn.ExecuteAsync(@"
INSERT INTO chains (chain_id, session_id, model, system_prompt, input_tokens, output_tokens, iterations, stop_reason, duration_ms, created_at)
VALUES (@ChainId, @SessionId, @Model, @SystemPrompt, @InputTokens, @OutputTokens, @Iterations, @StopReason, @DurationMs, @CreatedAt)
INSERT INTO chains (chain_id, session_id, archive_id, model, system_prompt, input_tokens, output_tokens, iterations, stop_reason, duration_ms, created_at)
VALUES (@ChainId, @SessionId, @ArchiveId, @Model, @SystemPrompt, @InputTokens, @OutputTokens, @Iterations, @StopReason, @DurationMs, @CreatedAt)
", chain);
}
@@ -98,21 +161,19 @@ public class DatabaseService
);
}
public async Task<IEnumerable<ChainRecord>> GetRecentChains(int limit = 50)
public async Task<IEnumerable<ChainRecord>> GetActiveChains()
{
using var conn = CreateConnection();
return await conn.QueryAsync<ChainRecord>(
"SELECT * FROM chains ORDER BY id DESC LIMIT @limit", new { limit }
);
"SELECT * FROM chains WHERE archive_id IS NULL ORDER BY id DESC");
}
public async Task<IEnumerable<ChainRecord>> GetSessionChains(string sessionId, int limit = 100)
public async Task<IEnumerable<ChainRecord>> GetSessionChains(string sessionId)
{
using var conn = CreateConnection();
return await conn.QueryAsync<ChainRecord>(
"SELECT * FROM chains WHERE session_id = @sessionId ORDER BY id DESC LIMIT @limit",
new { sessionId, limit }
);
"SELECT * FROM chains WHERE session_id = @sessionId AND archive_id IS NULL ORDER BY id DESC",
new { sessionId });
}
// ── Messages ──
@@ -136,12 +197,14 @@ public class DatabaseService
);
}
public async Task<IEnumerable<MessageRecord>> GetMessagesAfterId(long afterId, int limit = 200)
public async Task<IEnumerable<MessageRecord>> GetActiveMessagesAfterId(long afterId, int limit = 200)
{
using var conn = CreateConnection();
return await conn.QueryAsync<MessageRecord>(
"SELECT * FROM messages WHERE id > @afterId ORDER BY id LIMIT @limit",
new { afterId, limit }
);
return await conn.QueryAsync<MessageRecord>(@"
SELECT m.* FROM messages m
JOIN chains c ON m.chain_id = c.chain_id
WHERE m.id > @afterId AND c.archive_id IS NULL
ORDER BY m.id LIMIT @limit",
new { afterId, limit });
}
}
+70 -96
View File
@@ -1,78 +1,71 @@
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: monospace;
background: #1a1a2e;
color: #e0e0e0;
background: #222;
color: #eee;
display: flex;
flex-direction: column;
height: 100vh;
}
body, input, select, button, textarea {
font-family: monospace;
font-size: 1em;
line-height: 1.5;
color: #eee;
}
/* ── Header ── */
header {
padding: 12px 20px;
border-bottom: 1px solid #333;
padding: 1em 2em;
border-bottom: 1px solid #444;
display: flex;
align-items: center;
gap: 12px;
gap: 1em;
flex-shrink: 0;
}
header h1 {
color: #7c83ff;
font-size: 1.2em;
font-size: 1em;
}
select {
font-family: monospace;
padding: 6px 10px;
border: 1px solid #333;
border-radius: 4px;
background: #16213e;
color: #e0e0e0;
}
.clear-btn {
padding: 6px 10px;
button, select, textarea {
padding: .5em;
border: 1px solid #444;
background: #333;
color: #aaa;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: monospace;
font-size: 0.85em;
outline: none;
}
.clear-btn:hover { background: #444; }
button:hover, select:hover, input:hover, textarea:hover {
border-color: #666;
}
button {
cursor: pointer;
}
textarea {
height: 8em;
min-height: 8em;
}
.system-toggle {
display: flex;
align-items: center;
gap: 6px;
gap: .5em;
margin-left: auto;
}
.system-toggle label {
font-size: 0.85em;
color: #888;
cursor: pointer;
}
#systemPrompt {
display: none;
width: calc(100% - 40px);
font-family: monospace;
padding: 8px;
border: 1px solid #333;
border-radius: 4px;
background: #0a0a1a;
color: #e0e0e0;
resize: vertical;
font-size: 12px;
min-height: 40px;
margin: 8px 20px 0;
width: calc(100% - 2em);
margin: 1em;
padding: 1em;
}
#systemPrompt.visible { display: block; }
@@ -80,13 +73,11 @@ select {
/* ── Meta Bar ── */
.meta-bar {
padding: 4px 20px;
background: #0a0a1a;
border-bottom: 1px solid #222;
font-size: 0.8em;
color: #666;
padding: .5em;
background: #111;
border-bottom: 1px solid #333;
flex-shrink: 0;
min-height: 24px;
min-height: 2em;
}
/* ── Chat ── */
@@ -94,53 +85,47 @@ select {
#chat {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
padding: 1em;
display: flex;
flex-direction: column;
gap: 12px;
gap: 1em;
}
.msg {
max-width: 85%;
padding: 10px 14px;
border-radius: 8px;
padding: 1em;
white-space: pre-wrap;
word-break: break-word;
line-height: 1.5;
}
.msg.user {
align-self: flex-end;
background: #16213e;
border: 1px solid #333;
background: #333;
border: 1px solid #444;
}
.msg.assistant {
align-self: flex-start;
background: #0f3460;
border: 1px solid #1a4a7a;
background: #111;
border: 1px solid #333;
}
.msg.system-info {
align-self: center;
background: #1a1a2e;
border: 1px solid #333;
color: #888;
font-size: 0.85em;
border: 1px solid #444;
text-align: center;
max-width: 95%;
}
/* ── Cursor ── */
.msg .cursor {
display: inline-block;
width: 2px;
width: .125em;
height: 1em;
background: #7c83ff;
background: #fff;
animation: blink 0.8s infinite;
vertical-align: text-bottom;
margin-left: 1px;
margin-left: .125em;
}
@keyframes blink {
@@ -152,55 +137,44 @@ select {
.tool-box {
align-self: center;
max-width: 95%;
padding: 8px 12px;
border-radius: 6px;
background: #0a1e3d;
border: 1px solid #1a3a5c;
font-size: 0.85em;
padding: .5em;
background: #333;
border: 1px solid #444;
}
.tool-name { color: #7c83ff; font-weight: bold; }
.tool-input { color: #888; margin-left: 6px; font-size: 0.85em; }
.tool-result { color: #6bff8a; font-size: 0.8em; margin-top: 4px; max-height: 100px; overflow-y: auto; }
.tool-error { color: #ff6b6b; }
.tool-spinner { color: #7c83ff; }
/* ── Input Area ── */
.input-area {
padding: 12px 20px;
border-top: 1px solid #333;
display: flex;
gap: 8px;
flex-shrink: 0;
gap: 1em;
padding: 1em;
}
.input-area textarea {
flex: 1;
font-family: monospace;
padding: 10px;
border: 1px solid #333;
border-radius: 4px;
background: #0f3460;
color: #e0e0e0;
resize: none;
font-size: 14px;
min-height: 60px;
max-height: 150px;
}
.input-area button {
padding: 10px 20px;
background: #7c83ff;
color: #fff;
border: none;
border-radius: 4px;
font-family: monospace;
font-weight: bold;
cursor: pointer;
align-self: flex-end;
}
.input-area button:hover { background: #5a63e0; }
.input-area button:disabled { opacity: 0.5; cursor: not-allowed; }
/* ── Archive ── */
.archive-container {
display: flex;
flex-direction: column;
gap: 1em;
}
.archived { opacity: 0.6; }
/* ── Archive Button ── */
.archive-load-btn {
display: block;
margin-inline: auto;
}
+18 -2
View File
@@ -8,8 +8,8 @@ async function apiChat(model, messages, systemPrompt) {
});
}
async function apiHistory(sessionId = 'null', limit = 50) {
const resp = await fetch(`/api/history?sessionId=${sessionId}&limit=${limit}`);
async function apiHistory(sessionId = 'null') {
const resp = await fetch(`/api/history?sessionId=${sessionId}`);
return resp.json();
}
@@ -17,3 +17,19 @@ async function apiHistoryPoll(afterId) {
const resp = await fetch(`/api/history/poll?afterId=${afterId}`);
return resp.json();
}
async function apiArchive() {
const resp = await fetch('/api/archive', { method: 'POST' });
if (resp.status === 204) return null;
return resp.json();
}
async function apiListArchives() {
const resp = await fetch('/api/archives');
return resp.json();
}
async function apiGetArchive(archiveId) {
const resp = await fetch(`/api/archive/${archiveId}`);
return resp.json();
}
+15 -7
View File
@@ -3,10 +3,18 @@
const messages = [];
let isStreaming = false;
function clearChat() {
async function clearChat() {
const archive = await apiArchive();
messages.length = 0;
chatEl().innerHTML = '';
setMeta('');
lastKnownMessageId = 0;
if (archive) {
setMeta(`Archiviert: ${archive.chainCount} Chains, ${archive.messageCount} Messages`);
showArchiveLoadButton();
} else {
setMeta('');
}
}
// ── Send Message ──
@@ -20,7 +28,7 @@ async function sendMessage() {
if (!text) return;
messages.push({ role: 'user', content: text });
addUserBubble(text);
addUserBubble(text, true);
input.value = '';
input.style.height = 'auto';
@@ -96,10 +104,6 @@ async function sendMessage() {
}
}
if (fullText) {
messages.push({ role: 'assistant', content: fullText });
}
} catch (e) {
endStreamBubble();
addErrorBubble('Netzwerk-Fehler: ' + e.message);
@@ -107,5 +111,9 @@ async function sendMessage() {
btn.disabled = false;
isStreaming = false;
endStreamBubble();
// Erst neue aus DB laden, dann gestreamte Elemente ersetzen
await pollHistory();
removeStreamedElements();
}
}
+97 -1
View File
@@ -2,11 +2,17 @@
let lastKnownMessageId = 0;
let historyPollInterval = null;
let loadedArchiveCount = 0;
async function loadHistory() {
try {
const archives = await apiListArchives();
if (archives.length > 0) {
showArchiveLoadButton();
}
const data = await apiHistory('null');
data.reverse(); // DESC → chronologisch
data.reverse();
for (const entry of data) {
renderMessages(entry.messages, true);
@@ -49,6 +55,96 @@ function renderMessages(msgs, addToConversation) {
}
}
// ── Archive Loading ──
function getOrCreateArchiveContainer() {
let container = chatEl().querySelector('.archive-container');
if (!container) {
container = document.createElement('div');
container.className = 'archive-container';
chatEl().prepend(container);
}
return container;
}
function getOrCreateArchiveDivider() {
let divider = chatEl().querySelector('.archive-divider');
if (!divider) {
divider = document.createElement('div');
divider.className = 'msg system-info archive-divider';
divider.textContent = '── Aktuelle Konversation ──';
// Nach dem Container, vor den aktiven Messages
const container = getOrCreateArchiveContainer();
container.after(divider);
}
return divider;
}
async function loadLatestArchive() {
try {
const archives = await apiListArchives();
if (archives.length <= loadedArchiveCount) return;
const latest = archives[loadedArchiveCount];
loadedArchiveCount++;
removeArchiveLoadButton();
const data = await apiGetArchive(latest.archiveId);
const container = getOrCreateArchiveContainer();
getOrCreateArchiveDivider();
// Archiv-Block zusammenbauen
const fragment = document.createDocumentFragment();
const sep = document.createElement('div');
sep.className = 'msg system-info';
sep.textContent = `📦 Archiv vom ${new Date(latest.createdAt).toLocaleString('de-AT')} (${latest.chainCount} Chains, ${latest.messageCount} Messages)`;
fragment.appendChild(sep);
for (const entry of data) {
for (const msg of entry.messages) {
const div = document.createElement('div');
switch (msg.type) {
case 'text':
div.className = msg.role === 'user' ? 'msg user archived' : 'msg assistant archived';
div.textContent = msg.content;
break;
case 'tool_use':
div.className = 'tool-box archived';
div.innerHTML = '<span class="tool-name">' + esc(msg.toolName) + '</span>'
+ '<span class="tool-input">' + esc(truncate(msg.content, 120)) + '</span>';
break;
case 'tool_result':
div.className = 'tool-box archived';
div.innerHTML = '<div class="tool-result ' + (msg.isError ? 'tool-error' : '') + '">'
+ esc(truncate(msg.content, 300)) + '</div>';
break;
case 'error':
div.className = 'msg system-info archived';
div.style.color = '#ff6b6b';
div.textContent = msg.content;
break;
default:
continue;
}
fragment.appendChild(div);
}
}
// Älteres Archiv vor dem bisherigen Inhalt einfügen
container.prepend(fragment);
// Button ganz oben, falls es noch ältere Archive gibt
if (archives.length > loadedArchiveCount) {
showArchiveLoadButton();
}
} catch (e) {
console.error('Archiv laden fehlgeschlagen:', e);
}
}
// ── Polling ──
function startHistoryPolling(intervalMs = 3000) {
+30 -3
View File
@@ -21,9 +21,10 @@ function truncate(s, max) {
// ── Message Bubbles ──
function addUserBubble(text) {
function addUserBubble(text, streamed = false) {
const div = document.createElement('div');
div.className = 'msg user';
if (streamed) div.classList.add('streamed');
div.textContent = text;
chatEl().appendChild(div);
scrollDown();
@@ -54,7 +55,7 @@ let _streamText = '';
function startStreamBubble() {
_streamDiv = document.createElement('div');
_streamDiv.className = 'msg assistant';
_streamDiv.className = 'msg assistant streamed';
_streamDiv.innerHTML = '<span class="cursor"></span>';
_streamText = '';
chatEl().appendChild(_streamDiv);
@@ -85,7 +86,7 @@ function endStreamBubble() {
function addToolBoxLoading(name) {
const div = document.createElement('div');
div.className = 'tool-box';
div.className = 'tool-box streamed';
div.innerHTML = '<span class="tool-name">' + esc(name) + '</span> <span class="tool-spinner">⏳</span>';
chatEl().appendChild(div);
scrollDown();
@@ -114,6 +115,12 @@ function addToolBoxStatic(name, input, result, isError) {
scrollDown();
}
// ── Streamed Elements ──
function removeStreamedElements() {
chatEl().querySelectorAll('.streamed').forEach(el => el.remove());
}
// ── Meta Bar ──
function setMeta(text) {
@@ -123,3 +130,23 @@ function setMeta(text) {
function setMetaHtml(html) {
metaEl().innerHTML = html;
}
// ── Archive Button ──
function showArchiveLoadButton() {
const existing = chatEl().querySelector('.archive-load-btn');
if (existing) existing.remove();
const btn = document.createElement('button');
btn.className = 'archive-load-btn';
btn.textContent = '📦 Archivierte Nachrichten laden';
btn.addEventListener('click', loadLatestArchive);
// Immer ganz oben im Chat
chatEl().prepend(btn);
}
function removeArchiveLoadButton() {
const btn = chatEl().querySelector('.archive-load-btn');
if (btn) btn.remove();
}