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,