Oliver/derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

swap nav chat for floating bottom-right widget

Browse Source
This commit is contained in:
Oliver
2026-06-07 05:27:39 -03:00
parent acc8723de6
commit a81369ecd7
1 changed files with 189 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+189 -98
View File
@@ -1142,111 +1142,140 @@
} }
} }
/* ── Chat ──────────────────────────────────────────────── */ /* ── Chat Widget (floating bottom-right) ────────────── */
/* Slot sits in document flow — zero height when closed */ .chat-fab {
#chat-panel-slot { position: fixed;
display: none; bottom: 24px;
padding-top: 8px; right: 24px;
padding-bottom: 6px; z-index: 9999;
width: 56px;
height: 56px;
border-radius: 28px;
background: var(--accent);
border: none;
cursor: pointer;
box-shadow: 0 4px 24px rgba(79, 142, 247, 0.35);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #fff;
transition: transform 0.2s, box-shadow 0.2s;
} }
#chat-panel-slot.open { .chat-fab:hover {
display: block; transform: scale(1.08);
box-shadow: 0 6px 32px rgba(79, 142, 247, 0.5);
} }
.nav-chat-panel { .chat-fab.open {
width: 340px; transform: scale(0.9);
max-width: 100%;
height: 300px;
background: var(--bg-card); background: var(--bg-card);
border: 1px solid var(--accent); border: 1px solid var(--border);
box-shadow: none;
}
.chat-widget {
position: fixed;
bottom: 92px;
right: 24px;
z-index: 9998;
width: 360px;
max-width: calc(100vw - 48px);
height: 460px;
max-height: calc(100vh - 140px);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px; border-radius: 18px;
box-shadow: 0 24px 80px rgba(0,0,0,0.5); box-shadow: 0 24px 80px rgba(0,0,0,0.5);
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(12px) scale(0.96);
transform-origin: bottom right;
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
} }
.nav-chat-main { .chat-widget.open {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.chat-header {
display: flex; display: flex;
align-items: center; align-items: center;
width: 340px; gap: 10px;
max-width: 100%; padding: 16px 18px 12px;
height: 36px;
background: var(--bg-inner);
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
flex-shrink: 0;
transition: border-color 0.25s, box-shadow 0.25s;
}
.nav-chat-main:focus-within {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
}
.chat-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.chat-header-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--accent-dim);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.chat-header-info {
flex: 1;
min-width: 0;
}
.chat-header-name {
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 13.5px;
color: var(--text); color: var(--text);
} }
.chat-panel-close { .chat-header-status {
font-size: 11px;
color: var(--success);
display: flex;
align-items: center;
gap: 4px;
}
.chat-header-status::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
display: inline-block;
}
.chat-header-close {
background: none; background: none;
border: none; border: none;
color: var(--text-muted); color: var(--text-muted);
cursor: pointer; cursor: pointer;
font-size: 14px; font-size: 16px;
padding: 2px 6px; padding: 4px;
line-height: 1; line-height: 1;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
} }
.chat-panel-close:hover { color: var(--text); } .chat-header-close:hover {
.chat-history { color: var(--text);
background: var(--bg-hover);
}
.chat-msgs {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 12px 16px; padding: 16px 18px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 8px; gap: 8px;
} }
.nav-chat-toggle,
.nav-chat-send {
background: none;
border: none;
cursor: pointer;
height: 100%;
color: var(--accent);
padding: 0 10px;
font-size: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
}
.nav-chat-toggle {
border-right: 1px solid var(--border);
}
.nav-chat-send {
border-left: 1px solid var(--border);
}
.nav-chat-input {
flex: 1;
min-width: 0;
padding: 0 10px;
border: none;
outline: none;
background: transparent;
font: inherit;
color: var(--text);
font-size: 0.78rem;
}
.nav-chat-input::placeholder { color: var(--text-muted); }
.chat-msg { .chat-msg {
max-width: 85%; max-width: 85%;
padding: 8px 12px; padding: 9px 14px;
border-radius: 12px; border-radius: 14px;
line-height: 1.4; line-height: 1.45;
word-wrap: break-word; word-wrap: break-word;
font-size: 12.5px; font-size: 13px;
animation: msgIn 0.2s ease;
}
@keyframes msgIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
} }
.chat-msg-bot { .chat-msg-bot {
align-self: flex-start; align-self: flex-start;
@@ -1255,7 +1284,8 @@
} }
.chat-msg-user { .chat-msg-user {
align-self: flex-end; align-self: flex-end;
background: var(--accent-dim); background: var(--accent);
color: #fff;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
.chat-msg-thinking { .chat-msg-thinking {
@@ -1264,8 +1294,65 @@
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
opacity: 0.6; opacity: 0.6;
} }
@media (max-width: 700px) { .chat-input-row {
.nav-chat-main { display: none; } display: flex;
align-items: center;
gap: 8px;
padding: 12px 18px 16px;
border-top: 1px solid var(--border);
}
.chat-input-box {
flex: 1;
min-width: 0;
height: 40px;
padding: 0 14px;
border: 1px solid var(--border);
border-radius: 20px;
outline: none;
background: var(--bg-inner);
font: inherit;
color: var(--text);
font-size: 13px;
transition: border-color 0.2s;
}
.chat-input-box:focus {
border-color: var(--accent);
}
.chat-input-box::placeholder {
color: var(--text-muted);
}
.chat-send-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--accent);
border: none;
cursor: pointer;
color: #fff;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: opacity 0.15s, transform 0.1s;
}
.chat-send-btn:hover { opacity: 0.85; }
.chat-send-btn:active { transform: scale(0.92); }
.chat-send-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 500px) {
.chat-widget {
right: 12px;
bottom: 84px;
width: calc(100vw - 24px);
max-height: calc(100vh - 120px);
}
.chat-fab {
right: 12px;
bottom: 16px;
}
} }
</style> </style>
</head> </head>
@@ -1293,11 +1380,6 @@
<li><a href="#pricing">Pricing</a></li> <li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li> <li><a href="#faq">FAQ</a></li>
</ul> </ul>
<div class="nav-chat-main">
<button class="nav-chat-toggle" id="nav-chat-toggle" onclick="chatToggle()" aria-label="Toggle chat history">💬</button>
<input type="text" class="nav-chat-input" id="chat-input" placeholder="Ask your sales agent" onkeydown="chatKey(event)" />
<button class="nav-chat-send" id="chat-send-btn" onclick="chatSend()">➤</button>
</div>
<div class="header-actions"> <div class="header-actions">
<a href="https://app.derez.ai" class="btn-login"> <a href="https://app.derez.ai" class="btn-login">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
@@ -1315,15 +1397,22 @@
</header> </header>
<!-- ═══════════════════════════════════════════════════════════════ <!-- ═══════════════════════════════════════════════════════════════
CHAT PANEL SLOT (in document flow — pushes hero down when open) CHAT WIDGET (floating bottom-right)
═══════════════════════════════════════════════════════════════ --> ═══════════════════════════════════════════════════════════════ -->
<div id="chat-panel-slot" style="padding-left:24px; padding-right:24px; margin-top:60px;"> <button class="chat-fab" id="chat-fab" onclick="chatToggle()" aria-label="Open chat">💬</button>
<div class="nav-chat-panel" id="chat-panel" aria-hidden="true"> <div class="chat-widget" id="chat-widget" aria-hidden="true">
<div class="chat-panel-header"> <div class="chat-header">
<span class="chat-panel-title">💬 Sales Agent</span> <div class="chat-header-avatar">🤖</div>
<button class="chat-panel-close" id="chat-panel-close" onclick="chatClose()">✕</button> <div class="chat-header-info">
<div class="chat-header-name">Sales Agent</div>
<div class="chat-header-status">Online</div>
</div> </div>
<div class="chat-history" id="chat-msgs"></div> <button class="chat-header-close" onclick="chatClose()" aria-label="Close chat">✕</button>
</div>
<div class="chat-msgs" id="chat-msgs"></div>
<div class="chat-input-row">
<input type="text" class="chat-input-box" id="chat-input" placeholder="Ask your sales agent..." onkeydown="chatKey(event)" />
<button class="chat-send-btn" id="chat-send-btn" onclick="chatSend()">➤</button>
</div> </div>
</div> </div>
@@ -2111,14 +2200,15 @@
function chatToggle() { function chatToggle() {
chatOpen = !chatOpen; chatOpen = !chatOpen;
document.getElementById("chat-panel-slot").classList.toggle("open", chatOpen); document.getElementById('chat-widget').classList.toggle('open', chatOpen);
document.getElementById("chat-panel").setAttribute("aria-hidden", !chatOpen); document.getElementById('chat-fab').classList.toggle('open', chatOpen);
document.getElementById('chat-widget').setAttribute('aria-hidden', !chatOpen);
if (chatOpen) { if (chatOpen) {
if (!chatId) { if (!chatId) {
chatId = String(Math.floor(100000 + Math.random() * 900000)); chatId = String(Math.floor(100000 + Math.random() * 900000));
chatAppendMsg("bot", "Hi! I'm your Sales Agent. Ask me about plans, setup, pricing, integrations, or anything about your AI agent."); chatAppendMsg('bot', "Hi! I'm your Sales Agent. Ask me about plans, setup, pricing, integrations, or anything about your AI agent.");
} }
document.getElementById("chat-input").focus(); setTimeout(() => document.getElementById('chat-input').focus(), 100);
} }
} }
@@ -2129,8 +2219,9 @@
function chatOpenSilent() { function chatOpenSilent() {
if (!chatOpen) { if (!chatOpen) {
chatOpen = true; chatOpen = true;
document.getElementById("chat-panel-slot").classList.add("open"); document.getElementById('chat-widget').classList.add('open');
document.getElementById("chat-panel").setAttribute("aria-hidden", "false"); document.getElementById('chat-fab').classList.add('open');
document.getElementById('chat-widget').setAttribute('aria-hidden', 'false');
} }
} }
@@ -2158,7 +2249,7 @@
chatAppendMsg("user", msg); chatAppendMsg("user", msg);
input.value = ""; input.value = "";
btn.disabled = true; btn.disabled = true;
btn.textContent = "…"; btn.innerHTML = '<span style="opacity:0.6">…</span>';
const think = chatAppendMsg("bot", "…"); const think = chatAppendMsg("bot", "…");
think.className = "chat-msg chat-msg-thinking"; think.className = "chat-msg chat-msg-thinking";
@@ -2184,7 +2275,7 @@
} finally { } finally {
chatBusy = false; chatBusy = false;
btn.disabled = false; btn.disabled = false;
btn.textContent = "Send"; btn.innerHTML = '➤';
document.getElementById("chat-input").focus(); document.getElementById("chat-input").focus();
} }
} }