use context

SciSharp · Apr 12, 2024 · 1d67dc6 · 1d67dc6
1 parent b25295c
commit 1d67dc6
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 37 deletions.
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
@@ -177,7 +177,7 @@
                 .video-element-card {
                     border: none;
                     box-shadow: none;
-                    flex: 1 1 400px;
+                    flex: 1 1 300px;
 
                     .card-body {
                         padding: 0 !important;

diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -8,7 +8,7 @@
 	import 'overlayscrollbars/overlayscrollbars.css';
     import { OverlayScrollbars } from 'overlayscrollbars';
 	import { page } from '$app/stores';
-	import { onMount, tick } from 'svelte';
+	import { onMount, setContext, tick } from 'svelte';
 	import Viewport from 'svelte-viewport-info';
 	import { PUBLIC_LIVECHAT_ENTRY_ICON } from '$env/static/public';
 	import { USER_SENDERS } from '$lib/helpers/constants';
@@ -107,6 +107,10 @@
 	let isThinking = false;
 	let isLite = false;
 	let isFrame = false;
+
+	setContext('chat-window-context', {
+		autoScrollToBottom: autoScrollToBottom
+	});
 	
 	onMount(async () => {
 		dialogs = await GetDialogs(params.conversationId);
@@ -150,7 +154,7 @@
 		isFrame = $page.url.searchParams.get('isFrame') === 'true';
 		// initial condition
 		isContentLogClosed = false;
-		isStateLogClosed = true;
+		isStateLogClosed = false;
 		resizeChatWindow();
 	}
 
@@ -903,9 +907,8 @@
 										<div class="msg-container">
 											<RichContent
 												message={message}
-												displayExtraElements={message.message_id === lastBotMsg?.message_id && !isSendingMsg && !isThinking}
+												displayOptionElements={message.message_id === lastBotMsg?.message_id && !isSendingMsg && !isThinking}
 												disableOption={isSendingMsg || isThinking}
-												refresh={autoScrollToBottom}
 												onConfirm={confirmSelectedOption}
 											/>
 											<ChatAttachment

diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Card, CardBody } from "@sveltestrap/sveltestrap";
-    import { onMount } from "svelte";
+    import { getContext, onMount } from "svelte";
 
     /** @type {boolean} */
     export let disableOption = false;
@@ -11,18 +11,17 @@
     /** @type {(args0: string, args1: string) => any} */
     export let onConfirm;
 
-    /** @type {() => any} */
-    export let refresh = () => {};
-
     /** @type {any[]} */
     let cards = [];
     /** @type {any[]} */
     let buttons = [];
 
+    const { autoScrollToBottom }  = getContext('chat-window-context');
+
     onMount(() => {
         reset();
-        collectOptions(options);
-        refresh && refresh();
+        collectOptions(options)
+        autoScrollToBottom?.();
     });
 
     /** @param {any[]} options */

diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { onMount } from "svelte";
+	import { getContext, onMount } from "svelte";
     import SveltePlayer from "svelte-player";
     import { Card, CardBody } from "@sveltestrap/sveltestrap";
     import { ElementType } from "$lib/helpers/enums";
@@ -16,9 +16,6 @@
     /** @type {(args0: string, args1: string) => any} */
     export let onConfirm = () => {};
 
-    /** @type {() => any} */
-    export let refresh = () => {};
-
     /** @type {string} */
     export let confirmBtnText = 'Continue';
 
@@ -33,10 +30,12 @@
     /** @type {any[]} */
     let videoOptions = [];
 
+    const { autoScrollToBottom }  = getContext('chat-window-context');
+
     onMount(() => {
         reset();
         collectOptions(options);
-        refresh && refresh();
+        autoScrollToBottom?.();
     });
 
     /** @param {any[]} options */

diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte
@@ -8,25 +8,38 @@
     export let message;
 
     /** @type {boolean} */
-    export let displayExtraElements = false;
+    export let displayOptionElements = false;
 
     /** @type {boolean} */
     export let disableOption = false;
 
     /** @type {(args0: string, args1: string) => any} */
     export let onConfirm = () => {};
 
-    /** @type {() => any} */
-    export let refresh = () => {};
-
     /** @type {boolean} */
     let isComplexElement = false;
+    let isMultiSelect = false;
+
+    /** @type {any[]} */
+    let options = [];
 
     $: {
-        const isGeneric = message?.rich_content?.message?.rich_type === RichType.Generic;
-        // @ts-ignore
-        const hasSuboptions = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
-        isComplexElement = isGeneric && hasSuboptions;
+        if (displayOptionElements) {
+            const richType = message?.rich_content?.message?.rich_type;
+
+            if (richType === RichType.QuickReply) {
+                options = message?.rich_content?.message?.quick_replies;
+            } else if (richType === RichType.Button) {
+                options = message?.rich_content?.message?.buttons;
+            } else if (richType === RichType.MultiSelect) {
+                options = message?.rich_content?.message?.options;
+                isMultiSelect = true;
+            } else if (richType === RichType.Generic) {
+                options = message?.rich_content?.message?.elements;
+                // @ts-ignore
+                isComplexElement = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
+            }
+        }
     }
 
     /**
@@ -44,18 +57,10 @@
     </div>
 </div>
 
-{#if displayExtraElements}
-    {#if message?.rich_content?.message?.rich_type === RichType.QuickReply}
-	    <RcPlainOptions options={message?.rich_content?.message?.quick_replies} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
-    {:else if message?.rich_content?.message?.rich_type === RichType.Button}
-        <RcPlainOptions options={message?.rich_content?.message?.buttons} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
-    {:else if message?.rich_content?.message?.rich_type === RichType.MultiSelect}
-        <RcPlainOptions options={message?.rich_content?.message?.options} isMultiSelect disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
-    {:else if message?.rich_content?.message?.rich_type === RichType.Generic}
-        {#if isComplexElement}
-            <RcComplexOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
-        {:else}
-            <RcPlainOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
-        {/if}
+{#if displayOptionElements}
+    {#if !isComplexElement}
+        <RcPlainOptions options={options} isMultiSelect={isMultiSelect} disableOption={disableOption} onConfirm={handleConfirm} />
+    {:else}
+        <RcComplexOptions options={options} disableOption={disableOption} onConfirm={handleConfirm} />
     {/if}
 {/if}