console.log("versión 1.96");
// SCRIPT PARA EL FRONT 
const chatbot_input = document.getElementById("chatbot-input");
const chatbot_send = document.getElementById("chatbot-send");
const chatbot_container = document.getElementById("chatbot-container");
const chatbot_icon = document.getElementById("chatbot-icon");
const messagesContainer = document.getElementById('chatbot-messages');
const minimise = document.getElementById("minimise");
const close_button = document.getElementById("close");
let conversation = [];  // Variable para almacenar la conversación
const make_id = chatbotData.make_id;

document.addEventListener('DOMContentLoaded', () => {

let mailPubliMostrado = false;

chatbot_icon.addEventListener("click", () => {
  chatbot_container.classList.toggle("hidden_chatbot");
  chatbot_icon.classList.toggle("hidden_chatbot");

  // Solo ejecuta mail_publi() la primera vez que se abre el chatbot
  if (!mailPubliMostrado) {
    setTimeout(() => {
      mail_publi();
      mailPubliMostrado = true;
    }, 5000);
  }
});

    const backendButton = document.getElementById("toggle-backend");
    const makeButton = document.getElementById("toggle-make");

    const toggleMessage = document.getElementById("toggle-message");

    function toggleButton(selectedButton, otherButton) {
        selectedButton.classList.add("active");
        otherButton.classList.remove("active");
    
        // Actualizar mensaje según el botón activo
        if (selectedButton.id === "toggle-backend") {
            toggleMessage.textContent = "Preguntas frecuentes: Resuelve cualquier duda que tengas sobre Avainza";
        } else {
            toggleMessage.textContent = "Asistente de Avainza: Utiliza las funciones del chatbot de Avainza.";
        }
    }


    // Marcar el botón de Make como activo al cargar la página
    toggleButton(makeButton, backendButton);

    // Event Listeners para alternar la selección
    backendButton.addEventListener("click", function () {
        toggleButton(backendButton, makeButton);
    });

    makeButton.addEventListener("click", function () {
        toggleButton(makeButton, backendButton);
    });

close_button.addEventListener("click", () => {
  chatbot_container.classList.add("hidden_chatbot")
});
minimise.addEventListener("click", () => {
  chatbot_icon.classList.toggle("hidden_chatbot")
  chatbot_container.classList.toggle("hidden_chatbot")
});

// Detectar presionar "Enter" en el input y ejecutar la función correcta según la opción seleccionada
// Detectar presionar "Enter" en el input y ejecutar la función correcta según la opción seleccionada
chatbot_input.addEventListener("keypress", (e) => {
  if (e.key === 'Enter') {
    e.preventDefault(); // Prevenir salto de línea
    const input = chatbot_input.value.trim();
    if (!input) return;

    // Verificar qué botón está activo y ejecutar la función correspondiente
    if (backendButton.classList.contains("active")) {
      console.log("📡 Enviando pregunta al backend...");
      enviarPreguntaAlBackend(input); // Envía la pregunta al backend
    } else if (makeButton.classList.contains("active")) {
      console.log("⚙️ Ejecutando acción en Make...");
      enviarConversacionAMake(input); // Envía la conversación a Make
    }
  }
});

// Función para enviar pregunta al backend
function enviarPreguntaAlBackend(input) {
  conversation.push({ role: "user", content: input });

  const userMessage = document.createElement('div');
  userMessage.className = 'pregunta_usuario';
  userMessage.textContent = input;
  messagesContainer.appendChild(userMessage);

  chatbot_input.value = '';

  const typingMessage = document.createElement('div');
  typingMessage.className = 'respuesta_chatbot';
  typingMessage.textContent = 'Escribiendo...';
  messagesContainer.appendChild(typingMessage);
  messagesContainer.scrollTop = messagesContainer.scrollHeight;

  fetch(chatbotData.ajax_url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      action: 'enviar_api_key',
      acting_instructions: chatbotData.acting_instructions,
      company_info: chatbotData.company_info,
      input: JSON.stringify(conversation),
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.success) {
        typingMessage.textContent = data.data.message;
        conversation.push({ role: "assistant", content: data.data.message });
      } else {
        typingMessage.textContent = 'Error al obtener respuesta del backend.';
        console.error('Error:', data.data);
      }
    })
    .catch((error) => {
      typingMessage.textContent = 'Error en la petición al backend.';
      console.error('Error en la petición AJAX:', error);
    });
}

