refine file drop with limit

Author: Jicheng Lu

src/lib/common/FileDropZone.svelte

@@ -35,8 +35,10 @@
     export let inputElement = undefined;
     export let required = false;
     export let dropText = "Drag and drop some files here, or click to select files";
+    export let fileLimit = 5;
 
     let innerDropText = dropText;
+    let innerDisabled = disabled;
     let isLoading = false;
     let isError = false;
     let isSuccess = false;
@@ -48,16 +50,16 @@
     $: {
         if (isLoading) {
             innerDropText = "Uploading...";
-            disabled = true;
+            innerDisabled = true;
         } else if (isSuccess) {
             innerDropText = defaultSuccessMesssage;
-            disabled = true;
+            innerDisabled = true;
         } else if (isError) {
             innerDropText = reason;
-            disabled = true;
+            innerDisabled = true;
         } else {
             innerDropText = dropText;
-            disabled = false;
+            innerDisabled = disabled;
         }
     }
 
@@ -225,9 +227,9 @@
                 }
 
                 /** @type {any[]} */
-                const acceptedFiles = [];
+                let acceptedFiles = [];
                 /** @type {any[]} */
-                const fileRejections = [];
+                let fileRejections = [];
 
                 /** @type {Promise<any>[]} */
                 const promises = [];
