From d92d555c038583782e7bb57c1a19524978345047 Mon Sep 17 00:00:00 2001
From: Silentoplayz <50341825+Silentoplayz@users.noreply.github.com>
Date: Thu, 12 Jun 2025 15:13:24 -0400
Subject: [PATCH] Feat: Show user message timestamps on hover in Chat Bubble UI
 mode

---
 .../components/chat/Messages/UserMessage.svelte  | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/chat/Messages/UserMessage.svelte b/src/lib/components/chat/Messages/UserMessage.svelte
index 4a61b7190..6b1c76441 100644
--- a/src/lib/components/chat/Messages/UserMessage.svelte
+++ b/src/lib/components/chat/Messages/UserMessage.svelte
@@ -107,7 +107,11 @@
 	}}
 />
 
-<div class=" flex w-full user-message" dir={$settings.chatDirection} id="message-{message.id}">
+<div
+	class=" flex w-full user-message group"
+	dir={$settings.chatDirection}
+	id="message-{message.id}"
+>
 	{#if !($settings?.chatBubble ?? true)}
 		<div class={`shrink-0 ltr:mr-3 rtl:ml-3`}>
 			<ProfileImage
@@ -143,6 +147,16 @@
 					{/if}
 				</Name>
 			</div>
+		{:else if message.timestamp}
+			<div class="flex justify-end pb-1 pr-2">
+				<div
+					class="text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize translate-y-[1px]"
+				>
+					<Tooltip content={dayjs(message.timestamp * 1000).format('LLLL')}>
+						<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
+					</Tooltip>
+				</div>
+			</div>
 		{/if}
 
 		<div class="chat-{message.role} w-full min-w-full markdown-prose">