From 2c295760a3c5379f23eac096bbb3c5d79d663daf Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Mon, 15 Apr 2024 15:57:27 -0500
Subject: [PATCH 1/2] refine rich content

---
 src/lib/helpers/enums.js                      |  3 +-
 src/lib/scss/custom/pages/_chat.scss          |  6 +-
 .../[conversationId]/chat-box.svelte          | 29 ++++----
 .../chatImage/chat-attachment.svelte          |  9 +--
 .../richContent/rc-complex-options.svelte     | 11 ++--
 .../richContent/rc-message.svelte             | 12 ++++
 .../richContent/rc-plain-options.svelte       |  6 +-
 .../richContent/rich-content.svelte           | 66 -------------------
 .../richContent/rich-options.svelte           | 52 +++++++++++++++
 9 files changed, 96 insertions(+), 98 deletions(-)
 create mode 100644 src/routes/chat/[agentId]/[conversationId]/richContent/rc-message.svelte
 delete mode 100644 src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte
 create mode 100644 src/routes/chat/[agentId]/[conversationId]/richContent/rich-options.svelte

diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
index 6ec07460..11c9e3c4 100644
--- a/src/lib/helpers/enums.js
+++ b/src/lib/helpers/enums.js
@@ -20,7 +20,8 @@ const richType = {
     QuickReply: 'quick_reply',
     Button: 'button_template',
     MultiSelect: 'multi-select_template',
-    Generic: 'generic_template'
+    Generic: 'generic_template',
+    Attachment: 'attachment'
 }
 export const RichType = Object.freeze(richType);
 
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
index ccfff40e..b7775a9f 100644
--- a/src/lib/scss/custom/pages/_chat.scss
+++ b/src/lib/scss/custom/pages/_chat.scss
@@ -225,7 +225,6 @@
 
                 button {
                     min-width: 50px;
-                    text-align: left;
                     border-radius: 10px;
                 }
             }
