Merge pull request #44 from iceljc/features/use-last-sent-message

Features/use last sent message
SciSharp · Feb 14, 2024 · c71ce51 · c71ce51
2 parents 9da13b2 + 3f79ef3
commit c71ce51
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 17 deletions.
diff --git a/src/lib/common/Breadcrumb.svelte b/src/lib/common/Breadcrumb.svelte
@@ -2,8 +2,8 @@
 	import { Row, Col, Breadcrumb, BreadcrumbItem } from '@sveltestrap/sveltestrap';
 	import Link from 'svelte-link';
 
-	export let title;
-	export let pagetitle;
+	 export let title = '';
+	export let pagetitle = '';
 </script>
 
 <Row>

diff --git a/src/lib/common/HeadTitle.svelte b/src/lib/common/HeadTitle.svelte
@@ -1,9 +1,10 @@
 <script>
 	import {PUBLIC_FAVICON_URL, PUBLIC_BRAND_NAME} from '$env/static/public'
 	export let title = 'Home';
+	export let addOn = 'Admin & Dashboard';
 </script>
 
 <svelte:head>
 	<link rel="icon" type="image/x-icon" href={PUBLIC_FAVICON_URL}>
-	<title>{title} | {PUBLIC_BRAND_NAME} - Admin & Dashboard</title>
+	<title>{title} | {PUBLIC_BRAND_NAME}{`${!!addOn ? ` - ${addOn}` : ''}`}</title>
 </svelte:head>
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -29,6 +29,8 @@
 	import StateModal from './state-modal.svelte';
 	import DialogModal from '$lib/common/DialogModal.svelte';
 	import { UserRole } from '$lib/helpers/enums';
