Skip to content

Commit 4d03b9b

Browse files
author
Jicheng Lu
committed
refine nav
1 parent b8bbfe7 commit 4d03b9b

File tree

7 files changed

+78
-55
lines changed

7 files changed

+78
-55
lines changed

‎src/lib/common/nav-bar/NavItem.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,10 @@
9393
border: none !important;
9494
color: white !important;
9595
font-weight: 500;
96+
font-size: 1.2em;
9697
}
9798
9899
.tab-btn.active {
99-
color: var(--bs-primary) !important;
100+
background-color: var(--bs-primary) !important;
100101
}
101102
</style>

‎src/lib/helpers/types.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -302,7 +302,7 @@ IRichContent.prototype.text;
302302
*/
303303

304304
/**
305-
* @typedef {Object} StateChangeModel
305+
* @typedef {Object} MessageStateLogModel
306306
* @property {string} conversation_id - The conversation id.
307307
* @property {string} message_id - The message id.
308308
* @property {string} before_value - The value before change.
@@ -315,7 +315,7 @@ IRichContent.prototype.text;
315315
*/
316316

317317
/**
318-
* @typedef {Object} AgentQueueChangedModel
318+
* @typedef {Object} AgentQueueLogModel
319319
* @property {string} conversation_id - The conversation id.
320320
* @property {string} log - The log content.
321321
* @property {Date} created_at - The log sent time.
@@ -416,14 +416,14 @@ IRichContent.prototype.text;
416416
* Conversation state change log
417417
*
418418
* @callback OnStateChangeGenerated
419-
* @param {StateChangeModel} log
419+
* @param {MessageStateLogModel} log
420420
*/
421421

422422
/**
423423
* Agent queue changed log
424424
*
425425
* @callback OnAgentQueueChanged
426-
* @param {AgentQueueChangedModel} log
426+
* @param {AgentQueueLogModel} log
427427
*/
428428