// Función para enviar conversación a Make
function enviarConversacionAMake(input) {
  if (!make_id) {
    console.error("❌ Error: make_id no está definido.");
    addChatbotMessage('❌ Error: Usuario no registrado o sin make_id.');
    return;
  }

  const userMessage = document.createElement('div');
  userMessage.className = 'pregunta_usuario';
  userMessage.textContent = input;
  messagesContainer.appendChild(userMessage);

  chatbot_input.value = '';
  messagesContainer.scrollTop = messagesContainer.scrollHeight;

  addChatbotMessage("Procesando...");

  fetch('https://hook.eu2.make.com/1pt3d4gruv6iv3cb5nwdkt46a729banv', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      clave: make_id,
      conversacion: input
    })
  })
    .then(response => response.json())
    .then(data => {
      console.log('✅ Datos enviados correctamente:', data);
      addChatbotMessage(data.respuesta);
    })
    .catch(error => {
      console.error("❌ Ha habido un error al enviar la conversación a Make:", error);
      addChatbotMessage('❌ Ha habido un error enviando a Make. Inténtalo más tarde.');
    });
}


  const messagesContainer = document.getElementById('chatbot-messages');
  const welcomeMessage = document.getElementById('chatbot-welcome-message');
  const inputField = document.getElementById('chatbot-input');
  const sendButton = document.getElementById('chatbot-send');
  const audio_button = document.getElementById('input_audio');
  
      const sendConversationBtn = document.getElementById("send-conversation");

    if (!sendConversationBtn) {
        console.error("❌ Error: El botón 'send-conversation' no existe en el HTML.");
    } else {
        console.log("✅ Botón 'send-conversation' encontrado correctamente.");

        // Verificar si el usuario está registrado en Avainza
        let usuarioRegistrado = chatbotData.user_id !== undefined && chatbotData.user_id !== null && chatbotData.user_id > 0;

        if (!usuarioRegistrado) {
        
            welcomeMessage.innerHTML = `
            ¡Bienvenido al asistente virtual de Avainza! 👋 Actualmente puedes hacer preguntas generales, pero para acceder a funciones avanzadas como creación de emails, facturas y reuniones, debes iniciar sesión. ✨
        `;

            sendConversationBtn.classList.add("boton-deshabilitado");

            sendConversationBtn.addEventListener("click", function (event) {
                event.preventDefault(); // Evita cualquier acción predeterminada
                addChatbotMessage("⚠️ Para enviar la conversación, primero debes iniciar sesión en Avainza.");
            });
        
        } else {
            console.log("✅ Usuario registrado: habilitando botón.");
            
            // Quitamos la clase deshabilitada y aseguramos que el botón esté activo
            sendConversationBtn.classList.remove("boton-deshabilitado");
        
            sendConversationBtn.addEventListener("click", function () {
                if (!make_id) {
                    console.error("❌ Error: make_id no está definido.");
                    return;
                }
        
                let conversationText = chatbot_input.value.trim();
                console.log("📌 Conversación final antes de enviar a Make:", conversationText);
                chatbot_input.value = '';
                fetch('https://hook.eu2.make.com/1pt3d4gruv6iv3cb5nwdkt46a729banv', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        clave: make_id,
                        conversacion: conversationText
                    })
                })
                .then(response => response.json())
                .then(data => {
                    console.log('✅ Datos enviados correctamente:', data);
                    addChatbotMessage(data.respuesta);
                })
                .catch(error => {
                    console.error("❌ Ha habido un error al enviar la conversación:", error);
                });
            });
        }

    }




  // Botón borrador_correo
  document.getElementById('borrador_correo').addEventListener('click', () => {
    addChatbotMessage(
      "¡Por supuesto! Indica aquí el destinatario y el tema, y yo lo crearé por ti. Si quieres, también puedes indicar detalles como el tono, la longitud..."
    );
    showEmailForm()
  });

  // Botón creador_factura
  document.getElementById('crear_factura').addEventListener('click', () => {
    addChatbotMessage(
      "¡Por supuesto! Por favor, apunta aquí los datos correspondientes, y yo la crearé por ti."
    );
    showInvoiceForm();
  });

  // Botón resumir_reunion
  document.getElementById('resumir_reunion').addEventListener('click', () => {
    addChatbotMessage(
      "¡Por supuesto! Por favor, dime con quién quieres la reunión y si quieres incluir algún detalle para crearla."
    );
    showAgendaForm();
  });

  //Botón para escuchar el micro e imprimir el audio
  audio_button.addEventListener('click', () => {
    ManageAudio();
  });


  // Mostrar formulario de correo
  function showEmailForm() {
    const formHTML = `
                <form id="email-draft-form">
                    <label>
                        Destinatario:
                    </label>
                    <input type="email" id="email-recipient" placeholder="correo@corre.com">
                    <label>
                        Tema:
                        <textarea id="email-subject" placeholder="Tema" required></textarea>
                    </label>
                    <label>
                        Otros detalles:
                        <textarea id="email-details" placeholder="Otros detalles"></textarea>
                    </label>
                    <button type="submit" id="email-submit" disabled>Enviar</button>
                </form>
            `;
   // messagesContainer.innerHTML += formHTML;
    addChatbotMessage(formHTML);
    const emailForm = document.getElementById('email-draft-form');
    const recipientField = document.getElementById('email-recipient');
    const subjectField = document.getElementById('email-subject');
    const submitButton = document.getElementById('email-submit');

    // Activar el botón Enviar solo si los campos obligatorios están llenos
    emailForm.addEventListener('input', () => {
      submitButton.disabled = !recipientField.value || !subjectField.value;
    });

    // Manejar envío del formulario
    emailForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const recipient = recipientField.value;
      const subject = subjectField.value;
      const details = document.getElementById('email-details').value;
      sendEmailDraft({ recipient, subject, details, make_id });
    });
  }
  // Enviar datos a Make.com
  function sendEmailDraft(data) {
    let intencion = "borrador_correo";
    const conversation = {
      destinatario: data.recipient,
      tema: data.subject,
      detalles: data.details
    };

    fetch('https://hook.eu2.make.com/1pt3d4gruv6iv3cb5nwdkt46a729banv', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        clave: make_id,
        intencion: intencion,
        conversacion: conversation
      })
    })
      .then(addChatbotMessage("Procesando...")) 
      .then(response => { return response.text() }) // Leer el cuerpo como texto
      .then(data => {
        // Convierte la respuesta en un objeto JavaScript
        const cleanedData = data.trim();
        const jsonData = JSON.parse(cleanedData);
        console.log(jsonData.respuesta);
        console.log(jsonData);

        // Agregar mensaje al chatbot
        if (jsonData.estado == "ok") {
          addChatbotMessage("¡El borrador que encontrarás a continuación ha sido enviado a tu correo!");
        }
        addChatbotMessage(jsonData.respuesta);
        // addChatbotMessage(`Aquí tienes el contenido del borrador:\n${respuesta}`);
      })
      .catch(error => {
        console.error("Ha habido un error: " + error);
        addChatbotMessage('Ups, algo salió mal. Inténtalo de nuevo más tarde.');
      });
  }

