Files
gott/wwwroot/js/pages/dashboard.js
T
Meleki 057d37d76f feat: Avatar Scale (0.5×–3×) + Krea AI Bildgenerierung für Avatare
Backend:
- SessionRecord + AgentRecord: neues Feld AvatarScale (double, Default 1.0)
- DatabaseService: avatar_scale Migration, in Create/Update/GetWithStats
- SessionEndpoint + AgentEndpoint: avatarScale in Create/Update
- api.js: apiKreaStatus(), apiKreaGenerate()

Frontend:
- Session + Agent Templates: Range-Slider (0.5×–3×) in Avatar-Section
- Krea AI Generate: Prompt-Input + Magic-Button (nur wenn KreaToken konfiguriert)
- Live-Preview: transform: scale() auf Avatar-Vorschau
- Dashboard: scale() auf Session- und Agent-Card-Images
- form.css: avatar-scale-row + avatar-ai-section Styling
2026-03-06 10:59:09 +01:00

450 lines
20 KiB
JavaScript

// ── Dashboard Page ──
registerPage('dashboard', {
async init() {
// Einstellungen-Link
document.getElementById('dashboardSettingsLink').addEventListener('click', (e) => {
e.preventDefault();
navigateTo('settings');
});
// Profil-Link
document.getElementById('dashboardProfileLink').addEventListener('click', (e) => {
e.preventDefault();
navigateTo('profile');
});
// Admin-Link (nur für Admins sichtbar)
var adminLink = document.getElementById('dashboardAdminLink');
if (currentUser && currentUser.isAdmin) {
adminLink.hidden = false;
adminLink.addEventListener('click', (e) => {
e.preventDefault();
navigateTo('admin');
});
}
// Globaler Click-Handler zum Schließen aller Card-Menüs
document.addEventListener('click', this._closeCardMenus = () => closeAllCardMenus());
// Telegram-Config parallel pro Session laden (sessions werden gleich geladen)
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';
const msgLabel1 = s.messageCount ? `${s.messageCount} Nachrichten` : '';
const msgLabel2 = s.archiveMessageCount ? `${s.archiveMessageCount} Nachrichten archiviert` : '';
const workspaceLabel = s.workspace ? s.workspace : '';
const sessionBadges = [];
if (agent) sessionBadges.push(`<span class="badge">${esc(agent.name)}</span>`);
if (s.context) sessionBadges.push(`<span class="badge badge-feature" title="${esc(s.context)}"><i class="fa fa-file-text-o"></i></span>`);
if (s.telegramConfigured) sessionBadges.push(`<span class="badge ${s.telegramLinked ? 'badge-feature' : 'badge-off'}" title="Telegram ${s.telegramLinked ? 'verbunden' : 'konfiguriert'}"><i class="fa fa-paper-plane"></i></span>`);
const scaleStyle = s.avatarScale && s.avatarScale !== 1 ? ` style="scale: ${s.avatarScale}"` : '';
card.innerHTML = `
<div class="card-image">${s.image ? `<img src="${s.image}" alt=""${scaleStyle}>` : ''}</div>
<div class="card-body">
<div class="card-title-row">
<span class="card-title">${esc(s.name || 'Unbenannt')}</span>
${sessionBadges.join('')}
<div class="card-menu">
<button class="card-menu-trigger icon-btn"><i class="fa fa-ellipsis-v"></i></button>
<div class="card-menu-dropdown" hidden>
<button class="card-menu-item" data-action="edit"><i class="fa fa-pencil"></i> Bearbeiten</button>
<button class="card-menu-item" data-action="chat"><i class="fa fa-comment"></i> Chat öffnen</button>
</div>
</div>
</div>
<div class="card-meta">
${msgLabel1 ? `<span class="card-meta-item"><i class="fa fa-comment"></i> ${esc(msgLabel1)}</span>` : ''}
${msgLabel2 ? `<span class="card-meta-item"><i class="fa fa-archive"></i> ${esc(msgLabel2)}</span>` : ''}
${workspaceLabel ? `<span class="card-meta-item card-workspace" title="${esc(workspaceLabel)}"><i class="fa fa-folder"></i> ${esc(workspaceLabel)}</span>` : ''}
</div>
</div>
`;
// Chat deaktivieren wenn kein Agent gesetzt
const chatBtn = card.querySelector('[data-action="chat"]');
if (!agent) {
chatBtn.disabled = true;
chatBtn.title = 'Kein Agent zugewiesen';
}
// Card selbst klickbar wenn Agent zugewiesen
if (agent) {
card.classList.add('clickable');
card.addEventListener('click', () => navigateTo('chat', { id: s.sessionId }));
}
const menuTrigger = card.querySelector('.card-menu-trigger');
const menuDropdown = card.querySelector('.card-menu-dropdown');
menuTrigger.addEventListener('click', (e) => {
e.stopPropagation();
closeAllCardMenus();
// Position fixed dropdown below trigger, aligned to the left
const rect = menuTrigger.getBoundingClientRect();
menuDropdown.hidden = false;
const dropRect = menuDropdown.getBoundingClientRect();
// Position: below trigger, right edge aligned with trigger's right edge
menuDropdown.style.top = `${rect.bottom + 4}px`;
menuDropdown.style.left = `${rect.right - dropRect.width}px`;
// Adjust if off-screen bottom
if (rect.bottom + 4 + dropRect.height > window.innerHeight) {
menuDropdown.style.top = `${rect.top - dropRect.height - 4}px`;
}
// Safety: if off-screen left
const finalRect = menuDropdown.getBoundingClientRect();
if (finalRect.left < 0) {
menuDropdown.style.left = '8px';
}
});
chatBtn.addEventListener('click', (e) => {
e.stopPropagation();
if (chatBtn.disabled) return;
menuDropdown.hidden = true;
navigateTo('chat', { id: s.sessionId });
});
menuDropdown.querySelector('[data-action="edit"]').addEventListener('click', (e) => {
e.stopPropagation();
menuDropdown.hidden = true;
navigateTo('session', { id: s.sessionId });
});
grid.appendChild(card);
// Git-Status asynchron laden
if (s.workspace) {
apiGitStatus(s.sessionId).then(status => {
if (!status || status.error) return;
const addCount = (status.add || []).length;
const editCount = (status.edit || []).length;
const deleteCount = (status.delete || []).length;
const outgoing = status.outgoing || 0;
if (addCount + editCount + deleteCount + outgoing === 0) return;
const metaEl = card.querySelector('.card-meta');
if (!metaEl) return;
const parts = [];
if (addCount > 0) {
const tip = `${addCount} ${addCount === 1 ? 'Datei' : 'Dateien'} hinzugefügt`;
parts.push(`<span class="git-badge git-add" title="${esc(tip)}">+${addCount}</span>`);
}
if (editCount > 0) {
const tip = `${editCount} ${editCount === 1 ? 'Datei' : 'Dateien'} geändert`;
parts.push(`<span class="git-badge git-edit" title="${esc(tip)}">~${editCount}</span>`);
}
if (deleteCount > 0) {
const tip = `${deleteCount} ${deleteCount === 1 ? 'Datei' : 'Dateien'} gelöscht`;
parts.push(`<span class="git-badge git-delete" title="${esc(tip)}">-${deleteCount}</span>`);
}
if (outgoing > 0) {
const tip = `${outgoing} ${outgoing === 1 ? 'Commit muss' : 'Commits müssen'} noch gepusht werden`;
parts.push(`<span class="git-badge git-outgoing" title="${esc(tip)}"><i class="fa fa-arrow-up"></i> ${outgoing}</span>`);
}
const gitEl = document.createElement('span');
gitEl.className = 'card-meta-item card-git-status';
gitEl.innerHTML = parts.join(' ');
metaEl.appendChild(gitEl);
});
}
}
// Neue Session Button
document.getElementById('newSessionBtn').addEventListener('click', () => navigateTo('session'));
// Agents
const agentGrid = document.getElementById('agentCards');
agentGrid.innerHTML = '';
// Skills pro Agent parallel laden
const agentSkillsMap = {};
await Promise.all(agents.map(async a => {
agentSkillsMap[a.agentId] = await apiGetAgentSkills(a.agentId);
}));
for (const a of agents) {
const card = document.createElement('div');
card.className = 'card';
const badges = [];
if (a.toolChoice === 'any') badges.push('<span class="badge badge-forced-feature" title="Tool-Nutzung erzwingen"><i class="fa fa-wrench"></i> Erzwungen</span>');
if (a.autoCommit === 'mention') badges.push('<span class="badge badge-feature" title="Git-Commits nur auf Anweisung"><i class="fa fa-code-fork"></i> Anmerken</span>');
if (a.autoCommit === 'enforce') badges.push('<span class="badge badge-forced-feature" title="Git-Commits nach jeder Änderung erzwungen"><i class="fa fa-code-fork"></i> Erzwungen</span>');
if (a.autoCommit === 'forbid') badges.push('<span class="badge badge-forced-feature" title="Git-Commits strikt verboten"><i class="fa fa-code-fork"></i> Verboten</span>');
if (a.useSoul) badges.push('<span class="badge badge-feature" title="Hat eine Seele (SOUL.md)"><i class="fa fa-heart"></i> Seele</span>');
if (a.useIdentity) badges.push('<span class="badge badge-feature" title="Hat eine Identität (IDENTITY.md)"><i class="fa fa-id-badge"></i> Ich</span>');
if (a.useUserInfo) badges.push('<span class="badge badge-feature" title="Kennt sein Gegenüber (Benutzer-Persona)"><i class="fa fa-user"></i> Du</span>');
if (a.useMemory) badges.push('<span class="badge badge-feature" title="Zugriff auf Erinnerungen (Memory-Tools)"><i class="fa fa-database"></i> Erinnerungen</span>');
if (a.webSearchVersion) {
const wsYear = a.webSearchVersion.includes('2025') ? 'Version 2025' : 'v2026';
badges.push(`<span class="badge badge-feature" title="Web-Suche - ${wsYear}"><i class="fa fa-search"></i> Web-Suche</span>`);
}
const skills = agentSkillsMap[a.agentId] || [];
for (const skill of skills) {
badges.push(`<span class="badge badge-skill" title="${esc(skill.description || skill.slug)}"><i class="fa fa-puzzle-piece"></i> ${esc(skill.name)}</span>`);
}
const agentScaleStyle = a.avatarScale && a.avatarScale !== 1 ? ` style="transform: scale(${a.avatarScale})"` : '';
card.innerHTML = `
<div class="card-image">${a.avatar ? `<img src="${a.avatar}" alt=""${agentScaleStyle}>` : ''}</div>
<div class="card-body">
<div class="card-title-row">
<span class="card-title">${esc(a.name)}</span>
<span class="badge">${prettyModelName(a.model)}</span>
<div class="card-menu">
<button class="card-menu-trigger icon-btn"><i class="fa fa-ellipsis-v"></i></button>
<div class="card-menu-dropdown" hidden>
<button class="card-menu-item" data-action="edit"><i class="fa fa-pencil"></i> Bearbeiten</button>
<button class="card-menu-item" data-action="files"><i class="fa fa-folder"></i> Dateien verwalten</button>
</div>
</div>
</div>
<div class="card-badges">${badges.join('')}</div>
</div>
`;
const menuTrigger = card.querySelector('.card-menu-trigger');
const menuDropdown = card.querySelector('.card-menu-dropdown');
menuTrigger.addEventListener('click', (e) => {
e.stopPropagation();
closeAllCardMenus();
// Position fixed dropdown below trigger, aligned to the left
const rect = menuTrigger.getBoundingClientRect();
menuDropdown.hidden = false;
const dropRect = menuDropdown.getBoundingClientRect();
// Position: below trigger, right edge aligned with trigger's right edge
menuDropdown.style.top = `${rect.bottom + 4}px`;
menuDropdown.style.left = `${rect.right - dropRect.width}px`;
// Adjust if off-screen bottom
if (rect.bottom + 4 + dropRect.height > window.innerHeight) {
menuDropdown.style.top = `${rect.top - dropRect.height - 4}px`;
}
// Safety: if off-screen left
const finalRect = menuDropdown.getBoundingClientRect();
if (finalRect.left < 0) {
menuDropdown.style.left = '8px';
}
});
menuDropdown.querySelector('[data-action="files"]').addEventListener('click', (e) => {
e.stopPropagation();
menuDropdown.hidden = true;
openFileExplorer({ agentId: a.agentId });
});
menuDropdown.querySelector('[data-action="edit"]').addEventListener('click', (e) => {
e.stopPropagation();
menuDropdown.hidden = true;
navigateTo('agent', { id: a.agentId });
});
agentGrid.appendChild(card);
}
// Neuer Agent Button
document.getElementById('newAgentBtn').addEventListener('click', () => navigateTo('agent'));
// Cronjobs
const cronjobs = await apiGetCronjobs();
const cronjobGrid = document.getElementById('cronjobCards');
cronjobGrid.innerHTML = '';
for (const cj of cronjobs) {
const card = document.createElement('div');
card.className = 'card card-compact';
const statusBadge = cj.isEnabled
? '<span class="badge badge-feature"><i class="fa fa-check-circle"></i> Aktiv</span>'
: '<span class="badge badge-off"><i class="fa fa-pause-circle"></i> Pausiert</span>';
const lastRunIcon = cj.lastRunStatus === 'success' ? '✅'
: cj.lastRunStatus === 'error' ? '❌' : '';
const cronDesc = describeCron(cj.cronExpression) || cj.cronExpression;
card.innerHTML = `
<div class="card-body">
<div class="card-title-row">
<span class="card-title">${esc(cj.name)}</span>
${statusBadge}
<div class="card-menu">
<button class="card-menu-trigger icon-btn"><i class="fa fa-ellipsis-v"></i></button>
<div class="card-menu-dropdown" hidden>
<button class="card-menu-item" data-action="edit"><i class="fa fa-pencil"></i> Bearbeiten</button>
<button class="card-menu-item" data-action="toggle"><i class="fa fa-${cj.isEnabled ? 'pause' : 'play'}"></i> ${cj.isEnabled ? 'Pausieren' : 'Aktivieren'}</button>
<button class="card-menu-item" data-action="run"><i class="fa fa-play-circle"></i> Jetzt ausführen</button>
</div>
</div>
</div>
<div class="card-meta">
<span class="card-meta-item"><i class="fa fa-clock-o"></i> ${esc(cronDesc)}</span>
${cj.sessionName ? `<span class="card-meta-item"><i class="fa fa-comment"></i> ${esc(cj.sessionName)}</span>` : ''}
${lastRunIcon ? `<span class="card-meta-item">${lastRunIcon} ${cj.lastRunAt ? formatDate(cj.lastRunAt) : ''}</span>` : ''}
</div>
</div>
`;
const menuTrigger = card.querySelector('.card-menu-trigger');
const menuDropdown = card.querySelector('.card-menu-dropdown');
menuTrigger.addEventListener('click', (e) => {
e.stopPropagation();
closeAllCardMenus();
const rect = menuTrigger.getBoundingClientRect();
menuDropdown.hidden = false;
const dropRect = menuDropdown.getBoundingClientRect();
menuDropdown.style.top = `${rect.bottom + 4}px`;
menuDropdown.style.left = `${rect.right - dropRect.width}px`;
if (rect.bottom + 4 + dropRect.height > window.innerHeight) {
menuDropdown.style.top = `${rect.top - dropRect.height - 4}px`;
}
const finalRect = menuDropdown.getBoundingClientRect();
if (finalRect.left < 0) menuDropdown.style.left = '8px';
});
menuDropdown.querySelector('[data-action="edit"]').addEventListener('click', (e) => {
e.stopPropagation();
menuDropdown.hidden = true;
navigateTo('cronjob', { id: cj.cronjobId });
});
menuDropdown.querySelector('[data-action="toggle"]').addEventListener('click', async (e) => {
e.stopPropagation();
menuDropdown.hidden = true;
await apiToggleCronjob(cj.cronjobId);
showToast(cj.isEnabled ? 'Cronjob pausiert' : 'Cronjob aktiviert');
navigateTo('dashboard', {}, { replace: true });
});
menuDropdown.querySelector('[data-action="run"]').addEventListener('click', async (e) => {
e.stopPropagation();
menuDropdown.hidden = true;
showToast('Cronjob wird ausgeführt...');
const result = await apiRunCronjob(cj.cronjobId);
if (result.status === 'success') {
showToast('Cronjob erfolgreich ausgeführt');
} else {
showToast('Fehler: ' + (result.error || 'Unbekannt'), 'error');
}
navigateTo('dashboard', {}, { replace: true });
});
cronjobGrid.appendChild(card);
}
// Neuer Cronjob Button
document.getElementById('newCronjobBtn').addEventListener('click', () => navigateTo('cronjob'));
// Shared Links
const shares = await apiListShares();
const sharedSection = document.getElementById('sharedLinksSection');
const sharedGrid = document.getElementById('sharedLinksCards');
if (shares.length > 0) {
sharedSection.hidden = false;
sharedGrid.innerHTML = '';
for (const s of shares) {
const card = document.createElement('div');
card.className = 'card card-compact';
const shareUrl = `${location.origin}/#shared/${s.shareToken}`;
const modeLabel = s.includeContext ? 'Thread' : 'Einzeln';
const roleIcon = s.role === 'user' ? 'fa-user' : 'fa-cog';
card.innerHTML = `
<div class="card-body">
<div class="card-title-row">
<span class="card-title"><i class="fa ${roleIcon}"></i> ${esc(s.preview || '(leer)')}</span>
<div class="card-menu">
<button class="card-menu-trigger icon-btn"><i class="fa fa-ellipsis-v"></i></button>
<div class="card-menu-dropdown" hidden>
<button class="card-menu-item" data-action="copy"><i class="fa fa-clipboard"></i> Link kopieren</button>
<button class="card-menu-item" data-action="open"><i class="fa fa-external-link"></i> Öffnen</button>
<button class="card-menu-item" data-action="delete"><i class="fa fa-trash"></i> Löschen</button>
</div>
</div>
</div>
<div class="card-meta">
${s.sessionName ? `<span class="card-meta-item"><i class="fa fa-comment"></i> ${esc(s.sessionName)}</span>` : ''}
<span class="card-meta-item"><i class="fa fa-${s.includeContext ? 'comments' : 'comment-o'}"></i> ${modeLabel}</span>
<span class="card-meta-item"><i class="fa fa-clock-o"></i> ${formatDate(s.createdAt)}</span>
</div>
</div>
`;
const menuTrigger = card.querySelector('.card-menu-trigger');
const menuDropdown = card.querySelector('.card-menu-dropdown');
menuTrigger.addEventListener('click', (e) => {
e.stopPropagation();
closeAllCardMenus();
const rect = menuTrigger.getBoundingClientRect();
menuDropdown.hidden = false;
const dropRect = menuDropdown.getBoundingClientRect();
menuDropdown.style.top = `${rect.bottom + 4}px`;
menuDropdown.style.left = `${rect.right - dropRect.width}px`;
if (rect.bottom + 4 + dropRect.height > window.innerHeight) {
menuDropdown.style.top = `${rect.top - dropRect.height - 4}px`;
}
const finalRect = menuDropdown.getBoundingClientRect();
if (finalRect.left < 0) menuDropdown.style.left = '8px';
});
menuDropdown.querySelector('[data-action="copy"]').addEventListener('click', async (e) => {
e.stopPropagation();
menuDropdown.hidden = true;
await navigator.clipboard.writeText(shareUrl);
showToast('Link kopiert!');
});
menuDropdown.querySelector('[data-action="open"]').addEventListener('click', (e) => {
e.stopPropagation();
menuDropdown.hidden = true;
window.open(shareUrl, '_blank');
});
menuDropdown.querySelector('[data-action="delete"]').addEventListener('click', async (e) => {
e.stopPropagation();
menuDropdown.hidden = true;
await apiDeleteShare(s.shareToken);
card.remove();
if (sharedGrid.children.length === 0) sharedSection.hidden = true;
showToast('Link gelöscht');
});
sharedGrid.appendChild(card);
}
}
},
destroy() {
if (this._closeCardMenus) {
document.removeEventListener('click', this._closeCardMenus);
this._closeCardMenus = null;
}
}
});
function closeAllCardMenus() {
document.querySelectorAll('.card-menu-dropdown').forEach(d => d.hidden = true);
}
function esc(s) {
const d = document.createElement('div');
d.textContent = s;
return d.innerHTML;
}
function formatDate(iso) {
if (!iso) return '';
return new Date(iso).toLocaleString('de-AT', {
day: '2-digit', month: '2-digit', year: '2-digit',
hour: '2-digit', minute: '2-digit'
});
}