{% load spire_core_tags %}

{% generate_id as response_message_intel_id %}

<div
    x-data="{
        show_loading: false,
        show_reading: true,
        show_typing: false,

        init() {
            this.response_message.render_outer($refs.loading_response_message)

            setTimeout(() => {this.show_loading = true}, 1000)
            setTimeout(() => {$el.scrollIntoView({behavior: 'smooth'})}, 1500)
            setTimeout(() => {this.show_reading = false}, 4000)
            setTimeout(() => {this.show_typing = true}, 4000)
        },

        response_message: new ViewGlue(
            '{% url "django_spire:ai:chat:message:response:new" %}',
            {
                message_body: JSON.parse(document.getElementById('{{ response_message_intel_id }}').textContent),
                chat_id: '{{ chat_id }}',
                synthesis_speech: '{{ synthesis_speech }}' === 'True'
            }
        )
    }"
    x-show="show_loading"
    x-cloak
>
    {{ message_intel.text|json_script:response_message_intel_id }}

    <div x-ref="loading_response_message" class="d-flex justify-content-start px-3 py-2">
        <div>
            <div class="d-flex align-items-center gap-1 mb-1">
                <div
                    class="d-flex align-items-center justify-content-center rounded-circle flex-shrink-0 bg-app-primary-soft text-app-primary"
                    style="width: 20px; height: 20px;"
                >
                    <i class="bi bi-robot" style="font-size: 0.65rem;"></i>
                </div>
                <span class="fw-semibold" style="font-size: 0.6875rem;">{{ chat_workflow_name }}</span>
            </div>

            <div class="chat-bubble d-inline-flex align-items-center gap-2 mw-100 ds-fs-9 bg-app-layer-two text-app-default-text-color chat-bubble-response" style="padding: 8px 14px; line-height: 1.5;">
                <span class="spinner-border spinner-border-sm text-muted" role="status">
                    <span class="visually-hidden">Loading...</span>
                </span>
                <span class="text-muted" x-show="show_reading">Reading...</span>
                <span class="text-muted" x-show="show_typing">Typing...</span>
            </div>
        </div>
    </div>
</div>
