From ea71e403be5bfa66ff2821c639248c736e93a805 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Wed, 23 Oct 2024 00:22:00 -0500
Subject: [PATCH] refine agent config and rc options

---
 src/lib/scss/custom/pages/_chat.scss                | 13 +++++++++++--
 .../rich-content/rc-complex-options.svelte          |  4 ++++
 .../rich-content/rich-content.svelte                |  3 ++-
 .../page/agent/[agentId]/agent-llm-config.svelte    | 12 ++++++++++--
 4 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
index 43976cf0..14657c35 100644
--- a/src/lib/scss/custom/pages/_chat.scss
+++ b/src/lib/scss/custom/pages/_chat.scss
@@ -761,17 +761,26 @@
             justify-content: space-evenly;
             gap: 5px;
             padding: 10px 15px;
+            overflow-y: auto;
+            scrollbar-width: none;
+            height: 200px;
 
             .card-element-title {
-                font-size: 0.8rem;
+                font-size: 0.85rem;
                 font-weight: 700;
             }
 
             .card-element-subtitle {
-                font-size: 0.7rem;
+                font-size: 0.8rem;
                 font-weight: 500;
             }
 
+            .card-element-text {
+                font-size: 0.75rem;
+                font-weight: 400;
+                padding: 5px;
+            }
+
             .card-option-group {
                 margin-top: 5px;
 
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte
index 2142ced2..c1e7194b 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rc-complex-options.svelte
@@ -46,6 +46,7 @@
             return {
                 title: op.title,
                 subtitle: op.subtitle,
+                text: op.text,
                 image_url: op.image_url,
                 options: options
             };
@@ -114,6 +115,9 @@
                         {#if !!card.subtitle}
                             <div class="card-element-subtitle hide-text">{@html card.subtitle}</div>
                         {/if}
+                        {#if !!card.text}
+                            <div class="card-element-text hide-text">{card.text}</div>
+                        {/if}
                         {#if card.options?.length > 0}
                             <div class="card-option-group">
                                 {#each card.options as option, i (i)}
diff --git a/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte b/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
index 85a795e0..6e0064d3 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
@@ -33,8 +33,9 @@
             isMultiSelect = true;
         } else if (richType === RichType.Generic) {
             options = message?.rich_content?.message?.elements;
+            isComplexElement = true;
             // @ts-ignore
-            isComplexElement = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
+            // isComplexElement = message?.rich_content?.message?.elements?.some(x => x.buttons?.length > 0) || false;
         } else if (message?.rich_content?.editor === EditorType.File) {
             options = message?.rich_content?.message?.buttons;
         }
diff --git a/src/routes/page/agent/[agentId]/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-llm-config.svelte
index 8c132d76..26db5c79 100644
--- a/src/routes/page/agent/[agentId]/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-llm-config.svelte
@@ -23,8 +23,16 @@
         if (!!config.provider) {
             models = await getLlmProviderModels(config.provider);
         }
+        init();
     });
 
+    function init() {
+        const foundProvider = providers.find(x => x === config.provider);
+        const foundModel = models.find(x => x.name === config.model);
+        config.provider = foundProvider || null;
+        config.model = foundModel?.name || null;
+    }
+
     /** @param {any} e */
     async function changeProvider(e) {
         const provider = e.target.value;
@@ -67,7 +75,7 @@
             <h5 class="mt-1 mb-3">LLM Config</h5>
             <img src="images/brands/azure-openai-logo.avif" alt="" height="50" />
             {#if agent.llm_config?.is_inherit}
-            <i class="bx bx-copy"></i> <span class="text-muted">Inherited</span>    
+                <i class="bx bx-copy"></i> <span class="text-muted">Inherited</span>    
             {/if}
         </div>
 
@@ -93,7 +101,7 @@
                     {#each models as option}
                         <option value={option.name} selected={option.name == config.model}>{option.name}</option>
                     {/each}
-                </Input>                
+                </Input>
             </div>
         </div>