Better UI/UX feedback for uploaded pdf

Author: mishig25

src/lib/components/UploadBtn.svelte

@@ -1,22 +1,26 @@
 <script lang="ts">
-	import { PdfUploadStatus } from "$lib/types/PdfChat";
+	import { PdfUploadStatus, type PdfUpload } from "$lib/types/PdfChat";
 	import { createEventDispatcher, onDestroy } from "svelte";
 	import CarbonUpload from "~icons/carbon/upload";
+	import CarbonCheckmark from "~icons/carbon/checkmark";
 
 	export let classNames = "";
 	export let multimodal = false;
 	export let files: File[];
-	export let uploadPdfStatus: PdfUploadStatus | undefined = undefined;
+	export let pdfUpload: PdfUpload | undefined = undefined;
 	const accept = multimodal ? "image/*,.pdf" : ".pdf";
 	const label = multimodal ? "Upload image or PDF" : "Upload PDF";
 	let fileInput: HTMLInputElement;
 	let interval: ReturnType<typeof setInterval>;
 
-	$: uploading = uploadPdfStatus === PdfUploadStatus.Uploading;
+	$: pdfUploading = pdfUpload?.status === PdfUploadStatus.Uploading;
 	$: {
-		if (uploadPdfStatus === PdfUploadStatus.Uploaded) {
+		if (pdfUpload?.status === PdfUploadStatus.Uploaded) {
 			interval = setInterval(() => {
-				uploadPdfStatus = PdfUploadStatus.Ready;
+				if (!pdfUpload) {
+					return;
+				}
+				pdfUpload.status = PdfUploadStatus.Ready;
 			}, 1500);
 		}
 	}
@@ -34,7 +38,7 @@
 		if (file?.type === "application/pdf") {
 			// pdf upload
 			dispatch("uploadpdf", file);
-		} else if(multimodal && file?.type.startsWith("image")){
+		} else if (multimodal && file?.type.startsWith("image")) {
 			// image files for multimodal models
 			files = Array.from(fileInput.files);
 		}
@@ -49,23 +53,25 @@
 
 <button
 	class="btn relative h-8 rounded-lg border bg-white px-3 py-1 text-sm text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 {classNames}"
-	class:animate-pulse={uploading}
-	class:pointer-events-none={uploading}
+	class:animate-pulse={pdfUploading}
+	class:pointer-events-none={pdfUploading || pdfUpload?.status === PdfUploadStatus.Uploaded}
 >
 	<input
 		bind:this={fileInput}
 		on:change={onChange}
 		class="absolute w-full cursor-pointer opacity-0"
 		type="file"
 		{accept}
-		disabled={uploading}
+		disabled={pdfUploading}
 	/>
-	<CarbonUpload class="mr-2 text-xs " />
-	{#if uploadPdfStatus === PdfUploadStatus.Uploaded}
-		PDF Uploaded ✅
-	{:else if uploading}
-		Processing PDF file
+	{#if pdfUpload?.status !== PdfUploadStatus.Uploaded}
+		<CarbonUpload class="text-xs" />
 	{:else}
-		{label}
+		<CarbonCheckmark class="text-xs text-green-500" />
+	{/if}
+	{#if multimodal || !pdfUpload?.name}
+		<div class="ml-2">
+			{label}
+		</div>
 	{/if}
 </button>

src/lib/components/UploadedPdfStatus.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { PdfUploadStatus, type PdfUpload } from "$lib/types/PdfChat";
+	import CarbonDocumentBlank from "~icons/carbon/document-blank";
+	import CarbonClose from "~icons/carbon/close";
+	import { createEventDispatcher } from "svelte";
+
+	export let pdfUpload: PdfUpload;
+
+	const dispatch = createEventDispatcher<{
+		deletepdf: void;
+	}>();
+
+	$: uploading = pdfUpload.status === PdfUploadStatus.Uploading;
+</script>
+
+<div
+	class="max-w-48 group flex items-center gap-x-1"
+	class:animate-pulse={uploading}
+	class:pointer-events-none={uploading}
+	title={pdfUpload.name}
+>
+	<button
+		class="-mr-1 block md:hidden shrink-0 opacity-70 group-hover:block"
+		on:click={() => dispatch("deletepdf")}><CarbonClose /></button
+	>
+	<CarbonDocumentBlank class="shrink-0" />
+	<p class="truncate hidden md:block">{pdfUpload.name}</p>
+</div>

src/lib/components/chat/ChatWindow.svelte

@@ -24,7 +24,8 @@
 	import UploadBtn from "../UploadBtn.svelte";
 	import file2base64 from "$lib/utils/file2base64";
 	import { useSettingsStore } from "$lib/stores/settings";
-	import type { PdfUploadStatus } from "$lib/types/PdfChat";
+	import type { PdfUpload } from "$lib/types/PdfChat";
+	import UploadedPdfStatus from "../UploadedPdfStatus.svelte";
 
 	export let messages: Message[] = [];
 	export let loading = false;
@@ -35,7 +36,7 @@
 	export let RAGMessages: RAGUpdate[] = [];
 	export let preprompt: string | undefined = undefined;
 	export let files: File[] = [];
-	export let uploadPdfStatus: PdfUploadStatus | undefined = undefined;
+	export let pdfUpload: PdfUpload | undefined = undefined;
 
 	$: isReadOnly = !models.some((model) => model.id === currentModel.id);
 
@@ -176,13 +177,12 @@
 							})}
 					/>
 				{/if}
-				<UploadBtn
-					bind:files
-					on:uploadpdf
-					classNames="ml-auto"
-					multimodal={currentModel.multimodal}
-					{uploadPdfStatus}
-				/>
+				<div class="ml-auto flex items-center gap-x-3">
+					{#if pdfUpload?.name}
+						<UploadedPdfStatus on:deletepdf {pdfUpload} />
+					{/if}
+					<UploadBtn bind:files on:uploadpdf multimodal={currentModel.multimodal} {pdfUpload} />
+				</div>
 			</div>
 			<form
 				on:dragover={onDragOver}

src/lib/server/files/uploadFile.ts

@@ -21,22 +21,27 @@ export async function uploadImgFile(file: Blob, conv: Conversation): Promise<str
 	});
 }
 
