Skip to content

Commit 99c3f6c

Browse files
Oceania2018Oceania2018
authored
Merge pull request #103 from iceljc/features/refine-chat-window
add agent queue changed event
2 parents dc56774 + 8daa4ff commit 99c3f6c

File tree

8 files changed

+158
-46
lines changed

8 files changed

+158
-46
lines changed

‎src/lib/helpers/types.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -309,6 +309,13 @@ IRichContent.prototype.text;
309309
* @property {Date} created_at - The log sent time.
310310
*/
311311

312+
/**
313+
* @typedef {Object} AgentQueueChangedModel
314+
* @property {string} conversation_id - The conversation id.
315+
* @property {string} log - The log content.
316+
* @property {Date} created_at - The log sent time.
317+
*/
318+
312319
/**
313320
* Conversation states added by user
314321
*
@@ -406,6 +413,13 @@ IRichContent.prototype.text;
406413
* @param {StateChangeModel} log
407414
*/
408415

416+
/**
417+
* Agent queue changed log
418+
*
419+
* @callback OnAgentQueueChanged
420+
* @param {AgentQueueChangedModel} log
421+
*/
422+
409423
/**
410424
* Conversation sender action
411425
*

‎src/lib/scss/custom/pages/_chat.scss‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -368,26 +368,34 @@
368368
margin-bottom: 10px;
369369
position: sticky;
370370
display: flex;
371-
// justify-content: flex-end;
372371
justify-content: space-between;
373372
}
374373

374+
.state-log-section {
375+
height: 92vh;
376+
}
377+
375378
.content-log-list {
376379
height: 90vh;
377380
}
378381

379382
.state-change-log-list {
380-
height: 35vh;
381-
border-bottom-style: solid;
382-
border-bottom-color: #fff;
383-
border-bottom-width: 5px;
383+
height: 100%;
384384
}
385385

386386
.state-log-list {
387-
height: 65vh;
387+
height: 100%;
388+
padding-top: 10px;
389+
}
390+
391+
.queue-change-log-list {
392+
width: 100%;
393+
height: 5vh;
388394
}
389395

390396
.log-list {
397+
background-color: black;
398+
391399
.log-element {
392400
margin-top: 10px;
393401
margin-bottom: 15px;
@@ -456,6 +464,18 @@
456464
}
457465
}
458466

467+
.queue-change-container {
468+
margin-top: 0px;
469+
margin-bottom: 0px;
470+
471+
.log-content {
472+
text-align: center;
473+
font-size: 17px;
474+
margin-top: 2px;
475+
margin-bottom: 2px;
476+
}
477+
}
478+
459479
.state-log-item {
460480
margin-top: 5px;
461481
margin-bottom: 10px;

‎src/lib/services/signalr-service.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ export const signalr = {
3030
/** @type {import('$types').OnStateChangeGenerated} */
3131
onStateChangeGenerated: () => {},
3232

33+
/** @type {import('$types').OnAgentQueueChanged} */
34+
onAgentQueueChanged: () => {},
35+
3336
/** @type {import('$types').OnSenderActionGenerated} */
3437
onSenderActionGenerated: () => {},
3538

@@ -111,6 +114,13 @@ export const signalr = {
111114
}
112115
});
113116

