From b8541503f1edad89b8db412bfe4a90a10a5c6a59 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 10 Dec 2025 16:38:08 -0600
Subject: [PATCH] Style: Actualizar widget de chat a nuevo estilo flotante
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Usar contenedor .floating-widget como en la implementación de referencia
- El web component ahora maneja internamente el botón flotante y ventana de chat
- Aplicar color primario de WhatsApp (#25D366) via CSS variable --chat-primary
---
 app/plugins/agents-widget.client.ts | 32 ++++++++++++++---------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/app/plugins/agents-widget.client.ts b/app/plugins/agents-widget.client.ts
index 6f23a22..4ca78c4 100644
--- a/app/plugins/agents-widget.client.ts
+++ b/app/plugins/agents-widget.client.ts
@@ -8,11 +8,21 @@ export default defineNuxtPlugin(() => {
     }
 
     // Verificar que no exista ya
-    if (document.querySelector('chat-widget')) {
+    if (document.querySelector('.floating-widget')) {
       return
     }
 
-    // Crear el widget flotante
+    // Crear contenedor flotante
+    const container = document.createElement('div')
+    container.className = 'floating-widget'
+    container.style.cssText = `
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      z-index: 9999;
+    `
+
+    // Crear el widget
     const widget = document.createElement('chat-widget')
     widget.setAttribute('api-url', 'https://gamdias.nucleoriofrio.com')
     widget.setAttribute('agent-id', '70b046fe-0665-46b3-b896-f3c89776999a')
@@ -20,21 +30,11 @@ export default defineNuxtPlugin(() => {
     widget.setAttribute('user-id', 'whatsapp-user')
     widget.setAttribute('title', 'Asistente WhatsApp')
 
-    // Estilo flotante en esquina inferior derecha
-    widget.style.cssText = `
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      z-index: 9999;
-      width: 400px;
-      height: 600px;
-      max-height: 80vh;
-      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
-      border-radius: 12px;
-      overflow: hidden;
-    `
+    // Aplicar color primario de WhatsApp via CSS variable
+    widget.style.setProperty('--chat-primary', '#25D366')
 
-    document.body.appendChild(widget)
+    container.appendChild(widget)
+    document.body.appendChild(container)
   }
 
   if (document.readyState === 'complete') {