agent run task

Oceania2018 · Oceania2018 · commit 2f5234f4370c · 2024-01-27T19:01:30.000-06:00
diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
@@ -91,6 +91,7 @@
  * @property {string} [type]
  * @property {boolean} [isPublic]
  * @property {boolean} [disabled]
+ * @property {string[]} [agentIds]
  */
 
 /**
@@ -123,6 +124,12 @@
  * @property {AgentLlmConfig} llmConfig - LLM settings.
  */
 
+/**
+ * @typedef {Object} InstructMessageModel
+ * @property {string} [instruction] - User provided prompt instead of predefined template.
+ * @property {string} [template] - The template name.
+ */
+
 /**
  * @typedef {Object} RoutingRule
  * @property {string} type
@@ -152,10 +159,10 @@
  * @property {string} title - The conversation title.
  * @property {UserModel} user - The conversation initializer.
  * @property {string} agent_id - The conversation agent id.
+ * @property {string} agent_name - The conversation entry agent name.
  * @property {string} channel - The conversation status.
  * @property {string} status - The conversation status.
  * @property {Object[]} states - The conversation states. 
- * @property {number} unread_msg_count - The unread message count.
  * @property {Date} updated_time - The conversation updated time.
  * @property {Date} created_time - The conversation created time.
  */
