refine store

Author: Jicheng Lu

src/lib/common/FileDropZone.svelte

@@ -42,12 +42,15 @@
     let isSuccess = false;
     let reason = '';
 
+    const defaultSuccessMesssage = "Upload succeeded!";
+    const defaultErrorMesssage = "Upload failed!";
+
     $: {
         if (isLoading) {
             innerDropText = "Uploading...";
             disabled = true;
         } else if (isSuccess) {
-            innerDropText = "Upload succeeded";
+            innerDropText = defaultSuccessMesssage;
             disabled = true;
         } else if (isError) {
             innerDropText = reason;
@@ -281,7 +284,7 @@
                         });
 
                         isError = true;
-                        reason = fileRejections[0]?.errors[0]?.message || "Upload failed";
+                        reason = fileRejections[0]?.errors[0]?.message || defaultErrorMesssage;
                         setTimeout(() => {
                             reason = '';
                             isError = false;

src/lib/common/FileGallery.svelte

@@ -14,8 +14,13 @@
     /** @type {(args0: number) => void} */
     export let onDelete = () => {};
 
+    let isLite = false;
     const screenWidthThreshold = 500;
 
+    $: {
+        isLite = Viewport.Width <= screenWidthThreshold;
+    }
+
     /**
 	 * @param {any} e
 	 * @param {number} idx
@@ -34,7 +39,7 @@
         <svelte:fragment slot="thumbnail">
             <div class="image-gallery-container">
                 {#each files as file, idx (idx)}
-                    <div class={`gallery-item ${Viewport.Width <= screenWidthThreshold ? 'lite-gallery-item' : ''}`}>
+                    <div class={`gallery-item ${isLite ? 'lite-gallery-item' : ''}`}>
                         <GalleryThumbnail style="width: 100%; height: 100%; display: flex;" id={idx}>
                             <div class="gallery-item-wrapper">
                                 {#if needDelete}

src/lib/helpers/store.js

@@ -134,24 +134,17 @@ export const conversationUserMessageStore = createConversationUserMessageStore()
 
 const createConversationUserAttachmentStore = () => {
     return {
-        reset: (conversationId) => {
-            const key = buildAttachmentKey(conversationId);
-            localStorage.removeItem(key);
+        reset: () => {
+            localStorage.removeItem(conversationUserAttachmentKey);
         },
-        get: (conversationId) => {
-            const key = buildAttachmentKey(conversationId);
-            const json = localStorage.getItem(key);
+        get: () => {
+            const json = localStorage.getItem(conversationUserAttachmentKey);
             return json ? JSON.parse(json) : {};
         },
-        put: (conversationId, value) => {
-            const key = buildAttachmentKey(conversationId);
-            localStorage.setItem(key, JSON.stringify(value));
+        put: (value) => {
+            localStorage.setItem(conversationUserAttachmentKey, JSON.stringify(value));
         }
     }
 };
 
-function buildAttachmentKey(conversationId){
-    return `${conversationUserAttachmentKey}_${conversationId}`;
-}
-
 export const conversationUserAttachmentStore = createConversationUserAttachmentStore();

src/lib/scss/custom/components/_gallery.scss

@@ -5,8 +5,8 @@
     margin-top: 3px;
 
     .gallery-item {
-        width: 8em;
-        height: 8em;
+        width: 12em;
+        height: 12em;
 
         .gallery-item-wrapper {
             position: relative;

src/routes/(authentication)/login/+page.svelte

@@ -33,6 +33,7 @@
 	import { onMount } from 'svelte';
 	import {
 		conversationSearchOptionStore,
+		conversationUserAttachmentStore,
 		conversationUserMessageStore,
 		conversationUserStateStore
 	} from '$lib/helpers/store';
@@ -96,6 +97,7 @@
 		conversationUserStateStore.reset();
 		conversationSearchOptionStore.reset();
 		conversationUserMessageStore.reset();
+		conversationUserAttachmentStore.reset();
 	}
 </script>
 

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

@@ -93,6 +93,9 @@
 	/** @type {import('$types').UserStateDetailModel[]} */
 	let userAddStates = [];
 
+	/** @type {any[]} */
+	let conversationFiles = [];
+
 	/** @type {boolean} */
 	let isLoadContentLog = false;
 	let isLoadStateLog = false;
@@ -146,8 +149,8 @@
 	function initChatView() {
 		isFrame = $page.url.searchParams.get('isFrame') === 'true';
 		// initial condition
-		isContentLogClosed = true;
-		isStateLogClosed = true;
+		isContentLogClosed = false;
+		isStateLogClosed = false;
 		resizeChatWindow();
 	}
 
@@ -332,9 +335,11 @@
 		return new Promise((resolve, reject) => {
 			sendMessageToHub(params.agentId, params.conversationId, msgText, messageData).then(res => {
 				isSendingMsg = false;
+				resetStorage();
 				resolve(res);
 			}).catch(err => {
 				isSendingMsg = false;
+				resetStorage();
 				reject(err);
 			});
 		});
@@ -721,6 +726,11 @@
 		stateChangeLogs = [];
 		agentQueueChangeLogs = [];
 	}
+
+	function resetStorage() {
+		conversationUserAttachmentStore.reset();
+		conversationFiles = [];
+	}
 </script>
 
 
@@ -896,6 +906,7 @@
 											<ChatAttachment
 												displayComponents={message.message_id === lastBotMsg?.message_id}
 												disabled={isSendingMsg || isThinking}
+												bind:files={conversationFiles}
 											/>
 											<ChatImage message={message} />
 										</div>

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

@@ -2,7 +2,6 @@
     import FileDropZone from "$lib/common/FileDropZone.svelte";
     import FileGallery from "$lib/common/FileGallery.svelte";
 	import { conversationUserAttachmentStore } from "$lib/helpers/store";
-    import { page } from '$app/stores';
 	import { onMount } from "svelte";
 
     /** @type {boolean} */
@@ -11,23 +10,20 @@
     /** @type {boolean} */
     export let disabled = false;
 
+    /** @type {any[]} */
+    export let files = [];
+
     onMount(() => {
-        const conversationId = $page.params.conversationId;
-        const savedAttachments = conversationUserAttachmentStore.get(conversationId);
+        const savedAttachments = conversationUserAttachmentStore.get();
         files = savedAttachments.acceptedFiles || [];
     });
 
-    /** @type {any[]} */
-    let files = [];
-
     /** @param {any} e */
     async function handleFileDrop(e) {
         const { acceptedFiles, fileRejections } = e.detail;
-        const conversationId = $page.params.conversationId;
-        const savedAttachments = conversationUserAttachmentStore.get(conversationId);
+        const savedAttachments = conversationUserAttachmentStore.get();
         const newAttachments = [...savedAttachments.acceptedFiles || [], ...acceptedFiles];
-        conversationUserAttachmentStore.put(conversationId, {
-            conversationId: conversationId,
+        conversationUserAttachmentStore.put({
             acceptedFiles: newAttachments
         });
         files = newAttachments;
@@ -36,9 +32,7 @@
     /** @param {number} index */
     function deleteFile(index) {
         files = files?.filter((f, idx) => idx !== index) || [];
-        const conversationId = $page.params.conversationId;
-        conversationUserAttachmentStore.put(conversationId, {
-            conversationId: conversationId,
+        conversationUserAttachmentStore.put({
             acceptedFiles: files
         });
     }