Merge pull request #120 from iceljc/features/refine-chat-window

Features/refine chat window

Author: Oceania2018

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/common/MessageImageGallery.svelte

@@ -0,0 +1,44 @@
+<script>
+    import { onMount } from 'svelte';
+	import FileGallery from '$lib/common/FileGallery.svelte';
+	import { getUserStore } from '$lib/helpers/store';
+	import { PUBLIC_SERVICE_URL } from '$env/static/public';
+
+    /** @type {string} */
+    export let galleryClasses = '';
+
+    /** @type {string} */
+    export let galleryStyles = '';
+
+    /** @type {() => Promise<any>} */
+    export let fetchFiles = () => Promise.resolve([]);
+
+    /** @type {any[]} */
+    let files = [];
+    /** @type {string} */
+    let token = "";
+
+    onMount(() => {
+        const user = getUserStore();
+        token = user.token;
+        if (fetchFiles != null && fetchFiles != undefined) {
+            fetchFiles().then(data => {
+                // @ts-ignore
+                files = data?.filter(item => !!item.file_url)?.map(item => {
+                    return {
+                        ...item,
+                        file_data: `${PUBLIC_SERVICE_URL}${item.file_url}?access_token=${token}`
+                    };
+                }) || [];
+            });
+        }
+    });
+</script>
+
+<div>
+    <FileGallery
+        containerClasses={galleryClasses}
+        containerStyles={galleryStyles}
+        files={files}
+    />
+</div>

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,17 @@ $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;
+}
+
+.dialog-file-display {
+    .gallery-item {
+        width: $attachment-width-lite;
+        height: $attachment-height-lite;
+    }
 }

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

@@ -5,18 +5,28 @@
 		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';
 	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';
 	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';
@@ -27,7 +37,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';
@@ -38,7 +48,6 @@
 	import "sweetalert2/src/sweetalert2.scss";
 	import moment from 'moment';
 	
-	
 	const options = {
 		scrollbars: {
 			visibility: 'auto',
@@ -161,7 +170,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 +221,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 +256,10 @@
 				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 +510,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,
@@ -947,7 +951,10 @@
 												<RcDisclaimer content={message.post_action_disclaimer} />
 											{/if}
 											{#if message.is_load_images}
-												<MessageImageGallery message={message} />
+												<MessageImageGallery
+													galleryStyles={'justify-content: flex-end;'}
+													fetchFiles={() => getConversationFiles(params.conversationId, message.message_id)}
+												/>
 											{/if}
 										</div>
 											{#if !isLite}

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

@@ -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} />

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

@@ -1,12 +1,14 @@
 <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'  
-	import { USER_SENDERS } from '$lib/helpers/constants';
+	import { BOT_SENDERS, USER_SENDERS } from '$lib/helpers/constants';
+    import { EditorType } from '$lib/helpers/enums';
 	import Markdown from '$lib/common/Markdown.svelte';
+	import MessageImageGallery from '$lib/common/MessageImageGallery.svelte';
 
     /** @type {import('$types').ChatResponseModel[]} */
     let dialogs = [];
@@ -16,8 +18,27 @@
 
     onMount(async () => {
         dialogs = await GetDialogs(conversation.id);
+        loadMessageImages(dialogs);
     });
 
+    /** @param {import('$types').ChatResponseModel[]} dialogs */
+    function loadMessageImages(dialogs) {
+        if (!!!dialogs) return;
+
+        for (let idx = 0; idx < dialogs.length; idx++) {
+            const curMsg = dialogs[idx];
+            if (!USER_SENDERS.includes(curMsg?.sender?.role || '')) {
+                continue;
+            }
+
+            const prevMsg = dialogs[idx-1];
+            if (!!prevMsg && BOT_SENDERS.includes(prevMsg?.sender?.role || '')
+                && prevMsg?.rich_content?.editor === EditorType.File) {
+                curMsg.is_load_images = true;
+            }
+        }
+    }
+
     /** 
      * @param {import('$types').ChatResponseModel} dialog
      * @returns {boolean}
@@ -67,6 +88,12 @@
                                 <p class="fw-bold">
                                     <Markdown text={dialog?.rich_content?.message?.text || dialog?.text} />
                                 </p>
+                                {#if dialog.is_load_images}
+                                <MessageImageGallery
+                                    galleryClasses={'dialog-file-display'}
+                                    fetchFiles={() => getConversationFiles(conversation.id, dialog.message_id)}
+                                />
+                                {/if}
                             </div>
                             {#if dialog.message_id}
                             <div>