chore: add input params to run in tasks

ui/user/src/lib/components/Modal.svelte → ui/user/src/lib/components/Confirm.svelte

@@ -9,22 +9,39 @@
 	}
 
 	let { show = false, msg = 'OK?', onsuccess, oncancel }: Props = $props();
+
+	let div: HTMLDivElement | undefined = $state();
+
+	$effect(() => {
+		if (show && div) {
+			console.log('focused');
+			div.focus();
+		}
+	});
 </script>
 
 <div
-	tabindex="-1"
+	bind:this={div}
+	tabIndex="-1"
 	class:hidden={!show}
 	class:flex={show}
 	class="fixed left-0 right-0 top-0 z-50 h-[calc(100%-1rem)] max-h-full w-full items-center
- justify-center overflow-y-auto overflow-x-hidden bg-black bg-opacity-5 md:inset-0"
+ justify-center overflow-y-auto overflow-x-hidden bg-black bg-opacity-50 md:inset-0"
+	role="none"
+	onkeydown={(e) => {
+		console.log('onkeydown', e.key);
+		if (e.key === 'Escape') {
+			oncancel();
+		}
+		e.stopPropagation();
+	}}
 >
-	<div class="relative max-h-full w-full max-w-md p-4">
-		<div class="relative rounded-lg bg-white shadow dark:bg-gray-700">
+	<div role="dialog" class="relative max-h-full w-full max-w-md p-4">
+		<div class="relative rounded-3xl bg-gray-50 dark:bg-gray-950">
 			<button
 				type="button"
 				onclick={oncancel}
-				class="absolute end-2.5 top-3 ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
-				data-modal-hide="popup-modal"
+				class="absolute end-2.5 top-3 ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-white hover:bg-gray-200 dark:hover:bg-gray-600"
 			>
 				<X class="h-5 w-5" />
 				<span class="sr-only">Close modal</span>
@@ -35,15 +52,15 @@
 				<button
 					onclick={onsuccess}
 					type="button"
-					class="inline-flex items-center rounded-lg bg-red-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800"
+					class="inline-flex items-center rounded-3xl bg-red-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-red-800"
 				>
 					Yes, I'm sure
 				</button>
 				<button
 					onclick={oncancel}
 					type="button"
-					class="ms-3 rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
-					>No, cancel</button
+					class="ms-3 rounded-3xl bg-gray-100 px-5 py-2.5 text-sm font-medium text-black hover:bg-gray-200 dark:bg-gray-800
+					 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">No, cancel</button
 				>
 			</div>
 		</div>

ui/user/src/lib/components/editor/Controls.svelte

@@ -13,7 +13,7 @@
 	let show = $derived(navBar || EditorService.items.length <= 1);
 	let downloadable = $derived.by(() => {
 		const selected = EditorService.items.find((item) => item.selected);
-		return selected && !selected.table;
+		return selected && !selected.table && !selected.task;
 	});
 </script>
 

ui/user/src/lib/components/navbar/Files.svelte

@@ -2,7 +2,7 @@
 	import { FileText, Trash, Upload } from '$lib/icons';
 	import { files, currentAssistant } from '$lib/stores';
 	import { ChatService, EditorService, type Files } from '$lib/services';
-	import Modal from '$lib/components/Modal.svelte';
+	import Confirm from '$lib/components/Confirm.svelte';
 	import Menu from '$lib/components/navbar/Menu.svelte';
 	import { Download, Image } from 'lucide-svelte';
 	import { isImage } from '$lib/image';
@@ -112,7 +112,7 @@
 	{/snippet}
 </Menu>
 
-<Modal
+<Confirm
 	show={fileToDelete !== undefined}
 	msg={`Are you sure you want to delete ${fileToDelete}?`}
 	onsuccess={deleteFile}

ui/user/src/lib/components/navbar/KnowledgeFiles.svelte

@@ -2,7 +2,7 @@
 	import { Brain } from '$lib/icons';
 	import { knowledgeFiles, currentAssistant } from '$lib/stores';
 	import { ChatService } from '$lib/services';
-	import Modal from '$lib/components/Modal.svelte';
+	import Confirm from '$lib/components/Confirm.svelte';
 	import KnowledgeFile from './KnowledgeFile.svelte';
 	import KnowledgeUpload from '$lib/components/navbar/KnowledgeUpload.svelte';
 	import Menu from '$lib/components/navbar/Menu.svelte';
@@ -52,7 +52,7 @@
 	{/snippet}
 </Menu>
 
-<Modal
+<Confirm
 	show={fileToDelete !== undefined}
 	msg={`Are you sure you want to delete ${fileToDelete}?`}
 	onsuccess={deleteFile}

ui/user/src/lib/components/navbar/Tasks.svelte

@@ -2,7 +2,7 @@
 	import { Plus, Trash } from '$lib/icons';
 	import { tasks, currentAssistant } from '$lib/stores';
 	import { EditorService, type Task } from '$lib/services';
