Features/refine chat window

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

@@ -225,22 +225,21 @@
 
                 button {
                     min-width: 50px;
-                    text-align: left;
                     border-radius: 10px;
                 }
             }
 
             .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;
                             }
                         }

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}

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}
+<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} />

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 = [];
@@ -86,17 +86,17 @@
         <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">
                         {#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='width: 100%;'
+                disabled={disabled}
                 on:click={(e) => handleClickOption(e, option)}
             >
                 {option.title}

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>

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

@@ -8,7 +8,10 @@
     export let isMultiSelect = false;
 
     /** @type {boolean} */
-    export let disableOption = false;
+    export let disabled = false;
+
+    /** @type {boolean} */
+    export let expandButton = false;
 
     /** @type {any[]} */
     export let options = [];
@@ -135,7 +138,8 @@
         <button
             class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
             class:active={!!option.isClicked}
-            disabled={disableOption}
+            style={`width: ${expandButton ? '100%' : 'fit-content'};`}
+            disabled={disabled}
             on:click={(e) => handleClickOption(e, option, index)}
         >
             {option.title}
@@ -145,7 +149,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'}

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

@@ -0,0 +1,55 @@
+<script>
+	import { EditorType, ElementType, 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;
+    let expandButton = 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;
+        }
+
+        expandButton = message?.rich_content?.editor === EditorType.File || options?.some(op => op.type === ElementType.Video);
+    }
+
+    /**
+     * @param {string} title
+     * @param {string} payload
+	 */
+     function handleConfirm(title, payload) {
+        onConfirm && onConfirm(title, payload);
+    }
+</script>
+
+{#if !isComplexElement}
+    <RcPlainOptions options={options} isMultiSelect={isMultiSelect} expandButton={expandButton} disabled={disabled} onConfirm={handleConfirm} />
+{:else}
+    <RcComplexOptions options={options} disabled={disabled} onConfirm={handleConfirm} />
+{/if}

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}