{% 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 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="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="chip__warning">{{ attachment.extraction_error }}</span>
            {% endif %}
          </span>
        </div>
        {% endif %}
      {% endfor %}
    </div>
    {% endif %}

    {% 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>
    {% elif message.content %}
      <div class="msg__body msg__body--plain">{{ message.content }}</div>
    {% endif %}
    {# An attachment-only turn has no text; rendering the bubble anyway would
       leave an empty box under the file. #}

    {% 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>