117+
connection.on('OnAgentQueueChanged', (log) => {
118+
const jsonData = JSON.parse(log);
119+
if (conversationId === jsonData?.conversation_id) {
120+
this.onAgentQueueChanged(jsonData);
121+
}
122+
});
123+
114124
connection.on('OnSenderActionGenerated', (data) => {
115125
if (conversationId === data?.conversation_id) {
116126
this.onSenderActionGenerated(data);

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

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,12 @@
8484
/** @type {import('$types').ConversationStateLogModel[]} */
8585
let stateLogs = [];
8686
87-
/** @type {import('$types').StateChangeLogModel[]} */
87+
/** @type {import('$types').StateChangeModel[]} */
8888
let stateChangeLogs = [];
8989
90+
/** @type {import('$types').AgentQueueChangedModel[]} */
91+
let agentQueueChangeLogs = [];
92+
9093
/** @type {import('$types').UserStateDetailModel[]} */
9194
let userAddStates = [];
9295
@@ -113,6 +116,7 @@
113116
signalr.onConversationContentLogGenerated = onConversationContentLogGenerated;
114117
signalr.onConversationStateLogGenerated = onConversationStateLogGenerated;
115118
signalr.onStateChangeGenerated = onStateChangeGenerated;
119+
signalr.onAgentQueueChanged = onAgentQueueChanged;
116120
signalr.onSenderActionGenerated = onSenderActionGenerated;
117121
signalr.onConversationMessageDeleted = onConversationMessageDeleted;
118122
await signalr.start(params.conversationId);
@@ -271,6 +275,14 @@
271275
stateChangeLogs = stateChangeLogs.map(x => { return { ...x }; });
272276
}
273277
278+
/** @param {import('$types').AgentQueueChangedModel} log */
279+
function onAgentQueueChanged(log) {
280+
if (!isLoadContentLog || log == null) return;
281+
282+
agentQueueChangeLogs.push({ ...log });
283+
agentQueueChangeLogs = agentQueueChangeLogs.map(x => { return { ...x }; });
284+
}
285+
274286
/** @param {import('$types').ConversationSenderActionModel} data */
275287
function onSenderActionGenerated(data) {
276288
if (data?.sender_action == SenderAction.TypingOn) {
@@ -300,7 +312,7 @@
300312
*/
301313
function sendChatMessage(msgText, data = null) {
302314
isSendingMsg = true;
303-
stateChangeLogs = [];
315+
clearEventLogs();
304316
renewUserSentMessages(msgText);
305317
306318
const postback = buildPostbackMessage(dialogs, data?.payload || msgText, data?.truncateMsgId);
@@ -558,7 +570,7 @@
558570
559571
/** @param {string} messageId */
560572
async function handleDeleteMessage(messageId) {
561-
stateChangeLogs = [];
573+
clearEventLogs();
562574
await deleteConversationMessage(params.conversationId, messageId);
563575
}
564576
@@ -687,6 +699,11 @@
687699
function openFullScreen() {
688700
window.open($page.url.pathname);
689701
}
702+
703+
function clearEventLogs() {
704+
stateChangeLogs = [];
705+
agentQueueChangeLogs = [];
706+
}
690707
</script>
691708
692709
@@ -933,6 +950,7 @@
933950
<Pane size={30} minSize={20} maxSize={50}>
934951
<ContentLog
935952
bind:contentLogs={contentLogs}
953+
bind:agentQueueChangeLogs={agentQueueChangeLogs}
936954
closeWindow={toggleContentLog}
937955
cleanScreen={cleanContentLogScreen}
938956
/>

‎src/routes/chat/[agentId]/[conversationId]/contentLogs/agent-queue-change-element.svelte‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script>
2+
3+
/** @type {any} */
4+
export let data;
5+
6+
</script>
7+
8+
<div class="log-element queue-change-container">
9+
<div class="log-content queue-change-content">
10+
<span class="text-warning">{data?.log}</span>
11+
</div>
12+
</div>

‎src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log.svelte‎

Lines changed: 48 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,22 @@
55
import ContentLogElement from './content-log-element.svelte';
66
import { page } from '$app/stores';
77
import { GetContentLogs } from '$lib/services/logging-service';
8+
import AgentQueueChangeElement from './agent-queue-change-element.svelte';
89
910
/** @type {import('$types').ConversationContentLogModel[]} */
1011
export let contentLogs = [];
1112
13+
/** @type {import('$types').AgentQueueChangedModel[]} */
14+
export let agentQueueChangeLogs = [];
15+
1216
/** @type {() => void} */
1317
export let closeWindow;
1418
1519
/** @type {() => void} */
1620
export let cleanScreen;
1721
18-
// @ts-ignore
19-
let scrollbar;
22+
/** @type {any[]} */
23+
let scrollbars = [];
2024
2125
const options = {
2226
scrollbars: {
@@ -34,8 +38,14 @@
3438
const conversationId = $page.params.conversationId;
3539
contentLogs = await GetContentLogs(conversationId);
3640
37-
const scrollElement = document.querySelector('.content-log-scrollbar');
38-
scrollbar = OverlayScrollbars(scrollElement, options);
41+
const scrollbarElements = [
42+
document.querySelector('.content-log-scrollbar'),
43+
document.querySelector('.queue-change-log-scrollbar')
44+
].filter(Boolean);
45+
scrollbarElements.forEach(elem => {
46+
scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
47+
});
48+
3949
refresh();
4050
});
4151
@@ -48,10 +58,13 @@
4858
});
4959
5060
async function refresh() {
51-
setTimeout(() => {
52-
const { viewport } = scrollbar.elements();
53-
viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
54-
}, 200);
61+
// @ts-ignore
62+
scrollbars.forEach(scrollbar => {
63+
setTimeout(() => {
64+
const { viewport } = scrollbar.elements();
65+
viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
66+
}, 200);
67+
});
5568
}
5669
5770
function cleanLogs() {
@@ -67,20 +80,33 @@
6780
<div class="chat-log">
6881
<div class="card mb-0 log-background" style="height: 100%;">
6982
<div class="log-close-btn padding-side">
70-
<button
71-
type="button"
72-
class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
73-
on:click={() => handleCleanScreen()}
74-
>
75-
<i class="bx bx-trash"></i>
76-
</button>
77-
<button
78-
type="button"
79-
class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
80-
on:click={() => closeWindow()}
81-
>
82-
<i class="mdi mdi-window-close"></i>
83-
</button>
83+
<div>
84+
<button
85+
type="button"
86+
class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
87+
on:click={() => handleCleanScreen()}
88+
>
89+
<i class="bx bx-trash"></i>
90+
</button>
91+
</div>
92+
93+
<div class="queue-change-log-scrollbar queue-change-log-list log-list">
94+
<ul>
95+
{#each agentQueueChangeLogs as log}
96+
<AgentQueueChangeElement data={log} />
97+
{/each}
98+
</ul>
99+
</div>
100+
101+
<div>
102+
<button
103+
type="button"
104+
class="btn btn-sm btn-secondary btn-rounded chat-send waves-effect waves-light"
105+
on:click={() => closeWindow()}
106+
>
107+
<i class="mdi mdi-window-close"></i>
108+
</button>
109+
</div>
84110
</div>
85111
<div class="content-log-scrollbar content-log-list log-list padding-side">
86112
<ul>

‎src/routes/chat/[agentId]/[conversationId]/stateLogs/state-change-element.svelte‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@
2727
text = `(active rounds: ${activeRounds})`;
2828
} else if (activeRounds == 1) {
2929
text = `(active round: ${activeRounds})`;
30-
} else {
31-
text = `(active rounds: infinity)`;
3230
}
3331
3432
return text;
@@ -44,17 +42,21 @@
4442
<div class="value">
4543
{`${data?.before_value || 'unknown'}`}
4644
</div>
45+
{#if !!beforeActiveRoundText}
4746
<div class="active-rounds">
4847
{`${beforeActiveRoundText}`}
4948
</div>
49+
{/if}
5050
</div>
5151
<div class="state-value text-warning">
5252
<div class="value">
5353
{`${data?.after_value || 'unknown'}`}
5454
</div>
55+
{#if !!afterActiveRoundText}
5556
<div class="active-rounds">
5657
{`${afterActiveRoundText}`}
5758
</div>
59+
{/if}
5860
</div>
5961
</div>
6062
</div>

‎src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import 'overlayscrollbars/overlayscrollbars.css';
33
import { OverlayScrollbars } from 'overlayscrollbars';
44
import { afterUpdate, onDestroy, onMount } from 'svelte';
5+
import { Pane, Splitpanes } from 'svelte-splitpanes';
56
import { page } from '$app/stores';
67
import { GetStateLogs } from '$lib/services/logging-service';
78
import StateLogElement from './state-log-element.svelte';
@@ -94,19 +95,28 @@
9495
<i class="bx bx-trash"></i>
9596
</button>
9697
</div>
97-
<div class="state-change-scrollbar state-change-log-list log-list padding-side">
98-
<ul>
99-
{#each stateChangeLogs as log}
100-
<StateChangeElement data={log} />
101-
{/each}
102-
</ul>
103-
</div>
104-
<div class="state-log-scrollbar state-log-list log-list padding-side">
105-
<ul>
106-
{#each stateLogs as log}
107-
<StateLogElement data={log} />
108-
{/each}
109-
</ul>
98+
<div class="state-log-section">
99+
<Splitpanes horizontal>
100+
<Pane size={35} minSize={25} maxSize={75}>
101+
<div class="state-change-scrollbar state-change-log-list log-list padding-side">
102+
<ul>
103+
{#each stateChangeLogs as log}
104+
<StateChangeElement data={log} />
105+
{/each}
106+
</ul>
107+
</div>
108+
</Pane>
109+
<Pane size={65} minSize={25} maxSize={75}>
110+
<div class="state-log-scrollbar state-log-list log-list padding-side">
111+
<ul>
112+
{#each stateLogs as log}
113+
<StateLogElement data={log} />
114+
{/each}
115+
</ul>
116+
</div>
117+
</Pane>
118+
</Splitpanes>
110119
</div>
120+
111121
</div>
112122
</div>

0 commit comments

Comments
 (0)