Skip to content

Commit ec88fcd

Browse files
iceljciceljc
authored
Merge pull request #330 from iceljc/features/refine-chat-window
refine states loading
2 parents e948d37 + 710005c commit ec88fcd

10 files changed

Lines changed: 73 additions & 42 deletions

File tree

‎src/lib/helpers/types/conversationTypes.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
* @property {string?} [channel] - The conversation channel.
1111
* @property {string?} [status] - The conversation status.
1212
* @property {string?} [taskId] - The task id.
13+
* @property {boolean?} [isLoadLatestStates]
1314
* @property {import('$commonTypes').KeyValuePair[]} [states] - The conversation status.
1415
* @property {string[]} [tags] - The tags.
1516
*/
@@ -24,7 +25,7 @@
2425
* @property {string} channel - The conversation status.
2526
* @property {string} [task_id] - Optional task id.
2627
* @property {string} status - The conversation status.
27-
* @property {Object[]} states - The conversation states.
28+
* @property {Object} states - The conversation states.
2829
* @property {string[]} tags - The conversation tags.
2930
* @property {Date} updated_time - The conversation updated time.
3031
* @property {Date} created_time - The conversation created time.
@@ -145,6 +146,7 @@ IRichContent.prototype.quick_replies;
145146
* @property {RichContent} rich_content - Rich content.
146147
* @property {string} post_action_disclaimer - The message disclaimer.
147148
* @property {string} data - The message data.
149+
* @property {Object} states
148150
* @property {Date} created_at - The message sent time.
149151
* @property {boolean} has_message_files
150152
* @property {boolean} is_chat_message
@@ -180,6 +182,7 @@ IRichContent.prototype.quick_replies;
180182

