Skip to content

Commit d7de954

Browse files
Oceania2018Oceania2018
authored
Merge pull request #46 from iceljc/features/add-conversation-log
Features/add conversation log
2 parents 22f14ec + 9ba15ac commit d7de954

File tree

10 files changed

+106
-50
lines changed

10 files changed

+106
-50
lines changed

‎src/lib/helpers/types.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -260,19 +260,18 @@ IRichContent.prototype.text;
260260
*/
261261

262262
/**
263-
* @typedef {Object} ContentLogModel
263+
* @typedef {Object} ConversationContentLogModel
264264
* @property {string} conversation_id - The conversation id.
265265
* @property {string} name - The sender name.
266266
* @property {string} role - The sender role.
267267
* @property {string} content - The log content.
268268
* @property {Date} created_at - The log sent time.
269-
* @property {boolean} is_collapsed - For UI display.
270269
*/
271270

272271
/**
273272
* @typedef {Object} ConversationStateLogModel
274273
* @property {string} conversation_id - The conversation id.
275-
* @property {string} states - The states content.
274+
* @property {Object} states - The states content.
276275
* @property {Date} created_at - The states sent time.
277276
*/
278277

@@ -319,7 +318,7 @@ IRichContent.prototype.text;
319318
* Content log
320319
*
321320
* @callback OnContentLogReceived
322-
* @param {ContentLogModel} log
321+
* @param {ConversationContentLogModel} log
323322
*/
324323

