Pjot/frankenbot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Enhanced Orchestrator Chat with notifications and better UX

Browse source 
- Add task creation notifications in Orchestrator Chat
- New messages appear at top (newest first)
- Add Clear Chat button with confirmation
- Improve timestamps: DD.MM.YYYY HH:MM:SS format
- Support for system notifications (task created, sub-agent responses)
- Add add_orchestrator_notification() helper function
- Auto-notify when agents create sub-tasks
- Clear Chat route: POST /orchestrator/clear
- Better visual distinction between messages and notifications
This commit is contained in:
pdyde 2026-02-21 18:02:01 +01:00
parent 98ff812a82
commit 7ee66397e1
2 changed files with 94 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

63
templates/orchestrator.html
View file

@ -42,19 +42,35 @@
<div class="card">
<div class="card-header bg-dark d-flex justify-content-between align-items-center">
<h5 class="mb-0">Orchestrator-Chat</h5>
<small style="color:var(--text-muted);">Automatische Agenten-Delegation</small>
<div class="d-flex align-items-center gap-2">
<small style="color:var(--text-muted);">Automatische Agenten-Delegation</small>
{% if chat_history %}
<button class="btn btn-sm btn-outline-secondary" onclick="clearOrchestratorChat()">🗑 Clear</button>
{% endif %}
</div>
</div>
<div class="card-body chat-container" id="chatContainer">
{% if chat_history %}
{% for chat in chat_history %}
<div class="chat-message">
<div class="chat-timestamp">
{{ chat.timestamp }} ·
<span class="badge bg-primary" style="font-size:.65rem;">{{ chat.agent }}</span>
{% if chat.is_notification %}
<!-- System Notification -->
<div class="alert alert-info mb-2" style="font-size:0.875rem;padding:0.75rem;">
<div style="display:flex;justify-content:space-between;align-items:center;">
<span>{{ chat.message }}</span>
<small style="color:var(--text-muted);">{{ chat.timestamp }}</small>
</div>
</div>
<div class="chat-prompt mt-1"><strong>Sie:</strong> {{ chat.user_prompt }}</div>
<div class="chat-response mt-1"><strong>Orchestrator:</strong> {{ chat.response }}</div>
</div>
{% else %}
<!-- Regular Chat Message -->
<div class="chat-message">
<div class="chat-timestamp">
{{ chat.timestamp }} ·
<span class="badge bg-primary" style="font-size:.65rem;">{{ chat.agent }}</span>
</div>
<div class="chat-prompt mt-1"><strong>Sie:</strong> {{ chat.user_prompt }}</div>
<div class="chat-response mt-1"><strong>Orchestrator:</strong> {{ chat.response }}</div>
</div>
{% endif %}
{% endfor %}
{% else %}
<div class="text-center py-5" style="color:var(--text-muted);" id="emptyState">
@ -89,7 +105,7 @@ function sendPromptWithStream() {
const msgDiv = document.createElement('div');
msgDiv.className = 'chat-message';
msgDiv.innerHTML = `
<div class="chat-timestamp">${new Date().toLocaleTimeString()} · <span class="badge bg-primary" style="font-size:.65rem;" id="agentBadge">wird ausgewählt…</span></div>
<div class="chat-timestamp">${formatTimestamp()} · <span class="badge bg-primary" style="font-size:.65rem;" id="agentBadge">wird ausgewählt…</span></div>
<div class="chat-prompt mt-1"><strong>Sie:</strong> ${escapeHtml(prompt)}</div>
<div class="chat-response mt-1" id="responseDiv"><strong>Orchestrator:</strong> <span id="responseText">⏳ Agent arbeitet…</span></div>
`;
@ -186,5 +202,34 @@ function escapeHtml(text) {
div.textContent = text;
return div.innerHTML;
}
function clearOrchestratorChat() {
if (!confirm('Möchten Sie den gesamten Chat-Verlauf löschen?')) return;
fetch('/orchestrator/clear', {
method: 'POST',
headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => {
if (data.success) {
location.reload();
}
})
.catch(err => {
alert('Fehler beim Löschen: ' + err.message);
});
}
function formatTimestamp() {
const now = new Date();
const day = String(now.getDate()).padStart(2, '0');
const month = String(now.getMonth() + 1).padStart(2, '0');
const year = now.getFullYear();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
return `${day}.${month}.${year} ${hours}:${minutes}:${seconds}`;
}
</script>
{% endblock %}