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

26
app.js
View file

@ -65,7 +65,7 @@ function setupEventListeners() {
elements.chatBottomBar.style.height = `${elements.chatInputPanel.offsetHeight}px`; elements.chatBottomBar.style.height = `${elements.chatInputPanel.offsetHeight}px`;
const observer = new ResizeObserver(() => { const observer = new ResizeObserver(() => {
elements.chatBottomBar.style.height = elements.chatBottomBar.style.height =
`${elements.chatInputPanel.offsetHeight}px`; `${elements.chatInputPanel.offsetHeight}px`;
}); });
observer.observe(elements.chatInputPanel); observer.observe(elements.chatInputPanel);
@ -289,9 +289,29 @@ async function sendMessage() {
async function sendFileMessage(file) { async function sendFileMessage(file) {
try { 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); const result = await waha.sendFileMessage(activeChatState.id, file);
console.log(result) ui.updateMessageTick(tempId, result.status);
// ui.appendSingleMessage(result, activeChatState.name, userInfo.id, activeChatState.id);
} catch (error) { } catch (error) {
console.error(error.message); console.error(error.message);
} }

92
ui.js
View file

@ -142,11 +142,29 @@ export const ui = {
/** /**
* Append a single message (used for optimistic updates immediately upon sending) * Append a single message (used for optimistic updates immediately upon sending)
*/ */
appendSingleMessage(msg, activeChatName, userID, chatId) { appendSingleMessage(msg, activeChatName, userID, chatId, isLocal = false) {
elements.messagesContainer.appendChild(this.generateMessage(msg, activeChatName, userID, chatId)) 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 isOutgoing = msg.fromMe || msg.sender === 'me';
const groupDiv = document.createElement('div'); const groupDiv = document.createElement('div');
@ -188,38 +206,45 @@ export const ui = {
bubble.appendChild(contentEl); bubble.appendChild(contentEl);
if (msg.hasMedia) { if (msg.hasMedia) {
const a = document.createElement('a'); let a;
a.innerText = `[Request media]`;
a.target = "_blank";
const clickListener = async (e) => { if (isLocal) {
a.removeEventListener('click', clickListener); a = this.generateTempMessageLink(msg);
a.innerText = `[Downloading]`; } else {
const mediaMsg = await waha.getSingleChatMessage(chatId, msg.id, true); a = document.createElement('a');
a.innerText = `[Request media]`;
a.target = "_blank";
const url = new URL(mediaMsg.media.url); const clickListener = async (e) => {
const reqID = url.pathname.split('/').filter(Boolean).pop(); 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 { blob, filename } = await waha.downloadMedia(reqID);
const objectUrl = URL.createObjectURL(blob); const objectUrl = URL.createObjectURL(blob);
e.target.href = objectUrl; e.target.href = objectUrl;
if (blob.type.startsWith('image/')) { if (blob.type.startsWith('image/')) {
a.textContent = ""; a.textContent = "";
const img = document.createElement('img'); const img = document.createElement('img');
img.classList.add('message-image-attachement'); img.classList.add('message-image-attachement');
img.src = objectUrl; img.src = objectUrl;
a.appendChild(img); a.appendChild(img);
} else { } else {
e.target.textContent = filename || `Download ${mediaMsg.media.filename}`; e.target.textContent = filename || `Download ${mediaMsg.media.filename}`;
}
} }
a.addEventListener('click', clickListener);
} }
contentEl.appendChild(a); contentEl.appendChild(a);
a.addEventListener('click', clickListener);
if (msg._data.mimetype.startsWith('image/')) { if (!isLocal && msg._data?.mimetype?.startsWith('image/')) {
a.click(); a.click();
} }
} }
@ -233,7 +258,7 @@ export const ui = {
let uid = ""; let uid = "";
function getPrevMessageElem() { function getPrevMessageElem() {
return elements.messagesContainer.lastElementChild; // <‑‑ key change return elements.messagesContainer.lastElementChild;
} }
const prevMsgEl = getPrevMessageElem(); 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() { toggleChatBottomBar() {
elements.chatBottomBar.classList.toggle("collapsed"); elements.chatBottomBar.classList.toggle("collapsed");
} }