app.js

import { useState } from "react";
import axios from "axios";
import { GoogleGenerativeAI } from "@google/generative-ai";

const apiKey = "AIzaSyDShnw7icMMXny4YQln0docA9mPzMxKQfs";
const genAI = new GoogleGenerativeAI(apiKey);

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

  // Gửi tin nhắn tới Gemini AI
  const sendMessage = async () => {
    if (input.trim() === "") return;
    setMessages((prev) => [...prev, { sender: "user", text: input }]);
    setLoading(true);

    try {
      const res = await axios.post("http://localhost:5000/chat", { text: input });
      setMessages((prev) => [...prev, { sender: "bot", text: res.data.response }]);
    } catch (error) {
      setMessages((prev) => [...prev, { sender: "bot", text: "Lỗi khi gửi tin nhắn!" }]);
    }

    setInput("");
    setLoading(false);
  };

  return (
    <div>
      <h1>Chatbot</h1>
      <div>
        {messages.map((msg, index) => (
          <div key={index} style={{ color: msg.sender === "user" ? "green" : "blue" }}>
            <strong>{msg.sender}:</strong> {msg.text}
          </div>
        ))}
      </div>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={sendMessage}>Gửi</button>
    </div>
  );
}

export default App;