feat: composer-centric UI refresh + Hermes Control Center (v0.50.0, closes #242)
* Polish workspace panel behavior and app dialogs * Replace remaining emoji UI glyphs with Lucide icons * Redesign composer footer around model and context controls Move the model selector into the composer footer, replace the linear context pill with a compact circular badge plus tooltip, and remove the redundant topbar model pill. Design credit and inspiration: Theo / T3 Code. Reference implementation: https://github.com/pingdotgg/t3code/ * Remove obsolete activity bar Drop the old activity bar, keep turn-scoped state in the composer footer, and route remaining non-chat status messages through toasts. This leaves live tool cards and the message timeline as the primary progress UI, with the composer owning stop/cancel and brief turn status. * Move workspace and model switching into composer footer * Move profile switching into composer footer * Refactor Hermes control center UI * Redesign control center settings modal layout Widen the modal to 860px, simplify the tab list to icon+label rows, stretch the tab column's divider to full height, lock the panel to a fixed height so switching tabs no longer resizes the outer shell, and always open on the Conversation tab. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Put session item actions in a dropdown * Use Hermes mark in sidebar control button * Reset control center section on close * Drop session-item left border indicator Remove the left-border accent used for active, CLI, and project rows — each state already has a dedicated cue (gold fill, cli badge, project dot), so the border was redundant. Fully round the row, add 2px bottom spacing between rows, and strip the matching JS/CSS overrides. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Increase session search input vertical padding Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Normalise odd pixel values across UI Snap padding, gap, and border-radius values to the 2/4/6/8/10/12 grid across composer chips, sidebar panels, cron list, settings, approval buttons, dropdowns, and inline message edit — eliminating the 7/9/11px drift that was making sibling elements feel subtly misaligned. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Add missing #btnMobileFiles button and .mobile-files-btn CSS (for mobile QA suite) The mobile layout regression suite (test_mobile_layout.py) requires: - #btnMobileFiles onclick=toggleMobileFiles() in topbar chips - .mobile-files-btn CSS rules for responsive show/hide at 640/900px breakpoints Also adds max-width guard to .profile-dropdown to prevent clipping at narrow viewports. * Improve composer footer mobile responsiveness and UX - Collapse composer chips to icon-only at <=400px viewports - Add model chip icon (CPU) so it remains tappable when labels are hidden - Show send button always (disabled state when empty, hidden during streaming) - Show context usage indicator on session load, not just after streaming - Add cancel status fallback timeout to prevent stale "Cancelling..." text - Update tests to match new send button and busy state behavior * Fix duplicate files button and broken workspace close on mobile Remove redundant #btnMobileFiles button that duplicated #btnWorkspacePanelToggle in the mobile topbar. Fix workspace panel close button calling undefined closeMobileFiles() — now calls closeWorkspacePanel(). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix model chip icon vertical alignment in composer footer Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix workspace toggle button hidden on desktop by conflicting CSS class Remove mobile-files-btn class from #btnWorkspacePanelToggle — its display:none!important rule was overriding workspace-toggle-btn visibility on non-mobile viewports. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix session actions dots button inaccessible on mobile sidebar Always show the session actions trigger on mobile (no hover state on touch devices) and restore right padding so text truncates with ellipsis before the dots icon. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix composer footer manage links not opening sidebar panel The "Manage profiles" and "Manage workspaces" links in the composer footer dropdowns called switchPanel() which only changes the active panel content but doesn't open the sidebar. Replaced with mobileSwitchPanel() which also opens the sidebar so the panel is actually visible. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Widen icon-only composer chips breakpoint from 400px to 768px Move the icon-only chip styling up into the existing max-width:768px media query so chips collapse to icon-only on tablets too, preventing composer footer overflow on mid-size screens. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * Fix composer-left vertical scrollbar by setting overflow-y:hidden When overflow-x is set to auto, the CSS spec implicitly changes overflow-y from visible to auto, allowing a vertical scrollbar to appear from slight chip padding/border overflow. Explicitly set overflow-y:hidden to prevent this. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: resolve rebase conflicts and fix control center test assertions - Resolved 4 conflicts during rebase onto master (workspace.js, boot.js, index.html, test_sprint34.py) - Fixed test_sprint34.py: _controlSection -> _settingsSection, cc-tab -> settings-tabs (matching actual implementation) - Fixed quoting syntax error in test assertion Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: update version badge in System tab to v0.49.4 * docs: update README and CHANGELOG for v0.50.0 UI refresh, bump version badge --------- Co-authored-by: Aron Prins <pwf.aron@gmail.com> Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com> Co-authored-by: Nathan Esquenazi <nesquena@gmail.com>
This commit is contained in:
nesquena-hermes
GitHub
270
static/ui.js
270
static/ui.js
@@ -34,6 +34,7 @@ function _applyModelToDropdown(modelId, sel){
|
||||
const resolved=_findModelInDropdown(modelId,sel);
|
||||
if(resolved){
|
||||
sel.value=resolved;
|
||||
if(sel.id==='modelSelect' && typeof syncModelChip==='function') syncModelChip();
|
||||
return resolved;
|
||||
}
|
||||
return null;
|
||||
@@ -66,9 +67,11 @@ async function populateModelDropdown(){
|
||||
if(data.default_model && !localStorage.getItem('hermes-webui-model')){
|
||||
_applyModelToDropdown(data.default_model, sel);
|
||||
}
|
||||
if(typeof syncModelChip==='function') syncModelChip();
|
||||
}catch(e){
|
||||
// API unavailable -- keep the hardcoded HTML options as fallback
|
||||
console.warn('Failed to load models from server:',e.message);
|
||||
if(typeof syncModelChip==='function') syncModelChip();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -98,6 +101,106 @@ function _checkProviderMismatch(modelId){
|
||||
return null;
|
||||
}
|
||||
|
||||
function _selectedModelOption(){
|
||||
const sel=$('modelSelect');
|
||||
if(!sel) return null;
|
||||
return sel.options[sel.selectedIndex]||null;
|
||||
}
|
||||
|
||||
function syncModelChip(){
|
||||
const sel=$('modelSelect');
|
||||
const chip=$('composerModelChip');
|
||||
const label=$('composerModelLabel');
|
||||
const dd=$('composerModelDropdown');
|
||||
if(!sel||!chip||!label) return;
|
||||
const opt=_selectedModelOption();
|
||||
label.textContent=opt?opt.textContent:getModelLabel(sel.value||'');
|
||||
chip.title=sel.value||'Conversation model';
|
||||
chip.classList.toggle('active',!!(dd&&dd.classList.contains('open')));
|
||||
}
|
||||
|
||||
function _positionModelDropdown(){
|
||||
const dd=$('composerModelDropdown');
|
||||
const chip=$('composerModelChip');
|
||||
const footer=document.querySelector('.composer-footer');
|
||||
if(!dd||!chip||!footer) return;
|
||||
const chipRect=chip.getBoundingClientRect();
|
||||
const footerRect=footer.getBoundingClientRect();
|
||||
let left=chipRect.left-footerRect.left;
|
||||
const maxLeft=Math.max(0, footer.clientWidth-dd.offsetWidth);
|
||||
left=Math.max(0, Math.min(left, maxLeft));
|
||||
dd.style.left=`${left}px`;
|
||||
}
|
||||
|
||||
function renderModelDropdown(){
|
||||
const dd=$('composerModelDropdown');
|
||||
const sel=$('modelSelect');
|
||||
if(!dd||!sel) return;
|
||||
dd.innerHTML='';
|
||||
for(const child of Array.from(sel.children)){
|
||||
if(child.tagName==='OPTGROUP'){
|
||||
const heading=document.createElement('div');
|
||||
heading.className='model-group';
|
||||
heading.textContent=child.label||'Models';
|
||||
dd.appendChild(heading);
|
||||
for(const opt of Array.from(child.children)){
|
||||
const row=document.createElement('div');
|
||||
row.className='model-opt'+(opt.value===sel.value?' active':'');
|
||||
row.innerHTML=`<span class="model-opt-name">${esc(opt.textContent||getModelLabel(opt.value))}</span><span class="model-opt-id">${esc(opt.value)}</span>`;
|
||||
row.onclick=()=>selectModelFromDropdown(opt.value);
|
||||
dd.appendChild(row);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
if(child.tagName==='OPTION'){
|
||||
const row=document.createElement('div');
|
||||
row.className='model-opt'+(child.value===sel.value?' active':'');
|
||||
row.innerHTML=`<span class="model-opt-name">${esc(child.textContent||getModelLabel(child.value))}</span><span class="model-opt-id">${esc(child.value)}</span>`;
|
||||
row.onclick=()=>selectModelFromDropdown(child.value);
|
||||
dd.appendChild(row);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function selectModelFromDropdown(value){
|
||||
const sel=$('modelSelect');
|
||||
if(!sel||sel.value===value) { closeModelDropdown(); return; }
|
||||
sel.value=value;
|
||||
syncModelChip();
|
||||
closeModelDropdown();
|
||||
if(typeof sel.onchange==='function') await sel.onchange();
|
||||
}
|
||||
|
||||
function toggleModelDropdown(){
|
||||
const dd=$('composerModelDropdown');
|
||||
const chip=$('composerModelChip');
|
||||
const sel=$('modelSelect');
|
||||
if(!dd||!chip||!sel) return;
|
||||
const open=dd.classList.contains('open');
|
||||
if(open){closeModelDropdown(); return;}
|
||||
if(typeof closeProfileDropdown==='function') closeProfileDropdown();
|
||||
if(typeof closeWsDropdown==='function') closeWsDropdown();
|
||||
renderModelDropdown();
|
||||
dd.classList.add('open');
|
||||
_positionModelDropdown();
|
||||
chip.classList.add('active');
|
||||
}
|
||||
|
||||
function closeModelDropdown(){
|
||||
const dd=$('composerModelDropdown');
|
||||
const chip=$('composerModelChip');
|
||||
if(dd) dd.classList.remove('open');
|
||||
if(chip) chip.classList.remove('active');
|
||||
}
|
||||
|
||||
document.addEventListener('click',e=>{
|
||||
if(!e.target.closest('#composerModelChip') && !e.target.closest('#composerModelDropdown')) closeModelDropdown();
|
||||
});
|
||||
window.addEventListener('resize',()=>{
|
||||
const dd=$('composerModelDropdown');
|
||||
if(dd&&dd.classList.contains('open')) _positionModelDropdown();
|
||||
});
|
||||
|
||||
// ── Scroll pinning ──────────────────────────────────────────────────────────
|
||||
// When streaming, auto-scroll only if the user hasn't manually scrolled up.
|
||||
// Once the user scrolls back to within 80px of the bottom, re-pin.
|
||||
@@ -114,30 +217,59 @@ function _fmtTokens(n){if(!n||n<0)return'0';if(n>=1e6)return(n/1e6).toFixed(1)+'
|
||||
|
||||
// Context usage indicator in composer footer
|
||||
function _syncCtxIndicator(usage){
|
||||
const wrap=$('ctxIndicatorWrap');
|
||||
const el=$('ctxIndicator');
|
||||
if(!el)return;
|
||||
const promptTok=usage.last_prompt_tokens||usage.input_tokens||0;
|
||||
const totalTok=(usage.input_tokens||0)+(usage.output_tokens||0);
|
||||
const ctxWindow=usage.context_length||0;
|
||||
if(!promptTok||!ctxWindow){el.style.display='none';return;}
|
||||
el.style.display='';
|
||||
const pct=Math.min(100,Math.round((promptTok/ctxWindow)*100));
|
||||
const bar=$('ctxBar');
|
||||
const label=$('ctxLabel');
|
||||
if(bar){
|
||||
bar.style.width=pct+'%';
|
||||
bar.className='ctx-bar'+(pct>75?' ctx-high':pct>50?' ctx-mid':'');
|
||||
const cost=usage.estimated_cost;
|
||||
// Show indicator whenever we have any usage data (tokens or cost)
|
||||
if(!promptTok&&!totalTok&&!cost){
|
||||
if(wrap) wrap.style.display='none';
|
||||
return;
|
||||
}
|
||||
if(label){
|
||||
const cost=usage.estimated_cost;
|
||||
let text=`${_fmtTokens(promptTok)} / ${_fmtTokens(ctxWindow)}`;
|
||||
if(pct>0) text+=` (${pct}%)`;
|
||||
if(cost) text+=` \u00b7 $${cost<0.01?cost.toFixed(4):cost.toFixed(2)}`;
|
||||
label.textContent=text;
|
||||
if(wrap) wrap.style.display='';
|
||||
const hasCtxWindow=!!(promptTok&&ctxWindow);
|
||||
const pct=hasCtxWindow?Math.min(100,Math.round((promptTok/ctxWindow)*100)):0;
|
||||
const ring=$('ctxRingValue');
|
||||
const center=$('ctxPercent');
|
||||
const usageLine=$('ctxTooltipUsage');
|
||||
const tokensLine=$('ctxTooltipTokens');
|
||||
const thresholdLine=$('ctxTooltipThreshold');
|
||||
const costLine=$('ctxTooltipCost');
|
||||
if(ring){
|
||||
const circumference=61.261056745;
|
||||
ring.style.strokeDasharray=String(circumference);
|
||||
ring.style.strokeDashoffset=String(circumference*(1-pct/100));
|
||||
}
|
||||
// Update title with detailed info
|
||||
if(center) center.textContent=hasCtxWindow?String(pct):'\u00b7';
|
||||
el.classList.toggle('ctx-mid',pct>50&&pct<=75);
|
||||
el.classList.toggle('ctx-high',pct>75);
|
||||
let label=hasCtxWindow?`Context window ${pct}% used`:`${_fmtTokens(totalTok)} tokens used`;
|
||||
if(cost) label+=` \u00b7 $${cost<0.01?cost.toFixed(4):cost.toFixed(2)}`;
|
||||
el.setAttribute('aria-label',label);
|
||||
if(usageLine) usageLine.textContent=hasCtxWindow?`${pct}% used (${Math.max(0,100-pct)}% left)`:`${_fmtTokens(totalTok)} tokens used`;
|
||||
if(tokensLine) tokensLine.textContent=hasCtxWindow?`${_fmtTokens(promptTok)} / ${_fmtTokens(ctxWindow)} tokens used`:`In: ${_fmtTokens(usage.input_tokens||0)} \u00b7 Out: ${_fmtTokens(usage.output_tokens||0)}`;
|
||||
const threshold=usage.threshold_tokens||0;
|
||||
el.title=`Context: ${_fmtTokens(promptTok)} of ${_fmtTokens(ctxWindow)} tokens used`
|
||||
+(threshold?`\nAuto-compress at ${_fmtTokens(threshold)} (${Math.round(threshold/ctxWindow*100)}%)`:'');
|
||||
if(thresholdLine){
|
||||
if(threshold&&ctxWindow){
|
||||
thresholdLine.style.display='';
|
||||
thresholdLine.textContent=`Auto-compress at ${_fmtTokens(threshold)} (${Math.round(threshold/ctxWindow*100)}%)`;
|
||||
}else{
|
||||
thresholdLine.style.display='none';
|
||||
thresholdLine.textContent='';
|
||||
}
|
||||
}
|
||||
if(costLine){
|
||||
if(cost){
|
||||
costLine.style.display='';
|
||||
costLine.textContent=`Estimated cost: $${cost<0.01?cost.toFixed(4):cost.toFixed(2)}`;
|
||||
}else{
|
||||
costLine.style.display='none';
|
||||
costLine.textContent='';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function scrollIfPinned(){
|
||||
@@ -257,45 +389,41 @@ function renderMd(raw){
|
||||
}
|
||||
|
||||
function setStatus(t){
|
||||
const bar=$('activityBar');
|
||||
const txt=$('activityText');
|
||||
const dismiss=$('btnDismissStatus');
|
||||
if(!bar||!txt)return;
|
||||
if(!t){
|
||||
bar.style.display='none';
|
||||
txt.textContent='';
|
||||
if(dismiss)dismiss.style.display='none';
|
||||
} else {
|
||||
txt.textContent=t;
|
||||
bar.style.display='';
|
||||
// Show dismiss X only for static/error messages, not transient busy ones
|
||||
const transient = t.endsWith('…') || t === (window._botName||'Hermes')+' is thinking\u2026';
|
||||
if(dismiss)dismiss.style.display=(!transient && !S.busy)?'inline':'none';
|
||||
}
|
||||
if(!t)return;
|
||||
showToast(t, 4000);
|
||||
}
|
||||
|
||||
function setComposerStatus(t){
|
||||
const el=$('composerStatus');
|
||||
if(!el)return;
|
||||
if(!t){
|
||||
el.style.display='none';
|
||||
el.textContent='';
|
||||
return;
|
||||
}
|
||||
el.textContent=t;
|
||||
el.style.display='';
|
||||
}
|
||||
|
||||
function updateSendBtn(){
|
||||
const btn=$('btnSend');
|
||||
if(!btn) return;
|
||||
const hasContent=$('msg').value.trim().length>0||S.pendingFiles.length>0;
|
||||
const shouldShow=hasContent&&!S.busy;
|
||||
if(shouldShow&&btn.style.display==='none'){
|
||||
btn.style.display='';
|
||||
// Remove then re-add class to retrigger animation each time
|
||||
const canSend=hasContent&&!S.busy;
|
||||
// Hide while busy (cancel button takes its place); show otherwise
|
||||
btn.style.display=S.busy?'none':'';
|
||||
btn.disabled=!canSend;
|
||||
if(canSend&&!btn.classList.contains('visible')){
|
||||
btn.classList.remove('visible');
|
||||
requestAnimationFrame(()=>btn.classList.add('visible'));
|
||||
} else if(!shouldShow&&btn.style.display!=='none'){
|
||||
btn.style.display='none';
|
||||
btn.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
function setBusy(v){
|
||||
S.busy=v;
|
||||
$('btnSend').disabled=v;
|
||||
updateSendBtn();
|
||||
const dots=$('activityDots');
|
||||
if(dots) dots.style.display=v?'flex':'none';
|
||||
if(!v){
|
||||
setStatus('');
|
||||
setComposerStatus('');
|
||||
// Always hide Cancel button when not busy
|
||||
const _cb=$('btnCancel');if(_cb)_cb.style.display='none';
|
||||
updateQueueBadge();
|
||||
@@ -471,7 +599,7 @@ function copyMsg(btn){
|
||||
const text=row?row.dataset.rawText:'';
|
||||
if(!text)return;
|
||||
navigator.clipboard.writeText(text).then(()=>{
|
||||
const orig=btn.innerHTML;btn.innerHTML='✓';btn.style.color='var(--blue)';
|
||||
const orig=btn.innerHTML;btn.innerHTML=li('check',13);btn.style.color='var(--blue)';
|
||||
setTimeout(()=>{btn.innerHTML=orig;btn.style.color='';},1500);
|
||||
}).catch(()=>showToast('Copy failed'));
|
||||
}
|
||||
@@ -577,10 +705,14 @@ async function checkInflightOnBoot(sid) {
|
||||
function syncTopbar(){
|
||||
if(!S.session){
|
||||
document.title=window._botName||'Hermes';
|
||||
// Show default workspace name even without a session
|
||||
const sidebarName=$('sidebarWsName');
|
||||
if(sidebarName && sidebarName.textContent==='Workspace'){
|
||||
sidebarName.textContent=t('no_workspace');
|
||||
if(typeof syncWorkspaceDisplays==='function') syncWorkspaceDisplays();
|
||||
if(typeof syncModelChip==='function') syncModelChip();
|
||||
if(typeof _syncHermesPanelSessionActions==='function') _syncHermesPanelSessionActions();
|
||||
else {
|
||||
const sidebarName=$('sidebarWsName');
|
||||
if(sidebarName && sidebarName.textContent==='Workspace'){
|
||||
sidebarName.textContent=t('no_workspace');
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
@@ -592,41 +724,33 @@ function syncTopbar(){
|
||||
// If a profile switch just happened, apply its model rather than the session's stale value.
|
||||
// S._pendingProfileModel is set by switchToProfile() and cleared here after one application.
|
||||
const modelOverride=S._pendingProfileModel;
|
||||
let currentModel=S.session.model||'';
|
||||
if(modelOverride){
|
||||
S._pendingProfileModel=null;
|
||||
_applyModelToDropdown(modelOverride,$('modelSelect'));
|
||||
currentModel=modelOverride;
|
||||
} else {
|
||||
const m=S.session.model||'';
|
||||
const applied=_applyModelToDropdown(m,$('modelSelect'));
|
||||
const applied=_applyModelToDropdown(currentModel,$('modelSelect'));
|
||||
// If the model isn't in the current provider list, add it as a visually marked
|
||||
// "(unavailable)" entry so the session value is preserved without misleading the user.
|
||||
// Selecting it will still attempt to send (same as before), but the label makes
|
||||
// clear it's a stale model from a previous session.
|
||||
if(!applied && m){
|
||||
if(!applied && currentModel){
|
||||
const opt=document.createElement('option');
|
||||
opt.value=m;
|
||||
opt.textContent=getModelLabel(m)+t('model_unavailable');
|
||||
opt.value=currentModel;
|
||||
opt.textContent=getModelLabel(currentModel)+t('model_unavailable');
|
||||
opt.style.color='var(--muted, #888)';
|
||||
opt.title=t('model_unavailable_title');
|
||||
$('modelSelect').appendChild(opt);
|
||||
$('modelSelect').value=m;
|
||||
$('modelSelect').value=currentModel;
|
||||
}
|
||||
}
|
||||
if(typeof syncModelChip==='function') syncModelChip();
|
||||
// Show Clear button only when session has messages
|
||||
const clearBtn=$('btnClearConv');
|
||||
if(clearBtn) clearBtn.style.display=(S.messages&&S.messages.filter(msg=>msg.role!=='tool').length>0)?'':'none';
|
||||
const displayModel=$('modelSelect').value||m;
|
||||
$('modelChip').textContent=getModelLabel(displayModel);
|
||||
const ws=S.session.workspace||'';
|
||||
// Update sidebar workspace display
|
||||
const sidebarName=$('sidebarWsName');
|
||||
const sidebarPath=$('sidebarWsPath');
|
||||
if(sidebarName){
|
||||
sidebarName.textContent=getWorkspaceFriendlyName(ws);
|
||||
}
|
||||
if(sidebarPath){
|
||||
sidebarPath.textContent=ws;
|
||||
}
|
||||
if(typeof _syncHermesPanelSessionActions==='function') _syncHermesPanelSessionActions();
|
||||
if(typeof syncWorkspaceDisplays==='function') syncWorkspaceDisplays();
|
||||
// modelSelect already set above
|
||||
// Update profile chip label
|
||||
const profileLabel=$('profileChipLabel');
|
||||
@@ -698,22 +822,22 @@ function renderMessages(){
|
||||
// Render thinking card before the assistant message (collapsed by default)
|
||||
if(thinkingText&&!isUser){
|
||||
const thinkRow=document.createElement('div');thinkRow.className='msg-row thinking-card-row';
|
||||
thinkRow.innerHTML=`<div class="thinking-card"><div class="thinking-card-header" onclick="this.parentElement.classList.toggle('open')"><span class="thinking-card-icon">💡</span><span class="thinking-card-label">${t('thinking')}</span><span class="thinking-card-toggle">▸</span></div><div class="thinking-card-body"><pre>${esc(thinkingText)}</pre></div></div>`;
|
||||
thinkRow.innerHTML=`<div class="thinking-card"><div class="thinking-card-header" onclick="this.parentElement.classList.toggle('open')"><span class="thinking-card-icon">${li('lightbulb',14)}</span><span class="thinking-card-label">${t('thinking')}</span><span class="thinking-card-toggle">${li('chevron-right',12)}</span></div><div class="thinking-card-body"><pre>${esc(thinkingText)}</pre></div></div>`;
|
||||
inner.appendChild(thinkRow);
|
||||
}
|
||||
const row=document.createElement('div');row.className='msg-row';
|
||||
row.dataset.msgIdx=rawIdx;row.dataset.role=m.role||'assistant';
|
||||
let filesHtml='';
|
||||
if(m.attachments&&m.attachments.length)
|
||||
filesHtml=`<div class="msg-files">${m.attachments.map(f=>`<div class="msg-file-badge">📎 ${esc(f)}</div>`).join('')}</div>`;
|
||||
filesHtml=`<div class="msg-files">${m.attachments.map(f=>`<div class="msg-file-badge">${li('paperclip',12)} ${esc(f)}</div>`).join('')}</div>`;
|
||||
const bodyHtml = isUser ? esc(String(content)).replace(/\n/g,'<br>') : renderMd(String(content));
|
||||
// Action buttons for this bubble
|
||||
const editBtn = isUser ? `<button class="msg-action-btn" title="${t('edit_message')}" onclick="editMessage(this)">✎</button>` : '';
|
||||
const retryBtn = isLastAssistant ? `<button class="msg-action-btn" title="${t('regenerate')}" onclick="regenerateResponse(this)">↻</button>` : '';
|
||||
const editBtn = isUser ? `<button class="msg-action-btn" title="${t('edit_message')}" onclick="editMessage(this)">${li('pencil',13)}</button>` : '';
|
||||
const retryBtn = isLastAssistant ? `<button class="msg-action-btn" title="${t('regenerate')}" onclick="regenerateResponse(this)">${li('rotate-ccw',13)}</button>` : '';
|
||||
const tsVal=m._ts||m.timestamp;
|
||||
const tsTitle=tsVal?new Date(tsVal*1000).toLocaleString():'';
|
||||
const _bn=window._botName||'Hermes';
|
||||
row.innerHTML=`<div class="msg-role ${m.role}" ${tsTitle?`title="${esc(tsTitle)}"`:''}><div class="role-icon ${m.role}">${isUser?'Y':esc(_bn.charAt(0).toUpperCase())}</div><span style="font-size:12px">${isUser?t('you'):esc(_bn)}</span>${tsTitle?`<span class="msg-time">${new Date(tsVal*1000).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'})}</span>`:''}<span class="msg-actions">${editBtn}<button class="msg-copy-btn msg-action-btn" title="${t('copy')}" onclick="copyMsg(this)">📋</button>${retryBtn}</span></div>${filesHtml}<div class="msg-body">${bodyHtml}</div>`;
|
||||
row.innerHTML=`<div class="msg-role ${m.role}" ${tsTitle?`title="${esc(tsTitle)}"`:''}><div class="role-icon ${m.role}">${isUser?'Y':esc(_bn.charAt(0).toUpperCase())}</div><span style="font-size:12px">${isUser?t('you'):esc(_bn)}</span>${tsTitle?`<span class="msg-time">${new Date(tsVal*1000).toLocaleTimeString([],{hour:'2-digit',minute:'2-digit'})}</span>`:''}<span class="msg-actions">${editBtn}<button class="msg-copy-btn msg-action-btn" title="${t('copy')}" onclick="copyMsg(this)">${li('copy',13)}</button>${retryBtn}</span></div>${filesHtml}<div class="msg-body">${bodyHtml}</div>`;
|
||||
row.dataset.rawText = String(content).trim();
|
||||
inner.appendChild(row);
|
||||
}
|
||||
@@ -880,12 +1004,12 @@ function buildToolCard(tc){
|
||||
const isSubagent=tc.name==='subagent_progress';
|
||||
const isDelegation=tc.name==='delegate_task';
|
||||
const cardClass='tool-card'+(tc.done===false?' tool-card-running':'')+(isSubagent?' tool-card-subagent':'');
|
||||
// Clean up subagent preview: strip leading 🔀 emoji since the icon already shows it
|
||||
// Clean up legacy subagent prefixes since the Lucide icon already shows it
|
||||
let displayName=tc.name;
|
||||
if(isSubagent) displayName='Subagent';
|
||||
if(isDelegation) displayName='Delegate task';
|
||||
let previewText=tc.preview||displaySnippet||'';
|
||||
if(isSubagent) previewText=previewText.replace(/^🔀\s*/,'');
|
||||
if(isSubagent) previewText=previewText.replace(/^(?:\u{1F500}|↳)\s*/u,'');
|
||||
row.innerHTML=`
|
||||
<div class="${cardClass}">
|
||||
<div class="tool-card-header" onclick="this.closest('.tool-card').classList.toggle('open')">
|
||||
@@ -1338,7 +1462,7 @@ function renderTray(){
|
||||
updateSendBtn();
|
||||
S.pendingFiles.forEach((f,i)=>{
|
||||
const chip=document.createElement('div');chip.className='attach-chip';
|
||||
chip.innerHTML=`📎 ${esc(f.name)} <button title="${t('remove_title')}">✕</button>`;
|
||||
chip.innerHTML=`${li('paperclip',12)} ${esc(f.name)} <button title="${t('remove_title')}">${li('x',12)}</button>`;
|
||||
chip.querySelector('button').onclick=()=>{S.pendingFiles.splice(i,1);renderTray();};
|
||||
tray.appendChild(chip);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user