feat/enh: kb file pagination

src/lib/components/workspace/Knowledge/KnowledgeBase/Files.svelte

@@ -1,45 +1,94 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-	const dispatch = createEventDispatcher();
+	import dayjs from '$lib/dayjs';
+	import duration from 'dayjs/plugin/duration';
+	import relativeTime from 'dayjs/plugin/relativeTime';
 
-	import FileItem from '$lib/components/common/FileItem.svelte';
+	dayjs.extend(duration);
+	dayjs.extend(relativeTime);
+
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
+	import { capitalizeFirstLetter } from '$lib/utils';
+
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
+	import XMark from '$lib/components/icons/XMark.svelte';
+	import Spinner from '$lib/components/common/Spinner.svelte';
 
 	export let selectedFileId = null;
 	export let files = [];
 
-	export let small = false;
+	export let onClick = (fileId) => {};
+	export let onDelete = (fileId) => {};
 </script>
 
-<div class=" max-h-full flex flex-col w-full">
-	{#each files as file}
-		<div class="mt-1 px-2">
-			<FileItem
-				className="w-full"
-				colorClassName="{selectedFileId === file.id
-					? ' bg-gray-50 dark:bg-gray-850'
-					: 'bg-transparent'} hover:bg-gray-50 dark:hover:bg-gray-850 transition"
-				{small}
-				item={file}
-				name={file?.name ?? file?.meta?.name}
-				type="file"
-				size={file?.size ?? file?.meta?.size ?? ''}
-				loading={file.status === 'uploading'}
-				dismissible
-				on:click={() => {
-					if (file.status === 'uploading') {
-						return;
-					}
-
-					dispatch('click', file.id);
+<div class=" max-h-full flex flex-col w-full gap-[0.5px]">
+	{#each files as file (file?.id ?? file?.tempId)}
+		<div
+			class=" flex cursor-pointer w-full px-1.5 py-0.5 bg-transparent dark:hover:bg-gray-850/50 hover:bg-white rounded-xl transition {selectedFileId
+				? ''
+				: 'hover:bg-gray-100 dark:hover:bg-gray-850'}"
+		>
+			<button
+				class="relative group flex items-center gap-1 rounded-xl p-2 text-left flex-1 justify-between"
+				type="button"
+				on:click={async () => {
+					console.log(file);
+					onClick(file?.id ?? file?.tempId);
 				}}
-				on:dismiss={() => {
-					if (file.status === 'uploading') {
-						return;
-					}
+			>
+				<div class="">
+					<div class="flex gap-2 items-center line-clamp-1">
+						<div class="shrink-0">
+							{#if file?.status !== 'uploading'}
+								<DocumentPage className="size-3" />
+							{:else}
+								<Spinner className="size-3" />
+							{/if}
+						</div>
 
-					dispatch('delete', file.id);
-				}}
-			/>
+						<div class="line-clamp-1">
+							{file?.name ?? file?.meta?.name}
+						</div>
+					</div>
+				</div>
+
+				<div class="flex items-center gap-2 shrink-0">
+					<Tooltip content={dayjs(file.updated_at * 1000).format('LLLL')}>
+						<div>
+							{dayjs(file.updated_at * 1000).fromNow()}
+						</div>
+					</Tooltip>
+					<Tooltip
+						content={file?.user?.email ?? $i18n.t('Deleted User')}
+						className="flex shrink-0"
+						placement="top-start"
+					>
+						<div class="shrink-0 text-gray-500">
+							{$i18n.t('By {{name}}', {
+								name: capitalizeFirstLetter(
+									file?.user?.name ?? file?.user?.email ?? $i18n.t('Deleted User')
+								)
+							})}
+						</div>
+					</Tooltip>
+				</div>
+			</button>
+
+			<div class="flex items-center">
+				<Tooltip content={$i18n.t('Delete')}>
+					<button
+						class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition"
+						type="button"
+						on:click={() => {
+							onDelete(file?.id ?? file?.tempId);
+						}}
+					>
+						<XMark />
+					</button>
+				</Tooltip>
+			</div>
 		</div>
 	{/each}
 </div>