From f6ed5a1032fc4749974dc0e18c67222860b0b197 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Wed, 10 Dec 2025 12:39:20 -0600
Subject: [PATCH] =?UTF-8?q?Fix:=20Corregir=20integraci=C3=B3n=20del=20widg?=
 =?UTF-8?q?et=20de=20chat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Usar nombre correcto del web component: chat-widget (no agents-chat-widget)
- Usar atributos correctos: api-url, agent-id, user-id (no server-url, agent-slug, external-user-id)
- Insertar widget dinámicamente en el DOM con posición flotante
---
 app/plugins/agents-widget.client.ts | 66 ++++++++++++++++-------------
 1 file changed, 37 insertions(+), 29 deletions(-)

diff --git a/app/plugins/agents-widget.client.ts b/app/plugins/agents-widget.client.ts
index 9a7c200..d94fb43 100644
--- a/app/plugins/agents-widget.client.ts
+++ b/app/plugins/agents-widget.client.ts
@@ -1,37 +1,45 @@
-declare global {
-  interface Window {
-    AgentsChatWidget?: {
-      init: (config: {
-        serverUrl: string
-        agentSlug: string
-        appId: string
-        externalUserId?: string
-        position?: 'bottom-right' | 'bottom-left'
-        theme?: 'dark' | 'light'
-        primaryColor?: string
-      }) => void
-    }
-  }
-}
-
 export default defineNuxtPlugin(() => {
-  const initWidget = () => {
-    if (window.AgentsChatWidget) {
-      window.AgentsChatWidget.init({
-        serverUrl: 'https://gamdias.nucleoriofrio.com',
-        agentSlug: 'whatsapp-agent',
-        appId: 'whatsapp-app',
-        externalUserId: 'whatsapp-user',
-        position: 'bottom-right',
-        theme: 'dark',
-        primaryColor: '#25D366'
-      })
+  const createWidget = () => {
+    // Verificar que el custom element esté registrado
+    if (!customElements.get('chat-widget')) {
+      // Reintentar en 100ms si aún no está listo
+      setTimeout(createWidget, 100)
+      return
     }
+
+    // Verificar que no exista ya
+    if (document.querySelector('chat-widget')) {
+      return
+    }
+
+    // Crear el widget flotante
+    const widget = document.createElement('chat-widget')
+    widget.setAttribute('api-url', 'https://gamdias.nucleoriofrio.com')
+    widget.setAttribute('agent-id', 'whatsapp-agent')
+    widget.setAttribute('app-id', 'whatsapp-app')
+    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;
+    `
+
+    document.body.appendChild(widget)
   }
 
   if (document.readyState === 'complete') {
-    setTimeout(initWidget, 100)
+    setTimeout(createWidget, 100)
   } else {
-    window.addEventListener('load', () => setTimeout(initWidget, 100))
+    window.addEventListener('load', () => setTimeout(createWidget, 100))
   }
 })