-	import Modal from '$lib/components/Modal.svelte';
+	import Confirm from '$lib/components/Confirm.svelte';
 	import { CheckSquare } from 'lucide-svelte';
 	import Menu from '$lib/components/navbar/Menu.svelte';
 
@@ -73,7 +73,7 @@
 	{/snippet}
 </Menu>
 
-<Modal
+<Confirm
 	show={taskToDelete !== undefined}
 	msg={`Are you sure you want to delete ${taskToDelete?.name}?`}
 	onsuccess={deleteTask}

ui/user/src/lib/components/tasks/Files.svelte

@@ -4,7 +4,7 @@
 	import { ChatService, EditorService, type Files } from '$lib/services';
 	import { Download, RotateCw } from 'lucide-svelte';
 	import { onDestroy } from 'svelte';
-	import Modal from '$lib/components/Modal.svelte';
+	import Confirm from '$lib/components/Confirm.svelte';
 
 	interface Props {
 		taskID: string;
@@ -115,7 +115,7 @@
 	</div>
 {/if}
 
-<Modal
+<Confirm
 	show={fileToDelete !== undefined}
 	msg={`Are you sure you want to delete ${fileToDelete}?`}
 	onsuccess={deleteFile}

ui/user/src/lib/components/tasks/Input.svelte

@@ -31,6 +31,7 @@
 		body: ''
 	});
 	let titlePrefix = $derived(displayRunID !== '' ? '' : 'Test Input ');
