{% from "_macros.html" import icon, mark %}
{#
  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) %}

<article class="msg msg--{{ message.role }}" 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" %}
      {{ mark(cls="msg__mark", uid="m" ~ message.id) }}
    {% 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">
        {{ "LLeMbas" if message.role == "assistant" else (user.name or "You") }}
      </span>
      {% if message.model_id %}
      <span class="msg__model" title="{{ message.model_id }}">{{ message.model_id }}</span>
      {% endif %}
    </header>

    {% if streaming %}
      {# Reasoning arrives before the answer, so this block sits above it. It
         starts open (watching a model think is the point) and the :has() rule
         in chat.css hides the whole thing while it is still empty, so models
         that emit no reasoning never show an empty box. #}
      <details class="reasoning reasoning--live" id="reasoning-{{ message.id }}" open>
        <summary class="reasoning__summary">
          {{ icon("sparkle", "icon--sm reasoning__icon") }}
          <span class="reasoning__label">Thinking</span>
          {{ icon("chevron-down", "icon--sm reasoning__chevron") }}
        </summary>
        <div class="reasoning__body" sse-swap="reasoning" hx-swap="beforeend"></div>
      </details>

      {# Tokens are appended here as they arrive. The cursor is a CSS
         pseudo-element on the empty parent, so it disappears by itself once
         the first token lands. #}
      <div class="msg__body msg__body--streaming" id="stream-{{ message.id }}"
           sse-swap="token" hx-swap="beforeend"></div>
      <div class="msg__waiting">
        <span class="dots"><i></i><i></i><i></i></span>
      </div>
    {% elif message.reasoning and not message.error %}
      {# Collapsed once finished: the answer is what the reader came for, and
         the thinking is there if they want to audit it. #}
      <details class="reasoning" id="reasoning-{{ message.id }}">
        <summary class="reasoning__summary">
          {{ icon("sparkle", "icon--sm reasoning__icon") }}
          <span class="reasoning__label">
            {% if message.reasoning_ms %}
              Thought for {{ message.reasoning_ms | duration }}
            {% else %}
              Reasoning
            {% endif %}
          </span>
          {{ icon("chevron-down", "icon--sm reasoning__chevron") }}
        </summary>
        <div class="reasoning__body">{{ message.reasoning }}</div>
      </details>
      <div class="msg__body">{{ body_html|safe }}</div>

    {% elif 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>
      {% if message.content %}
      <div class="msg__body">{{ body_html|safe }}</div>
      {% endif %}
    {% elif message.role == "assistant" %}
      <div class="msg__body">{{ body_html|safe }}</div>
    {% else %}
      <div class="msg__body msg__body--plain">{{ message.content }}</div>
    {% endif %}

    {% if 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 == "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>
      {% 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>
  {% endif %}
</article>