templates/chatbot.html

{% extends 'base.html' %}

{% block title %}CA Waterboard Chatbot{% endblock %}

{% block content %}
    <!-- partial:index.partial.html -->
    <section class="msger">
        <header class="msger-header">
            <div class="msger-header-title">
                <i class="fa-thin fa-message-bot"></i>Water Regulation QA Chatbot <i class="fa-thin fa-message-bot"></i>
            </div>
        </header>

        <main class="msger-chat">
            <div class="msg left-msg">
                <div class="msg-img" style="background-image: url(../static/icons/dialogflow-insights-svgrepo-com.svg)">
                </div>

                <div class="msg-bubble">
                    <div class="msg-info">
                        <div class="msg-info-name">Chatbot</div>
                        <div class="msg-info-time"></div>
                    </div>

                    <div class="msg-text">
                        Hi, welcome to ChatBot! Please type in your question. 😄
                    </div>
                </div>
            </div>

        </main>

        <form class="msger-inputarea">
            <select id="modelSelect" class="msger-select">
                <option value="bloom" selected>Llama Bloom</option>
                <option value="langChain">LangChain OpenAI</option>
            </select>
            <input type="text" class="msger-input" id="textInput" placeholder="Enter your message...">
            <button type="submit" class="msger-send-btn">Send</button>
        </form>
    </section>
    <!-- partial -->
{% endblock %}