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 ──────────────────────────────────────────────── */
/* Slot sits in document flow — zero height when closed */
#chat-panel-slot {
display: none;
padding-top: 8px;
padding-bottom: 6px;
/* ── Chat Widget (floating bottom-right) ────────────── */
.chat-fab {
position: fixed;
bottom: 24px;
right: 24px;
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 {
display: block;
.chat-fab:hover {
transform: scale(1.08);
box-shadow: 0 6px 32px rgba(79, 142, 247, 0.5);
}
.nav-chat-panel {
width: 340px;
max-width: 100%;
height: 300px;
.chat-fab.open {
transform: scale(0.9);
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;
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
overflow: hidden;
display: flex;
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;
align-items: center;
width: 340px;
max-width: 100%;
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;
gap: 10px;
padding: 16px 18px 12px;
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-size: 13px;
font-size: 13.5px;
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;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 14px;
padding: 2px 6px;
font-size: 16px;
padding: 4px;
line-height: 1;
border-radius: 6px;
transition: color 0.15s, background 0.15s;
}
.chat-panel-close:hover { color: var(--text); }
.chat-history {
.chat-header-close:hover {
color: var(--text);
background: var(--bg-hover);
}
.chat-msgs {
flex: 1;
overflow-y: auto;
padding: 12px 16px;
padding: 16px 18px;
display: flex;
flex-direction: column;
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 {
max-width: 85%;
padding: 8px 12px;
border-radius: 12px;
line-height: 1.4;
padding: 9px 14px;
border-radius: 14px;
line-height: 1.45;
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 {
align-self: flex-start;
@@ -1255,7 +1284,8 @@
}
.chat-msg-user {
align-self: flex-end;
background: var(--accent-dim);
background: var(--accent);
color: #fff;
border-bottom-right-radius: 4px;
}
.chat-msg-thinking {
@@ -1264,8 +1294,65 @@
border-bottom-left-radius: 4px;
opacity: 0.6;
}
@media (max-width: 700px) {
.nav-chat-main { display: none; }
.chat-input-row {
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>
</head>
@@ -1293,11 +1380,6 @@
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
</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">
<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">
@@ -1315,15 +1397,22 @@
</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;">
<div class="nav-chat-panel" id="chat-panel" aria-hidden="true">
<div class="chat-panel-header">
<span class="chat-panel-title">💬 Sales Agent</span>
<button class="chat-panel-close" id="chat-panel-close" onclick="chatClose()">✕</button>
<button class="chat-fab" id="chat-fab" onclick="chatToggle()" aria-label="Open chat">💬</button>
<div class="chat-widget" id="chat-widget" aria-hidden="true">
<div class="chat-header">
<div class="chat-header-avatar">🤖</div>
<div class="chat-header-info">
<div class="chat-header-name">Sales Agent</div>
<div class="chat-header-status">Online</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>
@@ -2111,14 +2200,15 @@
function chatToggle() {
chatOpen = !chatOpen;
document.getElementById("chat-panel-slot").classList.toggle("open", chatOpen);
document.getElementById("chat-panel").setAttribute("aria-hidden", !chatOpen);
document.getElementById('chat-widget').classList.toggle('open', chatOpen);
document.getElementById('chat-fab').classList.toggle('open', chatOpen);
document.getElementById('chat-widget').setAttribute('aria-hidden', !chatOpen);
if (chatOpen) {
if (!chatId) {
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() {
if (!chatOpen) {
chatOpen = true;
document.getElementById("chat-panel-slot").classList.add("open");
document.getElementById("chat-panel").setAttribute("aria-hidden", "false");
document.getElementById('chat-widget').classList.add('open');
document.getElementById('chat-fab').classList.add('open');
document.getElementById('chat-widget').setAttribute('aria-hidden', 'false');
}
}
@@ -2158,7 +2249,7 @@
chatAppendMsg("user", msg);
input.value = "";
btn.disabled = true;
btn.textContent = "…";
btn.innerHTML = '<span style="opacity:0.6">…</span>';
const think = chatAppendMsg("bot", "…");
think.className = "chat-msg chat-msg-thinking";
@@ -2184,7 +2275,7 @@
} finally {
chatBusy = false;
btn.disabled = false;
btn.textContent = "Send";
btn.innerHTML = '➤';
document.getElementById("chat-input").focus();
}
}