Merge pull request #48 from iceljc/features/auto-load-content-log

auto load content log view

Author: Oceania2018

src/lib/common/LiveChatEntry.svelte

@@ -10,7 +10,7 @@
 
 	onMount(async () => {
     const agentSettings = await getSettingDetail("Agent");
-    chatUrl = `${PUBLIC_LIVECHAT_HOST}chat/${agentSettings.hostAgentId}`;
+    chatUrl = `${PUBLIC_LIVECHAT_HOST}chat/${agentSettings.hostAgentId}?isLite=true`;
     showChatIcon = true;
 	});
 

src/routes/chat/[agentId]/+page.svelte

@@ -38,7 +38,12 @@
         }
 
         conversationId = conversation.id;
-        window.location.href = `chat/${agentId}/${conversationId}`;
+        let charUrl = `chat/${agentId}/${conversationId}`;
+        const isLite = $page.url.searchParams.get('isLite');
+        if (isLite === 'true') {
+            charUrl = `${charUrl}?isLite=true`
+        }
+        window.location.href = charUrl;
     });
 </script>
 

src/routes/chat/[agentId]/[conversationId]/+page.svelte

@@ -22,6 +22,6 @@
     });
 </script>
 
-{#if currentUser }
+{#if currentUser}
 <Chat currentUser={currentUser} agent={agent} />
 {/if}

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

@@ -85,6 +85,7 @@
 	onMount(async () => {
 		dialogs = await GetDialogs(params.conversationId);
 		initPrevSentMessages(dialogs);
+		initContentLogView();
 
 		signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromCsr = onMessageReceivedFromCsr;
@@ -109,18 +110,50 @@
 		sentMsgIdx = prevSentMsgs.length;
 	}
 
+	function initContentLogView() {
+		isLoadContentLog = $page.url.searchParams.get('isLite') !== 'true';
+	}
+
+	async function refresh() {
+		// trigger UI render
+		dialogs = dialogs?.map(item => { return { ...item }; }) || [];
+		groupedDialogs = groupDialogs(dialogs);
+		await tick();
+
+		setTimeout(() => {
+			const { viewport } = scrollbar.elements();
+			viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
+		}, 200);
+    }
+
+	/** @param {import('$types').ChatResponseModel[]} dialogs */
+	function groupDialogs(dialogs) {
+		if (!!!dialogs) return [];
+		const format = 'MMM D, YYYY';
+		// @ts-ignore
+		return _.groupBy(dialogs, (x) => {
+			const createDate = moment.utc(x.created_at).local().format(format);
+			if (createDate == moment.utc().local().format(format)) {
+				return 'Today';
+			} else if (createDate == moment.utc().local().subtract(1, 'days').format(format)) {
+				return 'Yesterday';
+			}
+			return createDate;
+		});
+	}
+
 
 	/** @param {import('$types').ChatResponseModel} message */
 	function onMessageReceivedFromClient(message) {
-      dialogs.push(message);
-      refresh();
-      text = "";
+		dialogs.push(message);
+		refresh();
+		text = "";
     }
 
     /** @param {import('$types').ChatResponseModel} message */
     function onMessageReceivedFromCsr(message) {
-      dialogs.push(message);
-      refresh();
+		dialogs.push(message);
+		refresh();
     }
 
     /** @param {import('$types').ChatResponseModel} message */
@@ -168,49 +201,21 @@
 				reject(err);
 			});
 		});
-		
     }
 
     async function startListen() {
 		microphoneIcon = "microphone";
 		webSpeech.onSpeechToTextDetected = (transcript) => {
 			text = transcript;
 			if (!!!_.trim(text) || isSendingMsg) return;
+
 			sendTextMessage().then(() => {
 				microphoneIcon = "microphone-off";
 			}).catch(() => {
 				microphoneIcon = "microphone-off";
 			});
 		}
 		webSpeech.start();
-    }	
-
-    async function refresh() {
-      // trigger UI render
-      dialogs = dialogs?.map(item => { return { ...item }; }) || [];
-	  groupedDialogs = groupDialogs(dialogs);
-	  await tick();
-
-      setTimeout(() => {
-		const { viewport } = scrollbar.elements();
-		viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
-	  }, 200);
-    }
-
-	/** @param {import('$types').ChatResponseModel[]} dialogs */
-	function groupDialogs(dialogs) {
-		if (!!!dialogs) return [];
-		const format = 'MMM D, YYYY';
-		// @ts-ignore
-		return _.groupBy(dialogs, (x) => {
-			const createDate = moment.utc(x.created_at).local().format(format);
-			if (createDate == moment.utc().local().format(format)) {
-				return 'Today';
-			} else if (createDate == moment.utc().local().subtract(1, 'days').format(format)) {
-				return 'Yesterday';
-			}
-			return createDate;
-		});
 	}
 
 	/** @param {any} e */
@@ -260,6 +265,21 @@
 		});
 	}
 
+	/**
+	 * @param {string} payload
+	 * @param {import('$types').QuickReplyMessage} message
+	 */
+	function clickQuickReply(payload, message) {
+		isSendingMsg = true;
+		sendMessageToHub(params.agentId, params.conversationId, payload).then(() => {
+			isSendingMsg = false;
+			message.quick_replies = [];
+		}).catch(() => {
+			isSendingMsg = false;
+			message.quick_replies = [];
+		});
+	}
+
 	function endChat() {
 		if (window.location === window.parent.location) {
 			// @ts-ignore
@@ -537,9 +557,8 @@
 												<RcText message={message.rich_content.message} />
 												{:else if message.rich_content && message.rich_content.message.rich_type == 'quick_reply'}
 												<RcQuickReply 
-													agentId={params.agentId} 
-													conversationId={params.conversationId} 
-													message={message.rich_content.message} 
+													message={message.rich_content.message}
+													onClickQuickReply={clickQuickReply}
 												/>
 												{:else}
 												<span>{message.text}</span>

src/routes/chat/[agentId]/[conversationId]/rc-quick-reply.svelte

@@ -4,30 +4,23 @@
 
 	/** @type {import('$types').QuickReplyMessage} */
 	export let message;
-	/** @type {string} */
-	export let agentId;
-	/** @type {string} */
-	export let conversationId;
 
-	export const fn = {
-		/**
-		 * @param {string} payload
-		 */
-		onTextSubmitted: (payload) => {}
-	}
+	/** @type {(arg0: string, arg1: import('$types').QuickReplyMessage) => void} */
+	export let onClickQuickReply;
 
 	/**
+	 * @param {any} e
 	 * @param {string} payload
-	 */	
-	async function onQuickReplyClick(payload) {
-		await sendMessageToHub(agentId, conversationId, payload);
-		message.quick_replies = [];
+	 */
+	async function handleQuickReplyClick(e, payload) {
+		e.preventDefault();
+		onClickQuickReply && onClickQuickReply(payload, message);
 	}
 </script>
 
 <span>{@html replaceNewLine(message.text)}</span>
 <div class="fixed-bottom p-2 text-center" style="margin-bottom: 10vh;">
 {#each message.quick_replies as reply}
-<button class="btn btn-primary btn-rounded btn-sm m-1" on:click={() => onQuickReplyClick(reply.payload)}>{reply.title}</button>
+<button class="btn btn-primary btn-rounded btn-sm m-1" on:click={(e) => handleQuickReplyClick(e, reply.payload)}>{reply.title}</button>
 {/each}
 </div>