Skip to content

Enhance Chatbot Visual Design and CSS Architecture #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MLD-web wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhance Chatbot Visual Design and CSS Architecture #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 114 additions & 0 deletions chatbot.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,3 +45,117 @@
.animate-float-up {
animation: float-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ====== CONTENEDOR GENERAL ====== */
.chat-widget {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 9999;
}

/* ====== CAJA CHAT ====== */
.chat-container {
width: min(92vw, 420px);
border-radius: 18px;
overflow: hidden;
background: rgba(18, 18, 18, 0.95);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
}

/* Desktop: un poco más ancho y con mejor presencia */
@media (min-width: 1024px) {
.chat-container {
width: 460px;
}
.chat-widget {
right: 28px;
bottom: 28px;
}
}

/* ====== HEADER ====== */
.chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.03);
}

.chat-header-left {
display: flex;
gap: 10px;
align-items: center;
}

.chat-status-dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: #29d366; /* verde online */
box-shadow: 0 0 0 3px rgba(41, 211, 102, 0.15);
}

.chat-title {
font-weight: 700;
font-size: 15px;
color: rgba(255, 255, 255, 0.95);
line-height: 1.1;
}

.chat-subtitle {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.2px;
}

/* ====== MENSAJES ====== */
.chat-body {
padding: 14px 14px 10px 14px;
}

.chat-bubble {
padding: 14px 14px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.9);
font-size: 15px;
line-height: 1.45;
}

/* ====== QUICK ACTIONS ====== */
.quick-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
padding: 12px 14px 14px 14px;
}

.quick-actions button {
width: 100%;
padding: 12px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.03);
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.quick-actions button:hover {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.18);
}

/* Desktop: 2 columnas para que no se vea "móvil" */
@media (min-width: 1024px) {
.quick-actions {
grid-template-columns: 1fr 1fr;
}
}
44 changes: 23 additions & 21 deletions chatbot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
const BRAND_COLOR = "#ff6600";

