<div x-data="{
        request_message_view: new ViewGlue('{% url "spire_ai:chat:render:request_message" %}'),
        load_messages_view: new ViewGlue('{% url "spire_ai:chat:render:load_messages" chat_id=chat.id %}'),
        chat_id: '{{ chat.id }}',
        message_body: '',
        async send_chat() {
            if(this.message_body !== '') {
                await this.request_message_view.render_insert_adjacent(this.$refs.target_div, {
                        message_body: this.message_body.trim(),
                        chat_id: this.chat_id
                    })
                this.message_body = ''
                this.$refs.target_div.scrollTop = this.$refs.target_div.scrollHeight
            }
        },
        load_messages() {
            this.load_messages_view.render_insert_adjacent(this.$refs.target_div, {})
        },
        init() {
            this.$refs.target_div.scrollTop = this.$refs.target_div.scrollHeight
        }
    }" class="row">
    <div class="col-12">
        <div class="row px-0">
            <div class="col-12 text-center fw-bold pb-2">
                {{ chat.name_shortened }}
            </div>
        </div>
        <div class="row mb-3">
            <div x-init="load_messages()" x-ref="target_div" class="col-12 overflow-auto p-4" style="height: calc(100vh - 240px {{ height_correction }});">

            </div>
        </div>

        <div class="row">
            <div class="col text-center pe-1">
                <input type="text" x-init="$el.focus()" x-model="message_body" @keyup.enter="send_chat()"
                       class="form-control" autocomplete="off" name="request_message">
            </div>
            <div class="col-auto text-center ps-1 pe-2">
                <button class="btn btn-app-primary-outlined" @click="send_chat()">
                    <i class="bi bi-send"></i>
                </button>
            </div>
        </div>

    </div>
</div>
