OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy J. Baek
2024-10-03 21:10:33 -07:00
parent 6747478f67
commit b862dff185
9 changed files with 263 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
src/lib/components/workspace/Knowledge/Item.svelte → src/lib/components/workspace/Knowledge/Collection.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import { toast } from 'svelte-sonner';
import { onMount, getContext } from 'svelte';
import { onMount, getContext, onDestroy } from 'svelte';
const i18n = getContext('i18n');
import { goto } from '$app/navigation';
@@ -14,12 +14,13 @@
import Spinner from '$lib/components/common/Spinner.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Badge from '$lib/components/common/Badge.svelte';
import Files from './Files.svelte';
import Files from './Collection/Files.svelte';
import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
import AddContentModal from './AddContentModal.svelte';
import AddContentModal from './Collection/AddTextContentModal.svelte';
import { transcribeAudio } from '$lib/apis/audio';
import { blobToFile } from '$lib/utils';
import { processFile } from '$lib/apis/retrieval';
import AddContentMenu from './Collection/AddContentMenu.svelte';
let largeScreen = true;
@@ -40,30 +41,9 @@
let selectedFileId = null;
let debounceTimeout = null;
let mediaQuery;
let dragged = false;
let showAddContentModal = false;
const changeDebounceHandler = () => {
console.log('debounce');
if (debounceTimeout) {
clearTimeout(debounceTimeout);
}
debounceTimeout = setTimeout(async () => {
const res = await updateKnowledgeById(localStorage.token, id, {
name: knowledge.name,
description: knowledge.description
}).catch((e) => {
toast.error(e);
});
if (res) {
toast.success($i18n.t('Knowledge updated successfully'));
}
}, 1000);
};
const uploadFileHandler = async (file) => {
console.log(file);
@@ -87,28 +67,8 @@
});
if (uploadedFile) {
const processedFile = await processFile(localStorage.token, uploadedFile.id, id).catch(
(e) => {
toast.error(e);
}
);
if (processedFile.status) {
knowledge.data.file_ids = [...(knowledge.data.file_ids ?? []), uploadedFile.id];
const updatedKnowledge = await updateKnowledgeById(localStorage.token, id, {
data: knowledge.data
}).catch((e) => {
toast.error(e);
});
if (updatedKnowledge) {
knowledge = updatedKnowledge;
toast.success($i18n.t('File added successfully.'));
}
} else {
toast.error($i18n.t('Failed to process file.'));
}
console.log(uploadedFile);
processFileHandler(uploadedFile);
} else {
toast.error($i18n.t('Failed to upload file.'));
}
@@ -117,17 +77,95 @@
}
};
const processFileHandler = async (uploadedFile) => {
const processedFile = await processFile(localStorage.token, uploadedFile.id, id).catch((e) => {
toast.error(e);
});
if (processedFile.status) {
console.log(processedFile);
if (!knowledge.data) {
knowledge.data = {};
}
knowledge.data.file_ids = [...(knowledge?.data?.file_ids ?? []), uploadedFile.id];
console.log(knowledge);
const updatedKnowledge = await updateKnowledgeById(localStorage.token, id, {
data: knowledge?.data ?? {}
}).catch((e) => {
console.error(e);
});
if (updatedKnowledge) {
knowledge = updatedKnowledge;
toast.success($i18n.t('File added successfully.'));
}
} else {
toast.error($i18n.t('Failed to process file.'));
}
};
const changeDebounceHandler = () => {
console.log('debounce');
if (debounceTimeout) {
clearTimeout(debounceTimeout);
}
debounceTimeout = setTimeout(async () => {
const res = await updateKnowledgeById(localStorage.token, id, {
name: knowledge.name,
description: knowledge.description
}).catch((e) => {
toast.error(e);
});
if (res) {
toast.success($i18n.t('Knowledge updated successfully'));
}
}, 1000);
};
const handleMediaQuery = async (e) => {
if (e.matches) {
largeScreen = true;
} else {
largeScreen = false;
}
};
const onDragOver = (e) => {
e.preventDefault();
dragged = true;
};
const onDragLeave = () => {
dragged = false;
};
const onDrop = async (e) => {
e.preventDefault();
if (e.dataTransfer?.files) {
const inputFiles = e.dataTransfer?.files;
if (inputFiles && inputFiles.length > 0) {
for (const file of inputFiles) {
await uploadFileHandler(file);
}
} else {
toast.error($i18n.t(`File not found.`));
}
}
dragged = false;
};
onMount(async () => {
// listen to resize 1024px
const mediaQuery = window.matchMedia('(min-width: 1024px)');
const handleMediaQuery = async (e) => {
if (e.matches) {
largeScreen = true;
} else {
largeScreen = false;
}
};
mediaQuery = window.matchMedia('(min-width: 1024px)');
mediaQuery.addEventListener('change', handleMediaQuery);
handleMediaQuery(mediaQuery);
@@ -146,45 +184,17 @@
}
const dropZone = document.querySelector('body');
const onDragOver = (e) => {
e.preventDefault();
dragged = true;
};
const onDragLeave = () => {
dragged = false;
};
const onDrop = async (e) => {
e.preventDefault();
if (e.dataTransfer?.files) {
const inputFiles = e.dataTransfer?.files;
if (inputFiles && inputFiles.length > 0) {
for (const file of inputFiles) {
await uploadFileHandler(file);
}
} else {
toast.error($i18n.t(`File not found.`));
}
}
dragged = false;
};
dropZone?.addEventListener('dragover', onDragOver);
dropZone?.addEventListener('drop', onDrop);
dropZone?.addEventListener('dragleave', onDragLeave);
});
return () => {
mediaQuery.removeEventListener('change', handleMediaQuery);
dropZone?.removeEventListener('dragover', onDragOver);
dropZone?.removeEventListener('drop', onDrop);
dropZone?.removeEventListener('dragleave', onDragLeave);
};
onDestroy(() => {
mediaQuery?.removeEventListener('change', handleMediaQuery);
const dropZone = document.querySelector('body');
dropZone?.removeEventListener('dragover', onDragOver);
dropZone?.removeEventListener('drop', onDrop);
dropZone?.removeEventListener('dragleave', onDragLeave);
});
</script>
@@ -211,13 +221,6 @@
</div>
{/if}
<AddContentModal
bind:show={showAddContentModal}
on:add={(e) => {
console.log(e);
}}
/>
<div class="flex flex-col w-full max-h-[100dvh] h-full">
<button
class="flex space-x-1"
@@ -282,57 +285,44 @@
<div
class=" {largeScreen
? 'flex-shrink-0'
: 'flex-1'} p-2.5 w-80 rounded-2xl border border-gray-50 dark:border-gray-850"
: 'flex-1'} flex py-2.5 w-80 rounded-2xl border border-gray-50 dark:border-gray-850"
>
<div class=" flex flex-col w-full space-x-2 rounded-lg h-full">
<div class="flex px-1">
<div class=" self-center ml-1 mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Collection')}
/>
<div>
<Tooltip content={$i18n.t('Add Content')}>
<button
class=" px-2 py-2 rounded-xl border border-gray-100 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
on:click={() => {
showAddContentModal = true;
}}
>
<div class="w-full h-full flex flex-col">
<div class=" px-3">
<div class="flex">
<div class=" self-center ml-1 mr-3">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
fill-rule="evenodd"
d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
clip-rule="evenodd"
/>
</svg>
</button>
</Tooltip>
</div>
</div>
<hr class="my-2 border-gray-50 dark:border-gray-850" />
</div>
<input
class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
bind:value={query}
placeholder={$i18n.t('Search Collection')}
/>
<div class="w-full h-full flex">
{#if (knowledge?.data?.file_ids ?? []).length > 0}
<Files files={knowledge.files} />
<div>
<AddContentMenu />
</div>
</div>
<hr class=" mt-2 mb-1 border-gray-50 dark:border-gray-850" />
</div>
{#if (knowledge?.files ?? []).length > 0}
<div class=" flex overflow-y-auto h-full w-full scrollbar-hidden text-xs">
<Files files={knowledge.files} />
</div>
{:else}
<div class="m-auto text-gray-500 text-xs">No content found</div>
{/if}

86
src/lib/components/workspace/Knowledge/Collection/AddContentMenu.svelte Normal file
View File

@@ -0,0 +1,86 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { flyAndScale } from '$lib/utils/transitions';
import { getContext, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
import Dropdown from '$lib/components/common/Dropdown.svelte';
import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
import Pencil from '$lib/components/icons/Pencil.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Tags from '$lib/components/chat/Tags.svelte';
import Share from '$lib/components/icons/Share.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
import ArrowDownTray from '$lib/components/icons/ArrowDownTray.svelte';
import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
const i18n = getContext('i18n');
export let onClose: Function = () => {};
let show = false;
</script>
<Dropdown
bind:show
on:change={(e) => {
if (e.detail === false) {
onClose();
}
}}
align="end"
>
<Tooltip content={$i18n.t('Add Content')}>
<button
class=" px-2 py-2 rounded-xl border border-gray-100 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
on:click={(e) => {
e.stopPropagation();
show = true;
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="w-4 h-4"
>
<path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
/>
</svg>
</button>
</Tooltip>
<div slot="content">
<DropdownMenu.Content
class="w-full max-w-44 rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow"
sideOffset={4}
side="bottom"
align="end"
transition={flyAndScale}
>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => {
dispatch('files');
}}
>
<ArrowUpCircle strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Upload files')}</div>
</DropdownMenu.Item>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => {
dispatch('text');
}}
>
<BarsArrowUp strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Add text content')}</div>
</DropdownMenu.Item>
</DropdownMenu.Content>
</div>
</Dropdown>

0
src/lib/components/workspace/Knowledge/AddContentModal.svelte → src/lib/components/workspace/Knowledge/Collection/AddTextContentModal.svelte
View File

0
src/lib/components/workspace/Knowledge/CreateKnowledge.svelte → src/lib/components/workspace/Knowledge/CreateCollection.svelte
View File