index.html

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>شات بوت Speedy</title>
    <style>
        body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; }
        #chat-box { width: 80%; max-width: 600px; height: 400px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; margin: 20px 0; }
        #user-input { width: 80%; padding: 10px; }
        #send-button { padding: 10px 20px; margin-top: 10px; cursor: pointer; }
        .message { margin: 10px 0; }
        .user-message { text-align: right; color: blue; }
        .bot-message { text-align: left; color: green; }
    </style>
</head>
<body>
    <h2>شات بوت Speedy</h2>
    <div id="chat-box"></div>
    <input type="text" id="user-input" placeholder="اكتب رسالتك هنا...">
    <button id="send-button">إرسال</button>

    <script>
        document.getElementById("send-button").addEventListener("click", async () => {
            const userInput = document.getElementById("user-input").value;
            if (!userInput) return;
            
            const chatBox = document.getElementById("chat-box");
            const userMessage = document.createElement("div");
            userMessage.className = "message user-message";
            userMessage.textContent = userInput;
            chatBox.appendChild(userMessage);

            document.getElementById("user-input").value = "";

            const response = await fetch("/generate-response", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ text: userInput })
            });

            const data = await response.json();
            const botMessage = document.createElement("div");
            botMessage.className = "message bot-message";
            botMessage.textContent = data.response;
            chatBox.appendChild(botMessage);

            chatBox.scrollTop = chatBox.scrollHeight;
        });
    </script>
</body>
</html>