tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages Activity Actions

feat: display doc tags

Browse source
This commit is contained in:
Timothy J. Baek 2024-02-03 15:00:16 -08:00
parent 00803c92f2
commit f538c9a1be
1 changed files with 61 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
src/routes/(app)/documents/+page.svelte
View file

@ -18,6 +18,8 @@
let inputFiles = ''; let inputFiles = '';
let query = ''; let query = '';
let tags = [];
let showEditDocModal = false; let showEditDocModal = false;
let selectedDoc; let selectedDoc;
@ -50,6 +52,11 @@
}; };
onMount(() => { onMount(() => {
documents.subscribe((docs) => {
tags = docs.reduce((a, e, i, arr) => {
return [...new Set([...a, ...(e?.content?.tags ?? []).map((tag) => tag.name)])];
}, []);
});
const dropZone = document.querySelector('body'); const dropZone = document.querySelector('body');
const onDragOver = (e) => { const onDragOver = (e) => {
@ -141,6 +148,34 @@
<EditDocModal bind:show={showEditDocModal} {selectedDoc} /> <EditDocModal bind:show={showEditDocModal} {selectedDoc} />
{/key} {/key}
<input
id="upload-doc-input"
bind:files={inputFiles}
type="file"
hidden
on:change={async (e) => {
if (inputFiles && inputFiles.length > 0) {
const file = inputFiles[0];
if (
SUPPORTED_FILE_TYPE.includes(file['type']) ||
SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
) {
uploadDoc(file);
} else {
toast.error(
`Unknown File Type '${file['type']}', but accepting and treating as plain text`
);
uploadDoc(file);
}
inputFiles = null;
e.target.value = '';
} else {
toast.error(`File not found.`);
}
}}
/>
<div class="min-h-screen w-full flex justify-center dark:text-white"> <div class="min-h-screen w-full flex justify-center dark:text-white">
<div class=" py-2.5 flex flex-col justify-between w-full"> <div class=" py-2.5 flex flex-col justify-between w-full">
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> <div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
@ -191,34 +226,32 @@
</button> </button>
</div> </div>
</div> </div>
<hr class=" dark:border-gray-700 my-2.5" />
<input {#if tags.length > 0}
id="upload-doc-input" <div class="px-2.5 mt-0.5 mb-2 flex gap-1 flex-wrap">
bind:files={inputFiles} <button
type="file" class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
hidden on:click={async () => {
on:change={async (e) => { // await chats.set(await getChatListByTagName(localStorage.token, tag.name));
if (inputFiles && inputFiles.length > 0) {
const file = inputFiles[0];
if (
SUPPORTED_FILE_TYPE.includes(file['type']) ||
SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1))
) {
uploadDoc(file);
} else {
toast.error(
`Unknown File Type '${file['type']}', but accepting and treating as plain text`
);
uploadDoc(file);
}
inputFiles = null;
e.target.value = '';
} else {
toast.error(`File not found.`);
}
}} }}
/> >
<div class=" text-xs font-medium self-center line-clamp-1">all</div>
</button>
{#each tags as tag}
<button
class="px-2 py-0.5 space-x-1 flex h-fit items-center rounded-full transition border dark:border-gray-600 dark:text-white"
on:click={async () => {
// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
}}
>
<div class=" text-xs font-medium self-center line-clamp-1">
#{tag}
</div>
</button>
{/each}
</div>
{/if}
<!-- <div> <!-- <div>
<div <div
@ -240,8 +273,7 @@
</div> --> </div> -->
{#each $documents.filter((p) => query === '' || p.name.includes(query)) as doc} {#each $documents.filter((p) => query === '' || p.name.includes(query)) as doc}
<hr class=" dark:border-gray-700 my-2.5" /> <div class=" flex space-x-4 cursor-pointer w-full mt-3 mb-3">
<div class=" flex space-x-4 cursor-pointer w-full mb-3">
<div class=" flex flex-1 space-x-4 cursor-pointer w-full"> <div class=" flex flex-1 space-x-4 cursor-pointer w-full">
<div class=" flex items-center space-x-3"> <div class=" flex items-center space-x-3">
<div class="p-2.5 bg-red-400 text-white rounded-lg"> <div class="p-2.5 bg-red-400 text-white rounded-lg">