From 0fdc984fa416c819fdc8af727e5ad1286f6eaa15 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Sun, 5 Jan 2025 23:53:44 -0600
Subject: [PATCH] add event rules

---
 src/lib/helpers/types/agentTypes.js           |  10 +
 src/lib/scss/custom/pages/_agent.scss         |  19 +-
 src/lib/services/agent-service.js             |  12 +-
 src/lib/services/api-endpoints.js             |   1 +
 src/routes/page/agent/[agentId]/+page.svelte  |  51 ++--
 .../agent-components/agent-event-rule.svelte  | 257 ++++++++++++++++++
 .../agent-function.svelte                     |   0
 .../agent-knowledge-base.svelte               |   4 +-
 .../agent-llm-config.svelte                   |   2 +-
 .../agent-overview.svelte                     |   2 +-
 .../agent-prompt.svelte                       |   2 +-
 .../agent-routing.svelte                      |   0
 .../agent-utility.svelte                      |   4 +-
 .../page/agent/[agentId]/agent-tabs.svelte    |  92 +++++++
 14 files changed, 416 insertions(+), 40 deletions(-)
 create mode 100644 src/routes/page/agent/[agentId]/agent-components/agent-event-rule.svelte
 rename src/routes/page/agent/[agentId]/{ => agent-components}/agent-function.svelte (100%)
 rename src/routes/page/agent/[agentId]/{ => agent-components}/agent-knowledge-base.svelte (97%)
 rename src/routes/page/agent/[agentId]/{ => agent-components}/agent-llm-config.svelte (98%)
 rename src/routes/page/agent/[agentId]/{ => agent-components}/agent-overview.svelte (99%)
 rename src/routes/page/agent/[agentId]/{ => agent-components}/agent-prompt.svelte (100%)
 rename src/routes/page/agent/[agentId]/{ => agent-components}/agent-routing.svelte (100%)
 rename src/routes/page/agent/[agentId]/{ => agent-components}/agent-utility.svelte (99%)
 create mode 100644 src/routes/page/agent/[agentId]/agent-tabs.svelte

diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 507b3b44..a21f4d79 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -61,6 +61,7 @@
  * @property {AgentTemplate[]} templates
  * @property {Object[]} responses
  * @property {RoutingRule[]} routing_rules
+ * @property {AgentEventRule[]} event_rules
  * @property {AgentWelcomeInfo} welcome_info - Welcome information.
  * @property {string[]?} [actions]
  */
@@ -135,6 +136,15 @@
  * @property {boolean} disabled 
  */
 
