refine chat images

Author: Jicheng Lu

src/lib/helpers/store.js

@@ -133,17 +133,22 @@ export const conversationUserMessageStore = createConversationUserMessageStore()
 
 
 const createConversationUserAttachmentStore = () => {
+    const { subscribe, set } = writable({ accepted_files: [] });
+
     return {
         reset: () => {
             localStorage.removeItem(conversationUserAttachmentKey);
+            set({ accepted_files: [] });
         },
         get: () => {
             const json = localStorage.getItem(conversationUserAttachmentKey);
             return json ? JSON.parse(json) : {};
         },
         put: (value) => {
             localStorage.setItem(conversationUserAttachmentKey, JSON.stringify(value));
-        }
+            set(value);
+        },
+        subscribe
     }
 };
 

src/lib/helpers/types.js

@@ -278,6 +278,7 @@ IRichContent.prototype.text;
  * @property {string} post_action_disclaimer - The message disclaimer.
  * @property {string} data - The message data.
  * @property {Date} created_at - The message sent time.
+ * @property {boolean} is_load_images - Check of the message needs to load images.
  */
 
 /**

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

@@ -74,4 +74,12 @@ $file-screen-max-width: 500px;
     .add-file-icon {
         font-size: 2em;
     }
+}
+
+.chat-file-upload-gallery {
+    margin: 5px 10px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 3px;
+    justify-content: center;
 }

src/lib/scss/custom/pages/_chat.scss

@@ -387,19 +387,26 @@
     background-color: var(--#{$prefix}light) !important;
     border-color: var(--#{$prefix}light) !important;
     resize: none;
+    padding-right: 1rem;
+}
+
+.chat-input-image {
+    padding-right: 4em;
 }
 
 .chat-input-links {
     position: absolute;
-    right: 16px;
+    right: 3px;
     top: 50%;
     transform: translateY(-50%);
+    width: 3em;
     li {
-        a {
+        span {
             font-size: 16px;
             line-height: 36px;
             padding: 0px 4px;
             display: inline-block;
+            color: var(--bs-primary);
         }
     }
 }

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

@@ -27,7 +27,9 @@
 	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 MessageImageGallery from './chatImage/message-image-gallery.svelte';
+	import ChatImageUploader from './chatImage/chat-image-uploader.svelte';
+	import ChatImageGallery from './chatImage/chat-image-gallery.svelte';
 	import ContentLog from './contentLogs/content-log.svelte';
 	import _ from "lodash";
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
@@ -36,6 +38,7 @@
 	import "sweetalert2/src/sweetalert2.scss";
 	import moment from 'moment';
 	
+	
 	const options = {
 		scrollbars: {
 			visibility: 'auto',
@@ -216,6 +219,7 @@
 		// trigger UI render
 		dialogs = dialogs?.map(item => { return { ...item }; }) || [];
 		lastBotMsg = findLastBotMessage(dialogs);
+		assignLoadImageMessages(dialogs);
 		assignMessageDisclaimer(dialogs)
 		groupedDialogs = groupDialogs(dialogs);
 		await tick();
@@ -233,6 +237,29 @@
         });
 	}
 
+	/** @param {import('$types').ChatResponseModel[]} dialogs */
+	function assignLoadImageMessages(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 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;
+				}
+			}
+		}
+	}
+
 	/** @param {import('$types').ChatResponseModel[]} dialogs */
 	function assignMessageDisclaimer(dialogs) {
 		if (!!!dialogs) return null;
@@ -278,13 +305,7 @@
 		}
 
 		const attachments = conversationUserAttachmentStore.get();
-		const files = attachments?.accepted_files || [];
-		return files.map((/** @type {any} */ f) => {
-			return {
-				...f,
-				message_id: lastBotMsg?.message_id
-			};
-		});
+		return attachments?.accepted_files || [];
 	}
 
 
@@ -915,18 +936,19 @@
 												on:click={() => directToLog(message.message_id)}
 											>
 												<div>
-													<!--<div class="conversation-name">{message.sender.full_name}</div>-->
 													<div class="text-start">{@html replaceNewLine(message.text)}</div>
 													<p class="chat-time mb-0">
 														<i class="bx bx-time-five align-middle me-1" />
