script.js

// Hugging Face Router Chat Endpoint
const API_URL = "https://router.huggingface.co/v1/chat/completions";
const MODEL_NAME = "openai/gpt-oss-20b:fastest";

async function sendMessage() {
  const apiKeyInput = document.getElementById("api-key-input");
  const userInput = document.getElementById("user-input");
  
  const apiKey = apiKeyInput ? apiKeyInput.value.trim() : "";
  const text = userInput ? userInput.value.trim() : "";

  if (!apiKey) {
    alert("Please enter a valid Hugging Face API key.");
    return;
  }
  if (!text) return;

  // Render user prompt in chat
  appendMessage(text, "user-message");
  userInput.value = "";

  // Show status indicator
  const loadingMessage = appendMessage("Thinking...", "bot-message");

  try {
    const response = await fetch(API_URL, {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${apiKey}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        model: MODEL_NAME,
        messages: [{ role: "user", content: text }],
        max_tokens: 300
      })
    });

    const data = await response.json();

    if (response.ok) {
      // Parse OpenAI-style chat response format
      const reply = data.choices?.[0]?.message?.content || "No response generated.";
      loadingMessage.textContent = reply;
    } else {
      loadingMessage.textContent = `Error (${response.status}): ${data.error?.message || data.error || "Request failed"}`;
    }
  } catch (error) {
    loadingMessage.textContent = "Network error. Please check your browser connection or API key.";
    console.error("Chatbot API Error:", error);
  }
}

function appendMessage(text, className) {
  const chatBox = document.getElementById("chat-box");
  const messageDiv = document.createElement("div");
  messageDiv.classList.add("message", className);
  messageDiv.textContent = text;
  chatBox.appendChild(messageDiv);
  chatBox.scrollTop = chatBox.scrollHeight;
  return messageDiv;
}