Skip to content

Commit df49314

Browse files
author
Jicheng Lu
committed
refactor rich content
1 parent bcc230e commit df49314

File tree

6 files changed

+157
-146
lines changed

6 files changed

+157
-146
lines changed

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

Lines changed: 113 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -168,114 +168,6 @@
168168
display: flex;
169169
flex-direction: column;
170170
width: 80%;
171-
172-
.video-option-container {
173-
display: flex;
174-
flex-wrap: wrap;
175-
gap: 5px;
176-
177-
.video-element-card {
178-
border: none;
179-
box-shadow: none;
180-
flex: 1 1 300px;
181-
182-
.card-body {
183-
padding: 0 !important;
184-
}
185-
186-
.video-element-title {
187-
font-size: 1.1em;
188-
font-weight: 700;
189-
padding-left: 5px;
190-
padding-top: 10px;
191-
padding-bottom: 10px;
192-
margin-bottom: 5px;
193-
width: 100%;
194-
overflow: hidden;
195-
white-space: nowrap;
196-
text-overflow: ellipsis;
197-
}
198-
199-
.video-element-player {
200-
aspect-ratio: 16 / 9;
201-
202-
video, iframe {
203-
border-radius: 10px;
204-
height: 100%;
205-
}
206-
}
207-
}
208-
}
209-
210-
.plain-option-container {
211-
display: flex;
212-
flex-wrap: wrap;
213-
214-
.btn:not([name="confirm"]) {
215-
&:hover {
216-
background-color: #fff;
217-
color: var(--bs-primary);
218-
}
219-
}
220-
221-
.btn.active:hover {
222-
background-color: var(--bs-primary);
223-
color: #fff;
224-
}
225-
226-
button {
227-
min-width: 50px;
228-
border-radius: 10px;
229-
}
230-
}
231-
232-
.complex-option-container {
233-
display: flex;
234-
flex-wrap: wrap;
235-
gap: 3px;
236-
margin-top: 10px;
237-
238-
.card-element {
239-
flex: 1 1 50%;
240-
border-radius: 10px;
241-
border-width: 2px;
242-
max-width: calc(50% - 2.5px);
243-
margin-bottom: 0px;
244-
245-
@media (max-width: 620px) {
246-
width: 100%;
247-
max-width: 100%;
248-
}
249-
250-
.card-element-body {
251-
display: flex;
252-
flex-direction: column;
253-
justify-content: space-evenly;
254-
gap: 5px;
255-
padding: 10px 15px;
256-
257-
.card-element-title {
258-
font-size: 0.8rem;
259-
font-weight: 700;
260-
}
261-
262-
.card-element-subtitle {
263-
font-size: 0.7rem;
264-
font-weight: 500;
265-
}
266-
267-
.card-option-group {
268-
margin-top: 5px;
269-
270-
.btn {
271-
display: block;
272-
margin-left: 0px !important;
273-
border-radius: 10px;
274-
}
275-
}
276-
}
277-
}
278-
}
279171
}
280172

