refac: message timestamp

src/lib/components/channel/Messages/Message.svelte

@@ -30,6 +30,7 @@
 	import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
 	import ReactionPicker from './Message/ReactionPicker.svelte';
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
+	import { formatDate } from '$lib/utils';
 
 	export let message;
 	export let showUserProfile = true;
@@ -45,19 +46,6 @@
 	let edit = false;
 	let editedContent = null;
 	let showDeleteConfirmDialog = false;
-
-	const formatDate = (inputDate) => {
-		const date = dayjs(inputDate);
-		const now = dayjs();
-
-		if (date.isToday()) {
-			return `Today at ${date.format('HH:mm')}`;
-		} else if (date.isYesterday()) {
-			return `Yesterday at ${date.format('HH:mm')}`;
-		} else {
-			return `${date.format('DD/MM/YYYY')} at ${date.format('HH:mm')}`;
-		}
-	};
 </script>
 
 <ConfirmDialog

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -17,7 +17,8 @@
 		approximateToHumanReadable,
 		getMessageContentParts,
 		sanitizeResponseContent,
-		createMessagesList
+		createMessagesList,
+		formatDate
 	} from '$lib/utils';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 
@@ -496,11 +497,13 @@
 				</Tooltip>
 
 				{#if message.timestamp}
-					<span
+					<div
-						class=" self-center shrink-0 translate-y-0.5 invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5"
+						class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]"
 					>
-						{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))}
+						<Tooltip content={dayjs(message.timestamp * 1000).format('dddd, DD MMMM YYYY HH:mm')}>
-					</span>
+							<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
+						</Tooltip>
+					</div>
 				{/if}
 			</Name>
 

src/lib/components/chat/Messages/UserMessage.svelte

@@ -5,7 +5,7 @@
 
 	import { models, settings } from '$lib/stores';
 	import { user as _user } from '$lib/stores';
-	import { copyToClipboard as _copyToClipboard } from '$lib/utils';
+	import { copyToClipboard as _copyToClipboard, formatDate } from '$lib/utils';
 
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
@@ -109,11 +109,13 @@
 					{/if}
 
 					{#if message.timestamp}
-						<span
+						<div
-							class=" invisible group-hover:visible text-gray-400 text-xs font-medium uppercase ml-0.5 -mt-0.5"
+							class=" self-center text-xs invisible group-hover:visible text-gray-400 font-medium first-letter:capitalize ml-0.5 translate-y-[1px]"
 						>
-							{dayjs(message.timestamp * 1000).format($i18n.t('h:mm a'))}
+							<Tooltip content={dayjs(message.timestamp * 1000).format('dddd, DD MMMM YYYY HH:mm')}>
-						</span>
+								<span class="line-clamp-1">{formatDate(message.timestamp * 1000)}</span>
+							</Tooltip>
+						</div>
 					{/if}
 				</Name>
 			</div>

src/lib/utils/index.ts

@@ -1,6 +1,15 @@
 import { v4 as uuidv4 } from 'uuid';
 import sha256 from 'js-sha256';
 
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+
+dayjs.extend(relativeTime);
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
+
 import { WEBUI_BASE_URL } from '$lib/constants';
 import { TTS_RESPONSE_SPLIT } from '$lib/types';
 
@@ -281,6 +290,19 @@ export const generateInitialsImage = (name) => {
 	return canvas.toDataURL();
 };
 
+export const formatDate = (inputDate) => {
+	const date = dayjs(inputDate);
+	const now = dayjs();
+
+	if (date.isToday()) {
+		return `Today at ${date.format('HH:mm')}`;
+	} else if (date.isYesterday()) {
+		return `Yesterday at ${date.format('HH:mm')}`;
+	} else {
+		return `${date.format('DD/MM/YYYY')} at ${date.format('HH:mm')}`;
+	}
+};
+
 export const copyToClipboard = async (text) => {
 	let result = false;
 	if (!navigator.clipboard) {