|
{% extends "base.html" %}
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{{ static_url('/static/css/messages.css') }}">
|
|
{% endblock %}
|
|
{% block footer %}{% endblock %}
|
|
{% block content %}
|
|
<h1 class="sr-only">Messages</h1>
|
|
<div class="page-messages">
|
|
<div class="messages-layout" data-self-uid="{{ user['uid'] }}"{% if current_conversation %} data-other-uid="{{ current_conversation }}" data-other-online="{{ '1' if other_online else '0' }}"{% if other_last_seen %} data-other-last-seen="{{ other_last_seen }}"{% endif %}{% endif %}>
|
|
<div class="messages-list">
|
|
<div class="messages-list-header">
|
|
<input type="text" id="message-search" placeholder="Search conversations..." value="{{ search }}">
|
|
</div>
|
|
|
|
<div class="messages-conversations">
|
|
{% for conv in conversations %}
|
|
<a href="/messages?with_uid={{ conv.other_user['uid'] }}" class="conversation-item {% if current_conversation == conv.other_user['uid'] %}active{% endif %}" data-conv-uid="{{ conv.other_user['uid'] }}">
|
|
<img src="{{ avatar_url('multiavatar', conv.other_user['username'], 32) }}" class="avatar-img avatar-sm" alt="{{ conv.other_user['username'] }}" loading="lazy">
|
|
<div class="conversation-info">
|
|
<div class="conversation-name">{{ conv.other_user['username'] }}</div>
|
|
<div class="conversation-preview">{{ conv.last_message[:60] }}</div>
|
|
</div>
|
|
<span class="conversation-unread-dot"{% if not conv.unread %} hidden{% endif %}></span>
|
|
<span class="conversation-time">{{ format_date(conv.last_message_at) }}</span>
|
|
</a>
|
|
{% else %}
|
|
<div class="empty-state" style="border: none;">No conversations yet</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="messages-main">
|
|
{% if other_user %}
|
|
<div class="messages-main-header">
|
|
<button type="button" class="messages-back-btn" id="messages-back-btn" aria-label="Back to conversations">←</button>
|
|
{% set _user = other_user %}{% set _size = 32 %}{% set _size_class = "sm" %}{% include "_avatar_link.html" %}
|
|
<div class="messages-header-info">
|
|
<h3>{% set _user = other_user %}{% set _class = none %}{% include "_user_link.html" %}</h3>
|
|
<span class="messages-presence" id="messages-presence"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="messages-thread">
|
|
{% for msg in messages %}
|
|
<div class="message-bubble {% if msg.is_mine %}mine{% else %}theirs{% endif %}" data-msg-uid="{{ msg.message['uid'] }}">
|
|
<div class="rendered-content" data-render>{{ msg.message['content'] }}</div>
|
|
{% if msg.attachments %}
|
|
{% with attachments=msg.attachments %}
|
|
{% include "_attachment_display.html" %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
<span class="message-time">{{ msg.time_ago }}</span>
|
|
{% if msg.is_mine %}<span class="message-receipt"{% if not msg.message['read'] %} hidden{% endif %}>✓✓</span>{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
<div class="typing-indicator" id="typing-indicator" hidden><span></span><span></span><span></span></div>
|
|
</div>
|
|
|
|
<form class="messages-input-area" method="POST" action="/messages/send" data-live-form>
|
|
<input type="hidden" name="receiver_uid" value="{{ other_user['uid'] }}">
|
|
<input type="text" name="content" placeholder="Type a message..." maxlength="2000" autocomplete="off" data-mention>
|
|
<dp-upload multiple hide-chips
|
|
max-size="{{ max_upload_size_mb() }}"
|
|
max-files="5"
|
|
allowed-types="{{ allowed_file_types() }}"></dp-upload>
|
|
<button type="submit" class="messages-send-btn" aria-label="Send"><span class="send-icon">➤</span><span class="send-spinner" aria-hidden="true"></span></button>
|
|
</form>
|
|
{% else %}
|
|
<div class="messages-empty">
|
|
<p>Select a conversation to start chatting</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|