append image

Author: Jicheng Lu

src/lib/common/FileGallery.svelte

@@ -103,7 +103,7 @@
                                             <i class="bx bx-trash" />
                                         </div>
                                     {/if}
-                                    {#if needDownload}
+                                    {#if needDownload && !!file.file_download_url}
                                         <div
                                             class="gallery-item-icon download-icon clickable"
                                             tabindex="0"

src/lib/common/MessageFileGallery.svelte

@@ -13,8 +13,11 @@
     /** @type {string} */
     export let galleryStyles = '';
 
-    /** @type {string} */
-    export let messageId;
+    /** @type {any} */
+    export let message;
+
+    /** @type {boolean} */
+    export let appendImage = false;
 
     /** @type {() => Promise<any>} */
     export let fetchFiles = () => Promise.resolve([]);
@@ -25,31 +28,38 @@
     /** @type {import('$fileTypes').AudioFileModel[]} */
     let audioFiles = [];
 
-    onMount(() => {
+    onMount(async () => {
         if (fetchFiles != null && fetchFiles != undefined) {
-            fetchFiles().then(data => {
-                // @ts-ignore
-                const validFiles = data?.filter(item => !!item.file_url) || [];
-                // @ts-ignore
-                textFiles = validFiles.filter(item => !isAudio(item.file_extension)).map(item => {
-                    return {
-                        file_name: item.file_name,
-                        file_extension: item.file_extension,
-                        file_data: isExternalUrl(item.file_url) ? item.file_url : `${PUBLIC_SERVICE_URL}${item.file_url}?access_token=${$userStore?.token}`,
-                        file_download_url: isExternalUrl(item.file_download_url) ? item.file_download_url : `${PUBLIC_SERVICE_URL}${item.file_download_url}?access_token=${$userStore?.token}`
-                    };
-                });
-                // @ts-ignore
-                audioFiles = validFiles.filter(item => isAudio(item.file_extension)).map(item => {
-                    return {
-                        name: item.file_name,
-                        cover: AUDIO_ICON,
-                        artist: '',
-                        url: isExternalUrl(item.file_url) ? item.file_url : `${PUBLIC_SERVICE_URL}${item.file_url}?access_token=${$userStore?.token}`
-                    };
-                });
+            const res = await fetchFiles();
+            // @ts-ignore
+            const validFiles = res?.filter(item => !!item.file_url) || [];
+            // @ts-ignore
+            textFiles = validFiles.filter(item => !isAudio(item.file_extension)).map(item => {
+                return {
+                    file_name: item.file_name,
+                    file_extension: item.file_extension,
+                    file_data: isExternalUrl(item.file_url) ? item.file_url : `${PUBLIC_SERVICE_URL}${item.file_url}?access_token=${$userStore?.token}`,
+                    file_download_url: isExternalUrl(item.file_download_url) ? item.file_download_url : `${PUBLIC_SERVICE_URL}${item.file_download_url}?access_token=${$userStore?.token}`
+                };
+            });
+            // @ts-ignore
+            audioFiles = validFiles.filter(item => isAudio(item.file_extension)).map(item => {
+                return {
+                    name: item.file_name,
+                    cover: AUDIO_ICON,
+                    artist: '',
+                    url: isExternalUrl(item.file_url) ? item.file_url : `${PUBLIC_SERVICE_URL}${item.file_url}?access_token=${$userStore?.token}`
+                };
             });
         }
+
+        if (appendImage && message?.data) {
+            textFiles = [...textFiles, {
+                file_name: 'data',
+                file_extension: '',
+                file_data: message?.data
+            }];
+        }
     });
 
     /** @param {number} idx */
@@ -71,7 +81,7 @@
     onDownload={idx => handleDownloadFile(idx)}
 />
 <AudioGallery
-    id={messageId}
+    id={message?.message_id}
     containerClasses={galleryClasses}
     containerStyles={galleryStyles}
     audios={audioFiles}

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

@@ -1658,9 +1658,10 @@
 													{#if !!message.post_action_disclaimer}
 														<RcDisclaimer content={message.post_action_disclaimer} />
 													{/if}
-													{#if !!message.is_chat_message || !!message.has_message_files}
+													{#if !!message.is_chat_message || !!message.has_message_files || message?.data?.startsWith("data:image")}
 														<MessageFileGallery
-															messageId={message?.message_id}
+															message={message}
+															appendImage
 															galleryStyles={'justify-content: flex-end;'}
 															fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.User)}
 														/>
@@ -1756,9 +1757,10 @@
 															</div>
 														</div>
 													{/if}
-													{#if !!message.is_chat_message || !!message.has_message_files}
+													{#if !!message.is_chat_message || !!message.has_message_files || message?.data?.startsWith("data:image")}
 														<MessageFileGallery
-															messageId={message?.message_id}
+															message={message}
+															appendImage
 															galleryStyles={'justify-content: flex-start;'}
 															fetchFiles={() => getConversationFiles(params.conversationId, message.message_id, FileSourceType.Bot)}
 														/>