+	let readonly = $derived(!!displayRunID);
 
 	$effect(() => {
 		if (task?.onDemand?.params) {
@@ -94,10 +95,10 @@
 						>
 						<input
 							id="param-{key}"
-							readonly={displayRunID !== ''}
+							{readonly}
 							bind:value={params[key]}
 							class="rounded-md bg-gray-50 p-2 outline-none dark:bg-gray-950"
-							placeholder={'Enter value'}
+							placeholder={editMode ? 'Enter value' : 'No value'}
 						/>
 					</div>
 				{/each}
@@ -108,7 +109,7 @@
 						<label for="from" class="w-[70px] text-sm font-semibold">From</label>
 						<input
 							id="from"
-							readonly={displayRunID !== ''}
+							{readonly}
 							bind:value={emailInput.from}
 							class="rounded-md bg-gray-50 p-2 outline-none dark:bg-gray-950"
 							placeholder=""
@@ -118,7 +119,7 @@
 						<label for="from" class="w-[70px] text-sm font-semibold">To</label>
 						<input
 							id="from"
-							readonly={displayRunID !== ''}
+							{readonly}
 							bind:value={emailInput.to}
 							class="rounded-md bg-gray-50 p-2 outline-none dark:bg-gray-950"
 							placeholder=""
@@ -128,7 +129,7 @@
 						<label for="from" class="w-[70px] text-sm font-semibold">Subject</label>
 						<input
 							id="from"
-							readonly={displayRunID !== ''}
+							{readonly}
 							bind:value={emailInput.subject}
 							class="rounded-md bg-gray-50 p-2 outline-none dark:bg-gray-950"
 							placeholder=""
@@ -138,7 +139,7 @@
 						<textarea
 							id="body"
 							bind:value={emailInput.body}
-							readonly={displayRunID !== ''}
+							{readonly}
 							use:autoHeight
 							rows="1"
 							class="mt-2 w-full resize-none rounded-3xl bg-gray-50 p-5 outline-none dark:bg-gray-950"
@@ -151,10 +152,10 @@
 				<textarea
 					bind:value={payload}
 					use:autoHeight
-					readonly={displayRunID !== ''}
+					{readonly}
 					rows="1"
 					class="mt-2 w-full resize-none rounded-md bg-gray-50 p-2 outline-none dark:bg-gray-950"
-					placeholder="Enter payload..."
+					placeholder={editMode ? 'Enter payload...' : 'No payload'}
 				></textarea>
 			{/if}
 		</div>

ui/user/src/lib/components/tasks/Runs.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { Info, Play } from 'lucide-svelte';
-	import { ChatService, type TaskRun } from '$lib/services';
+	import { Info, Play, X } from 'lucide-svelte';
+	import { ChatService, type Task, type TaskRun } from '$lib/services';
 	import { onDestroy } from 'svelte';
 	import { currentAssistant } from '$lib/stores';
 	import { Trash } from '$lib/icons';
 	import { formatTime } from '$lib/time';
-	import Modal from '$lib/components/Modal.svelte';
+	import Confirm from '$lib/components/Confirm.svelte';
+	import Input from '$lib/components/tasks/Input.svelte';
 
 	interface Props {
 		id: string;
@@ -17,6 +18,9 @@
 	let timeout: number;
 	let selected = $state('');
 	let toDelete: string = $state('');
+	let inputDialog = $state<HTMLDialogElement>();
+	let taskToRun = $state<Task>();
+	let taskInput = $state('');
 
 	onDestroy(() => {
 		if (timeout) {
@@ -52,9 +56,24 @@
 		}
 	}
 
-	async function run() {
+	async function run(withInput?: string) {
+		if (!withInput) {
+			taskToRun = await ChatService.getTask($currentAssistant.id, id);
+			if (taskToRun.onDemand?.params && Object.keys(taskToRun.onDemand.params).length > 0) {
+				inputDialog?.showModal();
+				return;
+			}
+			if (taskToRun.webhook) {
+				inputDialog?.showModal();
+				return;
+			}
+		}
+
+		inputDialog?.close();
 		if ($currentAssistant.id && id) {
-			const newRun = await ChatService.runTask($currentAssistant.id, id);
+			const newRun = await ChatService.runTask($currentAssistant.id, id, {
+				input: withInput
+			});
 			runs = (await ChatService.listTaskRuns($currentAssistant.id, id)).items;
 			await select(newRun.id);
 		}
@@ -81,28 +100,35 @@
 			} else if (input.type === 'webhook') {
 				return input.payload.slice(0, 50);
 			} else if (typeof input === 'object') {
-				return task.input.slice(0, 50);
+				return Object.keys(input)
+					.map((key) => {
+						return `${key}=${input[key]}`;
+					})
+					.join(', ')
+					.slice(0, 50);
 			}
 		} catch {
 			return task.input.slice(0, 50);
 		}
 	}
 </script>
 
-{#snippet runButton()}
+{#snippet runButton(opts?: { input?: string; text?: string })}
 	<button
 		class="flex items-center gap-2 rounded-3xl bg-blue px-5 py-2 text-white hover:bg-blue-400"
-		onclick={run}
+		onclick={() => {
+			run(opts?.input);
+		}}
 	>
-		Run now
+		{opts?.text ?? 'Run now'}
 		<Play class="h-5 w-5" />
 	</button>
 {/snippet}
 
 {#if runs.length > 0}
 	<div class="mt-8 rounded-3xl bg-gray-50 p-5 dark:bg-gray-950">
 		<h4 class="mb-3 text-xl font-semibold">Runs</h4>
-		<table class="m-5 text-left">
+		<table class="m-5 w-full text-left">
 			<thead class="font-semibold">
 				<tr>
 					<th class="pb-1 pl-2"> Start </th>
@@ -115,19 +141,19 @@
 				{#each runs as run}
 					<tr class="group hover:cursor-pointer" onclick={() => select(run.id)}>
 						<td
-							class="rounded-s-md pl-2 group-hover:bg-gray-100 dark:group-hover:bg-gray-800"
+							class="rounded-s-md group-hover:bg-gray-100 dark:group-hover:bg-gray-800"
 							class:bg-blue={selected === run.id}
 						>
 							{formatTime(run.created)}
 						</td>
 						<td
-							class="pl-6 group-hover:bg-gray-100 dark:group-hover:bg-gray-800"
+							class="group-hover:bg-gray-100 dark:group-hover:bg-gray-800"
 							class:bg-blue={selected === run.id}
 						>
 							{formatInput(run)}
 						</td>
 						<td
-							class="pl-6 group-hover:bg-gray-100 dark:group-hover:bg-gray-800"
+							class="group-hover:bg-gray-100 dark:group-hover:bg-gray-800"
 							class:bg-blue={selected === run.id}
 						>
 							{#if run.startTime && run.endTime}
@@ -141,13 +167,10 @@
 							{/if}
 						</td>
 						<td
-							class="rounded-e-md pl-6 group-hover:bg-gray-100 group-hover:text-gray dark:group-hover:bg-gray-800"
+							class="rounded-e-md group-hover:bg-gray-100 group-hover:text-gray dark:group-hover:bg-gray-800"
 							class:bg-blue={selected === run.id}
 						>
-							<div
-								class="flex items-center gap-2 pl-2 text-gray"
-								class:text-white={selected === run.id}
-							>
+							<div class="flex items-center gap-2 text-gray" class:text-white={selected === run.id}>
 								<Info class="h-4 w-4" />
 								<button onclick={() => (toDelete = run.id)}>
 									<Trash class="h-5 w-5" />
@@ -168,7 +191,29 @@
 	</div>
 {/if}
 
-<Modal
+<dialog
+	bind:this={inputDialog}
+	class="relative min-w-[500px] rounded-3xl border-white bg-white p-5 text-black dark:bg-black dark:text-gray-50"
+>
+	<h4 class="text-xl font-semibold">Input Parameters</h4>
+	<Input editMode task={taskToRun} bind:input={taskInput}></Input>
+	<div class="mt-5 flex w-full justify-end">
+		{@render runButton({
+			input: taskInput,
+			text: 'Run'
+		})}
+	</div>
+	<button
+		class="absolute right-0 top-0 p-5 text-sm text-gray dark:text-gray-400"
+		onclick={() => {
+			inputDialog?.close();
+		}}
+	>
+		<X class="h-5 w-5" />
+	</button>
+</dialog>
+
+<Confirm
 	show={toDelete !== ''}
 	msg={`Are you sure you want to delete this task run`}
 	onsuccess={() => {
@@ -181,6 +226,6 @@
 <style lang="postcss">
 	td,
 	th {
-		@apply p-1.5 px-6;
+		@apply p-1.5;
 	}
 </style>