From 2abdaabfdba1e83173d6322ae55e1a75a873c35a Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 20 Nov 2024 17:07:41 -0600
Subject: [PATCH 1/9] refine agent utility

---
 src/lib/helpers/types/agentTypes.js           |  14 +-
 src/lib/scss/custom/pages/_agent.scss         |  64 +++-
 src/lib/scss/custom/pages/_chat.scss          |   1 -
 src/routes/page/agent/[agentId]/+page.svelte  |  17 +-
 .../agent/[agentId]/agent-llm-config.svelte   |   6 +-
 .../agent/[agentId]/agent-overview.svelte     |  61 +---
 .../page/agent/[agentId]/agent-utility.svelte | 290 ++++++++++++++++++
 7 files changed, 387 insertions(+), 66 deletions(-)
 create mode 100644 src/routes/page/agent/[agentId]/agent-utility.svelte

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 8d344d03..c7a28bad 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -49,7 +49,7 @@
  * @property {boolean} allow_routing
  * @property {string} icon_url - Icon
  * @property {string[]} profiles - The agent profiles.
- * @property {string[]} utilities - The agent utilities.
+ * @property {AgentUtility[]} utilities - The agent utilities.
  * @property {Date} created_datetime
  * @property {Date} updated_datetime
  * @property {AgentLlmConfig} llm_config - LLM settings.
@@ -119,4 +119,16 @@
  */
 
 
+/**
+ * @typedef {Object} AgentUtility
+ * @property {string} name 
+ * @property {UtilityBase[]} functions
+ * @property {UtilityBase[]} templates
+ */
+
+/**
+ * @typedef {Object} UtilityBase
+ * @property {string} name
+ */
+
 export default {};
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 9ae91149..a9a20b4f 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -37,7 +37,6 @@
 
             i {
                 cursor: pointer;
-                font-size: 18px;
                 color: red;
             }
         }
@@ -102,4 +101,67 @@
             }
         }
     }
