src/components/TokenInput.jsx

import { InferenceClient } from "@huggingface/inference";
import { useState } from "react";

export default function TokenInput({ onHFClientReady }) {
  const [token, setToken] = useState("");

  const handleConfirm = async () => {
    if (!token.trim()) return;
    const client = new InferenceClient(token);
    onHFClientReady(client);
  };

  return (
    <div style={{ display: "flex", gap: "10px" }}>
      <input
        type="password"
        value={token}
        onChange={(e) => setToken(e.target.value)}
        placeholder="Enter Hugging Face token"
        style={{ flex: 1, padding: "10px", fontSize: "16px" }}
      />
      <button onClick={handleConfirm} style={{ padding: "10px 20px" }}>
        Confirm
      </button>
    </div>
  );
}