function mail_publi() {
    const formHTML = `
Cómo ahorrar 10 horas a la semana con soluciones de IA inteligentes <br>
Guía práctica con trucos y ejemplos reales para optimizar tu tiempo y el de tu equipo.<br>
👉 Déjanos tu email y te enviaremos esta guía directamente a tu bandeja de entrada para que puedas empezar a implementar estas soluciones hoy mismo.  <br>
<label for="email"></label>
<div class="email-input-container">
    <input type="email" id="email_suscripcion" name="email" required placeholder="correo@dominio.com" />
    <button id="submit_email" disabled>
        ➝
    </button>
</div>
`;

    addChatbotMessage(formHTML);

    const emailInput = document.getElementById("email_suscripcion");
    const submitButton = document.getElementById("submit_email");

    // Habilitar el botón solo cuando el campo tenga un email válido
    emailInput.addEventListener("input", function () {
        if (emailInput.value.trim() === "") {
            submitButton.disabled = true;
            submitButton.classList.add("boton-deshabilitado");
        } else {
            submitButton.disabled = false;
            submitButton.classList.remove("boton-deshabilitado");
        }
    });

document.getElementById("submit_email").addEventListener('click', (e) => {
  e.preventDefault();
  const email = document.getElementById('email_suscripcion').value; // Captura el email en el momento del clic
  const intencion = "email_publi";

  if (!email) {
    addChatbotMessage("Por favor, introduce un email válido.");
    return;
  }
  
  mail_a_make(email, intencion);
  console.log("funciona");
});

function mail_a_make(email, intencion) {
    addChatbotMessage("Procesando...");
    
    fetch('https://hook.eu2.make.com/ganb15efgime3upoja6d8otw2a9gduxh', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        clave: make_id,
        intencion: "email_publi",
        conversacion: email
      })
    })
    .then(() => {
      console.log("Webhook ejecutado correctamente.");
      addChatbotMessage("La guía ha sido enviada correctamente a " + email);
    })
    .catch(error => {
      console.error("Ha habido un error: " + error);
      addChatbotMessage('Ups, algo salió mal. Inténtalo de nuevo más tarde.');
    });
}

  // Añadir mensajes al chat
  function addChatbotMessage(message) {
    const messageElement = document.createElement('div');
    messageElement.className = 'respuesta_chatbot';
    messageElement.innerHTML = message;
    messagesContainer.appendChild(messageElement);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
}

  // Mostrar formulario de factura
  function showInvoiceForm() {
    const formHTML = `
      <form id = "invoice-draft-form">
                <p> Datos de la empresa receptora </p>
                    <label>
                        Empresa:
                        <input type="text" id="invoice-recipient" placeholder="Amazon inc." required />
                    </label>
                    <label>
                        CIF:
                        <input type="text" id="invoice-CIF" placeholder="A12345678" required />
                    </label>
                    <label>
                        Calle:
                        <input type="text" id="invoice-street" placeholder="c/camullas 132" required />
                    </label>
                    <label>
                        CP:
                        <input type="text" id="invoice-CP" placeholder="07070" required />
                    </label>
                    <label>
                        Provincia:
                        <input type="text" id="invoice-province" placeholder="Málaga" required />
                    </label>
                    <label>
                        Nº de Factura:
                        <input type="text" id="invoice-number" placeholder="522" required />
                    </label>
                    <label>
                        Descripción de los servicios:
                        <textarea id="invoice-subject" placeholder="Creación de un nuevo área de recreo" required></textarea>
                    </label>
                    <label>
                        Precio:
                        <input type="number" id="invoice-price" placeholder="1058" required />
                    </label>
                    <label>
                        Fecha:
                        <input type="text" id="invoice-date" placeholder="10/10/2024 // 1 de enero de 2024" required />
                    </label>
                    <label>
                        IVA:
                        <input type="number" id="invoice-IVA" placeholder="21" required />
                    </label>
                    <button type="submit" id="invoice-submit" disabled>Enviar</button>
                </form >
      `;
//    messagesContainer.innerHTML += formHTML;
addChatbotMessage(formHTML);
    const invoiceForm = document.getElementById('invoice-draft-form');
    const recipientField = document.getElementById('invoice-recipient');
    const invoiceCIF = document.getElementById('invoice-CIF');
    const invoiceStreet = document.getElementById('invoice-street');
    const invoiceCP = document.getElementById('invoice-CP');
    const invoiceProvince = document.getElementById('invoice-province');
    const invoiceNumber = document.getElementById('invoice-number');
    const subjectField = document.getElementById('invoice-subject');
    const invoicePrice = document.getElementById('invoice-price');
    const invoiceIVA = document.getElementById('invoice-IVA');
    const invoiceDate = document.getElementById('invoice-date');
    const submitButton = document.getElementById('invoice-submit');

    // Activar el botón Enviar solo si los campos obligatorios están llenos
    invoiceForm.addEventListener('input', () => {
      submitButton.disabled = !recipientField.value || !subjectField.value || !invoiceCIF.value || !invoiceStreet.value || !invoiceCP.value || !invoiceProvince.value || !invoiceNumber.value || !subjectField.value || !invoicePrice.value || !invoiceIVA.value;
    });

    // Manejar envío del formulario
    invoiceForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const empresa = recipientField.value;
      const cif = invoiceCIF.value;
      const calle = invoiceStreet.value;
      const codigo_postal = invoiceCP.value;
      const provincia = invoiceProvince.value;
      const numero_factura = invoiceNumber.value;
      const descripcion = subjectField.value;
      const base = invoicePrice.value;
      const iva = invoiceIVA.value;
      const fecha = invoiceDate.value;
      sendInvoiceDraft({ empresa, cif, calle, codigo_postal, provincia, numero_factura, descripcion, base, iva, fecha });
    });
  }
  // Enviar datos a Make.com
  function sendInvoiceDraft(data) {
    let intencion = "crear_factura";
    const conversation = {
      empresa: data.empresa,
      cif: data.cif,
      codigo_postal: data.codigo_postal,
      provincia: data.provincia,
      numero_factura: data.numero_factura,
      descripcion: data.descripcion,
      base: data.base,
      iva: data.iva,
      fecha: data.fecha
    };

    fetch('https://hook.eu2.make.com/1pt3d4gruv6iv3cb5nwdkt46a729banv', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        clave: make_id,
        intencion: intencion,
        conversacion: conversation
      })
    })
      .then(addChatbotMessage("Procesando...")) 
      .then(response => { return response.text() }) // Leer el cuerpo como texto
      .then(data => {
        // Convierte la respuesta en un objeto JavaScript
        const cleanedData = data.trim();
        const jsonData = JSON.parse(cleanedData);
        console.log(jsonData.respuesta);
        console.log(jsonData);

        // Agregar mensaje al chatbot
        addChatbotMessage(jsonData.respuesta);
        //   addChatbotMessage(`Aquí tienes el contenido de la factura: \n${ respuesta } `);
      })
      .catch(error => {
        console.error("Ha habido un error: " + error);
        addChatbotMessage('Ups, algo salió mal. Inténtalo de nuevo más tarde.');
      });
  }

  // Mostrar formulario de Agenda
  function showAgendaForm() {
    const formHTML = `
      <form id = "agenda-draft-form">
                    <label>
                        Destinatario en formato e-mail:
                        <input type="email" id="agenda-recipient" placeholder="destinatario@destinatario.com" required />
                    </label>

                    <label>
                        Instrucciones adicionales:
                        <textarea id="agenda-details" placeholder="Otros detalles"></textarea>
                    </label>
                    <button type="submit" id="agenda-submit" disabled>Enviar</button>
                </form >
      `;
   addChatbotMessage(formHTML);

    const agendaForm = document.getElementById('agenda-draft-form');
    const recipientField = document.getElementById('agenda-recipient');
    const instructionsField = document.getElementById('agenda-details');
    const submitButton = document.getElementById('agenda-submit');

    // Activar el botón Enviar solo si los campos obligatorios están llenos
    agendaForm.addEventListener('input', () => {
      submitButton.disabled = !recipientField.value;
    });
    // Manejar envío del formulario
    agendaForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const contacto = recipientField.value;
      const reunion = instructionsField.value;
      sendAgendaDraft({ contacto, reunion, make_id });
    });
  }
  // Enviar datos a Make.com
  function sendAgendaDraft(data) {
    let intencion = "agendar_reunion";
    const conversation = {
      contacto: data.contacto,
      reunion: data.reunion
    };

    fetch('https://hook.eu2.make.com/1pt3d4gruv6iv3cb5nwdkt46a729banv', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        clave: make_id,
        intencion: intencion,
        conversacion: conversation
      })
    })
      .then(addChatbotMessage("Procesando...")) 
      .then(response => { return response.text() }) // Leer el cuerpo como texto
      .then(data => {
        // Convierte la respuesta en un objeto JavaScript
        const cleanedData = data.trim();
        const jsonData = JSON.parse(cleanedData);
        console.log(jsonData.respuesta);
        console.log(jsonData);

        // Agregar mensaje al chatbot
        addChatbotMessage(jsonData.respuesta);
        // addChatbotMessage(`Aquí tienes el contenido del borrador: \n${ respuesta } `);
      })
      .catch(error => {
        console.error("Ha habido un error: " + error);
        addChatbotMessage('Ups, algo salió mal. Inténtalo de nuevo más tarde.');
      });
  }

  // Añadir mensajes al chat
  function addChatbotMessage(message) {
    const messageElement = document.createElement('div');
    messageElement.className = 'respuesta_chatbot';
    messageElement.innerHTML = message;
    messagesContainer.appendChild(messageElement);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
  }
});

