Skip to content

Commit

Permalink
Merge pull request #69 from iceljc/features/refine-chat-screen
Browse files Browse the repository at this point in the history 
Features/refine chat screen
  • Loading branch information
@Oceania2018
Oceania2018 authored Feb 28, 2024
2 parents efb035f + cc7966d commit f64e512
Show file tree
Hide file tree
Showing 8 changed files with 112 additions and 56 deletions.
9 changes: 9 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"svelte-link": "^1.4.0",
"svelte-select": "^5.7.0",
"svelte-splitpanes": "^0.8.0",
"svelte-viewport-info": "^1.0.1",
"svelvet": "^9.0.0",
"sweetalert2": "^11.6.13",
"swiper": "^10.3.1"
Expand Down
2 changes: 1 addition & 1 deletion src/lib/common/LiveChatEntry.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
onMount(async () => {
const agentSettings = await getSettingDetail("Agent");
chatUrl = `${PUBLIC_LIVECHAT_HOST}chat/${agentSettings.hostAgentId}?isLite=true`;
chatUrl = `${PUBLIC_LIVECHAT_HOST}chat/${agentSettings.hostAgentId}?isFrame=true`;
showChatIcon = true;
});
Expand Down
19 changes: 1 addition & 18 deletions src/lib/scss/custom/pages/_chat.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,6 @@
.dropdown-menu {
box-shadow: $box-shadow;
border: 1px solid var(--#{$prefix}border-color);

li {
&:nth-child(-n+2) {
@media (max-width: 1024px) {
display: none;
}
}
}
}
}
}
Expand Down Expand Up @@ -217,9 +209,6 @@
padding: 4px;
cursor: pointer;
color: var(--#{$prefix}secondary-color);
@media (max-width: 575.98px) {
display: none;
}
}

