From 0129f865daaf76e43313dd6b334a638756760e5f Mon Sep 17 00:00:00 2001
From: Haiping Chen <haiping008@gmail.com>
Date: Wed, 24 Jan 2024 17:48:42 -0600
Subject: [PATCH] Optimize StreamingLog

---
 src/lib/helpers/types.js                      |  2 +
 .../[conversationId]/chat-box.svelte          |  6 ++-
 .../agent/[agentId]/agent-overview.svelte     |  8 ++-
 src/routes/page/agent/router/+page.svelte     | 22 +++-----
 .../agent/router/agent-configuration.svelte   | 53 -------------------
 .../agent/router/router-configuration.svelte  | 41 --------------
 .../page/agent/router/routing-flow.svelte     | 49 ++++++++---------
 7 files changed, 42 insertions(+), 139 deletions(-)
 delete mode 100644 src/routes/page/agent/router/agent-configuration.svelte
 delete mode 100644 src/routes/page/agent/router/router-configuration.svelte

diff --git a/src/lib/helpers/types.js b/src/lib/helpers/types.js
index e5fe9da9..1fbb5787 100644
--- a/src/lib/helpers/types.js
+++ b/src/lib/helpers/types.js
@@ -103,8 +103,10 @@
  * @property {boolean} disabled
  * @property {boolean} is_public
  * @property {boolean} is_router
+ * @property {boolean} is_host
  * @property {string} icon_url - Icon
  * @property {boolean} allow_routing
+ * @property {string[]} profiles - The agent profiles.
  * @property {Date} created_datetime
  * @property {Date} updated_datetime
  * @property {AgentLlmConfig} llm_config - LLM settings.
diff --git a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
index 7b03b2cf..92df8d33 100644
--- a/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
+++ b/src/routes/chat/[agentId]/[conversationId]/chat-box.svelte
@@ -171,19 +171,21 @@
 
 					<div class="col-md-8 col-5">
 						<ul class="list-inline user-chat-nav text-end mb-0">