-export async function uploadPdfEmbeddings(
-	embeddings: Tensor,
-	textChunks: string[],
-	conv: Conversation
-): Promise<void> {
-	const filename = `${conv._id}-pdf`;
-
+export async function deleteFile(filename: string){
 	// Step 1: Check if the file exists
 	const existingFile = await collections.files.findOne({ filename });
 
 	// Step 2: Delete the existing file if it exists
 	if (existingFile) {
 		await collections.bucket.delete(existingFile._id);
 	}
+}
+
+export async function uploadPdfEmbeddings(
+	embeddings: Tensor,
+	textChunks: string[],
+	conv: Conversation
+): Promise<void> {
+	const filename = `${conv._id}-pdf`;
+
+	// Step 1: Delete the existing file if it exists
+	await deleteFile(filename);
 
-	// Step 3: Upload the new file
+	// Step 2: Upload the new file
 	const upload = collections.bucket.openUploadStream(filename, {
 		metadata: { conversation: conv._id.toString(), textChunks, dims: embeddings.dims },
 	});

src/lib/types/PdfChat.ts

@@ -12,3 +12,8 @@ export enum PdfUploadStatus {
 	Uploading = "Uploading",
 	Uploaded = "Uploaded",
 }
+
+export interface PdfUpload {
+	status: PdfUploadStatus;
+	name: string;
+}

src/routes/conversation/[id]/+page.svelte

@@ -16,7 +16,7 @@
 	import type { MessageUpdate, RAGUpdate } from "$lib/types/MessageUpdate";
 	import titleUpdate from "$lib/stores/titleUpdate";
 	import file2base64 from "$lib/utils/file2base64";
-	import { PdfUploadStatus } from "$lib/types/PdfChat.js";
+	import { PdfUploadStatus, type PdfUpload } from "$lib/types/PdfChat.js";
 	export let data;
 
 	let messages = data.messages;
@@ -32,7 +32,7 @@
 
 	let loading = false;
 	let pending = false;
-	let uploadPdfStatus: PdfUploadStatus;
+	let pdfUpload: PdfUpload | undefined = undefined;
 
 	let files: File[] = [];
 
@@ -275,7 +275,7 @@
 	}
 
 	async function uploadPdf(file: File) {
-		uploadPdfStatus = PdfUploadStatus.Uploading;
+		pdfUpload = { status: PdfUploadStatus.Uploading, name: file.name };
 
 		const formData = new FormData();
 		formData.append("pdf", file);
@@ -290,7 +290,20 @@
 			console.error("Error while uploading PDF: " + (await res.text()));
 		}
 
-		uploadPdfStatus = PdfUploadStatus.Uploaded;
+		pdfUpload.status = PdfUploadStatus.Uploaded;
+	}
+
+	async function deletePdf() {
+		const res = await fetch(`${base}/conversation/${$page.params.id}/upload-pdf`, {
+			method: "DELETE",
+		});
+
+		if (!res.ok) {
+			error.set("Error while deleting PDF, try again.");
+			console.error("Error while deleting PDF: " + (await res.text()));
+		}
+
+		pdfUpload = undefined;
 	}
 
 	onMount(async () => {
@@ -359,7 +372,8 @@
 	on:retry={onRetry}
 	on:vote={(event) => voteMessage(event.detail.score, event.detail.id)}
 	on:uploadpdf={(event) => uploadPdf(event.detail)}
-	{uploadPdfStatus}
+	on:deletepdf={deletePdf}
+	{pdfUpload}
 	on:share={() => shareConversation($page.params.id, data.title)}
 	on:stop={() => (($isAborted = true), (loading = false))}
 	models={data.models}

src/routes/conversation/[id]/upload-pdf/+server.ts

@@ -1,7 +1,7 @@
 import { authCondition } from "$lib/server/auth";
 import { collections } from "$lib/server/database";
 import { MAX_SEQ_LEN as CHUNK_CAR_LEN, createEmbeddings } from "$lib/server/embeddings";
-import { uploadPdfEmbeddings } from "$lib/server/files/uploadFile";
+import { deleteFile, uploadPdfEmbeddings } from "$lib/server/files/uploadFile";
 import { chunk } from "$lib/utils/chunk";
 import { error } from "@sveltejs/kit";
 import { ObjectId } from "mongodb";
@@ -41,3 +41,21 @@ export async function POST({ request, params, locals }) {
 
 	return new Response();
 }
+
+export async function DELETE({ params, locals }) {
+	const conversationId = new ObjectId(params.id);
+	const conversation = await collections.conversations.findOne({
+		_id: conversationId,
+		...authCondition(locals),
+	});
+
+	if (!conversation) {
+		throw error(404, "Conversation not found");
+	}
+
+	const filename = `${conversation._id}-pdf`;
+
+	await deleteFile(filename);
+
+	return new Response();
+}