.dropdown-menu {
Expand Down Expand Up @@ -282,7 +271,7 @@

.chat-input-section {
border-top: 1px solid var(--#{$prefix}border-color);
padding: 2vmin 2% 2vmin 2%;
padding: 2vmin 2%;
}

.chat-input {
Expand All @@ -307,12 +296,6 @@
}
}

.chat-send {
@media (max-width: 575.98px) {
min-width: auto;
}
}

.chat-log {
height: 100vh;

Expand Down
6 changes: 3 additions & 3 deletions src/routes/chat/[agentId]/+page.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@
conversationId = conversation.id;
let chatUrl = `chat/${agentId}/${conversationId}`;
const isLite = $page.url.searchParams.get('isLite');
if (isLite === 'true') {
chatUrl = `${chatUrl}?isLite=true`
const isFrame = $page.url.searchParams.get('isFrame');
if (isFrame === 'true') {
chatUrl = `${chatUrl}?isFrame=true`
}
window.location.href = chatUrl;
});
Expand Down
100 changes: 73 additions & 27 deletions src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@
import { page } from '$app/stores';
import { onMount, tick } from 'svelte';
import Link from 'svelte-link';
import Viewport from 'svelte-viewport-info'
import { PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public';
import { USER_SENDERS } from '$lib/helpers/constants';
import { signalr } from '$lib/services/signalr-service.js';
import { webSpeech } from '$lib/services/web-speech.js';
import { sendMessageToHub, GetDialogs, deleteConversationMessage } from '$lib/services/conversation-service.js';
Expand All @@ -32,7 +34,6 @@
import Swal from 'sweetalert2/dist/sweetalert2.js';
import "sweetalert2/src/sweetalert2.scss";
import moment from 'moment';
import { USER_SENDERS } from '$lib/helpers/constants';
const options = {
scrollbars: {
Expand All @@ -47,6 +48,7 @@
};
const params = $page.params;
const messageLimit = 100;
const screenWidthThreshold = 1024;
/** @type {string} */
let text = "";
Expand Down Expand Up @@ -82,16 +84,20 @@
/** @type {boolean} */
let isLoadContentLog = false;
let isLoadStateLog = false;
let isContentLogClosed = false;
let isStateLogClosed = false;
let isOpenEditMsgModal = false;
let isOpenAddStateModal = false;
let isSendingMsg = false;
let isThinking = false;
let isLite = false;
let isFrame = false;
onMount(async () => {
dialogs = await GetDialogs(params.conversationId);
initUserSentMessages(dialogs);
initLogView();
initChatView();
signalr.onMessageReceivedFromClient = onMessageReceivedFromClient;
signalr.onMessageReceivedFromCsr = onMessageReceivedFromCsr;
Expand All @@ -106,6 +112,25 @@
refresh();
});
function resizeChatWindow() {
isLite = Viewport.Width <= screenWidthThreshold;
if (!isLite) {
if (isContentLogClosed) {
isLoadContentLog = false;
} else {
isLoadContentLog = true;
}
if (isStateLogClosed) {
isLoadStateLog = false;
} else {
isLoadStateLog = true;
}
} else {
isLoadContentLog = false;
isLoadStateLog = false;
}
}
/** @param {import('$types').ChatResponseModel[]} dialogs */
function initUserSentMessages(dialogs) {
const curConvMessages = dialogs?.filter(x => x.sender?.role != UserRole.Assistant).map(x => {
Expand All @@ -118,37 +143,35 @@
const savedMessages = conversationUserMessageStore.get();
const otherConvMessages = savedMessages?.messages?.filter(x => x.conversationId !== params.conversationId) || [];
const allMessages = [...otherConvMessages, ...curConvMessages];
const truncateMessages = trimUserSentMessages(allMessages);
const trimmedMessages = trimUserSentMessages(allMessages);
prevSentMsgs = truncateMessages.map(x => x.text || '');
prevSentMsgs = trimmedMessages.map(x => x.text || '');
sentMsgIdx = prevSentMsgs.length;
conversationUserMessageStore.put({
pointer: sentMsgIdx,
messages: truncateMessages
messages: trimmedMessages
});
}
/** @param {string} msg */
function renewUserSentMessages(msg) {
const savedMessages = conversationUserMessageStore.get();
const allMessages = [...savedMessages?.messages || [], { conversationId: params.conversationId, text: msg || '' }];
const truncateMessages = trimUserSentMessages(allMessages);
if (allMessages.length > truncateMessages.length) {
sentMsgIdx -= allMessages.length - truncateMessages.length;
const trimmedMessages = trimUserSentMessages(allMessages);
if (allMessages.length > trimmedMessages.length) {
sentMsgIdx -= allMessages.length - trimmedMessages.length;
}
prevSentMsgs = truncateMessages.map(x => x.text);
if (sentMsgIdx - 1 < 0) {
if (sentMsgIdx < 0) {
sentMsgIdx = 0;
} else if (sentMsgIdx > trimmedMessages.length) {
sentMsgIdx = trimmedMessages.length;
}
if (sentMsgIdx + 1 > truncateMessages.length) {
sentMsgIdx = truncateMessages.length;
}
prevSentMsgs = trimmedMessages.map(x => x.text);
conversationUserMessageStore.put({
pointer: sentMsgIdx,
messages: truncateMessages
messages: trimmedMessages
});
}
Expand All @@ -157,10 +180,9 @@
return messages?.slice(-messageLimit) || [];
}
function initLogView() {
isLite = $page.url.searchParams.get('isLite') === 'true';
isLoadContentLog = !isLite;
isLoadStateLog = !isLite;
function initChatView() {
isFrame = $page.url.searchParams.get('isFrame') === 'true';
resizeChatWindow();
}
/** @param {import('$types').ChatResponseModel[]} dialogs */
Expand Down Expand Up @@ -374,6 +396,9 @@
isLoadContentLog = !isLoadContentLog;
if (!isLoadContentLog) {
contentLogs = [];
isContentLogClosed = true;
} else {
isContentLogClosed = false;
}
}
Expand All @@ -385,6 +410,9 @@
isLoadStateLog = !isLoadStateLog;
if (!isLoadStateLog) {
stateLogs = [];
isStateLogClosed = true;
} else {
isStateLogClosed = false;
}
}
Expand Down Expand Up @@ -510,6 +538,7 @@
function directToLog(messageId) {
if (!!!messageId || isLite) return;
highlightChatMessage(messageId);
const elements = [];
const contentLogElm = document.querySelector(`#content-log-${messageId}`);
if (!!contentLogElm) {
Expand All @@ -535,11 +564,25 @@
});
}
/** @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);
}
</script>
<svelte:window on:resize={() => resizeChatWindow()}/>
<DialogModal
className="custom-modal"
title={'Edit message'}
Expand Down Expand Up @@ -582,7 +625,7 @@
<div class="col-md-8 col-5">
<ul class="list-inline user-chat-nav user-chat-nav-flex mb-0">
{#if isLite}
{#if isFrame}
<li class="list-inline-item">
<button
class="btn btn-secondary nav-btn dropdown-toggle"
Expand All @@ -598,10 +641,10 @@
<i class="bx bx-dots-horizontal-rounded" />
</DropdownToggle>
<DropdownMenu class="dropdown-menu-end">
{#if !isLoadContentLog}
{#if !isLite && !isLoadContentLog}
<DropdownItem on:click={() => toggleContentLog()}>View Log</DropdownItem>
{/if}
{#if !isLoadStateLog || !isOpenAddStateModal}
{#if !isLite && (!isLoadStateLog || !isOpenAddStateModal)}
<li>
<Dropdown direction="right" class="state-menu">
<DropdownToggle caret class="dropdown-item">
Expand Down Expand Up @@ -636,7 +679,7 @@
</div>
</div>
</div>
<div class="chat-scrollbar" style="height: 82%">
<div class="chat-conversation p-3">
<ul class="list-unstyled mb-0">
Expand All @@ -648,13 +691,14 @@
</li>
{#each dialogGroup as message}
<li id={'test_k' + message.message_id}
class={USER_SENDERS.includes(message.sender?.role) ? 'right' : ''}>
class:right={USER_SENDERS.includes(message.sender?.role)}>
<div class="conversation-list">
{#if USER_SENDERS.includes(message.sender?.role)}
<div class="msg-container">
<div
class="ctext-wrap"
class:clickable={!isLite}
class="ctext-wrap user-msg"
class:clickable={!isLite && (isLoadContentLog || isLoadStateLog)}
id={`user-msg-${message.message_id}`}
tabindex="0"
aria-label="user-msg-to-log"
role="link"
Expand All @@ -673,6 +717,7 @@
</div>
<ChatImage message={message} />
</div>
{#if !isLite}
<Dropdown>
<DropdownToggle class="dropdown-toggle" tag="span" color="">
<i class="bx bx-dots-vertical-rounded" />
Expand All @@ -683,6 +728,7 @@
<DropdownItem on:click={(e) => deleteMessage(e, message.message_id)}>Delete</DropdownItem>
</DropdownMenu>
</Dropdown>
{/if}
{:else}
<div class="cicon-wrap">
{#if message.sender.role == UserRole.Client}
Expand Down Expand Up @@ -723,7 +769,7 @@
</ul>
</div>
</div>
<div class="chat-input-section" style="height: 8%;">
<div class="row">
<div class="col-auto">
Expand Down
Loading

0 comments on commit f64e512

Please sign in to comment.