Custom Commands ins Header-Dropdown-Menü verschoben
- customCmdBar entfernt, Commands als header-menu-items ins Dropdown eingefügt - Sektions-Labels: System, Agent, Session mit Separatoren - Header-Menü-Init nach oben verschoben (vor Command-Aufbau) - CSS: alte cmd-bar Styles entfernt, neue separator/label/cmd Styles
This commit is contained in:
Meleki committed
1 parent
38eaed12dd
commit
41d99ec840
3 files changed
+112
-131
No files matched your search
+15
-29
@@ -13,35 +13,6 @@
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
}
|
||||
|
||||
/* Custom Command Buttons */
|
||||
|
||||
.custom-cmd-bar {
|
||||
display: flex;
|
||||
gap: var(--badge-spacing);
|
||||
margin-left: var(--badge-spacing);
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-cmd-bar:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cmd-bar-label {
|
||||
font-size: var(--font-size);
|
||||
opacity: var(--semi-transparent);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.custom-cmd-btn:hover {
|
||||
background: var(--f3-bg);
|
||||
border-color: var(--f3-border);
|
||||
}
|
||||
|
||||
.custom-cmd-btn.running {
|
||||
opacity: var(--semi-transparent);
|
||||
}
|
||||
|
||||
/* Header Menu */
|
||||
|
||||
.header-menu {
|
||||
@@ -82,6 +53,21 @@
|
||||
border: none;
|
||||
}
|
||||
|
||||
.header-menu-separator {
|
||||
border-top: var(--border-width) solid var(--f2-border);
|
||||
}
|
||||
|
||||
.header-menu-label {
|
||||
padding: var(--badge-spacing) .75em;
|
||||
font-size: var(--font-size);
|
||||
opacity: var(--semi-transparent);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.header-menu-cmd.running {
|
||||
opacity: var(--semi-transparent);
|
||||
}
|
||||
|
||||
.meta-bar {
|
||||
padding: var(--box-padding);
|
||||
background: var(--chat-bg);
|
||||
|
||||
@@ -148,7 +148,6 @@
|
||||
<header>
|
||||
<button class="back-btn icon-btn" id="chatBackBtn"><i class="fa fa-arrow-left"></i></button>
|
||||
<h1 id="sessionTitle">-</h1>
|
||||
<div class="custom-cmd-bar" id="customCmdBar"></div>
|
||||
<div class="header-menu">
|
||||
<button class="header-menu-trigger icon-btn" id="chatMenuBtn"><i class="fa fa-ellipsis-v"></i></button>
|
||||
<div class="header-menu-dropdown" id="chatMenuDropdown" hidden>
|
||||
|
||||
+97
-101
@@ -57,10 +57,57 @@ registerPage('chat', {
|
||||
titleEl.textContent = session.name || 'Unbenannt';
|
||||
}
|
||||
|
||||
// Custom Command Buttons (Agent + Session)
|
||||
const cmdBar = document.getElementById('customCmdBar');
|
||||
if (cmdBar) {
|
||||
cmdBar.innerHTML = '';
|
||||
// Header-Menü (3-Dot)
|
||||
const chatMenuBtn = document.getElementById('chatMenuBtn');
|
||||
const chatMenuDropdown = document.getElementById('chatMenuDropdown');
|
||||
if (chatMenuBtn && chatMenuDropdown) {
|
||||
chatMenuBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
chatMenuDropdown.hidden = !chatMenuDropdown.hidden;
|
||||
});
|
||||
document.addEventListener('click', this._closeMenu = () => {
|
||||
chatMenuDropdown.hidden = true;
|
||||
});
|
||||
}
|
||||
|
||||
// System-Prompt anzeigen
|
||||
const systemPromptBtn = document.getElementById('systemPromptBtn');
|
||||
if (systemPromptBtn) systemPromptBtn.addEventListener('click', () => {
|
||||
if (chatMenuDropdown) chatMenuDropdown.hidden = true;
|
||||
showSystemPromptModal(sessionId);
|
||||
});
|
||||
|
||||
// Archivieren
|
||||
const archiveBtn = document.getElementById('archiveBtn');
|
||||
if (archiveBtn) archiveBtn.addEventListener('click', () => {
|
||||
if (chatMenuDropdown) chatMenuDropdown.hidden = true;
|
||||
clearChat();
|
||||
});
|
||||
|
||||
// Datenbank sichern
|
||||
const backupDbBtn = document.getElementById('backupDbBtn');
|
||||
if (backupDbBtn) backupDbBtn.addEventListener('click', async () => {
|
||||
if (chatMenuDropdown) chatMenuDropdown.hidden = true;
|
||||
backupDbBtn.disabled = true;
|
||||
try {
|
||||
await apiBackupDb();
|
||||
setMetaHtml('<i class="fa fa-check-circle"></i> Backup erstellt und heruntergeladen');
|
||||
} catch (e) {
|
||||
console.error('Backup fehlgeschlagen:', e);
|
||||
setMetaHtml('<i class="fa fa-times-circle"></i> Backup fehlgeschlagen');
|
||||
} finally {
|
||||
backupDbBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Custom Command Buttons ins Header-Menü einfügen
|
||||
if (chatMenuDropdown) {
|
||||
// "System"-Label ganz oben einfügen
|
||||
const systemLabel = document.createElement('div');
|
||||
systemLabel.className = 'header-menu-label';
|
||||
systemLabel.textContent = 'System';
|
||||
chatMenuDropdown.prepend(systemLabel);
|
||||
|
||||
let agentCmds = [];
|
||||
if (session.agentId) {
|
||||
try {
|
||||
@@ -73,63 +120,55 @@ registerPage('chat', {
|
||||
let sessionCmds = [];
|
||||
try { sessionCmds = JSON.parse(session.customCommands || '[]') || []; } catch(e) {}
|
||||
|
||||
const allCmds = agentCmds.concat(sessionCmds);
|
||||
const hasAgentCmds = agentCmds.length > 0;
|
||||
const hasSessionCmds = sessionCmds.length > 0;
|
||||
const hasBoth = hasAgentCmds && hasSessionCmds;
|
||||
|
||||
if (hasBoth) {
|
||||
const sep1 = document.createElement('span');
|
||||
sep1.className = 'cmd-bar-label';
|
||||
sep1.textContent = 'Agent:';
|
||||
cmdBar.appendChild(sep1);
|
||||
}
|
||||
|
||||
let sessionSepAdded = false;
|
||||
let cmdIndex = 0;
|
||||
allCmds.forEach((cmd, idx) => {
|
||||
if (hasBoth && !sessionSepAdded && idx === agentCmds.length) {
|
||||
const sep2 = document.createElement('span');
|
||||
sep2.className = 'cmd-bar-label';
|
||||
sep2.textContent = 'Session:';
|
||||
cmdBar.appendChild(sep2);
|
||||
sessionSepAdded = true;
|
||||
}
|
||||
if (!cmd.name || !cmd.command) return;
|
||||
const type = cmd.type || 'background';
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'custom-cmd-btn';
|
||||
if (type === 'message') btn.classList.add('cmd-type-message');
|
||||
btn.textContent = cmd.name;
|
||||
btn.title = type === 'message' ? cmd.command : `[${type}] ${cmd.command}`;
|
||||
btn.addEventListener('click', async () => {
|
||||
if (type === 'message') {
|
||||
// Nachricht in den Chat senden
|
||||
const inputEl = document.getElementById('input');
|
||||
if (inputEl) {
|
||||
inputEl.value = cmd.command;
|
||||
inputEl.dispatchEvent(new Event('input'));
|
||||
const addCmdSection = (cmds, label) => {
|
||||
const validCmds = cmds.filter(c => c.name && c.command);
|
||||
if (validCmds.length === 0) return;
|
||||
const sep = document.createElement('div');
|
||||
sep.className = 'header-menu-separator';
|
||||
chatMenuDropdown.appendChild(sep);
|
||||
const lbl = document.createElement('div');
|
||||
lbl.className = 'header-menu-label';
|
||||
lbl.textContent = label;
|
||||
chatMenuDropdown.appendChild(lbl);
|
||||
validCmds.forEach(cmd => {
|
||||
if (!cmd.name || !cmd.command) return;
|
||||
const type = cmd.type || 'background';
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'header-menu-item header-menu-cmd';
|
||||
btn.textContent = cmd.name;
|
||||
btn.title = type === 'message' ? cmd.command : `[${type}] ${cmd.command}`;
|
||||
btn.addEventListener('click', async () => {
|
||||
chatMenuDropdown.hidden = true;
|
||||
if (type === 'message') {
|
||||
const inputEl = document.getElementById('input');
|
||||
if (inputEl) {
|
||||
inputEl.value = cmd.command;
|
||||
inputEl.dispatchEvent(new Event('input'));
|
||||
}
|
||||
sendMessage();
|
||||
return;
|
||||
}
|
||||
sendMessage();
|
||||
return;
|
||||
}
|
||||
btn.disabled = true;
|
||||
btn.classList.add('running');
|
||||
try {
|
||||
if (type === 'foreground') {
|
||||
const result = await apiExecCommand(sessionId, cmd.command, 'foreground');
|
||||
showCommandOutputModal(cmd.name, cmd.command, result);
|
||||
} else {
|
||||
await apiExecCommand(sessionId, cmd.command, 'background');
|
||||
btn.disabled = true;
|
||||
btn.classList.add('running');
|
||||
try {
|
||||
if (type === 'foreground') {
|
||||
const result = await apiExecCommand(sessionId, cmd.command, 'foreground');
|
||||
showCommandOutputModal(cmd.name, cmd.command, result);
|
||||
} else {
|
||||
await apiExecCommand(sessionId, cmd.command, 'background');
|
||||
}
|
||||
} catch(e) {
|
||||
console.error('Exec failed:', e);
|
||||
}
|
||||
} catch(e) {
|
||||
console.error('Exec failed:', e);
|
||||
}
|
||||
btn.disabled = false;
|
||||
btn.classList.remove('running');
|
||||
btn.disabled = false;
|
||||
btn.classList.remove('running');
|
||||
});
|
||||
chatMenuDropdown.appendChild(btn);
|
||||
});
|
||||
cmdBar.appendChild(btn);
|
||||
});
|
||||
};
|
||||
|
||||
addCmdSection(agentCmds, 'Agent');
|
||||
addCmdSection(sessionCmds, 'Session');
|
||||
}
|
||||
|
||||
// Zurück zur Session-Edit-Seite
|
||||
@@ -207,49 +246,6 @@ registerPage('chat', {
|
||||
});
|
||||
}
|
||||
|
||||
// Header-Menü (3-Dot)
|
||||
const chatMenuBtn = document.getElementById('chatMenuBtn');
|
||||
const chatMenuDropdown = document.getElementById('chatMenuDropdown');
|
||||
if (chatMenuBtn && chatMenuDropdown) {
|
||||
chatMenuBtn.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
chatMenuDropdown.hidden = !chatMenuDropdown.hidden;
|
||||
});
|
||||
document.addEventListener('click', this._closeMenu = () => {
|
||||
chatMenuDropdown.hidden = true;
|
||||
});
|
||||
}
|
||||
|
||||
// System-Prompt anzeigen
|
||||
const systemPromptBtn = document.getElementById('systemPromptBtn');
|
||||
if (systemPromptBtn) systemPromptBtn.addEventListener('click', () => {
|
||||
if (chatMenuDropdown) chatMenuDropdown.hidden = true;
|
||||
showSystemPromptModal(sessionId);
|
||||
});
|
||||
|
||||
// Archivieren
|
||||
const archiveBtn = document.getElementById('archiveBtn');
|
||||
if (archiveBtn) archiveBtn.addEventListener('click', () => {
|
||||
if (chatMenuDropdown) chatMenuDropdown.hidden = true;
|
||||
clearChat();
|
||||
});
|
||||
|
||||
// Datenbank sichern
|
||||
const backupDbBtn = document.getElementById('backupDbBtn');
|
||||
if (backupDbBtn) backupDbBtn.addEventListener('click', async () => {
|
||||
if (chatMenuDropdown) chatMenuDropdown.hidden = true;
|
||||
backupDbBtn.disabled = true;
|
||||
try {
|
||||
await apiBackupDb();
|
||||
setMetaHtml('<i class="fa fa-check-circle"></i> Backup erstellt und heruntergeladen');
|
||||
} catch (e) {
|
||||
console.error('Backup fehlgeschlagen:', e);
|
||||
setMetaHtml('<i class="fa fa-times-circle"></i> Backup fehlgeschlagen');
|
||||
} finally {
|
||||
backupDbBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// State zurücksetzen und History laden
|
||||
messages.length = 0;
|
||||
lastKnownMessageId = 0;
|
||||
|
||||
Reference in new issue
Block a user