src/App.js

import { useState } from "react";
import "./App.css";

function App() {
  const [message, setMessage] = useState("");
  const [messages, setMessages] = useState([]);
  const [loading, setLoading] = useState(false);

  const sendMessage = async () => {
    if (!message.trim() || loading) return;

    const userMessage = {
      role: "user",
      content: message,
    };

    const updatedMessages = [...messages, userMessage];

    setMessages(updatedMessages);
    setMessage("");
    setLoading(true);

    try {
      const response = await fetch(
        "https://router.huggingface.co/v1/chat/completions",
        {
          method: "POST",
          headers: {
            Authorization: `Bearer ${process.env.REACT_APP_HF_TOKEN}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            model: "openai/gpt-oss-20b",
            messages: updatedMessages,
            max_tokens: 512,
            temperature: 0.7,
          }),
        }
      );

      if (!response.ok) {
        const error = await response.text();
        throw new Error(error);
      }

      const data = await response.json();

      const botMessage = {
        role: "assistant",
        content:
          data.choices?.[0]?.message?.content ||
          "Sorry, I couldn't generate a response.",
      };

      setMessages((prev) => [...prev, botMessage]);
    } catch (error) {
      console.error(error);

      setMessages((prev) => [
        ...prev,
        {
          role: "assistant",
          content: "❌ Error: Unable to connect to Hugging Face API.",
        },
      ]);
    } finally {
      setLoading(false);
    }
  };

  const handleKeyDown = (e) => {
    if (e.key === "Enter") {
      sendMessage();
    }
  };

  return (
    <div
      style={{
        width: "700px",
        margin: "40px auto",
        fontFamily: "Arial",
      }}
    >
      <h2>🤖 AI Chatbot</h2>

      <div
        style={{
          height: "450px",
          border: "1px solid #ccc",
          borderRadius: "8px",
          overflowY: "auto",
          padding: "15px",
          marginBottom: "15px",
          background: "#f8f8f8",
        }}
      >
        {messages.length === 0 && (
          <p style={{ color: "gray" }}>Start a conversation...</p>
        )}

        {messages.map((msg, index) => (
          <div
            key={index}
            style={{
              marginBottom: "12px",
              textAlign: msg.role === "user" ? "right" : "left",
            }}
          >
            <strong>
              {msg.role === "user" ? "You" : "AI"}
            </strong>
            <br />
            {msg.content}
          </div>
        ))}

        {loading && (
          <p>
            <strong>AI:</strong> Thinking...
          </p>
        )}
      </div>

      <input
        type="text"
        placeholder="Type your message..."
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        onKeyDown={handleKeyDown}
        style={{
          width: "80%",
          padding: "12px",
          fontSize: "16px",
        }}
      />

      <button
        onClick={sendMessage}
        disabled={loading}
        style={{
          width: "18%",
          padding: "12px",
          marginLeft: "2%",
          cursor: "pointer",
        }}
      >
        {loading ? "..." : "Send"}
      </button>
    </div>
  );
}

export default App;