Skip to content

Commit

Permalink
Merge pull request #72 from iceljc/features/refine-chat-window
Browse files Browse the repository at this point in the history 
Features/refine chat window
  • Loading branch information
@Oceania2018
Oceania2018 authored Feb 29, 2024
2 parents b30a2ee + 0ddccc9 commit 19978b5
Show file tree
Hide file tree
Showing 7 changed files with 109 additions and 111 deletions.
1 change: 1 addition & 0 deletions src/lib/helpers/types.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,6 +277,7 @@ IRichContent.prototype.text;
* @property {string} message_id - The message id.
* @property {Object} states - The states content.
* @property {Date} created_at - The states sent time.
* @property {number} expand_level - The object expand level
*/

/**
Expand Down
40 changes: 15 additions & 25 deletions src/lib/scss/custom/pages/_chat.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,29 +88,22 @@
display: flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
}

.user-chat-nav {
.chat-nav-element {
align-self: stretch;
min-width: 30px;
min-height: 30px;

.nav-btn {
color: var(--#{$prefix}body-color);
box-shadow: none;
padding: 0;
background-color: var(--#{$prefix}light);
border-radius: 50%;
border: none;
width: 100%;
height: 100%;
}

button {
height: 100%;
}
align-self: stretch;
min-width: 30px;
min-height: 30px;

.nav-btn {
color: var(--#{$prefix}body-color);
box-shadow: none;
padding: 0;
background-color: var(--#{$prefix}light);
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
}

.dropdown {
Expand Down Expand Up @@ -355,20 +348,17 @@
}

.log-content {
font-size: 15px;
font-size: 17px;
color: white;

li {
margin-top: 5px;
margin-bottom: 5px;
.property {
padding-left: 10px;
}
}

span {
color: white;
font-size: 15px;
font-size: 16px;
}
}

Expand Down
127 changes: 78 additions & 49 deletions src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,19 +84,14 @@
/** @type {boolean} */
let isLoadContentLog = false;
let isLoadStateLog = false;
let isContentLogClosed = false;
let isStateLogClosed = false;
let isContentLogClosed = false; // initial condition
let isStateLogClosed = false; // initial condition
let isOpenEditMsgModal = false;
let isOpenAddStateModal = false;
let isSendingMsg = false;
let isThinking = false;
let isLite = false;
let isFrame = false;
/** @type {any} */
let contentLogComponent;
/** @type {any} */
let stateLogComponent;
onMount(async () => {
dialogs = await GetDialogs(params.conversationId);
Expand All @@ -119,16 +114,8 @@
function resizeChatWindow() {
isLite = Viewport.Width <= screenWidthThreshold;
if (!isLite) {
if (isContentLogClosed) {
isLoadContentLog = false;
} else {
isLoadContentLog = true;
}
if (isStateLogClosed) {
isLoadStateLog = false;
} else {
isLoadStateLog = true;
}
isLoadContentLog = !isContentLogClosed;
isLoadStateLog = !isStateLogClosed;
} else {
isLoadContentLog = false;
isLoadStateLog = false;
Expand All @@ -137,6 +124,14 @@
}
}
function initChatView() {
isFrame = $page.url.searchParams.get('isFrame') === 'true';
// initial condition
isContentLogClosed = false;
isStateLogClosed = false;
resizeChatWindow();
}
/** @param {import('$types').ChatResponseModel[]} dialogs */
function initUserSentMessages(dialogs) {
const curConvMessages = dialogs?.filter(x => x.sender?.role != UserRole.Assistant).map(x => {
Expand Down Expand Up @@ -186,11 +181,6 @@
return messages?.slice(-messageLimit) || [];
}
function initChatView() {
isFrame = $page.url.searchParams.get('isFrame') === 'true';
resizeChatWindow();
}
/** @param {import('$types').ChatResponseModel[]} dialogs */
function findLastBotMessage(dialogs) {
const lastMsg = dialogs.slice(-1)[0];
Expand Down Expand Up @@ -543,12 +533,22 @@
/** @param {string} messageId */
function truncateLogs(messageId) {
if (contentLogComponent && contentLogComponent.onDeleteMessage) {
contentLogComponent.onDeleteMessage(messageId);
if (isLoadContentLog) {
const targetIdx = contentLogs.findIndex(x => x.message_id === messageId);
if (targetIdx < 0) {
contentLogs = [];
} else {
contentLogs = contentLogs.filter((x, idx) => idx < targetIdx);
}
}
if (stateLogComponent && stateLogComponent.onDeleteMessage) {
stateLogComponent.onDeleteMessage(messageId);
if (isLoadStateLog) {
const targetIdx = stateLogs.findIndex(x => x.message_id === messageId);
if (targetIdx < 0) {
stateLogs = [];
} else {
stateLogs = stateLogs.filter((x, idx) => idx < targetIdx);
}
}
}
Expand All @@ -557,17 +557,60 @@
if (!!!messageId || isLite) return;
highlightChatMessage(messageId);
highlightStateLog(messageId);
autoScrollToTargetLog(messageId);
}
/** @param {string} messageId */
function highlightChatMessage(messageId) {
const targets = document.querySelectorAll('.user-msg');
targets.forEach(elm => {
if (elm.id === `user-msg-${messageId}`) {
elm.classList.add('bg-primary', 'text-white');
} else {
elm.classList.remove('bg-primary', 'text-white');
}
});
}
/** @param {string} messageId */
function highlightStateLog(messageId) {
if (!isLoadStateLog) return;
stateLogs = stateLogs.map(item => {
if (item.message_id === messageId) {
item.expand_level = 1;
} else {
item.expand_level = 0;
}
return item;
});
const targets = document.querySelectorAll('.state-log-item');
targets.forEach(elm => {
const contentElm = elm.querySelector('.log-content');
if (!contentElm) return;
if (elm.id === `state-log-${messageId}`) {
contentElm.classList.add('border', 'border-warning', 'rounded', 'p-1');
} else {
contentElm.classList.remove('border', 'border-warning', 'rounded', 'p-1');
}
});
}
/** @param {string} messageId */
function autoScrollToTargetLog(messageId) {
const elements = [];
const contentLogElm = document.querySelector(`#content-log-${messageId}`);
if (!!contentLogElm) {
if (isLoadContentLog && !!contentLogElm) {
elements.push({
elm: contentLogElm,
wrapperName: '.content-log-scrollbar'
});
}
const stateLogElm = document.querySelector(`#state-log-${messageId}`);
if (!!stateLogElm) {
if (isLoadStateLog && !!stateLogElm) {
elements.push({
elm: stateLogElm,
wrapperName: '.state-log-scrollbar'
Expand All @@ -582,18 +625,6 @@
});
}
/** @param {string} messageId */
function highlightChatMessage(messageId) {
const targets = document.querySelectorAll('.user-msg');
targets.forEach(elm => {
if (elm.id === `user-msg-${messageId}`) {
elm.classList.add('bg-primary', 'text-white');
} else {
elm.classList.remove('bg-primary', 'text-white');
}
});
}
function openFullScreen() {
window.open($page.url.pathname);
}
Expand Down Expand Up @@ -627,8 +658,7 @@
{#if isLoadStateLog}
<Pane size={30} minSize={20} maxSize={50} >
<StateLog
bind:this={stateLogComponent}
stateLogs={stateLogs}
bind:stateLogs={stateLogs}
closeWindow={toggleStateLog}
cleanScreen={cleanStateLogScreen}
/>
Expand All @@ -648,17 +678,17 @@
<div class="col-md-8 col-5">
<ul class="list-inline user-chat-nav user-chat-nav-flex mb-0">
{#if isFrame}
<li class="chat-nav-element">
{#if 1}
<li class="list-inline-item">
<button
class="btn btn-secondary nav-btn dropdown-toggle"
class="btn btn-secondary btn-rounded btn-sm"
on:click={() => openFullScreen()}
>
<i class="bx bx-fullscreen" />
</button>
</li>
{/if}
<li class="chat-nav-element">
<li class="list-inline-item">
<Dropdown>
<DropdownToggle class="nav-btn dropdown-toggle">
<i class="bx bx-dots-horizontal-rounded" />
Expand Down Expand Up @@ -690,7 +720,7 @@
</Dropdown>
</li>
<li class="chat-nav-element d-md-inline-block">
<li class="list-inline-item d-md-inline-block">
<button
class="btn btn-primary btn-rounded btn-sm chat-send waves-effect waves-light"
on:click={() => endChat()}
Expand Down Expand Up @@ -835,8 +865,7 @@
{#if isLoadContentLog}
<Pane size={30} minSize={20} maxSize={50}>
<ContentLog
bind:this={contentLogComponent}
contentLogs={contentLogs}
bind:contentLogs={contentLogs}
closeWindow={toggleContentLog}
cleanScreen={cleanContentLogScreen}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log-element.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
</Button>
{/if}

{#if data.message_id}
{#if data.message_id && data.source === ContentLogSource.UserInput}
<div>{`MessageId: ${data.message_id}`}</div>
{/if}
</div>
20 changes: 2 additions & 18 deletions src/routes/chat/[agentId]/[conversationId]/contentLogs/content-log.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,8 @@
/** @type {() => void} */
export let cleanScreen;
export const onDeleteMessage = (/** @type {string} */ messageId) => {
const targetIdx = allLogs.findIndex(x => x.message_id === messageId);
allLogs = allLogs.filter((x, idx) => idx < targetIdx);
}
// @ts-ignore
let scrollbar;
/** @type {import('$types').ConversationContentLogModel[]} */
let initLogs = [];
$: allLogs = [...initLogs, ...contentLogs];
const options = {
scrollbars: {
Expand All @@ -41,7 +32,7 @@
onMount(async () => {
const conversationId = $page.params.conversationId;
initLogs = await GetContentLogs(conversationId);
contentLogs = await GetContentLogs(conversationId);
const scrollElement = document.querySelector('.content-log-scrollbar');
scrollbar = OverlayScrollbars(scrollElement, options);
Expand All @@ -64,20 +55,13 @@
}
function cleanLogs() {
initLogs = [];
contentLogs = [];
}
function handleCleanScreen() {
cleanLogs();
cleanScreen && cleanScreen();
}
// /** @param {string} messageId */
// function onDeleteMessage(messageId) {
// const targetIdx = allLogs.findIndex(x => x.message_id === messageId);
// allLogs = allLogs.filter((x, idx) => idx < targetIdx);
// }
</script>

<div class="chat-log">
Expand All @@ -100,7 +84,7 @@
</div>
<div class="content-log-scrollbar log-list padding-side">
<ul>
{#each allLogs as log}
{#each contentLogs as log}
<ContentLogElement data={log} />
{/each}
</ul>
Expand Down
Loading

0 comments on commit 19978b5

Please sign in to comment.