Skip to content

Commit d87f767

Browse files
author
Jicheng Lu
committed
refine chat attachment
1 parent feeaba6 commit d87f767

File tree

10 files changed

+220
-143
lines changed

10 files changed

+220
-143
lines changed

‎src/lib/common/FileDropZone.svelte‎

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -410,40 +410,4 @@
410410
<i class="bx bxs-image-add" />
411411
</div>
412412
</slot>
413-
</div>
414-
415-
416-
417-
<style>
418-
.file-dropzone {
419-
display: flex;
420-
flex-direction: column;
421-
align-items: center;
422-
justify-content: center;
423-
border-width: 2px;
424-
border-radius: 10px;
425-
border-color: #eeeeee;
426-
border-style: dashed;
427-
background-color: #fafafa;
428-
color: #bdbdbd;
429-
outline: none;
430-
transition: border 0.24s ease-in-out;
431-
width: 8em;
432-
height: 8em;
433-
}
434-
435-
.add-file-icon {
436-
font-size: 3em;
437-
}
438-
439-
@media (max-width: 500px) {
440-
.file-dropzone {
441-
width: 5em;
442-
height: 5em;
443-
}
444-
445-
.add-file-icon {
446-
font-size: 2em;
447-
}
448-
}
449-
</style>
413+
</div>

‎src/lib/scss/app.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ File: Main Css File
4040
@import "custom/components/loader";
4141
@import "custom/components/chat";
4242
@import "custom/components/alert";
43-
@import "custom/components/gallery";
43+
@import "custom/components/file";
4444

4545
// Plugins
4646
@import "custom/plugins/custom-scrollbar";

‎src/lib/scss/custom/components/_file.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
$attachment-width: 8em;
2+
$attachment-height: 8em;
3+
$attachment-width-lite: 5em;
4+
$attachment-height-lite: 5em;
5+
$file-screen-max-width: 500px;
6+
7+
.gallery-item {
8+
width: $attachment-width;
9+
height: $attachment-height;
10+
11+
@media (max-width: $file-screen-max-width) {
12+
width: $attachment-width-lite;
13+
height: $attachment-height-lite;
14+
}
15+
16+
.gallery-item-wrapper {
17+
position: relative;
18+
19+
.gallery-item-icon {
20+
position: absolute;
21+
color: white;
22+
cursor: pointer;
23+
z-index: 1000;
24+
right: 3px;
25+
font-size: 1.5em;
26+
}
27+
28+
.gallery-item-image {
29+
width: 100%;
30+
height: 100%;
31+
border-radius: 10px;
32+
}
33+
}
34+
}
35+
36+
.svelte-lightbox-footer p {
37+
display: none;
38+
}
39+
40+
.item-text {
41+
text-align: center;
42+
color: white;
43+
}
44+
45+
.file-dropzone {
46+
display: flex;
47+
flex-direction: column;
48+
align-items: center;
49+
justify-content: center;
50+
border-width: 2px;
51+
border-radius: 10px;
52+
border-color: #eeeeee;
53+
border-style: dashed;
54+
background-color: #fafafa;
55+
color: #bdbdbd;
56+
outline: none;
57+
transition: border 0.24s ease-in-out;
58+
width: $attachment-width;
59+
height: $attachment-width;
60+
}
61+
62+
.add-file-icon {
63+
font-size: 3em;
64+
}
65+
66+
@media (max-width: $file-screen-max-width) {
67+
.file-dropzone {
68+
width: $attachment-width-lite;
69+
height: $attachment-width-lite;
70+
}
71+
72+
.add-file-icon {
73+
font-size: 2em;
74+
}
75+
}

‎src/lib/scss/custom/components/_gallery.scss‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

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

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,7 @@
153153
}
154154
}
155155

