From 1319d1f215717cf32102544329974806b66f6c9e Mon Sep 17 00:00:00 2001
From: Jicheng Lu <103353@smsassist.com>
Date: Mon, 28 Oct 2024 15:41:24 -0500
Subject: [PATCH] add editable channel prompts

---
 src/lib/common/InPlaceEdit.svelte             |  71 +++++++----
 src/lib/common/nav-bar/NavItem.svelte         |  48 +++++++-
 src/lib/helpers/types/agentTypes.js           |   1 +
 src/routes/page/agent/[agentId]/+page.svelte  |  19 ++-
 .../agent/[agentId]/agent-overview.svelte     |   2 +-
 .../page/agent/[agentId]/agent-prompt.svelte  | 115 +++++++++++++++---
 6 files changed, 210 insertions(+), 46 deletions(-)

diff --git a/src/lib/common/InPlaceEdit.svelte b/src/lib/common/InPlaceEdit.svelte
index a5993bb4..2eed2a9a 100644
--- a/src/lib/common/InPlaceEdit.svelte
+++ b/src/lib/common/InPlaceEdit.svelte
@@ -1,46 +1,73 @@
 <script>
-    import { createEventDispatcher, onMount } from 'svelte'
+    import { createEventDispatcher, onMount } from 'svelte';
   
-    export let value, required = true
+    /** @type {string} */
+    export let value = '';
+
+    /** @type {boolean} */
+    export let required = true;
+
+    /** @type {number} */
+    export let maxLength = 30;
+
+    /** @type {string} */
+    export let placeholder = 'Please edit here...';
   
-    const dispatch = createEventDispatcher()
-    let editing = false, original
+    const dispatch = createEventDispatcher();
+    let editing = false;
+    let original = '';
   
     onMount(() => {
-      original = value
+        original = value;
     })
   
     function edit() {
-      editing = true
+        editing = true;
     }
   
     function submit() {
-          if (value != original) {
-              dispatch('submit', value)
-          }
+        if (value != original) {
+            dispatch('submit', value);
+        }
           
-      editing = false
+        editing = false;
     }
   
+    /** @param {any} event */
     function keydown(event) {
-      if (event.key == 'Escape') {
-        event.preventDefault()
-        value = original
-        editing = false
-      }
+        if (event.key == 'Escape') {
+            event.preventDefault()
+            value = original;
+            editing = false
+        }
     }
       
