Skip to content

Commit 35a1be0

Browse files
author
Jicheng Lu
committed
refine editor
1 parent df49314 commit 35a1be0

File tree

4 files changed

+97
-50
lines changed

4 files changed

+97
-50
lines changed

‎src/lib/helpers/constants.js‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { UserRole } from "./enums";
1+
import { EditorType, UserRole } from "./enums";
22

33
export const USER_SENDERS = [
44
UserRole.Admin,
@@ -8,4 +8,17 @@ export const USER_SENDERS = [
88

99
export const BOT_SENDERS = [
1010
UserRole.Assistant
11+
];
12+
13+
export const TEXT_EDITORS = [
14+
EditorType.Text,
15+
EditorType.Address,
16+
EditorType.Phone,
17+
EditorType.Email,
18+
EditorType.DateTimePicker,
19+
EditorType.DateTimeRangePicker
20+
];
21+
22+
export const FILE_EDITORS = [
23+
EditorType.File
1124
];

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

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,22 @@
7777
.chat-head {
7878
font-size: 1.1em;
7979
padding: 2vmin 2%;
80+
height: 10%;
8081

8182
.head-left {
8283
display: flex;
8384
flex-direction: column;
8485
}
8586
}
8687

88+
.chat-content {
89+
height: 82%;
90+
}
91+
92+
.chat-content-expand {
93+
height: 98%;
94+
}
95+
8796
.user-chat-nav-flex {
8897
display: flex;
8998
justify-content: flex-end;
@@ -280,6 +289,12 @@
280289
.chat-input-section {
281290
border-top: 1px solid var(--#{$prefix}border-color);
282291
padding: 2vmin 2%;
292+
height: 8%;
293+
}
294+
295+
.chat-input-hide {
296+
display: none;
297+
height: 2%;
283298
}
284299

285300
.chat-input {
@@ -290,10 +305,7 @@
290305
padding-right: 1rem;
291306
}
292307

293-
.chat-input-image {
294-
padding-right: 4em;
295-
}
296-
308+
// obsolete
297309
.chat-input-links {
298310
position: absolute;
299311
right: 3px;
@@ -311,6 +323,20 @@
311323
}
312324
}
313325

326+
.chat-file-editor {
327+
text-align: center;
328+
329+
li {
330+
span {
331+
font-size: 200%;
332+
line-height: 36px;
333+
padding: 0px 4px;
334+
display: inline-block;
335+
color: var(--bs-primary);
336+
}
337+
}
338+
}
339+
314340
.chat-log {
315341
height: 100vh;
316342

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

Lines changed: 52 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
import { onMount, setContext, tick } from 'svelte';
2424
import Viewport from 'svelte-viewport-info';
2525
import { PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public';
26-
import { BOT_SENDERS, USER_SENDERS } from '$lib/helpers/constants';
26+
import { BOT_SENDERS, FILE_EDITORS, TEXT_EDITORS, USER_SENDERS } from '$lib/helpers/constants';
2727
import { signalr } from '$lib/services/signalr-service.js';
2828
import { webSpeech } from '$lib/services/web-speech.js';
2929
import { newConversation } from '$lib/services/conversation-service';
@@ -118,6 +118,15 @@
118118
let isThinking = false;
119119
let isLite = false;
120120
let isFrame = false;
121+
let loadEditor = false;
122+
let loadTextEditor = false;
123+
let loadFileEditor = false;
124+
125+
$: {
126+
loadTextEditor = TEXT_EDITORS.includes(lastBotMsg?.rich_content?.editor || '');
127+
loadFileEditor = FILE_EDITORS.includes(lastBotMsg?.rich_content?.editor || '');
128+
loadEditor = !isSendingMsg && !isThinking && (loadTextEditor || loadFileEditor);
129+
}
121130
122131
setContext('chat-window-context', {
123132
autoScrollToBottom: autoScrollToBottom
@@ -856,7 +865,7 @@
856865
<Pane minSize={20}>
857866
<div style="height: 100vh;">
858867
<div class="card mb-0" style="height: 100vh;">
859-
<div class="border-bottom chat-head" style="height: 10%;">
868+
<div class="border-bottom chat-head">
860869
<div class="row">
861870
<div class="col-md-4 col-7 head-left">
862871
<div class="m-1">{agent?.name}</div>
@@ -922,7 +931,7 @@
922931
</div>
923932
</div>
924933
925-
<div class="chat-scrollbar scroll-bottom-to-top" style="height: 82%;">
934+
<div class={`chat-scrollbar chat-content scroll-bottom-to-top ${!loadEditor ? 'chat-content-expand' : ''}`}>
926935
<div class="chat-conversation p-3">
927936
<ul class="list-unstyled mb-0">
928937
{#each Object.entries(groupedDialogs) as [createDate, dialogGroup]}
@@ -1020,54 +1029,53 @@
10201029
<ChatImageGallery disabled={isSendingMsg || isThinking} />
10211030
{/if}
10221031
{#if !!lastBotMsg && !isSendingMsg && !isThinking}
1023-
<div>
1024-
<RichContent
1025-
message={lastBotMsg}
1026-
disabled={isSendingMsg || isThinking}
1027-
onConfirm={confirmSelectedOption}
1028-
/>
1029-
</div>
1032+
<RichContent
1033+
message={lastBotMsg}
1034+
disabled={isSendingMsg || isThinking}
1035+
onConfirm={confirmSelectedOption}
1036+
/>
10301037
{/if}
10311038
10321039
</div>
10331040
</div>
10341041
1035-
<div class="chat-input-section" style="height: 8%;">
1042+
<div class={`chat-input-section ${!loadEditor ? 'chat-input-hide' : ''}`}>
10361043
<div class="row">
1037-
<div class="col-auto">
1038-
<button
1039-
type="submit"
1040-
class="btn btn-primary btn-rounded waves-effect waves-light"
1041-
disabled={isSendingMsg || isThinking || lastBotMsg?.rich_content?.editor == EditorType.None}
1042-
on:click={startListen}
1043-
>
1044-
<i class="mdi mdi-{microphoneIcon} md-36" />
1045-
</button>
1046-
</div>
1047-
<div class="col">
1048-
<div class="position-relative">
1049-
<ChatTextArea
1050-
className={`chat-input ${lastBotMsg?.rich_content?.editor == EditorType.File ? 'chat-input-image' : ''}`}
1051-
bind:text={text}
1052-
disabled={isSendingMsg || isThinking || lastBotMsg?.rich_content?.editor == EditorType.None}
1053-
editor={lastBotMsg?.rich_content?.editor || ''}
1054-
onKeyDown={e => onSendMessage(e)}
1055-
/>
1056-
{#if lastBotMsg?.rich_content?.editor == EditorType.File}
1057-
<ChatImageUploader />
1058-
{/if}
1044+
{#if loadTextEditor}
1045+
<div class="col-auto">
1046+
<button
1047+
type="submit"
1048+
class="btn btn-primary btn-rounded waves-effect waves-light"
1049+
disabled={isSendingMsg || isThinking}
1050+
on:click={startListen}
1051+
>
1052+
<i class="mdi mdi-{microphoneIcon} md-36" />
1053+
</button>
10591054
</div>
1060-
</div>
1061-
<div class="col-auto">
1062-
<button
1063-
type="submit"
1064-
class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
1065-
disabled={!!!_.trim(text) || isSendingMsg || isThinking}
1066-
on:click={() => sentTextMessage()}
1067-
><span class="d-none d-md-inline-block me-2">Send</span>
1068-
<i class="mdi mdi-send" />
1069-
</button>
1070-
</div>
1055+
<div class="col">
1056+
<div class="position-relative">
1057+
<ChatTextArea
1058+
className={`chat-input`}
1059+
bind:text={text}
1060+
disabled={isSendingMsg || isThinking}
1061+
editor={lastBotMsg?.rich_content?.editor || ''}
1062+
onKeyDown={e => onSendMessage(e)}
1063+
/>
1064+
</div>
1065+
</div>
1066+
<div class="col-auto">
1067+
<button
1068+
type="submit"
1069+
class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
1070+
disabled={!!!_.trim(text) || isSendingMsg || isThinking}
1071+
on:click={() => sentTextMessage()}
1072+
><span class="d-none d-md-inline-block me-2">Send</span>
1073+
<i class="mdi mdi-send" />
1074+
</button>
1075+
</div>
1076+
{:else if loadFileEditor}
1077+
<ChatImageUploader />
1078+
{/if}
10711079
</div>
10721080
</div>
10731081
</div>

‎src/routes/chat/[agentId]/[conversationId]/chatImage/chat-image-uploader.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
}
4444
</script>
4545
46-
<div class="chat-input-links">
46+
<div class="chat-file-editor">
4747
<ul class="list-inline mb-0">
4848
<li class="list-inline-item">
4949
<FileDropZone

0 commit comments

Comments
 (0)