meleki/gott
1
0 Fork 0
Code Activity

Custom Commands für Agents: gleiche Befehls-UI wie Sessions, im Chat werden Agent- und Session-Commands zusammengeführt

Browse Source 
Backend:
- AgentRecord um CustomCommands-Feld erweitert
- DB-Migration: custom_commands Spalte für agents Tabelle
- Agent-CRUD (Create/Update) verarbeitet customCommands

Frontend:
- commands-ui.js: Shared Utility (createCommandRow, getCommandsFromUI, loadCommandsIntoUI) für Agent- und Session-Page
- Agent-Page: Benutzerdefinierte Befehle Sektion mit Typ-Dropdown
- Chat-Page: Lädt Agent-Commands + Session-Commands, zeigt beide mit Labels wenn beide vorhanden
- Session-Page: Refactored auf shared commands-ui.js Funktionen
- CSS: cmd-bar-label Styling für Agent:/Session: Trennung in der Command-Bar
This commit is contained in:
Meleki committed 2026-02-28 21:35:34 +01:00
1 parent ab234fde69
commit e79a69a364
9 files changed
+130 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

wwwroot/css/chat.css
+6
View File
@@ -27,6 +27,12 @@
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);
wwwroot/index.html
+4
View File
@@ -130,6 +130,9 @@
<input type="checkbox" id="agentToolChoice" checked>
Tool-Nutzung erzwingen <span class="checkbox-hint">(tool_choice: any)</span>
</label>
<label>Benutzerdefinierte Befehle</label>
<div class="custom-commands" id="agentCommandsList"></div>
<button type="button" id="agentAddCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
<div class="form-actions">
<button id="agentSaveBtn">Speichern</button>
<button id="agentCancelBtn">Abbrechen</button>
@@ -219,6 +222,7 @@
<script src="js/chat.js"></script>
<script src="js/history.js"></script>
<script src="js/router.js"></script>
<script src="js/commands-ui.js"></script>
<script src="js/pages/dashboard.js"></script>
<script src="js/pages/agent-page.js"></script>
<script src="js/pages/session-page.js"></script>
wwwroot/js/commands-ui.js
+58
View File
@@ -0,0 +1,58 @@
// ── Custom Commands UI (shared between session-page and agent-page) ──
function createCommandRow(container, name, command, type) {
name = name || '';
command = command || '';
type = type || 'background';
const item = document.createElement('div');
item.className = 'custom-command-item';
item.innerHTML = `
<div class="custom-command-fields">
<select class="cmd-type">
<option value="background">Hintergrund</option>
<option value="foreground">Vordergrund</option>
<option value="message">Nachricht</option>
</select>
<input type="text" class="cmd-name" placeholder="Name (z.B. Deploy)" value="${_escCmdAttr(name)}">
<input type="text" class="cmd-command" placeholder="${type === 'message' ? 'Nachricht...' : 'Befehl (z.B. ./deploy.sh)'}" value="${_escCmdAttr(command)}">
</div>
<button type="button" class="remove-cmd-btn icon-btn"><i class="fa fa-times"></i></button>
`;
var typeSelect = item.querySelector('.cmd-type');
typeSelect.value = type;
typeSelect.addEventListener('change', function() {
var cmdInput = item.querySelector('.cmd-command');
cmdInput.placeholder = typeSelect.value === 'message' ? 'Nachricht...' : 'Befehl (z.B. ./deploy.sh)';
});
item.querySelector('.remove-cmd-btn').addEventListener('click', function() { item.remove(); });
container.appendChild(item);
}
function getCommandsFromUI(container) {
var items = container.querySelectorAll('.custom-command-item');
var commands = [];
for (var i = 0; i < items.length; i++) {
var item = items[i];
var name = item.querySelector('.cmd-name').value.trim();
var command = item.querySelector('.cmd-command').value.trim();
var type = item.querySelector('.cmd-type').value;
if (name || command) commands.push({ name: name, command: command, type: type });
}
return commands.length > 0 ? commands : null;
}
function loadCommandsIntoUI(container, customCommands) {
if (!customCommands) return;
try {
var cmds = typeof customCommands === 'string' ? JSON.parse(customCommands) : customCommands;
for (var i = 0; i < cmds.length; i++) {
var cmd = cmds[i];
createCommandRow(container, cmd.name || '', cmd.command || '', cmd.type || 'background');
}
} catch (e) { /* ignore parse errors */ }
}
function _escCmdAttr(str) {
return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
wwwroot/js/pages/agent-page.js
+10 -1
View File
@@ -28,6 +28,8 @@ registerPage('agent', {
const saveBtn = document.getElementById('agentSaveBtn');
const cancelBtn = document.getElementById('agentCancelBtn');
const deleteBtn = document.getElementById('agentDeleteBtn');
const commandsList = document.getElementById('agentCommandsList');
const addCommandBtn = document.getElementById('agentAddCommandBtn');
_agentAvatarData = null;
@@ -45,8 +47,14 @@ registerPage('agent', {
if (agent.avatar) {
avatarPreview.innerHTML = `<img src="${agent.avatar}" alt="Avatar">`;
}
// Custom Commands laden
loadCommandsIntoUI(commandsList, agent.customCommands);
}
// Befehl hinzufügen
addCommandBtn.addEventListener('click', () => createCommandRow(commandsList));
// Avatar Upload
avatarBtn.addEventListener('click', () => avatarInput.click());
avatarInput.addEventListener('change', () => {
@@ -95,7 +103,8 @@ registerPage('agent', {
persona: personaEl.value,
instructions: instructionsEl.value,
toolChoice: toolChoiceEl.checked ? 'any' : 'auto',
avatar: _agentAvatarData
avatar: _agentAvatarData,
customCommands: getCommandsFromUI(commandsList)
};
if (isNew) {
wwwroot/js/pages/chat-page.js
+35 -4
View File
@@ -57,13 +57,44 @@ registerPage('chat', {
titleEl.textContent = session.name || 'Unbenannt';
}
// Custom Command Buttons
// Custom Command Buttons (Agent + Session)
const cmdBar = document.getElementById('customCmdBar');
if (cmdBar) {
cmdBar.innerHTML = '';
let cmds = [];
try { cmds = JSON.parse(session.customCommands || '[]') || []; } catch(e) {}
cmds.forEach(cmd => {
let agentCmds = [];
if (session.agentId) {
try {
const agent = await apiGetAgent(session.agentId);
if (agent && agent.customCommands) {
agentCmds = JSON.parse(agent.customCommands) || [];
}
} catch(e) {}
}
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');
wwwroot/js/pages/session-page.js
+3 -53
View File
@@ -3,47 +3,6 @@
let _sessionImageData = null;
let _sessionPasteHandler = null;
function _createCommandRow(container, name = '', command = '', type = 'background') {
const item = document.createElement('div');
item.className = 'custom-command-item';
item.innerHTML = `
<div class="custom-command-fields">
<select class="cmd-type">
<option value="background">Hintergrund</option>
<option value="foreground">Vordergrund</option>
<option value="message">Nachricht</option>
</select>
<input type="text" class="cmd-name" placeholder="Name (z.B. Deploy)" value="${_escAttr(name)}">
<input type="text" class="cmd-command" placeholder="${type === 'message' ? 'Nachricht...' : 'Befehl (z.B. ./deploy.sh)'}" value="${_escAttr(command)}">
</div>
<button type="button" class="remove-cmd-btn icon-btn"><i class="fa fa-times"></i></button>
`;
const typeSelect = item.querySelector('.cmd-type');
typeSelect.value = type;
typeSelect.addEventListener('change', () => {
const cmdInput = item.querySelector('.cmd-command');
cmdInput.placeholder = typeSelect.value === 'message' ? 'Nachricht...' : 'Befehl (z.B. ./deploy.sh)';
});
item.querySelector('.remove-cmd-btn').addEventListener('click', () => item.remove());
container.appendChild(item);
}
function _escAttr(str) {
return str.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}
function _getCommandsFromUI(container) {
const items = container.querySelectorAll('.custom-command-item');
const commands = [];
for (const item of items) {
const name = item.querySelector('.cmd-name').value.trim();
const command = item.querySelector('.cmd-command').value.trim();
const type = item.querySelector('.cmd-type').value;
if (name || command) commands.push({ name, command, type });
}
return commands.length > 0 ? commands : null;
}
registerPage('session', {
async init(params) {
const sessionId = params.id;
@@ -89,16 +48,7 @@ registerPage('session', {
}
// Custom Commands laden
if (session.customCommands) {
try {
const cmds = typeof session.customCommands === 'string'
? JSON.parse(session.customCommands)
: session.customCommands;
for (const cmd of cmds) {
_createCommandRow(commandsList, cmd.name || '', cmd.command || '', cmd.type || 'background');
}
} catch (e) { /* ignore parse errors */ }
}
loadCommandsIntoUI(commandsList, session.customCommands);
} else {
titleEl.textContent = 'Neue Session';
deleteBtn.hidden = true;
@@ -106,7 +56,7 @@ registerPage('session', {
}
// Befehl hinzufügen
addCommandBtn.addEventListener('click', () => _createCommandRow(commandsList));
addCommandBtn.addEventListener('click', () => createCommandRow(commandsList));
// Agents laden
const agents = await apiGetAgents();
@@ -173,7 +123,7 @@ registerPage('session', {
// Speichern
saveBtn.addEventListener('click', async () => {
const commands = _getCommandsFromUI(commandsList);
const commands = getCommandsFromUI(commandsList);
const data = {
name: nameEl.value.trim() || 'Unbenannt',
description: descEl.value.trim(),