Skip to content

Commit 7f7534d

Browse files
author
Jicheng Lu
committed
add nav bar
1 parent 5de1edb commit 7f7534d

File tree

7 files changed

+199
-26
lines changed

7 files changed

+199
-26
lines changed

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script>
2+
3+
/** @type {string} */
4+
export let id = "nav-bar";
5+
6+
/** @type {string} */
7+
export let role = "tablist";
8+
9+
/** @type {string} */
10+
export let containerClasses = "";
11+
12+
/** @type {string} */
13+
export let containerStyles = "";
14+
15+
/** @type {boolean} */
16+
export let disableDefaultStyles = false;
17+
</script>
18+
19+
<ul
20+
class="{disableDefaultStyles ? '' : 'nav nav-tabs nav-container'} {containerClasses}"
21+
style={`${containerStyles}`}
22+
id={id}
23+
role={role}
24+
>
25+
<slot />
26+
</ul>
27+
28+
<style>
29+
.nav-container {
30+
height: 100%;
31+
}
32+
</style>

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<script>
2+
3+
/** @type {string} */
4+
export let containerClasses = "";
5+
6+
/** @type {string} */
7+
export let containerStyles = "";
8+
9+
/** @type {boolean} */
10+
export let disableDefaultContainerStyles = false;
11+
12+
/** @type {string} */
13+
export let containerRole = "presentation";
14+
15+
/** @type {string} */
16+
export let containerId = "nav-item";
17+
18+
/** @type {string} */
19+
export let navBtnClasses = "";
20+
21+
/** @type {string} */
22+
export let navBtnStyles = "";
23+
24+
/** @type {boolean} */
25+
export let disableDefaultNavBtnStyles = false;
26+
27+
/** @type {string} */
28+
export let navBtnRole = "tab";
29+
30+
/** @type {string} */
31+
export let navBtnId = "nav-item-id";
32+
33+
/** @type {string} */
34+
export let navBtnText;
35+
36+
/** @type {boolean} */
37+
export let active = false;
38+
39+
/** @type {boolean} */
40+
export let disabled = false;
41+
42+
/** @type {string} */
43+
export let dataBsToggle = "tab";
44+
45+
/** @type {string} */
46+
export let dataBsTarget = "#nav-item-pane";
47+
48+
/** @type {string} */
49+
export let ariaControls = "nav-item-tab-pane";
50+
51+
/** @type {() => void} */
52+
export let onClick = () => {};
53+
54+
/** @param {any} e */
55+
function handleTabClick(e) {
56+
e.preventDefault();
57+
onClick?.();
58+
}
59+
</script>
60+
61+
<li
62+
class="{disableDefaultContainerStyles ? '' : 'nav-item tab-item'} {containerClasses}"
63+
style={`${containerStyles}`}
64+
id={containerId}
65+
role={containerRole}
66+
>
67+
<button
68+
class="{disableDefaultNavBtnStyles ? '' : 'nav-link tab-btn'} {navBtnClasses}"
69+
class:active={active}
70+
style={`${navBtnStyles}`}
71+
id={navBtnId}
72+
type="button"
73+
role={navBtnRole}
74+
data-bs-toggle={dataBsToggle}
75+
data-bs-target={dataBsTarget}
76+
aria-controls={ariaControls}
77+
aria-selected={`${active ? "true" : "false"}`}
78+
disabled={disabled}
79+
on:click={(e) => handleTabClick(e)}
80+
>
81+
{navBtnText}
82+
</button>
83+
</li>
84+
85+
<style>
86+
.tab-item {
87+
flex: 0 1 50%;
88+
}
89+
90+
.tab-btn {
91+
width: 100%;
92+
height: 100%;
93+
border: none !important;
94+
color: white !important;
95+
font-weight: 500;
96+
}
97+
98+
.tab-btn.active {
99+
color: var(--bs-primary) !important;
100+
}
101+
</style>

‎src/lib/scss/app.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ File: Main Css File
9191

9292
// Common
9393
@import "custom/common/animation";
94+
@import "custom/common/display";
9495

9596
//RTL
9697
// @import "custom/rtl/bootstrap-rtl";