@@ -233,14 +232,14 @@
             .complex-option-container {
                 display: flex;
                 flex-wrap: wrap;
-                gap: 5px;
+                gap: 3px;
                 margin-top: 10px;
 
                 .card-element {
                     flex: 1 1 50%;
                     border-radius: 10px;
                     border-width: 2px;
-                    max-width: 45%;
+                    max-width: calc(50% - 2.5px);
                     margin-bottom: 0px;
 
                     @media (max-width: 620px) {
@@ -271,7 +270,6 @@
                             .btn {
                                 display: block;
                                 margin-left: 0px !important;
-                                text-align: left;
                                 border-radius: 10px;
                             }
                         }
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 3f7c64f3..b0d0bdb3 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -25,7 +25,8 @@
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { replaceNewLine } from '$lib/helpers/http';
 	import { EditorType, SenderAction, UserRole } from '$lib/helpers/enums';
-	import RichContent from './richContent/rich-content.svelte';
+	import RichOptions from './richContent/rich-options.svelte';
+	import RcMessage from './richContent/rc-message.svelte';
 	import ContentLog from './contentLogs/content-log.svelte';
 	import _ from "lodash";
 	import { Pane, Splitpanes } from 'svelte-splitpanes';
@@ -36,6 +37,7 @@
 	import "sweetalert2/src/sweetalert2.scss";
 	import moment from 'moment';
 	
+	
 	const options = {
 		scrollbars: {
 			visibility: 'auto',
@@ -905,17 +907,20 @@
 											{/if}
 										</div>
 										<div class="msg-container">
-											<RichContent
-												message={message}
-												displayOptionElements={message.message_id === lastBotMsg?.message_id && !isSendingMsg && !isThinking}
-												disableOption={isSendingMsg || isThinking}
-												onConfirm={confirmSelectedOption}
-											/>
-											<ChatAttachment
-												displayComponents={message.message_id === lastBotMsg?.message_id && lastBotMsg?.rich_content?.editor === EditorType.File}
-												disabled={isSendingMsg || isThinking}
-												bind:files={conversationFiles}
-											/>
+											<RcMessage message={message} />
+											{#if message.message_id === lastBotMsg?.message_id && lastBotMsg?.rich_content?.editor === EditorType.File}
+												<ChatAttachment
+													disabled={isSendingMsg || isThinking}
+													bind:files={conversationFiles}
+												/>
+											{/if}
+											{#if message.message_id === lastBotMsg?.message_id && !isSendingMsg && !isThinking}
+												<RichOptions
+													message={message}
+													disabled={isSendingMsg || isThinking}
+													onConfirm={confirmSelectedOption}
+												/>
+											{/if}
 											<ChatImage message={message} />
 										</div>
 										{/if}
diff --git a/src/routes/chat/[agentId]/[conversationId]/chatImage/chat-attachment.svelte b/src/routes/chat/[agentId]/[conversationId]/chatImage/chat-attachment.svelte
index 279848d5..7d6f303b 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chatImage/chat-attachment.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chatImage/chat-attachment.svelte
@@ -4,9 +4,6 @@
 	import { conversationUserAttachmentStore } from "$lib/helpers/store";
 	import { onMount } from "svelte";
 
-    /** @type {boolean} */
-    export let displayComponents = true;
-
     /** @type {boolean} */
     export let disabled = false;
 
@@ -38,7 +35,5 @@
     }
 </script>
 
-{#if displayComponents}
-    <FileDropZone accept="image/*" containerStyles={'width: 100%; height: fit-content; min-height: 8rem;'} disabled={disabled} on:drop={e => handleFileDrop(e)} />
-    <FileGallery files={files} disabled={disabled} onDelete={deleteFile} />
-{/if}
\ No newline at end of file
+<FileDropZone accept="image/*" containerStyles={'width: 100%; height: fit-content; min-height: 8rem;'} disabled={disabled} on:drop={e => handleFileDrop(e)} />
+<FileGallery files={files} disabled={disabled} onDelete={deleteFile} />
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte
index d280620c..34e7560c 100644
--- a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte
@@ -1,9 +1,9 @@
 <script>
-	import { Card, CardBody } from "@sveltestrap/sveltestrap";
     import { getContext, onMount } from "svelte";
-
+	import { Card, CardBody } from "@sveltestrap/sveltestrap";
+    
     /** @type {boolean} */
-    export let disableOption = false;
+    export let disabled = false;
 
     /** @type {any[]} */
     export let options = [];
@@ -96,7 +96,7 @@
                         {#each card.options as option, i (i)}
                             <button
                                 class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
-                                disabled={disableOption}
+                                disabled={disabled}
                                 on:click={(e) => handleClickOption(e, option)}
                             >
                                 {option.title}
@@ -115,7 +115,8 @@
         {#each buttons as option, index}
             <button
                 class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
-                disabled={disableOption}
+                style='text-align: center; width: 100%;'
+                disabled={disabled}
                 on:click={(e) => handleClickOption(e, option)}
             >
                 {option.title}
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-message.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-message.svelte
new file mode 100644
index 00000000..187985b9
--- /dev/null
+++ b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-message.svelte
@@ -0,0 +1,12 @@
+<script>
+	import Markdown from "$lib/common/Markdown.svelte";
+
+    /** @type {any} */
+    export let message;
+</script>
+
+<div class="ctext-wrap">
+	<div class="flex-shrink-0 align-self-center">
+        <Markdown text={message?.rich_content?.message?.text || message?.text} />
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte
index a85bee5e..f1c51846 100644
--- a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte
@@ -8,7 +8,7 @@
     export let isMultiSelect = false;
 
     /** @type {boolean} */
-    export let disableOption = false;
+    export let disabled = false;
 
     /** @type {any[]} */
     export let options = [];
@@ -135,7 +135,7 @@
         <button
             class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
             class:active={!!option.isClicked}
-            disabled={disableOption}
+            disabled={disabled}
             on:click={(e) => handleClickOption(e, option, index)}
         >
             {option.title}
@@ -145,7 +145,7 @@
         <button
             class="btn btn-outline-success btn-sm m-1"
             name="confirm"
-            disabled={disableOption || plainOptions.every(x => !!!x.isClicked)}
+            disabled={disabled || plainOptions.every(x => !!!x.isClicked)}
             on:click={(e) => handleConfirm(e)}
         >
             {confirmBtnText || 'Continue'}
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte
deleted file mode 100644
index 4b604713..00000000
--- a/src/routes/chat/[agentId]/[conversationId]/richContent/rich-content.svelte
+++ /dev/null
@@ -1,66 +0,0 @@
-<script>
-	import { RichType } from "$lib/helpers/enums";
-	import Markdown from "$lib/common/Markdown.svelte";
-	import RcPlainOptions from "./rc-plain-options.svelte";
-	import RcComplexOptions from "./rc-complex-options.svelte";
-
-    /** @type {any} */
-    export let message;
-
-    /** @type {boolean} */
-    export let displayOptionElements = false;
-
-    /** @type {boolean} */
-    export let disableOption = false;
-
-    /** @type {(args0: string, args1: string) => any} */
-    export let onConfirm = () => {};
-
-    /** @type {boolean} */
-    let isComplexElement = false;
-    let isMultiSelect = false;
-
-    /** @type {any[]} */
-    let options = [];
-
-    $: {
-        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;
-            }
-        }
-    }
-
-    /**
-     * @param {string} title
-     * @param {string} payload
-	 */
-     function handleConfirm(title, payload) {
-        onConfirm && onConfirm(title, payload);
-    }
-</script>
-
-<div class="ctext-wrap">
-	<div class="flex-shrink-0 align-self-center">
-        <Markdown text={message?.rich_content?.message?.text || message?.text} />
-    </div>
-</div>
-
-{#if displayOptionElements}
-    {#if !isComplexElement}
-        <RcPlainOptions options={options} isMultiSelect={isMultiSelect} disableOption={disableOption} onConfirm={handleConfirm} />
-    {:else}
-        <RcComplexOptions options={options} disableOption={disableOption} onConfirm={handleConfirm} />
-    {/if}
-{/if}
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rich-options.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rich-options.svelte
new file mode 100644
index 00000000..11aa9484
--- /dev/null
+++ b/src/routes/chat/[agentId]/[conversationId]/richContent/rich-options.svelte
@@ -0,0 +1,52 @@
+<script>
+	import { RichType } from "$lib/helpers/enums";
+	import RcPlainOptions from "./rc-plain-options.svelte";
+	import RcComplexOptions from "./rc-complex-options.svelte";
+	
+    /** @type {any} */
+    export let message;
+
+    /** @type {boolean} */
+    export let disabled = false;
+
+    /** @type {(args0: string, args1: string) => any} */
+    export let onConfirm = () => {};
+
+    /** @type {boolean} */
+    let isComplexElement = false;
+    let isMultiSelect = false;
+
+    /** @type {any[]} */
+    let options = [];
+
+    $: {
+        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;
+        }
+    }
+
+    /**
+     * @param {string} title
+     * @param {string} payload
+	 */
+     function handleConfirm(title, payload) {
+        onConfirm && onConfirm(title, payload);
+    }
+</script>
+
+{#if !isComplexElement}
+    <RcPlainOptions options={options} isMultiSelect={isMultiSelect} disabled={disabled} onConfirm={handleConfirm} />
+{:else}
+    <RcComplexOptions options={options} disabled={disabled} onConfirm={handleConfirm} />
+{/if}
\ No newline at end of file

From 8351fd38826a06092b4d9e6b286417367663fa8d Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Tue, 16 Apr 2024 10:35:58 -0500
Subject: [PATCH 2/2] refine button style

---
 src/lib/helpers/enums.js                                   | 3 +--
 .../[conversationId]/richContent/rc-complex-options.svelte | 6 +++---
 .../[conversationId]/richContent/rc-plain-options.svelte   | 4 ++++
 .../[conversationId]/richContent/rich-options.svelte       | 7 +++++--
 .../[agentId]/[conversationId]/stateLogs/state-log.svelte  | 4 ++--
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/lib/helpers/enums.js b/src/lib/helpers/enums.js
index 11c9e3c4..6ec07460 100644
--- a/src/lib/helpers/enums.js
+++ b/src/lib/helpers/enums.js
@@ -20,8 +20,7 @@ const richType = {
     QuickReply: 'quick_reply',
     Button: 'button_template',
     MultiSelect: 'multi-select_template',
-    Generic: 'generic_template',
-    Attachment: 'attachment'
+    Generic: 'generic_template'
 }
 export const RichType = Object.freeze(richType);
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte
index 34e7560c..7ccf8416 100644
--- a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-complex-options.svelte
@@ -86,10 +86,10 @@
         <Card class="card-element">
             <CardBody class="card-element-body">
                 {#if !!card.title}
-                <div class="card-element-title hide-text">{card.title}</div>
+                    <div class="card-element-title hide-text">{card.title}</div>
                 {/if}
                 {#if !!card.subtitle}
-                <div class="card-element-subtitle hide-text">{card.subtitle}</div>
+                    <div class="card-element-subtitle hide-text">{card.subtitle}</div>
                 {/if}
                 {#if card.options?.length > 0}
                     <div class="card-option-group">
@@ -115,7 +115,7 @@
         {#each buttons as option, index}
             <button
                 class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
-                style='text-align: center; width: 100%;'
+                style='width: 100%;'
                 disabled={disabled}
                 on:click={(e) => handleClickOption(e, option)}
             >
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte
index f1c51846..d80ce433 100644
--- a/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/richContent/rc-plain-options.svelte
@@ -10,6 +10,9 @@
     /** @type {boolean} */
     export let disabled = false;
 
+    /** @type {boolean} */
+    export let expandButton = false;
+
     /** @type {any[]} */
     export let options = [];
 
@@ -135,6 +138,7 @@
         <button
             class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
             class:active={!!option.isClicked}
+            style={`width: ${expandButton ? '100%' : 'fit-content'};`}
             disabled={disabled}
             on:click={(e) => handleClickOption(e, option, index)}
         >
diff --git a/src/routes/chat/[agentId]/[conversationId]/richContent/rich-options.svelte b/src/routes/chat/[agentId]/[conversationId]/richContent/rich-options.svelte
index 11aa9484..baf8cd1b 100644
--- a/src/routes/chat/[agentId]/[conversationId]/richContent/rich-options.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/richContent/rich-options.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { RichType } from "$lib/helpers/enums";
+	import { EditorType, ElementType, RichType } from "$lib/helpers/enums";
 	import RcPlainOptions from "./rc-plain-options.svelte";
 	import RcComplexOptions from "./rc-complex-options.svelte";
 	
@@ -15,6 +15,7 @@
     /** @type {boolean} */
     let isComplexElement = false;
     let isMultiSelect = false;
+    let expandButton = false;
 
     /** @type {any[]} */
     let options = [];
@@ -34,6 +35,8 @@
             // @ts-ignore
             isComplexElement = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
         }
+
+        expandButton = message?.rich_content?.editor === EditorType.File || options?.some(op => op.type === ElementType.Video);
     }
 
     /**
@@ -46,7 +49,7 @@
 </script>
 
 {#if !isComplexElement}
-    <RcPlainOptions options={options} isMultiSelect={isMultiSelect} disabled={disabled} onConfirm={handleConfirm} />
+    <RcPlainOptions options={options} isMultiSelect={isMultiSelect} expandButton={expandButton} disabled={disabled} onConfirm={handleConfirm} />
 {:else}
     <RcComplexOptions options={options} disabled={disabled} onConfirm={handleConfirm} />
 {/if}
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte b/src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte
index 2e00f24c..c323b677 100644
--- a/src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/stateLogs/state-log.svelte
@@ -101,7 +101,7 @@
         </div>
         <div class="state-log-section">
             <Splitpanes horizontal>
-                <Pane size={35} minSize={25} maxSize={75}>
+                <Pane size={35} minSize={20} maxSize={80}>
                     <div class="state-change-scrollbar state-change-log-list log-list padding-side">
                         <ul>
                             {#each stateChangeLogs as log}
@@ -110,7 +110,7 @@
                         </ul>
                     </div>
                 </Pane>
-                <Pane size={65} minSize={25} maxSize={75}>
+                <Pane size={65} minSize={20} maxSize={80}>
                     <div class="state-log-scrollbar state-log-list log-list padding-side">
                         <ul>
                             {#each stateLogs as log}