Spaces:
Build error
Build error
File size: 2,998 Bytes
d6703a1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 | <script lang="ts">
import dayjs from '$lib/dayjs';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(duration);
dayjs.extend(relativeTime);
import { getContext } from 'svelte';
const i18n = getContext('i18n');
import { capitalizeFirstLetter, formatFileSize } 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 knowledge = null;
export let selectedFileId = null;
export let files = [];
export let onClick = (fileId) => {};
export let onDelete = (fileId) => {};
</script>
<div class=" max-h-full flex flex-col w-full gap-[0.5px]">
{#each files as file (file?.id ?? file?.itemId ?? 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);
}}
>
<div class="">
<div class="flex gap-2 items-center line-clamp-1">
<div class="shrink-0">
{#if file?.status !== 'uploading'}
<DocumentPage className="size-3.5" />
{:else}
<Spinner className="size-3.5" />
{/if}
</div>
<div class="line-clamp-1 text-sm">
{file?.name ?? file?.meta?.name}
{#if file?.meta?.size}
<span class="text-xs text-gray-500">{formatFileSize(file?.meta?.size)}</span>
{/if}
</div>
</div>
</div>
<div class="flex items-center gap-2 shrink-0">
{#if file?.updated_at}
<Tooltip content={dayjs(file.updated_at * 1000).format('LLLL')}>
<div>
{dayjs(file.updated_at * 1000).fromNow()}
</div>
</Tooltip>
{/if}
{#if file?.user}
<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>
{/if}
</div>
</button>
{#if knowledge?.write_access}
<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>
{/if}
</div>
{/each}
</div>
|