diff --git a/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte b/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte index 1c74f395..8d7d2e9b 100644 --- a/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte +++ b/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte @@ -74,6 +74,11 @@
+ {#if isHeadNeeded && !isOwn && sender} +

+ {sender.name} +

+ {/if}
m.id === userId); messages = [ ...messages, { id: `msg-${Date.now()}`, isOwn: true, - userImgSrc: group.members.find((m) => m.id === userId)?.avatar || '', + userImgSrc: currentMember?.avatar || '', time: 'just now', - message: messageValue + message: messageValue, + senderId: userId, + senderName: currentMember?.name || '', + senderHandle: `@${currentMember?.name.toLowerCase() || ''}` } ]; messageValue = ''; @@ -141,12 +151,32 @@
- {#each messages as msg (msg.id)} + {#each messages as msg, index (msg.id)} + {@const prevMessage = index > 0 ? messages[index - 1] : null} + {@const nextMessage = index < messages.length - 1 ? messages[index + 1] : null} + {@const isHeadNeeded = Boolean( + !prevMessage || + prevMessage.isOwn !== msg.isOwn || + (prevMessage.senderId && msg.senderId && prevMessage.senderId !== msg.senderId) + )} + {@const isTimestampNeeded = Boolean( + !nextMessage || + nextMessage.isOwn !== msg.isOwn || + (nextMessage.senderId && msg.senderId && nextMessage.senderId !== msg.senderId) + )} {/each}
diff --git a/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte index 7a250635..3f5ab975 100644 --- a/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte +++ b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte @@ -122,10 +122,18 @@ const nextMessage = index < newMessages.length - 1 ? newMessages[index + 1] : null; // Show head (avatar, pointer) on first message of group - const isHeadNeeded = !prevMessage || prevMessage.isOwn !== msg.isOwn; + // Check if isOwn changed OR if the sender changed (for non-own messages) + const isHeadNeeded = + !prevMessage || + prevMessage.isOwn !== msg.isOwn || + (prevMessage.senderId && msg.senderId && prevMessage.senderId !== msg.senderId); // Show timestamp on last message of group - const isTimestampNeeded = !nextMessage || nextMessage.isOwn !== msg.isOwn; + // Check if isOwn will change OR if the sender will change (for non-own messages) + const isTimestampNeeded = + !nextMessage || + nextMessage.isOwn !== msg.isOwn || + (nextMessage.senderId && msg.senderId && nextMessage.senderId !== msg.senderId); return { ...msg,