feat: documents file upload

backend/apps/rag/main.py

@@ -119,7 +119,11 @@ def store_web(form_data: StoreWebForm, user=Depends(get_current_user)):
         loader = WebBaseLoader(form_data.url)
         data = loader.load()
         store_data_in_vector_db(data, form_data.collection_name)
-        return {"status": True, "collection_name": form_data.collection_name}
+        return {
+            "status": True,
+            "collection_name": form_data.collection_name,
+            "filename": form_data.url,
+        }
     except Exception as e:
         print(e)
         raise HTTPException(
@@ -176,7 +180,11 @@ def store_doc(
         result = store_data_in_vector_db(data, collection_name)
 
         if result:
-            return {"status": True, "collection_name": collection_name}
+            return {
+                "status": True,
+                "collection_name": collection_name,
+                "filename": filename,
+            }
         else:
             raise HTTPException(
                 status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,

src/routes/(app)/+layout.svelte

@@ -13,13 +13,22 @@
 
 	import { getOpenAIModels } from '$lib/apis/openai';
 
-	import { user, showSettings, settings, models, modelfiles, prompts } from '$lib/stores';
+	import {
+		user,
+		showSettings,
+		settings,
+		models,
+		modelfiles,
+		prompts,
+		documents
+	} from '$lib/stores';
 	import { REQUIRED_OLLAMA_VERSION, WEBUI_API_BASE_URL } from '$lib/constants';
 
 	import SettingsModal from '$lib/components/chat/SettingsModal.svelte';
 	import Sidebar from '$lib/components/layout/Sidebar.svelte';
 	import { checkVersion } from '$lib/utils';
 	import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
+	import { getDocs } from '$lib/apis/documents';
 
 	let ollamaVersion = '';
 	let loaded = false;
@@ -93,11 +102,10 @@
 
 			console.log();
 			await settings.set(JSON.parse(localStorage.getItem('settings') ?? '{}'));
+
 			await modelfiles.set(await getModelfiles(localStorage.token));
-
 			await prompts.set(await getPrompts(localStorage.token));
-
+			await documents.set(await getDocs(localStorage.token));
-			console.log($modelfiles);
 
 			modelfiles.subscribe(async () => {
 				// should fetch models

src/routes/(app)/documents/+page.svelte

@@ -6,10 +6,13 @@
 	import { onMount } from 'svelte';
 	import { documents } from '$lib/stores';
 	import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents';
-	import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
+
 	import { SUPPORTED_FILE_TYPE } from '$lib/constants';
+	import { uploadDocToVectorDB } from '$lib/apis/rag';
 
 	let importFiles = '';
+
+	let inputFiles = '';
 	let query = '';
 
 	let dragged = false;
@@ -19,16 +22,31 @@
 		await documents.set(await getDocs(localStorage.token));
 	};
 
-	onMount(() => {
+	const uploadDoc = async (file) => {
-		// const dropZone = document.querySelector('body');
+		const res = await uploadDocToVectorDB(localStorage.token, '', file);
-		const dropZone = document.getElementById('dropzone');
 
-		dropZone?.addEventListener('dragover', (e) => {
+		if (res) {
+			await createNewDoc(
+				localStorage.token,
+				res.collection_name,
+				res.filename,
+				res.filename,
+				res.filename
+			);
+			await documents.set(await getDocs(localStorage.token));
+		}
+	};
+
+	const onDragOver = (e) => {
 		e.preventDefault();
 		dragged = true;
-		});
+	};
 
-		dropZone?.addEventListener('drop', async (e) => {
+	const onDragLeave = () => {
+		dragged = false;
+	};
+
+	const onDrop = async (e) => {
 		e.preventDefault();
 		console.log(e);
 
@@ -38,8 +56,7 @@
 			if (inputFiles && inputFiles.length > 0) {
 				const file = inputFiles[0];
 				if (SUPPORTED_FILE_TYPE.includes(file['type'])) {
-						console.log(file);
+					uploadDoc(file);
-						// uploadDoc(file);
 				} else {
 					toast.error(`Unsupported File Type '${file['type']}'.`);
 				}
@@ -47,12 +64,9 @@
 				toast.error(`File not found.`);
 			}
 		}
-		});
 
-		dropZone?.addEventListener('dragleave', () => {
 		dragged = false;
-		});
+	};
-	});
 </script>
 
 <div class="min-h-screen w-full flex justify-center dark:text-white">
@@ -86,9 +100,11 @@
 				</div>
 
 				<div>
-					<a
+					<button
 						class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
-						href="/prompts/create"
+						on:click={() => {
+							document.getElementById('upload-doc-input')?.click();
+						}}
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -100,26 +116,56 @@
 								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>
-					</a>
+					</button>
 				</div>
 			</div>
 
+			<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'])) {
+							uploadDoc(file);
+						} else {
+							toast.error(`Unsupported File Type '${file['type']}'.`);
+						}
+
+						inputFiles = null;
+						e.target.value = '';
+					} else {
+						toast.error(`File not found.`);
+					}
+				}}
+			/>
+
+			<div>
 				<div
