feat: Aria chat widget (chat.js + chat.css) — AI assistant on website
This commit is contained in:
James
parent
eae31d55c7
commit
72b5b59fe2
|
|
@ -0,0 +1,227 @@
|
|||
/* Aria chat widget */
|
||||
#aria-launcher {
|
||||
position: fixed;
|
||||
bottom: 28px;
|
||||
right: 28px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#aria-bubble {
|
||||
background: #c9a84c;
|
||||
color: #0a1628;
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 8px 14px;
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
transform: translateX(8px);
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#aria-launcher:hover #aria-bubble {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
#aria-btn {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
background: #c9a84c;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 20px rgba(201,168,76,0.4);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#aria-btn:hover {
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 6px 24px rgba(201,168,76,0.5);
|
||||
}
|
||||
|
||||
#aria-btn svg { width: 24px; height: 24px; }
|
||||
|
||||
#aria-window {
|
||||
position: fixed;
|
||||
bottom: 92px;
|
||||
right: 28px;
|
||||
width: 360px;
|
||||
max-height: 520px;
|
||||
background: #0d1f3c;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 16px 48px rgba(0,0,0,0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
z-index: 9998;
|
||||
overflow: hidden;
|
||||
font-family: 'Inter', sans-serif;
|
||||
transform: scale(0.95) translateY(12px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
#aria-window.open {
|
||||
transform: scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
#aria-header {
|
||||
background: #0a1628;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
padding: 14px 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#aria-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(201,168,76,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#aria-header-text { flex: 1; }
|
||||
#aria-header-name { color: #fff; font-size: 14px; font-weight: 600; }
|
||||
#aria-header-status { color: #4ade80; font-size: 11px; }
|
||||
|
||||
#aria-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #94a3b8;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
line-height: 1;
|
||||
}
|
||||
#aria-close:hover { color: #fff; }
|
||||
|
||||
#aria-messages {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
#aria-messages::-webkit-scrollbar { width: 4px; }
|
||||
#aria-messages::-webkit-scrollbar-track { background: transparent; }
|
||||
#aria-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
|
||||
|
||||
.aria-msg {
|
||||
max-width: 85%;
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.aria-msg.bot {
|
||||
background: rgba(255,255,255,0.06);
|
||||
color: #e2e8f0;
|
||||
align-self: flex-start;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.aria-msg.user {
|
||||
background: #c9a84c;
|
||||
color: #0a1628;
|
||||
align-self: flex-end;
|
||||
border-bottom-right-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.aria-typing {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
padding: 12px 14px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border-radius: 12px;
|
||||
border-bottom-left-radius: 4px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.aria-typing span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #94a3b8;
|
||||
animation: aria-bounce 1.2s infinite;
|
||||
}
|
||||
.aria-typing span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.aria-typing span:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes aria-bounce {
|
||||
0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
|
||||
30% { transform: translateY(-4px); opacity: 1; }
|
||||
}
|
||||
|
||||
#aria-compose {
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
#aria-input {
|
||||
flex: 1;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
padding: 8px 12px;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
resize: none;
|
||||
outline: none;
|
||||
max-height: 100px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#aria-input:focus { border-color: rgba(201,168,76,0.5); }
|
||||
#aria-input::placeholder { color: #475569; }
|
||||
|
||||
#aria-send {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 9px;
|
||||
background: #c9a84c;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
#aria-send:hover { background: #b8973f; }
|
||||
#aria-send:disabled { background: rgba(201,168,76,0.3); cursor: not-allowed; }
|
||||
#aria-send svg { width: 16px; height: 16px; color: #0a1628; }
|
||||
|
||||
@media (max-width: 420px) {
|
||||
#aria-window { right: 12px; left: 12px; width: auto; }
|
||||
#aria-launcher { right: 12px; bottom: 16px; }
|
||||
}
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
const SESSION_KEY = 'aria_session_id';
|
||||
let sessionId = localStorage.getItem(SESSION_KEY) || '';
|
||||
let history = [];
|
||||
let isOpen = false;
|
||||
let isTyping = false;
|
||||
|
||||
const GREETING = "Hi! I'm Aria, the Dealspace assistant. Ask me anything about how Dealspace works, pricing, or security.";
|
||||
|
||||
function init() {
|
||||
// Launcher
|
||||
const launcher = document.createElement('div');
|
||||
launcher.id = 'aria-launcher';
|
||||
launcher.innerHTML = `
|
||||
<div id="aria-bubble">Chat with Aria</div>
|
||||
<button id="aria-btn" aria-label="Chat with Aria">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="#0a1628" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-3 3-3-3z"/>
|
||||
</svg>
|
||||
</button>`;
|
||||
document.body.appendChild(launcher);
|
||||
|
||||
// Chat window
|
||||
const win = document.createElement('div');
|
||||
win.id = 'aria-window';
|
||||
win.setAttribute('role', 'dialog');
|
||||
win.setAttribute('aria-label', 'Chat with Aria');
|
||||
win.innerHTML = `
|
||||
<div id="aria-header">
|
||||
<div id="aria-avatar">✨</div>
|
||||
<div id="aria-header-text">
|
||||
<div id="aria-header-name">Aria</div>
|
||||
<div id="aria-header-status">● Online</div>
|
||||
</div>
|
||||
<button id="aria-close" aria-label="Close chat">×</button>
|
||||
</div>
|
||||
<div id="aria-messages" role="log" aria-live="polite"></div>
|
||||
<div id="aria-compose">
|
||||
<textarea id="aria-input" rows="1" placeholder="Ask me anything..." aria-label="Message"></textarea>
|
||||
<button id="aria-send" aria-label="Send">
|
||||
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>`;
|
||||
document.body.appendChild(win);
|
||||
|
||||
document.getElementById('aria-btn').addEventListener('click', toggleChat);
|
||||
document.getElementById('aria-close').addEventListener('click', closeChat);
|
||||
document.getElementById('aria-send').addEventListener('click', sendMessage);
|
||||
document.getElementById('aria-input').addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendMessage(); }
|
||||
autoResize(this);
|
||||
});
|
||||
document.getElementById('aria-input').addEventListener('input', function () { autoResize(this); });
|
||||
}
|
||||
|
||||
function autoResize(el) {
|
||||
el.style.height = 'auto';
|
||||
el.style.height = Math.min(el.scrollHeight, 100) + 'px';
|
||||
}
|
||||
|
||||
function toggleChat() {
|
||||
isOpen ? closeChat() : openChat();
|
||||
}
|
||||
|
||||
function openChat() {
|
||||
isOpen = true;
|
||||
document.getElementById('aria-window').classList.add('open');
|
||||
document.getElementById('aria-input').focus();
|
||||
if (history.length === 0) {
|
||||
appendMessage('bot', GREETING);
|
||||
}
|
||||
}
|
||||
|
||||
function closeChat() {
|
||||
isOpen = false;
|
||||
document.getElementById('aria-window').classList.remove('open');
|
||||
}
|
||||
|
||||
function appendMessage(role, text) {
|
||||
const el = document.getElementById('aria-messages');
|
||||
const div = document.createElement('div');
|
||||
div.className = 'aria-msg ' + role;
|
||||
div.textContent = text;
|
||||
el.appendChild(div);
|
||||
el.scrollTop = el.scrollHeight;
|
||||
return div;
|
||||
}
|
||||
|
||||
function showTyping() {
|
||||
const el = document.getElementById('aria-messages');
|
||||
const div = document.createElement('div');
|
||||
div.className = 'aria-typing';
|
||||
div.id = 'aria-typing-indicator';
|
||||
div.innerHTML = '<span></span><span></span><span></span>';
|
||||
el.appendChild(div);
|
||||
el.scrollTop = el.scrollHeight;
|
||||
}
|
||||
|
||||
function hideTyping() {
|
||||
const el = document.getElementById('aria-typing-indicator');
|
||||
if (el) el.remove();
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
if (isTyping) return;
|
||||
const input = document.getElementById('aria-input');
|
||||
const text = input.value.trim();
|
||||
if (!text) return;
|
||||
|
||||
input.value = '';
|
||||
input.style.height = 'auto';
|
||||
appendMessage('user', text);
|
||||
history.push({ role: 'user', content: text });
|
||||
|
||||
isTyping = true;
|
||||
document.getElementById('aria-send').disabled = true;
|
||||
showTyping();
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/chat', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ session_id: sessionId, message: text, history })
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
hideTyping();
|
||||
|
||||
if (data.session_id) {
|
||||
sessionId = data.session_id;
|
||||
localStorage.setItem(SESSION_KEY, sessionId);
|
||||
}
|
||||
|
||||
const reply = data.reply || "Sorry, I'm having trouble right now. Please try again.";
|
||||
appendMessage('bot', reply);
|
||||
history.push({ role: 'assistant', content: reply });
|
||||
|
||||
} catch (e) {
|
||||
hideTyping();
|
||||
appendMessage('bot', "Something went wrong. Please try again in a moment.");
|
||||
} finally {
|
||||
isTyping = false;
|
||||
document.getElementById('aria-send').disabled = false;
|
||||
document.getElementById('aria-input').focus();
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Loading…
Reference in New Issue