181183
/**
182184
* @typedef {Object} MessageStateLogModel
185+
* @property {string?} uid
183186
* @property {string} conversation_id - The conversation id.
184187
* @property {string} message_id - The message id.
185188
* @property {string} before_value - The value before change.
@@ -193,6 +196,7 @@ IRichContent.prototype.quick_replies;
193196

194197
/**
195198
* @typedef {Object} AgentQueueLogModel
199+
* @property {string?} uid
196200
* @property {string} conversation_id - The conversation id.
197201
* @property {string} log - The log content.
198202
* @property {Date} created_at - The log sent time.

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,16 @@ export async function newConversation(agentId, config) {
1919
/**
2020
* Get conversation detail
2121
* @param {string} id
22+
* @param {boolean} isLoadStates
2223
* @returns {Promise<import('$conversationTypes').ConversationModel>}
2324
*/
24-
export async function getConversation(id) {
25+
export async function getConversation(id, isLoadStates = false) {
2526
let url = replaceUrl(endpoints.conversationDetailUrl, {conversationId: id});
26-
const response = await axios.get(url);
27+
const response = await axios.get(url, {
28+
params: {
29+
isLoadStates: isLoadStates
30+
}
31+
});
2732
return response.data;
2833
}
2934

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

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,8 @@
157157
/** @type {import('$conversationTypes').ConversationStateLogModel[]} */
158158
let convStateLogs = [];
159159
160-
/** @type {import('$conversationTypes').ConversationStateLogModel?} */
160+
// /** @type {import('$conversationTypes').ConversationStateLogModel?} */
161+
/** @type {Object?} */
161162
let latestStateLog;
162163
163164
/** @type {import('$conversationTypes').MessageStateLogModel[]} */
@@ -219,10 +220,11 @@
219220
220221
onMount(async () => {
221222
disableSpeech = navigator.userAgent.includes('Firefox');
222-
conversation = await getConversation(params.conversationId);
223+
conversation = await getConversation(params.conversationId, true);
223224
dialogs = await getDialogs(params.conversationId, dialogCount);
224225
conversationUser = await getConversationUser(params.conversationId);
225226
selectedTags = conversation?.tags || [];
227+
latestStateLog = conversation?.states;
226228
initUserSentMessages(dialogs);
227229
initChatView();
228230
handlePaneResize();
@@ -469,7 +471,6 @@
469471
/** @param {import('$conversationTypes').ChatResponseModel} message */
470472
function onMessageReceivedFromClient(message) {
471473
autoScrollLog = true;
472-
clearInstantLogs();
473474
dialogs.push({
474475
...message,
475476
is_chat_message: true
@@ -484,6 +485,7 @@
484485
...message,
485486
is_chat_message: true
486487
});
488+
latestStateLog = message.states;
487489
refresh();
488490
}
489491
@@ -504,7 +506,6 @@
504506
function onConversationStateLogGenerated(log) {
505507
if (!isLoadPersistLog) return;
506508
507-
latestStateLog = log;
508509
convStateLogs.push({ ...log, uid: uuidv4() });
509510
convStateLogs = convStateLogs.map(x => { return { ...x }; });
510511
}
@@ -514,15 +515,15 @@
514515
if (!isLoadInstantLog || log == null) return;
515516
516517
msgStateLogs.push({ ...log });
517-
msgStateLogs = msgStateLogs.map(x => { return { ...x }; });
518+
msgStateLogs = msgStateLogs.map(x => { return { ...x, uid: uuidv4() }; });
518519
}
519520
520521
/** @param {import('$conversationTypes').AgentQueueLogModel} log */
521522
function onAgentQueueChanged(log) {
522523
if (!isLoadInstantLog || log == null) return;
523524
524525
agentQueueLogs.push({ ...log });
525-
agentQueueLogs = agentQueueLogs.map(x => { return { ...x }; });
526+
agentQueueLogs = agentQueueLogs.map(x => { return { ...x, uid: uuidv4() }; });
526527
}
527528
528529
/** @param {import('$conversationTypes').ConversationSenderActionModel} data */
@@ -1053,7 +1054,6 @@
10531054
10541055
targetIdx = convStateLogs.findIndex(x => x.message_id === messageId);
10551056
convStateLogs = convStateLogs.filter((x, idx) => idx < targetIdx);
1056-
latestStateLog = convStateLogs.slice(-1)[0];
10571057
}
10581058
}
10591059
@@ -1483,7 +1483,7 @@
14831483
<InstantLog
14841484
bind:msgStateLogs={msgStateLogs}
14851485
bind:agentQueueLogs={agentQueueLogs}
1486-
latestStateLog={latestStateLog?.message_id === lastMsg?.message_id ? latestStateLog : null}
1486+
latestStateLog={latestStateLog}
14871487
agent={agent}
14881488
closeWindow={() => closeInstantLog()}
14891489
/>
@@ -1917,7 +1917,6 @@
19171917
<PersistLog
19181918
bind:contentLogs={contentLogs}
19191919
bind:convStateLogs={convStateLogs}
1920-
bind:lastestStateLog={latestStateLog}
19211920
bind:autoScroll={autoScrollLog}
19221921
closeWindow={() => closePersistLog()}
19231922
cleanScreen={() => cleanPersistLogScreen()}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
/** @type {any[]} */
1818
export let agentQueueLogs = [];
1919
20-
/** @type {import('$conversationTypes').ConversationStateLogModel?} */
20+
/** @type {Object?} */
2121
export let latestStateLog = null;
2222
2323
/** @type {() => void} */
@@ -138,7 +138,7 @@
138138
</div>
139139
<div class="agent-queue-log-scrollbar padding-side">
140140
<ul>
141-
{#each agentQueueLogs as log}
141+
{#each agentQueueLogs as log (log.uid)}
142142
<AgentQueueLogElement data={log} />
143143
{/each}
144144
</ul>
@@ -165,14 +165,14 @@
165165
</div>
166166
<div class="msg-state-log-scrollbar padding-side" >
167167
<ul>
168-
{#each msgStateLogs as log}
168+
{#each msgStateLogs as log (log.uid)}
169169
<MessageStateLogElement data={log} />
170170
{/each}
171171
</ul>
172172
</div>
173173
</div>
174174
{/if}
175-
{#if latestStateLog}
175+
{#if latestStateLog && Object.keys(latestStateLog)?.length > 0}
176176
<div
177177
class="log-list instant-log-section instant-log-sec-md"
178178
in:fade={{ duration: inDuration }}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
import { formatObject } from '$lib/helpers/utils/common';
33
import JSONTree from 'svelte-json-tree';
44
5-
/** @type {import('$conversationTypes').ConversationStateLogModel?} */
5+
/** @type {Object?} */
66
export let data;
77
</script>
88

99
<div class="log-element state-log-item">
1010
<div class="log-content">
1111
<JSONTree
12-
value={formatObject(data?.states)}
12+
value={formatObject(data)}
1313
defaultExpandedLevel={1}
1414
--json-tree-property-color="white"
1515
--json-tree-label-color="white"

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

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@
3333
/** @type {import('$conversationTypes').ConversationStateLogModel[]} */
3434
export let convStateLogs = [];
3535
36-
/** @type {import('$conversationTypes').ConversationStateLogModel?} */
37-
export let lastestStateLog = null;
38-
3936
/** @type {boolean} */
4037
export let autoScroll = false;
4138
@@ -49,7 +46,8 @@
4946
let scrollbars = [];
5047
/** @type {number} */
5148
let selectedTab = contentLogTab;
52-
let tabChanged = false;
49+
/** @type {boolean} */
50+
let pauseChange = false;
5351
5452
/** @type {import('$conversationTypes').ConversationLogFilter} */
5553
let contentLogFilter = { size: 20, startTime: utcNow };
@@ -77,9 +75,9 @@
7775
});
7876
7977
beforeUpdate(() => {
80-
if (tabChanged) {
78+
if (pauseChange) {
8179
autoScroll = false;
82-
tabChanged = false;
80+
pauseChange = false;
8381
}
8482
});
8583
@@ -117,7 +115,7 @@
117115
scrollbar.on("scroll", async (e) => {
118116
const curScrollTop = e.elements().scrollOffsetElement.scrollTop;
119117
if (curScrollTop <= 1) {
120-
tabChanged = true;
118+
pauseChange = true;
121119
if (item.type === contentLogTab) {
122120
await getChatContentLogs();
123121
} else if (item.type === conversationStateLogTab) {
@@ -161,7 +159,6 @@
161159
162160
if (newLogs.length > 0) {
163161
convStateLogs = [...newLogs, ...convStateLogs];
164-
lastestStateLog = convStateLogs.slice(-1)[0];
165162
}
166163
}
167164
@@ -180,7 +177,7 @@
180177
if (selectedTab === selected) {
181178
return;
182179
}
183-
tabChanged = true;
180+
pauseChange = true;
184181
selectedTab = selected;
185182
}
186183
</script>

src/routes/page/agent/reporting/+page.svelte renamed to src/routes/page/agent/reporting/[reportType]/+page.svelte

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,49 @@
11
<script>
2-
import { onMount, onDestroy } from 'svelte';
2+
import { onMount, onDestroy, afterUpdate } from 'svelte';
3+
import { derived } from 'svelte/store';
34
import { page } from '$app/stores';
45
import { _ } from 'svelte-i18n';
56
import { Card, CardBody, Col, Row } from '@sveltestrap/sveltestrap';
67
import HeadTitle from "$lib/common/HeadTitle.svelte";
78
import Breadcrumb from '$lib/common/Breadcrumb.svelte';
89
import { globalMenuStore } from '$lib/helpers/store';
10+
911
1012
/** @type {any} */
11-
let unsubscriber;
13+
let menuUnsubscribe;
14+
15+
/** @type {string?} */
16+
let label = '';
17+
18+
/** @type {string} */
19+
let curSlug = '';
20+
21+
const slug = derived(page, $page => $page.params.reportType);
22+
23+
const contentSubscribe = slug.subscribe(value => {
24+
if (curSlug && curSlug !== value) {
25+
location.reload();
26+
}
27+
curSlug = value;
28+
});
1229
1330
onMount(async () => {
14-
unsubscriber = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
31+
menuUnsubscribe = globalMenuStore.subscribe((/** @type {import('$pluginTypes').PluginMenuDefModel[]} */ menu) => {
1532
const url = getPathUrl();
16-
let data = menu.find(x => x.link === url)?.embeddingInfo || null;
17-
if (!data) {
18-
const found = menu.find(x => !!x.subMenu?.find(y => y.link === url));
19-
data = found?.subMenu?.find(x => x.link === url)?.embeddingInfo || null;
33+
let found = menu.find(x => x.link === url);
34+
label = found?.label || null;
35+
if (!found?.embeddingInfo) {
36+
const subFound = menu.find(x => !!x.subMenu?.find(y => y.link === url));
37+
found = subFound?.subMenu?.find(x => x.link === url);
38+
label = found?.label || null;
2039
}
21-
embed(data);
40+
embed(found?.embeddingInfo || null);
2241
});
2342
});
2443
2544
onDestroy(() => {
26-
unsubscriber?.();
45+
menuUnsubscribe?.();
46+
contentSubscribe?.();
2747
});
2848
2949
@@ -64,8 +84,8 @@
6484
};
6585
</script>
6686
67-
<HeadTitle title="{$_('Reporting')}" />
68-
<Breadcrumb title="{$_('Agent')}" pagetitle="{$_('Reporting')}" />
87+
<HeadTitle title="{$_(label || 'Reporting')}" />
88+
<Breadcrumb title="{$_('Agent')}" pagetitle="{$_(label || 'Reporting')}" />
6989
7090
<Row>
7191
<Col lg="12">

‎src/routes/page/conversation/[conversationId]/+page.svelte‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
let conversation;
1818
1919
onMount(async () => {
20-
conversation = await getConversation(params.conversationId);
20+
conversation = await getConversation(params.conversationId, true);
2121
});
2222
2323
function handleConversationDeletion() {
@@ -54,7 +54,12 @@
5454
</Row>
5555
<Row>
5656
<div class="mb-4">
57-
<Button class="btn btn-danger btn-hover rounded" on:click={() => handleConversationDeletion()}><i class="mdi mdi-delete"></i>{$_('Delete Conversation')}</Button>
57+
<Button
58+
class="btn btn-danger btn-hover rounded"
59+
on:click={() => handleConversationDeletion()}
60+
>
61+
<i class="mdi mdi-delete"></i>{$_('Delete Conversation')}
62+
</Button>
5863
</div>
5964
</Row>
6065
{/if}

‎src/routes/page/conversation/[conversationId]/conv-dialogs.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
1515
const maxTextLength = 4096;
1616
const duration = 1500;
17+
const dialogCount = 50;
1718
1819
/** @type {import('$conversationTypes').ChatResponseModel[]} */
1920
let dialogs = [];
@@ -29,7 +30,7 @@
2930
export let conversation;
3031
3132
onMount(async () => {
32-
dialogs = await getDialogs(conversation.id);
33+
dialogs = await getDialogs(conversation.id, dialogCount);
3334
});
3435
3536
/**

‎svelte.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const config = {
4949
"/page/agent",
5050
"/page/agent/router",
5151
"/page/agent/evaluator",
52-
"/page/agent/reporting",
52+
"/page/agent/reporting/[reportType]",
5353
"/page/agent/[agentId]",
5454
"/page/agent/[agentId]/build",
5555
"/page/agent/[agentId]/train",

0 commit comments

Comments
 (0)