Sessions: edit form, soft-delete, lazy creation, chat as separate page
- Session click opens edit form (name, description, image, agent) instead of chat
- Chat is now a separate route (#chat/{id}), opened via button
- Sessions created on save, not on click
- Soft-delete for sessions (is_deleted flag)
- Delete button in session form
- Removed title double-click editing from chat
- Card images now square (aspect-ratio: 1)
- New Session as placeholder card
This commit is contained in:
Meleki committed
1 parent
449c872296
commit
a90b9427a5
10 files changed
+340
-188
No files matched your search
+10
-2
@@ -76,8 +76,12 @@ async function apiGetSessions() {
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
async function apiCreateSession() {
|
||||
const resp = await fetch('/api/sessions', { method: 'POST' });
|
||||
async function apiCreateSession(data = {}) {
|
||||
const resp = await fetch('/api/sessions', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
@@ -87,6 +91,10 @@ async function apiGetSession(sessionId) {
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
async function apiDeleteSession(sessionId) {
|
||||
return fetch(`/api/sessions/${sessionId}`, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
async function apiUpdateSession(sessionId, data) {
|
||||
const resp = await fetch(`/api/sessions/${sessionId}`, {
|
||||
method: 'PUT',
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
// ── Chat Page ──
|
||||
|
||||
registerPage('chat', {
|
||||
async init(params) {
|
||||
const sessionId = params.id;
|
||||
if (!sessionId) return navigateTo('dashboard');
|
||||
|
||||
currentSessionId = sessionId;
|
||||
|
||||
const session = await apiGetSession(sessionId);
|
||||
if (!session) return navigateTo('dashboard');
|
||||
|
||||
// Kein Agent = kein Chat
|
||||
if (!session.agentId) {
|
||||
navigateTo('session', { id: sessionId });
|
||||
return;
|
||||
}
|
||||
|
||||
const titleEl = document.getElementById('sessionTitle');
|
||||
if (titleEl) {
|
||||
titleEl.textContent = session.name || 'Unbenannt';
|
||||
}
|
||||
|
||||
// Zurück zur Session-Edit-Seite
|
||||
const backBtn = document.getElementById('chatBackBtn');
|
||||
if (backBtn) {
|
||||
backBtn.addEventListener('click', () => navigateTo('session', { id: sessionId }));
|
||||
}
|
||||
|
||||
// System Prompt Toggle
|
||||
const showSystem = document.getElementById('showSystem');
|
||||
const systemPrompt = document.getElementById('systemPrompt');
|
||||
if (showSystem && systemPrompt) {
|
||||
showSystem.addEventListener('change', () => {
|
||||
systemPrompt.classList.toggle('visible', showSystem.checked);
|
||||
});
|
||||
}
|
||||
|
||||
// Send
|
||||
const sendBtn = document.getElementById('send');
|
||||
if (sendBtn) sendBtn.addEventListener('click', sendMessage);
|
||||
|
||||
// Ctrl+Enter
|
||||
const inputEl = document.getElementById('input');
|
||||
if (inputEl) {
|
||||
inputEl.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey && e.key === 'Enter') sendMessage();
|
||||
});
|
||||
inputEl.addEventListener('input', function () {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = Math.min(this.scrollHeight, 150) + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
// Archivieren
|
||||
const archiveBtn = document.getElementById('archiveBtn');
|
||||
if (archiveBtn) archiveBtn.addEventListener('click', clearChat);
|
||||
|
||||
// State zurücksetzen und History laden
|
||||
messages.length = 0;
|
||||
lastKnownMessageId = 0;
|
||||
loadedArchiveCount = 0;
|
||||
isStreaming = false;
|
||||
|
||||
await loadHistory();
|
||||
},
|
||||
|
||||
destroy() {
|
||||
stopHistoryPolling();
|
||||
messages.length = 0;
|
||||
lastKnownMessageId = 0;
|
||||
loadedArchiveCount = 0;
|
||||
isStreaming = false;
|
||||
}
|
||||
});
|
||||
@@ -2,34 +2,41 @@
|
||||
|
||||
registerPage('dashboard', {
|
||||
async init() {
|
||||
// Sessions laden
|
||||
const agents = await apiGetAgents();
|
||||
const agentMap = {};
|
||||
for (const a of agents) agentMap[a.agentId] = a;
|
||||
|
||||
// Sessions
|
||||
const sessions = await apiGetSessions();
|
||||
const grid = document.getElementById('sessionCards');
|
||||
grid.innerHTML = '';
|
||||
|
||||
for (const s of sessions) {
|
||||
const agent = s.agentId ? agentMap[s.agentId] : null;
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card clickable';
|
||||
card.innerHTML = `
|
||||
<div class="card-title">${escHtml(s.name || 'Unbenannt')}</div>
|
||||
<div class="card-sub">${formatDate(s.updatedAt)}</div>
|
||||
<div class="card-image">${s.image ? `<img src="${s.image}" alt="">` : ''}</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title-row">
|
||||
<span class="card-title">${esc(s.name || 'Unbenannt')}</span>
|
||||
${agent ? `<span class="badge">${esc(agent.name)}</span>` : ''}
|
||||
</div>
|
||||
${s.description ? `<div class="card-desc">${esc(s.description)}</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
card.addEventListener('click', () => {
|
||||
navigateTo('session', { id: s.sessionId });
|
||||
});
|
||||
card.addEventListener('click', () => navigateTo('session', { id: s.sessionId }));
|
||||
grid.appendChild(card);
|
||||
}
|
||||
|
||||
const newSessionBtn = document.getElementById('newSessionBtn');
|
||||
if (newSessionBtn) {
|
||||
newSessionBtn.addEventListener('click', async () => {
|
||||
const session = await apiCreateSession();
|
||||
navigateTo('session', { id: session.sessionId });
|
||||
});
|
||||
}
|
||||
// Neue Session Placeholder
|
||||
const newSession = document.createElement('div');
|
||||
newSession.className = 'card placeholder clickable';
|
||||
newSession.innerHTML = '<div class="card-body"><div class="card-title">+ Neue Session</div></div>';
|
||||
newSession.addEventListener('click', () => navigateTo('session'));
|
||||
grid.appendChild(newSession);
|
||||
|
||||
// Agents laden
|
||||
const agents = await apiGetAgents();
|
||||
// Agents
|
||||
const agentGrid = document.getElementById('agentCards');
|
||||
agentGrid.innerHTML = '';
|
||||
|
||||
@@ -37,30 +44,29 @@ registerPage('dashboard', {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card clickable';
|
||||
card.innerHTML = `
|
||||
<div class="agent-card-avatar">${a.avatar ? `<img src="${a.avatar}" alt="">` : '?'}</div>
|
||||
<div class="card-title">${escHtml(a.name)}</div>
|
||||
<div class="card-sub">${escHtml(a.model || 'sonnet')}</div>
|
||||
<div class="card-image">${a.avatar ? `<img src="${a.avatar}" alt="">` : ''}</div>
|
||||
<div class="card-body">
|
||||
<div class="card-title-row">
|
||||
<span class="card-title">${esc(a.name)}</span>
|
||||
<span class="badge">${esc(a.model)}</span>
|
||||
</div>
|
||||
${a.description ? `<div class="card-desc">${esc(a.description)}</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
card.addEventListener('click', () => {
|
||||
navigateTo('agent', { id: a.agentId });
|
||||
});
|
||||
card.addEventListener('click', () => navigateTo('agent', { id: a.agentId }));
|
||||
agentGrid.appendChild(card);
|
||||
}
|
||||
|
||||
// Neuer Agent Placeholder
|
||||
const placeholder = document.createElement('div');
|
||||
placeholder.className = 'card placeholder clickable';
|
||||
placeholder.innerHTML = `
|
||||
<div class="card-icon">+</div>
|
||||
<div class="card-title">Neuer Agent</div>
|
||||
`;
|
||||
placeholder.innerHTML = '<div class="card-body"><div class="card-title">+ Neuer Agent</div></div>';
|
||||
placeholder.addEventListener('click', () => navigateTo('agent'));
|
||||
agentGrid.appendChild(placeholder);
|
||||
},
|
||||
destroy() {}
|
||||
});
|
||||
|
||||
function escHtml(s) {
|
||||
function esc(s) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = s;
|
||||
return d.innerHTML;
|
||||
|
||||
@@ -1,129 +1,113 @@
|
||||
// ── Session Page ──
|
||||
// ── Session Edit Page ──
|
||||
|
||||
let _sessionImageData = null;
|
||||
|
||||
registerPage('session', {
|
||||
async init(params) {
|
||||
const sessionId = params.id;
|
||||
if (!sessionId) return navigateTo('dashboard');
|
||||
const isNew = !sessionId;
|
||||
let session = null;
|
||||
|
||||
currentSessionId = sessionId;
|
||||
|
||||
// Session laden
|
||||
const session = await apiGetSession(sessionId);
|
||||
const titleEl = document.getElementById('sessionTitle');
|
||||
if (session && titleEl) {
|
||||
titleEl.textContent = session.name || 'Unbenannt';
|
||||
titleEl.addEventListener('dblclick', () => editTitle(sessionId, titleEl));
|
||||
if (!isNew) {
|
||||
session = await apiGetSession(sessionId);
|
||||
if (!session) return navigateTo('dashboard');
|
||||
}
|
||||
|
||||
// Agent-Auswahl laden
|
||||
const titleEl = document.getElementById('sessionPageTitle');
|
||||
const nameEl = document.getElementById('sessionName');
|
||||
const descEl = document.getElementById('sessionDescription');
|
||||
const agentSelect = document.getElementById('agentSelect');
|
||||
const sendBtn = document.getElementById('send');
|
||||
const inputEl = document.getElementById('input');
|
||||
const imagePreview = document.getElementById('sessionImagePreview');
|
||||
const imageInput = document.getElementById('sessionImageInput');
|
||||
const imageBtn = document.getElementById('sessionImageBtn');
|
||||
const imageClearBtn = document.getElementById('sessionImageClearBtn');
|
||||
const saveBtn = document.getElementById('sessionSaveBtn');
|
||||
const cancelBtn = document.getElementById('sessionCancelBtn');
|
||||
const deleteBtn = document.getElementById('sessionDeleteBtn');
|
||||
const openChatBtn = document.getElementById('openChatBtn');
|
||||
|
||||
if (agentSelect) {
|
||||
const agents = await apiGetAgents();
|
||||
agentSelect.innerHTML = '<option value="">-- Agent wählen --</option>';
|
||||
for (const a of agents) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = a.agentId;
|
||||
opt.textContent = `${a.name} (${a.model})`;
|
||||
agentSelect.appendChild(opt);
|
||||
_sessionImageData = null;
|
||||
|
||||
if (session) {
|
||||
titleEl.textContent = session.name || 'Unbenannt';
|
||||
nameEl.value = session.name || '';
|
||||
descEl.value = session.description || '';
|
||||
_sessionImageData = session.image || null;
|
||||
deleteBtn.hidden = false;
|
||||
openChatBtn.hidden = false;
|
||||
|
||||
if (session.image) {
|
||||
imagePreview.innerHTML = `<img src="${session.image}" alt="">`;
|
||||
}
|
||||
} else {
|
||||
titleEl.textContent = 'Neue Session';
|
||||
deleteBtn.hidden = true;
|
||||
openChatBtn.hidden = true;
|
||||
}
|
||||
|
||||
// Gespeicherten Agent setzen
|
||||
if (session && session.agentId) {
|
||||
agentSelect.value = session.agentId;
|
||||
// Agents laden
|
||||
const agents = await apiGetAgents();
|
||||
agentSelect.innerHTML = '<option value="">-- Kein Agent --</option>';
|
||||
for (const a of agents) {
|
||||
const opt = document.createElement('option');
|
||||
opt.value = a.agentId;
|
||||
opt.textContent = `${a.name} (${a.model})`;
|
||||
agentSelect.appendChild(opt);
|
||||
}
|
||||
if (session && session.agentId) agentSelect.value = session.agentId;
|
||||
|
||||
// Bild Upload
|
||||
imageBtn.addEventListener('click', () => imageInput.click());
|
||||
imageInput.addEventListener('change', () => {
|
||||
const file = imageInput.files[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
_sessionImageData = reader.result;
|
||||
imagePreview.innerHTML = `<img src="${reader.result}" alt="">`;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
|
||||
imageClearBtn.addEventListener('click', () => {
|
||||
_sessionImageData = null;
|
||||
imagePreview.innerHTML = '?';
|
||||
imageInput.value = '';
|
||||
});
|
||||
|
||||
// Speichern
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
const data = {
|
||||
name: nameEl.value.trim() || 'Unbenannt',
|
||||
description: descEl.value.trim(),
|
||||
image: _sessionImageData,
|
||||
agentId: agentSelect.value || null
|
||||
};
|
||||
|
||||
if (isNew) {
|
||||
await apiCreateSession(data);
|
||||
} else {
|
||||
await apiUpdateSession(sessionId, data);
|
||||
}
|
||||
navigateTo('dashboard');
|
||||
});
|
||||
|
||||
// Agent-Wechsel speichern
|
||||
agentSelect.addEventListener('change', async () => {
|
||||
const val = agentSelect.value || null;
|
||||
await apiUpdateSession(sessionId, { agentId: val });
|
||||
updateSendState();
|
||||
});
|
||||
}
|
||||
// Abbrechen
|
||||
cancelBtn.addEventListener('click', () => navigateTo('dashboard'));
|
||||
|
||||
// Send-Button State
|
||||
function updateSendState() {
|
||||
const hasAgent = agentSelect && agentSelect.value;
|
||||
if (sendBtn) sendBtn.disabled = !hasAgent;
|
||||
if (inputEl) inputEl.disabled = !hasAgent;
|
||||
}
|
||||
updateSendState();
|
||||
// Löschen
|
||||
deleteBtn.addEventListener('click', async () => {
|
||||
if (!confirm('Session wirklich löschen?')) return;
|
||||
await apiDeleteSession(sessionId);
|
||||
navigateTo('dashboard');
|
||||
});
|
||||
|
||||
// System Prompt Toggle
|
||||
const showSystem = document.getElementById('showSystem');
|
||||
const systemPrompt = document.getElementById('systemPrompt');
|
||||
if (showSystem && systemPrompt) {
|
||||
showSystem.addEventListener('change', () => {
|
||||
systemPrompt.classList.toggle('visible', showSystem.checked);
|
||||
});
|
||||
}
|
||||
|
||||
// Send
|
||||
if (sendBtn) sendBtn.addEventListener('click', sendMessage);
|
||||
|
||||
// Ctrl+Enter
|
||||
if (inputEl) {
|
||||
inputEl.addEventListener('keydown', (e) => {
|
||||
if (e.ctrlKey && e.key === 'Enter') sendMessage();
|
||||
});
|
||||
inputEl.addEventListener('input', function () {
|
||||
this.style.height = 'auto';
|
||||
this.style.height = Math.min(this.scrollHeight, 150) + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
// Archivieren
|
||||
const archiveBtn = document.getElementById('archiveBtn');
|
||||
if (archiveBtn) archiveBtn.addEventListener('click', clearChat);
|
||||
|
||||
// State zurücksetzen und History laden
|
||||
messages.length = 0;
|
||||
lastKnownMessageId = 0;
|
||||
loadedArchiveCount = 0;
|
||||
isStreaming = false;
|
||||
|
||||
await loadHistory();
|
||||
// Chat öffnen
|
||||
openChatBtn.addEventListener('click', () => {
|
||||
navigateTo('chat', { id: sessionId });
|
||||
});
|
||||
},
|
||||
|
||||
destroy() {
|
||||
stopHistoryPolling();
|
||||
messages.length = 0;
|
||||
lastKnownMessageId = 0;
|
||||
loadedArchiveCount = 0;
|
||||
isStreaming = false;
|
||||
_sessionImageData = null;
|
||||
}
|
||||
});
|
||||
|
||||
function editTitle(sessionId, titleEl) {
|
||||
const input = document.createElement('input');
|
||||
input.type = 'text';
|
||||
input.className = 'session-rename';
|
||||
input.value = titleEl.textContent;
|
||||
|
||||
titleEl.replaceWith(input);
|
||||
input.focus();
|
||||
input.select();
|
||||
|
||||
const save = async () => {
|
||||
const newName = input.value.trim();
|
||||
if (newName) {
|
||||
await apiUpdateSession(sessionId, { name: newName });
|
||||
const newTitle = document.createElement('h1');
|
||||
newTitle.id = 'sessionTitle';
|
||||
newTitle.className = 'editable-title';
|
||||
newTitle.textContent = newName;
|
||||
newTitle.addEventListener('dblclick', () => editTitle(sessionId, newTitle));
|
||||
input.replaceWith(newTitle);
|
||||
} else {
|
||||
input.replaceWith(titleEl);
|
||||
}
|
||||
};
|
||||
|
||||
input.addEventListener('blur', save);
|
||||
input.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') input.blur();
|
||||
if (e.key === 'Escape') { input.replaceWith(titleEl); }
|
||||
});
|
||||
}
|
||||
Reference in new issue
Block a user