refine message gallery

Author: Jicheng Lu

src/lib/common/MessageImageGallery.svelte

@@ -2,21 +2,17 @@
     import { onMount } from 'svelte';
 	import FileGallery from '$lib/common/FileGallery.svelte';
 	import { getUserStore } from '$lib/helpers/store';
-	import { getConversationFiles } from '$lib/services/conversation-service';
 	import { PUBLIC_SERVICE_URL } from '$env/static/public';
-	
-    /** @type {string} */
-    export let conversationId;
-
-    /** @type {string} */
-    export let messageId;
 
     /** @type {string} */
     export let galleryClasses = '';
 
     /** @type {string} */
     export let galleryStyles = '';
 
+    /** @type {() => Promise<any>} */
+    export let fetchFiles = () => Promise.resolve([]);
+
     /** @type {any[]} */
     let files = [];
     /** @type {string} */
@@ -25,7 +21,7 @@
     onMount(() => {
         const user = getUserStore();
         token = user.token;
-        getConversationFiles(conversationId, messageId).then(data => {
+        fetchFiles().then(data => {
             // @ts-ignore
             files = data?.filter(item => !!item.file_url)?.map(item => {
                 return {

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

@@ -5,6 +5,18 @@
 		DropdownMenu,
 		DropdownItem,
 	} from '@sveltestrap/sveltestrap';
+	import {
+		conversationStore,
+		conversationUserStateStore,
+		conversationUserMessageStore,
+		conversationUserAttachmentStore
+	} from '$lib/helpers/store.js';
+	import {
+		sendMessageToHub,
+		GetDialogs,
+		deleteConversationMessage,
+		getConversationFiles
+	} from '$lib/services/conversation-service.js';
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
 	import { page } from '$app/stores';
@@ -14,9 +26,7 @@
 	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';
 	import { newConversation } from '$lib/services/conversation-service';
-	import { conversationStore, conversationUserStateStore, conversationUserMessageStore, conversationUserAttachmentStore } from '$lib/helpers/store.js';
 	import DialogModal from '$lib/common/DialogModal.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
 	import LoadingDots from '$lib/common/LoadingDots.svelte';
@@ -38,7 +48,6 @@
 	import "sweetalert2/src/sweetalert2.scss";
 	import moment from 'moment';
 	
-	
 	const options = {
 		scrollbars: {
 			visibility: 'auto',
@@ -944,8 +953,7 @@
 											{#if message.is_load_images}
 												<MessageImageGallery
 													galleryStyles={'justify-content: flex-end;'}
-													conversationId={params.conversationId}
-													messageId={message.message_id}
+													fetchFiles={() => getConversationFiles(params.conversationId, message.message_id)}
 												/>
 											{/if}
 										</div>

src/routes/page/conversation/[conversationId]/conv-dialogs.svelte

@@ -1,7 +1,7 @@
 <script>
     import { Card, CardBody, CardTitle, Col, Row } from '@sveltestrap/sveltestrap';
     import Link from 'svelte-link/src/Link.svelte';
-    import { GetDialogs } from '$lib/services/conversation-service.js';
+    import { GetDialogs, getConversationFiles } from '$lib/services/conversation-service.js';
     import { utcToLocal } from '$lib/helpers/datetime';
     import { onMount } from 'svelte';
     import { _ } from 'svelte-i18n'  
@@ -91,8 +91,7 @@
                                 {#if dialog.is_load_images}
                                 <MessageImageGallery
                                     galleryClasses={'dialog-file-display'}
-                                    conversationId={conversation.id}
-                                    messageId={dialog.message_id}
+                                    fetchFiles={() => getConversationFiles(conversation.id, dialog.message_id)}
                                 />
                                 {/if}
                             </div>