Archiv-System: Clear archiviert, Button lädt ältere Archive chronologisch, kein Limit
This commit is contained in:
Meleki committed
1 parent
fb2c3a0720
commit
843c210209
9 files changed
+363
-129
No files matched your search
+70
-96
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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();
|
||||
}
|
||||
Reference in new issue
Block a user