Skip to content

refine styles #302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 5, 2025
Merged

refine styles #302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 22 additions & 3 deletions src/lib/scss/custom/pages/_chat.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,18 @@
height: 80%;
max-height: 25px;
}

.chat-head-agent-name {
font-size: 0.8em;
}
}

.chat-head-user {
flex: 0.5;
display: flex;
gap: 5px;
width: fit-content;
font-size: 12px;
font-size: 0.7em !important;
}
}
}
Expand All @@ -127,6 +131,7 @@
display: flex;
justify-content: flex-end;
align-items: center;
gap: 5px;
}

.user-chat-nav {
Expand All @@ -141,8 +146,14 @@
background-color: var(--#{$prefix}light);
border-radius: 50%;
border: none;
width: 40px;
height: 40px;
// width: 40px;
// height: 40px;
width: 2em;
height: 2em;

i {
font-size: 0.8em;
}
}

.dropdown {
Expand Down Expand Up @@ -176,6 +187,10 @@
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}

i, span {
font-size: 0.9em;
}
}
}

Expand Down Expand Up @@ -420,6 +435,10 @@

.log-footer {
flex: 2%;

.log-footer-nav-btn {
font-size: 0.75em;
}
}

.instant-log-body {
Expand Down
39 changes: 24 additions & 15 deletions src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@
const params = $page.params;
const messageLimit = 100;
const screenWidthThreshold = 1024;
const chatWidthThreshold = 300;
const maxTextLength = 64000;
const duration = 2000;

Expand Down Expand Up @@ -219,6 +220,7 @@
selectedTags = conversation?.tags || [];
initUserSentMessages(dialogs);
initChatView();
handlePaneResize();

signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
signalr.onMessageReceivedFromCsr = onMessageReceivedFromClient;
Expand Down Expand Up @@ -659,7 +661,7 @@
if (disableSpeech) return;

if (!isListening) {
llmRealtime.start(params.agentId, message => {
llmRealtime.start(params.agentId, (/** @type {any} */ message) => {
console.log(message);
});
isListening = true;
Expand Down Expand Up @@ -1317,6 +1319,14 @@
isLoading = false;
});
}

function handlePaneResize() {
const header = document.querySelector('.chat-head');
if (!header) return;

const width = header.getBoundingClientRect().width;
isLite = width < chatWidthThreshold;
}
</script>


Expand Down Expand Up @@ -1432,9 +1442,9 @@

<HeadTitle title="Chat" addOn='' />
<div class="d-lg-flex">
<Splitpanes>
<Splitpanes on:resize={() => handlePaneResize()}>
{#if isLoadInstantLog}
<Pane size={30} minSize={20} maxSize={50} >
<Pane size={30} minSize={25} maxSize={40} >
<InstantLog
bind:msgStateLogs={msgStateLogs}
bind:agentQueueLogs={agentQueueLogs}
Expand All @@ -1444,7 +1454,7 @@
/>
</Pane>
{/if}
<Pane minSize={20}>
<Pane minSize={30}>
<div style="height: 100vh;">
<div class="card mb-0" style="height: 100vh;">
<div class="border-bottom chat-head">
Expand All @@ -1469,18 +1479,18 @@
</div>

<div class="col-md-8 col-5">
<ul class="list-inline user-chat-nav user-chat-nav-flex mb-0">
<div class="user-chat-nav user-chat-nav-flex mb-0">
{#if PUBLIC_DEBUG_MODE === 'true' && isFrame}
<li class="list-inline-item">
<div class="">
<button
class="btn btn-secondary btn-rounded btn-sm"
on:click={() => openFullScreen()}
>
<i class="bx bx-fullscreen" />
</button>
</li>
</div>
{/if}
<li class="list-inline-item">
<div class="">
{#if !isLite}
<Dropdown>
<DropdownToggle class="nav-btn dropdown-toggle">
Expand Down Expand Up @@ -1547,9 +1557,9 @@
/>
</button>
{/if}
</li>
</div>

<li class="list-inline-item btn-pair">
<div class="btn-pair">
{#if !isLite}
<button
class={`btn btn-rounded btn-sm btn-primary btn-left`}
Expand All @@ -1558,13 +1568,12 @@
>
<span
data-bs-toggle="tooltip"
data-bs-placement="top"
data-bs-placement="bottom"
title="New Conversation"
>
<i class="mdi mdi-plus" />
<span class="me-2">New</span>
</span>

</button>
{/if}
<button
Expand All @@ -1577,8 +1586,8 @@
{/if}
<i class="mdi mdi-window-close" />
</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -1869,7 +1878,7 @@
</div>
</Pane>
{#if isLoadPersistLog}
<Pane size={30} minSize={20} maxSize={50}>
<Pane size={30} minSize={25} maxSize={40}>
<PersistLog
bind:contentLogs={contentLogs}
bind:convStateLogs={convStateLogs}
Expand Down
2 changes: 2 additions & 0 deletions src/routes/chat/[agentId]/[conversationId]/persist-log/persist-log.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@
<NavBar id={'persist-log-container'}>
<NavItem
navBtnId={'content-log-tab'}
navBtnClasses={'log-footer-nav-btn'}
dataBsTarget={'#content-log-tab-pane'}
ariaControls={'content-log-tab-pane'}
navBtnText={'Content Log'}
Expand All @@ -168,6 +169,7 @@
/>
<NavItem
navBtnId={'conv-state-log-tab'}
navBtnClasses={'log-footer-nav-btn'}
dataBsTarget={'#conv-state-log-tab-pane'}
ariaControls={'conv-state-log-tab-pane'}
navBtnText={'Conversation States'}
Expand Down