326 lines
11 KiB
JavaScript
326 lines
11 KiB
JavaScript
import { config } from "./config.js";
|
|
import { waha } from "./waha.js";
|
|
import { ui, elements } from "./ui.js";
|
|
import { websocket } from "./websocket.js";
|
|
import { compensateMessageOrdering, formatTime } from "./utils.js";
|
|
|
|
let chatsState = [];
|
|
let activeChatState = null;
|
|
let userInfo;
|
|
|
|
// Initialize app when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
setupEventListeners();
|
|
try {
|
|
userInfo = await waha.getMyInfo();
|
|
fetchChats();
|
|
checkWahaStatus();
|
|
initWebSocket();
|
|
} catch (error) {
|
|
console.error('Failed to load chats:', error);
|
|
elements.chatList.innerHTML = `
|
|
<li class="loading-chats" style="color: var(--text-primary); text-align: center; padding: 20px;">
|
|
<p>Connection to WAHA failed.</p>
|
|
<p style="font-size: 0.75rem; color: var(--text-primary); margin-top: 8px;">
|
|
Ensure WAHA server is running and CORS is enabled, or click Settings to configure.
|
|
</p>
|
|
<p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 8px;">${error.message}</p>
|
|
</li>
|
|
`;
|
|
} finally {
|
|
elements.chatsLoader.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
function setupEventListeners() {
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.code == "Escape") {
|
|
e.preventDefault();
|
|
ui.toggleChatState();
|
|
}
|
|
});
|
|
|
|
elements.refreshChatsBtn.addEventListener('click', () => {
|
|
elements.refreshChatsBtn.classList.add('spinning');
|
|
fetchChats().finally(() => {
|
|
setTimeout(() => {
|
|
elements.refreshChatsBtn.classList.remove('spinning');
|
|
}, 600);
|
|
});
|
|
});
|
|
|
|
elements.chatSearch.addEventListener('input', (e) => {
|
|
const query = e.target.value.toLowerCase();
|
|
const filtered = chatsState.filter(chat =>
|
|
chat.name.toLowerCase().includes(query)
|
|
);
|
|
ui.renderChatList(filtered, activeChatState, selectChat);
|
|
});
|
|
|
|
elements.messageForm.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
sendMessage();
|
|
});
|
|
|
|
elements.chatBottomBar.style.height = `${elements.chatInputPanel.offsetHeight}px`;
|
|
const observer = new ResizeObserver(() => {
|
|
elements.chatBottomBar.style.height =
|
|
`${elements.chatInputPanel.offsetHeight}px`;
|
|
});
|
|
|
|
observer.observe(elements.chatInputPanel);
|
|
elements.chatBottomBarBtn.addEventListener('click', ui.toggleChatBottomBar);
|
|
elements.chatBottomBar.addEventListener('click', (e) => {
|
|
if (e.target == e.currentTarget) ui.toggleChatBottomBar();
|
|
});
|
|
|
|
elements.attachmentBtn.addEventListener('click', () => {
|
|
elements.attachmentInput.click();
|
|
})
|
|
elements.attachmentInput.addEventListener('change', function () {
|
|
const firstFile = this.files[0];
|
|
sendFileMessage(firstFile);
|
|
})
|
|
|
|
elements.backToSidebarBtn.addEventListener('click', () => {
|
|
elements.sidebar.classList.remove('hidden');
|
|
elements.activeChatContainer.classList.add('hidden');
|
|
});
|
|
|
|
elements.settingsIconBtn.addEventListener('click', openSettings);
|
|
elements.cancelSettingsBtn.addEventListener('click', () => ui.toggleModal(false));
|
|
elements.saveSettingsBtn.addEventListener('click', saveSettings);
|
|
}
|
|
|
|
function initWebSocket() {
|
|
websocket.connect((data) => {
|
|
// console.log('[WS] Received event:', data.event, data);
|
|
const ev = data.event;
|
|
if (ev === 'message' || ev === 'message.any' || ev === 'message.ack') {
|
|
handleIncomingMessage(data.payload);
|
|
}
|
|
});
|
|
}
|
|
|
|
function normalizeChatId(raw) {
|
|
if (!raw) return null;
|
|
if (typeof raw === 'object') {
|
|
return raw._serialized || raw.user || JSON.stringify(raw);
|
|
}
|
|
return raw;
|
|
}
|
|
|
|
function handleIncomingMessage(msg) {
|
|
if (!msg) return;
|
|
|
|
// console.log('[WS] handleIncomingMessage payload:', msg);
|
|
|
|
const rawChatId = msg.chatId || msg.from || (msg.chat && msg.chat.id);
|
|
const msgChatId = normalizeChatId(rawChatId);
|
|
if (!msgChatId) {
|
|
console.warn('[WS] Could not resolve chatId from payload:', msg);
|
|
return;
|
|
}
|
|
|
|
// console.log('[WS] Resolved msgChatId:', msgChatId, '| activeChatState:', activeChatState?.id);
|
|
|
|
if (activeChatState && activeChatState.id === msgChatId) {
|
|
const msgId = normalizeChatId(msg.id) || msg.id;
|
|
const exists = document.getElementById(msgId);
|
|
if (!exists) {
|
|
ui.appendSingleMessage({ ...msg, chatId: msgChatId }, activeChatState.name, userInfo.id);
|
|
ui.scrollToBottom();
|
|
}
|
|
}
|
|
|
|
const chatIndex = chatsState.findIndex(c => c.id === msgChatId);
|
|
if (chatIndex !== -1) {
|
|
const chat = chatsState[chatIndex];
|
|
chat.lastMessage = msg.body || msg.text || 'Media message';
|
|
chat.timestamp = msg.timestamp ? (msg.timestamp * 1000) : Date.now();
|
|
|
|
if (!msg.fromMe && (!activeChatState || activeChatState.id !== msgChatId)) {
|
|
chat.unreadCount = (chat.unreadCount || 0) + 1;
|
|
}
|
|
|
|
chatsState.sort((a, b) => {
|
|
const tA = new Date(a.timestamp).getTime();
|
|
const tB = new Date(b.timestamp).getTime();
|
|
return tB - tA;
|
|
});
|
|
|
|
// ui.renderChatList(chatsState, activeChatState, selectChat);
|
|
} else {
|
|
// fetchChats();
|
|
}
|
|
}
|
|
|
|
async function fetchChats() {
|
|
try {
|
|
elements.loggedUserName.textContent = userInfo.pushName;
|
|
// elements.userIcon.innerText = userInfo.pushName[0];
|
|
elements.chatsLoader.classList.remove('hidden');
|
|
chatsState = await waha.getChats();
|
|
ui.renderChatList(chatsState, activeChatState, selectChat);
|
|
} catch (error) {
|
|
console.error('Failed to load chats:', error);
|
|
elements.chatList.innerHTML = `
|
|
<li class="loading-chats" style="color: var(--text-primary); text-align: center; padding: 20px;">
|
|
<p>Connection to WAHA failed.</p>
|
|
<p style="font-size: 0.75rem; color: var(--text-primary); margin-top: 8px;">
|
|
Ensure WAHA server is running and CORS is enabled, or click Settings to configure.
|
|
</p>
|
|
<p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 8px;">${error.message}</p>
|
|
</li>
|
|
`;
|
|
} finally {
|
|
elements.chatsLoader.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
async function selectChat(chat) {
|
|
activeChatState = chat;
|
|
|
|
chat.unreadCount = 0;
|
|
|
|
// ui.renderChatList(chatsState, activeChatState, selectChat);
|
|
|
|
ui.toggleChatState(true);
|
|
elements.activeChatName.textContent = chat.name.toUpperCase();
|
|
elements.activeChatAvatar.textContent = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?';
|
|
|
|
elements.messagesContainer.innerHTML = `
|
|
<div class="loading-chats">
|
|
<div class='dots'>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<span>Loading messages...
|
|
</span>
|
|
</div>`;
|
|
|
|
if (window.innerWidth <= 768) {
|
|
elements.sidebar.classList.add('hidden');
|
|
}
|
|
|
|
try {
|
|
const rawMessages = await waha.getChatMessages(chat.id);
|
|
const processedMessages = compensateMessageOrdering(rawMessages);
|
|
ui.renderMessages(processedMessages, chat.name, userInfo.id, chat.id);
|
|
} catch (error) {
|
|
console.error('Failed to load messages:', error);
|
|
elements.messagesContainer.innerHTML = '<div class="loading-chats">Error loading messages</div>';
|
|
}
|
|
}
|
|
|
|
async function sendMessage() {
|
|
const text = elements.messageInput.value.trim();
|
|
if (!text || !activeChatState) return;
|
|
|
|
elements.messageInput.value = '';
|
|
|
|
const tempMsg = {
|
|
id: 'temp-' + Date.now(),
|
|
body: text,
|
|
fromMe: true,
|
|
sender: 'me',
|
|
timestamp: new Date().toISOString(),
|
|
status: 'sending'
|
|
};
|
|
|
|
ui.appendSingleMessage(tempMsg, activeChatState.name, userInfo.id);
|
|
ui.scrollToBottom();
|
|
|
|
try {
|
|
try {
|
|
await waha.startTyping(activeChatState.id);
|
|
const delay = Math.min(4000, Math.max(1000, text.length * 50));
|
|
await new Promise(resolve => setTimeout(resolve, delay));
|
|
} catch (e) {
|
|
console.warn('Presence start failed:', e);
|
|
}
|
|
|
|
try {
|
|
await waha.stopTyping(activeChatState.id);
|
|
} catch (e) {
|
|
console.warn('Presence stop failed:', e);
|
|
}
|
|
|
|
try {
|
|
if (!activeChatState.id.endsWith('@lid')) {
|
|
await waha.readChat(activeChatState.id);
|
|
}
|
|
} catch (e) {
|
|
console.warn('readChat failed (non-fatal):', e.message);
|
|
}
|
|
|
|
const responseData = await waha.sendTextMessage(activeChatState.id, text);
|
|
|
|
const tempBubble = document.getElementById(tempMsg.id);
|
|
if (tempBubble) {
|
|
if (responseData && responseData.id) {
|
|
tempBubble.id = responseData.id;
|
|
}
|
|
const meta = tempBubble.querySelector('.message-meta');
|
|
meta.innerHTML = `<span>${formatTime(new Date())}</span><span style="width:14px; height:14px;" class="mif-done">`;
|
|
}
|
|
|
|
activeChatState.lastMessage = text;
|
|
activeChatState.timestamp = new Date();
|
|
|
|
chatsState.sort((a, b) => {
|
|
const tA = new Date(a.timestamp).getTime();
|
|
const tB = new Date(b.timestamp).getTime();
|
|
return tB - tA;
|
|
});
|
|
// ui.renderChatList(chatsState, activeChatState, selectChat);
|
|
} catch (error) {
|
|
console.error('Failed to send message:', error);
|
|
const tempBubble = document.getElementById(tempMsg.id);
|
|
if (tempBubble) {
|
|
const meta = tempBubble.querySelector('.message-meta');
|
|
meta.innerHTML = `<span style="color: #ef4444;">Failed to send</span>`;
|
|
}
|
|
}
|
|
}
|
|
|
|
async function sendFileMessage(file) {
|
|
try {
|
|
const result = await waha.sendFileMessage(activeChatState.id, file);
|
|
console.log(result)
|
|
// ui.appendSingleMessage(result, activeChatState.name, userInfo.id, activeChatState.id);
|
|
} catch (error) {
|
|
console.error(error.message);
|
|
}
|
|
}
|
|
|
|
function openSettings() {
|
|
elements.inputWahaUrl.value = config.wahaUrl;
|
|
elements.inputSession.value = config.session;
|
|
elements.inputApiKey.value = config.apiKey;
|
|
ui.toggleModal(true);
|
|
}
|
|
|
|
function saveSettings() {
|
|
config.save(
|
|
elements.inputWahaUrl.value,
|
|
elements.inputSession.value,
|
|
elements.inputApiKey.value
|
|
);
|
|
ui.toggleModal(false);
|
|
fetchChats();
|
|
checkWahaStatus();
|
|
initWebSocket();
|
|
}
|
|
|
|
async function checkWahaStatus() {
|
|
try {
|
|
const data = await waha.getVersion();
|
|
ui.updateConnectionStatus(true, `WAHA Connected: v${data.version || 'OK'}`);
|
|
} catch (e) {
|
|
ui.updateConnectionStatus(false, 'WAHA Server Offline');
|
|
}
|
|
}
|