From f7283f58b12159fa55cdb4f6ff32de660e2238a6 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 19 Feb 2025 17:26:06 -0600
Subject: [PATCH 1/2] refine agent templates

---
 src/lib/common/InPlaceEdit.svelte             |   2 +-
 src/lib/common/nav-bar/NavItem.svelte         |   2 +-
 src/lib/helpers/types/agentTypes.js           |   1 +
 src/lib/scss/custom/pages/_agent.scss         |   6 +
 src/routes/page/agent/[agentId]/+page.svelte  |  76 +++++--
 .../agent-components/agent-function.svelte    |   5 +-
 ...prompt.svelte => agent-instruction.svelte} |  51 ++---
 .../agent-knowledge-base.svelte               |   2 +-
 .../agent-components/agent-llm-config.svelte  |   2 +-
 .../agent-components/agent-overview.svelte    |  62 ++++--
 .../agent-components/agent-rule.svelte        |   2 +-
 .../agent-components/agent-template.svelte    | 185 ++++++++++++++++++
 .../agent-components/agent-utility.svelte     |   2 +-
 .../page/agent/[agentId]/agent-tabs.svelte    |   6 +-
 14 files changed, 333 insertions(+), 71 deletions(-)
 rename src/routes/page/agent/[agentId]/agent-components/{agent-prompt.svelte => agent-instruction.svelte} (80%)
 create mode 100644 src/routes/page/agent/[agentId]/agent-components/agent-template.svelte

diff --git a/src/lib/common/InPlaceEdit.svelte b/src/lib/common/InPlaceEdit.svelte
index 9ce32362..cadc2c47 100644
--- a/src/lib/common/InPlaceEdit.svelte
+++ b/src/lib/common/InPlaceEdit.svelte
@@ -68,7 +68,7 @@
 {:else}
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div style="width: fit-content; min-width: 30%;" class="clickable" on:click={() => edit()}>
+    <div style="width: fit-content; min-width: 30%;" class="clickable ellipsis" on:click={() => edit()}>
         {#if !!value?.trim()}
             <span>{value}</span>
         {:else}
diff --git a/src/lib/common/nav-bar/NavItem.svelte b/src/lib/common/nav-bar/NavItem.svelte
index 0c6ffd42..30fe35a3 100644
--- a/src/lib/common/nav-bar/NavItem.svelte
+++ b/src/lib/common/nav-bar/NavItem.svelte
@@ -118,7 +118,7 @@
                 on:input={handleTabInput}
             />
         {:else}
-            <div style="height: 100%" class="line-align-center">
+            <div style="height: 100%;" class="line-align-center ellipsis">
                 <div>{navBtnText}</div>
             </div>
         {/if}
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index e3b3e0b3..96d74084 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -5,6 +5,7 @@
 
 /**
  * @typedef {Object} AgentTemplate
+ * @property {string?} [uid]
  * @property {string} name
  * @property {string} content
  */
diff --git a/src/lib/scss/custom/pages/_agent.scss b/src/lib/scss/custom/pages/_agent.scss
index f6a862c6..a7f4df42 100644
--- a/src/lib/scss/custom/pages/_agent.scss
+++ b/src/lib/scss/custom/pages/_agent.scss
@@ -102,6 +102,12 @@
                 background-color: white;
                 padding: 20px;
             }
+
+            .agent-prompt-body {
+                overflow-y: auto;
+                scrollbar-width: none;
+                margin-bottom: 0px !important;
+            }
         }
     }
 }
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index ba4435b3..953e3b61 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -7,7 +7,7 @@
 	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-components/agent-prompt.svelte';
+	import AgentInstruction from './agent-components/agent-instruction.svelte';
 	import AgentOverview from './agent-components/agent-overview.svelte';
     import AgentFunction from './agent-components/agent-function.svelte';
     import AgentTabs from './agent-tabs.svelte';
@@ -19,13 +19,16 @@
 	import { goto } from '$app/navigation';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
     import LocalStorageManager from '$lib/helpers/utils/storage-manager';
+	import AgentTemplate from './agent-components/agent-template.svelte';
 
     /** @type {import('$agentTypes').AgentModel} */
     let agent;
     /** @type {any} */
     let agentFunctionCmp = null;
     /** @type {any} */
-    let agentPromptCmp = null;
+    let agentInstructionCmp = null;
+    /** @type {any} */
+    let agentTemplateCmp = null;
     /** @type {any} */
     let agentTabsCmp = null;
     /** @type {import('$agentTypes').AgentModel} */
