{% extends 'django_spire/speech/speech_recognition.html' %}

{% block speech_recognition_content %}
    <div
        class="row"
        x-data="{
            request_message_view: new ViewGlue('{% url "django_spire:ai:chat:message:request:new" %}'),
            load_messages_view: new ViewGlue('{% url "django_spire:ai:chat:message:load_chat" chat_id=chat.id %}'),
            chat_id: '{{ chat.id }}',
            message_body: '',

            init() {
                setTimeout(() => this.$refs.target_div.scrollTop = this.$refs.target_div.scrollHeight, 1500)

                this.speech_recognition.onresult = () => {
                    this.message_body = this.speech_transcript
                    this.send_chat({message_body: this.message_body, synthesis_speech_for_response: true})
                }
            },
            load_messages() {
                this.load_messages_view.render_insert_adjacent(this.$refs.target_div, {})
            },
            async send_chat({message_body = '', synthesis_speech_for_response = false}) {
                if (message_body !== '') {
                    await this.request_message_view.render_insert_adjacent(
                        this.$refs.target_div,
                        {
                            message_body: message_body,
                            chat_id: this.chat_id,
                            synthesis_speech: synthesis_speech_for_response
                        }
                    )
                    this.message_body = ''
                }
            }
        }"
    >
        <div class="col-12">
            <div class="row px-0 border-bottom">
                <div class="col-auto ps-2 pe-0 h-100 d-block d-md-none text-app-primary"
                     style="font-size: 1.6rem; margin-top: -0.2rem;">
                    <i x-show="!select_chat_visible" @click="open_chat_select()" class="bi bi-chat-left-text"></i>
                </div>
                <div class="col 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 - 90px - var(--app-top-navigation-height));">
                </div>
            </div>

            <div class="row">
                <div class="col-auto text-center ps-2 pe-1">
                    <button class="btn btn-app-primary-outlined" x-show="!speech_listening" @click="start_listening()">
                        <i class="bi bi-mic"></i>
                    </button>
                    <button class="btn btn-app-danger" x-show="speech_listening" @click="stop_listening()">
                        <i class="bi bi-mic-fill"></i>
                    </button>
                </div>
                <div class="col text-center px-1">
                    <input type="text" x-init="$el.focus()" x-model="message_body" @keyup.enter="send_chat({message_body: message_body})"
                           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({message_body: message_body})">
                        <i class="bi bi-send"></i>
                    </button>
                </div>
            </div>

        </div>
    </div>

{% endblock %}