Hide user name on subsequent messages

This commit is contained in:
天クマ 2026-07-16 08:49:47 -03:00
commit 819c16d02f
2 changed files with 25 additions and 17 deletions

View file

@ -536,6 +536,9 @@ input:focus {
} }
.message-bubble { .message-bubble {
display: flex;
flex-direction: column;
gap: .4em;
padding: 12px 16px; padding: 12px 16px;
font-size: 0.92rem; font-size: 0.92rem;
line-height: 1.5; line-height: 1.5;
@ -582,7 +585,6 @@ input:focus {
justify-content: flex-end; justify-content: flex-end;
gap: 4px; gap: 4px;
font-size: 0.7rem; font-size: 0.7rem;
margin-top: 4px;
} }
.message-image-attachement { .message-image-attachement {

38
ui.js
View file

@ -120,7 +120,7 @@ export const ui = {
elements.chatList.appendChild(li); elements.chatList.appendChild(li);
} }
}, },
async updateChatInChatList(msg) { async updateChatInChatList(msg) {
const li = document.getElementById(msg.from); const li = document.getElementById(msg.from);
li.querySelector(".chat-item-msg").innerText = msg.body; li.querySelector(".chat-item-msg").innerText = msg.body;
@ -173,12 +173,18 @@ export const ui = {
generateMessage(msg, activeChatName, userID, chatId, isLocal = false) { generateMessage(msg, activeChatName, userID, chatId, isLocal = false) {
const isOutgoing = msg.fromMe || msg.sender === 'me'; const isOutgoing = msg.fromMe || msg.sender === 'me';
function getPrevMessageElem() {
return elements.messagesContainer.lastElementChild;
}
const prevMsgEl = getPrevMessageElem();
const groupDiv = document.createElement('div'); const groupDiv = document.createElement('div');
groupDiv.className = `message-group ${isOutgoing ? 'outgoing' : 'incoming'}`; groupDiv.className = `message-group ${isOutgoing ? 'outgoing' : 'incoming'}`;
groupDiv.id = msg.id; groupDiv.id = msg.id;
groupDiv.dataset.from = msg.participant || msg.from; groupDiv.dataset.from = msg.participant || msg.from;
const senderName = isOutgoing ? userID : (msg._data.notifyName || activeChatName); const senderName = isOutgoing ? userID : (msg._data.notifyName || msg.from);
const timeStr = formatTime(msg.timestamp || new Date()); const timeStr = formatTime(msg.timestamp || new Date());
let statusCheck = ''; let statusCheck = '';
@ -196,8 +202,16 @@ export const ui = {
const bubble = document.createElement('div'); const bubble = document.createElement('div');
bubble.className = 'message-bubble'; bubble.className = 'message-bubble';
let prevUid;
if (!isOutgoing) { if (msg.participant) {
prevUid = msg.participant;
} else {
prevUid = msg.from;
}
if (!isOutgoing && (!prevMsgEl || prevUid !== prevMsgEl.dataset.from)) {
const senderEl = document.createElement('span'); const senderEl = document.createElement('span');
senderEl.className = 'message-sender'; senderEl.className = 'message-sender';
senderEl.textContent = senderName; senderEl.textContent = senderName;
@ -239,7 +253,8 @@ export const ui = {
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); bubble.after(img);
bubble.querySelector('.message-content').remove();
} else { } else {
e.target.textContent = filename || `Download ${mediaMsg.media.filename}`; e.target.textContent = filename || `Download ${mediaMsg.media.filename}`;
} }
@ -261,13 +276,6 @@ export const ui = {
meta.innerHTML = `<span>${timeStr}</span>${statusCheck}`; meta.innerHTML = `<span>${timeStr}</span>${statusCheck}`;
bubble.appendChild(meta); bubble.appendChild(meta);
let uid = "";
function getPrevMessageElem() {
return elements.messagesContainer.lastElementChild;
}
const prevMsgEl = getPrevMessageElem();
if (isOutgoing) { if (isOutgoing) {
if (prevMsgEl && prevMsgEl.classList.contains('outgoing')) { if (prevMsgEl && prevMsgEl.classList.contains('outgoing')) {
@ -275,13 +283,11 @@ export const ui = {
groupDiv.appendChild(document.createElement('div')).className = 'message-indicator'; groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
} }
} else if (msg.participant) { } else if (msg.participant) {
uid = msg.participant; if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
if (!prevMsgEl || uid !== prevMsgEl.dataset.from) {
groupDiv.appendChild(document.createElement('div')).className = 'message-indicator'; groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
} }
} else { } else {
uid = msg.from; if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
if (!prevMsgEl || uid !== prevMsgEl.dataset.from) {
groupDiv.appendChild(document.createElement('div')).className = 'message-indicator'; groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
} }
} }
@ -308,7 +314,7 @@ export const ui = {
} else { } else {
statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>'; statusCheck = '<span class="mif-done" style="width:14px; height:14px;"></span>';
} }
document.getElementById(id).querySelector('.message-meta').outerHTML = statusCheck; document.getElementById(id).querySelector('.message-meta').outerHTML = statusCheck;
}, },