Meleki
34cecd03a1
- Neues avatar-editor.js: Upload, Paste, AI-Generate, Scale, Clear in einem Modal - Session + Agent Pages: ~280 Zeilen doppelter Avatar-Code → je 5 Zeilen AvatarEditor.init/destroy - Avatar-Preview klickbar → öffnet Modal mit allen Einstellungen - chat.css: Shared-Content Message-Styling (max-width, border)
307 lines
11 KiB
JavaScript
307 lines
11 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 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
|
|
});
|
|
|
|
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 = new EasyMDE({
|
|
element: contextEl,
|
|
initialValue: (session && session.context) || '',
|
|
toolbar: ['bold', 'italic', 'heading', '|', 'unordered-list', 'ordered-list', '|', 'link', 'code', '|', 'preview'],
|
|
status: false,
|
|
spellChecker: false,
|
|
autoDownloadFontAwesome: false,
|
|
minHeight: '120px',
|
|
placeholder: 'Zusätzlicher Kontext für den System-Prompt (optional)',
|
|
previewClass: ['editor-preview', 'markdown']
|
|
});
|
|
_sessionContextMde.codemirror.setOption('theme', 'default');
|
|
_sessionContextMde.codemirror.getWrapperElement().closest('.EasyMDEContainer').classList.add('fe-mde-wrap');
|
|
|
|
// Befehl hinzufügen
|
|
addCommandBtn.addEventListener('click', () => createCommandRow(commandsList));
|
|
|
|
// Telegram-Section nur für existierende Sessions
|
|
if (!isNew) {
|
|
initSessionTelegram(sessionId);
|
|
}
|
|
|
|
// 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;
|
|
|
|
more.addEventListener('click', () => {
|
|
const content = more.querySelector('[hidden]');
|
|
while (content.firstChild)
|
|
more.parentNode.insertBefore(content.firstChild, more);
|
|
more.remove();
|
|
});
|
|
|
|
// 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,
|
|
context: _sessionContextMde.value().trim() || null,
|
|
workspace: workspaceEl.value.trim() || null,
|
|
customCommands: commands,
|
|
avatarScale: _sessionAvatarEditor.getScale()
|
|
};
|
|
|
|
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 initSessionTelegram(sessionId) {
|
|
var tokenInput = document.getElementById('sessionTelegramToken');
|
|
var secretInput = document.getElementById('sessionTelegramSecret');
|
|
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.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;
|
|
registerBtn.disabled = true;
|
|
registerBtn.textContent = 'Wird registriert...';
|
|
try {
|
|
// Erst Token + Secret speichern (falls geändert)
|
|
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');
|
|
} finally {
|
|
registerBtn.disabled = false;
|
|
registerBtn.textContent = 'Webhook registrieren';
|
|
refreshTelegramStatus(sessionId, statusBox, registerBtn, deleteBtn);
|
|
}
|
|
});
|
|
|
|
// Webhook entfernen
|
|
deleteBtn.addEventListener('click', async function() {
|
|
if (!confirm('Webhook wirklich entfernen?')) return;
|
|
deleteBtn.disabled = true;
|
|
deleteBtn.textContent = 'Wird entfernt...';
|
|
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');
|
|
} finally {
|
|
deleteBtn.disabled = false;
|
|
deleteBtn.textContent = 'Webhook entfernen';
|
|
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> ' + escapeHtml(url) + '</p>';
|
|
html += '<p><strong>Ausstehend:</strong> ' + pending + '</p>';
|
|
if (lastError) html += '<p class="tg-error"><strong>Letzter Fehler:</strong> ' + escapeHtml(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: ' + escapeHtml(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();
|
|
await apiSessionTelegramSave(sessionId, token, secret);
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
return String(str)
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"');
|
|
}
|