-														<!-- {format(message.created_at, 'short-time')} -->
 														{utcToLocal(message.created_at, 'hh:mm A')}
 													</p>
 												</div>
 											</div>
 											{#if !!message.post_action_disclaimer}
 												<RcDisclaimer content={message.post_action_disclaimer} />
 											{/if}
+											{#if message.is_load_images}
+												<MessageImageGallery message={message} />
+											{/if}
 										</div>
 											{#if !isLite}
 												<Dropdown>
@@ -955,9 +977,6 @@
 												disabled={isSendingMsg || isThinking}
 												onConfirm={confirmSelectedOption}
 											/>
-											{#if message.rich_content?.editor === EditorType.File && message.message_id != lastBotMsg?.message_id}
-												<ChatImage message={message} />
-											{/if}
 										</div>
 										{/if}
 									</div>
@@ -973,9 +992,11 @@
 										</div>
 										<div class="msg-container">
 											<div class="ctext-wrap float-start">
-												<span class="chat-indication">
-													{indication}
-												</span>
+												{#if !!indication}
+													<span class="chat-indication">
+														{indication}
+													</span>
+												{/if}
 												<div class="flex-shrink-0 align-self-center" style="display: inline-block;">
 													<LoadingDots duration={'1s'} size={10} color={'var(--bs-primary)'} />
 												</div>
@@ -985,6 +1006,10 @@
 								</li>
 								{/if}
 							</ul>
+
+							{#if lastBotMsg?.rich_content?.editor === EditorType.File}
+								<ChatImageGallery disabled={isSendingMsg || isThinking} />
+							{/if}
 						</div>
 					</div>
 
@@ -1003,12 +1028,15 @@
 							<div class="col">
 								<div class="position-relative">
 									<ChatTextArea
-										className={'chat-input'}
+										className={`chat-input ${lastBotMsg?.rich_content?.editor == EditorType.File ? 'chat-input-image' : ''}`}
 										bind:text={text}
 										disabled={isSendingMsg || isThinking || lastBotMsg?.rich_content?.editor == EditorType.None}
 										editor={lastBotMsg?.rich_content?.editor || ''}
 										onKeyDown={e => onSendMessage(e)}
 									/>
+									{#if lastBotMsg?.rich_content?.editor == EditorType.File}
+										<ChatImageUploader />
+									{/if}
 								</div>
 							</div>
 							<div class="col-auto">

src/routes/chat/[agentId]/[conversationId]/chatImage/chat-attachment.svelte renamed to src/routes/chat/[agentId]/[conversationId]/chatImage/chat-attachment-options.svelte

@@ -1,7 +1,5 @@
 <script>
-    import { onMount } from "svelte";
-    import FileDropZone from "$lib/common/FileDropZone.svelte";
-    import FileGallery from "$lib/common/FileGallery.svelte";
+    import { onDestroy, onMount } from "svelte";
 	import { conversationUserAttachmentStore } from "$lib/helpers/store";
 
     /** @type {any[]} */
@@ -19,24 +17,20 @@
     let confirmOption;
     /** @type {any} */
     let cancelOption;
-    /** @type {boolean} */
-    let disableFileDrop = false;
-    /** @type {number} */
-    let fileUploadLimit = 0;
 
-    const fileUpperLimit = 5;
+    const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
+        const savedAttachments = conversationUserAttachmentStore.get();
+        files = value.accepted_files?.length > 0 ? value.accepted_files : savedAttachments.accepted_files || [];
+    });
 
     onMount(() => {
         collectOptions(options);
-        const savedAttachments = conversationUserAttachmentStore.get();
-        files = savedAttachments.accepted_files || [];
-        console.log(files);
+        
     });
 
-    $: {
-        disableFileDrop = disabled || files.length >= fileUpperLimit;
-        fileUploadLimit = Math.max(fileUpperLimit - files.length, 0);
-    }
+    onDestroy(() => {
+        unsubscribe();
+    });
 
 
     /** @param {any[]} options */
@@ -75,34 +69,8 @@
      function innerConfirm(title, payload) {
         onConfirm && onConfirm(title, payload);
     }
-
-    /** @param {any} e */
-    async function handleFileDrop(e) {
-        const { acceptedFiles } = e.detail;
-        const savedAttachments = conversationUserAttachmentStore.get();
-        const newAttachments = [...savedAttachments.accepted_files || [], ...acceptedFiles];
-        conversationUserAttachmentStore.put({
-            accepted_files: newAttachments
-        });
-        files = newAttachments;
-    }
-
-    /** @param {number} index */
-    function deleteFile(index) {
-        files = files?.filter((f, idx) => idx !== index) || [];
-        conversationUserAttachmentStore.put({
-            accepted_files: files
-        });
-    }
 </script>
 
-<div style="display: block; margin-top: 3px;">
-    <div style="display: flex; flex-wrap: wrap; gap: 3px;">
-        <FileGallery files={files} disabled={disabled} needDelete onDelete={deleteFile} />
-        <FileDropZone accept="image/*" disabled={disableFileDrop} fileLimit={fileUploadLimit} on:drop={e => handleFileDrop(e)} />
-    </div>
-</div>
-
 <div class="plain-option-container">
     {#if files?.length > 0 && confirmOption}
         <button

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

@@ -0,0 +1,41 @@
+<script>
+	import FileGallery from "$lib/common/FileGallery.svelte";
+	import { conversationUserAttachmentStore } from "$lib/helpers/store";
+	import { afterUpdate, getContext, onDestroy, onMount } from "svelte";
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+    /** @type {any[]} */
+    let files = [];
+
+    const { autoScrollToBottom }  = getContext('chat-window-context');
+
+    const unsubscribe = conversationUserAttachmentStore.subscribe(value => {
+        const savedAttachments = conversationUserAttachmentStore.get();
+        files = value.accepted_files?.length > 0 ? value.accepted_files : savedAttachments.accepted_files || [];
+    });
+
+    afterUpdate(() => {
+        autoScrollToBottom();
+    });
+
+    onDestroy(() => {
+        unsubscribe();
+    });
+
+    /** @param {number} index */
+    function deleteFile(index) {
+        files = files?.filter((f, idx) => idx !== index) || [];
+        conversationUserAttachmentStore.put({
+            accepted_files: files
+        });
+    }
+</script>
+
+<div>
+    <div class="chat-file-upload-gallery">
+        <FileGallery files={files} disabled={disabled} needDelete onDelete={deleteFile} />
+    </div>
+</div>
+