add editable channel prompts

Jicheng Lu · Jicheng Lu · commit 1319d1f21571 · 2024-10-28T15:41:24.000-05:00
diff --git 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}  
diff --git 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
@@ -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
@@ -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
@@ -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
