Meleki
ce50633e33
- 40+ Utility-Klassen in form.css (clickable, text-danger, flex-row, loading-state, etc.) - share-menu position/z-index in chat.css statt inline - index.html: 0 Inline-Styles (hidden-Attribut, CSS-Klassen) - 12 JS-Dateien bereinigt: style.cssText/style.* durch classList ersetzt - Bugfix: var(--danger) → var(--dangerous) (nicht existierende Variable) - display:none Toggles → hidden-Attribut wo passend - Hardcoded font-sizes in chat.css → var(--font-size) 15 Dateien, nur Frontend (CSS/JS/HTML), kein Backend
400 lines
14 KiB
JavaScript
400 lines
14 KiB
JavaScript
// ── Modal Helper ──
|
|
|
|
function _createModal(titleText, extraClasses) {
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'sp-overlay' + (extraClasses && extraClasses.overlay ? ' ' + extraClasses.overlay : '');
|
|
|
|
const modal = document.createElement('div');
|
|
modal.className = 'sp-modal' + (extraClasses && extraClasses.modal ? ' ' + extraClasses.modal : '');
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'sp-header';
|
|
const title = document.createElement('span');
|
|
title.textContent = titleText;
|
|
const closeBtn = document.createElement('button');
|
|
closeBtn.innerHTML = '<i class="fa fa-times"></i>';
|
|
closeBtn.className = 'sp-close icon-btn';
|
|
header.appendChild(title);
|
|
header.appendChild(closeBtn);
|
|
|
|
const body = document.createElement('div');
|
|
body.className = 'sp-body' + (extraClasses && extraClasses.body ? ' ' + extraClasses.body : '');
|
|
|
|
modal.appendChild(header);
|
|
modal.appendChild(body);
|
|
overlay.appendChild(modal);
|
|
document.body.appendChild(overlay);
|
|
|
|
const close = () => overlay.remove();
|
|
closeBtn.addEventListener('click', close);
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) close();
|
|
});
|
|
const onKey = (e) => {
|
|
if (e.key === 'Escape') { close(); document.removeEventListener('keydown', onKey); }
|
|
};
|
|
document.addEventListener('keydown', onKey);
|
|
|
|
return { overlay, modal, body, close };
|
|
}
|
|
|
|
// ── System-Prompt Modal ──
|
|
|
|
function _renderSystemPromptBlocks(container, blocks) {
|
|
for (var i = 0; i < blocks.length; i++) {
|
|
var block = blocks[i];
|
|
if (!block.content) continue;
|
|
|
|
var wrapper = document.createElement('div');
|
|
wrapper.className = 'sp-block';
|
|
|
|
var label = document.createElement('div');
|
|
label.className = 'sp-block-label';
|
|
label.innerHTML = '<i class="fa ' + esc(block.icon || 'fa-cog') + '"></i> ' + esc(block.label || 'Block');
|
|
wrapper.appendChild(label);
|
|
|
|
var content = document.createElement('div');
|
|
content.className = 'sp-block-content markdown';
|
|
content.innerHTML = renderMarkdown(block.content);
|
|
parseFluentEmojis(content);
|
|
wrapper.appendChild(content);
|
|
|
|
container.appendChild(wrapper);
|
|
}
|
|
}
|
|
|
|
async function showSystemPromptModal(sessionId) {
|
|
const { body } = _createModal('System-Prompt', { body: 'markdown' });
|
|
body.innerHTML = '<div class="sp-loading">Laden...</div>';
|
|
|
|
try {
|
|
const blocks = await apiGetSystemPromptBlocks(sessionId, typeof _planModeActive !== 'undefined' && _planModeActive);
|
|
body.innerHTML = '';
|
|
_renderSystemPromptBlocks(body, blocks);
|
|
} catch (e) {
|
|
body.innerHTML = '<div class="sp-loading text-danger">Fehler beim Laden des System-Prompts</div>';
|
|
}
|
|
}
|
|
|
|
// ── Command Output Modal ──
|
|
|
|
function showCommandOutputModal(name, command, result) {
|
|
const { body } = _createModal(name, { modal: 'cmd-output-modal' });
|
|
|
|
const exitCode = result.exitCode != null ? result.exitCode : '?';
|
|
const isError = exitCode !== 0;
|
|
const statusText = result.status === 'timeout' ? 'Timeout' : `Exit ${exitCode}`;
|
|
|
|
const meta = document.createElement('div');
|
|
meta.className = 'cmd-output-meta';
|
|
meta.innerHTML = `<code>${esc(command)}</code> <span class="cmd-exit-code${isError ? ' cmd-exit-error' : ''}">${esc(statusText)}</span>`;
|
|
body.appendChild(meta);
|
|
|
|
const output = document.createElement('pre');
|
|
output.className = 'cmd-output-content';
|
|
output.textContent = result.output || '(kein Output)';
|
|
body.appendChild(output);
|
|
}
|
|
|
|
// ── Krea Image Preview Modal ──
|
|
|
|
function showKreaImageModal(titleText, fullUrl) {
|
|
const { body } = _createModal(titleText, { overlay: 'krea-overlay', modal: 'krea-modal', body: 'krea-modal-body' });
|
|
|
|
var img = document.createElement('img');
|
|
img.src = fullUrl;
|
|
img.className = 'krea-modal-image';
|
|
img.alt = titleText;
|
|
img.addEventListener('error', function() {
|
|
body.innerHTML = '<div class="sp-loading text-danger">Bild konnte nicht geladen werden</div>';
|
|
});
|
|
|
|
body.appendChild(img);
|
|
}
|
|
|
|
// ── Picker Modal Helper ──
|
|
|
|
function _openPickerModal(title, items, currentId, onSelect, options) {
|
|
options = options || {};
|
|
const noneLabel = options.noneLabel || 'Keine Auswahl';
|
|
const noneIcon = options.noneIcon || 'fa-ban';
|
|
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'agent-picker-overlay';
|
|
|
|
const modal = document.createElement('div');
|
|
modal.className = 'agent-picker-modal';
|
|
|
|
const header = document.createElement('div');
|
|
header.className = 'agent-picker-header';
|
|
header.innerHTML = `<span>${esc(title)}</span><button class="icon-btn agent-picker-close"><i class="fa fa-times"></i></button>`;
|
|
modal.appendChild(header);
|
|
|
|
const body = document.createElement('div');
|
|
body.className = 'agent-picker-body';
|
|
|
|
// "Keine" Option
|
|
const noneCard = document.createElement('div');
|
|
noneCard.className = 'card agent-picker-item' + (!currentId ? ' selected' : '');
|
|
noneCard.innerHTML = `
|
|
<div class="card-image none-card-image"><i class="fa ${esc(noneIcon)} none-card-icon"></i></div>
|
|
<div class="card-body">
|
|
<div class="card-title-row">
|
|
<span class="card-title">${esc(noneLabel)}</span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
noneCard.addEventListener('click', () => {
|
|
onSelect(null);
|
|
overlay.remove();
|
|
});
|
|
body.appendChild(noneCard);
|
|
|
|
// Items
|
|
for (const item of items) {
|
|
const cardEl = options.buildCard(item);
|
|
cardEl.classList.add('agent-picker-item');
|
|
if (item._pickerId === currentId) cardEl.classList.add('selected');
|
|
cardEl.addEventListener('click', () => {
|
|
onSelect(item._pickerId);
|
|
overlay.remove();
|
|
});
|
|
body.appendChild(cardEl);
|
|
}
|
|
|
|
modal.appendChild(body);
|
|
overlay.appendChild(modal);
|
|
document.body.appendChild(overlay);
|
|
|
|
header.querySelector('.agent-picker-close').addEventListener('click', () => overlay.remove());
|
|
overlay.addEventListener('click', (e) => {
|
|
if (e.target === overlay) overlay.remove();
|
|
});
|
|
}
|
|
|
|
// ── Telegram Bot Picker Modal ──
|
|
|
|
function openTelegramBotPickerModal(bots, currentBotId, onSelect) {
|
|
var items = bots.map(function(b) {
|
|
b._pickerId = b.botId;
|
|
return b;
|
|
});
|
|
_openPickerModal('Telegram Bot auswählen', items, currentBotId, onSelect, {
|
|
noneLabel: 'Kein Bot',
|
|
noneIcon: 'fa-paper-plane',
|
|
buildCard: function(b) { return buildTelegramBotCard(b); }
|
|
});
|
|
}
|
|
|
|
// ── OpenClaw Import Modal ──
|
|
|
|
async function showOpenClawImportModal(sessionId) {
|
|
const { body, close } = _createModal('OpenClaw Import', { modal: 'openclaw-import-modal' });
|
|
body.innerHTML = '<div class="sp-loading">Sessions werden geladen...</div>';
|
|
|
|
try {
|
|
const sessions = await apiGetOpenclawSessions();
|
|
|
|
if (!sessions || sessions.length === 0) {
|
|
body.innerHTML = '<div class="sp-loading">Keine OpenClaw-Sessions gefunden</div>';
|
|
return;
|
|
}
|
|
|
|
body.innerHTML = '';
|
|
|
|
var hint = document.createElement('div');
|
|
hint.className = 'openclaw-hint';
|
|
hint.textContent = 'Wähle eine OpenClaw-Session zum Importieren. Vorherige Imports werden aktualisiert.';
|
|
body.appendChild(hint);
|
|
|
|
var list = document.createElement('div');
|
|
list.className = 'openclaw-session-list';
|
|
|
|
for (var i = 0; i < sessions.length; i++) {
|
|
var s = sessions[i];
|
|
var card = document.createElement('div');
|
|
card.className = 'openclaw-session-card';
|
|
|
|
// Header
|
|
var header = document.createElement('div');
|
|
header.className = 'openclaw-card-header';
|
|
|
|
var idSpan = document.createElement('span');
|
|
idSpan.className = 'openclaw-session-id';
|
|
idSpan.textContent = s.sessionId.substring(0, 8) + '…';
|
|
idSpan.title = s.sessionId;
|
|
header.appendChild(idSpan);
|
|
|
|
var meta = document.createElement('span');
|
|
meta.className = 'openclaw-card-meta';
|
|
meta.innerHTML = '<span class="openclaw-meta-item"><i class="fa fa-calendar"></i> ' + esc(formatDate(s.createdAt)) + '</span>'
|
|
+ '<span class="openclaw-meta-item"><i class="fa fa-comments"></i> ' + s.totalMessages + ' Nachrichten</span>'
|
|
+ (s.model && s.model !== 'unknown' ? '<span class="openclaw-meta-item"><i class="fa fa-microchip"></i> ' + esc(s.model) + '</span>' : '');
|
|
header.appendChild(meta);
|
|
card.appendChild(header);
|
|
|
|
// Summary
|
|
if (s.summary) {
|
|
var summary = document.createElement('div');
|
|
summary.className = 'openclaw-summary';
|
|
// Take first line of summary that's meaningful (skip empty lines and headers)
|
|
var summaryLines = s.summary.split('\n').filter(function(l) { return l.trim() && !l.startsWith('#'); });
|
|
var summaryText = summaryLines.slice(0, 2).join(' ').trim();
|
|
if (summaryText.length > 150) summaryText = summaryText.substring(0, 150) + '…';
|
|
summary.textContent = summaryText || s.summary.substring(0, 150);
|
|
card.appendChild(summary);
|
|
}
|
|
|
|
// Preview messages
|
|
if (s.previewMessages && s.previewMessages.length > 0) {
|
|
var preview = document.createElement('div');
|
|
preview.className = 'openclaw-preview';
|
|
|
|
for (var j = 0; j < s.previewMessages.length; j++) {
|
|
var pm = s.previewMessages[j];
|
|
var line = document.createElement('div');
|
|
line.className = 'openclaw-preview-msg openclaw-preview-' + pm.role;
|
|
var icon = pm.role === 'user' ? 'fa-user' : 'fa-cog';
|
|
line.innerHTML = '<i class="fa ' + icon + '"></i> <span>' + esc(pm.text) + '</span>';
|
|
preview.appendChild(line);
|
|
}
|
|
card.appendChild(preview);
|
|
}
|
|
|
|
// Click handler - capture session in closure
|
|
(function(openclawSession) {
|
|
card.addEventListener('click', async function() {
|
|
// Confirm
|
|
var confirmed = confirm('OpenClaw-Session importieren?\n\nSession: ' + openclawSession.sessionId.substring(0, 8) + '…\n' + openclawSession.totalMessages + ' Nachrichten\n\nVorhandene Imports werden ersetzt.');
|
|
if (!confirmed) return;
|
|
|
|
card.classList.add('loading-state');
|
|
|
|
try {
|
|
var result = await apiImportOpenclawSession(openclawSession.sessionId, sessionId);
|
|
close();
|
|
showToast(result.messageCount + ' Nachrichten in ' + result.chainCount + ' Chains importiert', 'success');
|
|
} catch (e) {
|
|
card.classList.remove('loading-state');
|
|
showToast('Import fehlgeschlagen: ' + e.message, 'error');
|
|
}
|
|
});
|
|
})(s);
|
|
|
|
list.appendChild(card);
|
|
}
|
|
|
|
body.appendChild(list);
|
|
} catch (e) {
|
|
body.innerHTML = '<div class="sp-loading text-danger">Fehler: ' + esc(e.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
// ── Remote-Verbindungen Modal ──
|
|
|
|
async function showRemoteModal(sessionId) {
|
|
const { body, close } = _createModal('Remote-Verbindungen');
|
|
|
|
body.innerHTML = '<div class="sp-loading">Laden...</div>';
|
|
|
|
async function renderConnections() {
|
|
try {
|
|
const connections = await apiGetRemoteConnections();
|
|
body.innerHTML = '';
|
|
|
|
if (!connections || connections.length === 0) {
|
|
var empty = document.createElement('div');
|
|
empty.className = 'sp-loading';
|
|
empty.innerHTML = 'Keine Remote-Verbindungen aktiv.<br><br>' +
|
|
'<span class="font-sm semi-transparent">Auf dem Windows-PC ausführen:<br>' +
|
|
'<code>irm ' + esc(location.origin) + '/remote | iex</code></span>';
|
|
body.appendChild(empty);
|
|
return;
|
|
}
|
|
|
|
var hint = document.createElement('div');
|
|
hint.className = 'remote-hint';
|
|
hint.textContent = 'Verbindung auswählen um Remote-Befehle in dieser Session zu ermöglichen:';
|
|
body.appendChild(hint);
|
|
|
|
for (var i = 0; i < connections.length; i++) {
|
|
var conn = connections[i];
|
|
var card = document.createElement('div');
|
|
card.className = 'sp-block';
|
|
card.classList.add('clickable');
|
|
|
|
var isAssigned = conn.assignedSessionId === sessionId;
|
|
var isAssignedOther = conn.assignedSessionId && conn.assignedSessionId !== sessionId;
|
|
|
|
var label = document.createElement('div');
|
|
label.className = 'sp-block-label';
|
|
var statusIcon = isAssigned ? 'fa-check-circle' : (isAssignedOther ? 'fa-link' : 'fa-desktop');
|
|
var statusClass = isAssigned ? ' text-primary' : '';
|
|
label.innerHTML = '<i class="fa ' + statusIcon + statusClass + '"></i> ' +
|
|
esc(conn.username || '?') + '@' + esc(conn.hostname || '?');
|
|
card.appendChild(label);
|
|
|
|
var content = document.createElement('div');
|
|
content.className = 'sp-block-content';
|
|
content.className = 'remote-card-content';
|
|
|
|
var info = document.createElement('span');
|
|
info.className = 'remote-card-info';
|
|
var connDate = new Date(conn.connectedAt);
|
|
info.textContent = conn.os + ' • Verbunden seit ' + connDate.toLocaleTimeString('de');
|
|
content.appendChild(info);
|
|
|
|
var btn = document.createElement('button');
|
|
if (isAssigned) {
|
|
btn.textContent = 'Trennen';
|
|
btn.classList.add('text-danger');
|
|
} else if (isAssignedOther) {
|
|
btn.textContent = 'Andere Session';
|
|
btn.disabled = true;
|
|
btn.classList.add('semi-transparent');
|
|
} else {
|
|
btn.textContent = 'Verbinden';
|
|
btn.classList.add('text-primary');
|
|
}
|
|
content.appendChild(btn);
|
|
|
|
card.appendChild(content);
|
|
body.appendChild(card);
|
|
|
|
// Event-Handler
|
|
(function(c, assigned) {
|
|
btn.addEventListener('click', async function(e) {
|
|
e.stopPropagation();
|
|
btn.disabled = true;
|
|
try {
|
|
if (assigned) {
|
|
await apiUnassignRemote(c.id);
|
|
} else {
|
|
await apiAssignRemote(c.id, sessionId);
|
|
}
|
|
await renderConnections();
|
|
} catch(err) {
|
|
showToast('Fehler: ' + err.message, 'error');
|
|
btn.disabled = false;
|
|
}
|
|
});
|
|
})(conn, isAssigned);
|
|
}
|
|
} catch (e) {
|
|
body.innerHTML = '<div class="sp-loading text-danger">Fehler beim Laden: ' + esc(e.message) + '</div>';
|
|
}
|
|
}
|
|
|
|
await renderConnections();
|
|
}
|
|
|
|
// Event-Delegation für Krea-Thumbnails im Chat
|
|
document.addEventListener('click', function(e) {
|
|
var ref = e.target.closest('.krea-ref');
|
|
if (ref) {
|
|
var fullUrl = ref.dataset.fullurl;
|
|
var filename = ref.dataset.filename;
|
|
if (fullUrl) showKreaImageModal(filename || 'Bild', fullUrl);
|
|
}
|
|
});
|