refine option card style

Author: Jicheng Lu

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

@@ -169,7 +169,7 @@
             flex-direction: column;
             width: 80%;
 
-            .video-group-container {
+            .video-option-container {
                 display: flex;
                 flex-wrap: wrap;
                 gap: 5px;
@@ -248,26 +248,32 @@
                         max-width: 100%;
                     }
 
-                    .card-element-title {
-                        font-size: 0.8rem;
-                        font-weight: 700;
-                        height: 30%;
-                    }
-
-                    .card-element-subtitle {
-                        font-size: 0.7rem;
-                        font-weight: 500;
-                        height: 8%;
-                    }
-
-                    .card-option-group {
-                        margin-top: 5px;
+                    .card-element-body {
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: space-evenly;
+                        gap: 5px;
+                        padding: 10px 15px;
 
-                        .btn {
-                            display: block;
-                            margin-left: 0px !important;
-                            text-align: left;
-                            border-radius: 10px;
+                        .card-element-title {
+                            font-size: 0.8rem;
+                            font-weight: 700;
+                        }
+    
+                        .card-element-subtitle {
+                            font-size: 0.7rem;
+                            font-weight: 500;
+                        }
+    
+                        .card-option-group {
+                            margin-top: 5px;
+    
+                            .btn {
+                                display: block;
+                                margin-left: 0px !important;
+                                text-align: left;
+                                border-radius: 10px;
+                            }
                         }
                     }
                 }

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

@@ -150,7 +150,7 @@
 		isFrame = $page.url.searchParams.get('isFrame') === 'true';
 		// initial condition
 		isContentLogClosed = false;
-		isStateLogClosed = false;
+		isStateLogClosed = true;
 		resizeChatWindow();
 	}
 

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

@@ -16,6 +16,8 @@
 
     /** @type {any[]} */
     let cards = [];
+    /** @type {any[]} */
+    let buttons = [];
 
     onMount(() => {
         reset();
@@ -25,12 +27,14 @@
 
     /** @param {any[]} options */
     function collectOptions(options) {
-        cards = options?.map(op => {
+        cards = options?.filter(op => !!op.title || !!op.subtitle)?.map(op => {
             // @ts-ignore
-            const options = op.buttons?.filter(op => !!op.title && !!op.payload)?.map(x => {
+            const options = op.buttons?.filter(x => !!x.title && !!x.payload)?.map(x => {
                 return {
                     title: x.title,
-                    payload: x.payload
+                    payload: x.payload,
+                    is_primary: x.is_primary,
+                    is_secondary: x.is_secondary,
                 };
             }) || [];
 
@@ -40,6 +44,18 @@
                 options: options
             };
         }) || [];
+
+        buttons = options?.filter(op => !!!op.title && !!!op.subtitle)?.flatMap(op => {
+            // @ts-ignore
+            return op.buttons?.filter(x => !!x.title && !!x.payload)?.map(x => {
+                return {
+                    title: x.title,
+                    payload: x.payload,
+                    is_primary: x.is_primary,
+                    is_secondary: x.is_secondary,
+                };
+            }) || [];;
+        }) || [];
     }
 
     /**
@@ -69,18 +85,18 @@
     <div class="complex-option-container">
         {#each cards as card, idx (idx)}
         <Card class="card-element">
-            <CardBody>
+            <CardBody class="card-element-body">
                 {#if !!card.title}
-                <div class="card-element-title mb-3">{card.title}</div>
+                <div class="card-element-title hide-text">{card.title}</div>
                 {/if}
                 {#if !!card.subtitle}
-                <div class="card-element-subtitle mb-3">{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-outline-primary btn-sm m-1"
+                                class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
                                 disabled={disableOption}
                                 on:click={(e) => handleClickOption(e, option)}
                             >
@@ -94,3 +110,17 @@
         {/each}
     </div>
 {/if}
+
+{#if buttons.length > 0}
+    <div class="plain-option-container" style="margin-top: 5px;">
+        {#each buttons as option, index}
+            <button
+                class={`btn btn-sm m-1 ${option.is_secondary ? 'btn-outline-secondary': 'btn-outline-primary'}`}
+                disabled={disableOption}
+                on:click={(e) => handleClickOption(e, option)}
+            >
+                {option.title}
+            </button>
+        {/each}
+    </div>
+{/if}

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

@@ -14,7 +14,7 @@
     export let options = [];
 
     /** @type {(args0: string, args1: string) => any} */
-    export let onConfirm;
+    export let onConfirm = () => {};
 
     /** @type {() => any} */
     export let refresh = () => {};
@@ -113,7 +113,7 @@
 
 {#if videoOptions.length > 0}
 <div>
-    <div class="video-group-container">
+    <div class="video-option-container">
         {#each videoOptions as video, index}
             <Card class="video-element-card">
                 <CardBody>