Teste 123

<script>
// GoJohnny Widget - Código completo e autônomo
(function() {
  const agentId = "cb6cd61b-b1d2-4368-b1c8-b211a2eebbc9";
  const settings = {
    primaryColor: "#6366f1",
    position: "right",
    size: "medium",
    iconType: "chat",
    title: "Rods",
    greetingMessage: "Olá! Como posso ajudar você hoje?",
    autoOpen: false,
    autoOpenDelay: 5,
    showBranding: true
  };

  // Verificar se o widget já foi carregado
  if (window.goJohnnyWidgetLoaded) return;
  window.goJohnnyWidgetLoaded = true;

  // Criar elemento iframe
  const iframe = document.createElement('iframe');
  iframe.id = 'gojohnny-widget-iframe';
  iframe.style.cssText = `
    position: fixed;
    border: none;
    transition: all 0.3s ease;
    width: 350px;
    height: 600px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    z-index: 999999;
    display: none;
    ${settings.position === 'right' ? 'right: 20px;' : 'left: 20px;'}
    bottom: 80px;
  `;
  
  iframe.allow = 'microphone';
  iframe.src = `${window.location.protocol}//${window.location.hostname === 'localhost' ? 'localhost:5173' : 'gojohnny.ai'}/widget/${agentId}`;
  
  // Criar botão do widget
  const button = document.createElement('div');
  button.id = 'gojohnny-widget-button';
  button.style.cssText = `
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: ${settings.primaryColor};
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 999999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    ${settings.position === 'right' ? 'right: 20px;' : 'left: 20px;'}
    bottom: 20px;
  `;
  
  button.addEventListener('mouseenter', function() {
    this.style.transform = 'scale(1.1)';
    this.style.boxShadow = '0 6px 15px rgba(0, 0, 0, 0.3)';
  });
  
  button.addEventListener('mouseleave', function() {
    this.style.transform = 'scale(1)';
    this.style.boxShadow = '0 4px 10px rgba(0, 0, 0, 0.2)';
  });
  
  // Ícones SVG
  const icons = {
    chat: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>',
    message: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z"></path><path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1"></path></svg>',
    help: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path></svg>',
    bot: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"></rect><circle cx="12" cy="5" r="2"></circle><path d="M12 7v4"></path><line x1="8" y1="16" x2="8" y2="16"></line><line x1="16" y1="16" x2="16" y2="16"></line></svg>',
    close: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>'
  };
  
  const chatIcon = icons[settings.iconType] || icons.chat;
  button.innerHTML = chatIcon;
  
  // Estado do widget
  let isOpen = false;
  
  // Função para alternar o estado do widget
  function toggleWidget() {
    isOpen = !isOpen;
    
    if (isOpen) {
      iframe.style.display = 'block';
      button.innerHTML = icons.close;
      
      // Animar entrada
      setTimeout(() => {
        iframe.style.opacity = '1';
        iframe.style.transform = 'translateY(0)';
      }, 10);
      
      // Focar no iframe para melhor acessibilidade
      setTimeout(() => {
        iframe.focus();
      }, 300);
    } else {
      iframe.style.opacity = '0';
      iframe.style.transform = 'translateY(10px)';
      button.innerHTML = chatIcon;
      
      setTimeout(() => {
        iframe.style.display = 'none';
      }, 300);
    }
  }
  
  // Adicionar evento de clique
  button.addEventListener('click', toggleWidget);
  
  // Adicionar elementos à página
  document.body.appendChild(button);
  document.body.appendChild(iframe);
  
  // Abrir automaticamente se configurado
  if (settings.autoOpen) {
    setTimeout(() => {
      if (!isOpen) toggleWidget();
    }, settings.autoOpenDelay * 1000);
  }
  
  // Adicionar estilos para animações
  const style = document.createElement('style');
  style.textContent = `
    #gojohnny-widget-iframe {
      opacity: 0;
      transform: translateY(10px);
    }
    
    @media (max-width: 480px) {
      #gojohnny-widget-iframe {
        width: 100vw !important;
        height: 100vh !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        border-radius: 0 !important;
      }
    }
  `;
  document.head.appendChild(style);
  
  // Listener para fechar com ESC
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && isOpen) {
      toggleWidget();
    }
  });
  
  // Listener para mensagens do iframe
  window.addEventListener('message', function(event) {
    if (event.data === 'closeWidget') {
      if (isOpen) toggleWidget();
    }
  });
  
  // Log de sucesso
  console.log('GoJohnny Widget carregado com sucesso!');
  
  // Expor função global para controle programático
  window.goJohnnyWidget = {
    open: function() { if (!isOpen) toggleWidget(); },
    close: function() { if (isOpen) toggleWidget(); },
    toggle: toggleWidget,
    isOpen: function() { return isOpen; }
  };
})();
</script>