281173
.ctext-wrap {
@@ -628,4 +520,117 @@
628520
font-size: 0.85em;
629521
font-weight: 500;
630522
color: var(--bs-secondary)
523+
}
524+
525+
.center-option {
526+
justify-content: center;
527+
padding: 0px 10px;
528+
}
529+
530+
.video-option-container {
531+
display: flex;
532+
flex-wrap: wrap;
533+
gap: 5px;
534+
535+
.video-element-card {
536+
border: none;
537+
box-shadow: none;
538+
flex: 1 1 300px;
539+
540+
.card-body {
541+
padding: 0 !important;
542+
}
543+
544+
.video-element-title {
545+
font-size: 1.1em;
546+
font-weight: 700;
547+
padding-left: 5px;
548+
padding-top: 10px;
549+
padding-bottom: 10px;
550+
margin-bottom: 5px;
551+
width: 100%;
552+
overflow: hidden;
553+
white-space: nowrap;
554+
text-overflow: ellipsis;
555+
}
556+
557+
.video-element-player {
558+
aspect-ratio: 16 / 9;
559+
560+
video, iframe {
561+
border-radius: 10px;
562+
height: 100%;
563+
}
564+
}
565+
}
566+
}
567+
568+
.plain-option-container {
569+
display: flex;
570+
flex-wrap: wrap;
571+
572+
.btn:not([name="confirm"]) {
573+
&:hover {
574+
background-color: #fff;
575+
color: var(--bs-primary);
576+
}
577+
}
578+
579+
.btn.active:hover {
580+
background-color: var(--bs-primary);
581+
color: #fff;
582+
}
583+
584+
button {
585+
min-width: 50px;
586+
border-radius: 10px;
587+
}
588+
}
589+
590+
.complex-option-container {
591+
display: flex;
592+
flex-wrap: wrap;
593+
gap: 3px;
594+
margin-top: 10px;
595+
596+
.card-element {
597+
flex: 1 1 50%;
598+
border-radius: 10px;
599+
border-width: 2px;
600+
max-width: calc(50% - 2.5px);
601+
margin-bottom: 0px;
602+
603+
@media (max-width: 620px) {
604+
width: 100%;
605+
max-width: 100%;
606+
}
607+
608+
.card-element-body {
609+
display: flex;
610+
flex-direction: column;
611+
justify-content: space-evenly;
612+
gap: 5px;
613+
padding: 10px 15px;
614+
615+
.card-element-title {
616+
font-size: 0.8rem;
617+
font-weight: 700;
618+
}
619+
620+
.card-element-subtitle {
621+
font-size: 0.7rem;
622+
font-weight: 500;
623+
}
624+
625+
.card-option-group {
626+
margin-top: 5px;
627+
628+
.btn {
629+
display: block;
630+
margin-left: 0px !important;
631+
border-radius: 10px;
632+
}
633+
}
634+
}
635+
}
631636
}

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

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@
3636
import { replaceNewLine } from '$lib/helpers/http';
3737
import { EditorType, SenderAction, UserRole } from '$lib/helpers/enums';
3838
import RichContent from './richContent/rich-content.svelte';
39+
import RcMessage from "./richContent/rc-message.svelte";
3940
import RcDisclaimer from './richContent/rc-disclaimer.svelte';
4041
import MessageImageGallery from '$lib/common/MessageImageGallery.svelte';
4142
import ChatImageUploader from './chatImage/chat-image-uploader.svelte';
@@ -663,9 +664,11 @@
663664
664665
/** @param {string} messageId */
665666
async function handleDeleteMessage(messageId) {
667+
isSendingMsg = true;
666668
clearEventLogs();
667669
resetStorage();
668670
await deleteConversationMessage(params.conversationId, messageId);
671+
isSendingMsg = false;
669672
}
670673
671674
/**
@@ -765,20 +768,23 @@
765768
766769
/** @param {string} messageId */
767770
function autoScrollToTargetLog(messageId) {
771+
const contentLogWrapper = '.content-log-scrollbar';
772+
const stateLogWrapper = '.state-log-scrollbar';
773+
const offset = 5;
768774
const elements = [];
769775
const contentLogElm = document.querySelector(`#content-log-${messageId}`);
770776
if (isLoadContentLog && !!contentLogElm) {
771777
elements.push({
772778
elm: contentLogElm,
773-
wrapperName: '.content-log-scrollbar'
779+
wrapperName: contentLogWrapper
774780
});
775781
}
776782
777783
const stateLogElm = document.querySelector(`#state-log-${messageId}`);
778784
if (isLoadStateLog && !!stateLogElm) {
779785
elements.push({
780786
elm: stateLogElm,
781-
wrapperName: '.state-log-scrollbar'
787+
wrapperName: stateLogWrapper
782788
});
783789
}
784790
@@ -787,7 +793,11 @@
787793
if (!!scrollElement && !!item.elm) {
788794
const logScroll = OverlayScrollbars(scrollElement, options);
789795
const { viewport } = logScroll.elements();
790-
viewport.scrollTo({ top: item.elm.offsetTop - 5, behavior: 'smooth' });
796+
let offsetTop = item.elm.offsetTop;
797+
if (item.wrapperName === stateLogWrapper) {
798+
offsetTop -= offset;
799+
}
800+
viewport.scrollTo({ top: offsetTop, behavior: 'smooth' });
791801
}
792802
});
793803
}
@@ -975,12 +985,7 @@
975985
{/if}
976986
</div>
977987
<div class="msg-container">
978-
<RichContent
979-
message={message}
980-
lastBotMessage={lastBotMsg}
981-
disabled={isSendingMsg || isThinking}
982-
onConfirm={confirmSelectedOption}
983-
/>
988+
<RcMessage message={message} />
984989
</div>
985990
{/if}
986991
</div>
@@ -1014,6 +1019,16 @@
10141019
{#if lastBotMsg?.rich_content?.editor === EditorType.File}
10151020
<ChatImageGallery disabled={isSendingMsg || isThinking} />
10161021
{/if}
1022+
{#if !!lastBotMsg && !isSendingMsg && !isThinking}
1023+
<div>
1024+
<RichContent
1025+
message={lastBotMsg}
1026+
disabled={isSendingMsg || isThinking}
1027+
onConfirm={confirmSelectedOption}
1028+
/>
1029+
</div>
1030+
{/if}
1031+
10171032
</div>
10181033
</div>
10191034

‎src/routes/chat/[agentId]/[conversationId]/chatImage/chat-attachment-options.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@
7171
}
7272
</script>
7373
74-
<div class="plain-option-container">
74+
<div class="plain-option-container center-option">
7575
{#if files?.length > 0 && confirmOption}
7676
<button
7777
class={`btn btn-sm m-1 ${confirmOption?.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}

‎src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,6 @@
115115
{#each buttons as option, index}
116116
<button
117117
class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
118-
style='width: 100%;'
119118
disabled={disabled}
120119
on:click={(e) => handleClickOption(e, option)}
121120
>

‎src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
113113
{#if videoOptions.length > 0}
114114
<div>
115-
<div class="video-option-container">
115+
<div class="video-option-container center-option">
116116
{#each videoOptions as video, index}
117117
<Card class="video-element-card">
118118
<CardBody>
@@ -130,7 +130,7 @@
130130
{/if}
131131
132132
{#if plainOptions.length > 0}
133-
<div class="plain-option-container">
133+
<div class="plain-option-container center-option">
134134
{#each plainOptions as option, index}
135135
<button
136136
class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}

0 commit comments

Comments
 (0)