From 13cf7345316794e5f7da7f6babee825c3bccbb4e Mon Sep 17 00:00:00 2001
From: Merul Dhiman <me@merul.org>
Date: Fri, 14 Nov 2025 15:43:58 +0530
Subject: [PATCH 1/3] chore: add name to chatBubbles

---
 .../src/lib/fragments/ChatMessage/ChatMessage.svelte   |  5 +++++
 .../src/routes/(protected)/messages/[id]/+page.svelte  | 10 ++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte b/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte
index 1c74f395..13827691 100644
--- a/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte
+++ b/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte
@@ -74,6 +74,11 @@
 		</div>
 
 		<div class={cn(`max-w-[50%] ${isHeadNeeded ? 'mt-4' : 'mt-0'}`)}>
+			{#if isHeadNeeded && !isOwn && sender}
+				<p class="mb-1 text-xs font-medium text-black-400 px-1">
+					{sender.name}
+				</p>
+			{/if}
 			<div
 				class={cn(
 					`relative rounded-3xl px-4 py-2 ${isOwn ? 'bg-grey' : 'bg-brand-burnt-orange'}`
diff --git a/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
index 7a250635..fd8598c3 100644
--- a/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
@@ -122,10 +122,16 @@
 			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,

From b30734bcc2ac1184bdf060357cb3f332eb82773b Mon Sep 17 00:00:00 2001
From: Merul Dhiman <me@merul.org>
Date: Fri, 14 Nov 2025 15:44:56 +0530
Subject: [PATCH 2/3] feat: add name to chat bubbles on pictique

---
 .../(protected)/group/[id]/+page.svelte       | 36 ++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index 2a3efc20..7fbf63f2 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -42,14 +42,20 @@
 			isOwn: false,
 			userImgSrc: 'https://i.pravatar.cc/150?img=2',
 			time: '2 minutes ago',
-			message: 'Hey everyone, can we finalize the color palette today?'
+			message: 'Hey everyone, can we finalize the color palette today?',
+			senderId: 'user-2',
+			senderName: 'Bob',
+			senderHandle: '@bob'
 		},
 		{
 			id: 'msg-2',
 			isOwn: true,
 			userImgSrc: 'https://i.pravatar.cc/150?img=1',
 			time: '1 minute ago',
-			message: 'Yes, I just pushed a new draft to Figma.'
+			message: 'Yes, I just pushed a new draft to Figma.',
+			senderId: 'user-1',
+			senderName: 'Alice',
+			senderHandle: '@alice'
 		}
 	]);
 
@@ -65,14 +71,18 @@
 
 	async function handleSend() {
 		if (!messageValue.trim()) return Promise.resolve();
+		const currentMember = group.members.find((m) => 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,28 @@
 
 <section class="chat relative px-0">
 	<div class="mt-4 h-[calc(100vh-300px)] overflow-auto" bind:this={messagesContainer}>
-		{#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 = !prevMessage || 
+				prevMessage.isOwn !== msg.isOwn || 
+				(prevMessage.senderId && msg.senderId && prevMessage.senderId !== msg.senderId)}
+			{@const isTimestampNeeded = !nextMessage || 
+				nextMessage.isOwn !== msg.isOwn ||
+				(nextMessage.senderId && msg.senderId && nextMessage.senderId !== msg.senderId)}
 			<ChatMessage
 				isOwn={msg.isOwn}
 				userImgSrc={msg.userImgSrc}
 				time={msg.time}
 				message={msg.message}
+				{isHeadNeeded}
+				{isTimestampNeeded}
+				sender={{
+					id: msg.senderId,
+					name: msg.senderName,
+					handle: msg.senderHandle,
+					avatarUrl: msg.userImgSrc
+				}}
 			/>
 		{/each}
 	</div>

From 8dfd0ebb9944355d7c6675c6fe7c236762f3f955 Mon Sep 17 00:00:00 2001
From: Merul Dhiman <me@merul.org>
Date: Fri, 14 Nov 2025 15:50:03 +0530
Subject: [PATCH 3/3] fix: lint

---
 .../lib/fragments/ChatMessage/ChatMessage.svelte |  2 +-
 .../routes/(protected)/group/[id]/+page.svelte   | 16 ++++++++++------
 .../(protected)/messages/[id]/+page.svelte       |  8 +++++---
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte b/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte
index 13827691..8d7d2e9b 100644
--- a/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte
+++ b/platforms/pictique/src/lib/fragments/ChatMessage/ChatMessage.svelte
@@ -75,7 +75,7 @@
 
 		<div class={cn(`max-w-[50%] ${isHeadNeeded ? 'mt-4' : 'mt-0'}`)}>
 			{#if isHeadNeeded && !isOwn && sender}
-				<p class="mb-1 text-xs font-medium text-black-400 px-1">
+				<p class="text-black-400 mb-1 px-1 text-xs font-medium">
 					{sender.name}
 				</p>
 			{/if}
diff --git a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
index 7fbf63f2..3db8438d 100644
--- a/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/group/[id]/+page.svelte
@@ -154,12 +154,16 @@
 		{#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 = !prevMessage || 
-				prevMessage.isOwn !== msg.isOwn || 
-				(prevMessage.senderId && msg.senderId && prevMessage.senderId !== msg.senderId)}
-			{@const isTimestampNeeded = !nextMessage || 
-				nextMessage.isOwn !== msg.isOwn ||
-				(nextMessage.senderId && msg.senderId && nextMessage.senderId !== msg.senderId)}
+			{@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)
+			)}
 			<ChatMessage
 				isOwn={msg.isOwn}
 				userImgSrc={msg.userImgSrc}
diff --git a/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
index fd8598c3..3f5ab975 100644
--- a/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
+++ b/platforms/pictique/src/routes/(protected)/messages/[id]/+page.svelte
@@ -123,13 +123,15 @@
 
 			// Show head (avatar, pointer) on first message of group
 			// Check if isOwn changed OR if the sender changed (for non-own messages)
-			const isHeadNeeded = !prevMessage || 
-				prevMessage.isOwn !== msg.isOwn || 
+			const isHeadNeeded =
+				!prevMessage ||
+				prevMessage.isOwn !== msg.isOwn ||
 				(prevMessage.senderId && msg.senderId && prevMessage.senderId !== msg.senderId);
 
 			// Show timestamp on last message of group
 			// Check if isOwn will change OR if the sender will change (for non-own messages)
-			const isTimestampNeeded = !nextMessage || 
+			const isTimestampNeeded =
+				!nextMessage ||
 				nextMessage.isOwn !== msg.isOwn ||
 				(nextMessage.senderId && msg.senderId && nextMessage.senderId !== msg.senderId);