// import { Client } from "@gradio/client";
import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";

document.addEventListener("DOMContentLoaded", async () => {
  const messagesDiv = document.getElementById("messages");
  const chatForm = document.getElementById("chat-form");
  const userInput = document.getElementById("user-input");

  const client = await Client.connect("nroggendorff/not-my-emma");

  chatForm.addEventListener("submit", async (e) => {
    e.preventDefault();
    const userMessage = userInput.value;
    if (!userMessage) return;

    addMessage(userMessage, "user");

    const result = await client.predict("/chat", {
      message: userMessage
    });

    addMessage(result.data, "ai");
    userInput.value = "";
  });

  function addMessage(message, sender) {
    const messageElement = document.createElement("div");
    messageElement.classList.add("message", sender);
    messageElement.textContent = message;
    messagesDiv.appendChild(messageElement);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
  }
});