{% extends "base.html" %}
{% from "_macros.html" import icon, mark, model_avatar %}

{% block title %}{{ chat.title if chat else "New chat" }} - LLeMbas{% endblock %}

{% block head %}
<link rel="stylesheet" href="{{ url_for('static', path='css/chat.css') }}">
{% if terminal_enabled %}
<link rel="stylesheet" href="{{ url_for('static', path='vendor/xterm.css') }}">
{% endif %}
{% endblock %}

{% block body_attrs %} data-authenticated="true"{% endblock %}

{% block body %}
<div class="shell">
  {% include "partials/sidebar.html" %}

  <main class="main">
    <header class="topbar">
      <button class="btn btn--icon" type="button" aria-label="Toggle sidebar"
              aria-expanded="true" data-toggle="#sidebar">
        {{ icon("sidebar") }}
      </button>

      <h1 class="topbar__title">
        <span id="chat-title">{{ chat.title if chat else "New chat" }}</span>
      </h1>

      {# The mode is the one agent setting that changes mid-chat: it decides
         what gets asked about, not what the conversation is. In the header
         rather than the settings panel because it is looked at constantly --
         it is the difference between being interrupted and not. #}
      {% if chat and chat.kind == "agent" %}
      <form class="agent-bar" hx-post="/api/chats/{{ chat.id }}" hx-swap="none"
            hx-trigger="change">
        <span class="agent-bar__where" title="{{ chat.project_dir }}">
          {{ icon("server", "icon--sm") }}
          {{ agent_profile.name if agent_profile else "connection missing" }}
        </span>
        <select class="select select--sm" name="agent_mode" aria-label="Mode">
          {% for value, label, hint in agent_modes %}
          <option value="{{ value }}" title="{{ hint }}"
                  {{ 'selected' if value == chat.agent_mode }}>{{ label }}</option>
          {% endfor %}
        </select>
      </form>
      {% endif %}

      <div class="topbar__actions">
        {#
          A link, not a script: the flag lives in the URL, so it survives a
          reload and can be bookmarked. On an existing temporary chat the same
          corner explains what temporary means and offers the way out -- without
          one, a conversation that turns out to matter is destroyed a day later
          with no recourse.
        #}
        {% if chat and chat.temporary %}
        <span class="badge badge--warning"
              title="Not listed in the sidebar, and removed 24 hours after the last message.">
          Temporary
        </span>
        <button class="btn btn--sm" type="button"
                hx-post="/api/chats/{{ chat.id }}/keep" hx-swap="none"
                title="Keep this chat and list it in the sidebar">
          {{ icon("pin", "icon--sm") }} Keep
        </button>
        {% elif not chat and can.get("chat.create") %}
        <a class="btn btn--icon {{ 'is-active' if starting_temporary }}"
           href="{{ '/chat' if starting_temporary else '/chat?temporary=1' }}"
           aria-label="Temporary chat"
           title="{% if starting_temporary %}Starting a temporary chat. Click to go back to a normal one.{% else %}Start a temporary chat: not listed in the sidebar, and removed after a day.{% endif %}">
          {{ icon("clock") }}
        </a>
        {% endif %}

        {% if models %}
          {% if can.get("chat.model_select") or not chat %}
            {% include "chat/_model_picker.html" %}
          {% elif current_model %}
          <span class="badge">{{ current_model.label }}</span>
          {% endif %}
        {% endif %}

        {% if chat and (can.get("chat.system_prompt") or can.get("chat.params")) %}
        <button class="btn btn--icon" type="button" aria-label="Chat settings"
                title="Chat settings" data-toggle="#chat-settings">
          {{ icon("sliders") }}
        </button>
        {% endif %}

        {% if chat and messages %}
        <button class="btn btn--icon" type="button" aria-label="Compact this chat"
                title="Summarise the earlier messages so they stop taking up context"
                hx-post="/api/chats/{{ chat.id }}/compact"
                hx-target="#thread" hx-swap="innerHTML"
                hx-confirm="Summarise everything before the last reply? The messages stay in the transcript; they just stop being sent to the model."
                data-confirm-title="Compact this chat"
                data-confirm-label="Compact">
          {{ icon("archive") }}
        </button>
        {% endif %}

        {% if terminal_enabled %}
        {# To the left of the inspector, and never open beside it: see the
           toggle group in app.js. #}
        <button class="btn btn--icon" type="button" aria-label="Terminal"
                title="Open a shell on {{ agent_profile.name if agent_profile else 'this connection' }}"
                aria-expanded="false" data-toggle="#terminal" data-toggle-group="side">
          {{ icon("terminal") }}
        </button>
        {% endif %}

        {% if chat and user.is_admin %}
        <button class="btn btn--icon" type="button" aria-label="Inspect this chat"
                title="Inspect this chat" aria-expanded="false" data-toggle="#inspector"
                data-toggle-group="side">
          {{ icon("search") }}
        </button>
        {% endif %}
      </div>
    </header>

    {% if chat and (can.get("chat.system_prompt") or can.get("chat.params")) %}
    {# Collapsed by default: per-chat overrides, not everyday controls. Each
       field saves on change, so there is no half-applied state. #}
    <section class="panel" id="chat-settings" hidden>
      <div class="panel__inner">
        {% if current_model and current_model.description %}
        <p class="panel__note">{{ current_model.description }}</p>
        {% endif %}

        {% if can.get("chat.system_prompt") %}
        <div class="field">
          <label class="field__label" for="system-prompt">System prompt</label>
          <textarea class="textarea" id="system-prompt" name="system_prompt" rows="3"
                    placeholder="{{ inherited_prompt or 'Instructions that apply to every message in this chat.' }}"
                    hx-patch="/api/chats/{{ chat.id }}" hx-swap="none"
                    hx-trigger="change">{{ chat.system_prompt }}</textarea>
          <p class="field__hint">
            {% if inherited_prompt %}
              Leave empty to use the {{ inherited_from }} prompt shown above.
            {% else %}
              Overrides the model and instance prompts for this chat only.
            {% endif %}
          </p>
        </div>
        {% endif %}

        {% if knowledge_bases %}
        {# Which bases this chat draws on. None ticked means everything you can
           see, which is what a chat with nothing chosen should do. #}
        <div class="field">
          <label class="field__label">Knowledge</label>
          <form hx-patch="/api/chats/{{ chat.id }}" hx-swap="none" hx-trigger="change">
            {# Always submitted, so unticking the last box still says something.
               An absent checkbox carries no signal of its own. #}
            <input type="hidden" name="knowledge_base_ids" value="">
            <div class="checkbox-row">
              {% for base in knowledge_bases %}
              <label class="checkbox">
                <input type="checkbox" name="knowledge_base_ids" value="{{ base.id }}"
                       {{ 'checked' if base.id in attached_base_ids }}>
                <span>{{ base.name }}</span>
              </label>
              {% endfor %}
            </div>
          </form>
          <p class="field__hint">
            {% if attached_base_ids %}
              Searches in this chat are limited to what is ticked.
            {% else %}
              Nothing ticked, so this chat can search everything in your
              <a href="/library/knowledge">library</a>.
            {% endif %}
          </p>
        </div>
        {% endif %}

        {% if can.get("chat.params") %}
        <div class="grid grid--3">
          <div class="field">
            <label class="field__label" for="temperature">Temperature</label>
            <input class="input" id="temperature" name="temperature" type="number"
                   min="0" max="2" step="0.05" placeholder="default"
                   value="{{ chat.params_json.get('temperature') if chat.params_json.get('temperature') is not none else '' }}"
                   hx-patch="/api/chats/{{ chat.id }}" hx-swap="none" hx-trigger="change">
          </div>
          <div class="field">
            <label class="field__label" for="top-p">Top-p</label>
            <input class="input" id="top-p" name="top_p" type="number"
                   min="0" max="1" step="0.05" placeholder="default"
                   value="{{ chat.params_json.get('top_p') if chat.params_json.get('top_p') is not none else '' }}"
                   hx-patch="/api/chats/{{ chat.id }}" hx-swap="none" hx-trigger="change">
          </div>
          <div class="field">
            <label class="field__label" for="max-tokens">Max tokens</label>
            <input class="input" id="max-tokens" name="max_tokens" type="number"
                   min="1" step="1" placeholder="default"
                   value="{{ chat.params_json.get('max_tokens') if chat.params_json.get('max_tokens') is not none else '' }}"
                   hx-patch="/api/chats/{{ chat.id }}" hx-swap="none" hx-trigger="change">
          </div>
        </div>
        <p class="field__hint">
          Leave a field empty to let the provider decide. Values outside the
          allowed range are ignored rather than clamped.
        </p>
        {% endif %}
      </div>
    </section>
    {% endif %}

    {% if not models %}
      {# Every fresh install lands here, so it points at the fix. #}
      <div class="empty">
        {{ icon("server", "empty__mark") }}
        <h2 class="empty__title">No models available</h2>
        <p class="empty__text">
          {% if user.is_admin %}
            Add an OpenAI-compatible connection and LLeMbas will load its models.
          {% else %}
            No model connections have been set up yet. Ask an administrator.
          {% endif %}
        </p>
        {% if user.is_admin %}
        <a class="btn btn--primary" href="/admin/connections">
          {{ icon("server", "icon--sm") }} Set up a connection
        </a>
        {% endif %}
      </div>

    {% else %}
      <div class="thread-scroll" id="thread-scroll">
        <div class="thread" id="thread">
          {% if not messages %}
          <div class="thread__intro">
            {{ mark(cls="empty__mark", uid="intro") }}
            <h2 class="empty__title">What would you ask?</h2>
            <p class="empty__text">Speak, friend, and enter.</p>

            {# Only on a chat that does not exist yet. An empty chat someone
               opened on purpose already has a model and a prompt chosen. #}
            {% if not chat and suggestions %}
            <div class="suggestions">
              {% for suggestion in suggestions %}
              <button class="suggestion" type="button"
                      data-suggestion="{{ suggestion.prompt }}">
                <span class="suggestion__name">{{ suggestion.name }}</span>
                {% if suggestion.description %}
                <span class="suggestion__note">{{ suggestion.description }}</span>
                {% endif %}
              </button>
              {% endfor %}
            </div>
            {% endif %}
          </div>
          {% endif %}

          {# The same include the rewind response returns, so the conversation
             is described in one place. Markdown was rendered server-side in
             pages.py, keyed by message id. #}
          {% include "chat/_thread.html" %}
        </div>
      </div>

      {% include "chat/_composer.html" %}
    {% endif %}
  </main>

  {# Third and fourth children of .shell, mirroring the sidebar opposite. The
     terminal comes first so it sits to the left of the inspector. #}
  {% if terminal_enabled %}
    {% include "chat/_terminal.html" %}
  {% endif %}
  {% if chat and user.is_admin %}
    {% include "chat/_inspector.html" %}
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
{% if terminal_enabled %}
{# Only where it can be used. xterm is nearly three times everything else
   vendored, so a plain chat must never load it. #}
<script src="{{ url_for('static', path='vendor/xterm.js') }}" defer></script>
<script src="{{ url_for('static', path='vendor/xterm-addon-fit.js') }}" defer></script>
<script src="{{ url_for('static', path='js/terminal.js') }}" defer></script>
{% endif %}
{% endblock %}