Skip to content

Commit e650b63

Browse files
author
Jicheng Lu
committed
add nav bar in state log
1 parent 7f7534d commit e650b63

File tree

5 files changed

+69
-46
lines changed

5 files changed

+69
-46
lines changed

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

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -346,6 +346,7 @@
346346
.log-flex {
347347
display: flex;
348348
flex-direction: column;
349+
height: 100%;
349350
}
350351

351352
.log-header {
@@ -376,18 +377,18 @@
376377
justify-content: space-between;
377378
}
378379

379-
.state-log-section {
380-
height: 90vh;
381-
}
380+
// .state-log-section {
381+
// height: 90vh;
382+
// }
382383

383-
.state-change-log-list {
384-
height: 100%;
385-
}
384+
// .state-change-log-list {
385+
// height: 100%;
386+
// }
386387

387-
.state-log-list {
388-
height: 100%;
389-
padding-top: 10px;
390-
}
388+
// .state-log-list {
389+
// height: 100%;
390+
// padding-top: 10px;
391+
// }
391392

392393
.log-list {
393394
background-color: black;

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
<script>
22
import 'overlayscrollbars/overlayscrollbars.css';
33
import { OverlayScrollbars } from 'overlayscrollbars';
4-
import { afterUpdate, onDestroy, onMount, tick } from 'svelte';
5-
import ContentLogElement from './content-log-element.svelte';
4+
import { afterUpdate, onDestroy, onMount } from 'svelte';
65
import { page } from '$app/stores';
76
import { GetContentLogs } from '$lib/services/logging-service';
87
import NavBar from '$lib/common/nav-bar/NavBar.svelte';
98
import NavItem from '$lib/common/nav-bar/NavItem.svelte';
9+
import ContentLogElement from './content-log-element.svelte';
1010
import AgentQueueChangeElement from './agent-queue-change-element.svelte';
1111
12+
const contentLogTab = 1;
13+
const agentQueueLogTab = 2;
14+
1215
/** @type {import('$types').ConversationContentLogModel[]} */
1316
export let contentLogs = [];
1417
@@ -23,10 +26,7 @@
2326
2427
/** @type {any[]} */
2528
let scrollbars = [];
26-
let selectedTab = 1;
27-
28-
const contentLogTab = 1;
29-
const agentQueueLogTab = 2;
29+
let selectedTab = contentLogTab;
3030
3131
const options = {
3232
scrollbars: {
@@ -87,7 +87,7 @@
8787
</script>
8888

8989
<div class="chat-log">
90-
<div class="card mb-0 log-background log-flex" style="height: 100%;">
90+
<div class="card mb-0 log-background log-flex">
9191
<div class="log-close-btn padding-side log-header">
9292
<div>
9393
<button

‎src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log-element.svelte‎ renamed to ‎src/routes/chat/[agentId]/[conversationId]/stateLogs/conversation-state-log-element.svelte‎

File renamed without changes.

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

File renamed without changes.

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

Lines changed: 51 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
22
import 'overlayscrollbars/overlayscrollbars.css';
33
import { OverlayScrollbars } from 'overlayscrollbars';
44
import { afterUpdate, onDestroy, onMount } from 'svelte';
5-
import { Pane, Splitpanes } from 'svelte-splitpanes';
65
import { page } from '$app/stores';
76
import { GetStateLogs } from '$lib/services/logging-service';
8-
import StateLogElement from './state-log-element.svelte';
9-
import StateChangeElement from './state-change-element.svelte';
7+
import NavBar from '$lib/common/nav-bar/NavBar.svelte';
8+
import NavItem from '$lib/common/nav-bar/NavItem.svelte';
9+
import ConversationStateLogElement from './conversation-state-log-element.svelte';
10+
import MessageStateLogElement from './message-state-log-element.svelte';
11+
12+
const convStateLogTab = 1;
13+
const msgStateLogTab = 2;
1014
1115
/** @type {any[]} */
1216
export let stateLogs = [];
@@ -22,6 +26,7 @@
2226
2327
/** @type {any} */
2428
let scrollbars = [];
29+
let selectedTab = convStateLogTab;
2530
2631
const options = {
2732
scrollbars: {
@@ -40,8 +45,8 @@
4045
stateLogs = await GetStateLogs(conversationId);
4146
4247
const scrollbarElements = [
43-
document.querySelector('.state-log-scrollbar'),
44-
document.querySelector('.state-change-scrollbar')
48+
document.querySelector('.conv-state-log-scrollbar'),
49+
document.querySelector('.msg-state-log-scrollbar')
4550
].filter(Boolean);
4651
scrollbarElements.forEach(elem => {
4752
scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
@@ -58,6 +63,10 @@
5863
});
5964
6065
function refresh() {
66+
scrollToBottom();
67+
}
68+
69+
function scrollToBottom() {
6170
// @ts-ignore
6271
scrollbars.forEach(scrollbar => {
6372
setTimeout(() => {
@@ -78,8 +87,8 @@
7887
</script>
7988

8089
<div class="chat-log">
81-
<div class="card mb-0 log-background" style="height: 100%;">
82-
<div class="log-close-btn padding-side">
90+
<div class="card mb-0 log-background log-flex">
91+
<div class="log-close-btn padding-side log-header">
8392
<div>
8493
<button
8594
type="button"
@@ -99,28 +108,41 @@
99108
</button>
100109
</div>
101110
</div>
102-
<div class="state-log-section">
103-
<Splitpanes horizontal>
104-
<Pane size={35} minSize={20} maxSize={80}>
105-
<div class="state-change-scrollbar state-change-log-list log-list padding-side">
106-
<ul>
107-
{#each stateChangeLogs as log}
108-
<StateChangeElement data={log} />
109-
{/each}
110-
</ul>
111-
</div>
112-
</Pane>
113-
<Pane size={65} minSize={20} maxSize={80}>
114-
<div class="state-log-scrollbar state-log-list log-list padding-side">
115-
<ul>
116-
{#each stateLogs as log}
117-
<StateLogElement data={log} />
118-
{/each}
119-
</ul>
120-
</div>
121-
</Pane>
122-
</Splitpanes>
111+
<div class="conv-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab != convStateLogTab}>
112+
<ul>
113+
{#each stateLogs as log}
114+
<ConversationStateLogElement data={log} />
115+
{/each}
116+
</ul>
117+
</div>
118+
119+
<div class="msg-state-log-scrollbar log-list padding-side log-content" class:hide={selectedTab != msgStateLogTab}>
120+
<ul>
121+
{#each stateChangeLogs as log}
122+
<MessageStateLogElement data={log} />
123+
{/each}
124+
</ul>
125+
</div>
126+
127+
<div class="log-header">
128+
<NavBar id={'state-log-container'}>
129+
<NavItem
130+
navBtnId={'conv-state-log-tab'}
131+
dataBsTarget={'#conv-state-log-tab-pane'}
132+
ariaControls={'conv-state-log-tab-pane'}
133+
active={selectedTab == convStateLogTab}
134+
navBtnText={'Conversation States'}
135+
onClick={() => selectedTab = convStateLogTab}
136+
/>
137+
<NavItem
138+
navBtnId={'msg-state-log-tab'}
139+
dataBsTarget={'#msg-state-log-tab-pane'}
140+
ariaControls={'msg-state-log-tab-pane'}
141+
active={selectedTab == msgStateLogTab}
142+
navBtnText={'Message States'}
143+
onClick={() => selectedTab = msgStateLogTab}
144+
/>
145+
</NavBar>
123146
</div>
124-
125147
</div>
126148
</div>

0 commit comments

Comments
 (0)