refine auto scroll

Author: Jicheng Lu

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

@@ -226,6 +226,7 @@
                 button {
                     min-width: 50px;
                     text-align: left;
+                    border-radius: 10px;
                 }
             }
 
@@ -236,20 +237,27 @@
                 margin-top: 10px;
 
                 .card-element {
-                    flex: 1 1 fit-content;
+                    flex: 1 1 50%;
                     border-radius: 10px;
                     border-width: 2px;
                     max-width: 45%;
                     margin-bottom: 0px;
 
+                    @media (max-width: 620px) {
+                        width: 100%;
+                        max-width: 100%;
+                    }
+
                     .card-element-title {
-                        font-size: 1.1rem;
+                        font-size: 0.8rem;
                         font-weight: 700;
+                        height: 30%;
                     }
 
                     .card-element-subtitle {
-                        font-size: 0.8rem;
+                        font-size: 0.7rem;
                         font-weight: 500;
+                        height: 8%;
                     }
 
                     .card-option-group {
@@ -259,6 +267,7 @@
                             display: block;
                             margin-left: 0px !important;
                             text-align: left;
+                            border-radius: 10px;
                         }
                     }
                 }

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

@@ -217,14 +217,18 @@
 		groupedDialogs = groupDialogs(dialogs);
 		await tick();
 
+		autoScrollToBottom();
+    }
+
+	function autoScrollToBottom() {
 		// @ts-ignore
         scrollbars.forEach(scrollbar => {
             setTimeout(() => {
                 const { viewport } = scrollbar.elements();
                 viewport.scrollTo({ top: viewport.scrollHeight, behavior: 'smooth' });
             }, 200);
         });
-    }
+	}
 
 	/** @param {import('$types').ChatResponseModel[]} dialogs */
 	function groupDialogs(dialogs) {
@@ -901,6 +905,7 @@
 												message={message}
 												displayExtraElements={message.message_id === lastBotMsg?.message_id && !isSendingMsg && !isThinking}
 												disableOption={isSendingMsg || isThinking}
+												refresh={autoScrollToBottom}
 												onConfirm={confirmSelectedOption}
 											/>
 											<ChatAttachment

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

@@ -2,7 +2,6 @@
 	import { Card, CardBody } from "@sveltestrap/sveltestrap";
     import { onMount } from "svelte";
 
-
     /** @type {boolean} */
     export let disableOption = false;
 
@@ -12,16 +11,21 @@
     /** @type {(args0: string, args1: string) => any} */
     export let onConfirm;
 
+    /** @type {() => any} */
+    export let refresh = () => {};
+
     /** @type {any[]} */
     let cards = [];
 
     onMount(() => {
-        cards = collectOptions(options);
+        reset();
+        collectOptions(options);
+        refresh && refresh();
     });
 
     /** @param {any[]} options */
     function collectOptions(options) {
-        const res = options?.map(op => {
+        cards = options?.map(op => {
             // @ts-ignore
             const options = op.buttons?.filter(op => !!op.title && !!op.payload)?.map(x => {
                 return {
@@ -36,8 +40,6 @@
                 options: options
             };
         }) || [];
-
-        return res;
     }
 
     /**
@@ -78,7 +80,7 @@
                     <div class="card-option-group">
                         {#each card.options as option, i (i)}
                             <button
-                                class="btn btn-outline-primary btn-rounded btn-sm m-1"
+                                class="btn btn-outline-primary btn-sm m-1"
                                 disabled={disableOption}
                                 on:click={(e) => handleClickOption(e, option)}
                             >

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

@@ -16,6 +16,9 @@
     /** @type {(args0: string, args1: string) => any} */
     export let onConfirm;
 
+    /** @type {() => any} */
+    export let refresh = () => {};
+
     /** @type {string} */
     export let confirmBtnText = 'Continue';
 
@@ -33,6 +36,7 @@
     onMount(() => {
         reset();
         collectOptions(options);
+        refresh && refresh();
     });
 
     /** @param {any[]} options */
@@ -130,7 +134,7 @@
 <div class="button-group-container">
     {#each plainOptions as option, index}
         <button
-            class={`btn btn-rounded btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
+            class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
             class:active={!!option.isClicked}
             disabled={disableOption}
             on:click={(e) => handleClickOption(e, option, index)}
@@ -140,7 +144,7 @@
     {/each}
     {#if isMultiSelect}
         <button
-            class="btn btn-outline-success btn-rounded btn-sm m-1"
+            class="btn btn-outline-success btn-sm m-1"
             name="confirm"
             disabled={disableOption || plainOptions.every(x => !!!x.isClicked)}
             on:click={(e) => handleConfirm(e)}

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

@@ -16,6 +16,9 @@
     /** @type {(args0: string, args1: string) => any} */
     export let onConfirm = () => {};
 
+    /** @type {() => any} */
+    export let refresh = () => {};
+
     /** @type {boolean} */
     let isComplexElement = false;
 
@@ -43,16 +46,16 @@
 
 {#if displayExtraElements}
     {#if message?.rich_content?.message?.rich_type === RichType.QuickReply}
-	    <RcPlainOptions options={message?.rich_content?.message?.quick_replies} disableOption={disableOption} onConfirm={handleConfirm} />
+	    <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} />
+        <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} />
+        <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} />
+            <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} />
+            <RcPlainOptions options={message?.rich_content?.message?.elements} disableOption={disableOption} onConfirm={handleConfirm} refresh={refresh} />
         {/if}
     {/if}
 {/if}