-				class="z-50 touch-none pointer-events-none"
+					class="my-3 py-16 rounded-lg border-2 border-dashed dark:border-gray-600 {dragged &&
-				id="dropzone"
+						' dark:bg-gray-700'} "
 					role="region"
-				aria-label="Drag and Drop Container"
+					on:drop={onDrop}
+					on:dragover={onDragOver}
+					on:dragleave={onDragLeave}
 				>
-				{#if $documents.length === 0 || dragged}
+					<div class="  pointer-events-none">
-					<div class="my-3 py-16 rounded-lg border-2 border-dashed dark:border-gray-600">
+						<div class="text-center dark:text-white text-2xl font-semibold z-50">Add Files</div>
-						<AddFilesPlaceholder />
+
+						<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
+							Drop any files here to add to the conversation
 						</div>
-				{:else}
+					</div>
+				</div>
+			</div>
+
 			{#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 mb-3">
 					<div class=" flex flex-1 space-x-4 cursor-pointer w-full">
-								<a href={`/prompts/edit?command=${encodeURIComponent(doc.name)}`}>
+						<a href={`#`}>
 							<div class=" flex-1 self-center pl-5">
 								<div class=" font-bold line-clamp-1">#{doc.name} ({doc.filename})</div>
 								<div class=" text-xs overflow-hidden text-ellipsis line-clamp-1">
@@ -154,21 +200,20 @@
 									class="self-center w-fit text-sm px-2 py-2 border dark:border-gray-600 rounded-xl"
 									type="button"
 									on:click={() => {
-									sharePrompt(prompt);
+										console.log('download file');
 									}}
 								>
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
-									fill="none"
+										viewBox="0 0 16 16"
-									viewBox="0 0 24 24"
+										fill="currentColor"
-									stroke-width="1.5"
-									stroke="currentColor"
 										class="w-4 h-4"
 									>
 										<path
-										stroke-linecap="round"
+											d="M8.75 2.75a.75.75 0 0 0-1.5 0v5.69L5.03 6.22a.75.75 0 0 0-1.06 1.06l3.5 3.5a.75.75 0 0 0 1.06 0l3.5-3.5a.75.75 0 0 0-1.06-1.06L8.75 8.44V2.75Z"
-										stroke-linejoin="round"
+										/>
-										d="M7.217 10.907a2.25 2.25 0 100 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186l9.566-5.314m-9.566 7.5l9.566 5.314m0 0a2.25 2.25 0 103.935 2.186 2.25 2.25 0 00-3.935-2.186zm0-12.814a2.25 2.25 0 103.933-2.185 2.25 2.25 0 00-3.933 2.185z"
+										<path
+											d="M3.5 9.75a.75.75 0 0 0-1.5 0v1.5A2.75 2.75 0 0 0 4.75 14h6.5A2.75 2.75 0 0 0 14 11.25v-1.5a.75.75 0 0 0-1.5 0v1.5c0 .69-.56 1.25-1.25 1.25h-6.5c-.69 0-1.25-.56-1.25-1.25v-1.5Z"
 										/>
 									</svg>
 								</button> -->
@@ -198,9 +243,6 @@
 					</div>
 				</div>
 			{/each}
-				{/if}
-			</div>
-
 			{#if $documents.length != 0}
 				<hr class=" dark:border-gray-700 my-2.5" />