Skip to content

Commit 3cbaca0

Browse files
Oceania2018Oceania2018
authored
Merge pull request #111 from iceljc/features/refine-chat-window
Features/refine chat window
2 parents 1a2518c + 1d67dc6 commit 3cbaca0

8 files changed

Lines changed: 133 additions & 74 deletions

File tree

‎src/lib/common/LoadingToComplete.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@
1818

1919
{#if isComplete}
2020
<div class="alert-container">
21-
<Alert class="success">
21+
<Alert color="success">
2222
<div>{successText}</div>
2323
</Alert>
2424
</div>
2525
{/if}
2626

2727
{#if isError}
2828
<div class="alert-container">
29-
<Alert class="error">
29+
<Alert color="danger">
3030
<div>{errorText}</div>
3131
</Alert>
3232
</div>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
z-index: 8888;
77

88
.alert {
9-
color: white;
109
text-align: center;
1110
}
1211

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

Lines changed: 29 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -169,15 +169,15 @@
169169
flex-direction: column;
170170
width: 80%;
171171

172-
.video-group-container {
172+
.video-option-container {
173173
display: flex;
174174
flex-wrap: wrap;
175175
gap: 5px;
176176

177177
.video-element-card {
178178
border: none;
179179
box-shadow: none;
180-
flex: 1 1 400px;
180+
flex: 1 1 300px;
181181

182182
.card-body {
183183
padding: 0 !important;
@@ -207,7 +207,7 @@
207207
}
208208
}
209209

210-
.button-group-container {
210+
.plain-option-container {
211211
display: flex;
212212
flex-wrap: wrap;
213213

@@ -230,7 +230,7 @@
230230
}
231231
}
232232

233-
.card-group-container {
233+
.complex-option-container {
234234
display: flex;
235235
flex-wrap: wrap;
236236
gap: 5px;
@@ -248,26 +248,32 @@
248248
max-width: 100%;
249249
}
250250

251-
.card-element-title {
252-
font-size: 0.8rem;
253-
font-weight: 700;
254-
height: 30%;
255-
}
256-
257-
.card-element-subtitle {
258-
font-size: 0.7rem;
259-
font-weight: 500;
260-
height: 8%;
261-
}
262-
263-
.card-option-group {
264-
margin-top: 5px;
251+
.card-element-body {
252+
display: flex;
253+
flex-direction: column;
254+
justify-content: space-evenly;
255+
gap: 5px;
256+
padding: 10px 15px;
265257

266-
.btn {
267-
display: block;
268-
margin-left: 0px !important;
269-
text-align: left;
270-
border-radius: 10px;
258+
.card-element-title {
259+
font-size: 0.8rem;
260+
font-weight: 700;
261+
}
262+
263+
.card-element-subtitle {
264+
font-size: 0.7rem;
265+
font-weight: 500;
266+
}
267+
268+
.card-option-group {
269+
margin-top: 5px;
270+
271+
.btn {
272+
display: block;
273+
margin-left: 0px !important;
274+
text-align: left;
275+
border-radius: 10px;
276+
}
271277
}
272278
}
273279
}

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import 'overlayscrollbars/overlayscrollbars.css';
99
import { OverlayScrollbars } from 'overlayscrollbars';
1010
import { page } from '$app/stores';
11-
import { onMount, tick } from 'svelte';
11+
import { onMount, setContext, tick } from 'svelte';
1212
import Viewport from 'svelte-viewport-info';
1313
import { PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public';
1414
import { USER_SENDERS } from '$lib/helpers/constants';
@@ -107,6 +107,10 @@
107107
let isThinking = false;
108108
let isLite = false;
109109
let isFrame = false;
110+
111+
setContext('chat-window-context', {
112+
autoScrollToBottom: autoScrollToBottom
113+
});
110114
111115
onMount(async () => {
112116
dialogs = await GetDialogs(params.conversationId);
@@ -903,9 +907,8 @@
903907
<div class="msg-container">
904908
<RichContent
905909
message={message}
906-
displayExtraElements={message.message_id === lastBotMsg?.message_id && !isSendingMsg && !isThinking}
910+
displayOptionElements={message.message_id === lastBotMsg?.message_id && !isSendingMsg && !isThinking}
907911
disableOption={isSendingMsg || isThinking}
908-
refresh={autoScrollToBottom}
909912
onConfirm={confirmSelectedOption}
910913
/>
911914
<ChatAttachment

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

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script>
22
import { Card, CardBody } from "@sveltestrap/sveltestrap";
3-
import { onMount } from "svelte";
3+
import { getContext, onMount } from "svelte";
44
55
/** @type {boolean} */
66
export let disableOption = false;
@@ -11,26 +11,29 @@
1111
/** @type {(args0: string, args1: string) => any} */
1212
export let onConfirm;
1313
14-
/** @type {() => any} */
15-
export let refresh = () => {};
16-
1714
/** @type {any[]} */
1815
let cards = [];
16+
/** @type {any[]} */
17+
let buttons = [];
18+
19+
const { autoScrollToBottom } = getContext('chat-window-context');
1920
2021
onMount(() => {
2122
reset();
22-
collectOptions(options);
23-
refresh && refresh();
23+
collectOptions(options)
24+
autoScrollToBottom?.();
2425
});
2526
2627
/** @param {any[]} options */
2728
function collectOptions(options) {
28-
cards = options?.map(op => {
29+
cards = options?.filter(op => !!op.title || !!op.subtitle)?.map(op => {
2930
// @ts-ignore
30-
const options = op.buttons?.filter(op => !!op.title && !!op.payload)?.map(x => {
31+
const options = op.buttons?.filter(x => !!x.title && !!x.payload)?.map(x => {
3132
return {
3233
title: x.title,
33-
payload: x.payload
34+
payload: x.payload,
35+
is_primary: x.is_primary,
36+
is_secondary: x.is_secondary,
3437
};
3538
}) || [];
3639
@@ -40,6 +43,18 @@
4043
options: options
4144
};
4245
}) || [];
46+
47+
buttons = options?.filter(op => !!!op.title && !!!op.subtitle)?.flatMap(op => {
48+
// @ts-ignore
49+
return op.buttons?.filter(x => !!x.title && !!x.payload)?.map(x => {
50+
return {
51+
title: x.title,
52+
payload: x.payload,
53+
is_primary: x.is_primary,
54+
is_secondary: x.is_secondary,
55+
};
56+
}) || [];;
57+
}) || [];
4358
}
4459
4560
/**
@@ -66,21 +81,21 @@
6681
</script>
6782
6883
{#if cards.length > 0}
69-
<div class="card-group-container">
84+
<div class="complex-option-container">
7085
{#each cards as card, idx (idx)}
7186
<Card class="card-element">
72-
<CardBody>
87+
<CardBody class="card-element-body">
7388
{#if !!card.title}
74-
<div class="card-element-title mb-3">{card.title}</div>
89+
<div class="card-element-title hide-text">{card.title}</div>
7590
{/if}
7691
{#if !!card.subtitle}
77-
<div class="card-element-subtitle mb-3">{card.subtitle}</div>
92+
<div class="card-element-subtitle hide-text">{card.subtitle}</div>
7893
{/if}
7994
{#if card.options?.length > 0}
8095
<div class="card-option-group">
8196
{#each card.options as option, i (i)}
8297
<button
83-
class="btn btn-outline-primary btn-sm m-1"
98+
class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
8499
disabled={disableOption}
85100
on:click={(e) => handleClickOption(e, option)}
86101
>
@@ -94,3 +109,17 @@
94109
{/each}
95110
</div>
96111
{/if}
112+
113+
{#if buttons.length > 0}
114+
<div class="plain-option-container" style="margin-top: 5px;">
115+
{#each buttons as option, index}
116+
<button
117+
class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
118+
disabled={disableOption}
119+
on:click={(e) => handleClickOption(e, option)}
120+
>
121+
{option.title}
122+
</button>
123+
{/each}
124+
</div>
125+
{/if}

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

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script>
2-
import { onMount } from "svelte";
2+
import { getContext, onMount } from "svelte";
33
import SveltePlayer from "svelte-player";
44
import { Card, CardBody } from "@sveltestrap/sveltestrap";
55
import { ElementType } from "$lib/helpers/enums";
@@ -14,10 +14,7 @@
1414
export let options = [];
1515
1616
/** @type {(args0: string, args1: string) => any} */
17-
export let onConfirm;
18-
19-
/** @type {() => any} */
20-
export let refresh = () => {};
17+
export let onConfirm = () => {};
2118
2219
/** @type {string} */
2320
export let confirmBtnText = 'Continue';
@@ -33,10 +30,12 @@
3330
/** @type {any[]} */
3431
let videoOptions = [];
3532
33+
const { autoScrollToBottom } = getContext('chat-window-context');
34+
3635
onMount(() => {
3736
reset();
3837
collectOptions(options);
39-
refresh && refresh();
38+
autoScrollToBottom?.();
4039
});
4140
4241
/** @param {any[]} options */
@@ -113,7 +112,7 @@
113112
114113
{#if videoOptions.length > 0}
115114
<div>
116-
<div class="video-group-container">
115+
<div class="video-option-container">
117116
{#each videoOptions as video, index}
118117
<Card class="video-element-card">
119118
<CardBody>
@@ -131,7 +130,7 @@
131130
{/if}
132131
133132
{#if plainOptions.length > 0}
134-
<div class="button-group-container">
133+
<div class="plain-option-container">
135134
{#each plainOptions as option, index}
136135
<button
137136
class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}

‎src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,38 @@
88
export let message;
99
1010
/** @type {boolean} */
11-
export let displayExtraElements = false;
11+
export let displayOptionElements = false;
1212
1313
/** @type {boolean} */
1414
export let disableOption = false;
1515
1616
/** @type {(args0: string, args1: string) => any} */
1717
export let onConfirm = () => {};
1818
19-
/** @type {() => any} */
20-
export let refresh = () => {};
21-
2219
/** @type {boolean} */
2320
let isComplexElement = false;
21+
let isMultiSelect = false;
22+
23+
/** @type {any[]} */
24+
let options = [];
2425
2526
$: {
26-
const isGeneric = message?.rich_content?.message?.rich_type === RichType.Generic;
27-
// @ts-ignore
28-
const hasSuboptions = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
29-
isComplexElement = isGeneric && hasSuboptions;
27+
if (displayOptionElements) {
28+
const richType = message?.rich_content?.message?.rich_type;
29+
30+
if (richType === RichType.QuickReply) {
31+
options = message?.rich_content?.message?.quick_replies;
32+
} else if (richType === RichType.Button) {
33+
options = message?.rich_content?.message?.buttons;
34+
} else if (richType === RichType.MultiSelect) {
35+
options = message?.rich_content?.message?.options;
36+
isMultiSelect = true;
37+
} else if (richType === RichType.Generic) {
38+
options = message?.rich_content?.message?.elements;
39+
// @ts-ignore
40+
isComplexElement = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
41+
}
42+
}
3043
}
3144
3245
/**
@@ -44,18 +57,10 @@
4457
</div>
4558
</div>
4659
47-
{#if displayExtraElements}
48-
{#if message?.rich_content?.message?.rich_type === RichType.QuickReply}
49-
<RcPlainOptions options={message?.rich_content?.message?.quick_replies} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
50-
{:else if message?.rich_content?.message?.rich_type === RichType.Button}
51-
<RcPlainOptions options={message?.rich_content?.message?.buttons} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
52-
{:else if message?.rich_content?.message?.rich_type === RichType.MultiSelect}
53-
<RcPlainOptions options={message?.rich_content?.message?.options} isMultiSelect disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
54-
{:else if message?.rich_content?.message?.rich_type === RichType.Generic}
55-
{#if isComplexElement}
56-
<RcComplexOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
57-
{:else}
58-
<RcPlainOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
59-
{/if}
60+
{#if displayOptionElements}
61+
{#if !isComplexElement}
62+
<RcPlainOptions options={options} isMultiSelect={isMultiSelect} disableOption={disableOption} onConfirm={handleConfirm} />
63+
{:else}
64+
<RcComplexOptions options={options} disableOption={disableOption} onConfirm={handleConfirm} />
6065
{/if}
6166
{/if}

0 commit comments

Comments
 (0)