+    /** @param {HTMLInputElement} element */
     function focus(element) {
-        element.focus()
+        element.focus();
     }
 </script>
 
 {#if editing}
-<form on:submit|preventDefault={submit} on:keydown={keydown}>
-    <input class="form-control" bind:value on:blur={submit} {required} use:focus/>
-</form>
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <form on:submit|preventDefault={() => submit()} on:keydown={e => keydown(e)}>
+        <input
+            class="form-control"
+            bind:value={value}
+            {required}
+            maxlength={maxLength}
+            use:focus
+            on:blur={() => submit()}
+        />
+    </form>
 {:else}
-<div on:click={edit}>
-    {value}
-</div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div style="width: fit-content; min-width: 30%;" on:click={() => edit()}>
+        {#if !!value?.trim()}
+            <span>{value}</span>
+        {:else}
+            <span class="text-secondary fw-light">{placeholder}</span>
+        {/if}
+    </div>
 {/if}  
\ No newline at end of file
diff --git a/src/lib/common/nav-bar/NavItem.svelte b/src/lib/common/nav-bar/NavItem.svelte
index 45ca2293..8ebed829 100644
--- a/src/lib/common/nav-bar/NavItem.svelte
+++ b/src/lib/common/nav-bar/NavItem.svelte
@@ -1,4 +1,6 @@
 <script>
+	import InPlaceEdit from "../InPlaceEdit.svelte";
+
 
     /** @type {string} */
     export let containerClasses = "";
@@ -39,6 +41,18 @@
     /** @type {boolean} */
     export let disabled = false;
 
+    /** @type {boolean} */
+    export let allowEdit = false;
+
+    /** @type {number} */
+    export let maxEditLength = 30;
+
+    /** @type {string} */
+    export let editPlaceholder = "Please edit here...";
+
+    /** @type {boolean} */
+    export let allowDelete = false;
+
     /** @type {string} */
     export let dataBsToggle = "tab";
 
@@ -51,16 +65,25 @@
     /** @type {() => void} */
     export let onClick = () => {};
 
+    /** @type {() => void} */
+    export let onDelete = () => {};
+
     /** @param {any} e */
     function handleTabClick(e) {
         e.preventDefault();
         onClick?.();
     }
+
+    /** @param {any} e */
+    function handleTabDelete(e) {
+        e.preventDefault();
+        onDelete?.();
+    }
 </script>
 
 <li
     class="{disableDefaultContainerStyles ? '' : 'nav-item tab-item'} {containerClasses}"
-    style={`${containerStyles}`}
+    style={`${allowDelete ? 'display: flex;' : ''} ${containerStyles}`}
     id={containerId}
     role={containerRole}
 >
@@ -78,8 +101,27 @@
         disabled={disabled}
         on:click={(e) => handleTabClick(e)}
     >
-        {navBtnText}
+        {#if allowEdit}
+            <InPlaceEdit bind:value={navBtnText} maxLength={maxEditLength} placeholder={editPlaceholder} />
+        {:else}
+            <div style="height: 100%" class="line-align-center">
+                <div>{navBtnText}</div>
+            </div>
+        {/if}
     </button>
+    
+    {#if allowDelete}
+        <slot name="delete-icon">
+            <!-- svelte-ignore a11y-click-events-have-key-events -->
+            <!-- svelte-ignore a11y-no-static-element-interactions -->
+            <div class="line-align-center">
+                <i
+                    class="mdi mdi-minus-circle text-danger clickable"
+                    on:click={e => handleTabDelete(e)}
+                />
+            </div>
+        </slot>
+    {/if}
 </li>
 
 <style>
@@ -93,6 +135,8 @@
         border: none !important;
         color: white;
         font-weight: 500;
+        display: inline-flex;
+        justify-content: center;
     }
 
     .tab-btn.active {
diff --git a/src/lib/helpers/types/agentTypes.js b/src/lib/helpers/types/agentTypes.js
index 23579999..0caa9854 100644
--- a/src/lib/helpers/types/agentTypes.js
+++ b/src/lib/helpers/types/agentTypes.js
@@ -90,6 +90,7 @@
 
 /**
  * @typedef {Object} ChannelInstruction
+ * @property {string} [uid]
  * @property {string} channel 
  * @property {string} instruction
  */
diff --git a/src/routes/page/agent/[agentId]/+page.svelte b/src/routes/page/agent/[agentId]/+page.svelte
index 24e7525a..1cab3186 100644
--- a/src/routes/page/agent/[agentId]/+page.svelte
+++ b/src/routes/page/agent/[agentId]/+page.svelte
@@ -24,6 +24,8 @@
     let agent;
     /** @type {any} */
     let agentFunctionCmp = null;
+    /** @type {any} */
+    let agentPromptCmp = null;
 
     /** @type {boolean} */
     let isLoading = false;
@@ -62,7 +64,8 @@
 
     function handleAgentUpdate() {
         fetchJsonContent();
-        isLoading = true;
+        fetchPrompts();
+
         agent = {
             ...agent,
             description: agent.description || '',
@@ -71,9 +74,11 @@
             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) || []
         };
+        isLoading = true;
         saveAgent(agent).then(res => {
             isLoading = false;
 			isComplete = true;
+            refreshChannelPrompts();
 			setTimeout(() => {
 				isComplete = false;
 			}, duration);
@@ -99,6 +104,16 @@
                             (jsonContent?.templates?.length > 0 ? jsonContent?.templates : []);
     }
 
+    function fetchPrompts() {
+        const obj = agentPromptCmp?.fetchChannelPrompts();
+        agent.instruction = obj.systemPrompt;
+        agent.channel_instructions = obj.channelPrompts || [];
+    }
+
+    function refreshChannelPrompts() {
+        agentPromptCmp?.refreshChannelPrompts();
+    }
+
     function deleteCurrentAgent() {
         Swal.fire({
             title: 'Are you sure?',
@@ -141,7 +156,7 @@
         </Col>
         <Col class="section-min-width" style="flex: 65%;">
             <div class="agent-detail-section">
-                <AgentPrompt agent={agent} />
+                <AgentPrompt bind:this={agentPromptCmp} agent={agent} />
             </div>
             <div class="agent-detail-section">
                 <AgentFunction bind:this={agentFunctionCmp} agent={agent} />
diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-overview.svelte
index addf7bef..eb9682d0 100644
--- a/src/routes/page/agent/[agentId]/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-overview.svelte
@@ -83,7 +83,7 @@
                     <span><i class="mdi mdi-chat" /></span>
                 </Button>
             </div>
-            <h5 class="mt-1 mb-1"><InPlaceEdit bind:value={agent.name}/></h5>
+            <h5 class="mt-1 mb-1"><InPlaceEdit bind:value={agent.name} /></h5>
             <p class="text-muted mb-0">Updated at {format(agent.updated_datetime, 'time')}</p>
         </div>
     </CardHeader>
diff --git a/src/routes/page/agent/[agentId]/agent-prompt.svelte b/src/routes/page/agent/[agentId]/agent-prompt.svelte
index fa42ed6a..27c93876 100644
--- a/src/routes/page/agent/[agentId]/agent-prompt.svelte
+++ b/src/routes/page/agent/[agentId]/agent-prompt.svelte
@@ -1,12 +1,36 @@
 <script>
     import { onMount } from 'svelte';
-    import { Card, CardBody, FormGroup, Label, Input, CardHeader } from '@sveltestrap/sveltestrap';
+    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';
     
     /** @type {import('$agentTypes').AgentModel} */
     export let agent;
 
+    export const fetchChannelPrompts = () => {
+        const candidates = local_instructions?.filter((x, idx) => idx > 0 && !!x.channel?.trim())?.map(x => {
+            return { channel: x.channel.trim().toLowerCase(), instruction: x.instruction };
+        });
+
+        const prompts = [];
+        const groups = util.groupBy(candidates, (/** @type {any} */ x) => x.channel);
+        for (const key in groups) {
+            if (groups[key]?.length > 0) {
+                prompts.push(groups[key][0]);
+            }
+        }
+
+        return {
+            systemPrompt: local_instructions[0].instruction,
+            channelPrompts: prompts
+        };
+    }
+
+    export const refreshChannelPrompts = () => init();
+
     const defaultChannel = "default";
 
     /** @type {import('$agentTypes').ChannelInstruction} */
@@ -22,24 +46,33 @@
     let selected_instruction = { ...defaultInstruction };
 
     onMount(() => {
+        init();
+    });
+
+    function init() {
         local_instructions = [
             {
+                uid: uuidv4(),
                 channel: defaultChannel,
                 instruction: agent.instruction
             },
-            ...agent.channel_instructions
+            ...agent.channel_instructions?.map(x => ({
+                uid: uuidv4(),
+                channel: x.channel,
+                instruction: x.instruction
+            })) || []
         ];
 
         selected_instruction = local_instructions[0];
-    });
+    }
 
-    /** @param {string} channel */
-    function selectChannel(channel) {
-        if (channel === selected_instruction.channel) {
+    /** @param {string | undefined} uid */
+    function selectChannel(uid) {
+        if (uid === selected_instruction.uid) {
             return;
         }
 
-        selected_instruction = local_instructions.find(x => x.channel === channel) || { ...defaultInstruction };
+        selected_instruction = local_instructions.find(x => x.uid === uid) || { ...defaultInstruction };
     }
 
     /** @param {any} e */
@@ -47,9 +80,24 @@
         e.preventDefault();
         const value = e.target.value;
         selected_instruction.instruction = value || '';
+    }
 
-        if (selected_instruction.channel === defaultChannel) {
-            agent.instruction = selected_instruction.instruction;
+    function addChannel() {
+        local_instructions = [
+            ...local_instructions,
+            {
+                uid: uuidv4(),
+                channel: '',
+                instruction: ''
+            }
+        ];
+    }
+
+    /** @param {string | undefined} uid */
+    function deleteChannel(uid) {
+        local_instructions = local_instructions.filter(x => x.uid !== uid);
+        if (selected_instruction.uid === uid) {
+            selected_instruction = local_instructions[0];
         }
     }
 </script>
@@ -64,20 +112,44 @@
     </CardHeader>
     <CardBody>
         <FormGroup class="mb-3">
-            <Label for="formmessage">Description:</Label>
+            <div class="mb-2">
+                <div class="line-align-center fw-bold">
+                    {'Description:'}
+                </div>
+            </div>
             <Input
                 type="textarea"
-                id="formmessage"
                 class="form-control"
                 style="scrollbar-width: thin; resize: none;"
-                rows="4"
+                rows={4}
                 bind:value={agent.description}
                 placeholder="Enter your Message"
             />
         </FormGroup>
         
         <FormGroup class="mb-3" style="overflow-y: auto; scrollbar-width: none;">
-            <Label for="form-prompt">System Prompt:</Label>
+            <div class="mb-2" style="display: flex; gap: 10px;">
+                <div class="line-align-center fw-bold">
+                    {#if local_instructions.length > 1}
+                        {'Prompts:'}
+                    {:else}
+                        {'System Prompt:'}
+                    {/if}
+                </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 channel instruction"
+                    style="font-size: 16px;"
+                    on:click={() => addChannel()}
+                >
+                    <i class="mdi mdi-plus-circle-outline" />
+                </div>
+            </div>
+            
             {#if local_instructions.length > 1}
             <NavBar
                 id={'agent-instruction-container'}
@@ -86,23 +158,28 @@
             >
                 {#each local_instructions as inst, idx (idx) }
                 <NavItem
-                    containerStyles={`flex: 0 1 calc(100% / ${local_instructions.length})`}
+                    containerStyles={`flex: 0 1 calc(100% / ${local_instructions.length <= 2 ? local_instructions.length : 3})`}
+                    navBtnStyles={'text-transform: none;'}
                     navBtnId={`${inst.channel}-prompt-tab`}
                     dataBsTarget={`#${inst.channel}-prompt-tab-pane`}
                     ariaControls={`${inst.channel}-prompt-tab-pane`}
-                    navBtnText={inst.channel}
-                    active={inst.channel === selected_instruction.channel}
-                    onClick={() => selectChannel(inst.channel)}
+                    bind:navBtnText={inst.channel}
+                    active={inst.uid === selected_instruction.uid}
+                    allowEdit={idx > 0}
+                    allowDelete={idx > 0}
+                    maxEditLength={20}
+                    editPlaceholder={'Type a channel name here...'}
+                    onClick={() => selectChannel(inst.uid)}
+                    onDelete={() => deleteChannel(inst.uid)}
                 />
                 {/each}
             </NavBar>
             {/if}
             <Input
                 type="textarea"
-                id="form-prompt"
                 class="form-control"
                 style="scrollbar-width: thin; resize: none;"
-                rows="24"
+                rows={24}
                 value={selected_instruction.instruction}
                 on:input={(e) => changePrompt(e)}
                 placeholder="Enter your Prompt"