|
|
@@ -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 @@
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- onMount(async () => {
|
|
|
- // listen to resize 1024px
|
|
|
- const mediaQuery = window.matchMedia('(min-width: 1024px)');
|
|
|
+ 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);
|
|
|
+ });
|
|
|
|
|
|
- const handleMediaQuery = async (e) => {
|
|
|
- if (e.matches) {
|
|
|
- largeScreen = true;
|
|
|
+ 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 {
|
|
|
- largeScreen = false;
|
|
|
+ toast.error($i18n.t(`File not found.`));
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+
|
|
|
+ dragged = false;
|
|
|
+ };
|
|
|
+
|
|
|
+ onMount(async () => {
|
|
|
+ // listen to resize 1024px
|
|
|
+ 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>
|
|
|
+ <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>
|
|
|
+ <AddContentMenu />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <hr class=" mt-2 mb-1 border-gray-50 dark:border-gray-850" />
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <hr class="my-2 border-gray-50 dark:border-gray-850" />
|
|
|
|
|
|
- <div class="w-full h-full flex">
|
|
|
- {#if (knowledge?.data?.file_ids ?? []).length > 0}
|
|
|
- <Files files={knowledge.files} />
|
|
|
+ {#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}
|
Timothy J. Baek