Initial commit: ClawdDotNet
Import des bestehenden Projektstands in Git. - .NET 10 WinForms Anwendung (Multi-Agent / Tool-System) - .gitignore fuer Build-Artefakte, Secrets und Runtime-Daten ergaenzt Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Richard
@@ -0,0 +1,9 @@
|
||||
window.__bridge = {
|
||||
receive(msg) {
|
||||
document.dispatchEvent(
|
||||
new CustomEvent('bridge:' + msg.type, { detail: msg }));
|
||||
},
|
||||
send(msg) {
|
||||
window.chrome.webview.postMessage(JSON.stringify(msg));
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,72 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg-dark: #1e1e1e;
|
||||
--bg-sidebar: #252526;
|
||||
--bg-input: #2d2d2d;
|
||||
--bg-bubble-user: #264f78;
|
||||
--bg-bubble-agent: #333333;
|
||||
--text: #cccccc;
|
||||
--text-bright: #e0e0e0;
|
||||
--text-dim: #888888;
|
||||
--accent: #569cd6;
|
||||
--border: #3e3e3e;
|
||||
--hover: #2a2d2e;
|
||||
}
|
||||
|
||||
html, body { height: 100%; font-family: 'Segoe UI', sans-serif; background: var(--bg-dark); color: var(--text); }
|
||||
|
||||
#app { display: flex; flex-direction: column; height: 100%; }
|
||||
|
||||
#chat-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 20px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-sidebar);
|
||||
}
|
||||
#chat-agent-name { font-size: 15px; font-weight: 600; color: var(--text-bright); }
|
||||
#chat-header-actions { display: flex; gap: 8px; }
|
||||
#chat-header-actions button {
|
||||
background: transparent; border: 1px solid var(--border); color: var(--text);
|
||||
padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 14px;
|
||||
}
|
||||
#chat-header-actions button:hover { background: var(--hover); border-color: var(--accent); }
|
||||
|
||||
#chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
.chat-bubble {
|
||||
max-width: 75%; padding: 10px 14px; border-radius: 10px;
|
||||
font-size: 13px; line-height: 1.5; word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.chat-bubble.user { background: var(--bg-bubble-user); color: var(--text-bright); align-self: flex-end; border-bottom-right-radius: 2px; }
|
||||
.chat-bubble.assistant { background: var(--bg-bubble-agent); color: var(--text); align-self: flex-start; border-bottom-left-radius: 2px; }
|
||||
.chat-bubble .timestamp { display: block; font-size: 10px; color: var(--text-dim); margin-top: 4px; }
|
||||
|
||||
.typing-indicator { align-self: flex-start; padding: 10px 14px; background: var(--bg-bubble-agent); border-radius: 10px; }
|
||||
.typing-indicator span { display: inline-block; width: 6px; height: 6px; background: var(--text-dim); border-radius: 50%; margin: 0 2px; animation: typing 1.4s infinite; }
|
||||
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
|
||||
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
|
||||
|
||||
#chat-input-area {
|
||||
display: flex; align-items: flex-end; gap: 8px;
|
||||
padding: 12px 20px; border-top: 1px solid var(--border);
|
||||
background: var(--bg-sidebar);
|
||||
}
|
||||
#chat-input {
|
||||
flex: 1; resize: none; border: 1px solid var(--border); border-radius: 6px;
|
||||
background: var(--bg-input); color: var(--text-bright); padding: 10px 12px;
|
||||
font-family: inherit; font-size: 13px; line-height: 1.4;
|
||||
max-height: 120px; outline: none;
|
||||
}
|
||||
#chat-input:focus { border-color: var(--accent); }
|
||||
#btn-send {
|
||||
background: var(--accent); color: #fff; border: none; border-radius: 6px;
|
||||
padding: 10px 18px; cursor: pointer; font-size: 13px; font-weight: 500;
|
||||
}
|
||||
#btn-send:hover { opacity: 0.85; }
|
||||
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #555; }
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ClawdDotNet – Chat</title>
|
||||
<link rel="stylesheet" href="chat.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="chat-header">
|
||||
<span id="chat-agent-name">Agent</span>
|
||||
<div id="chat-header-actions">
|
||||
<button id="btn-run-now" title="Jetzt ausführen">▶</button>
|
||||
<button id="btn-abort" title="Abbrechen" style="display:none;">■</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-messages"></div>
|
||||
<div id="chat-input-area">
|
||||
<textarea id="chat-input" placeholder="Nachricht eingeben..." rows="1"></textarea>
|
||||
<button id="btn-send">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="bridge.js"></script>
|
||||
<script src="chat.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,135 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
const agentId = new URLSearchParams(location.search).get('agent');
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
const btnSend = document.getElementById('btn-send');
|
||||
const chatAgentName = document.getElementById('chat-agent-name');
|
||||
const btnRunNow = document.getElementById('btn-run-now');
|
||||
const btnAbort = document.getElementById('btn-abort');
|
||||
|
||||
// ─── Bridge Events ───
|
||||
|
||||
document.addEventListener('bridge:agent_list_update', e => {
|
||||
const data = e.detail.extra;
|
||||
const list = Array.isArray(data) ? data : (data?.agents ?? []);
|
||||
const agent = list.find(a => a.agentId === agentId);
|
||||
if (agent) chatAgentName.textContent = agent.displayName;
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:chat_history', e => {
|
||||
if (e.detail.agentId !== agentId) return;
|
||||
chatMessages.innerHTML = '';
|
||||
const history = e.detail.extra;
|
||||
if (Array.isArray(history)) {
|
||||
history.forEach(entry => appendBubble(entry.role, entry.content, entry.timestamp));
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:chat_message', e => {
|
||||
if (e.detail.agentId !== agentId) return;
|
||||
removeTypingIndicator();
|
||||
const extra = e.detail.extra ?? {};
|
||||
appendBubble(extra.role ?? 'assistant', e.detail.content, extra.timestamp);
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:chat_typing', e => {
|
||||
if (e.detail.agentId !== agentId) return;
|
||||
showTypingIndicator();
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:run_started', e => {
|
||||
if (e.detail.agentId !== agentId) return;
|
||||
btnAbort.style.display = 'inline-block';
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:run_finished', e => {
|
||||
if (e.detail.agentId !== agentId) return;
|
||||
btnAbort.style.display = 'none';
|
||||
removeTypingIndicator();
|
||||
});
|
||||
|
||||
// ─── Chat Bubbles ───
|
||||
|
||||
function appendBubble(role, content, timestamp) {
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = 'chat-bubble ' + (role === 'user' ? 'user' : 'assistant');
|
||||
bubble.textContent = content || '';
|
||||
|
||||
if (timestamp) {
|
||||
const ts = document.createElement('span');
|
||||
ts.className = 'timestamp';
|
||||
ts.textContent = formatTime(timestamp);
|
||||
bubble.appendChild(ts);
|
||||
}
|
||||
|
||||
chatMessages.appendChild(bubble);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
function showTypingIndicator() {
|
||||
removeTypingIndicator();
|
||||
const indicator = document.createElement('div');
|
||||
indicator.className = 'typing-indicator';
|
||||
indicator.id = 'typing';
|
||||
indicator.innerHTML = '<span></span><span></span><span></span>';
|
||||
chatMessages.appendChild(indicator);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
function removeTypingIndicator() {
|
||||
document.getElementById('typing')?.remove();
|
||||
}
|
||||
|
||||
// ─── Input ───
|
||||
|
||||
btnSend.addEventListener('click', sendMessage);
|
||||
|
||||
chatInput.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
chatInput.addEventListener('input', () => {
|
||||
chatInput.style.height = 'auto';
|
||||
chatInput.style.height = Math.min(chatInput.scrollHeight, 120) + 'px';
|
||||
});
|
||||
|
||||
function sendMessage() {
|
||||
const text = chatInput.value.trim();
|
||||
if (!text || !agentId) return;
|
||||
|
||||
chatInput.value = '';
|
||||
chatInput.style.height = 'auto';
|
||||
|
||||
window.__bridge.send({
|
||||
type: 'user_message',
|
||||
agentId: agentId,
|
||||
content: text
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Header Buttons ───
|
||||
|
||||
btnRunNow.addEventListener('click', () => {
|
||||
if (!agentId) return;
|
||||
window.__bridge.send({ type: 'run_now', agentId: agentId });
|
||||
});
|
||||
|
||||
btnAbort.addEventListener('click', () => {
|
||||
if (!agentId) return;
|
||||
window.__bridge.send({ type: 'abort_run', agentId: agentId });
|
||||
});
|
||||
|
||||
// ─── Helpers ───
|
||||
|
||||
function formatTime(ts) {
|
||||
try {
|
||||
const d = new Date(ts);
|
||||
return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
|
||||
} catch { return ''; }
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,117 @@
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
:root {
|
||||
--bg-dark: #1e1e1e;
|
||||
--bg-sidebar: #252526;
|
||||
--bg-chat: #1e1e1e;
|
||||
--bg-input: #2d2d2d;
|
||||
--bg-bubble-user: #264f78;
|
||||
--bg-bubble-agent: #333333;
|
||||
--text: #cccccc;
|
||||
--text-bright: #e0e0e0;
|
||||
--text-dim: #888888;
|
||||
--accent: #569cd6;
|
||||
--border: #3e3e3e;
|
||||
--hover: #2a2d2e;
|
||||
--agent-active: #37373d;
|
||||
--status-running: #4ec9b0;
|
||||
--status-idle: #4ec94e;
|
||||
--status-offline: #888888;
|
||||
--status-error: #f44747;
|
||||
}
|
||||
|
||||
html, body { height: 100%; font-family: 'Segoe UI', sans-serif; background: var(--bg-dark); color: var(--text); }
|
||||
|
||||
#app { display: flex; height: 100%; }
|
||||
|
||||
/* ─── Sidebar ─── */
|
||||
#sidebar { width: 280px; min-width: 220px; background: var(--bg-sidebar); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
|
||||
#sidebar-header { padding: 16px; border-bottom: 1px solid var(--border); }
|
||||
#sidebar-header h2 { font-size: 14px; font-weight: 600; color: var(--text-bright); text-transform: uppercase; letter-spacing: 1px; }
|
||||
#agent-list { flex: 1; overflow-y: auto; padding: 8px; }
|
||||
|
||||
.agent-item {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 10px 12px; margin-bottom: 4px; border-radius: 6px;
|
||||
cursor: pointer; transition: background 0.15s;
|
||||
}
|
||||
.agent-item:hover { background: var(--hover); }
|
||||
.agent-item.active { background: var(--agent-active); border-left: 3px solid var(--accent); }
|
||||
|
||||
.agent-status-dot {
|
||||
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
|
||||
background: var(--status-idle);
|
||||
}
|
||||
.agent-status-dot.running { background: var(--status-running); animation: pulse 1.5s infinite; }
|
||||
.agent-status-dot.offline { background: var(--status-offline); }
|
||||
.agent-status-dot.error { background: var(--status-error); }
|
||||
|
||||
.agent-info { flex: 1; min-width: 0; }
|
||||
.agent-name { font-size: 13px; font-weight: 500; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.agent-model { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
|
||||
|
||||
/* ─── Chat Area ─── */
|
||||
#chat-area { flex: 1; display: flex; flex-direction: column; background: var(--bg-chat); }
|
||||
|
||||
#chat-header {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 12px 20px; border-bottom: 1px solid var(--border);
|
||||
background: var(--bg-sidebar);
|
||||
}
|
||||
#chat-agent-name { font-size: 15px; font-weight: 600; color: var(--text-bright); }
|
||||
#chat-header-actions { display: flex; gap: 8px; }
|
||||
#chat-header-actions button {
|
||||
background: transparent; border: 1px solid var(--border); color: var(--text);
|
||||
padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 14px;
|
||||
}
|
||||
#chat-header-actions button:hover { background: var(--hover); border-color: var(--accent); }
|
||||
|
||||
#chat-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
|
||||
|
||||
#empty-state { display: flex; align-items: center; justify-content: center; height: 100%; }
|
||||
#empty-state p { color: var(--text-dim); font-size: 14px; }
|
||||
|
||||
.chat-bubble {
|
||||
max-width: 75%; padding: 10px 14px; border-radius: 10px;
|
||||
font-size: 13px; line-height: 1.5; word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.chat-bubble.user { background: var(--bg-bubble-user); color: var(--text-bright); align-self: flex-end; border-bottom-right-radius: 2px; }
|
||||
.chat-bubble.assistant { background: var(--bg-bubble-agent); color: var(--text); align-self: flex-start; border-bottom-left-radius: 2px; }
|
||||
|
||||
.chat-bubble .timestamp { display: block; font-size: 10px; color: var(--text-dim); margin-top: 4px; }
|
||||
|
||||
.typing-indicator { align-self: flex-start; padding: 10px 14px; background: var(--bg-bubble-agent); border-radius: 10px; }
|
||||
.typing-indicator span { display: inline-block; width: 6px; height: 6px; background: var(--text-dim); border-radius: 50%; margin: 0 2px; animation: typing 1.4s infinite; }
|
||||
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
|
||||
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
|
||||
|
||||
/* ─── Input ─── */
|
||||
#chat-input-area {
|
||||
display: flex; align-items: flex-end; gap: 8px;
|
||||
padding: 12px 20px; border-top: 1px solid var(--border);
|
||||
background: var(--bg-sidebar);
|
||||
}
|
||||
#chat-input {
|
||||
flex: 1; resize: none; border: 1px solid var(--border); border-radius: 6px;
|
||||
background: var(--bg-input); color: var(--text-bright); padding: 10px 12px;
|
||||
font-family: inherit; font-size: 13px; line-height: 1.4;
|
||||
max-height: 120px; outline: none;
|
||||
}
|
||||
#chat-input:focus { border-color: var(--accent); }
|
||||
#btn-send {
|
||||
background: var(--accent); color: #fff; border: none; border-radius: 6px;
|
||||
padding: 10px 18px; cursor: pointer; font-size: 13px; font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#btn-send:hover { opacity: 0.85; }
|
||||
#btn-send:disabled { opacity: 0.4; cursor: default; }
|
||||
|
||||
/* ─── Scrollbar ─── */
|
||||
::-webkit-scrollbar { width: 8px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #555; }
|
||||
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ClawdDotNet – Agent Chat</title>
|
||||
<link rel="stylesheet" href="overview.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<aside id="sidebar">
|
||||
<div id="sidebar-header">
|
||||
<h2>Agenten</h2>
|
||||
</div>
|
||||
<div id="agent-list"></div>
|
||||
</aside>
|
||||
<main id="chat-area">
|
||||
<div id="chat-header">
|
||||
<span id="chat-agent-name">Wähle einen Agenten</span>
|
||||
<div id="chat-header-actions">
|
||||
<button id="btn-open-window" title="In eigenem Fenster öffnen" style="display:none;">↗</button>
|
||||
<button id="btn-run-now" title="Jetzt ausführen" style="display:none;">▶</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-messages">
|
||||
<div id="empty-state">
|
||||
<p>Wähle einen Agenten aus der Liste, um den Chat zu starten.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="chat-input-area" style="display:none;">
|
||||
<textarea id="chat-input" placeholder="Nachricht eingeben..." rows="1"></textarea>
|
||||
<button id="btn-send">Senden</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="bridge.js"></script>
|
||||
<script src="overview.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,191 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
let selectedAgentId = null;
|
||||
let agents = [];
|
||||
|
||||
const agentList = document.getElementById('agent-list');
|
||||
const chatMessages = document.getElementById('chat-messages');
|
||||
const chatInput = document.getElementById('chat-input');
|
||||
const btnSend = document.getElementById('btn-send');
|
||||
const chatAgentName = document.getElementById('chat-agent-name');
|
||||
const chatInputArea = document.getElementById('chat-input-area');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const btnOpenWindow = document.getElementById('btn-open-window');
|
||||
const btnRunNow = document.getElementById('btn-run-now');
|
||||
|
||||
// ─── Bridge Events ───
|
||||
|
||||
document.addEventListener('bridge:agent_list_update', e => {
|
||||
const data = e.detail.extra;
|
||||
agents = Array.isArray(data) ? data : (data?.agents ?? []);
|
||||
renderSidebar();
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:agent_status', e => {
|
||||
const d = e.detail;
|
||||
const agent = agents.find(a => a.agentId === d.agentId);
|
||||
if (agent) {
|
||||
agent.status = d.status;
|
||||
renderSidebar();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:chat_history', e => {
|
||||
if (e.detail.agentId !== selectedAgentId) return;
|
||||
const history = e.detail.extra;
|
||||
chatMessages.innerHTML = '';
|
||||
if (Array.isArray(history)) {
|
||||
history.forEach(entry => appendBubble(entry.role, entry.content, entry.timestamp));
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:chat_message', e => {
|
||||
if (e.detail.agentId !== selectedAgentId) return;
|
||||
removeTypingIndicator();
|
||||
const extra = e.detail.extra ?? {};
|
||||
appendBubble(extra.role ?? 'assistant', e.detail.content, extra.timestamp);
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:chat_typing', e => {
|
||||
if (e.detail.agentId !== selectedAgentId) return;
|
||||
showTypingIndicator();
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:run_started', e => {
|
||||
const agent = agents.find(a => a.agentId === e.detail.agentId);
|
||||
if (agent) { agent.status = 'running'; renderSidebar(); }
|
||||
});
|
||||
|
||||
document.addEventListener('bridge:run_finished', e => {
|
||||
const agent = agents.find(a => a.agentId === e.detail.agentId);
|
||||
if (agent) { agent.status = 'idle'; renderSidebar(); }
|
||||
removeTypingIndicator();
|
||||
});
|
||||
|
||||
// ─── Sidebar ───
|
||||
|
||||
function renderSidebar() {
|
||||
agentList.innerHTML = '';
|
||||
agents.forEach(agent => {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'agent-item' + (agent.agentId === selectedAgentId ? ' active' : '');
|
||||
item.innerHTML = `
|
||||
<div class="agent-status-dot ${agent.status || 'idle'}"></div>
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">${escapeHtml(agent.displayName)}</div>
|
||||
<div class="agent-model">${escapeHtml(agent.model || '')}</div>
|
||||
</div>`;
|
||||
item.addEventListener('click', () => selectAgent(agent.agentId));
|
||||
agentList.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
function selectAgent(agentId) {
|
||||
selectedAgentId = agentId;
|
||||
const agent = agents.find(a => a.agentId === agentId);
|
||||
|
||||
chatAgentName.textContent = agent ? agent.displayName : agentId;
|
||||
chatInputArea.style.display = 'flex';
|
||||
emptyState?.remove();
|
||||
btnOpenWindow.style.display = 'inline-block';
|
||||
btnRunNow.style.display = 'inline-block';
|
||||
chatMessages.innerHTML = '';
|
||||
|
||||
renderSidebar();
|
||||
|
||||
window.__bridge.send({
|
||||
type: 'select_agent',
|
||||
agentId: agentId
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Chat Bubbles ───
|
||||
|
||||
function appendBubble(role, content, timestamp) {
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = 'chat-bubble ' + (role === 'user' ? 'user' : 'assistant');
|
||||
bubble.textContent = content || '';
|
||||
|
||||
if (timestamp) {
|
||||
const ts = document.createElement('span');
|
||||
ts.className = 'timestamp';
|
||||
ts.textContent = formatTime(timestamp);
|
||||
bubble.appendChild(ts);
|
||||
}
|
||||
|
||||
chatMessages.appendChild(bubble);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
function showTypingIndicator() {
|
||||
removeTypingIndicator();
|
||||
const indicator = document.createElement('div');
|
||||
indicator.className = 'typing-indicator';
|
||||
indicator.id = 'typing';
|
||||
indicator.innerHTML = '<span></span><span></span><span></span>';
|
||||
chatMessages.appendChild(indicator);
|
||||
chatMessages.scrollTop = chatMessages.scrollHeight;
|
||||
}
|
||||
|
||||
function removeTypingIndicator() {
|
||||
document.getElementById('typing')?.remove();
|
||||
}
|
||||
|
||||
// ─── Input Handling ───
|
||||
|
||||
btnSend.addEventListener('click', sendMessage);
|
||||
|
||||
chatInput.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
sendMessage();
|
||||
}
|
||||
});
|
||||
|
||||
chatInput.addEventListener('input', () => {
|
||||
chatInput.style.height = 'auto';
|
||||
chatInput.style.height = Math.min(chatInput.scrollHeight, 120) + 'px';
|
||||
});
|
||||
|
||||
function sendMessage() {
|
||||
const text = chatInput.value.trim();
|
||||
if (!text || !selectedAgentId) return;
|
||||
|
||||
chatInput.value = '';
|
||||
chatInput.style.height = 'auto';
|
||||
|
||||
window.__bridge.send({
|
||||
type: 'user_message',
|
||||
agentId: selectedAgentId,
|
||||
content: text
|
||||
});
|
||||
}
|
||||
|
||||
// ─── Header Buttons ───
|
||||
|
||||
btnOpenWindow.addEventListener('click', () => {
|
||||
if (!selectedAgentId) return;
|
||||
window.__bridge.send({ type: 'open_agent_chat', agentId: selectedAgentId });
|
||||
});
|
||||
|
||||
btnRunNow.addEventListener('click', () => {
|
||||
if (!selectedAgentId) return;
|
||||
window.__bridge.send({ type: 'run_now', agentId: selectedAgentId });
|
||||
});
|
||||
|
||||
// ─── Helpers ───
|
||||
|
||||
function escapeHtml(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function formatTime(ts) {
|
||||
try {
|
||||
const d = new Date(ts);
|
||||
return d.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
|
||||
} catch { return ''; }
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user