From 8e6b0aa0bc044446224fc9075ba62f1d1ae76873 Mon Sep 17 00:00:00 2001
From: Chukwuma Nwaugha <nwaughac@gmail.com>
Date: Fri, 6 Dec 2024 14:51:38 +0000
Subject: [PATCH] improve chat_box attachment and attachment preview components

---
 .../lib/components/ChatBoxAttachment.svelte   |  5 ++---
 .../ChatBoxAttachmentPreview.svelte           | 22 +++++++++++++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/app/src/lib/components/ChatBoxAttachment.svelte b/app/src/lib/components/ChatBoxAttachment.svelte
index 4679683..1c9a9f7 100644
--- a/app/src/lib/components/ChatBoxAttachment.svelte
+++ b/app/src/lib/components/ChatBoxAttachment.svelte
@@ -23,8 +23,7 @@
 		const files = Array.from(fileList);
 
 		if (selectedFiles.length + files.length > MAX_FILES) {
-			alert(`You can only upload up to ${MAX_FILES} files`);
-			return;
+			return toast.info(`You can only upload up to ${MAX_FILES} files`);
 		}
 
 		selectedFiles = [...selectedFiles, ...files];
@@ -47,7 +46,7 @@
 
 <input
 	type="file"
-	accept=".pdf,.txt"
+	accept=".pdf,.txt,.docx"
 	multiple
 	class="hidden"
 	bind:this={fileInput}
diff --git a/app/src/lib/components/ChatBoxAttachmentPreview.svelte b/app/src/lib/components/ChatBoxAttachmentPreview.svelte
index 0d17317..8ec9682 100644
--- a/app/src/lib/components/ChatBoxAttachmentPreview.svelte
+++ b/app/src/lib/components/ChatBoxAttachmentPreview.svelte
@@ -19,21 +19,35 @@
 		const i = Math.floor(Math.log(bytes) / Math.log(k));
 		return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
 	}
+
+	function parseFileType(file: File) {
+		const fileType = file.type.split('/')[1];
+		switch (fileType) {
+			case 'pdf':
+				return 'pdf';
+			case 'vnd.openxmlformats-officedocument.wordprocessingml.document':
+				return 'docx';
+			case 'plain':
+				return 'txt';
+			default:
+				return fileType;
+		}
+	}
 </script>
 
-<div class="p-2 space-y-2 bg-zinc-800/30">
+<div class="p-2 flex flex-wrap gap-2 bg-zinc-800/30">
 	{#each selectedFiles as file, index}
-		<div class="flex items-center justify-between bg-zinc-700/30 rounded p-2">
+		<div class="flex items-center w-56 justify-between bg-zinc-700/30 rounded p-2">
 			<div class="flex-1 min-w-0">
 				<p class="text-sm text-white truncate">{file.name}</p>
 				<p class="text-xs text-zinc-400">
-					{formatFileSize(file.size)} • {file.type || 'text/plain'}
+					{formatFileSize(file.size)} • {parseFileType(file)}
 				</p>
 			</div>
 			<Button
 				variant="ghost"
 				size="icon"
-				class="text-zinc-400 hover:text-white"
+				class="text-zinc-400 hover:text-white hover:bg-zinc-700/70"
 				on:click={() => removeFile(index)}
 			>
 				<XIcon class="h-4 w-4" />