This commit is contained in:
oliver
2026-04-25 06:13:51 -03:00
parent 3ac948e01b
commit c6f6942701
+87 -105
View File
@@ -142,22 +142,70 @@
}
.nav-chat {
position: relative;
display: flex;
align-items: center;
align-items: flex-end;
width: 360px;
height: 38px;
background: rgba(93, 64, 55, 0.06);
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
transition: border-color 0.25s, box-shadow 0.25s;
min-height: 38px;
--chat-panel-height: 304px;
overflow: visible;
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.nav-chat:focus-within {
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-glow);
}
.nav-chat-main {
position: relative;
z-index: 2;
display: flex;
align-items: center;
width: 100%;
height: 38px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.nav-chat.open .nav-chat-main {
border-color: var(--gold);
box-shadow: 0 16px 32px rgba(62, 39, 35, 0.12);
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(--card);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 24px 80px rgba(62, 39, 35, 0.24);
overflow: hidden;
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;
}
.nav-chat.open .nav-chat-panel {
visibility: visible;
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.nav-chat-toggle,
.nav-chat-send,
.chat-panel-close,
@@ -259,31 +307,6 @@
display: none;
}
.chat-panel {
position: fixed;
top: 62px;
right: 8vw;
width: 420px;
background: var(--card);
border: 1px solid var(--border);
border-top: 3px solid var(--gold);
border-radius: 0 0 18px 18px;
box-shadow: 0 24px 80px rgba(62, 39, 35, 0.24);
overflow: hidden;
visibility: hidden;
opacity: 0;
transform: translateY(-12px);
transition: opacity 0.22s ease, visibility 0.22s ease,
transform 0.22s ease;
z-index: 498;
}
.chat-panel.open {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.chat-panel-header {
display: flex;
align-items: center;
@@ -308,7 +331,8 @@
}
.chat-history {
height: 260px;
flex: 1;
min-height: 260px;
overflow-y: auto;
padding: 16px;
display: flex;
@@ -357,29 +381,6 @@
color: var(--grey);
}
.chat-input-row {
display: flex;
align-items: center;
border-top: 1px solid var(--border);
background: var(--bg);
}
.chat-input-field {
flex: 1;
min-width: 0;
padding: 14px 16px;
color: var(--white);
font-size: 0.84rem;
}
.chat-input-send {
height: 48px;
padding: 0 16px;
color: var(--gold);
border-left: 1px solid var(--border);
font-size: 0.95rem;
}
section,
footer {
scroll-margin-top: 72px;
@@ -1678,8 +1679,7 @@
}
.nav-links,
.nav-chat,
.chat-panel {
.nav-chat {
display: none;
}
@@ -1761,34 +1761,7 @@
<div class="nav-right">
<a class="nav-cta-book" href="#story">Book Meeting</a>
<div class="nav-chat" id="nav-chat">
<button
class="nav-chat-toggle"
id="nav-chat-toggle"
aria-label="Toggle chat history"
>
&#128172;
</button>
<input
type="text"
class="nav-chat-input"
id="nav-chat-input"
placeholder="Ask your sales agent"
aria-label="Ask your AI sales agent"
/>
<button
class="nav-chat-send"
id="nav-chat-send"
aria-label="Send message"
>
&#10148;
</button>
</div>
<a class="nav-cta" id="open-modal" href="#">Free Trial</a>
<a class="nav-cta nav-cta-sm open-modal" href="#">Try Free</a>
</div>
</nav>
<div class="chat-panel" id="chat-panel" aria-hidden="true">
<div class="nav-chat-panel chat-panel" id="chat-panel" aria-hidden="true">
<div class="chat-panel-header">
<span class="chat-panel-title">&#128172; Sales Agent</span>
<button
@@ -1800,23 +1773,35 @@
</button>
</div>
<div class="chat-history" id="chat-history"></div>
<div class="chat-input-row">
</div>
<div class="nav-chat-main">
<button
class="nav-chat-toggle"
id="nav-chat-toggle"
aria-label="Toggle chat history"
>
&#128172;
</button>
<input
type="text"
class="chat-input-field"
id="chat-input-field"
placeholder="Type a message..."
aria-label="Chat message"
class="nav-chat-input chat-input-field"
id="nav-chat-input"
placeholder="Ask your sales agent"
aria-label="Ask your AI sales agent"
/>
<button
class="chat-input-send"
id="chat-input-send"
aria-label="Send"
class="nav-chat-send chat-input-send"
id="nav-chat-send"
aria-label="Send message"
>
&#10148;
</button>
</div>
</div>
<a class="nav-cta" id="open-modal" href="#">Free Trial</a>
<a class="nav-cta nav-cta-sm open-modal" href="#">Try Free</a>
</div>
</nav>
<section class="hero" id="home">
<div class="hero-bg-wrap">
@@ -2714,8 +2699,6 @@
var closeBtn = document.getElementById("chat-panel-close");
var navInput = document.getElementById("nav-chat-input");
var navSend = document.getElementById("nav-chat-send");
var panelInput = document.getElementById("chat-input-field");
var panelSend = document.getElementById("chat-input-send");
var busy = false;
var greeted = false;
@@ -2743,6 +2726,8 @@
}
function openPanel() {
var navChat = document.getElementById("nav-chat");
if (navChat) navChat.classList.add("open");
panel.classList.add("open");
panel.setAttribute("aria-hidden", "false");
if (!greeted) {
@@ -2752,10 +2737,13 @@
"Hi! Im your Sales Agent. Ask me about plans, setup, customization, or pricing.",
);
}
panel.offsetHeight;
scrollLog();
}
function closePanel() {
var navChat = document.getElementById("nav-chat");
if (navChat) navChat.classList.remove("open");
panel.classList.remove("open");
panel.setAttribute("aria-hidden", "true");
}
@@ -2769,8 +2757,11 @@
appendMsg: appendMsg,
openSilent: function () {
greeted = true;
var navChat = document.getElementById("nav-chat");
if (navChat) navChat.classList.add("open");
panel.classList.add("open");
panel.setAttribute("aria-hidden", "false");
panel.offsetHeight;
scrollLog();
},
};
@@ -2783,7 +2774,6 @@
appendMsg("user", text);
openPanel();
navInput.value = "";
panelInput.value = "";
var thinkEl = appendMsg("agent", "...");
thinkEl.classList.add("chat-thinking");
@@ -2837,19 +2827,11 @@
if (navSend) navSend.addEventListener("click", function () {
send(navInput.value);
});
if (panelSend) panelSend.addEventListener("click", function () {
send(panelInput.value);
});
if (navInput) {
navInput.addEventListener("keydown", function (e) {
if (e.key === "Enter") send(navInput.value);
});
}
if (panelInput) {
panelInput.addEventListener("keydown", function (e) {
if (e.key === "Enter") send(panelInput.value);
});
}
document.addEventListener("click", function (e) {
var nc = document.getElementById("nav-chat");