tenkuma/pandora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make generateMessage aware of temp messages, make sent attachements show on chat

Browse source
This commit is contained in:
天クマ 2026-07-14 19:10:59 -03:00
commit fe86db2987
2 changed files with 123 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

84
app.js
View file

@ -39,7 +39,7 @@ function setupEventListeners() {
ui.toggleChatState();
}
});
elements.refreshChatsBtn.addEventListener('click', () => {
elements.refreshChatsBtn.classList.add('spinning');
fetchChats().finally(() => {
@ -48,7 +48,7 @@ function setupEventListeners() {
}, 600);
});
});
elements.chatSearch.addEventListener('input', (e) => {
const query = e.target.value.toLowerCase();
const filtered = chatsState.filter(chat =>
@ -56,24 +56,24 @@ function setupEventListeners() {
);
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`;
`${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();
})
@ -81,12 +81,12 @@ function setupEventListeners() {
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);
@ -112,18 +112,18 @@ function normalizeChatId(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);
@ -132,23 +132,23 @@ function handleIncomingMessage(msg) {
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();
@ -182,13 +182,13 @@ 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'>
@ -205,7 +205,7 @@ async function selectChat(chat) {
if (window.innerWidth <= 768) {
elements.sidebar.classList.add('hidden');
}
try {
const rawMessages = await waha.getChatMessages(chat.id);
const processedMessages = compensateMessageOrdering(rawMessages);
@ -219,9 +219,9 @@ async function selectChat(chat) {
async function sendMessage() {
const text = elements.messageInput.value.trim();
if (!text || !activeChatState) return;
elements.messageInput.value = '';
const tempMsg = {
id: 'temp-' + Date.now(),
body: text,
@ -230,10 +230,10 @@ async function sendMessage() {
timestamp: new Date().toISOString(),
status: 'sending'
};
ui.appendSingleMessage(tempMsg, activeChatState.name, userInfo.id);
ui.scrollToBottom();
try {
try {
await waha.startTyping(activeChatState.id);
@ -242,13 +242,13 @@ async function sendMessage() {
} 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);
@ -256,9 +256,9 @@ async function sendMessage() {
} 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) {
@ -267,7 +267,7 @@ async function sendMessage() {
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();
@ -289,9 +289,29 @@ async function sendMessage() {
async function sendFileMessage(file) {
try {
const tempId = 'temp-' + Date.now();
const tempMsg = {
_data: {
mimetype: file.type
},
id: tempId,
body: "",
fromMe: true,
sender: 'me',
timestamp: new Date().toISOString(),
status: 'sending',
hasMedia: true,
media: {
url: URL.createObjectURL(file),
filename: file.name
}
};
ui.appendSingleMessage(tempMsg, activeChatState.name, userInfo.id, activeChatState.id, true);
ui.scrollToBottom();
const result = await waha.sendFileMessage(activeChatState.id, file);
console.log(result)
// ui.appendSingleMessage(result, activeChatState.name, userInfo.id, activeChatState.id);
ui.updateMessageTick(tempId, result.status);
} catch (error) {
console.error(error.message);
}

102
ui.js
View file

@ -142,11 +142,29 @@ export const ui = {
/**
* Append a single message (used for optimistic updates immediately upon sending)
*/
appendSingleMessage(msg, activeChatName, userID, chatId) {
elements.messagesContainer.appendChild(this.generateMessage(msg, activeChatName, userID, chatId))
appendSingleMessage(msg, activeChatName, userID, chatId, isLocal = false) {
elements.messagesContainer.appendChild(this.generateMessage(msg, activeChatName, userID, chatId, isLocal))
},
generateMessage(msg, activeChatName, userID, chatId) {
generateTempMessageLink(msg) {
const a = document.createElement('a');
a.target = "_blank";
a.href = msg.media.url;
if (msg._data?.mimetype?.startsWith('image/')) {
const img = document.createElement('img');
img.classList.add('message-image-attachement');
img.src = msg.media.url;
a.appendChild(img);
} else {
a.textContent = msg.media.filename || "Download file";
a.download = msg.media.filename;
}
return a;
},
generateMessage(msg, activeChatName, userID, chatId, isLocal = false) {
const isOutgoing = msg.fromMe || msg.sender === 'me';
const groupDiv = document.createElement('div');
@ -187,43 +205,50 @@ export const ui = {
contentEl.appendChild(textEl);
bubble.appendChild(contentEl);
if (msg.hasMedia) {
const a = document.createElement('a');
a.innerText = `[Request media]`;
a.target = "_blank";
if (msg.hasMedia) {
let a;
const clickListener = async (e) => {
a.removeEventListener('click', clickListener);
a.innerText = `[Downloading]`;
const mediaMsg = await waha.getSingleChatMessage(chatId, msg.id, true);
if (isLocal) {
a = this.generateTempMessageLink(msg);
} else {
a = document.createElement('a');
a.innerText = `[Request media]`;
a.target = "_blank";
const url = new URL(mediaMsg.media.url);
const reqID = url.pathname.split('/').filter(Boolean).pop();
const { blob, filename } = await waha.downloadMedia(reqID);
const objectUrl = URL.createObjectURL(blob);
e.target.href = objectUrl;
if (blob.type.startsWith('image/')) {
a.textContent = "";
const img = document.createElement('img');
img.classList.add('message-image-attachement');
img.src = objectUrl;
a.appendChild(img);
} else {
e.target.textContent = filename || `Download ${mediaMsg.media.filename}`;
const clickListener = async (e) => {
a.removeEventListener('click', clickListener);
a.innerText = `[Downloading]`;
const mediaMsg = msg.media ? msg : await waha.getSingleChatMessage(chatId, msg.id, true);
console.log(mediaMsg.media.url);
const url = new URL(mediaMsg.media.url);
const reqID = url.pathname.split('/').filter(Boolean).pop();
const { blob, filename } = await waha.downloadMedia(reqID);
const objectUrl = URL.createObjectURL(blob);
e.target.href = objectUrl;
if (blob.type.startsWith('image/')) {
a.textContent = "";
const img = document.createElement('img');
img.classList.add('message-image-attachement');
img.src = objectUrl;
a.appendChild(img);
} else {
e.target.textContent = filename || `Download ${mediaMsg.media.filename}`;
}
}
a.addEventListener('click', clickListener);
}
contentEl.appendChild(a);
a.addEventListener('click', clickListener);
if (msg._data.mimetype.startsWith('image/')) {
if (!isLocal && msg._data?.mimetype?.startsWith('image/')) {
a.click();
}
}
const meta = document.createElement('div');
meta.className = 'message-meta';
@ -233,7 +258,7 @@ export const ui = {
let uid = "";
function getPrevMessageElem() {
return elements.messagesContainer.lastElementChild; // <‑‑ key change
return elements.messagesContainer.lastElementChild;
}
const prevMsgEl = getPrevMessageElem();
@ -266,6 +291,21 @@ export const ui = {
}
},
updateMessageTick(id, status) {
let statusCheck;
if (status === 'read') {
statusCheck = '<span class="mif-done_all" style="color: var(--online-color); width:14px; height:14px;"></span>';
} else if (status === 'delivered') {
statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
} else if (status === 'sending') {
statusCheck = '<span class="mif-earth" style="width:14px; height:14px;"></span>';
} else {
statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
}
document.getElementById(id).querySelector('.message-meta').outerHTML = statusCheck;
},
toggleChatBottomBar() {
elements.chatBottomBar.classList.toggle("collapsed");
}