maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat(chat): redesign response badge — colored chips for model, thinking, time, cost
Some checks are pending
NordaBiz Tests / Unit & Integration Tests (push) Waiting to run
Details
NordaBiz Tests / E2E Tests (Playwright) (push) Blocked by required conditions
Details
NordaBiz Tests / Smoke Tests (Production) (push) Blocked by required conditions
Details
NordaBiz Tests / Send Failure Notification (push) Blocked by required conditions
Details

Browse Source 
Badge now uses pill-shaped colored chips instead of tiny gray text:
- Blue chip: model name (Flash/Lite/Pro)
- Yellow chip: thinking level (szybki/analiza/głęboka analiza)
- Green chip: response time
- Green chip: cost

Much more readable than the previous 11px gray text.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-03-28 10:43:41 +01:00
parent f11df918e4
commit 1c7636e5c6
1 changed files with 45 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
templates/chat.html
View File

@ -473,21 +473,49 @@
.thinking-info-badge {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
gap: 6px;
margin-top: var(--spacing-sm);
padding-top: var(--spacing-sm);
border-top: 1px solid #e5e7eb;
font-size: 11px;
color: #9ca3af;
padding: 6px 10px;
border-radius: var(--radius-md);
background: #f8fafc;
border: 1px solid #e2e8f0;
font-size: 12px;
color: #64748b;
}
.thinking-badge-level {
color: #2E4872;
.badge-chip {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
}
.thinking-badge-time {
color: #6b7280;
.badge-chip.model {
background: #e0e7ff;
color: #3730a3;
}
.badge-chip.thinking {
background: #fef3c7;
color: #92400e;
}
.badge-chip.time {
background: #ecfdf5;
color: #065f46;
}
.badge-chip.cost {
background: #f0fdf4;
color: #166534;
}
.badge-separator {
color: #cbd5e1;
}
.thinking-badge-desc {
@ -2511,9 +2539,10 @@ async function sendMessage() {
const thinkingLabels = {'minimal': 'szybki', 'low': 'analiza', 'high': 'głęboka analiza'};
const cIcon = complexityIcons[chunk.complexity] || '';
const tLabel = thinkingLabels[chunk.thinking] || '';
let badgeHTML = `<span class="thinking-badge-level">${modelLabel}</span>`;
if (cIcon && tLabel) badgeHTML += ` · ${cIcon} ${tLabel}`;
badgeHTML += ` · <span class="thinking-badge-time">${latencySec}s</span> · <span class="thinking-badge-cost">${costStr}</span>`;
let badgeHTML = `<span class="badge-chip model">${modelLabel}</span>`;
if (cIcon && tLabel) badgeHTML += `<span class="badge-chip thinking">${cIcon} ${tLabel}</span>`;
badgeHTML += `<span class="badge-chip time">⏱ ${latencySec}s</span>`;
badgeHTML += `<span class="badge-chip cost">💰 ${costStr}</span>`;
infoBadge.innerHTML = badgeHTML;
streamContent.appendChild(infoBadge);
if (chunk.cost_usd) updateMonthlyCost(chunk.cost_usd);
@ -2621,13 +2650,10 @@ function addMessage(role, content, animate = true, techInfo = null) {
// Format cost
const costStr = costUsd > 0 ? `$${costUsd.toFixed(4)}` : '$0.00';
// Build badge content
let badgeHTML = `<span class="thinking-badge-level">${modelLabel}</span> · <span class="thinking-badge-time">${latencySec}s</span> · <span class="thinking-badge-cost">${costStr}</span>`;
// Add "Try Pro" hint when using Flash model
if (currentModel === 'flash' && (modelName === 'flash' || modelName === 'gemini-3-flash-preview')) {
badgeHTML += ` · <a href="#" class="pro-upgrade-hint" onclick="event.preventDefault(); setModel('pro');" title="Przełącz na Gemini 3 Pro dla lepszych odpowiedzi">Lepsze odpowiedzi? <strong>Spróbuj Pro</strong> 🧠</a>`;
}
// Build badge content with chips
let badgeHTML = `<span class="badge-chip model">${modelLabel}</span>`;
badgeHTML += `<span class="badge-chip time">⏱ ${latencySec}s</span>`;
badgeHTML += `<span class="badge-chip cost">💰 ${costStr}</span>`;
infoBadge.innerHTML = badgeHTML;
contentDiv.appendChild(infoBadge);