client-example.js

/**
 * Ejemplo de código para integrar BITER en justbyte.es
 * Este archivo muestra cómo implementar la comunicación con la API de BITER
 * desde tu sitio web.
 */

// URL de tu Hugging Face Space
const BITER_API_URL = "https://tu-usuario-huggingface.hf.space/generate"

// Elementos del DOM
const chatForm = document.getElementById("chat-form")
const userInput = document.getElementById("user-input")
const chatMessages = document.getElementById("chat-messages")
const loadingIndicator = document.getElementById("loading-indicator")

// Manejar envío del formulario
chatForm.addEventListener("submit", async (e) => {
  e.preventDefault()

  // Obtener mensaje del usuario
  const userMessage = userInput.value.trim()
  if (!userMessage) return

  // Limpiar input
  userInput.value = ""

  // Mostrar mensaje del usuario
  appendMessage("user", userMessage)

  // Mostrar indicador de carga
  loadingIndicator.style.display = "block"

  try {
    // Enviar solicitud a la API de BITER
    const response = await fetch(BITER_API_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        message: userMessage,
      }),
    })

    // Verificar si la respuesta es exitosa
    if (!response.ok) {
      throw new Error("Error en la respuesta de la API")
    }

    // Obtener datos de la respuesta
    const data = await response.json()

    // Mostrar respuesta de BITER
    appendMessage("assistant", data.response)
  } catch (error) {
    console.error("Error:", error)
    appendMessage(
      "system",
      "Lo siento, ha ocurrido un error al conectar con BITER. Por favor, intenta de nuevo más tarde.",
    )
  } finally {
    // Ocultar indicador de carga
    loadingIndicator.style.display = "none"
  }
})

// Función para añadir mensajes al chat
function appendMessage(role, content) {
  const messageDiv = document.createElement("div")
  messageDiv.className = `message ${role}-message`

  // Crear avatar
  const avatar = document.createElement("div")
  avatar.className = "avatar"

  // Icono según el rol
  if (role === "user") {
    avatar.innerHTML = "👤"
  } else if (role === "assistant") {
    avatar.innerHTML = "🤖"
  } else {
    avatar.innerHTML = "⚠️"
  }

  // Crear contenido del mensaje
  const messageContent = document.createElement("div")
  messageContent.className = "message-content"
  messageContent.textContent = content

  // Añadir elementos al mensaje
  messageDiv.appendChild(avatar)
  messageDiv.appendChild(messageContent)

  // Añadir mensaje al contenedor
  chatMessages.appendChild(messageDiv)

  // Scroll al último mensaje
  chatMessages.scrollTop = chatMessages.scrollHeight
}