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

feat: in-nav sales agent chat like odoo site - input with icon/send in nav, panel drops down below

Browse Source
This commit is contained in:
Oliver
2026-06-06 16:57:19 -03:00
parent 22cdcc21c1
commit 919e81a7c4
1 changed files with 127 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+126 -103
View File
@@ -971,65 +971,130 @@
}
}
/* ── Chat Panel (fixed overlay, toggled from nav) ──────── */
.chat-panel {
display: none;
flex-direction: column;
position: fixed;
bottom: 20px;
right: 20px;
width: 360px;
max-height: 520px;
/* ── Nav Chat ──────────────────────────────────────────── */
.nav-chat {
position: relative;
display: flex;
align-items: flex-end;
width: 340px;
height: 36px;
min-height: 36px;
--chat-panel-height: 300px;
overflow: visible;
}
.nav-chat-main {
position: relative;
z-index: 2;
display: flex;
align-items: center;
width: 100%;
height: 36px;
background: var(--bg-inner);
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.nav-chat:focus-within .nav-chat-main {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
}
.nav-chat.open .nav-chat-main {
border-color: var(--accent);
transform: translateY(var(--chat-panel-height));
}
.nav-chat-panel {
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 100%;
height: var(--chat-panel-height);
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-card);
box-shadow: var(--shadow);
border-radius: 18px;
box-shadow: 0 24px 80px rgba(0,0,0,0.5);
overflow: hidden;
z-index: 9999;
animation: chatSlideUp 0.28s ease;
visibility: hidden;
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
display: flex;
flex-direction: column;
transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}
.chat-panel.open { display: flex; }
@keyframes chatSlideUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
.nav-chat.open .nav-chat-panel {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.chat-header {
.chat-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--accent-dim);
padding: 12px 16px;
border-bottom: 1px solid var(--border);
font-weight: 600;
font-size: 13px;
color: var(--text);
}
.chat-header button {
.chat-panel-close {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 16px;
padding: 0 4px;
font-size: 14px;
padding: 2px 6px;
line-height: 1;
}
.chat-header button:hover { color: var(--text); }
.chat-msgs {
.chat-panel-close:hover { color: var(--text); }
.chat-history {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 10px;
min-height: 200px;
max-height: 340px;
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: 10px 14px;
border-radius: 14px;
line-height: 1.45;
padding: 8px 12px;
border-radius: 12px;
line-height: 1.4;
word-wrap: break-word;
font-size: 13px;
font-size: 12.5px;
}
.chat-msg-bot {
align-self: flex-start;
@@ -1047,49 +1112,8 @@
border-bottom-left-radius: 4px;
opacity: 0.6;
}
.chat-input-row {
display: flex;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--bg-inner);
}
.chat-input-row input {
flex: 1;
padding: 9px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--bg-input);
color: var(--text);
font-size: 13px;
outline: none;
}
.chat-input-row input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15);
}
.chat-input-row button {
padding: 9px 18px;
background: var(--accent);
color: #fff;
border: none;
border-radius: var(--radius);
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: opacity 0.2s;
white-space: nowrap;
}
.chat-input-row button:hover { opacity: 0.9; }
.chat-input-row button:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 480px) {
.chat-panel {
right: 10px;
left: 10px;
width: auto;
bottom: 10px;
max-height: 60vh;
}
@media (max-width: 700px) {
.nav-chat { display: none; }
}
</style>
</head>
@@ -1116,8 +1140,21 @@
<ul class="nav-links" id="nav-links">
<li><a href="#pricing">Pricing</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#" onclick="chatToggle(); return false;">Chat with Sales Agent</a></li>
</ul>
<div class="nav-chat" id="nav-chat">
<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>
</div>
<div class="chat-history" id="chat-msgs"></div>
</div>
<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>
<div class="header-actions">
<a href="https://app.derez.ai" class="btn-login">
@@ -1832,7 +1869,8 @@
function chatToggle() {
chatOpen = !chatOpen;
document.getElementById("chat-panel").classList.toggle("open", chatOpen);
document.getElementById("nav-chat").classList.toggle("open", chatOpen);
document.getElementById("chat-panel").setAttribute("aria-hidden", !chatOpen);
if (chatOpen) {
if (!chatId) {
chatId = String(Math.floor(100000 + Math.random() * 900000));
@@ -1846,6 +1884,14 @@
if (chatOpen) chatToggle();
}
function chatOpenSilent() {
if (!chatOpen) {
chatOpen = true;
document.getElementById("nav-chat").classList.add("open");
document.getElementById("chat-panel").setAttribute("aria-hidden", "false");
}
}
function chatAppendMsg(role, text) {
const msgs = document.getElementById("chat-msgs");
const div = document.createElement("div");
@@ -1866,6 +1912,7 @@
const msg = input.value.trim();
if (!msg || chatBusy) return;
chatBusy = true;
chatOpenSilent();
chatAppendMsg("user", msg);
input.value = "";
btn.disabled = true;
@@ -1970,38 +2017,14 @@
if (!chatId) chatId = cid;
chatAppendMsg("bot", reply);
greeted = true;
if (!chatOpen) chatToggle();
chatOpenSilent();
}
})
.catch(function () {});
}
})();
/* ── Scroll-close ────────────────────────────────────────── */
(function () {
let scrolled = false;
window.addEventListener("scroll", function () {
if (chatOpen && !scrolled) {
scrolled = true;
setTimeout(function () { scrolled = false; }, 500);
chatClose();
}
}, { passive: true });
})();
</script>
<!-- ── Chat Panel (fixed overlay, toggled from nav) ────────── -->
<div class="chat-panel" id="chat-panel">
<div class="chat-header">
<span>Sales Agent</span>
<button onclick="chatClose()">✕</button>
</div>
<div class="chat-msgs" id="chat-msgs"></div>
<div class="chat-input-row">
<input id="chat-input" type="text" placeholder="Ask about plans, setup, pricing…" onkeydown="chatKey(event)" />
<button id="chat-send-btn" onclick="chatSend()">Send</button>
</div>
</div>
</body>
</html>