‎src/lib/scss/custom/common/_display.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.hide {
2+
display: none !important;
3+
}

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

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,19 @@
343343
.chat-log {
344344
height: 100vh;
345345

346+
.log-flex {
347+
display: flex;
348+
flex-direction: column;
349+
}
350+
351+
.log-header {
352+
flex: 5%;
353+
}
354+
355+
.log-content {
356+
flex: 90%
357+
}
358+
346359
.padding-side {
347360
padding-left: 20px;
348361
padding-right: 20px;
@@ -361,17 +374,12 @@
361374
position: sticky;
362375
display: flex;
363376
justify-content: space-between;
364-
height: 7vh;
365377
}
366378

367379
.state-log-section {
368380
height: 90vh;
369381
}
370382

371-
.content-log-list {
372-
height: 90vh;
373-
}
374-
375383
.state-change-log-list {
376384
height: 100%;
377385
}
@@ -380,10 +388,6 @@
380388
height: 100%;
381389
padding-top: 10px;
382390
}
383-
384-
.queue-change-log-list {
385-
width: 100%;
386-
}
387391

388392
.log-list {
389393
background-color: black;
@@ -463,6 +467,7 @@
463467
.queue-change-container {
464468
margin-top: 0px;
465469
margin-bottom: 0px;
470+
padding: 0px 10px;
466471

467472
.log-content {
468473
text-align: center;

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -804,9 +804,10 @@
804804
const logScroll = OverlayScrollbars(scrollElement, options);
805805
const { viewport } = logScroll.elements();
806806
let offsetTop = item.elm.offsetTop;
807-
if (item.wrapperName === stateLogWrapper) {
808-
offsetTop -= offset;
809-
}
807+
// if (item.wrapperName === stateLogWrapper) {
808+
// offsetTop -= offset;
809+
// }
810+
offsetTop -= offset + 10;
810811
viewport.scrollTo({ top: offsetTop, behavior: 'smooth' });
811812
}
812813
});

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

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@
55
import ContentLogElement from './content-log-element.svelte';
66
import { page } from '$app/stores';
77
import { GetContentLogs } from '$lib/services/logging-service';
8+
import NavBar from '$lib/common/nav-bar/NavBar.svelte';
9+
import NavItem from '$lib/common/nav-bar/NavItem.svelte';
810
import AgentQueueChangeElement from './agent-queue-change-element.svelte';
911
1012
/** @type {import('$types').ConversationContentLogModel[]} */
@@ -21,6 +23,10 @@
2123
2224
/** @type {any[]} */
2325
let scrollbars = [];
26+
let selectedTab = 1;
27+
28+
const contentLogTab = 1;
29+
const agentQueueLogTab = 2;
2430
2531
const options = {
2632
scrollbars: {
@@ -45,7 +51,6 @@
4551
scrollbarElements.forEach(elem => {
4652
scrollbars = [ ...scrollbars, OverlayScrollbars(elem, options) ];
4753
});
48-
4954
refresh();
5055
});
5156
@@ -57,7 +62,11 @@
5762
cleanLogs();
5863
});
5964
60-
async function refresh() {
65+
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" style="height: 100%;">
91+
<div class="log-close-btn padding-side log-header">
8392
<div>
8493
<button
8594
type="button"
@@ -89,15 +98,6 @@
8998
<i class="bx bx-trash"></i>
9099
</button>
91100
</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-
101101
<div>
102102
<button
103103
type="button"
@@ -108,12 +108,42 @@
108108
</button>
109109
</div>
110110
</div>
111-
<div class="content-log-scrollbar content-log-list log-list padding-side">
111+
112+
<div class="content-log-scrollbar log-list padding-side log-content" class:hide={selectedTab != contentLogTab}>
112113
<ul>
113114
{#each contentLogs as log}
114115
<ContentLogElement data={log} />
115116
{/each}
116117
</ul>
117118
</div>
119+
120+
<div class="queue-change-log-scrollbar log-list log-content" class:hide={selectedTab != agentQueueLogTab}>
121+
<ul>
122+
{#each agentQueueChangeLogs as log}
123+
<AgentQueueChangeElement data={log} />
124+
{/each}
125+
</ul>
126+
</div>
127+
128+
<div class="log-header">
129+
<NavBar id={'content-log-container'}>
130+
<NavItem
131+
navBtnId={'content-log-tab'}
132+
dataBsTarget={'#content-log-tab-pane'}
133+
ariaControls={'content-log-tab-pane'}
134+
active={selectedTab == contentLogTab}
135+
navBtnText={'Content Log'}
136+
onClick={() => selectedTab = contentLogTab}
137+
/>
138+
<NavItem
139+
navBtnId={'agent-queue-log-tab'}
140+
dataBsTarget={'#agent-queue-log-tab-pane'}
141+
ariaControls={'agent-queue-log-tab-pane'}
142+
active={selectedTab == agentQueueLogTab}
143+
navBtnText={'Agent Queue'}
144+
onClick={() => selectedTab = agentQueueLogTab}
145+
/>
146+
</NavBar>
147+
</div>
118148
</div>
119149
</div>

0 commit comments

Comments
 (0)