325324
/**

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@
309309

310310
span {
311311
color: white;
312-
font-size: 18px;
312+
font-size: 15px;
313313
}
314314
}
315315

‎src/lib/services/api-endpoints.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ export const endpoints = {
4949

5050
// logging
5151
loggingFullLogUrl: `${host}/logger/full-log`,
52+
loggingContentLogUrl: `${host}/logger/conversation/{conversationId}/content-log`,
53+
loggingStateLogUrl: `${host}/logger/conversation/{conversationId}/state-log`,
5254

5355
// knowledge base
5456
knowledgeBaseUploadUrl: `${host}/knowledge-base/upload`,

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { replaceUrl } from '$lib/helpers/http.js';
12
import { endpoints } from './api-endpoints.js';
23
import axios from 'axios';
34

@@ -18,4 +19,26 @@ export async function getFullLog() {
1819
link.click();
1920
link.remove();
2021
})
22+
}
23+
24+
/**
25+
* Get conversation content log
26+
* @param {string} conversationId
27+
* @returns {Promise<import('$types').ConversationContentLogModel[]>}
28+
*/
29+
export async function GetContentLogs(conversationId) {
30+
let url = replaceUrl(endpoints.loggingContentLogUrl, {conversationId: conversationId});
31+
const response = await axios.get(url);
32+
return response.data;
33+
}
34+
35+
/**
36+
* Get conversation state log
37+
* @param {string} conversationId
38+
* @returns {Promise<import('$types').ConversationStateLogModel[]>}
39+
*/
40+
export async function GetStateLogs(conversationId) {
41+
let url = replaceUrl(endpoints.loggingStateLogUrl, {conversationId: conversationId});
42+
const response = await axios.get(url);
43+
return response.data;
2144
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ export const signalr = {
9191
connection.on('onConversateStatesGenerated', (data) => {
9292
const jsonData = JSON.parse(data);
9393
if (conversationId === jsonData?.conversation_id) {
94+
console.log(data, jsonData);
9495
this.onConversationStatesGenerated(jsonData);
9596
}
9697
});

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

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
/** @type {{ [s: string]: any; }} */
7070
let groupedDialogs = [];
7171
72-
/** @type {import('$types').ContentLogModel[]} */
72+
/** @type {import('$types').ConversationContentLogModel[]} */
7373
let contentLogs = [];
7474
7575
/** @type {import('$types').ConversationStateLogModel[]} */
@@ -79,7 +79,7 @@
7979
let isLoadContentLog = false;
8080
let isLoadStateLog = false;
8181
let isOpenEditMsgModal = false;
82-
let isOpenStateModal = false;
82+
let isOpenAddStateModal = false;
8383
let isSendingMsg = false;
8484
8585
onMount(async () => {
@@ -137,17 +137,16 @@
137137
refresh();
138138
}
139139
140-
/** @param {import('$types').ContentLogModel} log */
140+
/** @param {import('$types').ConversationContentLogModel} log */
141141
function onContentLogGenerated(log) {
142-
contentLogs.push({
143-
...log,
144-
is_collapsed: true
145-
});
142+
if (!isLoadContentLog) return;
143+
contentLogs.push({ ...log });
146144
contentLogs = contentLogs.map(x => { return { ...x }; });
147145
}
148146
149147
/** @param {import('$types').ConversationStateLogModel} data */
150148
function onConversationStatesGenerated(data) {
149+
if (!isLoadStateLog) return;
151150
stateLogs.push({ ...data });
152151
stateLogs = stateLogs.map(x => { return { ...x }; });
153152
}
@@ -248,6 +247,10 @@
248247
return;
249248
}
250249
250+
if (e.key === 'Enter') {
251+
e.preventDefault();
252+
}
253+
251254
prevSentMsgs = [...prevSentMsgs, text];
252255
isSendingMsg = true;
253256
sendMessageToHub(params.agentId, params.conversationId, text).then(() => {
@@ -281,14 +284,20 @@
281284
282285
function toggleContentLog() {
283286
isLoadContentLog = !isLoadContentLog;
287+
if (!isLoadContentLog) {
288+
contentLogs = [];
289+
}
284290
}
285291
286292
function toggleStateLog() {
287293
isLoadStateLog = !isLoadStateLog;
294+
if (!isLoadStateLog) {
295+
stateLogs = [];
296+
}
288297
}
289298
290-
function toggleStateModal() {
291-
isOpenStateModal = !isOpenStateModal;
299+
function toggleAddStateModal() {
300+
isOpenAddStateModal = !isOpenAddStateModal;
292301
}
293302
294303
function clearStates() {
@@ -404,10 +413,10 @@
404413
405414
<StateModal
406415
className="custom-modal"
407-
isOpen={isOpenStateModal}
408-
toggleModal={toggleStateModal}
409-
confirm={toggleStateModal}
410-
cancel={toggleStateModal}
416+
isOpen={isOpenAddStateModal}
417+
toggleModal={toggleAddStateModal}
418+
confirm={toggleAddStateModal}
419+
cancel={toggleAddStateModal}
411420
/>
412421
413422
<HeadTitle title="Chat" addOn='' />
@@ -442,7 +451,7 @@
442451
{#if !isLoadContentLog}
443452
<DropdownItem on:click={() => toggleContentLog()}>View Log</DropdownItem>
444453
{/if}
445-
{#if !isLoadStateLog || !isOpenStateModal}
454+
{#if !isLoadStateLog || !isOpenAddStateModal}
446455
<li>
447456
<Dropdown direction="right" class="state-menu">
448457
<DropdownToggle caret class="dropdown-item">
@@ -452,8 +461,8 @@
452461
{#if !isLoadStateLog}
453462
<DropdownItem on:click={() => toggleStateLog()}>View States</DropdownItem>
454463
{/if}
455-
{#if !isOpenStateModal}
456-
<DropdownItem on:click={() => toggleStateModal()}>Add States</DropdownItem>
464+
{#if !isOpenAddStateModal}
465+
<DropdownItem on:click={() => toggleAddStateModal()}>Add States</DropdownItem>
457466
{/if}
458467
<DropdownItem on:click={() => clearStates()}>Clear States</DropdownItem>
459468
</DropdownMenu>
@@ -508,7 +517,7 @@
508517
{:else}
509518
<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="rounded-circle avatar-xs" alt="avatar">
510519
{/if}
511-
</div>
520+
</div>
512521
{/if}
513522
514523
{#if message.sender.id === currentUser.id}
@@ -564,7 +573,7 @@
564573
</div>
565574
<div class="col">
566575
<div class="position-relative">
567-
<textarea rows={1} maxlength={500} class="form-control chat-input" bind:value={text} on:keydown={e => onSendMessage(e)} placeholder="Enter Message..." />
576+
<textarea rows={1} maxlength={500} class="form-control chat-input" bind:value={text} on:keydown={e => onSendMessage(e)} disabled={isSendingMsg} placeholder="Enter Message..." />
568577
<div class="chat-input-links" id="tooltip-container">
569578
<ul class="list-inline mb-0">
570579
<li class="list-inline-item">
@@ -591,7 +600,7 @@
591600
</Pane>
592601
{#if isLoadContentLog}
593602
<Pane size={30} minSize={20} maxSize={50}>
594-
<ContentLog logs={contentLogs} closeWindow={toggleContentLog} />
603+
<ContentLog contentLogs={contentLogs} closeWindow={toggleContentLog} />
595604
</Pane>
596605
{/if}
597606
</Splitpanes>

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,15 @@
44
import { replaceNewLine } from '$lib/helpers/http';
55
import { UserRole } from '$lib/helpers/enums';
66
7-
/** @type {import('$types').ContentLogModel} */
7+
/** @type {import('$types').ConversationContentLogModel} */
88
export let data;
99
10+
let is_collapsed = true;
11+
1012
/** @param {any} e */
1113
function toggleText(e) {
1214
e.preventDefault();
13-
data.is_collapsed = !data.is_collapsed;
15+
is_collapsed = !is_collapsed;
1416
}
1517
</script>
1618

@@ -19,12 +21,12 @@
1921
<b>{`[${data?.name?.length > 0 ? data?.name + ' ' : ''}${moment.utc(data?.created_at).local().format('hh:mm:ss.SSS A, MMM DD YYYY')}]`}</b>
2022
</div>
2123
<br>
22-
<div class="log-content" class:log-collapse={!!data?.is_collapsed}>
24+
<div class="log-content" class:log-collapse={!!is_collapsed}>
2325
{@html replaceNewLine(data?.content)}
2426
</div>
2527
{#if data.role != UserRole.User}
2628
<Button class='toggle-btn' color="link" on:click={(e) => toggleText(e)}>
27-
{`${!!data?.is_collapsed ? 'More +' : 'Less -'}`}
29+
{`${is_collapsed ? 'More +' : 'Less -'}`}
2830
</Button>
2931
{/if}
3032
</div>

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

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
11
<script>
22
import 'overlayscrollbars/overlayscrollbars.css';
33
import { OverlayScrollbars } from 'overlayscrollbars';
4-
import { afterUpdate, onMount, tick } from 'svelte';
4+
import { afterUpdate, onDestroy, onMount, tick } from 'svelte';
55
import ContentLogElement from './content-log-element.svelte';
6+
import { page } from '$app/stores';
7+
import { GetContentLogs } from '$lib/services/logging-service';
68
7-
/** @type {import('$types').ContentLogModel[]} */
8-
export let logs = [];
9+
/** @type {import('$types').ConversationContentLogModel[]} */
10+
export let contentLogs = [];
911
1012
/** @type {() => void} */
1113
export let closeWindow;
1214
1315
// @ts-ignore
1416
let scrollbar;
17+
/** @type {import('$types').ConversationContentLogModel[]} */
18+
let initLogs = [];
19+
20+
$: allLogs = [...initLogs, ...contentLogs];
1521
1622
const options = {
1723
scrollbars: {
@@ -26,24 +32,27 @@
2632
};
2733
2834
onMount(async () => {
35+
const conversationId = $page.params.conversationId;
36+
initLogs = await GetContentLogs(conversationId);
37+
2938
const scrollElements = document.querySelectorAll('.content-log-scrollbar');
3039
scrollElements.forEach((item) => {
3140
scrollbar = OverlayScrollbars(item, options);
3241
});
3342
34-
refreshLog();
43+
refresh();
3544
});
3645
3746
afterUpdate(() => {
38-
refreshLog();
47+
refresh();
3948
});
4049
50+
onDestroy(() => {
51+
initLogs = [];
52+
contentLogs = [];
53+
});
4154
42-
async function refreshLog() {
43-
// trigger UI render
44-
logs = logs || [];
45-
await tick();
46-
55+
async function refresh() {
4756
setTimeout(() => {
4857
const { viewport } = scrollbar.elements();
4958
viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' }); // set scroll offset
@@ -64,7 +73,7 @@
6473
</div>
6574
<div class="content-log-scrollbar log-list padding-side">
6675
<ul>
67-
{#each logs as log}
76+
{#each allLogs as log}
6877
<ContentLogElement data={log} />
6978
{/each}
7079
</ul>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
55
/** @type {any} */
66
export let data;
7+
8+
$: stateObj = JSON.parse(JSON.stringify(data?.states || {}));
79
</script>
810
911
<div class="log-element">
@@ -12,6 +14,6 @@
1214
</div>
1315
<br>
1416
<div class="log-content">
15-
<JSONTree value={JSON.parse(data?.states)} />
17+
<JSONTree value={stateObj} />
1618
</div>
1719
</div>

0 commit comments

Comments
 (0)