<!doctype html>

<html>

  <body style="font-family:Arial; max-width:700px; margin:30px auto;">

    <h2>My Chatbot</h2>


    <div id="chat" style="border:1px solid #ccc; padding:10px; height:400px; overflow:auto;"></div>


    <input id="msg" placeholder="Type a message..." style="width:80%; padding:10px;">

    <button onclick="send()">Send</button>


    <script>

      const API = "https://my-chat-api.evangrass21.workers.dev/api/chat";


      const chat = document.getElementById("chat");

      const msg = document.getElementById("msg");


      function add(text) {

        const p = document.createElement("p");

        p.textContent = text;

        chat.appendChild(p);

        chat.scrollTop = chat.scrollHeight;

      }


      async function send() {

        const text = msg.value.trim();

        if (!text) return;

        msg.value = "";

        add("You: " + text);

        add("Bot: ...");


        const res = await fetch(API, {

          method: "POST",

          headers: { "Content-Type": "application/json" },

          body: JSON.stringify({ message: text })

        });


        const data = await res.json();

        chat.lastChild.textContent = "Bot: " + (data.reply || "No reply");

      }

    </script>

  </body>

</html>