Skip to content

Features/use last sent message #44

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 14, 2024
Merged

Features/use last sent message #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
691f8a3
group dialogs
iceljc Feb 14, 2024
1fd47f9
refine head
iceljc Feb 14, 2024
da39430
add sent message proceeding
iceljc Feb 14, 2024
3f79ef3
minor change
iceljc Feb 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/lib/common/Breadcrumb.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion src/lib/common/HeadTitle.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
81 changes: 67 additions & 14 deletions src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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;
Expand All @@ -61,6 +66,8 @@

/** @type {import('$types').ChatResponseModel[]} */
let dialogs = [];
/** @type {{ [s: string]: any; }} */
let groupedDialogs = [];

/** @type {import('$types').ContentLogModel[]} */
let contentLogs = [];
Expand All @@ -76,7 +83,7 @@

onMount(async () => {
dialogs = await GetDialogs(params.conversationId);
getLatestSentMessage(dialogs);
initPrevSentMessages(dialogs);

signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
signalr.onMessageReceivedFromCsr = onMessageReceivedFromCsr;
Expand All @@ -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;
}


Expand Down Expand Up @@ -165,6 +174,7 @@
async function refresh() {
// trigger UI render
dialogs = dialogs?.map(item => { return { ...item }; }) || [];
groupedDialogs = groupDialogs(dialogs);
await tick();

setTimeout(() => {
Expand All @@ -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);
}

Expand Down Expand Up @@ -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);
}
Expand All @@ -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>
Expand All @@ -339,6 +389,7 @@
cancel={toggleStateModal}
/>

<HeadTitle title="Chat" addOn='' />
<div class="d-lg-flex">
<Splitpanes>
{#if isLoadStateLog}
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -474,6 +526,7 @@
</div>
</li>
{/each}
{/each}
</ul>
</div>
</div>
Expand Down