{% extends 'base.html' %}
{% block title %}Messages · Brain{% endblock %}
{% block body_class %}chat-body{% endblock %}
{% block main %}
<main class="live-chat" id="live-chat"><aside class="live-members"><h1>Messages</h1><p class="muted">One live chat · last 2 hours</p><div id="live-agents">{% for agent in agents %}<div class="live-agent" title="{{ agent.key }}">{% if agent.color %}<i class="agent-dot" style="--agent: {{ agent.color.hex }}"></i>{% endif %}<div class="live-agent-info"><span>{{ agent.name }}</span><small>{{ agent.status }}{% if agent.status == 'idle' %} · will see messages at its next action{% endif %}</small></div>{% if agent.connectable %}<button data-agent="{{ agent.key }}">{{ 'Disconnect' if agent.connected else 'Connect' }}</button>{% endif %}</div>{% endfor %}</div></aside><section class="live-pane"><div class="chat-scroll" id="live-scroll"><div class="chat-items" id="live-items">{% for item in messages %}<article class="bubble {{ 'mine' if item.sender_kind == 'user' else 'theirs' }}{% if item.color %} agent-bubble{% endif %}"{% if item.color %} style="--agent: {{ item.color.hex }}"{% endif %}>{% if item.color %}<div class="b-who"><i class="agent-dot"></i>{{ item.display_name }}</div>{% else %}<div class="b-who">{{ item.display_name }}</div>{% endif %}{% if item.kind == 'event' %}<div class="b-subject">{{ item.headline }}</div>{% endif %}<div class="b-text">{{ item.body }}</div><div class="b-foot">{{ item.created_at | live_time }}{% if item.kind == 'question' and item.status == 'open' %} · Question open{% endif %} · <a href="/messages/thread/{{ item.thread_id | urlencode }}">Open</a></div>{% if item.sender_kind == 'user' and item.recipient == '#live' %}<div class="delivery">{% for status in item.delivery %}<span>{{ 'Received by' if status.state == 'received' else 'Waiting for' }} {% if status.color %}<i class="agent-dot" style="--agent: {{ status.color.hex }}"></i>{% endif %}{{ status.name }}</span>{% else %}Not delivered{% endfor %}</div>{% endif %}</article>{% else %}<p class="muted">No messages in the last 2 hours.</p>{% endfor %}</div></div>{% if dispatch_enabled %}<label>Project directory <input name="project" form="live-form" value="{{ dispatch_project }}" aria-label="Project directory for automatic replies"></label>{% endif %}<form class="chat-input" id="live-form" action="/messages/live/send" method="post"><textarea id="live-body" name="body" rows="1" maxlength="8000" required placeholder="Message the connected agents"></textarea><button>Send</button></form><p class="muted live-note" id="live-note">Agents see messages at their next action. An idle agent waits until you type in its session.</p><p class="chat-error" id="live-error" hidden></p></section></main>
<script id="live-data" type="application/json">{{ {'messages': messages, 'agents': agents, 'connected': connected} | tojson }}</script>
{% endblock %}
{% block scripts %}<script src="{{ asset('chat.js') }}"></script>{% endblock %}