This commit is contained in:
Timothy Jaeryang Baek 2026-08-25 14:14:13 -04:00
parent c4b3e6840f
commit 20f35d157b
2 changed files with 60 additions and 28 deletions

View file

@ -46,6 +46,7 @@
testExternalKnowledgeRetrieval
} from '$lib/apis/knowledge';
import { processUrl } from '$lib/apis/retrieval';
import { WEBUI_API_BASE_URL } from '$lib/constants';
import { blobToFile, copyToClipboard } from '$lib/utils';
import { computeFileHash } from '$lib/utils/hash';
@ -909,6 +910,10 @@
}
};
const openFileHandler = (fileId: string) => {
window.open(`${WEBUI_API_BASE_URL}/files/${encodeURIComponent(fileId)}/content`, '_blank');
};
let debounceTimeout = null;
let dragged = false;
@ -1555,6 +1560,7 @@
}
}
}}
onOpen={(fileId) => openFileHandler(fileId)}
onDelete={(fileId) => {
selectedFileId = null;
selectedFile = null;

View file

@ -11,8 +11,6 @@
import { capitalizeFirstLetter, formatFileSize } from '$lib/utils';
import { WEBUI_BASE_URL } from '$lib/constants';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Dropdown from '$lib/components/common/Dropdown.svelte';
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
@ -24,25 +22,46 @@
import Spinner from '$lib/components/common/Spinner.svelte';
import DirectoryRow from './DirectoryRow.svelte';
type KnowledgeFile = {
id?: string;
tempId?: string;
itemId?: string;
name?: string;
status?: string;
meta?: {
name?: string;
size?: number;
};
updated_at?: number;
user?: {
email?: string;
name?: string;
};
};
export let knowledge = null;
export let selectedFileId = null;
export let files = [];
export let files: KnowledgeFile[] = [];
export let directories = [];
export let onClick = (fileId) => {};
export let onDelete = (fileId) => {};
export let onRename = (fileId: string, name: string) => {};
export let onNavigateDirectory = (directoryId: string) => {};
export let onRenameDirectory = (id: string, name: string) => {};
export let onDeleteDirectory = (id: string) => {};
export let onMoveFileToDirectory = (fileId: string, directoryId: string) => {};
export let onMoveDirectoryToDirectory = (dirId: string, targetDirectoryId: string) => {};
export let onClick: (fileId: string | undefined) => void = () => {};
export let onOpen: (fileId: string) => void = () => {};
export let onDelete: (fileId: string | undefined) => void = () => {};
export let onRename: (fileId: string, name: string) => void = () => {};
export let onNavigateDirectory: (directoryId: string) => void = () => {};
export let onRenameDirectory: (id: string, name: string) => void = () => {};
export let onDeleteDirectory: (id: string) => void = () => {};
export let onMoveFileToDirectory: (fileId: string, directoryId: string) => void = () => {};
export let onMoveDirectoryToDirectory: (
dirId: string,
targetDirectoryId: string
) => void = () => {};
let editingFileId: string | null = null;
let editName = '';
let editInput: HTMLInputElement;
const startRename = (file: any) => {
const startRename = (file: KnowledgeFile) => {
editingFileId = file?.id ?? file?.tempId;
editName = file?.name ?? file?.meta?.name ?? '';
setTimeout(() => editInput?.select(), 0);
@ -58,9 +77,16 @@
const cancelRename = () => {
editingFileId = null;
};
const openFile = (file: KnowledgeFile) => {
const fileId = file?.id ?? file?.tempId;
if (!fileId) return;
onOpen(fileId);
};
</script>
<div class=" max-h-full flex flex-col w-full gap-[0.03125rem]">
<div class=" max-h-full flex flex-col w-full gap-[0.03125rem]" role="list">
<!-- Directories first -->
{#each directories as dir (dir.id)}
<DirectoryRow
@ -80,6 +106,7 @@
class=" flex cursor-pointer w-full px-2 bg-transparent dark:hover:bg-gray-850/50 hover:bg-white rounded-xl transition {selectedFileId
? ''
: 'hover:bg-gray-100 dark:hover:bg-gray-850'}"
role="listitem"
draggable="true"
on:dragstart={(e) => {
const fileId = file?.id ?? file?.tempId;
@ -90,16 +117,16 @@
>
<div class="flex items-center">
{#if file?.status !== 'uploading'}
<button
class="p-1 rounded-full transition"
type="button"
on:click={() => {
let fileId = file?.id ?? file?.tempId;
onClick(fileId);
}}
>
<DocumentPage className="size-3.5" />
</button>
<Tooltip content={$i18n.t('Open file')}>
<button
class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-850 transition"
type="button"
aria-label={$i18n.t('Open file')}
on:click={() => openFile(file)}
>
<DocumentPage className="size-3.5" />
</button>
</Tooltip>
{:else}
<Spinner className="size-3.5" />
{/if}
@ -140,7 +167,9 @@
<div class="line-clamp-1 text-xs">
{file?.name ?? file?.meta?.name}
{#if file?.meta?.size}
<span class="text-[0.6875rem] text-gray-500">{formatFileSize(file?.meta?.size)}</span>
<span class="text-[0.6875rem] text-gray-500"
>{formatFileSize(file?.meta?.size)}</span
>
{/if}
</div>
{/if}
@ -199,10 +228,7 @@
<button
type="button"
class="select-none flex h-[1.6875rem] w-full cursor-pointer items-center gap-2 rounded-xl bg-transparent px-2 text-xs transition hover:text-gray-900 dark:hover:text-gray-100"
on:click={() => {
let fileId = file?.id ?? file?.tempId;
window.open(`${WEBUI_BASE_URL}/api/v1/files/${fileId}/content`, '_blank');
}}
on:click={() => openFile(file)}
>
<Download className="size-3.5" />
{$i18n.t('Download')}