This commit is contained in:
Timothy Jaeryang Baek committed 2026-05-13 22:44:17 +09:00
1 parent d6dae36da0
commit 2ad327a4dc
1 file changed
+49 -24
@@ -14,8 +14,11 @@
import { WEBUI_BASE_URL } from '$lib/constants'; import { WEBUI_BASE_URL } from '$lib/constants';
import Tooltip from '$lib/components/common/Tooltip.svelte'; import Tooltip from '$lib/components/common/Tooltip.svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import DocumentPage from '$lib/components/icons/DocumentPage.svelte'; import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
import XMark from '$lib/components/icons/XMark.svelte'; import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
import Download from '$lib/components/icons/Download.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import Spinner from '$lib/components/common/Spinner.svelte'; import Spinner from '$lib/components/common/Spinner.svelte';
import DirectoryRow from './DirectoryRow.svelte'; import DirectoryRow from './DirectoryRow.svelte';
@@ -64,32 +67,29 @@
> >
<div class="flex items-center"> <div class="flex items-center">
{#if file?.status !== 'uploading'} {#if file?.status !== 'uploading'}
<Tooltip content={$i18n.t('Open file')}> <button
<button class="p-1 rounded-full transition"
class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition" type="button"
type="button" on:click={() => {
on:click={() => { let fileId = file?.id ?? file?.tempId;
let fileId = file?.id ?? file?.tempId; onClick(fileId);
window.open(`${WEBUI_BASE_URL}/api/v1/files/${fileId}/content`, '_blank'); }}
}} >
> <DocumentPage className="size-3.5" />
<DocumentPage className="size-3.5" /> </button>
</button>
</Tooltip>
{:else} {:else}
<Spinner className="size-3.5" /> <Spinner className="size-3.5" />
{/if} {/if}
</div> </div>
<button <button
class="relative group flex items-center gap-1 rounded-xl p-2 text-left flex-1 justify-between" class="relative flex items-center gap-1 rounded-xl p-2 text-left flex-1 justify-between"
type="button" type="button"
on:click={async () => { on:click={() => {
console.log(file);
onClick(file?.id ?? file?.tempId); onClick(file?.id ?? file?.tempId);
}} }}
> >
<div class=""> <div>
<div class="flex gap-2 items-center line-clamp-1"> <div class="flex gap-2 items-center line-clamp-1">
<div class="line-clamp-1 text-sm"> <div class="line-clamp-1 text-sm">
{file?.name ?? file?.meta?.name} {file?.name ?? file?.meta?.name}
@@ -103,7 +103,7 @@
<div class="flex items-center gap-2 shrink-0"> <div class="flex items-center gap-2 shrink-0">
{#if file?.updated_at} {#if file?.updated_at}
<Tooltip content={dayjs(file.updated_at * 1000).format('LLLL')}> <Tooltip content={dayjs(file.updated_at * 1000).format('LLLL')}>
<div> <div class="text-xs text-gray-400">
{dayjs(file.updated_at * 1000).fromNow()} {dayjs(file.updated_at * 1000).fromNow()}
</div> </div>
</Tooltip> </Tooltip>
@@ -129,17 +129,42 @@
{#if knowledge?.write_access} {#if knowledge?.write_access}
<div class="flex items-center"> <div class="flex items-center">
<Tooltip content={$i18n.t('Delete')}> <Dropdown align="end" sideOffset={4}>
<button <button
class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition" class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition"
type="button" type="button"
on:click={() => {
onDelete(file?.id ?? file?.tempId);
}}
> >
<XMark /> <EllipsisHorizontal className="size-3.5" />
</button> </button>
</Tooltip>
<div slot="content">
<div
class="min-w-[140px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
>
<button
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
on:click={() => {
let fileId = file?.id ?? file?.tempId;
window.open(`${WEBUI_BASE_URL}/api/v1/files/${fileId}/content`, '_blank');
}}
>
<Download className="size-3.5" />
{$i18n.t('Download')}
</button>
<button
type="button"
class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
on:click={() => {
onDelete(file?.id ?? file?.tempId);
}}
>
<GarbageBin className="size-3.5" />
{$i18n.t('Delete')}
</button>
</div>
</div>
</Dropdown>
</div> </div>
{/if} {/if}
</div> </div>