230 lines
7.4 KiB
JavaScript
230 lines
7.4 KiB
JavaScript
import { renderHeader } from '../components/header.js';
|
||
import { directMessages } from '../mock-data.js';
|
||
import {
|
||
addAppLogEntry,
|
||
addChatMessage,
|
||
addOutgoingPendingMessage,
|
||
getChatMessages,
|
||
markChatRead,
|
||
markOutgoingSent,
|
||
authService,
|
||
state,
|
||
} from '../state.js';
|
||
import { startOutgoingCall, hangupActiveCall } from '../services/call-service.js';
|
||
|
||
export const pageMeta = { id: 'chat-view', title: 'Чат' };
|
||
|
||
function parseBaseKey(baseKey) {
|
||
const raw = String(baseKey || '').trim();
|
||
const parts = raw.split('|');
|
||
if (parts.length < 4) return null;
|
||
const fromLogin = parts[0] || '';
|
||
const toLogin = parts[1] || '';
|
||
const timeMs = Number(parts[2] || 0);
|
||
const nonce = Number(parts[3] || 0);
|
||
if (!fromLogin || !toLogin || !Number.isFinite(timeMs) || !Number.isFinite(nonce)) return null;
|
||
return { fromLogin, toLogin, timeMs, nonce };
|
||
}
|
||
|
||
function renderLog(list, chatId) {
|
||
list.innerHTML = '';
|
||
const messages = getChatMessages(chatId);
|
||
let unreadSeparatorInserted = false;
|
||
messages.forEach((msg) => {
|
||
if (!unreadSeparatorInserted && msg?.from === 'in' && msg?.unread) {
|
||
const sep = document.createElement('div');
|
||
sep.className = 'meta-muted';
|
||
sep.style.textAlign = 'center';
|
||
sep.style.margin = '8px 0';
|
||
sep.textContent = 'Новые сообщения';
|
||
list.append(sep);
|
||
unreadSeparatorInserted = true;
|
||
}
|
||
|
||
const bubble = document.createElement('div');
|
||
bubble.className = `bubble ${msg.from}`;
|
||
let text = msg.text || '';
|
||
if (msg.from === 'out') {
|
||
if (msg.secondTick) text += ' ✓✓';
|
||
else if (msg.firstTick) text += ' ✓';
|
||
else text += ' …';
|
||
}
|
||
bubble.textContent = text;
|
||
list.append(bubble);
|
||
});
|
||
list.scrollTop = list.scrollHeight;
|
||
markChatRead(chatId);
|
||
}
|
||
|
||
export function render({ navigate, route }) {
|
||
const chatId = route.params.chatId || 'u1';
|
||
const contact = directMessages.find((d) => d.id === chatId) || {
|
||
id: chatId,
|
||
name: chatId,
|
||
initials: (chatId[0] || '?').toUpperCase(),
|
||
};
|
||
|
||
const screen = document.createElement('section');
|
||
screen.className = 'stack';
|
||
const isKnownContact = (state.contacts || []).some((x) => String(x || '').toLowerCase() === String(chatId || '').toLowerCase());
|
||
|
||
screen.append(
|
||
renderHeader({
|
||
title: `Чат: ${contact.name}`,
|
||
leftAction: { label: '←', onClick: () => navigate('messages-list') },
|
||
rightActions: [{
|
||
label: 'Позвонить',
|
||
onClick: async () => {
|
||
const confirmed = window.confirm('Позвонить этому пользователю?');
|
||
if (!confirmed) return;
|
||
try {
|
||
await startOutgoingCall(chatId);
|
||
renderLog(log, chatId);
|
||
} catch (e) {
|
||
addChatMessage(chatId, `[call] Ошибка звонка: ${e.message || 'unknown'}`);
|
||
renderLog(log, chatId);
|
||
}
|
||
},
|
||
}, {
|
||
label: 'Сброс',
|
||
onClick: async () => {
|
||
try {
|
||
await hangupActiveCall();
|
||
renderLog(log, chatId);
|
||
} catch (e) {
|
||
addChatMessage(chatId, `[call] Ошибка сброса: ${e.message || 'unknown'}`);
|
||
renderLog(log, chatId);
|
||
}
|
||
},
|
||
}],
|
||
})
|
||
);
|
||
|
||
if (!isKnownContact) {
|
||
const card = document.createElement('div');
|
||
card.className = 'card';
|
||
const btn = document.createElement('button');
|
||
btn.className = 'secondary-btn';
|
||
btn.type = 'button';
|
||
btn.textContent = 'Добавить в контакты';
|
||
btn.addEventListener('click', async () => {
|
||
try {
|
||
await authService.addCloseFriend(chatId);
|
||
state.contacts = [...new Set([...(state.contacts || []), chatId])];
|
||
addAppLogEntry({
|
||
level: 'info',
|
||
source: 'contacts',
|
||
message: `Пользователь ${chatId} добавлен в контакты`,
|
||
});
|
||
btn.disabled = true;
|
||
btn.textContent = 'Добавлено';
|
||
} catch (e) {
|
||
addAppLogEntry({
|
||
level: 'warn',
|
||
source: 'contacts',
|
||
message: 'Не удалось добавить пользователя в контакты',
|
||
details: { login: chatId, error: e?.message || 'unknown' },
|
||
});
|
||
}
|
||
});
|
||
card.append(btn);
|
||
screen.append(card);
|
||
}
|
||
|
||
const wrap = document.createElement('div');
|
||
wrap.className = 'chat-wrap';
|
||
|
||
const log = document.createElement('div');
|
||
log.className = 'messages-log';
|
||
|
||
const form = document.createElement('form');
|
||
form.className = 'chat-input';
|
||
form.innerHTML = `
|
||
<input class="input" type="text" name="message" placeholder="Введите сообщение" maxlength="300" />
|
||
<button class="primary-btn" type="submit">Отправить</button>
|
||
`;
|
||
|
||
form.addEventListener('submit', async (event) => {
|
||
event.preventDefault();
|
||
const input = form.elements.message;
|
||
const text = input.value.trim();
|
||
if (!text) return;
|
||
|
||
const tempId = addOutgoingPendingMessage(chatId, text);
|
||
input.value = '';
|
||
renderLog(log, chatId);
|
||
|
||
try {
|
||
const result = await authService.sendDirectMessage({
|
||
login: state.session.login,
|
||
toLogin: chatId,
|
||
text,
|
||
storagePwd: state.session.storagePwdInMemory,
|
||
});
|
||
markOutgoingSent(tempId, {
|
||
messageKey: result?.outgoingKey || '',
|
||
baseKey: result?.baseKey || result?.localBaseKey || '',
|
||
});
|
||
renderLog(log, chatId);
|
||
addAppLogEntry({
|
||
level: 'info',
|
||
source: 'outgoing-dm',
|
||
message: `Сообщение отправлено для ${chatId}`,
|
||
details: {
|
||
toLogin: chatId,
|
||
messageId: result?.outgoingKey || '',
|
||
deliveredWsSessions: Number(result?.deliveredWsSessions || 0),
|
||
deliveredWebPushSessions: Number(result?.deliveredWebPushSessions || 0),
|
||
},
|
||
});
|
||
} catch (e) {
|
||
addChatMessage(chatId, `Ошибка отправки: ${e.message || 'unknown'}`);
|
||
addAppLogEntry({
|
||
level: 'warn',
|
||
source: 'outgoing-dm',
|
||
message: 'Ошибка отправки личного сообщения',
|
||
details: {
|
||
toLogin: chatId,
|
||
error: e?.message || 'unknown',
|
||
},
|
||
});
|
||
renderLog(log, chatId);
|
||
}
|
||
});
|
||
|
||
renderLog(log, chatId);
|
||
void sendReadReceiptsForVisible();
|
||
wrap.append(log, form);
|
||
screen.append(wrap);
|
||
return screen;
|
||
}
|
||
async function sendReadReceiptsForVisible() {
|
||
const pending = getChatMessages(chatId)
|
||
.filter((row) => row?.from === 'in' && Number(row?.messageType) === 1 && !row?.readReceiptSent)
|
||
.slice(0, 50);
|
||
for (const row of pending) {
|
||
const ref = parseBaseKey(row.baseKey);
|
||
if (!ref) continue;
|
||
try {
|
||
await authService.sendReadReceipt({
|
||
login: state.session.login,
|
||
toLogin: ref.fromLogin,
|
||
storagePwd: state.session.storagePwdInMemory,
|
||
refToLogin: ref.toLogin,
|
||
refFromLogin: ref.fromLogin,
|
||
refTimeMs: ref.timeMs,
|
||
refNonce: ref.nonce,
|
||
refType: 1,
|
||
});
|
||
row.readReceiptSent = true;
|
||
} catch (e) {
|
||
addAppLogEntry({
|
||
level: 'warn',
|
||
source: 'read-receipt',
|
||
message: 'Не удалось отправить подтверждение прочтения',
|
||
details: { chatId, messageKey: row.messageKey || '', error: e?.message || 'unknown' },
|
||
});
|
||
}
|
||
}
|
||
}
|