From 198bd49cc2176b215733ab0f01a390d8f4bcd628 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 22 Dec 2024 22:24:09 -0700
Subject: [PATCH] enh: channel messages

---
 src/lib/components/channel/Messages.svelte | 35 ++++++++++++++++++----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/channel/Messages.svelte b/src/lib/components/channel/Messages.svelte
index 59ff9c331..2737c76c4 100644
--- a/src/lib/components/channel/Messages.svelte
+++ b/src/lib/components/channel/Messages.svelte
@@ -1,17 +1,23 @@
 <script lang="ts">
-	import { v4 as uuidv4 } from 'uuid';
-	import { chats, config, settings, user as _user, mobile, currentChatPage } from '$lib/stores';
-	import { tick, getContext, onMount, createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
-
 	import { toast } from 'svelte-sonner';
 
+	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 { tick, getContext, onMount, createEventDispatcher } from 'svelte';
+
 	import Message from './Messages/Message.svelte';
 	import Loader from '../common/Loader.svelte';
 	import Spinner from '../common/Spinner.svelte';
 
 	const i18n = getContext('i18n');
 
+	export let channel = null;
 	export let messages = [];
 	export let top = false;
 
@@ -50,6 +56,25 @@
 					<div class=" ">Loading...</div>
 				</div>
 			</Loader>
+		{:else}
+			<div class="px-5">
+				{#if channel}
+					<div class="flex flex-col py-1 gap-1.5">
+						<div class="text-xl font-medium">{channel.name}</div>
+
+						<div class="text-sm text-gray-500">
+							This channel was created on {dayjs(channel.created_at / 1000000).format(
+								'MMMM D, YYYY'
+							)}. This is the very beginning of the {channel.name}
+							channel.
+						</div>
+					</div>
+				{:else}
+					<div class="flex justify-center py-1 text-xs items-center gap-2">
+						<div class=" ">Start of the channel</div>
+					</div>
+				{/if}
+			</div>
 		{/if}
 
 		{#each messageList as message, messageIdx (message.id)}