{#- chirp-ui: Streaming and AI components
    For LLM Playground, RAG demo, and SSE-driven UIs.
    Works with htmx SSE and event delegation for copy buttons.

    Usage:
        {% from "chirpui/streaming.html" import streaming_block, copy_btn, prose %}

        {% call streaming_block(streaming=true) %}
            Content or thinking...
        {% end %}

        {% call copy_btn(text="Copy", copy_text=answer_text) %}

        <div class="chirpui-prose">{{ content | markdown | safe(reason="markdown output") }}</div>
-#}

{% def streaming_bubble(role="assistant", state="", streaming=true, sse_swap_target=false, sse_connect=none, sse_close="done", cls="") %}
{% set role_valid = role | validate_variant_block("message_bubble", default="assistant") %}
{% set _state = state | validate_variant(("", "content", "thinking", "error"), "") %}
{% set role_class = " chirpui-message-bubble--" ~ role_valid if role_valid != "default" else "" %}
{% set state_class = " chirpui-streaming-bubble--" ~ _state if _state and _state != "content" else "" %}
{% set _aria_labels = {"assistant": "assistant response", "user": "user message", "system": "system message", "default": "message"} %}
{# @provides _streaming_role — consumed by: copy_button #}
{% provide _streaming_role = role_valid %}
<article class="chirpui-message-bubble{{ role_class }}{{ state_class }}{{ " " ~ cls if cls else "" }}"
         {% if sse_connect %}hx-ext="sse" sse-connect="{{ sse_connect }}" sse-close="{{ sse_close }}" hx-disinherit="hx-target hx-swap" {% end %}aria-label="{{ _aria_labels[role_valid] if role_valid in _aria_labels else "message" }}"{% if _state == "error" %} role="alert"{% end %}{% if _state == "thinking" %} aria-busy="true"{% end %}>
    <div class="chirpui-streaming-block{{ " chirpui-streaming-block--active" if streaming else "" }}"
         {% if sse_connect or sse_swap_target %}sse-swap="fragment" hx-target="this" hx-swap="beforeend" {% end %}aria-live="polite" aria-atomic="true">
        {% try %}
        {% slot %}
        {% if _state == "thinking" %}
        <span class="chirpui-streaming-bubble__thinking" aria-hidden="true"></span>
        {% elif streaming %}
        <span class="chirpui-streaming-block__cursor" aria-hidden="true"></span>
        {% end %}
        {% fallback %}
        <div class="chirpui-streaming--error" role="alert">
            <span class="chirpui-text-muted">Content unavailable</span>
        </div>
        {% end %}
    </div>
</article>
{% end %}
{% end %}

{% def streaming_block(streaming=false, sse_swap_target=false, cls="") %}
<div class="chirpui-streaming-block{{ " chirpui-streaming-block--active" if streaming else "" }}{{ " " ~ cls if cls else "" }}"
     {% if sse_swap_target %}sse-swap="fragment" hx-target="this" {% end %}aria-live="polite"
     aria-atomic="true">
    {% try %}
    {% slot %}
    {% if streaming %}
    <span class="chirpui-streaming-block__cursor" aria-hidden="true"></span>
    {% end %}
    {% fallback %}
    <div class="chirpui-streaming--error" role="alert">
        <span class="chirpui-text-muted">Content unavailable</span>
    </div>
    {% end %}
</div>
{% end %}

{% def copy_btn(label="Copy", copy_text="", cls="") %}
<button type="button"
        class="chirpui-copy-btn{{ " " ~ cls if cls else "" }}"
        title="{{ label }}"
        x-data="chirpuiCopy()"
        data-copy-text="{{ copy_text | e }}"
        data-copy-timeout="1500"
        @click="copy()"
        aria-label="{{ label }}">
    <span class="chirpui-copy-btn__label" x-show="!copied">{{ label }}</span>
    <span class="chirpui-copy-btn__done" x-show="copied" x-cloak>Copied!</span>
</button>
{% end %}

{% def model_card(title, badge=none, footer=none, cls="", sse_connect=none, sse_close="done", sse_streaming=false) %}
<article class="chirpui-model-card chirpui-card{{ " " ~ cls if cls else "" }}"
         {% if sse_connect %}hx-ext="sse" sse-connect="{{ sse_connect }}" sse-close="{{ sse_close }}" hx-disinherit="hx-target hx-swap" {% end %}aria-label="{{ title }} response">
    <header class="chirpui-card__header chirpui-model-card__header">
        <span class="chirpui-model-card__title">{{ title }}</span>
        {% if badge %}
        <span class="chirpui-model-card__badge">{{ badge }}</span>
        {% end %}
    </header>
    <div class="chirpui-card__body chirpui-model-card__body">
        {% if sse_streaming %}
        <div class="chirpui-streaming-block chirpui-streaming-block--active"
             sse-swap="fragment" hx-target="this" aria-live="polite" aria-atomic="true">
            {% slot %}
            <span class="chirpui-streaming-block__cursor" aria-hidden="true"></span>
        </div>
        {% else %}
        {% slot %}
        {% end %}
    </div>
    {% if footer %}
    <footer class="chirpui-card__footer chirpui-model-card__footer">
        {{ footer }}
    </footer>
    {% end %}
</article>
{% end %}