build basic chat image

Author: Jicheng Lu

src/lib/common/FileGallery.svelte

@@ -53,7 +53,9 @@
         {#each files as file, idx (idx)}
             <GalleryImage title={file.file_name}>
                 <img src={file.file_data} alt={''} />
+                {#if !!file.file_name}
                 <div class="item-text">{file.file_name}</div>
+                {/if}
             </GalleryImage>
         {/each}
     </LightboxGallery>

src/lib/helpers/http.js

@@ -54,13 +54,20 @@ axios.interceptors.response.use(
 
 /** @param {import('axios').InternalAxiosRequestConfig<any>} config */
 function skipLoader(config) {
-    let regex = new RegExp('http(s*)://(.*?)/conversation/(.*?)/(.*?)', 'g');
-    if (config.method === 'post' && !!config.data && regex.test(config.url || '')) {
+    const postRegexes = [
+        new RegExp('http(s*)://(.*?)/conversation/(.*?)/(.*?)', 'g')
+    ];
+
+    const getRegexes = [
+        new RegExp('http(s*)://(.*?)/address/options(.*?)', 'g'),
+        new RegExp('http(s*)://(.*?)/conversation/(.*?)/files/(.*?)', 'g')
+    ];
+
+    if (config.method === 'post' && !!config.data && postRegexes.some(regex => regex.test(config.url || ''))) {
         return true;
     }
 
-    regex = new RegExp('http(s*)://(.*?)/address/options(.*?)', 'g');
-    if (config.method === 'get' && regex.test(config.url || '')) {
+    if (config.method === 'get' && getRegexes.some(regex => regex.test(config.url || ''))) {
         return true;
     }
 

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

@@ -15,12 +15,14 @@ $file-screen-max-width: 500px;
 
     .gallery-item-wrapper {
         position: relative;
+        width: 100%;
+        height: 100%;
 
         .gallery-item-icon {
             position: absolute;
-            color: white;
+            color: red;
             cursor: pointer;
-            z-index: 1000;
+            z-index: 500;
             right: 3px;
             font-size: 1.5em;
         }

src/lib/services/api-endpoints.js

@@ -41,6 +41,7 @@ export const endpoints = {
     conversationCountUrl: `${host}/conversations/count`,
     conversationDeletionUrl: `${host}/conversation/{conversationId}`,
     conversationDetailUrl: `${host}/conversation/{conversationId}`,
+    conversationAttachmentUrl: `${host}/conversation/{conversationId}/files/{messageId}`,
     dialogsUrl: `${host}/conversation/{conversationId}/dialogs`,
     conversationMessageDeletionUrl: `${host}/conversation/{conversationId}/message/{messageId}`,
 

src/lib/services/conversation-service.js

@@ -37,6 +37,17 @@ export async function getConversations(filter) {
     return response.data;
 }
 
+/**
+ * Get conversation files
+ * @param {string} conversationId
+ * @param {string} messageId
+ */
+export async function getConversationFiles(conversationId, messageId) {
+    const url = replaceUrl(endpoints.conversationAttachmentUrl, { conversationId: conversationId, messageId: messageId });
+    const response = await axios.get(url);
+    return response?.data;
+}
+
 /**
  * Delete conversation
  * @param {string} conversationId 

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

@@ -26,15 +26,15 @@
 	import { replaceNewLine } from '$lib/helpers/http';
 	import { EditorType, SenderAction, UserRole } from '$lib/helpers/enums';
 	import RichContent from './richContent/rich-content.svelte';
+	import RcDisclaimer from './richContent/rc-disclaimer.svelte';
+	import ChatImage from './chatImage/chat-image.svelte';
 	import ContentLog from './contentLogs/content-log.svelte';
 	import _ from "lodash";
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
 	import StateLog from './stateLogs/state-log.svelte';
 	import Swal from 'sweetalert2/dist/sweetalert2.js';
 	import "sweetalert2/src/sweetalert2.scss";
 	import moment from 'moment';
-	import RcDisclaimer from './richContent/rc-disclaimer.svelte';
-	
 	
 	const options = {
 		scrollbars: {
@@ -384,14 +384,16 @@
 		if (!!!data?.truncateMsgId) {
 			files = getChatFiles();
 		}
-		resetStorage();
+		// resetStorage();
 
 		return new Promise((resolve, reject) => {
 			sendMessageToHub(params.agentId, params.conversationId, msgText, messageData, files).then(res => {
 				isSendingMsg = false;
+				resetStorage();
 				resolve(res);
 			}).catch(err => {
 				isSendingMsg = false;
+				resetStorage();
 				reject(err);
 			});
 		});
@@ -956,6 +958,9 @@
 												disabled={isSendingMsg || isThinking}
 												onConfirm={confirmSelectedOption}
 											/>
+											{#if message.rich_content?.editor === EditorType.File && message.message_id != lastBotMsg?.message_id}
+												<ChatImage conversationId={params.conversationId} messageId={message.message_id} />
+											{/if}
 										</div>
 										{/if}
 									</div>

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

@@ -1,14 +1,39 @@
 <script>
-    import { Lightbox } from 'svelte-lightbox';
+    import { onMount } from 'svelte';
+	import FileGallery from '$lib/common/FileGallery.svelte';
+	import { getUserStore } from '$lib/helpers/store';
+	import { getConversationFiles } from '$lib/services/conversation-service';
+	
+    /** @type {string} */
+    export let conversationId;
+    /** @type {string} */
+    export let messageId;
 
-    /** @type {any} */
-	export let message;
+    /** @type {any[]} */
+    let files = [];
+    /** @type {string} */
+    let token = "";
+
+    onMount(() => {
+        const user = getUserStore();
+        token = user.token;
+    });
+
+    $: {
+        getConversationFiles(conversationId, messageId).then(data => {
+            // @ts-ignore
+            files = data?.filter(item => !!item.file_url)?.map(item => {
+                return {
+                    ...item,
+                    file_data: `${item.file_url}?token=${token}`
+                };
+            }) || [];
+        });
+    }
 </script>
 
-{#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" />
-    </Lightbox>
-</div>
-{/if}
+<div style="display: block; margin-top: 3px;">
+    <div style="display: flex; flex-wrap: wrap; gap: 3px;">
+        <FileGallery files={files} />
+    </div>
+</div>