From 691f8a338d75c698f02fc5e902689db8743136d8 Mon Sep 17 00:00:00 2001 From: Jicheng Lu Date: Wed, 14 Feb 2024 10:52:32 -0600 Subject: [PATCH 1/4] group dialogs --- .../[conversationId]/chat-box.svelte | 32 +++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index 14a1de30..d055609a 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte @@ -29,6 +29,7 @@ import StateModal from './state-modal.svelte'; import DialogModal from '$lib/common/DialogModal.svelte'; import { UserRole } from '$lib/helpers/enums'; + import moment from 'moment'; const options = { scrollbars: { @@ -61,6 +62,8 @@ /** @type {import('$types').ChatResponseModel[]} */ let dialogs = []; + /** @type {{ [s: string]: any; }} */ + let groupedDialogs = []; /** @type {import('$types').ContentLogModel[]} */ let contentLogs = []; @@ -165,6 +168,8 @@ async function refresh() { // trigger UI render dialogs = dialogs?.map(item => { return { ...item }; }) || []; + groupedDialogs = groupDialogs(dialogs); + console.log(groupedDialogs); await tick(); setTimeout(() => { @@ -173,10 +178,30 @@ }, 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') { + e.preventDefault(); text = prevSentMsg; + await tick(); + e.target.selectionStart = text?.length || 0; + e.target.selectionEnd = text?.length || 0; + // console.log(e.target.selectionStart, e.target.selectionEnd, text?.length); return; } @@ -315,6 +340,7 @@ const foundIdx = dialogs.findIndex(x => x.message_id === messageId); if (foundIdx < 0) return false; dialogs = dialogs.filter((x, idx) => idx < foundIdx); + refresh(); return true; } @@ -408,12 +434,13 @@
    + {#each Object.entries(groupedDialogs) as [createDate, dialog]}
  • - Today + {createDate}
    • - {#each dialogs as message} + {#each dialog as message}
  • @@ -474,6 +501,7 @@
    • {/each} + {/each}
From 1fd47f99c2963833ee167cadd18350c23a5724d8 Mon Sep 17 00:00:00 2001 From: Jicheng Lu Date: Wed, 14 Feb 2024 11:44:49 -0600 Subject: [PATCH 2/4] refine head --- src/lib/common/Breadcrumb.svelte | 4 ++-- src/lib/common/HeadTitle.svelte | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/lib/common/Breadcrumb.svelte b/src/lib/common/Breadcrumb.svelte index 057d06d6..bb590189 100644 --- 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 = ''; diff --git a/src/lib/common/HeadTitle.svelte b/src/lib/common/HeadTitle.svelte index 5f46456e..77cd0f21 100644 --- a/src/lib/common/HeadTitle.svelte +++ b/src/lib/common/HeadTitle.svelte @@ -1,9 +1,10 @@ - {title} | {PUBLIC_BRAND_NAME} - Admin & Dashboard + {title} | {PUBLIC_BRAND_NAME}{`${!!addOn ? ` - ${addOn}` : ''}`} From da394309ef0a62358b40f91ac70c1e4c1b186877 Mon Sep 17 00:00:00 2001 From: Jicheng Lu Date: Wed, 14 Feb 2024 13:28:19 -0600 Subject: [PATCH 3/4] add sent message proceeding --- .../[conversationId]/chat-box.svelte | 59 +++++++++++++------ 1 file changed, 42 insertions(+), 17 deletions(-) diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index d055609a..2e3d0c1c 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte @@ -30,6 +30,7 @@ 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: { @@ -48,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; @@ -79,7 +83,7 @@ onMount(async () => { dialogs = await GetDialogs(params.conversationId); - getLatestSentMessage(dialogs); + initPrevSentMessages(dialogs); signalr.onMessageReceivedFromClient = onMessageReceivedFromClient; signalr.onMessageReceivedFromCsr = onMessageReceivedFromCsr; @@ -97,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; } @@ -169,7 +175,6 @@ // trigger UI render dialogs = dialogs?.map(item => { return { ...item }; }) || []; groupedDialogs = groupDialogs(dialogs); - console.log(groupedDialogs); await tick(); setTimeout(() => { @@ -195,21 +200,39 @@ /** @param {any} e */ async function onSendMessage(e) { - if (!!!text && e.key === 'ArrowUp') { + 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(); - text = prevSentMsg; - await tick(); - e.target.selectionStart = text?.length || 0; - e.target.selectionEnd = text?.length || 0; - // console.log(e.target.selectionStart, e.target.selectionEnd, text?.length); + 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); } @@ -304,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); } @@ -329,17 +352,18 @@ } 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; } @@ -365,6 +389,7 @@ cancel={toggleStateModal} /> +
{#if isLoadStateLog} From 3f79ef3a1dfd76b26921dfd4034152cc9b2745a5 Mon Sep 17 00:00:00 2001 From: Jicheng Lu Date: Wed, 14 Feb 2024 13:30:15 -0600 Subject: [PATCH 4/4] minor change --- src/routes/chat/[agentId]/[conversationId]/chat-box.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte index 2e3d0c1c..1f3a7c02 100644 --- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte +++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte @@ -459,13 +459,13 @@
    - {#each Object.entries(groupedDialogs) as [createDate, dialog]} + {#each Object.entries(groupedDialogs) as [createDate, dialogGroup]}
  • {createDate}
    • - {#each dialog as message} + {#each dialogGroup as message}