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
@@ -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