{% from "_macros.html" import icon, mark, model_avatar %}
{% set speaking_model = (models_by_id | default({})).get(message.model_id) %}
{#
  One message bubble, in either of two states.

  An incomplete assistant message renders the streaming shell: it carries the
  sse-connect that opens the reply stream. This is deliberately the ONLY thing
  that starts a generation, which means a page load showing an unfinished reply
  picks it up again -- reloading after a dropped connection retries rather than
  leaving a permanently half-written answer.

  A complete message renders its finished body: Markdown for the assistant,
  escaped plain text for everyone else.
#}
{% set streaming = (message.role == "assistant" and not message.complete) %}
{#
  Typed while the previous reply was still being written, and not yet handed to
  a model. It is in the transcript and it is not in the request. It must never
  carry `sse-connect` -- a queued turn with a streaming shell on it would be the
  second concurrent reply the queue exists to prevent.
#}
{% set queued = (message.role == "user" and message.queued) %}

<article class="msg msg--{{ message.role }}{{ ' msg--queued' if queued }}"
         id="msg-{{ message.id }}"
  {% if streaming %}
         hx-ext="sse"
         sse-connect="/api/chats/{{ chat.id }}/messages/{{ message.id }}/stream"
         sse-close="close"
  {% endif %}>

  <div class="msg__gutter" aria-hidden="true">
    {% if message.role == "assistant" %}
      {# The model that actually wrote this turn, which is not necessarily the
         one the chat is set to now. Falls back to the LLeMbas mark when the
         model has been removed or has no image of its own. #}
      {% if speaking_model %}
        {{ model_avatar(speaking_model, cls="msg__avatar") }}
      {% else %}
        {{ mark(cls="msg__mark", uid="m" ~ message.id) }}
      {% endif %}
    {% else %}
      <span class="msg__initial">{{ (user.name or "?")[0]|upper }}</span>
    {% endif %}
  </div>

  <div class="msg__main">
    <header class="msg__meta">
      <span class="msg__author">
        {% if message.role == "assistant" %}
          {{ speaking_model.label if speaking_model else "LLeMbas" }}
        {% else %}
          {{ user.name or "You" }}
        {% endif %}
      </span>
      {% if message.model_id and (not speaking_model or speaking_model.display_name) %}
      {# Only worth showing when it adds something the author line does not. #}
      <span class="msg__model" title="{{ message.model_id }}">{{ message.model_id }}</span>
      {% endif %}
    </header>

    {% if message.attachments %}
    {# Above the text, matching the order they were added and the order the
       model receives them. #}
    <div class="attachments">
      {% for attachment in message.attachments %}
        {% if attachment.is_image %}
        <a class="attachments__image" href="/api/files/{{ attachment.id }}/content"
           target="_blank" rel="noopener">
          <img src="/api/files/{{ attachment.id }}/content" alt="{{ attachment.filename }}"
               loading="lazy" width="{{ attachment.width }}" height="{{ attachment.height }}">
        </a>
        {% else %}
        <div class="attachments__doc">
          {{ icon("attach", "icon--sm") }}
          <span class="attachments__doc-body">
            <a href="/api/files/{{ attachment.id }}/content">{{ attachment.filename }}</a>
            <span class="attach-chip__meta">
              {{ attachment.human_size }}
              {%- if attachment.pages %} · {{ attachment.pages }} page{{ '' if attachment.pages == 1 else 's' }}{% endif %}
              {%- if attachment.truncated %} · truncated{% endif %}
              {%- if attachment.extracted_text %}
              · <a href="/api/files/{{ attachment.id }}/text" target="_blank"
                   rel="noopener">view extracted text</a>
              {%- endif %}
            </span>
            {% if attachment.extraction_error %}
            <span class="attach-chip__warning">{{ attachment.extraction_error }}</span>
            {% endif %}
          </span>
        </div>
        {% endif %}
      {% endfor %}
    </div>
    {% endif %}

    {% if streaming %}
      {# The reply as a sequence of steps, in the order they happened. The
         closed ones are re-sent only when a round ends; the two live containers
         come with them, inside `_steps.html`, which is how the tail blanks
         itself. See services/steps.py. #}
      <div class="msg__steps" id="steps-{{ message.id }}" data-steps
           sse-swap="steps" hx-swap="innerHTML">
        {% with steps = [], live = true %}
          {% include "chat/_steps.html" %}
        {% endwith %}
      </div>

      {# Where a question from the model, or a command waiting to be allowed,
         lands. Unlike the blocks above it this frame is sent on every version
         bump including when it is empty, because the card has to disappear the
         moment it is answered. The buttons inside are hx-post and they work:
         the SSE extension processes what it swaps in. #}
      <div class="interaction-slot" id="ask-{{ message.id }}"
           sse-swap="ask" hx-swap="innerHTML"></div>

      {# No stop button here: the composer's send button becomes Stop while a
         reply is being written, which is where the hand already is. #}
      <div class="msg__waiting">
        <span class="dots"><i></i><i></i><i></i></span>
        {# What the reply is doing when it is not producing tokens. A silent
           multi-second pause before the first token is what a hang looks
           like. #}
        <span class="msg__status" sse-swap="status" hx-swap="innerHTML"></span>
      </div>
      {# Counts as the reply is written. Everything is an estimate until the
         usage chunk lands at the very end, and the chips say so. #}
      <div class="msg__metrics" id="metrics-{{ message.id }}"
           sse-swap="metrics" hx-swap="innerHTML"></div>
    {% else %}
      {# Finished, and rendered from the same partial the live view uses so the
         bubble cannot rearrange itself the moment the stream ends.

         `message_steps` is a Jinja global rather than something each handler
         passes, for the reason `tool_label` is: this template is rendered from
         four different places and a fifth thing to remember is a fifth thing one
         of them forgets. A reply written before the marks existed has none, and
         `steps.py` answers that with the old layout exactly -- thinking, then
         every tool block, then the whole answer.

         Kept with the message rather than discarded with the stream, so the
         sources behind an answer are still there tomorrow. #}
      {% if message.role == "assistant" %}
      {# The same id and the same marker as the live container. That is what
         carries an opened block across the `done` frame, which replaces the
         whole bubble: steps.js keys what it remembers on this id, and the ids
         inside come from the mark index either way. #}
      <div class="msg__steps" id="steps-{{ message.id }}" data-steps>
        {% with steps = message_steps(message), live = false %}
          {% include "chat/_steps.html" %}
        {% endwith %}
      </div>
      {% endif %}

      {% if message.error %}
      <div class="alert alert--error msg__error" role="alert">
        {{ icon("warning", "alert__icon") }}
        <div>
          <strong>The reply could not be completed.</strong>
          <div class="text-sm" style="margin-top: var(--sp-1)">{{ message.error }}</div>
        </div>
      </div>
      {% endif %}

      {% if message.role == "assistant" %}
        {% if message.stopped %}
        <p class="msg__note">{{ icon("x", "icon--sm") }} Stopped. This reply is cut short.</p>
        {% endif %}
      {% elif message.content %}
        {# `tokens` escapes and then marks up: @mentions read as references
           rather than as punctuation. It must stay `pre-wrap` -- the newlines
           are still carried by CSS, not by markup. #}
        <div class="msg__body msg__body--plain">{{ message.content|tokens|safe }}</div>
      {% endif %}
      {# An attachment-only turn has no text; rendering the bubble anyway would
         leave an empty box under the file. #}
    {% endif %}

    {% if not streaming and message.plan_json %}
    {# What the model proposed in Plan mode, with the way to carry it out. #}
    {% include "chat/_plan.html" %}
    {% endif %}

    {% if not streaming and message.role == "assistant" and message.usage_json %}
    {# Above the buttons, not among them: the actions row is things you press. #}
    <div class="msg__metrics" id="metrics-{{ message.id }}">
      {% with metrics = message.usage_json | metrics %}
        {% include "chat/_metrics.html" %}
      {% endwith %}
    </div>
    {% endif %}

    {% if queued %}
    {# Nothing has been sent to any model. Both buttons sit on the bubble they
       act on rather than in a toast somewhere, and Edit is deliberately absent:
       editing rewinds and then starts a reply, which on a row you can press
       while another reply is streaming is a second concurrent generation behind
       a pencil. Discard and retype is the honest affordance. #}
    <footer class="msg__actions msg__actions--queued">
      <span class="msg__note">{{ icon("clock", "icon--sm") }} Waiting to be sent</span>
      <button class="btn btn--sm" type="button"
              hx-post="/api/chats/{{ chat.id }}/messages/{{ message.id }}/send-now"
              hx-target="#thread" hx-swap="innerHTML">Send now</button>
      <button class="btn btn--sm" type="button"
              hx-post="/api/chats/{{ chat.id }}/messages/{{ message.id }}/discard"
              hx-target="#msg-{{ message.id }}" hx-swap="outerHTML"
              data-confirm-button="Discard this message?">Discard</button>
    </footer>
    <div hidden id="msg-body-{{ message.id }}">{{ message.content }}</div>
    {% elif not streaming %}
    <footer class="msg__actions">
      <button class="btn btn--icon btn--sm" type="button"
              data-copy="msg-body-{{ message.id }}" aria-label="Copy message">
        {{ icon("copy", "icon--sm") }}
      </button>
      {% if message.role == "user" %}
      <button class="btn btn--icon btn--sm" type="button"
              hx-get="/api/chats/{{ chat.id }}/messages/{{ message.id }}/edit"
              hx-target="#msg-{{ message.id }}" hx-swap="outerHTML"
              data-edit-message
              aria-label="Edit and retry from here">
        {{ icon("pencil", "icon--sm") }}
      </button>
      {% endif %}
      {% if message.role == "assistant" %}
      <button class="btn btn--icon btn--sm" type="button"
              hx-post="/api/chats/{{ chat.id }}/messages/{{ message.id }}/regenerate"
              hx-target="#msg-{{ message.id }}" hx-swap="outerHTML"
              aria-label="Regenerate reply">
        {{ icon("refresh", "icon--sm") }}
      </button>
      {% if can_listen | default(false) and message.content and not message.error %}
      {# Speech is synthesised on demand rather than stored: the voice can
         change under the reader between plays, and a reply can be regenerated
         at the same address. #}
      {# data-speak-auto is set only on the frame that ends a live stream, never
         on a page load: reopening a chat must not start reading its last reply
         out loud again. #}
      <button class="btn btn--icon btn--sm" type="button"
              data-speak="/api/audio/speech/{{ chat.id }}/{{ message.id }}"
              {% if audio_autoplay | default(false) and just_finished | default(false) %}data-speak-auto{% endif %}
              aria-label="Read this reply aloud">
        <span class="speak__icon speak__icon--play">{{ icon("speaker", "icon--sm") }}</span>
        <span class="speak__icon speak__icon--stop">{{ icon("stop-circle", "icon--sm") }}</span>
      </button>
      {% endif %}
      {% endif %}
    </footer>
    {# The raw source, so the copy button yields Markdown rather than rendered
       text. A hidden div and not a <script>: script content is raw text, so
       the escaping Jinja applies would be copied out literally as entities. #}
    <div hidden id="msg-body-{{ message.id }}">{{ message.content }}</div>
    {% endif %}
  </div>

  {% if streaming %}
  {# Receives the finished bubble and replaces this whole article with it. #}
  <div hidden sse-swap="done" hx-target="#msg-{{ message.id }}" hx-swap="outerHTML"></div>

  {#
    A file the model has opened. The frame carries the canvas tab strip marked
    `hx-swap-oob`, so it lands in the panel rather than here -- this element is
    only somewhere for it to arrive. `hx-swap="none"` because the payload has no
    business in the bubble; htmx extracts out-of-band fragments before it
    considers the main swap, so "none" does not stop them.

    Only the strip is ever pushed. The file's contents would be a lot of bytes
    on every version bump and would overwrite a textarea somebody is typing in.
  #}
  <div hidden sse-swap="canvas" hx-swap="none"></div>
  {% endif %}
</article>