Allow to change draw node width.

Author: Haiping Chen

src/lib/drawflow/drawflow.css

@@ -1,7 +1,11 @@
+:root {
+    --drawflow-node-width: 250px;
+}
+
 .drawflow .drawflow-node {
     background: var(--bs-primary);
     color: white;
-    width: 250px;
+    width: var(--drawflow-node-width);
     border: 2px solid var(--bs-primary);
 }
 
@@ -15,10 +19,6 @@
     color: white;
 }
 
-.drawflow .parent-node .task-node {
-    width: 300px;
-}
-
 .drawflow-delete {
     background-color: var(--bs-danger);
     line-height: 25px;

src/routes/page/task/+page.svelte

@@ -22,12 +22,26 @@
 	import Swal from 'sweetalert2/dist/sweetalert2.js';
 	import "sweetalert2/src/sweetalert2.scss";
 	import { replaceNewLine } from '$lib/helpers/http';
+	import 'overlayscrollbars/overlayscrollbars.css';
+    import { OverlayScrollbars } from 'overlayscrollbars';
 
 	let isError = false;
 	const duration = 3000;
 	const firstPage = 1;
 	const pageSize = 10;
 
+	const options = {
+		scrollbars: {
+			visibility: 'auto',
+			autoHide: 'move',
+			autoHideDelay: 100,
+			dragScroll: true,
+			clickScroll: false,
+			theme: 'os-theme-dark',
+			pointers: ['mouse', 'touch', 'pen']
+		}
+	};
+
     /** @type {import('$types').PagedItems<import('$types').AgentTaskModel>} */
     let tasks = { count: 0, items: [] };
 
@@ -44,6 +58,11 @@
 
     onMount(async () => {
 		await getPagedAgentTasks();
+
+		const scrollElements = document.querySelectorAll('.scrollbar');
+		scrollElements.forEach((item) => {
+			const scrollbar = OverlayScrollbars(item, options);
+		});
     });
 
 	async function getPagedAgentTasks() {
@@ -212,7 +231,7 @@
 								</td>
 								<td>{task.description}</td>
 								<td>{task.agent_name}</td>
-								<td>{@html replaceNewLine(task.content)}</td>
+								<td><div style="max-height: 100px;" class="scrollbar">{@html replaceNewLine(task.content)}</div></td>
 								<td>{utcToLocal(task.updated_datetime)}</td>
 								<td><span class="badge bg-success">{task.enabled ? "Enabled" : "Disabled"}</span></td>
 								<td>

src/routes/page/task/[taskId]/execution-flow.svelte

@@ -37,15 +37,17 @@
 			visibility: 'auto',
 			autoHide: 'move',
 			autoHideDelay: 100,
-			dragScroll: true,
-			clickScroll: false,
+			dragScroll: false,
+			clickScroll: true,
 			theme: 'os-theme-dark',
 			pointers: ['mouse', 'touch', 'pen']
 		}
 	};
 
     onMount(async () => {
         const container = document.getElementById("drawflow");
+        container.style.setProperty('--drawflow-node-width', '300px');
+
         if (container) {
             editor = new Drawflow(container);
             editor.reroute = true;
@@ -174,7 +176,7 @@
 </script>
 
 <div>
-    <!--<button class="btn btn-primary me-2" on:click={handleRunTaskSequentiallyInServer}><i class="bx bx-run"></i> Execute Sequentially through Router</button>-->
+    <!--<button class="btn btn-primary me-2" on:click={handleRunTaskSequentiallyInServer}><i class="bx bx-run"></i> Execute through {task?.agent_name}</button>-->
     {#if task?.direct_agent_id}
     <button class="btn btn-primary" on:click={handleRunTaskInteractively}><i class="bx bx-rocket"></i> Execute Interactively</button>
     {/if}