// Función para enviar el mensaje del usuario y mostrar "escribiendo..."
chatbot_send.addEventListener('click', async () => {
  const input = chatbot_input.value.trim();
  if (!input) return;
  
  // Guardar el mensaje del usuario en el historial
  conversation.push({ role: "user", content: input });
  
  // Mostrar mensaje del usuario inmediatamente
  const userMessage = document.createElement('div');
  userMessage.className = 'pregunta_usuario';
  userMessage.textContent = input;
  messagesContainer.appendChild(userMessage);

  // Limpiar el campo de entrada
  chatbot_input.value = '';
  messagesContainer.scrollTop = messagesContainer.scrollHeight;

  // Mostrar el mensaje de "escribiendo..."
  const typingMessage = document.createElement('div');
  typingMessage.className = 'respuesta_chatbot';
  typingMessage.textContent = 'Escribiendo...';
  messagesContainer.appendChild(typingMessage);
  messagesContainer.scrollTop = messagesContainer.scrollHeight;

  // Enviar el mensaje al servidor (AJAX)
  fetch(chatbotData.ajax_url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: new URLSearchParams({
      action: 'enviar_api_key', // Nombre de la acción AJAX en PHP
      acting_instructions: chatbotData.acting_instructions, // Instrucciones del chatbot
      company_info: chatbotData.company_info, // Información de la empresa
      input: JSON.stringify(conversation), // Enviar toda la conversación
    }),
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.success) {
        console.log(data);  // Muestra toda la respuesta para depuración
        console.log(data.data);  // Mensaje de éxito del backend
        // Reemplazar el mensaje de "escribiendo..." con la respuesta del chatbot
        typingMessage.textContent = data.data.message;  // Accede correctamente al mensaje
        conversation.push({ role: "assistant", content: data.data.message }); // Guardar respuesta en historial
      } else {
        console.error('Error:', data.data);  // Muestra el error si no es exitoso
      }
    })
    .catch((error) => console.error('Error en la petición AJAX:', error));
});



