app.jsx

function App() {
  return (
    <div className="bg-gray-100 h-screen flex flex-col">
      <div className="container mx-auto p-4 flex flex-col h-full max-w-2xl">
        <h1 className="text-2xl font-bold mb-4">ChatUI với React + OpenAI</h1>

        <form className="flex">
          <input
            type="text"
            placeholder="Tin nhắn của bạn..."
            className="flex-grow p-2 rounded-l border border-gray-300"
          />
          <button
            type="submit"
            className="bg-blue-500 text-white px-4 py-2 rounded-r hover:bg-blue-600"
          >
            Gửi tin nhắn
          </button>
        </form>

        <div className="flex-grow overflow-y-auto mt-4 bg-white rounded shadow p-4">
          <div className="mb-2">
            <p className="text-gray-600 text-sm">User</p>
            <p className="bg-blue-100 p-2 rounded-lg inline-block">
              Hello! How are you?
            </p>
          </div>
          <div className="mb-2 text-right">
            <p className="text-gray-600 text-sm">Bot</p>
            <p className="bg-green-100 p-2 rounded-lg inline-block">
              Hi there! I'm doing well, thank you for asking. How can I assist
              you today?
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;