templates/chat.html

{% extends 'base.html' %}
{% block content %}
    <h1>Chat with Little Krishna</h1>
    <div id="chat-container">
        <div id="chat-messages">
            {% for user_msg, krishna_msg in chat_history %}
                <p><strong>You:</strong> {{ user_msg }}</p>
                <p><strong>Krishna:</strong> {{ krishna_msg }}</p>
            {% endfor %}
        </div>
        <form id="chat-form">
            <input type="text" id="message-input" placeholder="Say something to Krishna..." required>
            <button type="submit">Send</button>
        </form>
        <button id="comic-button">Tell me a story!</button>
        <div id="comic-strip"></div>
    </div>
    <script src="/static/js/chat.js"></script>
{% endblock %}