// Función para gestionar la entrada de audio
function ManageAudio() {
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  const languageSelector = document.getElementById('language-selector');
  recognition.lang = languageSelector.value; // Configura el idioma según el seleccionado
  recognition.interimResults = false; // Solo resultados finales
  recognition.maxAlternatives = 1; // Una alternativa principal

  recognition.start(); // Inicia el reconocimiento de voz

  recognition.onstart = () => {
    console.log("Escuchando...");
    chatbot_input.value = "Escuchando...habla ahora";
  };

  recognition.onspeechend = () => {
    console.log("Deteniendo escucha...");
    recognition.stop();
  };

  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript; // Obtiene el texto transcrito
    console.log("Texto reconocido:", transcript);
    //addChatbotMessage(`Has dicho: "${transcript}"`);
    chatbot_input.value = transcript; // Coloca el texto transcrito en el input
    //chatbot_send.click(); // Simula el envío del mensaje
  };

  recognition.onerror = (event) => {
    console.error("Error en el reconocimiento de voz:", event.error);
    addChatbotMessage("No pude entender lo que dijiste. Inténtalo de nuevo.");
  };

}

<!--// Función para enviar los datos al backend-->
<!--function enviarEmail() {-->
<!--  // Obtener el valor del email ingresado-->
<!--  const email = document.getElementById('email_suscripcion').value; -->

<!--fetch(chatbotData.ajax_url, {-->
<!--method: 'POST', -->
<!--headers: {-->
<!--      'Content-Type': 'application/x-www-form-urlencoded', -->
<!--    }, -->
<!--body: new URLSearchParams({-->
<!--action: 'guardar_email_usuario', -->
<!--email: email, // El email que el usuario acaba de introducir-->
<!--    }), -->
<!--  })-->
<!--    .then((response) => response.json())-->
<!--    .then((data) => {-->
<!--      if (data.success) {-->
<!--console.log('Email guardado correctamente'); -->
<!--alert('Gracias por suscribirte. Hemos guardado tu email.'); -->
<!--      } else {-->
<!--console.error('Error guardando el email:', data.data); -->
<!--alert('Hubo un error al guardar tu email. Por favor, inténtalo de nuevo.'); -->
<!--      } -->
<!--    })-->
<!--    .catch((error) => {-->
<!--console.error('Error en la petición AJAX:', error); -->
<!--alert('Hubo un problema con la solicitud. Intenta nuevamente.'); -->
<!--    }); -->
<!--}-->

