From b8fb8abcdbd021cbdde5e44379f7d9ea155892a4 Mon Sep 17 00:00:00 2001
From: Haiping Chen <haiping008@gmail.com>
Date: Mon, 22 Jan 2024 12:14:20 -0600
Subject: [PATCH] agent icon in builder.

---
 package.json                                    |  2 +-
 src/lib/drawflow/drawflow.css                   |  5 +++++
 .../[agentId]/build/components/Agent.svelte     |  2 +-
 .../page/agent/router/routing-flow.svelte       | 17 ++++++++++++++---
 src/routes/page/conversation/+page.svelte       |  6 +++---
 5 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 63c564a8..1059d42c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "botsharp-ui",
-	"version": "0.2.0",
+	"version": "0.3.0",
 	"private": true,
 	"engines": {
 		"node": ">=18.0.0"
diff --git a/src/lib/drawflow/drawflow.css b/src/lib/drawflow/drawflow.css
index 74f0317e..780b6012 100644
--- a/src/lib/drawflow/drawflow.css
+++ b/src/lib/drawflow/drawflow.css
@@ -5,4 +5,9 @@
 
 .drawflow .drawflow-node.selected {
     background: var(--bs-success);
+}
+
+.drawflow .new-node {
+    background: var(--bs-info);
+    color: white;
 }
\ No newline at end of file
diff --git a/src/routes/page/agent/[agentId]/build/components/Agent.svelte b/src/routes/page/agent/[agentId]/build/components/Agent.svelte
index 9a993672..e9ee8352 100644
--- a/src/routes/page/agent/[agentId]/build/components/Agent.svelte
+++ b/src/routes/page/agent/[agentId]/build/components/Agent.svelte
@@ -25,7 +25,7 @@
 <Node useDefaults id="output" position={{ x: 560, y: 30 }} let:selected locked>
 	<div class="node" class:selected>
 		<span class="avatar-title rounded-circle bg-light text-danger font-size-16">
-			<img src="/images/users/bot.png" alt="" width="120px"/>
+			<img src={agent?.icon_url} alt="" width="120px"/>
 		</span>
 		<p>{agent?.description}</p>
 		<div class="input-anchors">
diff --git a/src/routes/page/agent/router/routing-flow.svelte b/src/routes/page/agent/router/routing-flow.svelte
index d02d6770..6c2ba53e 100644
--- a/src/routes/page/agent/router/routing-flow.svelte
+++ b/src/routes/page/agent/router/routing-flow.svelte
@@ -20,6 +20,12 @@
             allowRouting: true
         });
 
+        // add a "New Agent" button
+        agents.push({
+            name: "New Agent",
+            allowRouting: true
+        });
+
         const container = document.getElementById("drawflow");
         const editor = new Drawflow(container);
         editor.reroute = true;
@@ -57,8 +63,13 @@
         posY = 100;
         posX += nodeSpace;
         nodeId++;
-        agents.forEach(agent => {                           
-            editor.addNode('agent', 1, 0, posX, posY, 'enabled-node', data, `Agent (${agent.name})`, false);
+        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`);    
             posY += 100;
             nodeId++;
@@ -80,4 +91,4 @@
 </script>
 
 <div id="drawflow" style="height: 75vh; width: 100%">
-</div>
+</div>
\ No newline at end of file
diff --git a/src/routes/page/conversation/+page.svelte b/src/routes/page/conversation/+page.svelte
index 98c3bdec..52a63b69 100644
--- a/src/routes/page/conversation/+page.svelte
+++ b/src/routes/page/conversation/+page.svelte
@@ -242,7 +242,7 @@
 							{#each conversations.items as conv}
 							<tr>
 								<td scope="row">
-									<a href={`/communication/${conv.id}`}>{conv.title}</a></td>
+									<a href="/page/conversation/{conv.id}">{conv.title}</a></td>
 								<td>{conv.user.full_name}</td>
 								<td>{conv.user.role}</td>
 								<td><span class="badge badge-soft-success">{conv.channel}</span></td>
@@ -256,9 +256,9 @@
                                                 <i class="mdi mdi-eye-outline" />
                                             </Link>
 										</li>
-										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Edit">
+										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Chat">
 											<Link href="/chat/{conv.agent_id}/{conv.id}" target="_blank" class="btn btn-sm btn-soft-info">
-                                                <i class="mdi mdi-pencil-outline" />
+                                                <i class="mdi mdi-chat" />
                                             </Link>
 										</li>
 										<li data-bs-toggle="tooltip" data-bs-placement="top" title="Delete">