feat: chat list group by time range

src/lib/apis/chats/index.ts

@@ -1,4 +1,5 @@
 import { WEBUI_API_BASE_URL } from '$lib/constants';
+import { getTimeRange } from '$lib/utils';
 
 export const createNewChat = async (token: string, chat: object) => {
 	let error = null;
@@ -59,7 +60,10 @@ export const getChatList = async (token: string = '') => {
 		throw error;
 	}
 
-	return res;
+	return res.map((chat) => ({
+		...chat,
+		time_range: getTimeRange(chat.updated_at)
+	}));
 };
 
 export const getChatListByUserId = async (token: string = '', userId: string) => {
@@ -90,7 +94,10 @@ export const getChatListByUserId = async (token: string = '', userId: string) =>
 		throw error;
 	}
 
-	return res;
+	return res.map((chat) => ({
+		...chat,
+		time_range: getTimeRange(chat.updated_at)
+	}));
 };
 
 export const getArchivedChatList = async (token: string = '') => {
@@ -248,7 +255,10 @@ export const getChatListByTagName = async (token: string = '', tagName: string)
 		throw error;
 	}
 
-	return res;
+	return res.map((chat) => ({
+		...chat,
+		time_range: getTimeRange(chat.updated_at)
+	}));
 };
 
 export const getChatById = async (token: string, id: string) => {

src/lib/components/layout/Sidebar.svelte

@@ -44,6 +44,28 @@
 	let showDropdown = false;
 	let isEditing = false;
 
+	let filteredChatList = [];
+
+	$: filteredChatList = $chats.filter((chat) => {
+		if (search === '') {
+			return true;
+		} else {
+			let title = chat.title.toLowerCase();
+			const query = search.toLowerCase();
+
+			let contentMatches = false;
+			// Access the messages within chat.chat.messages
+			if (chat.chat && chat.chat.messages && Array.isArray(chat.chat.messages)) {
+				contentMatches = chat.chat.messages.some((message) => {
+					// Check if message.content exists and includes the search query
+					return message.content && message.content.toLowerCase().includes(query);
+				});
+			}
+
+			return title.includes(query) || contentMatches;
+		}
+	});
+
 	onMount(async () => {
 		showSidebar.set(window.innerWidth > BREAKPOINT);
 		await chats.set(await getChatList(localStorage.token));
@@ -418,25 +440,17 @@
 			{/if}
 
 			<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-none">
-				{#each $chats.filter((chat) => {
-					if (search === '') {
-						return true;
-					} else {
-						let title = chat.title.toLowerCase();
-						const query = search.toLowerCase();
-
-						let contentMatches = false;
-						// Access the messages within chat.chat.messages
-						if (chat.chat && chat.chat.messages && Array.isArray(chat.chat.messages)) {
-							contentMatches = chat.chat.messages.some((message) => {
-								// Check if message.content exists and includes the search query
-								return message.content && message.content.toLowerCase().includes(query);
-							});
-						}
-
-						return title.includes(query) || contentMatches;
-					}
-				}) as chat, i}
+				{#each filteredChatList as chat, idx}
+					{#if idx === 0 || (idx > 1 && chat.time_range !== filteredChatList[idx - 1].time_range)}
+						<div
+							class="w-full pl-2.5 text-xs text-gray-500 dark:text-gray-500 font-medium {idx === 0
+								? ''
+								: 'pt-4'} pb-1"
+						>
+							{chat.time_range}
+						</div>
+					{/if}
+
 					<div class=" w-full pr-2 relative group">
 						{#if chatTitleEditId === chat.id}
 							<div

src/lib/utils/index.ts

@@ -520,3 +520,26 @@ export const approximateToHumanReadable = (nanoseconds: number) => {
 
 	return results.reverse().join(' ');
 };
+
+export const getTimeRange = (timestamp) => {
+	const now = new Date();
+	const date = new Date(timestamp * 1000); // Convert Unix timestamp to milliseconds
+
+	// Calculate the difference in milliseconds
+	const diffTime = now.getTime() - date.getTime();
+	const diffDays = diffTime / (1000 * 3600 * 24);
+
+	if (diffDays < 1) {
+		return 'Today';
+	} else if (diffDays < 2) {
+		return 'Yesterday';
+	} else if (diffDays <= 7) {
+		return 'Previous 7 days';
+	} else if (diffDays <= 30) {
+		return 'Previous 30 days';
+	} else if (date.getFullYear() === now.getFullYear()) {
+		return date.toLocaleString('default', { month: 'long' });
+	} else {
+		return date.getFullYear().toString();
+	}
+};