<!--// Función para enviar los datos al backend-->
<!--function enviarEmail() {-->
<!--  // Obtener el valor del email ingresado-->
<!--  const email = document.getElementById('email_suscripcion').value; -->

<!--fetch(chatbotData.ajax_url, {-->
<!--method: 'POST', -->
<!--headers: {-->
<!--      'Content-Type': 'application/x-www-form-urlencoded', -->
<!--    }, -->
<!--body: new URLSearchParams({-->
<!--action: 'guardar_email_usuario', -->
<!--email: email, // El email que el usuario acaba de introducir-->
<!--    }), -->
<!--  })-->
<!--    .then((response) => response.json())-->
<!--    .then((data) => { -->
<!--      if (data.success) {-->
<!--console.log('Email guardado correctamente'); -->
<!--alert('Gracias por suscribirte. Hemos guardado tu email.'); -->
<!--      } else {-->
<!--console.error('Error guardando el email:', data.data); -->
<!--alert('Hubo un error al guardar tu email. Por favor, inténtalo de nuevo.'); -->
<!--      } -->
<!--    })-->
<!--    .catch((error) => {   -->
<!--console.error('Error en la petición AJAX:', error); -->
<!--alert('Hubo un problema con la solicitud. Intenta nuevamente.'); -->
<!--    }); -->
<!--}-->