156-
.conversation-list {
157-
margin-bottom: 20px;
156+
.conv-msg-container {
158157
display: flex;
159158
position: relative;
160159
width: 100%;
@@ -328,7 +327,7 @@
328327
}
329328

330329
.right {
331-
.conversation-list {
330+
.conv-msg-container {
332331
justify-content: flex-end;
333332

334333
.msg-container {
@@ -344,7 +343,7 @@
344343
}
345344

346345
&.last-chat {
347-
.conversation-list {
346+
.conv-msg-container {
348347
&:before {
349348
right: 0;
350349
left: auto;
@@ -355,7 +354,7 @@
355354
}
356355

357356
.last-chat {
358-
.conversation-list {
357+
.conv-msg-container {
359358
&:before {
360359
content: "\F0009";
361360
font-family: "Material Design Icons";
@@ -600,3 +599,6 @@
600599
}
601600
}
602601

602+
.conv-msg-wrapper {
603+
margin-bottom: 20px;
604+
}

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

Lines changed: 62 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,15 @@
2626
import { replaceNewLine } from '$lib/helpers/http';
2727
import { EditorType, SenderAction, UserRole } from '$lib/helpers/enums';
2828
import RichContent from './richContent/rich-content.svelte';
29-
import RcMessage from './richContent/rc-message.svelte';
3029
import ContentLog from './contentLogs/content-log.svelte';
3130
import _ from "lodash";
3231
import { Pane, Splitpanes } from 'svelte-splitpanes';
3332
import StateLog from './stateLogs/state-log.svelte';
3433
import ChatImage from './chatImage/chat-image.svelte';
35-
import ChatAttachment from './chatImage/chat-attachment.svelte';
3634
import Swal from 'sweetalert2/dist/sweetalert2.js';
3735
import "sweetalert2/src/sweetalert2.scss";
3836
import moment from 'moment';
37+
import RcDisclaimer from './richContent/rc-disclaimer.svelte';
3938
4039
4140
const options = {
@@ -857,60 +856,63 @@
857856
{#each dialogGroup as message}
858857
<li id={'test_k' + message.message_id}
859858
class:right={USER_SENDERS.includes(message.sender?.role)}>
860-
<div class="conversation-list">
861-
{#if USER_SENDERS.includes(message.sender?.role)}
862-
<div class="msg-container">
863-
<div
864-
class="ctext-wrap user-msg"
865-
class:clickable={!isLite && (isLoadContentLog || isLoadStateLog)}
866-
id={`user-msg-${message.message_id}`}
867-
tabindex="0"
868-
aria-label="user-msg-to-log"
869-
role="link"
870-
on:keydown={() => {}}
871-
on:click={() => directToLog(message.message_id)}
872-
>
873-
<div>
874-
<!--<div class="conversation-name">{message.sender.full_name}</div>-->
875-
<div class="text-start">{@html replaceNewLine(message.text)}</div>
876-
<p class="chat-time mb-0">
877-
<i class="bx bx-time-five align-middle me-1" />
878-
<!-- {format(message.created_at, 'short-time')} -->
879-
{utcToLocal(message.created_at, 'hh:mm A')}
880-
</p>
859+
<div class="conv-msg-wrapper">
860+
<div class="conv-msg-container">
861+
{#if USER_SENDERS.includes(message.sender?.role)}
862+
<div class="msg-container">
863+
<div
864+
class="ctext-wrap user-msg"
865+
class:clickable={!isLite && (isLoadContentLog || isLoadStateLog)}
866+
id={`user-msg-${message.message_id}`}
867+
tabindex="0"
868+
aria-label="user-msg-to-log"
869+
role="link"
870+
on:keydown={() => {}}
871+
on:click={() => directToLog(message.message_id)}
872+
>
873+
<div>
874+
<!--<div class="conversation-name">{message.sender.full_name}</div>-->
875+
<div class="text-start">{@html replaceNewLine(message.text)}</div>
876+
<p class="chat-time mb-0">
877+
<i class="bx bx-time-five align-middle me-1" />
878+
<!-- {format(message.created_at, 'short-time')} -->
879+
{utcToLocal(message.created_at, 'hh:mm A')}
880+
</p>
881+
</div>
881882
</div>
882883
</div>
883-
<ChatImage message={message} />
884-
</div>
885-
{#if !isLite}
886-
<Dropdown>
887-
<DropdownToggle class="dropdown-toggle" tag="span" disabled={isSendingMsg || isThinking}>
888-
<i class="bx bx-dots-vertical-rounded" />
889-
</DropdownToggle>
890-
<DropdownMenu class="dropdown-menu-end">
891-
<DropdownItem on:click={(e) => editMessage(e, message)}>Edit</DropdownItem>
892-
<DropdownItem on:click={(e) => resendMessage(e, message)}>Resend</DropdownItem>
893-
<DropdownItem on:click={(e) => deleteMessage(e, message.message_id)}>Delete</DropdownItem>
894-
</DropdownMenu>
895-
</Dropdown>
896-
{/if}
897-
{:else}
898-
<div class="cicon-wrap">
899-
{#if message.sender.role == UserRole.Client}
900-
<img src="images/users/user-dummy.jpg" class="rounded-circle avatar-xs" alt="avatar">
884+
{#if !isLite}
885+
<Dropdown>
886+
<DropdownToggle class="dropdown-toggle" tag="span" disabled={isSendingMsg || isThinking}>
887+
<i class="bx bx-dots-vertical-rounded" />
888+
</DropdownToggle>
889+
<DropdownMenu class="dropdown-menu-end">
890+
<DropdownItem on:click={(e) => editMessage(e, message)}>Edit</DropdownItem>
891+
<DropdownItem on:click={(e) => resendMessage(e, message)}>Resend</DropdownItem>
892+
<DropdownItem on:click={(e) => deleteMessage(e, message.message_id)}>Delete</DropdownItem>
893+
</DropdownMenu>
894+
</Dropdown>
895+
{/if}
901896
{:else}
902-
<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="rounded-circle avatar-xs" alt="avatar">
897+
<div class="cicon-wrap">
898+
{#if message.sender.role == UserRole.Client}
899+
<img src="images/users/user-dummy.jpg" class="rounded-circle avatar-xs" alt="avatar">
900+
{:else}
901+
<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="rounded-circle avatar-xs" alt="avatar">
902+
{/if}
903+
</div>
904+
<div class="msg-container">
905+
<RichContent
906+
message={message}
907+
lastBotMessage={lastBotMsg}
908+
disabled={isSendingMsg || isThinking}
909+
onConfirm={confirmSelectedOption}
910+
/>
911+
</div>
903912
{/if}
904913
</div>
905-
<div class="msg-container">
906-
<RichContent
907-
message={message}
908-
lastBotMessage={lastBotMsg}
909-
disabled={isSendingMsg || isThinking}
910-
onConfirm={confirmSelectedOption}
911-
/>
912-
<ChatImage message={message} />
913-
</div>
914+
{#if USER_SENDERS.includes(message.sender?.role)}
915+
<RcDisclaimer message={message} />
914916
{/if}
915917
</div>
916918
</li>
@@ -919,13 +921,15 @@
919921
920922
{#if isThinking}
921923
<li>
922-
<div class="conversation-list">
923-
<div class="cicon-wrap float-start">
924-
<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="rounded-circle avatar-xs" alt="avatar">
925-
</div>
926-
<div class="ctext-wrap float-start" style="display: flex;">
927-
<div class="flex-shrink-0 align-self-center">
928-
<LoadingDots duration={'1s'} size={10} color={'var(--bs-primary)'} />
924+
<div class="conv-msg-wrapper">
925+
<div class="conv-msg-container">
926+
<div class="cicon-wrap float-start">
927+
<img src={PUBLIC_LIVECHAT_ENTRY_ICON} class="rounded-circle avatar-xs" alt="avatar">
928+
</div>
929+
<div class="ctext-wrap float-start" style="display: flex;">
930+
<div class="flex-shrink-0 align-self-center">
931+
<LoadingDots duration={'1s'} size={10} color={'var(--bs-primary)'} />
932+
</div>
929933
</div>
930934
</div>
931935
</div>

0 commit comments

Comments
 (0)