const chatbotHTML = `
<div id="chatbot-widget" class="fixed bottom-6 right-6 z-[9999] flex flex-col items-end font-sans">
<div id="chatbot-widget" class="chat-widget font-sans">
<!-- Panel -->
<div id="chatbot-panel" class="hidden w-[90vw] md:w-[400px] max-h-[600px] bg-[#0a0a0a] border border-white/10 rounded-3xl shadow-2xl flex flex-col overflow-hidden mb-4 animate-float-up text-white">
<div id="chatbot-panel" class="chat-container hidden flex flex-col animate-float-up text-white">
<!-- Header -->
<div class="bg-gradient-to-r from-black to-[#111] p-6 border-b border-white/10 flex justify-between items-center">
<div class="flex items-center gap-3">
<div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
<div class="chat-header">
<div class="chat-header-left">
<div class="chat-status-dot animate-pulse"></div>
<div>
<h3 class="text-white font-bold text-lg leading-none">Asistente MLD</h3>
<p class="text-gray-400 text-[10px] mt-1 uppercase tracking-widest font-bold">Partner Estratégico</p>
<h3 class="chat-title">Asistente MLD</h3>
<p class="chat-subtitle uppercase tracking-widest font-bold">Partner Estratégico</p>
</div>
</div>
<button id="close-chat" class="text-gray-400 hover:text-white transition p-2">
Expand All @@ -22,17 +22,17 @@
</div>

<!-- Messages -->
<div id="chatbot-messages" class="flex-1 overflow-y-auto p-6 space-y-4 min-h-[350px] scrollbar-hide flex flex-col">
<div class="bg-white/5 text-gray-200 p-4 rounded-2xl rounded-tl-none max-w-[90%] text-sm leading-relaxed mb-2 self-start border border-white/5">
<div id="chatbot-messages" class="chat-body flex-1 overflow-y-auto min-h-[350px] scrollbar-hide flex flex-col">
<div class="chat-bubble self-start mb-2">
Hola 👋 Soy el asistente de MLD. ¿Qué necesitas hoy: cotizar un servicio, elegir la mejor opción para tu negocio o mejorar tu presencia web?
</div>
</div>

<!-- Quick Actions -->
<div id="chatbot-actions" class="p-4 flex flex-wrap gap-2 border-t border-white/5 bg-black/50">
<button class="quick-action bg-white/5 hover:bg-orange-500/20 text-gray-300 hover:text-white px-4 py-2 rounded-full text-xs transition border border-white/10" data-msg="Quiero cotizar un servicio">Quiero cotizar</button>
<button class="quick-action bg-white/5 hover:bg-orange-500/20 text-gray-300 hover:text-white px-4 py-2 rounded-full text-xs transition border border-white/10" data-msg="¿Qué servicio me conviene?">¿Qué me conviene?</button>
<button class="quick-action bg-white/5 hover:bg-green-500/20 text-gray-300 hover:text-white px-4 py-2 rounded-full text-xs transition border border-white/10" data-msg="Hablar por WhatsApp">WhatsApp Directo</button>
<div id="chatbot-actions" class="quick-actions border-t border-white/5">
<button class="quick-action" data-msg="Quiero cotizar un servicio">Quiero cotizar</button>
<button class="quick-action" data-msg="¿Qué servicio me conviene?">¿Qué me conviene?</button>
<button class="quick-action" data-msg="Hablar por WhatsApp">WhatsApp Directo</button>
</div>

<!-- Input -->
Expand Down Expand Up @@ -101,11 +101,12 @@
function addMessage(role, text) {
const div = document.createElement("div");
if (role === "user") {
div.className = "text-white p-4 rounded-2xl rounded-tr-none max-w-[85%] text-sm leading-relaxed self-end ml-auto mb-4 border border-orange-500/20 shadow-lg shadow-orange-500/5";
div.className = "chat-bubble self-end ml-auto mb-4 border border-orange-500/20 shadow-lg shadow-orange-500/5";
div.style.backgroundColor = "rgba(255, 102, 0, 0.15)";
div.style.color = "#fff";
div.textContent = text;
} else {
div.className = "bg-white/5 text-gray-200 p-4 rounded-2xl rounded-tl-none max-w-[90%] text-sm leading-relaxed mb-4 self-start border border-white/5";
div.className = "chat-bubble self-start mb-4";
div.innerHTML = linkify(text);
}
messagesEl.appendChild(div);
Expand All @@ -114,7 +115,7 @@

function addWhatsAppButton(messageText, url) {
const wrap = document.createElement("div");
wrap.className = "bg-white/5 text-gray-200 p-4 rounded-2xl rounded-tl-none max-w-[90%] text-sm leading-relaxed mb-4 self-start border border-white/5";
wrap.className = "chat-bubble self-start mb-4";

const p = document.createElement("div");
p.className = "mb-3";
Expand Down Expand Up @@ -190,8 +191,9 @@
}

const thinkingDiv = document.createElement("div");
thinkingDiv.className = "bg-white/5 text-gray-500 p-4 rounded-2xl rounded-tl-none max-w-[85%] text-xs italic animate-pulse mb-4 self-start flex items-center gap-2";
thinkingDiv.innerHTML = `<div class="w-1.5 h-1.5 bg-orange-500 rounded-full"></div> Consultando mi cerebro estratégico...`;
thinkingDiv.className = "chat-bubble self-start mb-4 text-xs italic animate-pulse flex items-center gap-2";
thinkingDiv.style.color = "rgba(255, 255, 255, 0.55)";
thinkingDiv.innerHTML = `<div class="chat-status-dot !bg-[#ff6600]"></div> Consultando mi cerebro estratégico...`;
messagesEl.appendChild(thinkingDiv);
messagesEl.scrollTop = messagesEl.scrollHeight;

Expand Down Expand Up @@ -240,13 +242,13 @@
console.error("Chatbot Error:", err);

const errorDiv = document.createElement("div");
errorDiv.className = "bg-white/5 text-gray-200 p-4 rounded-2xl rounded-tl-none max-w-[90%] text-sm leading-relaxed mb-4 self-start border border-red-500/20";
errorDiv.className = "chat-bubble self-start mb-4 border border-red-500/20";
errorDiv.innerHTML = `
<p class="mb-1 text-red-400 font-bold">Error de conexión</p>
<p class="mb-3 text-xs text-gray-400">${escapeHtml(String(err).slice(0, 150))}</p>
<div class="flex flex-col gap-2">
<button onclick="location.reload()" class="bg-white/10 hover:bg-white/20 py-2 px-4 rounded-xl text-xs transition">Reintentar conexión</button>
<a href="${WHATSAPP_LINK}" target="_blank" class="bg-[#25D366] text-black font-bold py-2 px-4 rounded-xl text-xs text-center">Ir a WhatsApp Directo</a>
<button onclick="location.reload()" class="bg-white/10 hover:bg-white/20 py-2 px-4 rounded-xl text-xs transition font-bold">Reintentar conexión</button>
<a href="${WHATSAPP_LINK}" target="_blank" class="bg-[#25D366] text-black font-bold py-2 px-4 rounded-xl text-xs text-center no-underline">Ir a WhatsApp Directo</a>
</div>
`;
messagesEl.appendChild(errorDiv);
Expand Down