add file gallery in dialog page

Author: Jicheng Lu

src/routes/chat/[agentId]/[conversationId]/chatImage/message-image-gallery.svelte renamed to src/lib/common/MessageImageGallery.svelte

@@ -4,10 +4,18 @@
 	import { getUserStore } from '$lib/helpers/store';
 	import { getConversationFiles } from '$lib/services/conversation-service';
 	import { PUBLIC_SERVICE_URL } from '$env/static/public';
-    import { page } from '$app/stores';
 	
-    /** @type {any} */
-    export let message;
+    /** @type {string} */
+    export let conversationId;
+
+    /** @type {string} */
+    export let messageId;
+
+    /** @type {string} */
+    export let galleryClasses = '';
+
+    /** @type {string} */
+    export let galleryStyles = '';
 
     /** @type {any[]} */
     let files = [];
@@ -17,7 +25,7 @@
     onMount(() => {
         const user = getUserStore();
         token = user.token;
-        getConversationFiles($page.params.conversationId, message?.message_id).then(data => {
+        getConversationFiles(conversationId, messageId).then(data => {
             // @ts-ignore
             files = data?.filter(item => !!item.file_url)?.map(item => {
                 return {
@@ -31,7 +39,8 @@
 
 <div>
     <FileGallery
-        containerStyles={'justify-content: flex-end;'}
+        containerClasses={galleryClasses}
+        containerStyles={galleryStyles}
         files={files}
     />
 </div>

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

@@ -82,4 +82,11 @@ $file-screen-max-width: 500px;
     flex-wrap: wrap;
     gap: 3px;
     justify-content: flex-start;
+}
+
+.dialog-file-display {
+    .gallery-item {
+        width: $attachment-width-lite;
+        height: $attachment-height-lite;
+    }
 }

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

@@ -27,7 +27,7 @@
 	import { EditorType, SenderAction, UserRole } from '$lib/helpers/enums';
 	import RichContent from './richContent/rich-content.svelte';
 	import RcDisclaimer from './richContent/rc-disclaimer.svelte';
-	import MessageImageGallery from './chatImage/message-image-gallery.svelte';
+	import MessageImageGallery from '$lib/common/MessageImageGallery.svelte';
 	import ChatImageUploader from './chatImage/chat-image-uploader.svelte';
 	import ChatImageGallery from './chatImage/chat-image-gallery.svelte';
 	import ContentLog from './contentLogs/content-log.svelte';
@@ -941,7 +941,7 @@
 												<RcDisclaimer content={message.post_action_disclaimer} />
 											{/if}
 											{#if message.is_load_images}
-												<MessageImageGallery message={message} />
+												<MessageImageGallery conversationId={params.conversationId} messageId={message.message_id} />
 											{/if}
 										</div>
 											{#if !isLite}

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

@@ -7,6 +7,7 @@
     import { _ } from 'svelte-i18n'  
 	import { USER_SENDERS } from '$lib/helpers/constants';
 	import Markdown from '$lib/common/Markdown.svelte';
+	import MessageImageGallery from '$lib/common/MessageImageGallery.svelte';
 
     /** @type {import('$types').ChatResponseModel[]} */
     let dialogs = [];
@@ -67,6 +68,13 @@
                                 <p class="fw-bold">
                                     <Markdown text={dialog?.rich_content?.message?.text || dialog?.text} />
                                 </p>
+                                {#if USER_SENDERS.includes(dialog?.sender?.role || '')}
+                                <MessageImageGallery
+                                    galleryClasses={'dialog-file-display'}
+                                    conversationId={conversation.id}
+                                    messageId={dialog.message_id}
+                                />
+                                {/if}
                             </div>
                             {#if dialog.message_id}
                             <div>