add agent mode

Author: Jicheng Lu

src/lib/helpers/enums.js

@@ -71,6 +71,12 @@ const agentType = {
 };
 export const AgentType = Object.freeze(agentType);
 
+const agentMode = {
+    Eager: "eager",
+    Lazy: "lazy"
+};
+export const AgentMode = Object.freeze(agentMode);
+
 const agentTaskStatus = {
     Scheduled: 'scheduled',
     New: 'new',

src/lib/helpers/types/agentTypes.js

@@ -44,6 +44,7 @@
  * @property {string} name - Agent name.
  * @property {string} description - Agent description.
  * @property {string} type - Agent type
+ * @property {string} mode - Agent mode
  * @property {string} instruction - System prompt
  * @property {ChannelInstruction[]} channel_instructions - Channel instructions
  * @property {boolean} disabled

src/routes/page/agent/[agentId]/agent-components/agent-overview.svelte

@@ -1,10 +1,10 @@
 <script>
     import { onMount } from 'svelte';
     import { Button, Card, CardBody, CardHeader, Input, Table } from '@sveltestrap/sveltestrap';
-    import { _ } from 'svelte-i18n'  
-    import InPlaceEdit from '$lib/common/InPlaceEdit.svelte'
+    import { _ } from 'svelte-i18n';
+    import InPlaceEdit from '$lib/common/InPlaceEdit.svelte';
     import { utcToLocal } from '$lib/helpers/datetime';
-	import { AgentType } from '$lib/helpers/enums';
+	import { AgentMode, AgentType } from '$lib/helpers/enums';
 	import { AgentExtensions } from '$lib/helpers/utils/agent';
 
     const limit = 10;
@@ -24,6 +24,11 @@
    
     onMount(() => {});
 
+    /** @type {import('$commonTypes').IdName[]} */
+	const agentModeOptions = Object.entries(AgentMode).map(([k, v]) => (
+		{ id: v, name: v }
+	));
+
     function addProfile() {
         if (!!!agent) return;
 
@@ -58,6 +63,15 @@
         handleAgentChange();
     }
 
+    /**
+	 * @param {any} e
+	 */
+    function changeMode(e) {
+        const value = e.target.value;
+        agent.mode = value;
+        handleAgentChange();
+    }
+
     function chatWithAgent() {
         if (!!!agent?.id) return;
         
@@ -258,6 +272,27 @@
                             </div>
                         </td>
                     </tr>
+                    <tr>
+                        <th class="agent-prop-key" style="vertical-align: middle">
+                            <div class="mt-1">
+                                Mode
+                            </div>
+                        </th>
+                        <td>							
+                            <div class="mt-2 mb-2" style="width: fit-content;">
+                                <Input
+                                    type="select"
+                                    on:change={e => changeMode(e)}
+                                >
+                                    {#each [...agentModeOptions] as option}
+                                        <option value={option.id} selected={option.id === agent.mode}>
+                                            {option.name}
+                                        </option>
+                                    {/each}
+                                </Input>
+                            </div>
+                        </td>
+                    </tr>
                     <tr>
                         <th class="agent-prop-key" style="vertical-align: middle">
                             <div class="mt-1">