@@ -236,12 +238,14 @@
                     promises.push(new Promise((resolve, reject) => {
                         const [accepted, acceptError] = fileAccepted(file, accept);
                         const [sizeMatch, sizeError] = fileMatchSize(file, minSize, maxSize);
-                        getBase64(file).then(res => {
+                        getBase64(file).then(data => {
                             if (accepted && sizeMatch) {
                                 acceptedFiles.push({
                                     file_name: file.name,
                                     file_path: file.path,
-                                    url: res
+                                    file_data: data,
+                                    content_type: file.type,
+                                    file_size: file.size
                                 });
                             } else {
                                 const errors = [acceptError, sizeError].filter(Boolean);
@@ -254,6 +258,9 @@
 
                 Promise.all(promises).then(() => {
                     isLoading = false;
+                    if (acceptedFiles.length >= fileLimit) {
+                        acceptedFiles = acceptedFiles.slice(0, Math.max(fileLimit, 0));
+                    }
 
                     if (!multiple && acceptedFiles.length > 1) {
                         // Reject everything and empty accepted files
@@ -310,7 +317,7 @@
         resetState();
     }
   
-    $: composeHandler = (/** @type {any} */ fn) => (disabled ? null : fn);
+    $: composeHandler = (/** @type {any} */ fn) => (innerDisabled ? null : fn);
   
     $: composeKeyboardHandler = (/** @type {any} */ fn) => (noKeyboard ? null : composeHandler(fn));
   

src/lib/common/FileGallery.svelte

@@ -43,7 +43,7 @@
                                     <i class="bx bx-trash" />
                                 </div>
                             {/if}
-                            <img class="gallery-item-image" src={file.url} alt={''}>
+                            <img class="gallery-item-image" src={file.file_data} alt={''}>
                         </div>
                     </GalleryThumbnail>
                 </div>
@@ -52,7 +52,7 @@
 
         {#each files as file, idx (idx)}
             <GalleryImage title={file.file_name}>
-                <img src={file.url} alt={''} />
+                <img src={file.file_data} alt={''} />
                 <div class="item-text">{file.file_name}</div>
             </GalleryImage>
         {/each}

src/lib/helpers/types.js

@@ -272,6 +272,7 @@ IRichContent.prototype.text;
  * @property {UserModel} sender - The message sender.
  * @property {string} message_id - The message id.
  * @property {string} text - The message content.
+ * @property {string} editor - The message editor.
  * @property {string} function - The function name.
  * @property {RichContent} rich_content - Rich content.
  * @property {string} post_action_disclaimer - The message disclaimer.

src/lib/services/conversation-service.js

@@ -64,8 +64,9 @@ export async function GetDialogs(conversationId) {
  * @param {string} conversationId - The conversation id
  * @param {string} message - The text message sent to CSR
  * @param {import('$types').MessageData?} data - Additional data
+ * @param {any[]} files - The chat files
  */
-export async function sendMessageToHub(agentId, conversationId, message, data = null) {
+export async function sendMessageToHub(agentId, conversationId, message, data = null, files = []) {
     let url = replaceUrl(endpoints.conversationMessageUrl, {
         agentId: agentId,
         conversationId: conversationId
@@ -76,7 +77,8 @@ export async function sendMessageToHub(agentId, conversationId, message, data =
         text: message,
         truncateMessageId: data?.truncateMsgId,
         states: totalStates,
-        postback: data?.postback
+        postback: data?.postback,
+        files: files
     });
     return response.data;
 }

src/routes/chat/[agentId]/[conversationId]/chat-box.svelte

@@ -30,7 +30,6 @@
 	import _ from "lodash";
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import StateLog from './stateLogs/state-log.svelte';
-	import ChatImage from './chatImage/chat-image.svelte';
 	import Swal from 'sweetalert2/dist/sweetalert2.js';
 	import "sweetalert2/src/sweetalert2.scss";
 	import moment from 'moment';
@@ -273,6 +272,22 @@
 		});
 	}
 
+	function getChatFiles() {
+		if (lastBotMsg?.rich_content?.editor !== EditorType.File) {
+			return [];
+		}
+
+		const attachments = conversationUserAttachmentStore.get();
+		const files = attachments?.accepted_files || [];
+		return files.map((/** @type {any} */ f) => {
+			return {
+				...f,
+				conversation_id: params.conversationId,
+				message_id: lastBotMsg?.message_id
+			};
+		});
+	}
+
 
 	/** @param {import('$types').ChatResponseModel} message */
 	function onMessageReceivedFromClient(message) {
@@ -357,22 +372,26 @@
 		isSendingMsg = true;
 		clearEventLogs();
 		renewUserSentMessages(msgText);
-
 		const postback = buildPostbackMessage(dialogs, data?.payload || msgText, data?.truncateMsgId);
 		/** @type {import('$types').MessageData?} */
 		const messageData = {
 			...data,
 			postback: postback
 		};
-		
+
+		/** @type {any[]} */
+		let files = [];
+		if (!!!data?.truncateMsgId) {
+			files = getChatFiles();
+		}
+		resetStorage();
+
 		return new Promise((resolve, reject) => {
-			sendMessageToHub(params.agentId, params.conversationId, msgText, messageData).then(res => {
+			sendMessageToHub(params.agentId, params.conversationId, msgText, messageData, files).then(res => {
 				isSendingMsg = false;
-				resetStorage();
 				resolve(res);
 			}).catch(err => {
 				isSendingMsg = false;
-				resetStorage();
 				reject(err);
 			});
 		});

src/routes/chat/[agentId]/[conversationId]/chatImage/chat-attachment.svelte

@@ -15,18 +15,28 @@
 
     /** @type {any[]} */
     let files = [];
-
     /** @type {any} */
     let confirmOption;
     /** @type {any} */
     let cancelOption;
+    /** @type {boolean} */
+    let disableFileDrop = false;
+    /** @type {number} */
+    let fileUploadLimit = 0;
+
+    const fileUpperLimit = 5;
 
     onMount(() => {
         collectOptions(options);
         const savedAttachments = conversationUserAttachmentStore.get();
-        files = savedAttachments.acceptedFiles || [];
+        files = savedAttachments.accepted_files || [];
     });
 
+    $: {
+        disableFileDrop = disabled || files.length >= fileUpperLimit;
+        fileUploadLimit = Math.max(fileUpperLimit - files.length, 0);
+    }
+
 
     /** @param {any[]} options */
     function collectOptions(options) {
@@ -69,9 +79,9 @@
     async function handleFileDrop(e) {
         const { acceptedFiles } = e.detail;
         const savedAttachments = conversationUserAttachmentStore.get();
-        const newAttachments = [...savedAttachments.acceptedFiles || [], ...acceptedFiles];
+        const newAttachments = [...savedAttachments.accepted_files || [], ...acceptedFiles];
         conversationUserAttachmentStore.put({
-            acceptedFiles: newAttachments
+            accepted_files: newAttachments
         });
         files = newAttachments;
     }
@@ -80,15 +90,15 @@
     function deleteFile(index) {
         files = files?.filter((f, idx) => idx !== index) || [];
         conversationUserAttachmentStore.put({
-            acceptedFiles: files
+            accepted_files: files
         });
     }
 </script>
 
 <div style="display: block; margin-top: 3px;">
     <div style="display: flex; flex-wrap: wrap; gap: 3px;">
         <FileGallery files={files} disabled={disabled} needDelete onDelete={deleteFile} />
-        <FileDropZone accept="image/*" disabled={disabled} on:drop={e => handleFileDrop(e)} />
+        <FileDropZone accept="image/*" disabled={disableFileDrop} fileLimit={fileUploadLimit} on:drop={e => handleFileDrop(e)} />
     </div>
 </div>
 

src/routes/chat/[agentId]/[conversationId]/chatImage/chat-image.svelte

@@ -5,7 +5,7 @@
 	export let message;
 </script>
 
-{#if message?.data && typeof message.data === 'string' && message.data.includes('data:image/png;base64,')}
+{#if message?.data && typeof message.data === 'string' && message.data.startsWith('data:image/png;base64,')}
 <div class="image-wrap">
     <Lightbox transitionDuration={100}>
         <img src={message.data} alt={''} class="rounded img-fluid" />