Meleki
e930268476
Neue Helper: - _renderCardPreview(): Gemeinsamer Helper für Agent/Session-Card-Vorschau (ersetzt renderAgentInCard + renderSessionSelectCard Duplikate) - withButtonLoading(btn, text, fn): Eliminiert ~15x identisches disable/text/try/finally/reset Pattern in allen Pages - formatDate(): Nach ui-helpers.js verschoben (war in dashboard.js) - createMDE(): maxHeight-Option hinzugefügt Dedupliziert: - handleStreamEvent: 12 Preparer/Review/Finalizer cases → 7 durch case-Grouping (start/text/tool_use shared) - _escCmdAttr() entfernt → nutzt jetzt esc() aus ui-helpers.js - feInitEasyMDE() nutzt jetzt createMDE() statt eigener EasyMDE-Init Betroffene Dateien: ui-helpers.js, chat.js, commands-ui.js, file-explorer.js, dashboard.js, session-page.js, cronjob-page.js, profile-page.js, admin-page.js, server-settings-page.js, settings-page.js
344 lines
13 KiB
JavaScript
344 lines
13 KiB
JavaScript
// ── Session Edit Page ──
|
|
|
|
let _sessionAvatarEditor = null;
|
|
let _sessionContextMde = null;
|
|
|
|
registerPage('session', {
|
|
async init(params) {
|
|
const sessionId = params.id;
|
|
const isNew = !sessionId;
|
|
let session = null;
|
|
|
|
if (!isNew) {
|
|
session = await apiGetSession(sessionId);
|
|
if (!session) return navigateTo('dashboard');
|
|
}
|
|
|
|
const titleEl = document.getElementById('sessionPageTitle');
|
|
const nameEl = document.getElementById('sessionName');
|
|
const descEl = document.getElementById('sessionDescription');
|
|
const contextEl = document.getElementById('sessionContext');
|
|
const workspaceEl = document.getElementById('sessionWorkspace');
|
|
const agentSelect = document.getElementById('agentSelect');
|
|
const agentSelectCard = document.getElementById('agentSelectCard');
|
|
const preparerAgentSelect = document.getElementById('preparerAgentSelect');
|
|
const preparerAgentSelectCard = document.getElementById('preparerAgentSelectCard');
|
|
const reviewAgentSelect = document.getElementById('reviewAgentSelect');
|
|
const reviewAgentSelectCard = document.getElementById('reviewAgentSelectCard');
|
|
const reviewIterationsRow = document.getElementById('reviewIterationsRow');
|
|
const maxReviewIterationsEl = document.getElementById('maxReviewIterations');
|
|
const finalizerAgentSelect = document.getElementById('finalizerAgentSelect');
|
|
const finalizerAgentSelectCard = document.getElementById('finalizerAgentSelectCard');
|
|
const imagePreview = document.getElementById('sessionImagePreview');
|
|
const saveBtn = document.getElementById('sessionSaveBtn');
|
|
const cancelBtn = document.getElementById('sessionCancelBtn');
|
|
const deleteBtn = document.getElementById('sessionDeleteBtn');
|
|
const commandsList = document.getElementById('customCommandsList');
|
|
const addCommandBtn = document.getElementById('addCommandBtn');
|
|
const more = document.querySelector('.more');
|
|
|
|
// Avatar Editor initialisieren
|
|
_sessionAvatarEditor = AvatarEditor.init({
|
|
previewEl: imagePreview,
|
|
initialImage: (session && session.image) || null,
|
|
initialScale: (session && session.avatarScale) || 1,
|
|
initialOffsetX: (session && session.avatarOffsetX) || 0,
|
|
initialOffsetY: (session && session.avatarOffsetY) || 0
|
|
});
|
|
|
|
if (session) {
|
|
titleEl.textContent = session.name || 'Unbenannt';
|
|
nameEl.value = session.name || '';
|
|
descEl.value = session.description || '';
|
|
workspaceEl.value = session.workspace || '';
|
|
deleteBtn.hidden = false;
|
|
|
|
// Custom Commands laden
|
|
loadCommandsIntoUI(commandsList, session.customCommands);
|
|
} else {
|
|
titleEl.textContent = 'Neue Session';
|
|
deleteBtn.hidden = true;
|
|
}
|
|
|
|
// EasyMDE für Kontext
|
|
_sessionContextMde = createMDE(contextEl, {
|
|
initialValue: (session && session.context) || '',
|
|
placeholder: 'Zusätzlicher Kontext für den System-Prompt (optional)'
|
|
});
|
|
|
|
// Befehl hinzufügen
|
|
addCommandBtn.addEventListener('click', () => createCommandRow(commandsList));
|
|
|
|
// Telegram-Section nur für existierende Sessions
|
|
if (!isNew) {
|
|
initSessionTelegram(sessionId);
|
|
}
|
|
|
|
// Agents laden + Skills parallel
|
|
const agents = await apiGetAgents();
|
|
const agentMap = {};
|
|
for (const a of agents) agentMap[a.agentId] = a;
|
|
|
|
const agentSkillsMap = {};
|
|
for (const a of agents) {
|
|
agentSkillsMap[a.agentId] = a.skills || [];
|
|
}
|
|
|
|
function renderAgentInCard(cardEl, agent, emptyIcon, emptyText) {
|
|
const inner = agent ? buildAgentCard(agent, agentSkillsMap[agent.agentId] || []) : null;
|
|
_renderCardPreview(cardEl, inner, emptyIcon, emptyText, 'agent-select-change');
|
|
}
|
|
|
|
function updateReviewVisibility() {
|
|
reviewIterationsRow.hidden = !reviewAgentSelect.value;
|
|
}
|
|
|
|
// Helper: Agent-Picker für eine Rolle einrichten (Initial-Rendering + Click-Handler)
|
|
function setupAgentPicker(cardEl, selectEl, initialId, emptyIcon, emptyText, onChange) {
|
|
if (initialId) {
|
|
selectEl.value = initialId;
|
|
renderAgentInCard(cardEl, agentMap[initialId] || null, emptyIcon, emptyText);
|
|
} else {
|
|
renderAgentInCard(cardEl, null, emptyIcon, emptyText);
|
|
}
|
|
cardEl.addEventListener('click', () => {
|
|
openAgentPickerModal(agents, agentSkillsMap, selectEl.value, (selectedId) => {
|
|
selectEl.value = selectedId || '';
|
|
renderAgentInCard(cardEl, selectedId ? agentMap[selectedId] : null, emptyIcon, emptyText);
|
|
if (onChange) onChange(selectedId);
|
|
});
|
|
});
|
|
}
|
|
|
|
setupAgentPicker(agentSelectCard, agentSelect, session && session.agentId, 'fa-user-circle-o', 'Kein Agent ausgewählt');
|
|
setupAgentPicker(preparerAgentSelectCard, preparerAgentSelect, session && session.preparerAgentId, 'fa-filter', 'Kein Vorbereiter-Agent');
|
|
setupAgentPicker(reviewAgentSelectCard, reviewAgentSelect, session && session.reviewAgentId, 'fa-check-circle-o', 'Kein Review-Agent', updateReviewVisibility);
|
|
if (session && session.reviewAgentId) maxReviewIterationsEl.value = session.maxReviewIterations || 3;
|
|
updateReviewVisibility();
|
|
setupAgentPicker(finalizerAgentSelectCard, finalizerAgentSelect, session && session.finalizerAgentId, 'fa-flag-checkered', 'Kein Finalizer-Agent');
|
|
|
|
initMoreButton(more);
|
|
|
|
// Workspace Browse
|
|
const workspaceBrowse = document.getElementById('sessionWorkspaceBrowse');
|
|
if (workspaceBrowse) {
|
|
workspaceBrowse.addEventListener('click', () => {
|
|
const defaultPath = (currentUser && currentUser.defaultPath) || '';
|
|
const currentVal = workspaceEl.value.trim();
|
|
// Für den Folder-Browser den absoluten Startpfad zusammenbauen
|
|
let startPath = '/';
|
|
if (defaultPath && currentVal) {
|
|
startPath = defaultPath.replace(/\/+$/, '') + '/' + currentVal;
|
|
} else if (defaultPath) {
|
|
startPath = defaultPath;
|
|
} else if (currentVal) {
|
|
startPath = currentVal;
|
|
}
|
|
openFolderBrowser({
|
|
startPath,
|
|
basePath: defaultPath || null,
|
|
onSelect(absolutePath) {
|
|
// Relativen Pfad zum DefaultPath berechnen
|
|
if (defaultPath && absolutePath.startsWith(defaultPath)) {
|
|
let rel = absolutePath.slice(defaultPath.length).replace(/^\/+/, '');
|
|
workspaceEl.value = rel || '';
|
|
} else {
|
|
// Kein DefaultPath oder Pfad außerhalb → absoluten Pfad beibehalten (Legacy)
|
|
workspaceEl.value = absolutePath;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Speichern
|
|
saveBtn.addEventListener('click', async () => {
|
|
const commands = getCommandsFromUI(commandsList);
|
|
const data = {
|
|
name: nameEl.value.trim() || 'Unbenannt',
|
|
description: descEl.value.trim(),
|
|
image: _sessionAvatarEditor.getImage(),
|
|
agentId: agentSelect.value || null,
|
|
reviewAgentId: reviewAgentSelect.value || null,
|
|
maxReviewIterations: parseInt(maxReviewIterationsEl.value) || 3,
|
|
finalizerAgentId: finalizerAgentSelect.value || null,
|
|
preparerAgentId: preparerAgentSelect.value || null,
|
|
context: _sessionContextMde.value().trim() || null,
|
|
workspace: workspaceEl.value.trim() || null,
|
|
customCommands: commands,
|
|
avatarScale: _sessionAvatarEditor.getScale(),
|
|
avatarOffsetX: _sessionAvatarEditor.getOffsetX(),
|
|
avatarOffsetY: _sessionAvatarEditor.getOffsetY()
|
|
};
|
|
|
|
if (isNew) {
|
|
await apiCreateSession(data);
|
|
} else {
|
|
await apiUpdateSession(sessionId, data);
|
|
// Telegram-Config mitspeichern (falls Section sichtbar)
|
|
var tgToken = document.getElementById('sessionTelegramToken');
|
|
var tgSecret = document.getElementById('sessionTelegramSecret');
|
|
if (tgToken) {
|
|
try {
|
|
await saveTelegramConfig(sessionId, tgToken, tgSecret);
|
|
} catch(e) {
|
|
showToast('Session gespeichert, aber Telegram-Fehler: ' + e.message, 'error');
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
navigateTo('dashboard');
|
|
});
|
|
|
|
// Abbrechen
|
|
cancelBtn.addEventListener('click', () => navigateTo('dashboard'));
|
|
|
|
// Löschen
|
|
deleteBtn.addEventListener('click', async () => {
|
|
if (!confirm('Session wirklich löschen?')) return;
|
|
await apiDeleteSession(sessionId);
|
|
navigateTo('dashboard');
|
|
});
|
|
},
|
|
destroy() {
|
|
if (_sessionContextMde) {
|
|
_sessionContextMde.toTextArea();
|
|
_sessionContextMde = null;
|
|
}
|
|
if (_sessionAvatarEditor) {
|
|
_sessionAvatarEditor.destroy();
|
|
_sessionAvatarEditor = null;
|
|
}
|
|
}
|
|
});
|
|
|
|
function openAgentPickerModal(agents, agentSkillsMap, currentId, onSelect) {
|
|
const items = agents.map(a => {
|
|
a._pickerId = a.agentId;
|
|
return a;
|
|
});
|
|
_openPickerModal('Agent auswählen', items, currentId, onSelect, {
|
|
noneLabel: 'Kein Agent',
|
|
buildCard: (a) => buildAgentCard(a, agentSkillsMap[a.agentId] || [])
|
|
});
|
|
}
|
|
|
|
function initSessionTelegram(sessionId) {
|
|
var tokenInput = document.getElementById('sessionTelegramToken');
|
|
var secretInput = document.getElementById('sessionTelegramSecret');
|
|
var allowedInput = document.getElementById('sessionTelegramAllowed');
|
|
var registerBtn = document.getElementById('sessionTelegramRegisterBtn');
|
|
var deleteBtn = document.getElementById('sessionTelegramDeleteBtn');
|
|
var statusBox = document.getElementById('sessionTelegramStatusBox');
|
|
|
|
// Vorhandene Config laden + Status abrufen
|
|
apiSessionTelegramGet(sessionId).then(async function(config) {
|
|
if (config.botToken) tokenInput.value = config.botToken;
|
|
if (config.allowedChatIds) allowedInput.value = config.allowedChatIds;
|
|
if (config.webhookSecret) {
|
|
secretInput.value = config.webhookSecret;
|
|
} else {
|
|
// Secret einmalig generieren und sofort persistent speichern
|
|
var newSecret = crypto.randomUUID().replace(/-/g, '');
|
|
secretInput.value = newSecret;
|
|
await apiSessionTelegramSave(sessionId, config.botToken || '', newSecret);
|
|
}
|
|
// Status automatisch abrufen wenn Token konfiguriert ist
|
|
if (config.botToken) {
|
|
refreshTelegramStatus(sessionId, statusBox, registerBtn, deleteBtn);
|
|
} else {
|
|
showTelegramUnconfigured(statusBox, registerBtn, deleteBtn);
|
|
}
|
|
}).catch(function() {
|
|
showTelegramUnconfigured(statusBox, registerBtn, deleteBtn);
|
|
});
|
|
|
|
// Webhook registrieren
|
|
registerBtn.addEventListener('click', async function() {
|
|
var baseUrl = prompt('Base-URL der App:', window.location.origin);
|
|
if (!baseUrl) return;
|
|
await withButtonLoading(registerBtn, 'Wird registriert...', async () => {
|
|
try {
|
|
await saveTelegramConfig(sessionId, tokenInput, secretInput);
|
|
var res = await apiSessionTelegramRegisterWebhook(sessionId, baseUrl.trim());
|
|
if (res.ok) {
|
|
showToast('Webhook registriert!', 'success');
|
|
} else {
|
|
showToast('Antwort: ' + JSON.stringify(res), 'error');
|
|
}
|
|
} catch(e) {
|
|
showToast('Fehler: ' + e.message, 'error');
|
|
}
|
|
});
|
|
refreshTelegramStatus(sessionId, statusBox, registerBtn, deleteBtn);
|
|
});
|
|
|
|
// Webhook entfernen
|
|
deleteBtn.addEventListener('click', async function() {
|
|
if (!confirm('Webhook wirklich entfernen?')) return;
|
|
await withButtonLoading(deleteBtn, 'Wird entfernt...', async () => {
|
|
try {
|
|
var res = await apiSessionTelegramDeleteWebhook(sessionId);
|
|
if (res.ok) {
|
|
showToast('Webhook entfernt', 'success');
|
|
} else {
|
|
showToast('Antwort: ' + JSON.stringify(res), 'error');
|
|
}
|
|
} catch(e) {
|
|
showToast('Fehler: ' + e.message, 'error');
|
|
}
|
|
});
|
|
refreshTelegramStatus(sessionId, statusBox, registerBtn, deleteBtn);
|
|
});
|
|
}
|
|
|
|
function showTelegramUnconfigured(statusBox, registerBtn, deleteBtn) {
|
|
statusBox.innerHTML = '<p>⚠️ Kein Bot-Token konfiguriert. Speichere zuerst die Session mit einem Token.</p>';
|
|
statusBox.hidden = false;
|
|
registerBtn.hidden = true;
|
|
deleteBtn.hidden = true;
|
|
}
|
|
|
|
async function refreshTelegramStatus(sessionId, statusBox, registerBtn, deleteBtn) {
|
|
statusBox.hidden = true;
|
|
try {
|
|
var info = await apiSessionTelegramWebhookInfo(sessionId);
|
|
var result = info.result || {};
|
|
var url = result.url || '';
|
|
var pending = result.pending_update_count || 0;
|
|
var lastError = result.last_error_message;
|
|
var active = !!url;
|
|
|
|
var html = '';
|
|
if (active) {
|
|
html += '<p>✅ <strong>Webhook aktiv</strong></p>';
|
|
html += '<p><strong>URL:</strong> ' + esc(url) + '</p>';
|
|
html += '<p><strong>Ausstehend:</strong> ' + pending + '</p>';
|
|
if (lastError) html += '<p class="tg-error"><strong>Letzter Fehler:</strong> ' + esc(lastError) + '</p>';
|
|
} else {
|
|
html += '<p>⚠️ <strong>Webhook nicht registriert</strong></p>';
|
|
}
|
|
statusBox.innerHTML = html;
|
|
statusBox.hidden = false;
|
|
|
|
// Buttons ein/ausblenden je nach Status
|
|
registerBtn.hidden = active;
|
|
deleteBtn.hidden = !active;
|
|
} catch(e) {
|
|
statusBox.innerHTML = '<p class="tg-error">Status konnte nicht abgerufen werden: ' + esc(e.message) + '</p>';
|
|
statusBox.hidden = false;
|
|
registerBtn.hidden = false;
|
|
deleteBtn.hidden = true;
|
|
}
|
|
}
|
|
|
|
async function saveTelegramConfig(sessionId, tokenInput, secretInput) {
|
|
var token = tokenInput.value.trim();
|
|
var secret = secretInput.value.trim();
|
|
var allowedInput = document.getElementById('sessionTelegramAllowed');
|
|
var allowed = allowedInput ? allowedInput.value.trim() : '';
|
|
await apiSessionTelegramSave(sessionId, token, secret, allowed);
|
|
}
|
|
|
|
|