429429
/**

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -428,6 +428,7 @@
428428
.state-change-container {
429429
margin-top: 0px;
430430
margin-bottom: 5px;
431+
padding-left: 10px;
431432

432433
.state-key {
433434
color: var(--bs-primary);
@@ -459,7 +460,7 @@
459460

460461
.log-content {
461462
text-align: center;
462-
font-size: 14px;
463+
font-size: 18px;
463464
margin-top: 2px;
464465
margin-bottom: 2px;
465466
}

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

Lines changed: 25 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -96,13 +96,13 @@
9696
let contentLogs = [];
9797
9898
/** @type {import('$types').ConversationStateLogModel[]} */
99-
let stateLogs = [];
99+
let convStateLogs = [];
100100
101-
/** @type {import('$types').StateChangeModel[]} */
102-
let stateChangeLogs = [];
101+
/** @type {import('$types').MessageStateLogModel[]} */
102+
let msgStateLogs = [];
103103
104-
/** @type {import('$types').AgentQueueChangedModel[]} */
105-
let agentQueueChangeLogs = [];
104+
/** @type {import('$types').AgentQueueLogModel[]} */
105+
let agentQueueLogs = [];
106106
107107
/** @type {import('$types').UserStateDetailModel[]} */
108108
let userAddStates = [];
@@ -349,24 +349,25 @@
349349
/** @param {import('$types').ConversationStateLogModel} log */
350350
function onConversationStateLogGenerated(log) {
351351
if (!isLoadStateLog) return;
352-
stateLogs.push({ ...log });
353-
stateLogs = stateLogs.map(x => { return { ...x }; });
352+
353+
convStateLogs.push({ ...log });
354+
convStateLogs = convStateLogs.map(x => { return { ...x }; });
354355
}
355356
356-
/** @param {import('$types').StateChangeModel} log */
357+
/** @param {import('$types').MessageStateLogModel} log */
357358
function onStateChangeGenerated(log) {
358359
if (!isLoadStateLog || log == null) return;
359360
360-
stateChangeLogs.push({ ...log });
361-
stateChangeLogs = stateChangeLogs.map(x => { return { ...x }; });
361+
msgStateLogs.push({ ...log });
362+
msgStateLogs = msgStateLogs.map(x => { return { ...x }; });
362363
}
363364
364-
/** @param {import('$types').AgentQueueChangedModel} log */
365+
/** @param {import('$types').AgentQueueLogModel} log */
365366
function onAgentQueueChanged(log) {
366367
if (!isLoadContentLog || log == null) return;
367368
368-
agentQueueChangeLogs.push({ ...log });
369-
agentQueueChangeLogs = agentQueueChangeLogs.map(x => { return { ...x }; });
369+
agentQueueLogs.push({ ...log });
370+
agentQueueLogs = agentQueueLogs.map(x => { return { ...x }; });
370371
}
371372
372373
/** @param {import('$types').ConversationSenderActionModel} data */
@@ -552,7 +553,7 @@
552553
isLoadContentLog = !isLoadContentLog;
553554
if (!isLoadContentLog) {
554555
contentLogs = [];
555-
agentQueueChangeLogs = [];
556+
agentQueueLogs = [];
556557
isContentLogClosed = true;
557558
} else {
558559
isContentLogClosed = false;
@@ -566,16 +567,16 @@
566567
function toggleStateLog() {
567568
isLoadStateLog = !isLoadStateLog;
568569
if (!isLoadStateLog) {
569-
stateLogs = [];
570-
stateChangeLogs = [];
570+
convStateLogs = [];
571+
msgStateLogs = [];
571572
isStateLogClosed = true;
572573
} else {
573574
isStateLogClosed = false;
574575
}
575576
}
576577
577578
function cleanStateLogScreen() {
578-
stateLogs = [];
579+
convStateLogs = [];
579580
}
580581
581582
function toggleUserAddStateModal() {
@@ -731,8 +732,8 @@
731732
}
732733
733734
if (isLoadStateLog) {
734-
const targetIdx = stateLogs.findIndex(x => x.message_id === messageId);
735-
stateLogs = stateLogs.filter((x, idx) => idx < targetIdx);
735+
const targetIdx = convStateLogs.findIndex(x => x.message_id === messageId);
736+
convStateLogs = convStateLogs.filter((x, idx) => idx < targetIdx);
736737
}
737738
}
738739
@@ -813,8 +814,8 @@
813814
}
814815
815816
function clearEventLogs() {
816-
stateChangeLogs = [];
817-
agentQueueChangeLogs = [];
817+
msgStateLogs = [];
818+
agentQueueLogs = [];
818819
}
819820
820821
function resetStorage() {
@@ -852,8 +853,8 @@
852853
{#if isLoadStateLog}
853854
<Pane size={30} minSize={20} maxSize={50} >
854855
<StateLog
855-
bind:stateLogs={stateLogs}
856-
bind:stateChangeLogs={stateChangeLogs}
856+
bind:convStateLogs={convStateLogs}
857+
bind:msgStateLogs={msgStateLogs}
857858
closeWindow={toggleStateLog}
858859
cleanScreen={cleanStateLogScreen}
859860
/>
@@ -1083,7 +1084,7 @@
10831084
<Pane size={30} minSize={20} maxSize={50}>
10841085
<ContentLog
10851086
bind:contentLogs={contentLogs}
1086-
bind:agentQueueChangeLogs={agentQueueChangeLogs}
1087+
bind:agentQueueLogs={agentQueueLogs}
10871088
closeWindow={toggleContentLog}
10881089
cleanScreen={cleanContentLogScreen}
10891090
/>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</script>
77

88
<div class="log-element queue-change-container">
9-
<div class="log-content queue-change-content">
9+
<div class="log-content">
1010
<span class="text-danger">{data?.log}</span>
1111
</div>
1212
</div>

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

Lines changed: 25 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<script>
22
import 'overlayscrollbars/overlayscrollbars.css';
33
import { OverlayScrollbars } from 'overlayscrollbars';
4-
import { afterUpdate, onDestroy, onMount } from 'svelte';
4+
import { afterUpdate, beforeUpdate, onDestroy, onMount } from 'svelte';
55
import { page } from '$app/stores';
66
import { GetContentLogs } from '$lib/services/logging-service';
77
import NavBar from '$lib/common/nav-bar/NavBar.svelte';
88
import NavItem from '$lib/common/nav-bar/NavItem.svelte';
99
import ContentLogElement from './content-log-element.svelte';
10-
import AgentQueueChangeElement from './agent-queue-change-element.svelte';
10+
import AgentQueueLogElement from './agent-queue-log-element.svelte';
1111
1212
const contentLogTab = 1;
1313
const agentQueueLogTab = 2;
1414
1515
/** @type {import('$types').ConversationContentLogModel[]} */
1616
export let contentLogs = [];
1717
18-
/** @type {import('$types').AgentQueueChangedModel[]} */
19-
export let agentQueueChangeLogs = [];
18+
/** @type {import('$types').AgentQueueLogModel[]} */
19+
export let agentQueueLogs = [];
2020
2121
/** @type {() => void} */
2222
export let closeWindow;
@@ -26,6 +26,7 @@
2626
2727
/** @type {any[]} */
2828
let scrollbars = [];
29+
/** @type {number} */
2930
let selectedTab = contentLogTab;
3031
3132
const options = {
@@ -54,6 +55,10 @@
5455
refresh();
5556
});
5657
58+
beforeUpdate(() => {
59+
// console.log('before update: ', tabs);
60+
});
61+
5762
afterUpdate(() => {
5863
refresh();
5964
});
@@ -84,6 +89,12 @@
8489
cleanLogs();
8590
cleanScreen && cleanScreen();
8691
}
92+
93+
94+
/** @param {number} tab */
95+
function handleTabClick(tab) {
96+
selectedTab = tab;
97+
}
8798
</script>
8899

89100
<div class="chat-log">
@@ -109,18 +120,18 @@
109120
</div>
110121
</div>
111122