+}
+
+.agent-utility-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    
+    .utility-wrapper {
+        border: 1px dotted var(--bs-primary);
+        border-radius: 5px;
+        padding: 10px;
+
+        .utility-row {
+
+            .utility-label {
+                width: 30%;
+            }
+
+            .utility-value {
+                width: 70%;
+                display: flex;
+                gap: 5px;
+
+                .add-list {
+                    font-size: 20px;
+                }
+            }
+
+            .utility-input {
+                width: 95%;
+            }
+
+            .utility-delete {
+                width: 5%;
+            }
+        }
+
+        .utility-row-primary {
+            display: flex;
+        }
+
+        .utility-row-secondary {
+            display: flex;
+            flex-direction: column;
+
+            .utility-content {
+                display: flex;
+                flex-direction: column;
+                gap: 3px;
+                border-top: 1px dotted var(--bs-primary);
+                margin-top: 10px;
+                padding-top: 10px;
+
+                .utility-list-item {
+                    display: flex;
+
+                    .utility-label {
+                        font-size: 12px;
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/lib/scss/custom/pages/_chat.scss b/src/lib/scss/custom/pages/_chat.scss
index b9835833..e537165c 100644
--- a/src/lib/scss/custom/pages/_chat.scss
+++ b/src/lib/scss/custom/pages/_chat.scss
@@ -534,7 +534,6 @@
                 .log-collapse {
                     overflow-y: hidden;
                     height: fit-content;
-                    min-height: 100px;
                     max-height: 200px;
                     display: -webkit-box;
                     -webkit-box-orient: vertical;
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 84cc4bd0..9a410036 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -18,6 +18,7 @@
     import { _ } from 'svelte-i18n'  
     import Swal from 'sweetalert2'
 	import { goto } from '$app/navigation';
+	import AgentUtility from './agent-utility.svelte';
 	
 	
     /** @type {import('$agentTypes').AgentModel} */
@@ -26,6 +27,8 @@
     let agentFunctionCmp = null;
     /** @type {any} */
     let agentPromptCmp = null;
+    /** @type {any} */
+    let agentUtilityCmp = null;
 
     /** @type {boolean} */
     let isLoading = false;
@@ -65,6 +68,7 @@
     function handleAgentUpdate() {
         fetchJsonContent();
         fetchPrompts();
+        fetchUtilties();
 
         agent = {
             ...agent,
@@ -72,7 +76,7 @@
             instruction: agent.instruction || '',
             channel_instructions: agent.channel_instructions || [],
             profiles: agent.profiles?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
-            utilities: agent.utilities?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || []
+            utilities: agent.utilities || []
         };
         isLoading = true;
         saveAgent(agent).then(res => {
@@ -110,6 +114,11 @@
         agent.channel_instructions = obj.channelPrompts || [];
     }
 
+    function fetchUtilties() {
+        const list = agentUtilityCmp?.fetchUtilities();
+        agent.utilities = list || [];
+    }
+
     function refreshChannelPrompts() {
         agentPromptCmp?.refreshChannelPrompts();
     }
@@ -145,15 +154,17 @@
     <Row class="agent-detail-sections">
         <Col class="section-min-width agent-overview" style="flex: 35%;">
             <div class="agent-detail-section">
-                <AgentOverview agent={agent} profiles={agent.profiles || []} utilities={agent.utilities || []} />
+                <AgentOverview agent={agent} profiles={agent.profiles || []} />
             </div>
-
             <div class="agent-detail-section">
                 <AgentLlmConfig agent={agent} />
                 {#if agent.routing_rules?.length > 0}
                     <AgentRouting agent={agent} />
                 {/if}
             </div>
+            <div class="agent-detail-section">
+                <AgentUtility bind:this={agentUtilityCmp} agent={agent} />
+            </div>
         </Col>
         <Col class="section-min-width" style="flex: 65%;">
             <div class="agent-detail-section">
diff --git a/src/routes/page/agent/[agentId]/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-llm-config.svelte
index 26db5c79..d1b1af50 100644
--- a/src/routes/page/agent/[agentId]/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-llm-config.svelte
@@ -1,8 +1,8 @@
 <script>
-    import { Button, Card, CardBody, CardHeader, Col, Input } from '@sveltestrap/sveltestrap';
-    import { getLlmProviders, getLlmProviderModels } from '$lib/services/llm-provider-service';
     import { onMount } from 'svelte';
-
+    import { Card, CardBody, Input } from '@sveltestrap/sveltestrap';
+    import { getLlmProviders, getLlmProviderModels } from '$lib/services/llm-provider-service';
+    
     /** @type {string[]} */
     let providers = [];
 
diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-overview.svelte
index e4a5e5c9..b05daa5b 100644
--- a/src/routes/page/agent/[agentId]/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-overview.svelte
@@ -6,21 +6,18 @@
 	import { AgentType } from '$lib/helpers/enums';
 	import { getAgentUtilities } from '$lib/services/agent-service';
 
+    const profileLimit = 10;
+
+
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
 
     /** @type {string[]} */
     export let profiles = [];
 
-    /** @type {string[]} */
-    export let utilities = [];
-
     /** @type {string[]} */
     let utilityOptions = [];
 
-    const profileLimit = 10;
-    const utilityLimit = 10;
-
     onMount(() => {
         getAgentUtilities().then(data => {
             const list = data?.filter(x => x?.trim()?.length > 0) || [];
@@ -43,21 +40,6 @@
         agent.profiles = profiles;
     }
 
-    function addUtility() {
-        if (!!!agent) return;
-
-        utilities = [...utilities, ''];
-        agent.utilities = utilities;
-    }
-
-    /**
-	 * @param {number} index
-	 */
-    function removeUtility(index) {
-        utilities = utilities.filter((x, idx) => idx !== index);
-        agent.utilities = utilities;
-    }
-
     function chatWithAgent() {
         if (!!!agent?.id) return;
         
@@ -165,42 +147,7 @@
                             </div>
                         </td>
                     </tr>
-                    <tr>
-                        <th class="agent-prop-key">Utilities</th>
-                        <td>
-                            <div class="agent-prop-list-container">
-                                {#each utilities as utility, index}
-                                <div class="edit-wrapper">
-                                    <Input type="select" class="edit-text-box" bind:value={utility}>
-                                        {#each utilityOptions as option}
-                                            <option selected={utility === option}>{option}</option>
-                                        {/each}
-                                    </Input>
-                                    <div class="delete-icon">
-                                        <i
-                                            class="bx bxs-no-entry"
-                                            role="link"
-                                            tabindex="0"
-                                            on:keydown={() => {}}
-                                            on:click={() => removeUtility(index)}
-                                        />
-                                    </div>
-                                </div>
-                                {/each}
-                                {#if utilities?.length < utilityLimit}
-                                <div class="list-add">
-                                    <i
-                                        class="bx bx bx-list-plus"
-                                        role="link"
-                                        tabindex="0"
-                                        on:keydown={() => {}}
-                                        on:click={() => addUtility()}
-                                    />
-                                </div>
-                                {/if}
-                            </div>
-                        </td>
-                    </tr>
+                    
                     <tr>
                         <th class="agent-prop-key">Status</th>
                         <td>							
diff --git a/src/routes/page/agent/[agentId]/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-utility.svelte
new file mode 100644
index 00000000..8296bff8
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-utility.svelte
@@ -0,0 +1,290 @@
+<script>
+    import { onMount } from 'svelte';
+    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
+    import { getAgentUtilities } from '$lib/services/agent-service';
+
+    const limit = 5;
+    const maxLength = 30;
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    export const fetchUtilities = () => {
+        const candidates = innerUtilities?.filter(x => !!x.name)?.map(x => {
+            /** @type {import('$agentTypes').UtilityBase[]} */
+            const functions = [];
+            /** @type {import('$agentTypes').UtilityBase[]} */
+            const templates = [];
+
+            const uniqueFns = new Set();
+            const uniqueTps = new Set();
+
+            const fns = x.functions.filter(f => !!f.name?.trim()).map(f => ({ ...f, name: f.name.trim().toLowerCase() }));
+            const tps = x.templates.filter(t => !!t.name?.trim()).map(t => ({ ...t, name: t.name.trim().toLowerCase() }));
+
+            fns.forEach(f => {
+                if (!uniqueFns.has(f.name)) {
+                    functions.push({ ...f });
+                    uniqueFns.add(f.name);
+                }
+            });
+
+            tps.forEach(t => {
+                if (!uniqueTps.has(t.name)) {
+                    templates.push({ ...t });
+                    uniqueTps.add(t.name);
+                }
+            });
+
+            return {
+                name: x.name,
+                functions: functions,
+                templates: templates
+            };
+        });
+
+        refresh(candidates);
+        return candidates;
+    }
+
+
+    /** @type {string[]} */
+    let utilityOptions = [];
+
+    /** @type {import('$agentTypes').AgentUtility[]} */
+    let innerUtilities = [];
+
+    onMount(async () =>{
+        getAgentUtilities().then(data => {
+            const list = data?.filter(x => x?.trim()?.length > 0) || [];
+            utilityOptions = ["", ...list];
+        });
+        init();
+    });
+
+    function init() {
+        refresh(agent.utilities);
+    }
+
+    /**
+	 * @param {any} e
+	 * @param {number} idx
+	 */
+    function changeUtility(e, idx) {
+        const found = innerUtilities.find((_, index) => index === idx);
+        if (!found) return;
+
+        found.name = e.target.value;
+    }
+
+    function addUtility() {
+        innerUtilities = [
+            ...innerUtilities,
+            {
+                name: '',
+                functions: [],
+                templates: []
+            }
+        ];
+    }
+
+    /** @param {number} idx */
+    function deleteUtility(idx) {
+        innerUtilities = innerUtilities.filter((_, index) => index !== idx);
+    }
+
+
+    /** @param {number} uid */
+    function addFunction(uid) {
+        const found = innerUtilities.find((_, index) => index === uid);
+        if (!found) return;
+
+        found.functions.push({ name: '' });
+        refresh(innerUtilities);
+    }
+
+    /**
+	 * @param {number} uid
+	 * @param {number} fid
+	 */
+    function deleteFunction(uid, fid) {
+        const found = innerUtilities.find((_, index) => index === uid);
+        if (!found) return;
+
+        const fns = found.functions?.filter((_, index) => index !== fid) || [];
+        found.functions = fns;
+        refresh(innerUtilities);
+    }
+
+
+    /** @param {number} uid */
+    function addTemplate(uid) {
+        const found = innerUtilities.find((_, index) => index === uid);
+        if (!found) return;
+
+        found.templates.push({ name: '' });
+        refresh(innerUtilities);
+    }
+
+    /**
+	 * @param {number} uid
+	 * @param {number} tid
+	 */
+    function deleteTemplate(uid, tid) {
+        const found = innerUtilities.find((_, index) => index === uid);
+        if (!found) return;
+
+        const tps = found.templates?.filter((_, index) => index !== tid) || [];
+        found.templates = tps;
+        refresh(innerUtilities);
+    }
+
+
+    /** @param {import('$agentTypes').AgentUtility[]} list */
+    function refresh(list) {
+        innerUtilities = list?.map(x => {
+            return {
+                name: x.name,
+                functions: x.functions.map(f => ({ ...f })),
+                templates: x.templates.map(t => ({ ...t }))
+            }
+        }) || [];
+    }
+</script>
+
+<Card>
+    <CardBody>
+        <div class="text-center">
+            <h5 class="mt-1 mb-3">Utilities</h5>
+        </div>
+
+        <div class="agent-utility-container">
+            <div>
+
+            </div>
+
+            {#each innerUtilities as utility, uid (uid)}
+                <div class="utility-wrapper">
+                    <div class="utility-row utility-row-primary">
+                        <div class="utility-label line-align-center fw-bold">
+                            {`Utility #${uid + 1}`}
+                        </div>
+                        <div class="utility-value">
+                            <div class="utility-input line-align-center">
+                                <Input type="select" value={utility.name} on:change={e => changeUtility(e, uid)}>
+                                    {#each utilityOptions as option}
+                                        <option value={option} selected={option == utility.name}>{option}</option>
+                                    {/each}
+                                </Input>
+                            </div>
+                            <div class="utility-delete line-align-center">
+                                <i
+                                    class="bx bxs-no-entry text-danger clickable"
+                                    role="link"
+                                    tabindex="0"
+                                    on:keydown={() => {}}
+                                    on:click={() => deleteUtility(uid)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="utility-row utility-row-secondary">
+                        <div class="utility-content">
+                            {#each utility.functions as fn, fid (fid)}
+                                <div class="utility-list-item">
+                                    <div class="utility-label line-align-center">
+                                        {fid === 0 ? 'Functions' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <div class="utility-input line-align-center">
+                                            <Input bind:value={fn.name} maxlength={maxLength} />
+                                        </div>
+                                        <div class="utility-delete line-align-center">
+                                            <i
+                                                class="bx bxs-no-entry text-danger clickable"
+                                                role="link"
+                                                tabindex="0"
+                                                on:keydown={() => {}}
+                                                on:click={() => deleteFunction(uid, fid)}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            {/each}
+
+                            {#if utility.functions?.length < limit}
+                                <div class="utility-list-item">
+                                    <div class="utility-label">
+                                        {utility.functions.length === 0 ? 'Functions' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <i
+                                            class="bx bx-list-plus add-list clickable"
+                                            role="link"
+                                            tabindex="0"
+                                            on:keydown={() => {}}
+                                            on:click={() => addFunction(uid)}
+                                        />
+                                    </div>
+                                </div>
+                            {/if}
+                        </div>
+
+                        <div class="utility-content">
+                            {#each utility.templates as tp, tid (tid)}
+                                <div class="utility-list-item">
+                                    <div class="utility-label line-align-center">
+                                        {tid === 0 ? 'Templates' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <div class="utility-input line-align-center">
+                                            <Input bind:value={tp.name} maxlength={maxLength} />
+                                        </div>
+                                        <div class="utility-delete line-align-center">
+                                            <i
+                                                class="bx bxs-no-entry text-danger clickable"
+                                                role="link"
+                                                tabindex="0"
+                                                on:keydown={() => {}}
+                                                on:click={() => deleteTemplate(uid, tid)}
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            {/each}
+
+                            {#if utility.templates?.length < limit}
+                                <div class="utility-list-item">
+                                    <div class="utility-label">
+                                        {utility.templates.length === 0 ? 'Templates' : ''}
+                                    </div>
+                                    <div class="utility-value">
+                                        <i
+                                            class="bx bx-list-plus add-list clickable"
+                                            role="link"
+                                            tabindex="0"
+                                            on:keydown={() => {}}
+                                            on:click={() => addTemplate(uid)}
+                                        />
+                                    </div>
+                                </div>
+                            {/if}
+                        </div>
+                    </div>
+                </div>
+            {/each}
+
+            {#if innerUtilities.length < limit}
+                <div class="add-utility">
+                    <Button color="primary" on:click={() => addUtility()}>
+                        <span>
+                            <i class="bx bx-plus" />
+                            <span>Add utility</span>
+                        </span>
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </CardBody>
+</Card>
\ No newline at end of file

From 25bd44b6209aadcaa82db3b6750d51f4de6ffa4c Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 20 Nov 2024 17:57:59 -0600
Subject: [PATCH 2/9] add merge utility

---
 src/lib/helpers/types/agentTypes.js           |  1 +
 src/lib/scss/custom/pages/_agent.scss         | 10 +++++++
 .../page/agent/[agentId]/agent-utility.svelte | 30 +++++++++++++++++--
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index c7a28bad..43c1ffc5 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -49,6 +49,7 @@
  * @property {boolean} allow_routing
  * @property {string} icon_url - Icon
  * @property {string[]} profiles - The agent profiles.
+ * @property {boolean} merge_utility - Merge utility
  * @property {AgentUtility[]} utilities - The agent utilities.
  * @property {Date} created_datetime
  * @property {Date} updated_datetime
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index a9a20b4f..1f78f684 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -107,6 +107,16 @@
     display: flex;
     flex-direction: column;
     gap: 10px;
+
+    .merge-utility {
+        display: flex;
+        gap: 3px;
+        
+        input {
+            outline: none !important;
+            box-shadow: none !important;
+        }
+    }
     
     .utility-wrapper {
         border: 1px dotted var(--bs-primary);
diff --git a/src/routes/page/agent/[agentId]/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-utility.svelte
index 8296bff8..75c5211b 100644
--- a/src/routes/page/agent/[agentId]/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-utility.svelte
@@ -1,6 +1,6 @@
 <script>
     import { onMount } from 'svelte';
-    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
+    import { Card, CardBody, Input, Button, Tooltip } from '@sveltestrap/sveltestrap';
     import { getAgentUtilities } from '$lib/services/agent-service';
 
     const limit = 5;
@@ -150,6 +150,15 @@
             }
         }) || [];
     }
+
+
+    /** @param {any} e */
+    function changeMergeUtility(e) {
+        const checked = e.target.checked;
+        if (!!agent) {
+            agent.merge_utility = checked;
+        }
+    }
 </script>
 
 <Card>
@@ -159,8 +168,23 @@
         </div>
 
         <div class="agent-utility-container">
-            <div>
-
+            <div class="merge-utility">
+                <Input
+					type="checkbox"
+					checked={agent?.merge_utility || false}
+					on:change={e => changeMergeUtility(e)}
+				/>
+                <div class="fw-bold">
+                    Merge utility
+                </div>
+                <div
+                    class="line-align-center"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    title="Merge with entry agent utilities"
+                >
+                    <i class="bx bx-info-circle" />
+                </div>
             </div>
 
             {#each innerUtilities as utility, uid (uid)}

From 9153dadf28f484bf3bbb263a4475a25d7d7d031b Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 21 Nov 2024 00:49:22 -0600
Subject: [PATCH 3/9] refine utility

---
 src/lib/helpers/types/agentTypes.js           |   1 +
 src/lib/scss/custom/pages/_agent.scss         |  17 +-
 src/lib/services/agent-service.js             |   6 +-
 src/lib/services/api-endpoints.js             |   2 +-
 .../agent/[agentId]/agent-overview.svelte     |  11 +-
 .../page/agent/[agentId]/agent-utility.svelte | 181 ++++++++++++++----
 6 files changed, 162 insertions(+), 56 deletions(-)

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 43c1ffc5..d6d70480 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -123,6 +123,7 @@
 /**
  * @typedef {Object} AgentUtility
  * @property {string} name 
+ * @property {boolean} disabled 
  * @property {UtilityBase[]} functions
  * @property {UtilityBase[]} templates
  */
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 1f78f684..addc72a8 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -111,7 +111,7 @@
     .merge-utility {
         display: flex;
         gap: 3px;
-        
+
         input {
             outline: none !important;
             box-shadow: none !important;
@@ -150,6 +150,21 @@
 
         .utility-row-primary {
             display: flex;
+
+            .utility-label {
+                display: flex;
+                gap: 10px;
+
+                .utility-tooltip {
+                    display: flex;
+                    gap: 3px;
+                }
+
+                input {
+                    outline: none !important;
+                    box-shadow: none !important;
+                }
+            }
         }
 
         .utility-row-secondary {
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index bd121bbd..7005546a 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -84,10 +84,10 @@ export async function createAgent(agent) {
 
 /**
  * Get agent utilities
- * @returns {Promise<string[]>}
+ * @returns {Promise<import('$agentTypes').AgentUtility[]>}
  */
-export async function getAgentUtilities() {
-    const url = endpoints.agentUtilitiesUrl;
+export async function getAgentUtilityOptions() {
+    const url = endpoints.agentUtilityOptionsUrl;
     const response = await axios.get(url);
     return response.data;
 }
\ No newline at end of file
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
index 7c9929c4..dcd523c1 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -33,7 +33,7 @@ export const endpoints = {
     agentDetailUrl: `${host}/agent/{id}`,
     agentRefreshUrl: `${host}/refresh-agents`,
     agentCreateUrl: `${host}/agent`,
-    agentUtilitiesUrl: `${host}/agent/utilities`,
+    agentUtilityOptionsUrl: `${host}/agent/utility/options`,
     
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-overview.svelte
index b05daa5b..870b0ae1 100644
--- a/src/routes/page/agent/[agentId]/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-overview.svelte
@@ -4,7 +4,6 @@
     import InPlaceEdit from '$lib/common/InPlaceEdit.svelte'
     import { format } from '$lib/helpers/datetime';
 	import { AgentType } from '$lib/helpers/enums';
-	import { getAgentUtilities } from '$lib/services/agent-service';
 
     const profileLimit = 10;
 
@@ -15,15 +14,7 @@
     /** @type {string[]} */
     export let profiles = [];
 
-    /** @type {string[]} */
-    let utilityOptions = [];
-
-    onMount(() => {
-        getAgentUtilities().then(data => {
-            const list = data?.filter(x => x?.trim()?.length > 0) || [];
-            utilityOptions = ["", ...list];
-        });
-    });
+    onMount(() => {});
 
     function addProfile() {
         if (!!!agent) return;
diff --git a/src/routes/page/agent/[agentId]/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-utility.svelte
index 75c5211b..ae17c937 100644
--- a/src/routes/page/agent/[agentId]/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-utility.svelte
@@ -1,7 +1,7 @@
 <script>
     import { onMount } from 'svelte';
-    import { Card, CardBody, Input, Button, Tooltip } from '@sveltestrap/sveltestrap';
-    import { getAgentUtilities } from '$lib/services/agent-service';
+    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
+    import { getAgentUtilityOptions } from '$lib/services/agent-service';
 
     const limit = 5;
     const maxLength = 30;
@@ -18,9 +18,8 @@
 
             const uniqueFns = new Set();
             const uniqueTps = new Set();
-
-            const fns = x.functions.filter(f => !!f.name?.trim()).map(f => ({ ...f, name: f.name.trim().toLowerCase() }));
-            const tps = x.templates.filter(t => !!t.name?.trim()).map(t => ({ ...t, name: t.name.trim().toLowerCase() }));
+            const fns = x.functions.filter(f => !!f.name);
+            const tps = x.templates.filter(t => !!t.name);
 
             fns.forEach(f => {
                 if (!uniqueFns.has(f.name)) {
@@ -38,6 +37,7 @@
 
             return {
                 name: x.name,
+                disabled: x.disabled,
                 functions: functions,
                 templates: templates
             };
@@ -47,6 +47,8 @@
         return candidates;
     }
 
+    /** @type {any} */
+    let utilityMapper = {};
 
     /** @type {string[]} */
     let utilityOptions = [];
@@ -55,9 +57,26 @@
     let innerUtilities = [];
 
     onMount(async () =>{
-        getAgentUtilities().then(data => {
-            const list = data?.filter(x => x?.trim()?.length > 0) || [];
-            utilityOptions = ["", ...list];
+        getAgentUtilityOptions().then(data => {
+            const list = data || [];
+            list.forEach(item => {
+                const fns = item.functions.map(f => f.name);
+                const tps = item.templates.map(t => t.name);
+
+                if (!utilityMapper[item.name]) {
+                    utilityMapper[item.name] = {
+                        functions: ["", ...fns],
+                        templates: ["", ...tps]
+                    };
+                } else {
+                    const prevFns = utilityMapper[item.name].functions;
+                    const prevTps = utilityMapper[item.name].templates;
+                    utilityMapper[item.name].functions = [...prevFns, fns];
+                    utilityMapper[item.name].templates = [...prevTps, tps];
+                }
+            });
+            const names = list.map(x => x.name) || [];
+            utilityOptions = ["", ...names];
         });
         init();
     });
@@ -73,8 +92,18 @@
     function changeUtility(e, idx) {
         const found = innerUtilities.find((_, index) => index === idx);
         if (!found) return;
-
-        found.name = e.target.value;
+        
+        const name = e.target.value;
+        found.name = name;
+        found.functions = [
+            // @ts-ignore
+            ...utilityMapper[name].functions?.filter(x => !!x)?.map(x => ({ name: x })) || []
+        ];
+        found.templates = [
+            // @ts-ignore
+            ...utilityMapper[name].templates?.filter(x => !!x)?.map(x => ({ name: x })) || []
+        ];
+        refresh(innerUtilities);
     }
 
     function addUtility() {
@@ -82,6 +111,7 @@
             ...innerUtilities,
             {
                 name: '',
+                disabled: false,
                 functions: [],
                 templates: []
             }
@@ -93,49 +123,77 @@
         innerUtilities = innerUtilities.filter((_, index) => index !== idx);
     }
 
-
-    /** @param {number} uid */
-    function addFunction(uid) {
+    /**
+	 * @param {number} uid
+	 * @param {string} type
+	 */
+    function addUtilityContent(uid, type) {
         const found = innerUtilities.find((_, index) => index === uid);
-        if (!found) return;
+        if (!found || found.disabled) return;
+
+        if (type === 'function') {
+            found.functions.push({ name: '' });
+        } else if (type === 'template') {
+            found.templates.push({ name: '' });
+        }
 
-        found.functions.push({ name: '' });
         refresh(innerUtilities);
     }
 
     /**
 	 * @param {number} uid
-	 * @param {number} fid
+	 * @param {number} id
+     * @param {string} type
 	 */
-    function deleteFunction(uid, fid) {
+    function deleteUtilityContent(uid, id, type) {
         const found = innerUtilities.find((_, index) => index === uid);
-        if (!found) return;
-
-        const fns = found.functions?.filter((_, index) => index !== fid) || [];
-        found.functions = fns;
+        if (!found || found.disabled) return;
+
+        if (type === 'function') {
+            const fns = found.functions?.filter((_, index) => index !== id) || [];
+            found.functions = fns;
+        } else if (type === 'template') {
+            const tps = found.templates?.filter((_, index) => index !== id) || [];
+            found.templates = tps;
+        }
+        
         refresh(innerUtilities);
     }
 
-
-    /** @param {number} uid */
-    function addTemplate(uid) {
+    
+    /**
+     * @param {any} e
+	 * @param {number} uid
+     * @param {number} idx
+     * @param {string} type
+	 */
+    function selectContent(e, uid, idx, type) {
         const found = innerUtilities.find((_, index) => index === uid);
         if (!found) return;
 
-        found.templates.push({ name: '' });
+        if (type === 'function') {
+            const fn = found.functions?.find((_, index) => index === idx);
+            if (fn) {
+                fn.name = e.target.value;
+            }
+        } else if (type === 'template') {
+            const tp = found.templates?.find((_, index) => index === idx);
+            if (tp) {
+                tp.name = e.target.value;
+            }
+        }
         refresh(innerUtilities);
     }
 
     /**
+     * @param {any} e
 	 * @param {number} uid
-	 * @param {number} tid
 	 */
-    function deleteTemplate(uid, tid) {
+    function toggleUtility(e, uid) {
         const found = innerUtilities.find((_, index) => index === uid);
         if (!found) return;
 
-        const tps = found.templates?.filter((_, index) => index !== tid) || [];
-        found.templates = tps;
+        found.disabled = e.target.checked;
         refresh(innerUtilities);
     }
 
@@ -145,6 +203,7 @@
         innerUtilities = list?.map(x => {
             return {
                 name: x.name,
+                disabled: x.disabled,
                 functions: x.functions.map(f => ({ ...f })),
                 templates: x.templates.map(t => ({ ...t }))
             }
@@ -153,7 +212,7 @@
 
 
     /** @param {any} e */
-    function changeMergeUtility(e) {
+    function toggleMergeUtility(e) {
         const checked = e.target.checked;
         if (!!agent) {
             agent.merge_utility = checked;
@@ -172,10 +231,10 @@
                 <Input
 					type="checkbox"
 					checked={agent?.merge_utility || false}
-					on:change={e => changeMergeUtility(e)}
+					on:change={e => toggleMergeUtility(e)}
 				/>
                 <div class="fw-bold">
-                    Merge utility
+                    Merge utilities
                 </div>
                 <div
                     class="line-align-center"
@@ -190,12 +249,34 @@
             {#each innerUtilities as utility, uid (uid)}
                 <div class="utility-wrapper">
                     <div class="utility-row utility-row-primary">
-                        <div class="utility-label line-align-center fw-bold">
-                            {`Utility #${uid + 1}`}
+                        <div class="utility-label fw-bold">
+                            <div class="line-align-center">{`Utility #${uid + 1}`}</div>
+                            <div class="utility-tooltip">
+                                <div class="line-align-center">
+                                    <Input
+                                        type="checkbox"
+                                        checked={utility.disabled}
+                                        on:change={e => toggleUtility(e, uid)}
+                                    />
+                                </div>
+                                <div
+                                    class="line-align-center"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-placement="top"
+                                    title="Disable utility"
+                                >
+                                    <i class="bx bx-info-circle" />
+                                </div>
+                            </div>
                         </div>
                         <div class="utility-value">
                             <div class="utility-input line-align-center">
-                                <Input type="select" value={utility.name} on:change={e => changeUtility(e, uid)}>
+                                <Input
+                                    type="select"
+                                    value={utility.name}
+                                    disabled={utility.disabled}
+                                    on:change={e => changeUtility(e, uid)}
+                                >
                                     {#each utilityOptions as option}
                                         <option value={option} selected={option == utility.name}>{option}</option>
                                     {/each}
@@ -222,7 +303,16 @@
                                     </div>
                                     <div class="utility-value">
                                         <div class="utility-input line-align-center">
-                                            <Input bind:value={fn.name} maxlength={maxLength} />
+                                            <Input
+                                                type="select"
+                                                value={fn.name}
+                                                disabled={utility.disabled}
+                                                on:change={e => selectContent(e, uid, fid, 'function')}
+                                            >
+                                                {#each (utilityMapper[utility.name]?.functions || []) as option}
+                                                    <option value={option} selected={option == fn.name}>{option}</option>
+                                                {/each}
+                                            </Input>
                                         </div>
                                         <div class="utility-delete line-align-center">
                                             <i
@@ -230,7 +320,7 @@
                                                 role="link"
                                                 tabindex="0"
                                                 on:keydown={() => {}}
-                                                on:click={() => deleteFunction(uid, fid)}
+                                                on:click={() => deleteUtilityContent(uid, fid, 'function')}
                                             />
                                         </div>
                                     </div>
@@ -248,7 +338,7 @@
                                             role="link"
                                             tabindex="0"
                                             on:keydown={() => {}}
-                                            on:click={() => addFunction(uid)}
+                                            on:click={() => addUtilityContent(uid, 'function')}
                                         />
                                     </div>
                                 </div>
@@ -263,7 +353,16 @@
                                     </div>
                                     <div class="utility-value">
                                         <div class="utility-input line-align-center">
-                                            <Input bind:value={tp.name} maxlength={maxLength} />
+                                            <Input
+                                                type="select"
+                                                value={tp.name}
+                                                disabled={utility.disabled}
+                                                on:change={e => selectContent(e, uid, tid, 'template')}
+                                            >
+                                                {#each (utilityMapper[utility.name]?.templates || []) as option}
+                                                    <option value={option} selected={option == tp.name}>{option}</option>
+                                                {/each}
+                                            </Input>
                                         </div>
                                         <div class="utility-delete line-align-center">
                                             <i
@@ -271,7 +370,7 @@
                                                 role="link"
                                                 tabindex="0"
                                                 on:keydown={() => {}}
-                                                on:click={() => deleteTemplate(uid, tid)}
+                                                on:click={() => deleteUtilityContent(uid, tid, 'template')}
                                             />
                                         </div>
                                     </div>
@@ -289,7 +388,7 @@
                                             role="link"
                                             tabindex="0"
                                             on:keydown={() => {}}
-                                            on:click={() => addTemplate(uid)}
+                                            on:click={() => addUtilityContent(uid, 'template')}
                                         />
                                     </div>
                                 </div>

From b98542b11d1544d0639b15d9fecada210331ecaf Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 21 Nov 2024 00:50:13 -0600
Subject: [PATCH 4/9] minor change

---
 src/lib/scss/custom/pages/_agent.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index addc72a8..2845446e 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -157,7 +157,6 @@
 
                 .utility-tooltip {
                     display: flex;
-                    gap: 3px;
                 }
 
                 input {

From f5635940230cb501e6446aba6c42bf5448132a63 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 21 Nov 2024 10:30:27 -0600
Subject: [PATCH 5/9] refine agent actions

---
 src/lib/helpers/types/agentTypes.js           |  5 +--
 src/lib/helpers/utils/agent.js                | 44 +++++++++++++++++++
 src/lib/helpers/utils/chat.js                 | 11 -----
 .../[conversationId]/chat-box.svelte          |  7 +--
 src/routes/page/agent/[agentId]/+page.svelte  |  3 +-
 .../agent/[agentId]/agent-overview.svelte     |  5 ++-
 src/routes/page/agent/card-agent.svelte       |  3 +-
 7 files changed, 56 insertions(+), 22 deletions(-)
 create mode 100644 src/lib/helpers/utils/agent.js

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index d6d70480..b68a9b0d 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -60,10 +60,7 @@
  * @property {Object[]} responses
  * @property {RoutingRule[]} routing_rules
  * @property {AgentWelcomeInfo} welcome_info - Welcome information.
- * @property {boolean} editable
- * @property {boolean} chatable
- * @property {boolean} trainable
- * @property {boolean} evaluable
+ * @property {string[]?} [actions]
  */
 
 
diff --git a/src/lib/helpers/utils/agent.js b/src/lib/helpers/utils/agent.js
new file mode 100644
index 00000000..143e42ec
--- /dev/null
+++ b/src/lib/helpers/utils/agent.js
@@ -0,0 +1,44 @@
+import { UserAction } from '../enums';
+
+export const AgentExtensions = {
+    chatable: (/** @type {import('$agentTypes').AgentModel} */ agent) => {
+        if (agent == null || agent.id == null) {
+            return false;
+        }
+
+        if (agent.actions == null) {
+            return true;
+        }
+        return agent.actions.includes(UserAction.Chat);
+    },
+    editable: (/** @type {import('$agentTypes').AgentModel} */ agent) => {
+        if (agent == null || agent.id == null) {
+            return false;
+        }
+
+        if (agent.actions == null) {
+            return true;
+        }
+        return agent.actions.includes(UserAction.Edit);
+    },
+    trainable: (/** @type {import('$agentTypes').AgentModel} */ agent) => {
+        if (agent == null || agent.id == null) {
+            return false;
+        }
+
+        if (agent.actions == null) {
+            return true;
+        }
+        return agent.actions.includes(UserAction.Train);
+    },
+    evaluable: (/** @type {import('$agentTypes').AgentModel} */ agent) => {
+        if (agent == null || agent.id == null) {
+            return false;
+        }
+
+        if (agent.actions == null) {
+            return true;
+        }
+        return agent.actions.includes(UserAction.Edit);
+    },
+};
\ No newline at end of file
diff --git a/src/lib/helpers/utils/chat.js b/src/lib/helpers/utils/chat.js
index 165548df..33a362bf 100644
--- a/src/lib/helpers/utils/chat.js
+++ b/src/lib/helpers/utils/chat.js
@@ -12,15 +12,4 @@ export function sendToChatBot(action, chatFrameId, text = null, data = null) {
         // @ts-ignore
         chatFrame.contentWindow.postMessage(content, "*");
     }
-}
-
-/**
- * @param {() => void} func
- */
-export function addChatBoxMountEventListener(func) {
-    window.addEventListener("message", e => {
-        if (e.data.event === 'chat-box-mounted') {
-            func();
-        }
-    });
 }
\ No newline at end of file
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index c8292c9e..54532f6e 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -52,12 +52,13 @@
 	import LoadingDots from '$lib/common/LoadingDots.svelte';
 	import StateModal from '$lib/common/StateModal.svelte';
 	import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import ChatTextArea from './chat-util/chat-text-area.svelte';
 	import AudioSpeaker from '$lib/common/audio-player/AudioSpeaker.svelte';
+	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	import { utcToLocal } from '$lib/helpers/datetime';
 	import { replaceNewLine } from '$lib/helpers/http';
 	import { isAudio, isExcel, isPdf } from '$lib/helpers/utils/file';
 	import { ChatAction, ConversationTag, EditorType, FileSourceType, SenderAction, UserRole } from '$lib/helpers/enums';
+	import ChatTextArea from './chat-util/chat-text-area.svelte';
 	import RichContent from './rich-content/rich-content.svelte';
 	import RcMessage from "./rich-content/rc-message.svelte";
 	import RcDisclaimer from './rich-content/rc-disclaimer.svelte';
@@ -202,7 +203,7 @@
 	}
 
 	$: {
-		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id || !agent?.chatable;
+		disableAction = !ADMIN_ROLES.includes(currentUser?.role || '') && currentUser?.id !== conversationUser?.id || !AgentExtensions.chatable(agent);
 	}
 
 	setContext('chat-window-context', {
@@ -1647,7 +1648,7 @@
 																	text={message?.rich_content?.message?.text || message?.text}
 																/>
 															{/if}
-															{#if PUBLIC_LIVECHAT_ENABLE_TRAINING === 'true' && agent?.trainable}
+															{#if PUBLIC_LIVECHAT_ENABLE_TRAINING === 'true' && AgentExtensions.trainable(agent)}
 																{#if message?.function}
 																	<div class="line-align-center" style="font-size: 17px;">
 																		<!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 9a410036..89421c4d 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -19,6 +19,7 @@
     import Swal from 'sweetalert2'
 	import { goto } from '$app/navigation';
 	import AgentUtility from './agent-utility.svelte';
+	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	
 	
     /** @type {import('$agentTypes').AgentModel} */
@@ -176,7 +177,7 @@
         </Col>
     </Row>
 
-    {#if !!agent?.editable}
+    {#if !!AgentExtensions.editable(agent)}
         <Row>
             <div class="hstack gap-2 my-4">
                 <Button class="btn btn-soft-primary" on:click={() => updateCurrentAgent()}>{$_('Save Agent')}</Button>
diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-overview.svelte
index 870b0ae1..08f2eb53 100644
--- a/src/routes/page/agent/[agentId]/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-overview.svelte
@@ -4,6 +4,7 @@
     import InPlaceEdit from '$lib/common/InPlaceEdit.svelte'
     import { format } from '$lib/helpers/datetime';
 	import { AgentType } from '$lib/helpers/enums';
+	import { AgentExtensions } from '$lib/helpers/utils/agent';
 
     const profileLimit = 10;
 
@@ -48,7 +49,7 @@
                     height="50"
                     class="mx-auto d-block"
                 />
-                {#if !!agent.chatable}
+                {#if !!AgentExtensions.chatable(agent)}
                     <Button
                         class="btn btn-sm btn-soft-info agent-chat"
                         on:click={() => chatWithAgent()}
@@ -59,7 +60,7 @@
                 {/if}
             </div>
             <h5 class="mt-1 mb-1 div-center"><InPlaceEdit bind:value={agent.name} /></h5>
-            <p class="text-muted mb-0">Updated at {format(agent.updated_datetime, 'time')}</p>
+            <p class="text-muted mb-0">{`Updated at ${format(agent.updated_datetime, 'time')}`}</p>
         </div>
     </CardHeader>
     <CardBody>
diff --git a/src/routes/page/agent/card-agent.svelte b/src/routes/page/agent/card-agent.svelte
index 831639e9..0c4db673 100644
--- a/src/routes/page/agent/card-agent.svelte
+++ b/src/routes/page/agent/card-agent.svelte
@@ -4,6 +4,7 @@
   import { format } from '$lib/helpers/datetime';
   import { _ } from 'svelte-i18n';
 	import { LEARNER_ID } from "$lib/helpers/constants";
+	import { AgentExtensions } from "$lib/helpers/utils/agent";
 
   /** @type {import('$agentTypes').AgentModel[]} */
   export let agents;
@@ -78,7 +79,7 @@
             </Link>
           </li>
           <li class="list-inline-item me-1">
-            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank" disabled={!agent.chatable}>
+            <Link href= "chat/{agent.id}" class="btn btn-primary btn-sm" target="_blank" disabled={!AgentExtensions.chatable(agent)}>
               <i class="bx bx-chat" /> {$_('Test')}
             </Link>
           </li>

From 64a828f85b18a7b5b727c05bdfe5b9b6f3cbbac3 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Thu, 21 Nov 2024 10:31:10 -0600
Subject: [PATCH 6/9] minor change

---
 src/routes/page/agent/[agentId]/agent-llm-config.svelte | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/routes/page/agent/[agentId]/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-llm-config.svelte
index d1b1af50..9dbb3dab 100644
--- a/src/routes/page/agent/[agentId]/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-llm-config.svelte
@@ -110,7 +110,14 @@
                 Maximum recursive depth
             </label>
             <div class="col-md-9">
-                <Input type="number" min={lowerLimit} max={upperLimit} style="text-align: center;" value={config.max_recursion_depth} on:change={e => changeMaxRecursiveDepth(e)} />              
+                <Input
+                    style="text-align: center;"
+                    type="number"
+                    min={lowerLimit}
+                    max={upperLimit}
+                    value={config.max_recursion_depth}
+                    on:change={e => changeMaxRecursiveDepth(e)}
+                />              
             </div>
         </div>
     </CardBody>

From d1718d5c0d7f14c9a430252cf6ff3aec5d92f2b0 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <franklujc@gmail.com>
Date: Thu, 21 Nov 2024 19:10:41 -0600
Subject: [PATCH 7/9] fix typo

---
 src/routes/page/roles/+page.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/page/roles/+page.svelte b/src/routes/page/roles/+page.svelte
index 344ad98b..0d29eea1 100644
--- a/src/routes/page/roles/+page.svelte
+++ b/src/routes/page/roles/+page.svelte
@@ -121,7 +121,7 @@
 					isComplete = false;
 				}, duration);
 			} else {
-				throw "error when saving user.";
+				throw "error when saving role.";
 			}
 		}).catch(() => {
 			isLoading = false;

From eb7b1eb6ccbfe894534358d17dd7df03ac3e5730 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Fri, 22 Nov 2024 09:56:47 -0600
Subject: [PATCH 8/9] reverse

---
 src/routes/page/agent/[agentId]/agent-utility.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/routes/page/agent/[agentId]/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-utility.svelte
index ae17c937..20c7f3c1 100644
--- a/src/routes/page/agent/[agentId]/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-utility.svelte
@@ -193,7 +193,7 @@
         const found = innerUtilities.find((_, index) => index === uid);
         if (!found) return;
 
-        found.disabled = e.target.checked;
+        found.disabled = !e.target.checked;
         refresh(innerUtilities);
     }
 
@@ -255,7 +255,7 @@
                                 <div class="line-align-center">
                                     <Input
                                         type="checkbox"
-                                        checked={utility.disabled}
+                                        checked={!utility.disabled}
                                         on:change={e => toggleUtility(e, uid)}
                                     />
                                 </div>
@@ -263,7 +263,7 @@
                                     class="line-align-center"
                                     data-bs-toggle="tooltip"
                                     data-bs-placement="top"
-                                    title="Disable utility"
+                                    title="Uncheck to disable utility"
                                 >
                                     <i class="bx bx-info-circle" />
                                 </div>

From c73b117504ecb49f973148cba3354bfec8cca5d8 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Mon, 25 Nov 2024 21:16:50 -0600
Subject: [PATCH 9/9] revert

---
 .../[conversationId]/rich-content/rich-content.svelte          | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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 ea470f28..5db267eb 100644
--- a/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/rich-content/rich-content.svelte
@@ -32,9 +32,8 @@
             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;
         }