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

{% block speech_recognition_content %}

    <div 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: '',
        async send_chat(synthesis_speech_for_response = false) {
            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,
                        synthesis_speech: synthesis_speech_for_response
                    })
                this.message_body = ''
            }
        },
        load_messages() {
            this.load_messages_view.render_insert_adjacent(this.$refs.target_div, {})
        },
        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(true)
            }

        }
    }" class="row">
        <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 - {{ top_nav_height_px }}px);">

                </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()"
                           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>

{% endblock %}