112-
<div class="content-log-scrollbar log-list padding-side log-content" class:hide={selectedTab != contentLogTab}>
123+
<div class="content-log-scrollbar log-list padding-side log-content" class:hide={selectedTab !== contentLogTab}>
113124
<ul>
114125
{#each contentLogs as log}
115126
<ContentLogElement data={log} />
116127
{/each}
117128
</ul>
118129
</div>
119130

120-
<div class="queue-change-log-scrollbar log-list log-content" class:hide={selectedTab != agentQueueLogTab}>
131+
<div class="queue-change-log-scrollbar log-list log-content" class:hide={selectedTab !== agentQueueLogTab}>
121132
<ul>
122-
{#each agentQueueChangeLogs as log}
123-
<AgentQueueChangeElement data={log} />
133+
{#each agentQueueLogs as log}
134+
<AgentQueueLogElement data={log} />
124135
{/each}
125136
</ul>
126137
</div>
@@ -131,17 +142,19 @@
131142
navBtnId={'content-log-tab'}
132143
dataBsTarget={'#content-log-tab-pane'}
133144
ariaControls={'content-log-tab-pane'}
134-
active={selectedTab == contentLogTab}
135145
navBtnText={'Content Log'}
136-
onClick={() => selectedTab = contentLogTab}
146+
disabled={selectedTab === contentLogTab}
147+
active={selectedTab === contentLogTab}
148+
onClick={() => handleTabClick(contentLogTab)}
137149
/>
138150
<NavItem
139151
navBtnId={'agent-queue-log-tab'}
140152
dataBsTarget={'#agent-queue-log-tab-pane'}
141153
ariaControls={'agent-queue-log-tab-pane'}
142-
active={selectedTab == agentQueueLogTab}
143154
navBtnText={'Agent Queue'}
144-
onClick={() => selectedTab = agentQueueLogTab}
155+
disabled={selectedTab === agentQueueLogTab}
156+
active={selectedTab === agentQueueLogTab}
157+
onClick={() => handleTabClick(agentQueueLogTab)}
145158
/>
146159
</NavBar>
147160
</div>

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

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@
1313
const msgStateLogTab = 2;
1414
1515
/** @type {any[]} */
16-
export let stateLogs = [];
16+
export let convStateLogs = [];
1717
1818
/** @type {any[]} */
19-
export let stateChangeLogs = [];
19+
export let msgStateLogs = [];
2020
2121
/** @type {() => void} */
2222
export let closeWindow;
@@ -42,7 +42,7 @@
4242
4343
onMount(async () => {
4444
const conversationId = $page.params.conversationId;
45-
stateLogs = await GetStateLogs(conversationId);
45+
convStateLogs = await GetStateLogs(conversationId);
4646
4747
const scrollbarElements = [
4848
document.querySelector('.conv-state-log-scrollbar'),
@@ -77,13 +77,18 @@
7777
}
7878
7979
function cleanLogs() {
80-
stateLogs = [];
80+
convStateLogs = [];
8181
}
8282
8383
function handleCleanScreen() {
8484
cleanLogs();
8585
cleanScreen && cleanScreen();
8686
}
87+
88+
/** @param {number} tab */
89+
function handleTabClick(tab) {
90+
selectedTab = tab;
91+
}
8792
</script>
8893

8994
<div class="chat-log">
@@ -108,17 +113,17 @@
108113
</button>
109114
</div>
110115
</div>
111-
<div class="conv-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab != convStateLogTab}>
116+
<div class="conv-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab !== convStateLogTab}>
112117
<ul>
113-
{#each stateLogs as log}
118+
{#each convStateLogs as log}
114119
<ConversationStateLogElement data={log} />
115120
{/each}
116121
</ul>
117122
</div>
118123

119-
<div class="msg-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab != msgStateLogTab}>
124+
<div class="msg-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab !== msgStateLogTab}>
120125
<ul>
121-
{#each stateChangeLogs as log}
126+
{#each msgStateLogs as log}
122127
<MessageStateLogElement data={log} />
123128
{/each}
124129
</ul>
@@ -130,17 +135,19 @@
130135
navBtnId={'conv-state-log-tab'}
131136
dataBsTarget={'#conv-state-log-tab-pane'}
132137
ariaControls={'conv-state-log-tab-pane'}
133-
active={selectedTab == convStateLogTab}
134138
navBtnText={'Conversation States'}
135-
onClick={() => selectedTab = convStateLogTab}
139+
disabled={selectedTab === convStateLogTab}
140+
active={selectedTab === convStateLogTab}
141+
onClick={() => handleTabClick(convStateLogTab)}
136142
/>
137143
<NavItem
138144
navBtnId={'msg-state-log-tab'}
139145
dataBsTarget={'#msg-state-log-tab-pane'}
140146
ariaControls={'msg-state-log-tab-pane'}
141-
active={selectedTab == msgStateLogTab}
142147
navBtnText={'Message States'}
143-
onClick={() => selectedTab = msgStateLogTab}
148+
disabled={selectedTab === msgStateLogTab}
149+
active={selectedTab === msgStateLogTab}
150+
onClick={() => handleTabClick(msgStateLogTab)}
144151
/>
145152
</NavBar>
146153
</div>

0 commit comments

Comments
 (0)