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`;
const observer = new ResizeObserver(() => {
elements.chatBottomBar.style.height =
`${elements.chatInputPanel.offsetHeight}px`;
`${elements.chatInputPanel.offsetHeight}px`;
});
observer.observe(elements.chatInputPanel);
@ -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);
}

92
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');
@ -188,38 +206,45 @@ export const ui = {
bubble.appendChild(contentEl);
if (msg.hasMedia) {
const a = document.createElement('a');
a.innerText = `[Request media]`;
a.target = "_blank";
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 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 { blob, filename } = await waha.downloadMedia(reqID);
const objectUrl = URL.createObjectURL(blob);
e.target.href = objectUrl;
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}`;
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();
}
}
@ -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");
}