From 4b41b457555f855e4b1ed67ea4a76e643d089c95 Mon Sep 17 00:00:00 2001 From: Nicolas Varrot Date: Thu, 12 Feb 2026 23:38:07 +0000 Subject: [PATCH] feat: update landing page demo to match current UI - User messages: right-aligned cyan gradient bubbles with border - Assistant messages: left-aligned dark zinc bubbles - Squared-round avatars (rounded-2xl) matching app style - Date separator between messages - Channel icons in sidebar (Discord SVG, Telegram SVG, chat/cron icons) - Proper bubble structure instead of flat message layout Closes feedback #53 --- docs/index.html | 80 ++++++++++++++++++++++++++++++++++++------------- 1 file changed, 59 insertions(+), 21 deletions(-) diff --git a/docs/index.html b/docs/index.html index 536c8aa..38e2a88 100644 --- a/docs/index.html +++ b/docs/index.html @@ -175,8 +175,9 @@ transition: background 0.15s; } .demo-session-active { background: rgba(34,211,238,0.08); } - .demo-session-name { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + .demo-session-name { font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 0.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 0.35rem; } .demo-session-active .demo-session-name { color: var(--text-primary); } + .demo-session-icon { font-size: 0.7rem; opacity: 0.6; flex-shrink: 0; } .demo-token-bar { height: 3px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; } .demo-token-fill { height: 100%; background: var(--accent-cyan); border-radius: 2px; transition: width 1s ease; } .demo-token-low { background: #4ade80; } @@ -200,18 +201,46 @@ border-radius: 0.5rem; color: var(--bg-primary); font-size: 1rem; cursor: default; } - .demo-msg { display: flex; gap: 0.6rem; animation: msgIn 0.3s ease; } + .demo-msg { display: flex; gap: 0.6rem; animation: msgIn 0.3s ease; padding: 0.35rem 0; } + .demo-msg-user { flex-direction: row-reverse; } @keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .demo-avatar { - width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; - font-size: 0.75rem; flex-shrink: 0; margin-top: 2px; + width: 32px; height: 32px; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; + font-size: 0.8rem; flex-shrink: 0; margin-top: 2px; + border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); } - .demo-avatar-user { background: rgba(34,211,238,0.15); color: var(--accent-cyan); } - .demo-avatar-bot { background: rgba(167,139,250,0.15); color: var(--accent-purple); } + .demo-avatar-user { background: rgba(34,211,238,0.08); color: var(--accent-cyan); } + .demo-avatar-bot { background: rgba(255,255,255,0.03); color: var(--accent-cyan); } .demo-msg-body { flex: 1; min-width: 0; } - .demo-msg-role { font-size: 0.7rem; color: var(--text-secondary); margin-bottom: 0.15rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } - .demo-msg-text { font-size: 0.85rem; line-height: 1.55; color: var(--text-primary); } - .demo-msg-text code { background: rgba(255,255,255,0.06); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.8rem; font-family: 'SF Mono','Fira Code',monospace; } + .demo-msg-body-user { text-align: right; } + .demo-bubble { + display: inline-block; text-align: left; + border-radius: 1.25rem; padding: 0.65rem 0.9rem; + font-size: 0.82rem; line-height: 1.55; max-width: 100%; + } + .demo-bubble-user { + background: linear-gradient(to bottom, rgba(6,182,212,0.25), rgba(8,145,178,0.15)); + border: 1px solid rgba(34,211,238,0.3); + color: var(--text-primary); + } + .demo-bubble-bot { + background: rgba(255,255,255,0.04); + border: 1px solid rgba(255,255,255,0.08); + color: #d4d4d8; + box-shadow: 0 0 0 1px rgba(255,255,255,0.02); + } + .demo-msg-text { font-size: 0.82rem; line-height: 1.55; color: inherit; } + .demo-msg-text code { background: rgba(255,255,255,0.06); padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.78rem; font-family: 'SF Mono','Fira Code',monospace; } + .demo-date-sep { + display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; user-select: none; + } + .demo-date-sep::before, .demo-date-sep::after { + content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.06); + } + .demo-date-sep span { + font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; + color: #71717a; + } .demo-thinking { display: inline-flex; align-items: center; gap: 0.4rem; @@ -563,19 +592,19 @@ PinchChat
-
🏠 Main Session
+
💬 Main Session
-
⏰ Daily AI Watch
+
⏰ Daily AI Watch
-
🔧 PinchChat Improve
+
Discord
-
📧 Email Check
+
Telegram
@@ -826,7 +855,8 @@ const input = document.getElementById('demo-input-text'); const scenario = [ - { type: 'input-type', text: 'What\'s the weather in Grenoble and check my latest emails?', delay: 0 }, + { type: 'date-sep', text: 'Today', delay: 0 }, + { type: 'input-type', text: 'What\'s the weather in Grenoble and check my latest emails?', delay: 600 }, { type: 'input-send', delay: 800 }, { type: 'user-msg', text: 'What\'s the weather in Grenoble and check my latest emails?', delay: 200 }, { type: 'thinking', delay: 400 }, @@ -840,7 +870,7 @@ { type: 'reset', delay: 0 }, ]; - let thinkingEl = null, toolArea = null, currentBotMsg = null; + let thinkingEl = null, toolArea = null, currentBotMsg = null, bubbleEl = null; function scrollDown() { chat.scrollTop = chat.scrollHeight; } @@ -859,11 +889,12 @@ function createBotMsg() { const msg = document.createElement('div'); msg.className = 'demo-msg'; - msg.innerHTML = '
🤖
Assistant
'; + msg.innerHTML = '
🤖
'; chat.appendChild(msg); currentBotMsg = msg.querySelector('.demo-msg-body'); + bubbleEl = msg.querySelector('.demo-bubble-bot'); toolArea = document.createElement('div'); - currentBotMsg.appendChild(toolArea); + bubbleEl.appendChild(toolArea); scrollDown(); return currentBotMsg; } @@ -874,12 +905,19 @@ const next = () => setTimeout(() => runStep(idx + 1), scenario[idx + 1]?.delay || 0); switch (step.type) { + case 'date-sep': { + const sep = document.createElement('div'); + sep.className = 'demo-date-sep'; + sep.innerHTML = '' + step.text + ''; + chat.appendChild(sep); + scrollDown(); next(); break; + } case 'input-type': typeText(input, step.text, next); break; case 'input-send': input.textContent = ''; next(); break; case 'user-msg': { const msg = document.createElement('div'); - msg.className = 'demo-msg'; - msg.innerHTML = '
👤
You
'; + msg.className = 'demo-msg demo-msg-user'; + msg.innerHTML = '
👤
'; chat.appendChild(msg); msg.querySelector('.demo-msg-text').textContent = step.text; scrollDown(); next(); break; @@ -912,14 +950,14 @@ const d = document.createElement('div'); d.className = 'demo-msg-text'; d.innerHTML = step.html; - currentBotMsg.appendChild(d); + bubbleEl.appendChild(d); scrollDown(); next(); break; } case 'pause': setTimeout(next, step.delay); break; case 'reset': setTimeout(() => { chat.innerHTML = ''; input.textContent = ''; - thinkingEl = null; toolArea = null; currentBotMsg = null; + thinkingEl = null; toolArea = null; currentBotMsg = null; bubbleEl = null; runStep(0); }, 500); break;