Skip to content

Commit 1d67dc6

Browse files
author
Jicheng Lu
committed
use context
1 parent b25295c commit 1d67dc6

File tree

5 files changed

+43
-37
lines changed

5 files changed

+43
-37
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -177,7 +177,7 @@
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;

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

Lines changed: 7 additions & 4 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);
@@ -150,7 +154,7 @@
150154
isFrame = $page.url.searchParams.get('isFrame') === 'true';
151155
// initial condition
152156
isContentLogClosed = false;
153-
isStateLogClosed = true;
157+
isStateLogClosed = false;
154158
resizeChatWindow();
155159
}
156160
@@ -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: 5 additions & 6 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,18 +11,17 @@
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 = [];
1916
/** @type {any[]} */
2017
let buttons = [];
2118
19+
const { autoScrollToBottom } = getContext('chat-window-context');
20+
2221
onMount(() => {
2322
reset();
24-
collectOptions(options);
25-
refresh && refresh();
23+
collectOptions(options)
24+
autoScrollToBottom?.();
2625
});
2726
2827
/** @param {any[]} options */

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

Lines changed: 4 additions & 5 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";
@@ -16,9 +16,6 @@
1616
/** @type {(args0: string, args1: string) => any} */
1717
export let onConfirm = () => {};
1818
19-
/** @type {() => any} */
20-
export let refresh = () => {};
21-
2219
/** @type {string} */
2320
export let confirmBtnText = 'Continue';
2421
@@ -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 */

‎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)