diff --git a/src/lib/services/agent-service.js b/src/lib/services/agent-service.js
@@ -20,7 +20,8 @@ export async function getAgents(filter) {
     let url = endpoints.agentListUrl;
     const response = await axios.get(url, { params: filter,
         paramsSerializer: {
-            dots: true
+            dots: true,
+            indexes: null,
         }
     });
     return response.data;
diff --git a/src/lib/services/api-endpoints.js b/src/lib/services/api-endpoints.js
@@ -23,6 +23,9 @@ export const endpoints = {
     agentDetailUrl: `${host}/agent/{id}`,
     agentRefreshUrl: `${host}/refresh-agents`,
     
+    // agent instruct
+    instructCompletionUrl: `${host}/instruct/{agentId}`,
+
     // router
     routerSettingUrl: `${host}/router/settings`,
 
diff --git a/src/lib/services/auth-service.js b/src/lib/services/auth-service.js
@@ -21,8 +21,12 @@ export async function getToken(email, password, onSucceed) {
             return response.json();
         } else {
             alert(response.statusText);
+            return false
         }
     }).then(result => {
+        if (!result) {
+            return;
+        }
         let user = getUserStore();
         user.token = result.access_token;
         userStore.set(user);
diff --git a/src/lib/services/instruct-service.js b/src/lib/services/instruct-service.js
@@ -0,0 +1,13 @@
+import { endpoints } from '$lib/services/api-endpoints.js';
+import { replaceUrl } from '$lib/helpers/http';
+import axios from 'axios';
+
+/**
+ * Execute agent instruction by template or user provided prompt.
+ * @param {string} agentId
+ * @param {import('$types').InstructMessageModel} instruction
+ */
+export async function executeAgentInstruction(agentId, instruction) {
+    let url = replaceUrl(endpoints.conversationInitUrl, {agentId: agentId});
+    await axios.post(url, instruction);
+}
diff --git a/src/routes/page/agent/[agentId]/task/+page.svelte b/src/routes/page/agent/[agentId]/task/+page.svelte
@@ -0,0 +1,46 @@
+<script>
+    import { Col, Row } from '@sveltestrap/sveltestrap';
+    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+    import HeadTitle from '$lib/common/HeadTitle.svelte';
+    import { getAgents } from '$lib/services/agent-service.js';
+    import TaskFlow from './task-flow.svelte'
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    const params = $page.params;
+  
+    /** @type {import('$types').AgentModel} */
+    let agent;
+    let isRouterNodeSelected = false;
+    let isAgentNodeSelected = false;
+  
+    /** @type {import('$types').AgentFilter} */
+    const filter = {
+		    pager: { page: 1, size: 20, count: 0 },
+        agentIds: [params.agentId],
+	  };
+  
+    onMount(async () => {
+      const response = await getAgents(filter);
+        agent = response.items[0];
+    });
+
+    function handleUserNodeSelected() {
+      isRouterNodeSelected = false;
+      isAgentNodeSelected = false;
+    }
+  
+  </script>
+  
+  <HeadTitle title="Task Flow" />
+  <Breadcrumb title="Agent" pagetitle="Task" />
+  
+  {#if agent}
+  <Row>
+    <Col>
+      <TaskFlow agent={agent}
+        on:userNodeSelected={(e) => handleUserNodeSelected()}/>
+    </Col>    
+  </Row>
+  {/if}   
+  
+  
diff --git a/src/routes/page/agent/[agentId]/task/[template]/+page.svelte b/src/routes/page/agent/[agentId]/task/[template]/+page.svelte
@@ -0,0 +1,21 @@
+<script>
+    import Breadcrumb from '$lib/common/Breadcrumb.svelte';
+    import HeadTitle from '$lib/common/HeadTitle.svelte';
+    import { onMount } from 'svelte';
+    import { page } from '$app/stores';
+    import { executeAgentInstruction } from '$lib/services/instruct-service.js';
+    const params = $page.params;
+    let agentId = params.agentId;
+    let template = params.template;
+  
+    onMount(async () => {
+        /** @type {import('$types').InstructMessageModel} */
+        let inst = {
+            template: template
+        };
+        await executeAgentInstruction(agentId, inst);
+    });
+  </script>
+  
+  <HeadTitle title="Task Execution" />
+  <Breadcrumb title="Task" pagetitle={template} />
diff --git a/src/routes/page/agent/[agentId]/task/task-flow.svelte b/src/routes/page/agent/[agentId]/task/task-flow.svelte
@@ -0,0 +1,73 @@
+<script>
+    import Drawflow from 'drawflow';
+    import 'drawflow/dist/drawflow.min.css';
+    import '$lib/drawflow/drawflow.css';
+    import { onMount, createEventDispatcher } from 'svelte';
+
+    /** @type {import('$types').AgentModel} */
+    export let agent;
+    /** @type {import('$types').AgentTemplate[]} */
+    let taskNodes = [];
+
+    const dispatch = createEventDispatcher();
+    
+    onMount(async () => {
+        const container = document.getElementById("drawflow");
+        if (container) {
+            const editor = new Drawflow(container);
+            editor.reroute = true;
+            editor.reroute_fix_curvature = true;
+            editor.start();
+            editor.on('nodeCreated', function(id) {
+                let node = editor.getNodeFromId(id);
+                node.data.nid = id;
+                console.log(`Node created ${id} ${node.data.agent}`);
+                taskNodes.push(node.data);
+            });
+            editor.on('nodeSelected', function(id) {
+                console.log("Node selected " + id);
+                // emit event
+            });
+            renderTaskFlow(editor);
+        }
+    });    
+
+    /** @param {Drawflow} editor */
+    function renderTaskFlow(editor){
+        let posX = 0;
+        const nodeSpaceX = 300, nodeSpaceY = 120;
+
+        let posY = nodeSpaceY * (agent.templates.length + 1) / 2;
+
+        // add end-user node
+        let agentNodeId = editor.addNode('agent', 0, 1, posX, posY, 'agent', 
+        {
+            id: ""
+        }, `<img src=${agent.icon_url} height="30" /><span class="h6">${agent.name}</span>`, false);
+
+        posY = 100;
+        posX += nodeSpaceX;
+        agent.templates.forEach(template => {       
+            const chatTestLinkHtml = `<a href= "/page/agent/${agent.id}/task/${template.name}" class="btn btn-primary float-end" target="_blank"><i class="bx bx-run"></i></a>`;
+            let html = `<span class="h6">${template.name}</span>${chatTestLinkHtml}`;
+            
+            const data = {
+                id: agent.id,
+                agent: agent.name
+            };
+            let nid = editor.addNode('agent', 1, 0, posX, posY, 'enabled-node', data, html, false);
+            editor.addConnection(agentNodeId, nid, "output_1", "input_1");
+
+            posY += nodeSpaceY;
+        });
+    }
+    
+    /** @param {import('$types').AgentModel} router */
+    function getPlannerName(router) {
+        const planner = router.routing_rules.find(p => p.type == "planner");
+        return planner?.field ?? "NaviePlanner";
+    }
+</script>
+
+<div id="drawflow" style="height: 75vh; width: 100%">
+</div>
diff --git a/src/routes/page/agent/router/routing-flow.svelte b/src/routes/page/agent/router/routing-flow.svelte
@@ -63,7 +63,6 @@
 
         // add router node
         posX += nodeSpaceX;
-        let hostNodeId = 0;
         let routerPosY = nodeSpaceY * (routers.length + 1) / 2;
         routers.forEach(router => {
             let profiles = [];
@@ -82,13 +81,10 @@
                 type: router.type,
             };
 
-            let nodeId = 0;
             if (router.is_host) {
-                nodeId = editor.addNode('host', 1, 1, posX, routerPosY, 'router', data, `<img src="/images/users/bot.png" height="30">${html}`, false);
-                hostNodeId = nodeId;
-            } else {
-                nodeId = editor.addNode('router', 1, 1, posX, routerPosY, 'router', data, `${html}`, false);
+                html =`<img src="/images/users/bot.png" height="30">${html}`;
             }
+            let nodeId = editor.addNode('router', 1, 1, posX, routerPosY, 'router', data, `${html}`, false);;
             // connect user and router
             editor.addConnection(userNodeId, nodeId, `output_1`, `input_1`);    
             routerPosY += nodeSpaceY * (agents.length - 1) / 2;
@@ -99,11 +95,16 @@
         agents.forEach(agent => {       
             let profiles = [];
             const chatTestLinkHtml = `<a href= "/chat/${agent.id}" class="btn btn-primary float-end" target="_blank"><i class="bx bx-chat"></i></a>`;
-            let html = `<span class="h6">${agent.name}</span>${chatTestLinkHtml}`;
+            const taskLinkHtml = `<a href= "/page/agent/${agent.id}/task" class="btn btn-primary float-end" target="_blank"><i class="bx bx-task"></i></a>`;
+            let html = `<span class="h6">${agent.name}</span>${chatTestLinkHtml}${taskLinkHtml}`;
             if (agent.profiles.length > 0) {
                 profiles = agent.profiles;
                 html += `<br/><i class="mdi mdi-folder font-size-16 text-info me-2"></i>` + profiles.join(', ');
             }
+
+            if (agent.is_host) {
+                html =`<img src="/images/users/bot.png" height="30">${html}`;
+            }
             
             const data = {
                 id: agent.id,
@@ -122,17 +123,19 @@
                             editor.addConnection(r.nid, nid, `output_1`, `input_1`);
                         } else {
                             // editor.removeNodeInput(nid, "input_2");
-                            editor.addConnection(userNodeId, nid, `output_1`, `input_1`);
+                            // editor.addConnection(userNodeId, nid, `output_1`, `input_1`);
                         }
                     });
                 });
                 
             } else {
                 // profile is empty
-                agentNodes.filter(ag => ag.type == "routing" && ag.profiles.length == 0)
+                /*agentNodes.filter(ag => ag.type == "routing" && ag.profiles.length == 0)
                     .forEach(r => {
                         editor.addConnection(r.nid, nid, `output_1`, `input_1`);    
-                    });
+                    });*/
+                
+                editor.addConnection(userNodeId, nid, `output_1`, `input_1`);    
             }
 
             posY += nodeSpaceY;
@@ -143,13 +146,13 @@
             if (fallback) {
                 let router = agentNodes.find(ag => ag.id == fallback.redirectTo);
                 editor.addNodeOutput(nid);
-                /*editor.addNodeInput(router.nid);
+                editor.addNodeInput(router.nid);
                 var inputs = editor.getNodeFromId(router.nid).inputs;
                 let inputId = 0;
                 for (let prop in inputs) {
                     inputId++;
                 }
-                editor.addConnection(nid, router.nid, `output_1`, `input_${inputId}`); */
+                editor.addConnection(nid, router.nid, `output_1`, `input_${inputId}`);
             }
         });
     }
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
@@ -214,7 +214,7 @@
 							<tr>
 								<th scope="col">Title</th>
 								<th scope="col">User Name</th>
-								<th scope="col">Role</th>
+								<th scope="col">Agent</th>
 								<th scope="col">Channel</th>
 								<th scope="col">Posted Date</th>
 								<th scope="col">Last Date</th>
@@ -228,7 +228,7 @@
 								<td scope="row">
 									<a href="/page/conversation/{conv.id}">{conv.title}</a></td>
 								<td>{conv.user.full_name}</td>
-								<td>{conv.user.role}</td>
+								<td>{conv.agent_name}</td>
 								<td><span class="badge badge-soft-success">{conv.channel}</span></td>
 								<td>{utcToLocal(conv.created_time)}</td>
 								<td>{utcToLocal(conv.updated_time)}</td>
diff --git a/svelte.config.js b/svelte.config.js
@@ -40,6 +40,8 @@ const config = {
 				"/page/agent/router",
 				"/page/agent/evaluator",
 				"/page/agent/[agentId]",
+				"/page/agent/[agentId]/task",
+				"/page/agent/[agentId]/task/[template]",
 				"/page/agent/[agentId]/build",
 				"/page/agent/[agentId]/train",
 				"/page/conversation",