-							{#if !isLoadLog}
+							
 							<li class="list-inline-item">
 								<Dropdown>
 									<DropdownToggle tag="button" class="nav-btn dropdown-toggle" color="">
 										<i class="bx bx-dots-horizontal-rounded" />
 									</DropdownToggle>
 									<DropdownMenu class="dropdown-menu-end">
+										{#if !isLoadLog}
 										<DropdownItem on:click={viewFullLogHandler} >View Log</DropdownItem>
+										{/if}
 										<DropdownItem on:click={newConversationHandler} >New Conversation</DropdownItem>
 									</DropdownMenu>
 								</Dropdown>
 							</li>
-							{/if}
+							
 							<li class="list-inline-item d-sm-inline-block">
 								<button type="submit" class="btn btn-primary btn-rounded chat-send waves-effect waves-light"
 									on:click={close}
diff --git a/src/routes/page/agent/[agentId]/agent-overview.svelte b/src/routes/page/agent/[agentId]/agent-overview.svelte
index bc48710c..3e49b38e 100644
--- a/src/routes/page/agent/[agentId]/agent-overview.svelte
+++ b/src/routes/page/agent/[agentId]/agent-overview.svelte
@@ -3,6 +3,7 @@
     import { Button, Card, CardBody, CardHeader, Col, Table } from '@sveltestrap/sveltestrap';
     import InPlaceEdit from '$lib/common/InPlaceEdit.svelte'
     import { format } from '$lib/helpers/datetime';
+	import AgentLlmConfig from './agent-llm-config.svelte';
 
     /** @type {import('$types').AgentModel} */
     export let agent;
@@ -50,7 +51,12 @@
                     </tr>
                     <tr>
                         <th>Profiles</th>
-                        <td><span class="badge badge-soft-success mx-1">phone</span><span class="badge badge-soft-success mx-1">webchat</span></td>
+                        <td>
+                            {#each agent.profiles as profile}
+                            <input class="form-control" type="text" value={profile} />
+                            <a href={null} class="btn btn-danger">Delete</a>
+                            {/each}
+                        </td>
                     </tr>
                     <tr>
                         <th>Status</th>
diff --git a/src/routes/page/agent/router/+page.svelte b/src/routes/page/agent/router/+page.svelte
index 78ce53f0..73eb8aef 100644
--- a/src/routes/page/agent/router/+page.svelte
+++ b/src/routes/page/agent/router/+page.svelte
@@ -4,12 +4,10 @@
   import HeadTitle from '$lib/common/HeadTitle.svelte';
   import { getAgents } from '$lib/services/agent-service.js';
   import RoutingFlow from './routing-flow.svelte'
-  import RoutingConfiguration from './router-configuration.svelte';
-  import AgentConfiguration from './agent-configuration.svelte';
   import { onMount } from 'svelte';
 
-  /** @type {import('$types').AgentModel} */
-  let router;
+  /** @type {import('$types').AgentModel[]} */
+  let routers;
   let isRouterNodeSelected = false;
   let isAgentNodeSelected = false;
 
@@ -26,7 +24,7 @@
   async function getRouter() {
     const response = await getAgents(filter);
     if (response.items?.length > 0) {
-      router = response.items[0];
+      routers = response.items;
     }
   };
 
@@ -52,22 +50,14 @@
 <HeadTitle title="Router" />
 <Breadcrumb title="Agent" pagetitle="Router" />
 
-{#if router}
+{#if routers}
 <Row>
-  <Col lg={9}>
-    <RoutingFlow router={router} 
+  <Col>
+    <RoutingFlow routers={routers} 
       on:userNodeSelected={(e) => handleUserNodeSelected()}
       on:routerNodeSelected={(e) => handleRouterNodeSelected(e.detail.agent)}
       on:agentNodeSelected={(e) => handleAgentNodeSelected(e.detail.agent)}/>
   </Col>    
-  <Col lg={3}>
-    {#if isAgentNodeSelected}
-    <AgentConfiguration agent={router} />
-    {/if}     
-    {#if isRouterNodeSelected}
-    <RoutingConfiguration router={router} />
-    {/if}
-  </Col>
 </Row>
 {/if}   
 
diff --git a/src/routes/page/agent/router/agent-configuration.svelte b/src/routes/page/agent/router/agent-configuration.svelte
deleted file mode 100644
index 5bd37b96..00000000
--- a/src/routes/page/agent/router/agent-configuration.svelte
+++ /dev/null
@@ -1,53 +0,0 @@
-<script>
-    import { Card, CardBody, CardHeader, Table } from '@sveltestrap/sveltestrap';
-    import { getSettings } from '$lib/services/agent-service.js';
-    import { onMount } from 'svelte';
-
-    /** @type {import('$types').AgentSettings} */
-    let settings;  
-
-    onMount(async () => {
-        settings = await getSettings();
-    });    
-
-</script>
-
-{#if settings}
-<Card>
-    <CardHeader>
-        Agent Settings
-    </CardHeader>
-    <CardBody>
-        <div class="table-responsive">
-            <Table>
-                <tbody>
-                    <tr>
-                        <th>Data Directory</th>
-                        <td>
-                            {settings.dataDir}
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>Template Format</th>
-                        <td>
-                            {settings.templateFormat}
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>LLM Provider</th>
-                        <td>
-                            {settings.llmConfig.provider}
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>LLM Model</th>
-                        <td>
-                            {settings.llmConfig.model}
-                        </td>
-                    </tr>
-                </tbody>
-            </Table>
-        </div>
-    </CardBody>
-</Card>
-{/if}
diff --git a/src/routes/page/agent/router/router-configuration.svelte b/src/routes/page/agent/router/router-configuration.svelte
deleted file mode 100644
index f363876f..00000000
--- a/src/routes/page/agent/router/router-configuration.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-    import { Card, CardBody, CardHeader, Table } from '@sveltestrap/sveltestrap';
-    import { getSettings } from '$lib/services/router-service.js';
-    import { onMount } from 'svelte';
-
-    /** @type {import('$types').RouterSettings} */
-    let settings;  
-
-    onMount(async () => {
-        settings = await getSettings();
-    });    
-
-</script>
-
-{#if settings}
-<Card>
-    <CardHeader>
-        Routing Settings
-    </CardHeader>
-    <CardBody>
-        <div class="table-responsive">
-            <Table>
-                <tbody>
-                    <tr>
-                        <th>Agent Id</th>
-                        <td>
-                            {settings.agentId}
-                        </td>
-                    </tr>
-                    <tr>
-                        <th>Planner</th>
-                        <td>
-                            {settings.planner}
-                        </td>
-                    </tr>
-                </tbody>
-            </Table>
-        </div>
-    </CardBody>
-</Card>
-{/if}
diff --git a/src/routes/page/agent/router/routing-flow.svelte b/src/routes/page/agent/router/routing-flow.svelte
index 7643ca9a..434012d3 100644
--- a/src/routes/page/agent/router/routing-flow.svelte
+++ b/src/routes/page/agent/router/routing-flow.svelte
@@ -11,14 +11,11 @@
     /** @type {import('$types').AgentFilter} */
 	const filter = {
 		pager: { page: 1, size: 20, count: 0 },
-		isRouter: false,
-        isEvaluator: false,
-        disabled: false,
         allowRouting: true
 	};
 
-    /** @type {import('$types').AgentModel} */
-    export let router;
+    /** @type {import('$types').AgentModel[]} */
+    export let routers;
 
     const dispatch = createEventDispatcher();
     
@@ -26,12 +23,6 @@
         const response = await getAgents(filter);
         agents = response?.items || [];
 
-        // add a "New Agent" button
-        agents.push({
-			name: "New Agent",
-			allow_routing: true
-		});
-
         const container = document.getElementById("drawflow");
         if (!!container) {
             const editor = new Drawflow(container);
@@ -49,7 +40,7 @@
         };
 
         let posX = 0;
-        let nodeSpace = 200;
+        let nodeSpace = 250;
         let nodeId = 1;
         let posY = 100 * agents.length / 2 + 50;
 
@@ -61,22 +52,28 @@
         posX += nodeSpace;
         nodeId++;
         let routerNodeId = nodeId;
-        editor.addNode('router', 1, 1, posX, posY, 'router', data, `Router (${router.name})`, false);
-
-        // connect user and router
-        editor.addConnection(1, nodeId, `output_1`, `input_1`);    
+        let hostNodeId = nodeId;
+        let routerPosY = posY;
+        routers.forEach(router => {
+            const profiles = router.profiles.join(', ');
+            if (router.is_host) {
+                editor.addNode('host', 1, 1, posX, routerPosY, 'router', data, `${router.name} (Host Router) ${profiles}`, false);
+                hostNodeId = nodeId;
+            } else {
+                editor.addNode('router', 1, 1, posX, routerPosY, 'router', data, `${router.name} (Routing Agent) ${profiles}`, false);
+            }
+            // connect user and router
+            editor.addConnection(1, nodeId, `output_1`, `input_1`);    
+            routerPosY += 100;
+            nodeId++;
+        });
 
         posY = 100;
         posX += nodeSpace;
-        nodeId++;
-        agents.forEach(agent => {                 
-            if (!agent.id) {
-                // add a "New Agent" button
-                editor.addNode('new-agent', 1, 0, posX, posY, 'new-node', data, `New Agent`, false);
-            } else {
-                editor.addNode('agent', 1, 0, posX, posY, 'enabled-node', data, `Agent (${agent.name})`, false);
-            }
-            editor.addConnection(2, nodeId, `output_1`, `input_1`);    
+        agents.forEach(agent => {       
+            const profiles = agent.profiles.join(', ');          
+            editor.addNode('agent', 1, 0, posX, posY, 'enabled-node', data, `${agent.name} (Task Agent) ${profiles}`, false);
+            editor.addConnection(hostNodeId, nodeId, `output_1`, `input_1`);    
             posY += 100;
             nodeId++;
         });
@@ -87,7 +84,7 @@
             if (id == userNodeId) {
                 dispatch('userNodeSelected', {});
             } else if (id == routerNodeId) {
-                dispatch('routerNodeSelected', {agent: router});
+                dispatch('routerNodeSelected', {});
             } else {
                 dispatch('agentNodeSelected', {agent: agents[id - routerNodeId - 1]});
             }