+/**
+ * @typedef {Object} AgentEventRule
+ * @property {string} name 
+ * @property {string} event_name
+ * @property {string} event_type
+ * @property {string?} [displayName]
+ * @property {boolean} disabled
+ */
+
 /**
  * @typedef {Object} UtilityBase
  * @property {string} name
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index 2845446e..0596a38e 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -15,7 +15,7 @@
 }
 
 .agent-prop-list-container {
-    width: 85%;
+    width: 95%;
     max-width: 100%;
 
     .edit-wrapper {
@@ -51,11 +51,28 @@
     }
 }
 
+.vertical-flexible {
+    max-height: 200px;
+    overflow-y: auto;
+    scrollbar-width: none;
+}
+
 .agent-detail-sections {
+    .card {
+        margin-bottom: 0px !important;
+    }
+
     .section-min-width {
         min-width: 300px;
     }
 
+    .agent-col {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        margin-bottom: 10px;
+    }
+
     .agent-detail-section {
         @media (max-width: 423px) {
             height: fit-content;
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
index 7005546a..8188b18f 100644
--- a/src/lib/services/agent-service.js
+++ b/src/lib/services/agent-service.js
@@ -83,11 +83,21 @@ export async function createAgent(agent) {
 }
 
 /**
- * Get agent utilities
+ * Get agent utility options
  * @returns {Promise<import('$agentTypes').AgentUtility[]>}
  */
 export async function getAgentUtilityOptions() {
     const url = endpoints.agentUtilityOptionsUrl;
     const response = await axios.get(url);
     return response.data;
+}
+
+/**
+ * Get agent event rule options
+ * @returns {Promise<import('$agentTypes').AgentEventRule[]>}
+ */
+export async function getAgentEventRuleOptions() {
+    const url = endpoints.agentEventRuleOptionsUrl;
+    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 d5ebc3ba..656ad228 100644
--- a/src/lib/services/api-endpoints.js
+++ b/src/lib/services/api-endpoints.js
@@ -34,6 +34,7 @@ export const endpoints = {
     agentRefreshUrl: `${host}/refresh-agents`,
     agentCreateUrl: `${host}/agent`,
     agentUtilityOptionsUrl: `${host}/agent/utility/options`,
+    agentEventRuleOptionsUrl: `${host}/agent/event-rule/options`,
     
     // agent task
     agentTaskListUrl: `${host}/agent/tasks`,
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 6ca89a71..64749e3f 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -7,19 +7,16 @@
 	import Breadcrumb from '$lib/common/Breadcrumb.svelte';
 	import HeadTitle from '$lib/common/HeadTitle.svelte';
     import LoadingToComplete from '$lib/common/LoadingToComplete.svelte';
-	import AgentPrompt from './agent-prompt.svelte';
-	import AgentOverview from './agent-overview.svelte';
-    import AgentRouting from './agent-routing.svelte';
-    import AgentFunction from './agent-function.svelte';
-    import AgentLlmConfig from './agent-llm-config.svelte';
+	import AgentPrompt from './agent-components/agent-prompt.svelte';
+	import AgentOverview from './agent-components/agent-overview.svelte';
+    import AgentFunction from './agent-components/agent-function.svelte';
+    import AgentTabs from './agent-tabs.svelte';
     import { page } from '$app/stores';
     import { deleteAgent, getAgent, saveAgent } from '$lib/services/agent-service.js';
     import { onMount } from 'svelte';
     import { _ } from 'svelte-i18n'  
     import Swal from 'sweetalert2'
 	import { goto } from '$app/navigation';
-	import AgentUtility from './agent-utility.svelte';
-	import AgentKnowledgeBase from './agent-knowledge-base.svelte';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
 	
 	
@@ -30,9 +27,7 @@
     /** @type {any} */
     let agentPromptCmp = null;
     /** @type {any} */
-    let agentUtilityCmp = null;
-    /** @type {any} */
-    let agentKnowledgeBaseCmp = null;
+    let agentTabsCmp = null;
 
     /** @type {boolean} */
     let isLoading = false;
@@ -72,8 +67,7 @@
     function handleAgentUpdate() {
         fetchJsonContent();
         fetchPrompts();
-        fetchUtilties();
-        fetchKnowledgeBases();
+        fetchTabData();
 
         agent = {
             ...agent,
@@ -83,6 +77,7 @@
             profiles: agent.profiles?.filter((x, idx, self) => x?.trim()?.length > 0 && self.indexOf(x) === idx) || [],
             utilities: agent.utilities || [],
             knowledge_bases: agent.knowledge_bases || [],
+            event_rules: agent.event_rules || [],
             max_message_count: Number(agent.max_message_count) > 0 ? Number(agent.max_message_count) : null
         };
         isLoading = true;
@@ -121,14 +116,13 @@
         agent.channel_instructions = obj.channelPrompts || [];
     }
 
-    function fetchUtilties() {
-        const list = agentUtilityCmp?.fetchUtilities();
-        agent.utilities = list || [];
-    }
-
-    function fetchKnowledgeBases() {
-        const list = agentKnowledgeBaseCmp?.fetchKnowledgeBases();
-        agent.knowledge_bases = list || [];
+    function fetchTabData() {
+        const data = agentTabsCmp?.fetchData();
+        if (data) {
+            agent.utilities = data.utilities || [];
+            agent.knowledge_bases = data.knwoledgebases || [];
+            agent.event_rules = data.eventRules || [];
+        }
     }
 
     function refreshChannelPrompts() {
@@ -163,25 +157,17 @@
 <LoadingToComplete isLoading={isLoading} isComplete={isComplete} isError={isError} />
 
 {#if agent}
+<div>
     <Row class="agent-detail-sections">
-        <Col class="section-min-width agent-overview" style="flex: 35%;">
+        <Col class="section-min-width agent-col" style="flex: 40%;">
             <div class="agent-detail-section">
                 <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>
-            <div class="agent-detail-section">
-                <AgentKnowledgeBase bind:this={agentKnowledgeBaseCmp} agent={agent} />
+                <AgentTabs bind:this={agentTabsCmp} agent={agent} />
             </div>
         </Col>
-        <Col class="section-min-width" style="flex: 65%;">
+        <Col class="section-min-width agent-col" style="flex: 60%;">
             <div class="agent-detail-section">
                 <AgentPrompt bind:this={agentPromptCmp} agent={agent} />
             </div>
@@ -199,4 +185,5 @@
             </div>
         </Row>
     {/if}
+</div>
 {/if}
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-event-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-event-rule.svelte
new file mode 100644
index 00000000..1e1f28c9
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-event-rule.svelte
@@ -0,0 +1,257 @@
+<script>
+    import { onMount } from 'svelte';
+    import { Card, CardBody, Input, Button } from '@sveltestrap/sveltestrap';
+	import { getAgentEventRuleOptions } from '$lib/services/agent-service';
+
+    const limit = 5;
+    const textLimit = 50;
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    export const fetchEventRules = () => {
+        const candidates = innerRules?.filter(x => !!x.name)?.map(x => {
+            return {
+                name: x.name,
+                event_name: x.event_name?.trim(),
+                event_type: x.event_type?.trim(),
+                disabled: x.disabled
+            };
+        });
+
+        /** @type {import('$agentTypes').AgentEventRule[]} */
+        const rules = [];
+        const unique = new Set();
+        candidates.forEach(x => {
+            if (!unique.has(x.name)) {
+                rules.push(x);
+                unique.add(x.name);
+            }
+        });
+
+        refresh(rules);
+        return rules;
+    }
+
+    /** @type {any[]} */
+    let ruleOptions = [];
+
+    /** @type {import('$agentTypes').AgentEventRule[]} */
+    let innerRules = [];
+
+    onMount(async () =>{
+        getAgentEventRuleOptions().then(data => {
+            const list = data?.map(x => {
+                return {
+                    name: x.name,
+                    displayName: ""
+                };
+            }) || [];
+            ruleOptions = [{
+                name: "",
+                displayName: ""
+            }, ...list];
+        });
+        init();
+    });
+
+    function init() {
+        const list = agent.event_rules?.map(x => {
+            return {
+                ...x,
+                displayName: "",
+                disabled: false
+            };
+        }) || [];
+        refresh(list);
+    }
+
+    /**
+	 * @param {any} e
+	 * @param {number} idx
+	 */
+    function changeRule(e, idx) {
+        const found = innerRules.find((_, index) => index === idx);
+        if (!found) return;
+        
+        const val = e.target.value;
+        found.name = val;
+        refresh(innerRules);
+    }
+
+    function addRule() {
+        innerRules = [
+            ...innerRules,
+            {
+                name: '',
+                event_name: '',
+                event_type: '',
+                displayName: '',
+                disabled: false
+            }
+        ];
+    }
+
+    /** @param {number} idx */
+    function deleteRule(idx) {
+        innerRules = innerRules.filter((_, index) => index !== idx);
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} uid
+	 */
+    function toggleRule(e, uid) {
+        const found = innerRules.find((_, index) => index === uid);
+        if (!found) return;
+
+        found.disabled = !e.target.checked;
+        refresh(innerRules);
+    }
+
+    /**
+     * @param {any} e
+	 * @param {number} uid
+     * @param {string} field
+	 */
+    function changeContent(e, uid, field) {
+        const found = innerRules.find((_, index) => index === uid);
+        if (!found) return;
+
+        const val = e.target.value;
+        if (field === 'event_name') {
+            found.event_name = val;
+        } else if (field === 'event_type') {
+            found.event_type = val;
+        }
+        refresh(innerRules);
+    }
+
+
+    /** @param {import('$agentTypes').AgentEventRule[]} list */
+    function refresh(list) {
+        innerRules = list?.map(x => {
+            return {
+                name: x.name,
+                event_name: x.event_name,
+                event_type: x.event_type,
+                displayName: x.displayName,
+                disabled: x.disabled
+            }
+        }) || [];
+    }
+
+</script>
+
+<Card>
+    <CardBody>
+        <div class="text-center">
+            <h5 class="mt-1 mb-3">Event Rules</h5>
+        </div>
+
+        <div class="agent-utility-container">
+            {#each innerRules as rule, uid (uid)}
+                <div class="utility-wrapper">
+                    <div class="utility-row utility-row-primary">
+                        <div class="utility-label fw-bold">
+                            <div class="line-align-center">{`Collection #${uid + 1}`}</div>
+                            <div class="utility-tooltip">
+                                <div class="line-align-center">
+                                    <Input
+                                        type="checkbox"
+                                        checked={!rule.disabled}
+                                        on:change={e => toggleRule(e, uid)}
+                                    />
+                                </div>
+                                <div
+                                    class="line-align-center"
+                                    data-bs-toggle="tooltip"
+                                    data-bs-placement="top"
+                                    title="Uncheck to disable rule"
+                                >
+                                    <i class="bx bx-info-circle" />
+                                </div>
+                            </div>
+                        </div>
+                        <div class="utility-value">
+                            <div class="utility-input line-align-center">
+                                <Input
+                                    type="select"
+                                    disabled={rule.disabled}
+                                    on:change={e => changeRule(e, uid)}
+                                >
+                                    {#each [...ruleOptions] as option}
+                                        <option value={option.name} selected={option.name == rule.name}>
+                                            {option.displayName || option.name}
+                                        </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={() => deleteRule(uid)}
+                                />
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="utility-row utility-row-secondary">
+                        <div class="utility-content">
+                            <div class="utility-list-item">
+                                <div class="utility-label line-align-center">
+                                    {'Event Name'}
+                                </div>
+                                <div class="utility-value">
+                                    <div class="utility-input line-align-center">
+                                        <Input
+                                            type="text"
+                                            disabled={rule.disabled}
+                                            maxlength={textLimit}
+                                            value={rule.event_name}
+                                            on:input={e => changeContent(e, uid, 'event_name')}
+                                        />
+                                    </div>
+                                    <div class="utility-delete line-align-center"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="utility-content">
+                            <div class="utility-list-item">
+                                <div class="utility-label line-align-center">
+                                    {'Event Type'}
+                                </div>
+                                <div class="utility-value">
+                                    <div class="utility-input line-align-center">
+                                        <Input
+                                            type="text"
+                                            disabled={rule.disabled}
+                                            maxlength={textLimit}
+                                            value={rule.event_type}
+                                            on:input={e => changeContent(e, uid, 'event_type')}
+                                        />
+                                    </div>
+                                    <div class="utility-delete line-align-center"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            {/each}
+
+            {#if innerRules.length < limit}
+                <div class="add-utility">
+                    <Button color="primary" on:click={() => addRule()}>
+                        <span>
+                            <i class="bx bx-plus" />
+                            <span>Add Event Rule</span>
+                        </span>
+                    </Button>
+                </div>
+            {/if}
+        </div>
+    </CardBody>
+</Card>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-function.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
similarity index 100%
rename from src/routes/page/agent/[agentId]/agent-function.svelte
rename to src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
diff --git a/src/routes/page/agent/[agentId]/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
similarity index 97%
rename from src/routes/page/agent/[agentId]/agent-knowledge-base.svelte
rename to src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
index 9fb3bfb9..3c99d5fb 100644
--- a/src/routes/page/agent/[agentId]/agent-knowledge-base.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
@@ -155,7 +155,7 @@
                                     class="line-align-center"
                                     data-bs-toggle="tooltip"
                                     data-bs-placement="top"
-                                    title="Uncheck to disable utility"
+                                    title="Uncheck to disable knowledgebase"
                                 >
                                     <i class="bx bx-info-circle" />
                                 </div>
@@ -170,7 +170,7 @@
                                 >
                                     {#each [...knowledgeBaseOptions] as option}
                                         <option value={`${option.name}#${option.type}`} selected={option.name == knowledge.name}>
-                                            {option.displayName}
+                                            {option.displayName || option.name}
                                         </option>
                                     {/each}
                                 </Input>
diff --git a/src/routes/page/agent/[agentId]/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
similarity index 98%
rename from src/routes/page/agent/[agentId]/agent-llm-config.svelte
rename to src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
index 9dbb3dab..bf269952 100644
--- a/src/routes/page/agent/[agentId]/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
@@ -107,7 +107,7 @@
 
         <div class="mb-3 row">
             <label for="example-text-input" class="col-md-3 col-form-label">
-                Maximum recursive depth
+                Max recursive depth
             </label>
             <div class="col-md-9">
                 <Input
diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
similarity index 99%
rename from src/routes/page/agent/[agentId]/agent-overview.svelte
rename to src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
index 577771a5..56acd942 100644
--- a/src/routes/page/agent/[agentId]/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
@@ -106,7 +106,7 @@
                     <tr>
                         <th class="agent-prop-key">Profiles</th>
                         <td>
-                            <div class="agent-prop-list-container">
+                            <div class="agent-prop-list-container vertical-flexible">
                                 {#each profiles as profile, index}
                                 <div class="edit-wrapper">
                                     <input
diff --git a/src/routes/page/agent/[agentId]/agent-prompt.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-prompt.svelte
similarity index 100%
rename from src/routes/page/agent/[agentId]/agent-prompt.svelte
rename to src/routes/page/agent/[agentId]/agent-components/agent-prompt.svelte
index 25d87e03..a36d9f9d 100644
--- a/src/routes/page/agent/[agentId]/agent-prompt.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-prompt.svelte
@@ -179,8 +179,8 @@
                 type="textarea"
                 class="form-control"
                 style="scrollbar-width: thin; resize: none;"
-                rows={24}
                 value={selected_instruction.instruction}
+                rows={24}
                 on:input={(e) => changePrompt(e)}
                 placeholder="Enter your instruction"
             />
diff --git a/src/routes/page/agent/[agentId]/agent-routing.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
similarity index 100%
rename from src/routes/page/agent/[agentId]/agent-routing.svelte
rename to src/routes/page/agent/[agentId]/agent-components/agent-routing.svelte
diff --git a/src/routes/page/agent/[agentId]/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
similarity index 99%
rename from src/routes/page/agent/[agentId]/agent-utility.svelte
rename to src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
index a8c9dce9..e973d75d 100644
--- a/src/routes/page/agent/[agentId]/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
@@ -391,7 +391,9 @@
                                                 on:change={e => selectContent(e, uid, tid, 'template')}
                                             >
                                                 {#each (utilityMapper[utility.name]?.templates || []) as option}
-                                                    <option value={`${option.name}#${option.displayName}`} selected={option.name == tp.name}>{option.displayName}</option>
+                                                    <option value={`${option.name}#${option.displayName}`} selected={option.name == tp.name}>
+                                                        {option.displayName || option.name}
+                                                    </option>
                                                 {/each}
                                             </Input>
                                         </div>
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
new file mode 100644
index 00000000..d57a7100
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -0,0 +1,92 @@
+<script>
+    import { onMount } from 'svelte';
+    import { Card, CardBody } from '@sveltestrap/sveltestrap';
+	import NavBar from "$lib/common/nav-bar/NavBar.svelte";
+	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
+	import AgentLlmConfig from './agent-components/agent-llm-config.svelte';
+	import AgentUtility from './agent-components/agent-utility.svelte';
+	import AgentKnowledgeBase from './agent-components/agent-knowledge-base.svelte';
+	import AgentRouting from './agent-components/agent-routing.svelte';
+	import AgentEventRule from './agent-components/agent-event-rule.svelte';
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    export const fetchData = () => {
+        const utilities = agentUtilityCmp?.fetchUtilities();
+        const knwoledgebases = agentKnowledgeBaseCmp?.fetchKnowledgeBases();
+        const eventRules = agentEventRuleCmp?.fetchEventRules();
+
+        return {
+            utilities: utilities || [],
+            knwoledgebases: knwoledgebases || [],
+            eventRules: eventRules || []
+        };
+    };
+
+    /** @type {any} */
+    let agentUtilityCmp = null;
+    /** @type {any} */
+    let agentKnowledgeBaseCmp = null;
+    /** @type {any} */
+    let agentEventRuleCmp = null;
+
+    /** @type {string}*/
+    let selectedTab;
+
+    /** @type {any[]}*/
+    let tabs = [
+        { name: 'agent-llm-config', displayText: 'LLm Config' },
+        { name: 'agent-routing-rule', displayText: 'Routing Rules' },
+        { name: 'agent-utility', displayText: 'Utilities' },
+        { name: 'agent-knowledgebase', displayText: 'Knowledge Bases' },
+        { name: 'agent-event-rule', displayText: 'Event Rules' }
+    ];
+
+    onMount(() => {
+        selectedTab = tabs[0]?.name;
+    });
+
+    /** @param {string} selected */
+    function handleTabClick(selected) {
+        selectedTab = selected;
+    }
+</script>
+
+<Card>
+    <CardBody>
+        <NavBar
+            disableDefaultStyles
+            containerClasses={'nav-tabs-secondary'}
+        >
+            {#each tabs as tab, idx (idx) }
+            <NavItem
+                containerStyles={`flex: 0 1 calc(100% / ${tabs.length <= 2 ? tabs.length : 3})`}
+                navBtnStyles={'text-transform: none;'}
+                navBtnId={`${tab.name}-tab`}
+                dataBsTarget={`#${tab.name}-tab`}
+                ariaControls={`${tab.name}-tab-pane`}
+                bind:navBtnText={tab.displayText}
+                active={tab.name === selectedTab}
+                onClick={() => handleTabClick(tab.name)}
+            />
+            {/each}
+        </NavBar>
+
+        <div class:hide={selectedTab !== 'agent-llm-config'}>
+            <AgentLlmConfig agent={agent} />
+        </div>
+        <div class:hide={selectedTab !== 'agent-routing-rule'}>
+            <AgentRouting agent={agent} />
+        </div>
+        <div class:hide={selectedTab !== 'agent-utility'}>
+            <AgentUtility agent={agent} bind:this={agentUtilityCmp} />
+        </div>
+        <div class:hide={selectedTab !== 'agent-knowledgebase'}>
+            <AgentKnowledgeBase agent={agent} bind:this={agentKnowledgeBaseCmp} />
+        </div>
+        <div class:hide={selectedTab !== 'agent-event-rule'}>
+            <AgentEventRule agent={agent} bind:this={agentEventRuleCmp} />
+        </div>
+    </CardBody>
+</Card>
\ No newline at end of file