Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 19978b5

Browse files
Oceania2018Oceania2018
authored
Merge pull request #72 from iceljc/features/refine-chat-window
Features/refine chat window
2 parents b30a2ee + 0ddccc9 commit 19978b5

File tree

7 files changed

+109
-111
lines changed

7 files changed

+109
-111
lines changed

‎src/lib/helpers/types.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,6 +277,7 @@ IRichContent.prototype.text;
277277
* @property {string} message_id - The message id.
278278
* @property {Object} states - The states content.
279279
* @property {Date} created_at - The states sent time.
280+
* @property {number} expand_level - The object expand level
280281
*/
281282

282283
/**

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

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -88,29 +88,22 @@
8888
display: flex;
8989
justify-content: flex-end;
9090
align-items: center;
91-
gap: 5px;
9291
}
9392

9493
.user-chat-nav {
95-
.chat-nav-element {
96-
align-self: stretch;
97-
min-width: 30px;
98-
min-height: 30px;
99-
100-
.nav-btn {
101-
color: var(--#{$prefix}body-color);
102-
box-shadow: none;
103-
padding: 0;
104-
background-color: var(--#{$prefix}light);
105-
border-radius: 50%;
106-
border: none;
107-
width: 100%;
108-
height: 100%;
109-
}
110-
111-
button {
112-
height: 100%;
113-
}
94+
align-self: stretch;
95+
min-width: 30px;
96+
min-height: 30px;
97+
98+
.nav-btn {
99+
color: var(--#{$prefix}body-color);
100+
box-shadow: none;
101+
padding: 0;
102+
background-color: var(--#{$prefix}light);
103+
border-radius: 50%;
104+
border: none;
105+
width: 40px;
106+
height: 40px;
114107
}
115108

116109
.dropdown {
@@ -355,20 +348,17 @@
355348
}
356349

357350
.log-content {
358-
font-size: 15px;
351+
font-size: 17px;
359352
color: white;
360353

361354
li {
362355
margin-top: 5px;
363356
margin-bottom: 5px;
364-
.property {
365-
padding-left: 10px;
366-
}
367357
}
368358

369359
span {
370360
color: white;
371-
font-size: 15px;
361+
font-size: 16px;
372362
}
373363
}
374364

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

Lines changed: 78 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -84,19 +84,14 @@
8484
/** @type {boolean} */
8585
let isLoadContentLog = false;
8686
let isLoadStateLog = false;
87-
let isContentLogClosed = false;
88-
let isStateLogClosed = false;
87+
let isContentLogClosed = false; // initial condition
88+
let isStateLogClosed = false; // initial condition
8989
let isOpenEditMsgModal = false;
9090
let isOpenAddStateModal = false;
9191
let isSendingMsg = false;
9292
let isThinking = false;
9393
let isLite = false;
9494
let isFrame = false;
95-
96-
/** @type {any} */
97-
let contentLogComponent;
98-
/** @type {any} */
99-
let stateLogComponent;
10095
10196
onMount(async () => {
10297
dialogs = await GetDialogs(params.conversationId);
@@ -119,16 +114,8 @@
119114
function resizeChatWindow() {
120115
isLite = Viewport.Width <= screenWidthThreshold;
121116
if (!isLite) {
122-
if (isContentLogClosed) {
123-
isLoadContentLog = false;
124-
} else {
125-
isLoadContentLog = true;
126-
}
127-
if (isStateLogClosed) {
128-
isLoadStateLog = false;
129-
} else {
130-
isLoadStateLog = true;
131-
}
117+
isLoadContentLog = !isContentLogClosed;
118+
isLoadStateLog = !isStateLogClosed;
132119
} else {
133120
isLoadContentLog = false;
134121
isLoadStateLog = false;
@@ -137,6 +124,14 @@
137124
}
138125
}
139126
127+
function initChatView() {
128+
isFrame = $page.url.searchParams.get('isFrame') === 'true';
129+
// initial condition
130+
isContentLogClosed = false;
131+
isStateLogClosed = false;
132+
resizeChatWindow();
133+
}
134+
140135
/** @param {import('$types').ChatResponseModel[]} dialogs */
141136
function initUserSentMessages(dialogs) {
142137
const curConvMessages = dialogs?.filter(x => x.sender?.role != UserRole.Assistant).map(x => {
@@ -186,11 +181,6 @@
186181
return messages?.slice(-messageLimit) || [];
187182
}
188183
189-
function initChatView() {
190-
isFrame = $page.url.searchParams.get('isFrame') === 'true';
191-
resizeChatWindow();
192-
}
193-
194184
/** @param {import('$types').ChatResponseModel[]} dialogs */
195185
function findLastBotMessage(dialogs) {
196186
const lastMsg = dialogs.slice(-1)[0];
@@ -543,12 +533,22 @@
543533
544534
/** @param {string} messageId */
545535
function truncateLogs(messageId) {
546-
if (contentLogComponent && contentLogComponent.onDeleteMessage) {
547-
contentLogComponent.onDeleteMessage(messageId);
536+
if (isLoadContentLog) {
537+
const targetIdx = contentLogs.findIndex(x => x.message_id === messageId);
538+
if (targetIdx < 0) {
539+
contentLogs = [];
540+
} else {
541+
contentLogs = contentLogs.filter((x, idx) => idx < targetIdx);
542+
}
548543
}
549544
550-
if (stateLogComponent && stateLogComponent.onDeleteMessage) {
551-
stateLogComponent.onDeleteMessage(messageId);
545+
if (isLoadStateLog) {
546+
const targetIdx = stateLogs.findIndex(x => x.message_id === messageId);
547+
if (targetIdx < 0) {
548+
stateLogs = [];
549+
} else {
550+
stateLogs = stateLogs.filter((x, idx) => idx < targetIdx);
551+
}
552552
}
553553
}
554554
@@ -557,17 +557,60 @@
557557
if (!!!messageId || isLite) return;
558558
559559
highlightChatMessage(messageId);
560+
highlightStateLog(messageId);
561+
autoScrollToTargetLog(messageId);
562+
}
563+
564+
/** @param {string} messageId */
565+
function highlightChatMessage(messageId) {
566+
const targets = document.querySelectorAll('.user-msg');
567+
targets.forEach(elm => {
568+
if (elm.id === `user-msg-${messageId}`) {
569+
elm.classList.add('bg-primary', 'text-white');
570+
} else {
571+
elm.classList.remove('bg-primary', 'text-white');
572+
}
573+
});
574+
}
575+
576+
/** @param {string} messageId */
577+
function highlightStateLog(messageId) {
578+
if (!isLoadStateLog) return;
579+
580+
stateLogs = stateLogs.map(item => {
581+
if (item.message_id === messageId) {
582+
item.expand_level = 1;
583+
} else {
584+
item.expand_level = 0;
585+
}
586+
return item;
587+
});
588+
const targets = document.querySelectorAll('.state-log-item');
589+
targets.forEach(elm => {
590+
const contentElm = elm.querySelector('.log-content');
591+
if (!contentElm) return;
592+
593+
if (elm.id === `state-log-${messageId}`) {
594+
contentElm.classList.add('border', 'border-warning', 'rounded', 'p-1');
595+
} else {
596+
contentElm.classList.remove('border', 'border-warning', 'rounded', 'p-1');
597+
}
598+
});
599+
}
600+
601+
/** @param {string} messageId */
602+
function autoScrollToTargetLog(messageId) {
560603
const elements = [];
561604
const contentLogElm = document.querySelector(`#content-log-${messageId}`);
562-
if (!!contentLogElm) {
605+
if (isLoadContentLog && !!contentLogElm) {
563606
elements.push({
564607
elm: contentLogElm,
565608
wrapperName: '.content-log-scrollbar'
566609
});
567610
}
568611
569612
const stateLogElm = document.querySelector(`#state-log-${messageId}`);
570-
if (!!stateLogElm) {
613+
if (isLoadStateLog && !!stateLogElm) {
571614
elements.push({
572615
elm: stateLogElm,
573616
wrapperName: '.state-log-scrollbar'
@@ -582,18 +625,6 @@
582625
});
583626
}
584627
585-
/** @param {string} messageId */
586-
function highlightChatMessage(messageId) {
587-
const targets = document.querySelectorAll('.user-msg');
588-
targets.forEach(elm => {
589-
if (elm.id === `user-msg-${messageId}`) {
590-
elm.classList.add('bg-primary', 'text-white');
591-
} else {
592-
elm.classList.remove('bg-primary', 'text-white');
593-
}
594-
});
595-
}
596-
597628
function openFullScreen() {
598629
window.open($page.url.pathname);
599630
}
@@ -627,8 +658,7 @@
627658
{#if isLoadStateLog}
628659
<Pane size={30} minSize={20} maxSize={50} >
629660
<StateLog
630-
bind:this={stateLogComponent}
631-
stateLogs={stateLogs}
661+
bind:stateLogs={stateLogs}
632662
closeWindow={toggleStateLog}
633663
cleanScreen={cleanStateLogScreen}
634664
/>
@@ -648,17 +678,17 @@
648678
649679
<div class="col-md-8 col-5">
650680
<ul class="list-inline user-chat-nav user-chat-nav-flex mb-0">
651-
{#if isFrame}
652-
<li class="chat-nav-element">
681+
{#if 1}
682+
<li class="list-inline-item">
653683
<button
654-
class="btn btn-secondary nav-btn dropdown-toggle"
684+
class="btn btn-secondary btn-rounded btn-sm"
655685
on:click={() => openFullScreen()}
656686
>
657687
<i class="bx bx-fullscreen" />
658688
</button>
659689
</li>
660690
{/if}
661-
<li class="chat-nav-element">
691+
<li class="list-inline-item">
662692
<Dropdown>
663693
<DropdownToggle class="nav-btn dropdown-toggle">
664694
<i class="bx bx-dots-horizontal-rounded" />
@@ -690,7 +720,7 @@
690720
</Dropdown>
691721
</li>
692722
693-
<li class="chat-nav-element d-md-inline-block">
723+
<li class="list-inline-item d-md-inline-block">
694724
<button
695725
class="btn btn-primary btn-rounded btn-sm chat-send waves-effect waves-light"
696726
on:click={() => endChat()}
@@ -835,8 +865,7 @@
835865
{#if isLoadContentLog}
836866
<Pane size={30} minSize={20} maxSize={50}>
837867
<ContentLog
838-
bind:this={contentLogComponent}
839-
contentLogs={contentLogs}
868+
bind:contentLogs={contentLogs}
840869
closeWindow={toggleContentLog}
841870
cleanScreen={cleanContentLogScreen}
842871
/>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
</Button>
5151
{/if}
5252

53-
{#if data.message_id}
53+
{#if data.message_id && data.source === ContentLogSource.UserInput}
5454
<div>{`MessageId: ${data.message_id}`}</div>
5555
{/if}
5656
</div>

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

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,8 @@
1515
/** @type {() => void} */
1616
export let cleanScreen;
1717
18-
export const onDeleteMessage = (/** @type {string} */ messageId) => {
19-
const targetIdx = allLogs.findIndex(x => x.message_id === messageId);
20-
allLogs = allLogs.filter((x, idx) => idx < targetIdx);
21-
}
22-
2318
// @ts-ignore
2419
let scrollbar;
25-
/** @type {import('$types').ConversationContentLogModel[]} */
26-
let initLogs = [];
27-
28-
$: allLogs = [...initLogs, ...contentLogs];
2920
3021
const options = {
3122
scrollbars: {
@@ -41,7 +32,7 @@
4132
4233
onMount(async () => {
4334
const conversationId = $page.params.conversationId;
44-
initLogs = await GetContentLogs(conversationId);
35+
contentLogs = await GetContentLogs(conversationId);
4536
4637
const scrollElement = document.querySelector('.content-log-scrollbar');
4738
scrollbar = OverlayScrollbars(scrollElement, options);
@@ -64,20 +55,13 @@
6455
}
6556
6657
function cleanLogs() {
67-
initLogs = [];
6858
contentLogs = [];
6959
}
7060
7161
function handleCleanScreen() {
7262
cleanLogs();
7363
cleanScreen && cleanScreen();
7464
}
75-
76-
// /** @param {string} messageId */
77-
// function onDeleteMessage(messageId) {
78-
// const targetIdx = allLogs.findIndex(x => x.message_id === messageId);
79-
// allLogs = allLogs.filter((x, idx) => idx < targetIdx);
80-
// }
8165
</script>
8266

8367
<div class="chat-log">
@@ -100,7 +84,7 @@
10084
</div>
10185
<div class="content-log-scrollbar log-list padding-side">
10286
<ul>
103-
{#each allLogs as log}
87+
{#each contentLogs as log}
10488
<ContentLogElement data={log} />
10589
{/each}
10690
</ul>

0 commit comments

Comments
 (0)