refac: styling

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

@@ -1,13 +1,87 @@
 <script lang="ts">
+	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 { getContext } from 'svelte';
+	const i18n = getContext<Writable<i18nType>>('i18n');
+
+	import { settings } from '$lib/stores';
+
+	import { WEBUI_BASE_URL } from '$lib/constants';
+
 	import Markdown from '$lib/components/chat/Messages/Markdown.svelte';
+	import ProfileImage from '$lib/components/chat/Messages/ProfileImage.svelte';
+	import Name from '$lib/components/chat/Messages/Name.svelte';
 
 	export let message;
+	export let showUserProfile = true;
+
+	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>
 
 {#if message}
-	<div>
-		<div>
-			<Markdown id={message.id} content={message.content} />
+	<div
+		class="flex flex-col justify-between px-5 {showUserProfile
+			? 'mt-3'
+			: ''} w-full {($settings?.widescreenMode ?? null)
+			? 'max-w-full'
+			: 'max-w-5xl'} mx-auto rounded-lg group"
+	>
+		<div
+			class=" flex w-full message-{message.id}"
+			id="message-{message.id}"
+			dir={$settings.chatDirection}
+		>
+			<div
+				class={`flex-shrink-0 ${($settings?.chatDirection ?? 'LTR') === 'LTR' ? 'mr-3' : 'ml-3'}`}
+			>
+				{#if showUserProfile}
+					<ProfileImage
+						src={message.user?.profile_image_url ??
+							($i18n.language === 'dg-DG' ? `/doge.png` : `${WEBUI_BASE_URL}/static/favicon.png`)}
+						className={'size-7'}
+					/>
+				{:else}
+					<div class="w-7 h-7 rounded-full bg-transparent" />
+				{/if}
+			</div>
+
+			<div class="flex-auto w-0 pl-1">
+				{#if showUserProfile}
+					<Name>
+						{message?.user?.name}
+
+						{#if message.created_at}
+							<span
+								class=" self-center invisible group-hover:visible text-gray-400 text-xs font-medium capitalize ml-0.5 -mt-0.5"
+							>
+								{formatDate(message.created_at / 1000000)}
+							</span>
+						{/if}
+					</Name>
+				{/if}
+
+				<div class="markdown-prose">
+					<Markdown id={message.id} content={message.content} />
+				</div>
+			</div>
 		</div>
 	</div>
 {/if}