v0.17.18: barcode-style alternating pairs — each Q&A wrapped in .msg-pair with alternating tint + left border accent

This commit is contained in:
gramps
2026-07-13 09:56:31 -07:00
parent b90b0a6d14
commit 79b684e0cd
2 changed files with 17 additions and 4 deletions
+1 -1
View File
@@ -9,7 +9,7 @@ import logging
log = logging.getLogger("caic") log = logging.getLogger("caic")
VERSION = "v0.17.17" VERSION = "v0.17.18"
OLLAMA_BASE = os.environ.get("OLLAMA_BASE", "http://localhost:11434") OLLAMA_BASE = os.environ.get("OLLAMA_BASE", "http://localhost:11434")
LLAMA_SERVER_BASE = os.environ.get("LLAMA_SERVER_BASE", "http://192.168.50.108:8081") LLAMA_SERVER_BASE = os.environ.get("LLAMA_SERVER_BASE", "http://192.168.50.108:8081")
SEARXNG_BASE = "http://localhost:8888" SEARXNG_BASE = "http://localhost:8888"
+16 -3
View File
@@ -147,7 +147,10 @@ body { font-family: var(--font-body); background: var(--bg-primary); color: var(
.skill-risk { display:inline-block; margin-left:8px; padding:1px 6px; border-radius:10px; font-size:10px; text-transform:uppercase; border:1px solid var(--border); color:var(--text-secondary); } .skill-risk { display:inline-block; margin-left:8px; padding:1px 6px; border-radius:10px; font-size:10px; text-transform:uppercase; border:1px solid var(--border); color:var(--text-secondary); }
.skill-item.disabled .skill-meta { opacity:0.6; } .skill-item.disabled .skill-meta { opacity:0.6; }
.chat-container { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; } .chat-container { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:8px; }
.msg-pair { display:flex; flex-direction:column; gap:8px; border-radius:var(--radius); padding:12px 12px 8px; border-left:3px solid transparent; }
.msg-pair:nth-child(odd) { background:rgba(255,255,255,0.015); border-left-color:rgba(0,136,187,0.25); }
.msg-pair:nth-child(even) { background:rgba(255,255,255,0.035); border-left-color:rgba(243,156,18,0.25); }
.welcome-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); text-align:center; gap:12px; } .welcome-screen { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-muted); text-align:center; gap:12px; }
.welcome-screen .logo { font-family:var(--font-mono); font-size:48px; color:var(--accent-dim); opacity:0.5; } .welcome-screen .logo { font-family:var(--font-mono); font-size:48px; color:var(--accent-dim); opacity:0.5; }
.welcome-screen .welcome-logo { max-width:70%; height:auto; object-fit:contain; opacity:0.85; } .welcome-screen .welcome-logo { max-width:70%; height:auto; object-fit:contain; opacity:0.85; }
@@ -1411,8 +1414,18 @@ function appendMessage(role, content, animate, isSearch = false, afterEl = null)
const now = new Date(); const now = new Date();
const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); const timeStr = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
div.innerHTML = `<div class="avatar">${role === 'user' ? 'YOU' : 'AI'}</div><div class="content"><div class="role-label">${role}${role === 'user' ? ' <span class="msg-time">' + timeStr + '</span>' : ''}</div><div class="text">${content ? renderMarkdown(content) : ''}</div>${role === 'assistant' ? '<div class="msg-toolbar"></div>' : ''}</div>`; div.innerHTML = `<div class="avatar">${role === 'user' ? 'YOU' : 'AI'}</div><div class="content"><div class="role-label">${role}${role === 'user' ? ' <span class="msg-time">' + timeStr + '</span>' : ''}</div><div class="text">${content ? renderMarkdown(content) : ''}</div>${role === 'assistant' ? '<div class="msg-toolbar"></div>' : ''}</div>`;
if (afterEl) { if (role === 'user') {
afterEl.parentNode.insertBefore(div, afterEl.nextSibling); const pair = document.createElement('div');
pair.className = 'msg-pair' + (isSearch ? ' search-pair' : '');
pair.appendChild(div);
container.prepend(pair);
} else if (role === 'assistant') {
const pair = afterEl ? afterEl.closest('.msg-pair') : container.querySelector('.msg-pair');
if (pair) {
pair.appendChild(div);
} else {
container.prepend(div);
}
} else { } else {
container.prepend(div); container.prepend(div);
} }