index.html

<!-- prettier-ignore -->
{% extends "_base.html" %}
{% block main %}
<div class="flex flex-row size-full">
    {%- include "sidebar/sidebar.html" -%}
    <div class="flex flex-1 h-screen top-0 right-0">
        <div class="flex flex-col flex-1 transition-width relative bg-gray-800">
            <!-- TODO: scroll to bottom when the prompt expands -->
            <div
                class="flex flex-col w-full items-center text-sm overflow-y-auto"
            >
                <!-- TODO: keep this div on top of conversation's messages -->
                <!-- TODO: read model from DB, fallback to default if not defined -->
                <div
                    class="flex flex-row w-full items-center justify-center p-3 gap-1 text-gray-300 bg-gray-900"
                >
                    Model:
                    <!-- prettier-ignore -->
                    <b>{{ crate::config::CONFIG.lokai_default_llm_model }}</b>
                    Server:
                    <p id="server-state">...</p>
                </div>
                {% block messages %}{% endblock %}
                <div class="w-full h-32 flex-shrink-0"></div>
                <div
                    id="bottom-of-msgs"
                    _="
                    on htmx:wsAfterMessage from #user-prompt-div or load
                        js(me)
                            me.scrollIntoView(true);
                        end
                    "
                ></div>
            </div>
            {% include "chat_area/prompt.html" %}
        </div>
    </div>
</div>
{% endblock %}