Sabo/webui-develop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 2: Chat History for Agent Tab

Browse Source 
Backend: _get_chat_history() reads JSONL sessions. API: GET /api/agents/{id}/chat-history. Frontend: Chat History tab shows session list with title, model, message count. Click to open session in chat panel.
This commit is contained in:
Rose
2026-04-20 13:33:24 +02:00
parent fbf79362a4
commit e5b55c6f3a
4 changed files with 179 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
static/panels.js
View File

@@ -1917,6 +1917,7 @@ async function openAgentDetail(agentId) {
</button>
<button class="agent-tab${_agentTab==='activity'?' active':''}" onclick="switchAgentTab('activity')">Activity</button>
<button class="agent-tab${_agentTab==='errors'?' active':''}" onclick="switchAgentTab('errors')">Errors</button>
<button class="agent-tab${_agentTab==='chat'?' active':''}" onclick="switchAgentTab('chat')">Chat History</button>
</div>
<div id="agentTabContent" class="agent-tab-content">
@@ -1936,7 +1937,7 @@ async function switchAgentTab(tab) {
// Update tab buttons
document.querySelectorAll('.agent-tab').forEach((el, i) => {
const tabs = ['overview', 'soul', 'memory', 'inbox', 'activity', 'errors'];
const tabs = ['overview', 'soul', 'memory', 'inbox', 'activity', 'errors', 'chat'];
el.classList.toggle('active', tabs[i] === tab);
});
@@ -1961,6 +1962,9 @@ async function switchAgentTab(tab) {
case 'errors':
await loadAgentErrors(agentId, content);
break;
case 'chat':
await loadAgentChatHistory(agentId, content);
break;
}
}
@@ -2252,6 +2256,51 @@ function toggleInboxMsg(el) {
el.classList.toggle('expanded');
}
async function loadAgentChatHistory(agentId, content) {
try {
const data = await api(`/api/agents/${agentId}/chat-history`);
const sessions = data.sessions || [];
if (sessions.length === 0) {
content.innerHTML = `
<div style="padding:24px;text-align:center;color:var(--muted);font-size:12px">
<div style="font-size:28px;margin-bottom:8px">💬</div>
<div>No chat history yet</div>
<div style="font-size:10px;margin-top:4px;opacity:0.6">Your conversations with ${agentId} appear here</div>
</div>`;
return;
}
const rows = sessions.map(s => {
const created = s.created_at ? new Date(s.created_at).toLocaleString() : 'N/A';
const rel = s.created_at ? _relTime(s.created_at) : '';
const model = s.model || 'unknown';
return `
<div class="chat-history-row" onclick="openAgentChatSession('${agentId}','${s.session_id}')">
<div class="chat-history-title">${esc(s.title)}</div>
<div class="chat-history-meta">
<span style="font-size:10px;color:var(--muted)">${created} · ${rel}</span>
<span style="font-size:9px;padding:1px 5px;background:var(--code-bg);border-radius:4px;color:var(--muted);font-family:monospace">${esc(model)}</span>
<span style="font-size:9px;color:var(--muted)">${s.message_count} msgs</span>
</div>
</div>`;
}).join('');
content.innerHTML = `<div class="chat-history-list">${rows}</div>`;
} catch(e) {
content.innerHTML = `<div style="padding:12px;color:var(--accent);font-size:12px">Error: ${esc(e.message)}</div>`;
}
}
function openAgentChatSession(agentId, sessionId) {
// Switch to the chat panel and load this session
closeAgentDetail();
if (typeof switchToChatPanel === 'function') switchToChatPanel();
if (typeof loadSession === 'function') loadSession(sessionId);
showToast(`Loading chat session...`);
}
// Edit handlers
function editAgentSoul(agentId) {
document.getElementById('soulView').style.display = 'none';