@@ -90,7 +93,8 @@
 
     function handleAgentUpdate() {
         fetchJsonContent();
-        fetchPrompts();
+        fetchInstructions();
+        fetchTemplates();
         fetchTabData();
 
         agent = {
@@ -114,7 +118,8 @@
             isLoading = false;
             isComplete = true;
             deleteAgentDraft();
-            refreshChannelPrompts();
+            refreshInstructions();
+            refreshTemplates();
             setTimeout(() => {
                 isComplete = false;
             }, duration);
@@ -132,43 +137,66 @@
             functions: textContent?.functions?.length > 0 ? textContent.functions :
                 (jsonContent?.functions?.length > 0 ? jsonContent?.functions : []),
             responses: textContent?.responses?.length > 0 ? textContent.responses :
-                (jsonContent?.responses?.length > 0 ? jsonContent?.responses : []),
-            templates: textContent?.templates?.length > 0 ? textContent.templates :
-                (jsonContent?.templates?.length > 0 ? jsonContent?.templates : []),
+                (jsonContent?.responses?.length > 0 ? jsonContent?.responses : [])
         }
     }
 
+    // Functions, responses
     function fetchJsonContent() {
         const data = formatJsonContent();
         agent.functions = data.functions;
         agent.responses = data.responses;
-        agent.templates = data.templates;
     }
 