+	import moment from 'moment';
+	import HeadTitle from '$lib/common/HeadTitle.svelte';
 
 	const options = {
 		scrollbars: {
@@ -47,7 +49,10 @@
 	let text = "";
 	let editText = "";
 	let truncateMsgId = "";
-	let prevSentMsg = "";
+
+	/** @type {string[]} */
+	let prevSentMsgs = [];
+	let sentMsgIdx = 0;
 	
 	/** @type {import('$types').AgentModel} */
 	export let agent;
@@ -61,6 +66,8 @@
 
     /** @type {import('$types').ChatResponseModel[]} */
     let dialogs = [];
+	/** @type {{ [s: string]: any; }} */
+	let groupedDialogs = [];
 	
 	/** @type {import('$types').ContentLogModel[]} */
 	let contentLogs = [];
@@ -76,7 +83,7 @@
 	
 	onMount(async () => {
 		dialogs = await GetDialogs(params.conversationId);
-		getLatestSentMessage(dialogs);
+		initPrevSentMessages(dialogs);
 
 		signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
 		signalr.onMessageReceivedFromCsr = onMessageReceivedFromCsr;
@@ -94,9 +101,11 @@
 	});
 
 	/** @param {import('$types').ChatResponseModel[]} dialogs */
-	function getLatestSentMessage(dialogs) {
-		const latestDialog = dialogs.findLast(x => x.sender?.role !== UserRole.Assistant);
-		prevSentMsg = latestDialog?.text || "";
+	function initPrevSentMessages(dialogs) {
+		if (!!!dialogs) return;
+
+		prevSentMsgs = dialogs.filter(x => x.sender?.role != UserRole.Assistant).map(x => x.text || '') || [];
+		sentMsgIdx = prevSentMsgs.length;
 	}
 
 
@@ -165,6 +174,7 @@
     async function refresh() {
       // trigger UI render
       dialogs = dialogs?.map(item => { return { ...item }; }) || [];
+	  groupedDialogs = groupDialogs(dialogs);
 	  await tick();
 
       setTimeout(() => {
@@ -173,18 +183,56 @@
 	  }, 200);
     }
 
+	/** @param {import('$types').ChatResponseModel[]} dialogs */
+	function groupDialogs(dialogs) {
+		if (!!!dialogs) return [];
+		// @ts-ignore
+		return _.groupBy(dialogs, (x) => {
+			const createDate = moment.utc(x.created_at).local().format('MMM DD YYYY');
+			if (createDate == moment.utc().local().format('MMM DD YYYY')) {
+				return 'Today';
+			} else if (createDate == moment.utc().local().subtract(1, 'days').format('MMM DD YYYY')) {
+				return 'Yesterday';
+			}
+			return createDate;
+		});
+	}
+
 	/** @param {any} e */
 	async function onSendMessage(e) {
-		if (!!!text && e.key === 'ArrowUp') {
-			text = prevSentMsg;
+		if (e.key === 'ArrowUp') {
+			e.preventDefault();
+			if (sentMsgIdx > 0 && sentMsgIdx <= prevSentMsgs.length) {
+				sentMsgIdx -= 1;
+				text = prevSentMsgs[sentMsgIdx];
+			} else if (sentMsgIdx <= 0) {
+				sentMsgIdx = 0;
+				text = prevSentMsgs[0];
+			} else {
+				sentMsgIdx = prevSentMsgs.length;
+				text = '';
+			}
+			return;
+		} else if (e.key === 'ArrowDown') {
+			e.preventDefault();
+			if (sentMsgIdx >= 0 && sentMsgIdx < prevSentMsgs.length - 1) {
+				sentMsgIdx += 1;
+				text = prevSentMsgs[sentMsgIdx];
+			} else if (sentMsgIdx < 0) {
+				sentMsgIdx = 0;
+				text = prevSentMsgs[0];
+			} else {
+				sentMsgIdx = prevSentMsgs.length;
+				text = '';
+			}
 			return;
 		}
 
-		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter') {
+		if ((e.key === 'Enter' && (!!e.shiftKey || !!e.ctrlKey)) || e.key !== 'Enter' || !!!_.trim(text)) {
 			return;
 		}
 
-		prevSentMsg = text;
+		prevSentMsgs = [...prevSentMsgs, text];
 		await sendMessageToHub(params.agentId, params.conversationId, text);
 	}
 
@@ -279,7 +327,7 @@
 
 	/** @param {string} messageId */
 	async function handleDeleteMessage(messageId) {
-		const isDeleted = truncateDialog(messageId);
+		const isDeleted = truncateDialogs(messageId);
 		if (!isDeleted) return;
 		await deleteConversationMessage(params.conversationId, messageId);
 	}
@@ -304,17 +352,19 @@
 	}
 
 	async function confirmEditMsg() {
-		const isDeleted = truncateDialog(truncateMsgId);
+		const isDeleted = truncateDialogs(truncateMsgId);
 		if (!isDeleted) return;
 		toggleEditMsgModal();
 		await sendMessageToHub(params.agentId, params.conversationId, editText, truncateMsgId);
 	}
 
 	/** @param {string} messageId */
-	function truncateDialog(messageId) {
+	function truncateDialogs(messageId) {
 		const foundIdx = dialogs.findIndex(x => x.message_id === messageId);
 		if (foundIdx < 0) return false;
 		dialogs = dialogs.filter((x, idx) => idx < foundIdx);
+		initPrevSentMessages(dialogs);
+		refresh();
 		return true;
 	}
 </script>
@@ -339,6 +389,7 @@
 	cancel={toggleStateModal}
 />
 
+<HeadTitle title="Chat" addOn='' />
 <div class="d-lg-flex">
 	<Splitpanes>
 		{#if isLoadStateLog}
@@ -408,12 +459,13 @@
 					<div class="scrollbar" style="height: 80vh">
 						<div class="chat-conversation p-3">
 							<ul class="list-unstyled mb-0">
+								{#each Object.entries(groupedDialogs) as [createDate, dialogGroup]}
 								<li>
 									<div class="chat-day-title">
-										<span class="title">Today</span>
+										<span class="title">{createDate}</span>
 									</div>
 								</li>
-								{#each dialogs as message}
+								{#each dialogGroup as message}
 								<li id={'test_k' + message.message_id}
 									class={message.sender.id === currentUser.id ? 'right' : ''}>
 									<div class="conversation-list">
@@ -474,6 +526,7 @@
 									</div>
 								</li>
 								{/each}
+								{/each}
 							</ul>
 						</div>
 					</div>