mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-11 20:05:19 +00:00
94 lines
2.6 KiB
Svelte
94 lines
2.6 KiB
Svelte
<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 } 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 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?.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" />
|
|
{:else}
|
|
<Spinner className="size-3" />
|
|
{/if}
|
|
</div>
|
|
|
|
<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>
|