-    function formatOriginalPrompts() {
-        const obj = agentPromptCmp?.fetchOriginalChannelPrompts();
+    // Insturctions
+    function formatOriginalInstructions() {
+        const obj = agentInstructionCmp?.fetchOriginalInstructions();
         return {
             instruction: obj.systemPrompt,
             channel_instructions: obj.channelPrompts || []
         }
     }
 
-    function fetchPrompts() {
-        const obj = agentPromptCmp?.fetchChannelPrompts();
+    function fetchInstructions() {
+        const obj = agentInstructionCmp?.fetchInstructions();
         agent.instruction = obj.systemPrompt;
         agent.channel_instructions = obj.channelPrompts || [];
     }
 
+    function refreshInstructions() {
+        agentInstructionCmp?.refreshInstructions();
+    }
+
+    // Templates
+    function formatOriginalTemplates() {
+        const obj = agentTemplateCmp?.fetchOriginalTemplates();
+        return {
+            templates: obj.templates || []
+        }
+    }
+
+    function fetchTemplates() {
+        const obj = agentTemplateCmp?.fetchTemplates();
+        agent.templates = obj.templates || [];
+    }
+
+    function refreshTemplates() {
+        agentTemplateCmp?.refreshTemplates();
+    }
+
+
+    // Tab data
     function formatOriginalTabData() {
-        const data = agentTabsCmp?.fetchOriginalData();
+        const data = agentTabsCmp?.fetchOriginalTabData();
         return data ? {
             utilities: data.utilities || [],
             knowledge_bases: data.knwoledgebases || [],
             rules: data.rules || []
         } : null;
     }
+
     function fetchTabData() {
-        const data = agentTabsCmp?.fetchData();
+        const data = agentTabsCmp?.fetchTabData();
         if (data) {
             agent.utilities = data.utilities || [];
             agent.knowledge_bases = data.knwoledgebases || [];
@@ -176,9 +204,6 @@
         }
     }
 
-    function refreshChannelPrompts() {
-        agentPromptCmp?.refreshChannelPrompts();
-    }
 
     function deleteCurrentAgent() {
         Swal.fire({
@@ -207,7 +232,8 @@
         const data = {
             ...agent,
             ...formatJsonContent(),
-            ...formatOriginalPrompts(),
+            ...formatOriginalInstructions(),
+            ...formatOriginalTemplates(),
             ...formatOriginalTabData(),
         };
         saveAgentDraft(data);
@@ -218,7 +244,8 @@
         agentDraft = null;
         deleteAgentDraft();
         setTimeout(() => {
-            refreshChannelPrompts();
+            refreshInstructions();
+            refreshTemplates();
             agentFunctionCmp?.reinit();
             agentTabsCmp?.reinit();
         });
@@ -253,8 +280,15 @@
         </Col>
         <Col class="section-min-width agent-col" style="flex: 60%;">
             <div class="agent-detail-section">
-                <AgentPrompt
-                    bind:this={agentPromptCmp}
+                <AgentInstruction
+                    bind:this={agentInstructionCmp}
+                    agent={agent}
+                    {handleAgentChange}
+                />
+            </div>
+            <div class="agent-detail-section">
+                <AgentTemplate
+                    bind:this={agentTemplateCmp}
                     agent={agent}
                     {handleAgentChange}
                 />
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
index 5536c527..c219b46c 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
@@ -6,7 +6,7 @@
     export let agent;
 
     /** @type {() => void} */
-    export let handleAgentChange;
+    export let handleAgentChange = () => {};
 
     export const fetchContent = () => {
         return content;
@@ -27,8 +27,7 @@
         content = {
             json: {
                 functions: agent.functions,
-                responses: agent.responses,
-                templates: agent.templates
+                responses: agent.responses
             }
         };
     }
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-prompt.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
similarity index 80%
rename from src/routes/page/agent/[agentId]/agent-components/agent-prompt.svelte
rename to src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
index 17e56174..522b4498 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-prompt.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
@@ -13,20 +13,20 @@
     export let agent;
 
     /** @type {() => void} */
-    export let handleAgentChange;
+    export let handleAgentChange = () => {};
 
-    export const fetchOriginalChannelPrompts = () => {
+    export const fetchOriginalInstructions = () => {
         return {
-            systemPrompt: local_instructions?.[0]?.instruction || '',
-            channelPrompts: local_instructions?.slice(1)?.map(x => ({
+            systemPrompt: inner_instructions?.[0]?.instruction || '',
+            channelPrompts: inner_instructions?.slice(1)?.map(x => ({
                 channel: x.channel,
                 instruction: x.instruction
             })) || []
         };
     };
 
-    export const fetchChannelPrompts = () => {
-        const candidates = local_instructions?.filter((x, idx) => idx > 0 && !!x.channel?.trim())?.map(x => {
+    export const fetchInstructions = () => {
+        const candidates = inner_instructions?.filter((x, idx) => idx > 0 && !!x.channel?.trim())?.map(x => {
             return { channel: x.channel.trim().toLowerCase(), instruction: x.instruction };
         });
 
@@ -39,12 +39,13 @@
         }
 
         return {
-            systemPrompt: local_instructions[0].instruction,
+            systemPrompt: inner_instructions[0].instruction,
             channelPrompts: prompts
         };
     }
 
-    export const refreshChannelPrompts = () => init();
+    export const refreshInstructions = () => init();
+
 
     /** @type {import('$agentTypes').ChannelInstruction} */
     const defaultInstruction = {
@@ -53,7 +54,7 @@
     };
 
     /** @type {import('$agentTypes').ChannelInstruction[]} */
-    let local_instructions = [];
+    let inner_instructions = [];
 
     /** @type {import('$agentTypes').ChannelInstruction} */
     let selected_instruction = { ...defaultInstruction };
@@ -63,7 +64,7 @@
     });
 
     function init() {
-        local_instructions = [
+        inner_instructions = [
             {
                 uid: uuidv4(),
                 channel: defaultChannel,
@@ -76,7 +77,7 @@
             })) || []
         ];
 
-        selected_instruction = local_instructions[0];
+        selected_instruction = inner_instructions[0];
     }
 
     /** @param {string | undefined} uid */
@@ -85,7 +86,7 @@
             return;
         }
 
-        selected_instruction = local_instructions.find(x => x.uid === uid) || { ...defaultInstruction };
+        selected_instruction = inner_instructions.find(x => x.uid === uid) || { ...defaultInstruction };
     }
 
     /** @param {any} e */
@@ -96,21 +97,23 @@
     }
 
     function addChannel() {
-        local_instructions = [
-            ...local_instructions,
+        inner_instructions = [
+            ...inner_instructions,
             {
                 uid: uuidv4(),
                 channel: '',
                 instruction: ''
             }
         ];
+
+        selected_instruction = inner_instructions[inner_instructions.length-1];
     }
 
     /** @param {string | undefined} uid */
     function deleteChannel(uid) {
-        local_instructions = local_instructions.filter(x => x.uid !== uid);
+        inner_instructions = inner_instructions.filter(x => x.uid !== uid);
         if (selected_instruction.uid === uid) {
-            selected_instruction = local_instructions[0];
+            selected_instruction = inner_instructions[0];
         }
     }
 </script>
@@ -124,7 +127,7 @@
         </div>
     </CardHeader>
     <CardBody>
-        <FormGroup class="mb-3">
+        <FormGroup>
             <div class="mb-2">
                 <div class="line-align-center fw-bold">
                     {'Description:'}
@@ -141,10 +144,10 @@
             />
         </FormGroup>
 
-        <FormGroup class="mb-3" style="overflow-y: auto; scrollbar-width: none;">
+        <FormGroup class="agent-prompt-body">
             <div class="mb-2" style="display: flex; gap: 10px;">
                 <div class="line-align-center fw-bold">
-                    {#if local_instructions.length > 1}
+                    {#if inner_instructions.length > 1}
                         {'Instructions:'}
                     {:else}
                         {'System instruction:'}
@@ -164,15 +167,15 @@
                 </div>
             </div>
             
-            {#if local_instructions.length > 1}
+            {#if inner_instructions.length > 1}
             <NavBar
                 id={'agent-instruction-container'}
                 disableDefaultStyles
                 containerClasses={'nav-tabs-secondary'}
             >
-                {#each local_instructions as inst, idx (idx) }
+                {#each inner_instructions as inst, idx (idx) }
                 <NavItem
-                    containerStyles={`flex: 0 1 calc(100% / ${local_instructions.length <= 2 ? local_instructions.length : 3})`}
+                    containerStyles={`flex: 0 1 calc(100% / ${inner_instructions.length <= 2 ? inner_instructions.length : 3})`}
                     navBtnStyles={'text-transform: none;'}
                     navBtnId={`${inst.channel}-prompt-tab`}
                     dataBsTarget={`#${inst.channel}-prompt-tab-pane`}
@@ -182,7 +185,7 @@
                     allowEdit={idx > 0}
                     allowDelete={idx > 0}
                     maxEditLength={20}
-                    editPlaceholder={'Type a channel name here...'}
+                    editPlaceholder={'Type a channel here...'}
                     onClick={() => selectChannel(inst.uid)}
                     onDelete={() => { deleteChannel(inst.uid); handleAgentChange(); }}
                     onInput={handleAgentChange}
@@ -195,7 +198,7 @@
                 class="form-control"
                 style="scrollbar-width: thin; resize: none;"
                 value={selected_instruction.instruction}
-                rows={24}
+                rows={20}
                 on:input={(e) => { changePrompt(e); handleAgentChange(); }}
                 placeholder="Enter your instruction"
             />
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
index 837cabb3..3087ccaa 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
@@ -10,7 +10,7 @@
     export let agent;
 
     /** @type {() => void} */
-    export let handleAgentChange;
+    export let handleAgentChange = () => {};
 
     export const fetchKnowledgeBases = () => {
         const candidates = innerKnowledgeBases?.filter(x => !!x.name)?.map(x => {
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
index 8a40d67d..a688cbe2 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
@@ -13,7 +13,7 @@
     let models = [];
 
     /** @type {() => void} */
-    export let handleAgentChange;
+    export let handleAgentChange = () => {};
 
     const recursiveDepthLowerLimit = 1;
     const recursiveDepthUpperLimit = 10;
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
index 3cee375e..7b4b679e 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte
@@ -20,7 +20,7 @@
     export let labels = [];
     
     /** @type {() => void} */
-    export let handleAgentChange;
+    export let handleAgentChange = () => {};
 
     /** @type {boolean} */
     export let resetable = false;
@@ -129,9 +129,13 @@
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">Visibility</th>
+                        <th class="agent-prop-key">
+                            <div class="mt-2 mb-2">
+                                Visibility
+                            </div>
+                        </th>
                         <td>
-                            <div class="form-check mb-3">
+                            <div class="form-check mt-2 mb-2" style="width: fit-content;">
                                 <input 
                                     class="form-check-input" 
                                     type="checkbox" 
@@ -139,14 +143,20 @@
                                     on:change={handleAgentChange}
                                     id="is_public" 
                                 />
-                                <label class="form-check-label" for="is_public"> Public </label>
+                                <label class="form-check-label" for="is_public">
+                                    Public
+                                </label>
                             </div>
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">Routable</th>
+                        <th class="agent-prop-key">
+                            <div class="mt-2 mb-2">
+                                Routable
+                            </div>
+                        </th>
                         <td>
-                            <div class="form-check mb-3">
+                            <div class="form-check mt-2 mb-2" style="width: fit-content;">
                                 <input 
                                     class="form-check-input" 
                                     type="checkbox" 
@@ -159,7 +169,11 @@
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">Profiles</th>
+                        <th class="agent-prop-key">
+                            <div class="mt-2 mb-2">
+                                Profiles
+                            </div>
+                        </th>
                         <td>
                             <div class="agent-prop-list-container vertical-flexible">
                                 {#each profiles as profile, index}
@@ -198,7 +212,11 @@
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">Labels</th>
+                        <th class="agent-prop-key">
+                            <div class="mt-2 mb-2">
+                                Labels
+                            </div>
+                        </th>
                         <td>
                             <div class="agent-prop-list-container vertical-flexible">
                                 {#each labels as label, index}
@@ -237,9 +255,13 @@
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">Status</th>
+                        <th class="agent-prop-key">
+                            <div class="mt-2 mb-2">
+                                Status
+                            </div>
+                        </th>
                         <td>							
-                            <div class="form-check mb-3">
+                            <div class="form-check mt-2 mb-2" style="width: fit-content;">
                                 <input 
                                     class="form-check-input" 
                                     type="checkbox" 
@@ -252,9 +274,13 @@
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">Max message count</th>
+                        <th class="agent-prop-key" style="vertical-align: middle">
+                            <div class="mt-1">
+                                Max message count
+                            </div>
+                        </th>
                         <td>							
-                            <div class="mb-3">
+                            <div class="mt-2 mb-2">
                                 <Input
                                     type="number"
                                     style="width: 50%; min-width: 100px;"
@@ -269,8 +295,16 @@
                         </td>
                     </tr>
                     <tr>
-                        <th class="agent-prop-key">Created Date</th>
-                        <td>{utcToLocal(agent.created_datetime)}</td>
+                        <th class="agent-prop-key">
+                            <div class="mt-2 mb-2">
+                                Created Date
+                            </div>
+                        </th>
+                        <td>
+                            <div class="mt-2 mb-2">
+                                {utcToLocal(agent.created_datetime)}
+                            </div>
+                        </td>
                     </tr>
                 </tbody>
             </Table>
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index f1e9d779..efe8f59b 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -10,7 +10,7 @@
     export let agent;
 
     /** @type {() => void} */
-    export let handleAgentChange;
+    export let handleAgentChange = () => {};
 
     export const fetchRules = () => {
         const candidates = innerRules?.filter(x => !!x.trigger_name)?.map(x => {
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
new file mode 100644
index 00000000..66067bee
--- /dev/null
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
@@ -0,0 +1,185 @@
+<script>
+    import { onMount } from 'svelte';
+    import { _ } from 'svelte-i18n';
+    import { v4 as uuidv4 } from 'uuid';
+    import util from "lodash";
+    import { Card, CardBody, FormGroup, Input, CardHeader } from '@sveltestrap/sveltestrap';
+    import NavBar from '$lib/common/nav-bar/NavBar.svelte';
+	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
+
+
+    /** @type {import('$agentTypes').AgentModel} */
+    export let agent;
+
+    /** @type {() => void} */
+    export let handleAgentChange = () => {};
+
+    export const fetchOriginalTemplates = () => {
+        return {
+            templates: inner_templates?.map(x => ({
+                name: x.name,
+                content: x.content
+            })) || []
+        };
+    };
+
+    export const fetchTemplates = () => {
+        const candidates = inner_templates?.filter((x, idx) => !!x.name?.trim())?.map(x => {
+            return { name: x.name.trim().toLowerCase(), content: x.content };
+        });
+
+        const prompts = [];
+        const groups = util.groupBy(candidates, (/** @type {any} */ x) => x.name);
+        for (const key in groups) {
+            if (groups[key]?.length > 0) {
+                prompts.push(groups[key][0]);
+            }
+        }
+
+        return {
+            templates: prompts
+        };
+    }
+
+    export const refreshTemplates = () => init();
+
+
+    /** @type {import('$agentTypes').AgentTemplate} */
+    const defaultTemplate = {
+        uid: '',
+        name: '',
+        content: ''
+    };
+
+    /** @type {import('$agentTypes').AgentTemplate[]} */
+    let inner_templates = [];
+
+    /** @type {import('$agentTypes').AgentTemplate} */
+    let selected_template = { ...defaultTemplate };
+
+    onMount(() => {
+        init();
+    });
+
+    function init() {
+        inner_templates = [
+            ...agent.templates?.map(x => ({
+                uid: uuidv4(),
+                name: x.name,
+                content: x.content
+            })) || []
+        ];
+
+        selected_template = inner_templates.length > 0 ? inner_templates[0] : {
+            ...defaultTemplate
+        };
+    }
+
+
+    /** @param {string | undefined | null} uid */
+    function selectTemplate(uid) {
+        if (uid === selected_template.uid) {
+            return;
+        }
+
+        selected_template = inner_templates.find(x => x.uid === uid) || { ...defaultTemplate };
+    }
+
+    /** @param {any} e */
+    function changePrompt(e) {
+        e.preventDefault();
+        const value = e.target.value;
+        selected_template.content = value || '';
+    }
+
+    function addTemplate() {
+        inner_templates = [
+            ...inner_templates,
+            {
+                uid: uuidv4(),
+                name: '',
+                content: ''
+            }
+        ];
+
+        selected_template = inner_templates[inner_templates.length-1];
+    }
+
+    /** @param {string | undefined | null} uid */
+    function deleteTemplate(uid) {
+        inner_templates = inner_templates.filter(x => x.uid !== uid);
+        if (selected_template.uid === uid) {
+            selected_template = inner_templates.length > 0 ? inner_templates[0] : {
+                ...defaultTemplate
+            };
+        }
+    }
+</script>
+
+
+<Card class="agent-prompt-container">
+    <CardHeader class="agent-prompt-header border-bottom">
+        <div class="d-flex">
+            <div class="flex-grow-1">
+                <h5 class="fw-semibold">{'Templates'}</h5>
+            </div>
+        </div>
+    </CardHeader>
+    <CardBody>
+        <FormGroup class="agent-prompt-body">
+            <div class="mb-2" style="display: flex; gap: 10px;">
+                <div class="line-align-center fw-bold">
+                    {'Prompts:'}
+                </div>
+                <!-- svelte-ignore a11y-click-events-have-key-events -->
+                <!-- svelte-ignore a11y-no-static-element-interactions -->
+                <div
+                    class="text-primary clickable"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    title="Add templates"
+                    style="font-size: 16px;"
+                    on:click={() => { addTemplate(); handleAgentChange(); }}
+                >
+                    <i class="mdi mdi-plus-circle-outline" />
+                </div>
+            </div>
+            
+            {#if inner_templates.length > 0}
+            <NavBar
+                id={'agent-template-container'}
+                disableDefaultStyles
+                containerClasses={'nav-tabs-secondary'}
+            >
+                {#each inner_templates as template, idx (idx) }
+                <NavItem
+                    containerStyles={`flex: 0 1 calc(100% / ${inner_templates.length <= 2 ? inner_templates.length : 3})`}
+                    navBtnStyles={'text-transform: none;'}
+                    navBtnId={`template-${idx}-prompt-tab`}
+                    dataBsTarget={`#template-${idx}-prompt-tab-pane`}
+                    ariaControls={`template-${idx}-prompt-tab-pane`}
+                    bind:navBtnText={template.name}
+                    active={template.uid === selected_template.uid}
+                    allowEdit
+                    allowDelete
+                    maxEditLength={50}
+                    editPlaceholder={'Type a title here...'}
+                    onClick={() => selectTemplate(template.uid)}
+                    onDelete={() => { deleteTemplate(template.uid); handleAgentChange(); }}
+                    onInput={() => handleAgentChange()}
+                />
+                {/each}
+            </NavBar>
+            <Input
+                type="textarea"
+                class="form-control"
+                style="scrollbar-width: thin; resize: none;"
+                value={selected_template.content}
+                rows={15}
+                on:input={(e) => { changePrompt(e); handleAgentChange(); }}
+                placeholder="Enter your template"
+            />
+            {/if}
+        </FormGroup>
+    </CardBody>
+</Card>
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
index abf65151..3a8afd7f 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
@@ -11,7 +11,7 @@
     export let agent;
 
     /** @type {() => void} */
-    export let handleAgentChange;
+    export let handleAgentChange = () => {};
 
     export const fetchUtilities = () => {
         const candidates = innerUtilities?.filter(x => !!x.name)?.map(x => {
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index 93062b99..63482114 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -13,9 +13,9 @@
     export let agent;
 
     /** @type {() => void} */
-    export let handleAgentChange;
+    export let handleAgentChange = () => {};
 
-    export const fetchData = () => {
+    export const fetchTabData = () => {
         const utilities = agentUtilityCmp?.fetchUtilities();
         const knwoledgebases = agentKnowledgeBaseCmp?.fetchKnowledgeBases();
         const rules = agentEventRuleCmp?.fetchRules();
@@ -27,7 +27,7 @@
         };
     };
 
-    export const fetchOriginalData = () => {
+    export const fetchOriginalTabData = () => {
         const utilities = agentUtilityCmp?.fetchOriginalUtilities();
         const knwoledgebases = agentKnowledgeBaseCmp?.fetchOriginalKnowledgeBases();
         const rules = agentEventRuleCmp?.fetchOriginalRules();

From cfaa8748aaa8c031010f51060e3419890829bf91 Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Wed, 19 Feb 2025 17:37:11 -0600
Subject: [PATCH 2/2] rename

---
 src/routes/page/agent/[agentId]/+page.svelte  |  8 +++----
 .../agent-components/agent-function.svelte    |  2 +-
 .../agent-components/agent-instruction.svelte |  8 +++----
 .../agent-knowledge-base.svelte               | 12 +++++-----
 .../agent-components/agent-llm-config.svelte  | 22 ++++++++++---------
 .../agent-components/agent-rule.svelte        | 14 ++++++------
 .../agent-components/agent-template.svelte    |  2 +-
 .../agent-components/agent-utility.svelte     | 18 +++++++--------
 .../page/agent/[agentId]/agent-tabs.svelte    | 10 ++++-----
 9 files changed, 49 insertions(+), 47 deletions(-)

diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 953e3b61..0e1837e6 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -164,7 +164,7 @@
     }
 
     function refreshInstructions() {
-        agentInstructionCmp?.refreshInstructions();
+        agentInstructionCmp?.refresh();
     }
 
     // Templates
@@ -181,7 +181,7 @@
     }
 
     function refreshTemplates() {
-        agentTemplateCmp?.refreshTemplates();
+        agentTemplateCmp?.refresh();
     }
 
 
@@ -246,8 +246,8 @@
         setTimeout(() => {
             refreshInstructions();
             refreshTemplates();
-            agentFunctionCmp?.reinit();
-            agentTabsCmp?.reinit();
+            agentFunctionCmp?.refresh();
+            agentTabsCmp?.refresh();
         });
     }
 </script>
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
index c219b46c..b54e59be 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-function.svelte
@@ -12,7 +12,7 @@
         return content;
     }
 
-    export const reinit = () => init();
+    export const refresh = () => init();
 
     /** @type {import('svelte-jsoneditor').Content} */
     let content = {
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
index 522b4498..1530513b 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-instruction.svelte
@@ -1,11 +1,11 @@
 <script>
     import { onMount } from 'svelte';
+    import { _ } from 'svelte-i18n';
+    import { v4 as uuidv4 } from 'uuid';
+    import util from "lodash";
     import { Card, CardBody, FormGroup, Input, CardHeader } from '@sveltestrap/sveltestrap';
     import NavBar from '$lib/common/nav-bar/NavBar.svelte';
 	import NavItem from '$lib/common/nav-bar/NavItem.svelte';
-    import { v4 as uuidv4 } from 'uuid';
-    import util from "lodash";
-	import { _ } from 'svelte-i18n';
 
     const defaultChannel = "default";
     
@@ -44,7 +44,7 @@
         };
     }
 
-    export const refreshInstructions = () => init();
+    export const refresh = () => init();
 
 
     /** @type {import('$agentTypes').ChannelInstruction} */
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
index 3087ccaa..97605035 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-knowledge-base.svelte
@@ -31,7 +31,7 @@
             }
         });
 
-        refresh(knowledgeBases);
+        innerRefresh(knowledgeBases);
         return knowledgeBases;
     }
 
@@ -39,7 +39,7 @@
         return innerKnowledgeBases;
     }
 
-    export const reinit = () => init();
+    export const refresh = () => init();
 
     /** @type {any[]} */
     let knowledgeBaseOptions = [];
@@ -72,7 +72,7 @@
                 displayName: getDisplayOption(x),
             };
         }) || [];
-        refresh(list);
+        innerRefresh(list);
     }
 
     /** @param {import('$agentTypes').AgentKnowledgeBase | any} b */
@@ -93,7 +93,7 @@
         found.name = vals[0];
         found.type = vals[1];
         handleAgentChange();
-        refresh(innerKnowledgeBases);
+        innerRefresh(innerKnowledgeBases);
     }
 
     function addKnowledgeBase() {
@@ -125,12 +125,12 @@
 
         found.disabled = !e.target.checked;
         handleAgentChange();
-        refresh(innerKnowledgeBases);
+        innerRefresh(innerKnowledgeBases);
     }
 
 
     /** @param {import('$agentTypes').AgentKnowledgeBase[]} list */
-    function refresh(list) {
+    function innerRefresh(list) {
         innerKnowledgeBases = list?.map(x => {
             return {
                 name: x.name,
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
index a688cbe2..c2cae30f 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-llm-config.svelte
@@ -3,23 +3,28 @@
     import { Card, CardBody, Input } from '@sveltestrap/sveltestrap';
     import { getLlmProviders, getLlmProviderModels } from '$lib/services/llm-provider-service';
     
-    /** @type {string[]} */
-    let providers = [];
-
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
 
-    /** @type {import('$commonTypes').LlmModelSetting[]} */
-    let models = [];
-
     /** @type {() => void} */
     export let handleAgentChange = () => {};
 
+    export const refresh = () => {
+        config = agent.llm_config;
+        init();
+    };
+
     const recursiveDepthLowerLimit = 1;
     const recursiveDepthUpperLimit = 10;
 
     let config = agent.llm_config;
 
+    /** @type {string[]} */
+    let providers = [];
+
+    /** @type {import('$commonTypes').LlmModelSetting[]} */
+    let models = [];
+
     onMount(async () =>{
         await init();
     });
@@ -36,10 +41,7 @@
         config.model = foundModel?.name || null;
     }
 
-    export const reinit = () => {
-        config = agent.llm_config;
-        init();
-    };
+    
 
     /** @param {any} e */
     async function changeProvider(e) {
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
index efe8f59b..4c8d1290 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-rule.svelte
@@ -31,7 +31,7 @@
             }
         });
 
-        refresh(rules);
+        innerRefresh(rules);
         return rules;
     }
 
@@ -39,7 +39,7 @@
         return innerRules;
     }
 
-    export const reinit = () => init();
+    export const refresh = () => init();
 
     /** @type {any[]} */
     let ruleOptions = [];
@@ -70,7 +70,7 @@
                 displayName: "",
             };
         }) || [];
-        refresh(list);
+        innerRefresh(list);
     }
     
     /**
@@ -84,7 +84,7 @@
         const val = e.target.value;
         found.trigger_name = val;
         handleAgentChange();
-        refresh(innerRules);
+        innerRefresh(innerRules);
     }
 
     function addRule() {
@@ -116,7 +116,7 @@
 
         found.disabled = !e.target.checked;
         handleAgentChange();
-        refresh(innerRules);
+        innerRefresh(innerRules);
     }
 
     /**
@@ -133,12 +133,12 @@
             found.criteria = val;
         }
         handleAgentChange();
-        refresh(innerRules);
+        innerRefresh(innerRules);
     }
 
 
     /** @param {import('$agentTypes').AgentRule[]} list */
-    function refresh(list) {
+    function innerRefresh(list) {
         innerRules = list?.map(x => {
             return {
                 trigger_name: x.trigger_name,
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
index 66067bee..1e647c42 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-template.svelte
@@ -41,7 +41,7 @@
         };
     }
 
-    export const refreshTemplates = () => init();
+    export const refresh = () => init();
 
 
     /** @type {import('$agentTypes').AgentTemplate} */
diff --git a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
index 3a8afd7f..c76c738c 100644
--- a/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
+++ b/src/routes/page/agent/[agentId]/agent-components/agent-utility.svelte
@@ -47,7 +47,7 @@
             };
         });
 
-        refresh(candidates);
+        innerRefresh(candidates);
         return candidates;
     }
 
@@ -55,7 +55,7 @@
         return innerUtilities;
     }
 
-    export const reinit = () => init();
+    export const refresh = () => init();
 
     /** @type {any} */
     let utilityMapper = {};
@@ -121,7 +121,7 @@
                 })) || []
             };
         }) || [];
