refine file gallery

Author: Jicheng Lu

src/lib/common/FileGallery.svelte

@@ -13,6 +13,15 @@
     /** @type {(args0: number) => void} */
     export let onDelete = () => {};
 
+    /** @type {string} */
+    export let containerClasses = "";
+
+    /** @type {string} */
+    export let containerStyles = "";
+
+    /** @type {boolean} */
+    export let disableDefaultStyles = false;
+
     /**
 	 * @param {any} e
 	 * @param {number} idx
@@ -26,6 +35,10 @@
 </script>
 
 {#if files?.length > 0}
+<div
+    class="{disableDefaultStyles ? '' : 'file-gallery-list'} {containerClasses}"
+    style={`${containerStyles}`}
+>
     <LightboxGallery transitionDuration={100}>
         <svelte:fragment slot="thumbnail">
             {#each files as file, idx (idx)}
@@ -59,4 +72,5 @@
             </GalleryImage>
         {/each}
     </LightboxGallery>
-{/if}
+</div>
+{/if}

src/lib/helpers/constants.js

@@ -4,4 +4,8 @@ export const USER_SENDERS = [
     UserRole.Admin,
     UserRole.User,
     UserRole.Client
+];
+
+export const BOT_SENDERS = [
+    UserRole.Assistant
 ];

src/lib/scss/custom/components/_file.scss

@@ -76,10 +76,10 @@ $file-screen-max-width: 500px;
     }
 }
 
-.chat-file-upload-gallery {
-    margin: 5px 10px;
+.file-gallery-list {
+    margin: 5px 0px;
     display: flex;
     flex-wrap: wrap;
     gap: 3px;
-    justify-content: center;
+    justify-content: flex-start;
 }

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

@@ -11,7 +11,7 @@
 	import { onMount, setContext, tick } from 'svelte';
 	import Viewport from 'svelte-viewport-info';
 	import { PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public';
-	import { USER_SENDERS } from '$lib/helpers/constants';
+	import { BOT_SENDERS, USER_SENDERS } from '$lib/helpers/constants';
 	import { signalr } from '$lib/services/signalr-service.js';
 	import { webSpeech } from '$lib/services/web-speech.js';
     import { sendMessageToHub, GetDialogs, deleteConversationMessage } from '$lib/services/conversation-service.js';
@@ -161,7 +161,7 @@
 
 	/** @param {import('$types').ChatResponseModel[]} dialogs */
 	function initUserSentMessages(dialogs) {
-		const curConvMessages = dialogs?.filter(x => x.sender?.role != UserRole.Assistant).map(x => {
+		const curConvMessages = dialogs?.filter(x => USER_SENDERS.includes(x.sender?.role || '')).map(x => {
 			return {
 				conversationId: params.conversationId,
 				text: x.text || ''
@@ -212,7 +212,7 @@
 	/** @param {import('$types').ChatResponseModel[]} dialogs */
 	function findLastBotMessage(dialogs) {
 		const lastMsg = dialogs.slice(-1)[0];
-		return lastMsg?.sender?.role === UserRole.Assistant ? lastMsg : null;
+		return BOT_SENDERS.includes(lastMsg?.sender?.role || '') ? lastMsg : null;
 	}
 
 	async function refresh() {
@@ -247,15 +247,9 @@
 				continue;
 			}
 
-			const botMsgId = dialogs.findLastIndex((x, i) => i < idx && !USER_SENDERS.includes(x.sender?.role || ''));
-			if (botMsgId > -1 && dialogs[botMsgId]?.rich_content?.editor === EditorType.File) {
-				const userMsgs = dialogs.filter(x => x.message_id === curMsg.message_id && USER_SENDERS.includes(x.sender?.role || ''));
-				if (userMsgs?.length > 1) {
-					const userMsg = userMsgs.slice(-1)[0];
-					userMsg.is_load_images = true;
-				} else {
-					curMsg.is_load_images = true;
-				}
+			const prevMsg = dialogs[idx-1];
+			if (!!prevMsg && BOT_SENDERS.includes(prevMsg?.sender?.role || '') && prevMsg?.rich_content?.editor === EditorType.File) {
+				curMsg.is_load_images = true;
 			}
 		}
 	}
@@ -506,7 +500,7 @@
 
 		if (!!lastMsg?.rich_content?.fill_postback
 			&& !!lastMsg?.function
-			&& lastMsg?.sender?.role === UserRole.Assistant) {
+			&& BOT_SENDERS.includes(lastMsg?.sender?.role || '')) {
 			postback = {
 				functionName: lastMsg?.function,
 				parentId: lastMsg?.message_id,

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

@@ -34,8 +34,11 @@
 </script>
 
 <div>
-    <div class="chat-file-upload-gallery">
-        <FileGallery files={files} disabled={disabled} needDelete onDelete={deleteFile} />
-    </div>
+    <FileGallery
+        containerStyles={'justify-content: center; margin: 5px 10px;'}
+        files={files}
+        disabled={disabled}
+        needDelete
+        onDelete={deleteFile} />
 </div>
 

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

@@ -29,8 +29,9 @@
     });
 </script>
 
-<div style="display: block; margin-top: 3px;">
-    <div style="display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-end;">
-        <FileGallery files={files} />
-    </div>
+<div>
+    <FileGallery
+        containerStyles={'justify-content: flex-end;'}
+        files={files}
+    />
 </div>

src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte

@@ -4,7 +4,6 @@
 	import RcComplexOptions from "./rc-complex-options.svelte";
 	import RcMessage from "./rc-message.svelte";
 	import ChatAttachmentOptions from "../chatImage/chat-attachment-options.svelte";
-	import FileGallery from "$lib/common/FileGallery.svelte";
 	
     /** @type {any} */
     export let message;
@@ -61,10 +60,6 @@
     <ChatAttachmentOptions options={options} disabled={disabled} onConfirm={handleConfirm} />
 {/if}
 
-{#if message.message_id !== lastBotMessage?.message_id}
-    <FileGallery files={message.files} />
-{/if}
-
 {#if message.message_id === lastBotMessage?.message_id && !disabled && lastBotMessage?.rich_content?.editor !== EditorType.File}
     {#if !isComplexElement}
         <RcPlainOptions options={options} isMultiSelect={isMultiSelect} disabled={disabled} onConfirm={handleConfirm} />