<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mini ChatGPT</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 20px;
    }

    h1 {
      text-align: center;
      color: #333;
    }

    #chatbox {
      width: 90%;
      max-width: 600px;
      margin: 20px auto;
      background-color: white;
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0px 2px 10px rgba(0,0,0,0.2);
      min-height: 300px;
      overflow-y: auto;
    }

    .message {
      margin: 10px 0;
    }

    .user {
      text-align: right;
      color: white;
      background-color: #007bff;
      display: inline-block;
      padding: 5px 10px;
      border-radius: 10px;
    }

    .bot {
      text-align: left;
      color: white;
      background-color: #28a745;
      display: inline-block;
      padding: 5px 10px;
      border-radius: 10px;
    }

    #inputArea {
      text-align: center;
      margin-top: 20px;
    }

    #userInput {
      width: 70%;
      padding: 10px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

    #sendBtn {
      padding: 10px 15px;
      font-size: 16px;
      border: none;
      background-color: #007bff;
      color: white;
      border-radius: 5px;
      cursor: pointer;
    }

    #sendBtn:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>

<h1>Mini ChatGPT</h1>

<div id="chatbox"></div>

<div id="inputArea">
  <input type="text" id="userInput" placeholder="Type your message here..." />
  <button id="sendBtn">Send</button>
</div>

<script>
  const chatbox = document.getElementById("chatbox");
  const input = document.getElementById("userInput");
  const button = document.getElementById("sendBtn");

  // Predefined bot responses (simple mock)
  const responses = {
    "hello": "Hello! How can I help you today?",
    "how are you": "I'm just a program, but I'm doing great! 😊",
    "what is chatgpt": "ChatGPT is an AI language model created by OpenAI.",
    "default": "Sorry, I don't understand that. Can you ask something else?"
  };

  function addMessage(text, sender) {
    const messageDiv = document.createElement("div");
    messageDiv.className = "message " + sender;
    messageDiv.textContent = text;
    chatbox.appendChild(messageDiv);
    chatbox.scrollTop = chatbox.scrollHeight;
  }

  function getBotResponse(userText) {
    const text = userText.toLowerCase();
    return responses[text] || responses["default"];
  }

  button.addEventListener("click", () => {
    const userText = input.value.trim();
    if(userText === "") return;

    addMessage(userText, "user");
    const botReply = getBotResponse(userText);
    setTimeout(() => addMessage(botReply, "bot"), 500); // simulate typing delay
    input.value = "";
    input.focus();
  });

  // Allow pressing Enter to send
  input.addEventListener("keypress", (e) => {
    if(e.key === "Enter") {
      button.click();
    }
  });
</script>

</body>
</html>