-        refresh(list);
+        innerRefresh(list);
     }
 
     /**
@@ -142,7 +142,7 @@
             // @ts-ignore
             ...utilityMapper[name].templates?.filter(x => !!x.name) || []
         ];
-        refresh(innerUtilities);
+        innerRefresh(innerUtilities);
     }
 
     function addUtility() {
@@ -176,7 +176,7 @@
             found.templates.push({ name: '', displayName: '' });
         }
 
-        refresh(innerUtilities);
+        innerRefresh(innerUtilities);
     }
 
     /**
@@ -196,7 +196,7 @@
             found.templates = tps;
         }
         
-        refresh(innerUtilities);
+        innerRefresh(innerUtilities);
     }
 
     
@@ -224,7 +224,7 @@
                 tp.displayName = vals[1];
             }
         }
-        refresh(innerUtilities);
+        innerRefresh(innerUtilities);
     }
 
     /**
@@ -236,12 +236,12 @@
         if (!found) return;
 
         found.disabled = !e.target.checked;
-        refresh(innerUtilities);
+        innerRefresh(innerUtilities);
     }
 
 
     /** @param {import('$agentTypes').AgentUtility[]} list */
-    function refresh(list) {
+    function innerRefresh(list) {
         innerUtilities = list?.map(x => {
             return {
                 name: x.name,
diff --git a/src/routes/page/agent/[agentId]/agent-tabs.svelte b/src/routes/page/agent/[agentId]/agent-tabs.svelte
index 63482114..d9abfc50 100644
--- a/src/routes/page/agent/[agentId]/agent-tabs.svelte
+++ b/src/routes/page/agent/[agentId]/agent-tabs.svelte
@@ -39,11 +39,11 @@
         };
     }
 
-    export const reinit = () => {
-        agentLlmConfigCmp?.reinit();
-        agentUtilityCmp?.reinit();
-        agentKnowledgeBaseCmp?.reinit();
-        agentEventRuleCmp?.reinit();
+    export const refresh = () => {
+        agentLlmConfigCmp?.refresh();
+        agentUtilityCmp?.refresh();
+        agentKnowledgeBaseCmp?.refresh();
+        agentEventRuleCmp?.refresh();
     }
 
     /** @type {any} */