<!--  const response = await fetch('https://api.openai.com/v1/chat/completions', {-->
<!--method: 'POST', -->
<!--headers: {-->
<!--      'Content-Type': 'application/json', -->
<!--      'Authorization': 'Bearer 1234'-->
<!--    }, -->
<!--body: JSON.stringify({-->
<!--model: "gpt-4", // Cambia por el modelo que uses-->
<!--messages: [-->
<!--{-->
<!--role: "system", -->
<!--content: `${ chatbotData.company_info }  ${ chatbotData.acting_instructions } `-->
<!--        }, -->
<!--{-->
<!--role: "user", -->
<!--content: `${ input } `-->
<!--        }-->
<!--      ], -->
<!--temperature: 0.7-->
<!--    })-->
<!--  }); -->
<!--  if (response.ok) {-->
<!--    const data = await response.json(); -->
<!--console.log(data); -->
<!--    // Reemplazar el mensaje de "escribiendo..." con la respuesta del chatbot-->
<!--typingMessage.textContent = data.choices[0].message.content; // Asegúrate de que el servidor devuelva 'response'-->
<!--conversation.push("Chatbot: " + typingMessage.textContent); -->
<!--  } else {-->
<!--typingMessage.textContent = 'Error en la respuesta del servidor'; -->
<!--  } -->
<!--messagesContainer.scrollTop = messagesContainer.scrollHeight; -->
<!--}); -->

<!--Función para enviar la conversación al webhook-->
<!--document.getElementById('send-conversation').addEventListener('click', function () {-->
<!--let clave = "clave: aquí iría la clave";  // Placeholder para la clave-->
<!--let conversationText = conversation.join("\n");  // Convertir la conversación a un string-->
<!--  // Enviar los datos al webhook-->
<!--fetch('https://hook.eu2.make.com/1pt3d4gruv6iv3cb5nwdkt46a729banv', {-->
<!--method: 'POST', -->
<!--headers: {-->
<!--      'Content-Type': 'application/json'-->
<!--    }, -->
<!--body: JSON.stringify({-->
<!--clave: make_id, -->
<!--conversacion: conversation-->
<!--    })-->
<!--  })-->
<!--    .then(response => { response.json(), console.log(response) })-->
<!--    .then(data => {-->
<!--console.log('Datos enviados:', conversation); -->
<!--    })-->
<!--    .catch(error => {-->
<!--console.error("ha habido un error: " + error); -->
<!--    }); -->
<!--}); -->