From b4cd084117d4cb40987122da5ebfb4d493e2bd0d Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Sun, 28 Jul 2024 13:06:47 +0100
Subject: [PATCH] feat: action selector

---
 .../workspace/Models/ActionsSelector.svelte   | 60 +++++++++++++++++++
 .../workspace/models/create/+page.svelte      | 21 +++++++
 .../(app)/workspace/models/edit/+page.svelte  | 21 +++++++
 3 files changed, 102 insertions(+)
 create mode 100644 src/lib/components/workspace/Models/ActionsSelector.svelte

diff --git a/src/lib/components/workspace/Models/ActionsSelector.svelte b/src/lib/components/workspace/Models/ActionsSelector.svelte
new file mode 100644
index 000000000..faa8dd9b9
--- /dev/null
+++ b/src/lib/components/workspace/Models/ActionsSelector.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { getContext, onMount } from 'svelte';
+	import Checkbox from '$lib/components/common/Checkbox.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let actions = [];
+	export let selectedActionIds = [];
+
+	let _actions = {};
+
+	onMount(() => {
+		_actions = actions.reduce((acc, action) => {
+			acc[action.id] = {
+				...action,
+				selected: selectedActionIds.includes(action.id)
+			};
+
+			return acc;
+		}, {});
+	});
+</script>
+
+<div>
+	<div class="flex w-full justify-between mb-1">
+		<div class=" self-center text-sm font-semibold">{$i18n.t('Actions')}</div>
+	</div>
+
+	<div class=" text-xs dark:text-gray-500">
+		{$i18n.t('To select actions here, add them to the "Functions" workspace first.')}
+	</div>
+
+	<!-- TODO: Filer order matters -->
+	<div class="flex flex-col">
+		{#if actions.length > 0}
+			<div class=" flex items-center mt-2 flex-wrap">
+				{#each Object.keys(_actions) as action, actionIdx}
+					<div class=" flex items-center gap-2 mr-3">
+						<div class="self-center flex items-center">
+							<Checkbox
+								state={_actions[action].selected ? 'checked' : 'unchecked'}
+								on:change={(e) => {
+									_actions[action].selected = e.detail === 'checked';
+									selectedActionIds = Object.keys(_actions).filter((t) => _actions[t].selected);
+								}}
+							/>
+						</div>
+
+						<div class=" py-0.5 text-sm w-full capitalize font-medium">
+							<Tooltip content={_actions[action].meta.description}>
+								{_actions[action].name}
+							</Tooltip>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>
diff --git a/src/routes/(app)/workspace/models/create/+page.svelte b/src/routes/(app)/workspace/models/create/+page.svelte
index 9d3907863..b47d37bf3 100644
--- a/src/routes/(app)/workspace/models/create/+page.svelte
+++ b/src/routes/(app)/workspace/models/create/+page.svelte
@@ -18,6 +18,7 @@
 	import { stringify } from 'postcss';
 	import { parseFile } from '$lib/utils/characters';
 	import FiltersSelector from '$lib/components/workspace/Models/FiltersSelector.svelte';
+	import ActionsSelector from '$lib/components/workspace/Models/ActionsSelector.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -63,6 +64,7 @@
 	let toolIds = [];
 	let knowledge = [];
 	let filterIds = [];
+	let actionIds = [];
 
 	$: if (name) {
 		id = name
@@ -115,6 +117,14 @@
 			}
 		}
 
+		if (actionIds.length > 0) {
+			info.meta.actionIds = actionIds;
+		} else {
+			if (info.meta.actionIds) {
+				delete info.meta.actionIds;
+			}
+		}
+
 		info.params.stop = params.stop ? params.stop.split(',').filter((s) => s.trim()) : null;
 		Object.keys(info.params).forEach((key) => {
 			if (info.params[key] === '' || info.params[key] === null) {
@@ -187,6 +197,10 @@
 			filterIds = [...model?.info?.meta?.filterIds];
 		}
 
+		if (model?.info?.meta?.actionIds) {
+			actionIds = [...model?.info?.meta?.actionIds];
+		}
+
 		info = {
 			...info,
 			...model.info
@@ -625,6 +639,13 @@
 			/>
 		</div>
 
+		<div class="my-2">
+			<ActionsSelector
+				bind:selectedActionIds={actionIds}
+				actions={$functions.filter((func) => func.type === 'action')}
+			/>
+		</div>
+
 		<div class="my-1">
 			<div class="flex w-full justify-between mb-1">
 				<div class=" self-center text-sm font-semibold">{$i18n.t('Capabilities')}</div>
diff --git a/src/routes/(app)/workspace/models/edit/+page.svelte b/src/routes/(app)/workspace/models/edit/+page.svelte
index 12b314a05..d05d9fc6d 100644
--- a/src/routes/(app)/workspace/models/edit/+page.svelte
+++ b/src/routes/(app)/workspace/models/edit/+page.svelte
@@ -17,6 +17,7 @@
 	import Knowledge from '$lib/components/workspace/Models/Knowledge.svelte';
 	import ToolsSelector from '$lib/components/workspace/Models/ToolsSelector.svelte';
 	import FiltersSelector from '$lib/components/workspace/Models/FiltersSelector.svelte';
+	import ActionsSelector from '$lib/components/workspace/Models/ActionsSelector.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -64,6 +65,7 @@
 	let knowledge = [];
 	let toolIds = [];
 	let filterIds = [];
+	let actionIds = [];
 
 	const updateHandler = async () => {
 		loading = true;
@@ -96,6 +98,14 @@
 			}
 		}
 
+		if (actionIds.length > 0) {
+			info.meta.actionIds = actionIds;
+		} else {
+			if (info.meta.actionIds) {
+				delete info.meta.actionIds;
+			}
+		}
+
 		info.params.stop = params.stop ? params.stop.split(',').filter((s) => s.trim()) : null;
 		Object.keys(info.params).forEach((key) => {
 			if (info.params[key] === '' || info.params[key] === null) {
@@ -161,6 +171,10 @@
 					filterIds = [...model?.info?.meta?.filterIds];
 				}
 
+				if (model?.info?.meta?.actionIds) {
+					actionIds = [...model?.info?.meta?.actionIds];
+				}
+
 				if (model?.owned_by === 'openai') {
 					capabilities.usage = false;
 				}
@@ -555,6 +569,13 @@
 				/>
 			</div>
 
+			<div class="my-2">
+				<ActionsSelector
+					bind:selectedActionIds={actionIds}
+					actions={$functions.filter((func) => func.type === 'action')}
+				/>
+			</div>
+
 			<div class="my-2">
 				<div class="flex w-full justify-between mb-1">
 					<div class=" self-center text-sm font-semibold">{$i18n.t('Capabilities')}</div>