refac

src/lib/components/chat/Placeholder/ChatList.svelte

@@ -2,7 +2,11 @@
 	import { getContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
 
-	const i18n: Writable<any> = getContext('i18n');
+	type ChatListI18n = {
+		t: (key: string, options?: Record<string, unknown>) => string;
+	};
+
+	const i18n: Writable<ChatListI18n> = getContext('i18n');
 
 	import dayjs from 'dayjs';
 	import localizedFormat from 'dayjs/plugin/localizedFormat';
@@ -13,11 +17,24 @@
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
-	import { chatId } from '$lib/stores';
+	import { chatId, socket } from '$lib/stores';
 
 	dayjs.extend(localizedFormat);
 
-	export let chats: any[] = [];
+	type ChatListItem = {
+		id: string;
+		title?: string;
+		updated_at?: number | null;
+		created_at?: number | null;
+		last_read_at?: number | null;
+		active?: boolean;
+		time_range?: string;
+		user_id?: string;
+		owner_name?: string;
+		[key: string]: unknown;
+	};
+
+	export let chats: ChatListItem[] = [];
 
 	export let chatListLoading = false;
 	export let showOwnerInfo = false;
@@ -26,10 +43,10 @@
 	export let perPage = 10;
 	export let orderBy: 'title' | 'updated_at' = 'updated_at';
 	export let direction: 'asc' | 'desc' = 'desc';
-	export let onPageChange: Function = () => {};
-	export let onSort: Function = () => {};
+	export let onPageChange: (page: number) => void | Promise<void> = () => {};
+	export let onSort: (key: 'title' | 'updated_at') => void | Promise<void> = () => {};
 
-	let chatList: any[] | null = null;
+	let chatList: ChatListItem[] | null = null;
 	let totalPages = 1;
 	let pages: (number | 'ellipsis')[] = [];
 
@@ -48,6 +65,22 @@
 		onSort(key);
 	};
 
+	const markChatRead = (chat: ChatListItem, unread: boolean) => {
+		if (!unread) {
+			return;
+		}
+
+		const lastReadAt = Date.now() / 1000;
+		chatList = (chatList ?? []).map((item) =>
+			item.id === chat.id ? { ...item, last_read_at: lastReadAt } : item
+		);
+
+		$socket?.emit('events:chat', {
+			chat_id: chat.id,
+			data: { type: 'last_read_at' }
+		});
+	};
+
 	const buildPages = (currentPage: number, pageCount: number): (number | 'ellipsis')[] => {
 		if (pageCount <= 7) {
 			return Array.from({ length: pageCount }, (_, i) => i + 1);
@@ -177,6 +210,7 @@
 				class=" w-full flex justify-between items-center rounded-lg text-sm py-2 px-3 hover:bg-gray-50 dark:hover:bg-gray-850"
 				draggable="false"
 				href={`/c/${chat.id}`}
+				on:click={() => markChatRead(chat, unread)}
 			>
 				<div class="flex min-w-0 items-center w-full sm:basis-3/5">
 					{#if chat.active}