92 lines
4 KiB
HTML
92 lines
4 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Чат — {{ bot_user.first_name or bot_user.username or max_user_id if bot_user else max_user_id }}{% endblock %}
|
||
{% block content %}
|
||
|
||
<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
|
||
<a href="/admin/chat-log" class="btn btn-secondary">← К списку</a>
|
||
<div>
|
||
<strong>
|
||
{{ bot_user.first_name or bot_user.username or ('MAX ID: ' ~ max_user_id) if bot_user else ('MAX ID: ' ~ max_user_id) }}
|
||
</strong>
|
||
{% if bot_user %}
|
||
<span style="color:#666;font-size:.85rem;margin-left:8px">
|
||
MAX ID: {{ max_user_id }}
|
||
{% if bot_user.phone %} · {{ bot_user.phone }}{% endif %}
|
||
{% if bot_user.org_name %} · {{ bot_user.org_name }}{% endif %}
|
||
</span>
|
||
<span style="margin-left:8px">
|
||
{% if bot_user.is_blocked %}
|
||
<span class="badge badge-blocked">Заблокирован</span>
|
||
{% elif bot_user.is_authorized %}
|
||
<span class="badge badge-auth">Авторизован</span>
|
||
{% else %}
|
||
<span class="badge badge-pending">Ожидает</span>
|
||
{% endif %}
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
|
||
{# Лента сообщений #}
|
||
<div class="card" style="padding:16px;margin-bottom:12px">
|
||
<div style="display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;padding-right:4px" id="chat-feed">
|
||
{% for msg in messages|reverse %}
|
||
<div style="display:flex;{% if msg.direction == 'out' %}justify-content:flex-end{% endif %}">
|
||
<div style="
|
||
max-width:72%;
|
||
padding:10px 14px;
|
||
border-radius:12px;
|
||
font-size:.9rem;
|
||
line-height:1.5;
|
||
word-break:break-word;
|
||
{% if msg.direction == 'out' %}
|
||
background:#1a73e8;color:white;border-bottom-right-radius:2px;
|
||
{% else %}
|
||
background:#f1f3f4;color:#333;border-bottom-left-radius:2px;
|
||
{% endif %}
|
||
">
|
||
{% if msg.direction == 'out' %}
|
||
<div style="font-size:.7rem;opacity:.7;margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em">Поддержка</div>
|
||
{% endif %}
|
||
{% if msg.text %}<div style="white-space:pre-wrap">{{ msg.text }}</div>{% endif %}
|
||
{% if msg.attachment_json and msg.attachment_json != 'null' %}
|
||
<div style="font-size:.8rem;opacity:.8;margin-top:4px">📎 Вложение</div>
|
||
{% endif %}
|
||
<div style="font-size:.72rem;opacity:.65;margin-top:6px;text-align:right">
|
||
{{ msg.created_at[:16] }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% else %}
|
||
<p style="color:#999;text-align:center;margin:32px 0">История пуста</p>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
{# Форма отправки #}
|
||
{% if bot_user and bot_user.max_chat_id %}
|
||
<div class="card" style="padding:16px">
|
||
<form action="/admin/chat-log/{{ max_user_id }}/send" method="post"
|
||
style="display:flex;gap:8px;align-items:flex-end">
|
||
<textarea name="text" rows="3" required placeholder="Напишите сообщение от лица бота..."
|
||
style="flex:1;resize:vertical;padding:8px 12px;border:1px solid #ddd;border-radius:8px;font-size:.9rem;font-family:inherit"
|
||
onkeydown="if(event.ctrlKey&&event.key==='Enter'){this.form.submit()}"></textarea>
|
||
<button class="btn btn-primary" type="submit" style="height:fit-content;padding:10px 20px">
|
||
Отправить
|
||
</button>
|
||
</form>
|
||
<div style="font-size:.75rem;color:#999;margin-top:6px">Ctrl+Enter для отправки</div>
|
||
</div>
|
||
{% else %}
|
||
<div class="card" style="padding:16px;color:#999;font-size:.9rem">
|
||
ℹ️ Отправка недоступна: нет chat_id (пользователь ещё не начал диалог с ботом).
|
||
</div>
|
||
{% endif %}
|
||
|
||
<script>
|
||
// Прокрутить ленту вниз при загрузке
|
||
const feed = document.getElementById('chat-feed');
|
||
if (feed) feed.scrollTop = feed.scrollHeight;
|
||
</script>
|
||
|
||
{% endblock %}
|