From b1a09d4649c1b9faf8c421c7cf678a61790593c2 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 25 Apr 2024 06:09:02 -0700
Subject: [PATCH 01/31] Add more margin utility classes

---
 src/ui/ManagementPortal/app.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
index cf3ee987a1..7a497a6828 100644
--- a/src/ui/ManagementPortal/app.vue
+++ b/src/ui/ManagementPortal/app.vue
@@ -107,6 +107,14 @@ main {
 	margin-bottom: 8px !important;
 }
 
+.mb-3 {
+	margin-bottom: 12px !important;
+}
+
+.mb-4 {
+	margin-bottom: 16px !important;
+}
+
 .w-100 {
 	width: 100%;
 }

From 65d763cb24d274af7ecdc3ca1136cac4bb68555a Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 25 Apr 2024 06:09:29 -0700
Subject: [PATCH 02/31] Rough models and endpoints list and create pages

---
 .../ManagementPortal/components/Sidebar.vue   |   4 +-
 .../pages/models-and-endpoints/create.vue     | 419 ++++++++++++++++++
 .../pages/models-and-endpoints/index.vue      | 210 +++++++++
 3 files changed, 632 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/ManagementPortal/pages/models-and-endpoints/create.vue
 create mode 100644 src/ui/ManagementPortal/pages/models-and-endpoints/index.vue

diff --git a/src/ui/ManagementPortal/components/Sidebar.vue b/src/ui/ManagementPortal/components/Sidebar.vue
index ff0c190624..f4a3ef5317 100644
--- a/src/ui/ManagementPortal/components/Sidebar.vue
+++ b/src/ui/ManagementPortal/components/Sidebar.vue
@@ -43,7 +43,9 @@
 			<span>LLM's</span>
 		</div>
 
-		<div class="sidebar__item">Language Models & Endpoints</div>
+		<NuxtLink to="/models-and-endpoints" class="sidebar__item">
+			Language Models & Endpoints
+		</NuxtLink>
 
 		<!-- Security -->
 		<div class="sidebar__section-header">
diff --git a/src/ui/ManagementPortal/pages/models-and-endpoints/create.vue b/src/ui/ManagementPortal/pages/models-and-endpoints/create.vue
new file mode 100644
index 0000000000..805ac87ed4
--- /dev/null
+++ b/src/ui/ManagementPortal/pages/models-and-endpoints/create.vue
@@ -0,0 +1,419 @@
+<template>
+	<div>
+		<!-- Header -->
+		<h2 class="page-header">{{ editId ? 'Edit Model/Endpoint' : 'Create Model/Endpoint' }}</h2>
+		<div class="page-subheader">
+			{{
+				editId
+					? 'Edit your model/endpoint settings below.'
+					: 'Complete the settings below to configure the model/endpoint.'
+			}}
+		</div>
+
+		<!-- Steps -->
+		<div class="steps" :class="{ 'steps--loading': loading }">
+			<!-- Loading overlay -->
+			<template v-if="loading">
+				<div class="steps__loading-overlay">
+					<LoadingGrid />
+					<div>{{ loadingStatusText }}</div>
+				</div>
+			</template>
+
+			<!-- Model type -->
+			<div class="step-header span-2">What is the model type?</div>
+			<div class="span-2">
+				<Dropdown
+					v-model="request.orchestrator"
+					:options="orchestratorOptions"
+					option-label="label"
+					option-value="value"
+					placeholder="--Select--"
+					class="dropdown--agent"
+				/>
+			</div>
+
+			<!-- Connection type -->
+			<div class="step-header span-2">What is the connection type?</div>
+			<div class="span-2">
+				<div class="mb-2">Auth Type:</div>
+				<Dropdown
+					v-model="authType"
+					:options="authTypeOptions"
+					option-label="label"
+					option-value="value"
+					placeholder="--Select--"
+					class="dropdown--agent"
+				/>
+			</div>
+
+			<!-- Connection details -->
+			<div class="step-header span-2">What are the connection details?</div>
+			<div class="span-2">
+				<!-- Endpoint -->
+				<div class="mb-2">Endpoint:</div>
+				<InputText
+					v-model="request.endpoint_configuration.endpoint"
+					class="w-100 mb-4"
+					type="text"
+				/>
+
+				<!-- API Key -->
+				<template v-if="authType === 'key'">
+					<div class="mb-2">API Key:</div>
+					<SecretKeyInput v-model="request.endpoint_configuration.api_key" class="mb-4" />
+				</template>
+
+				<!-- API Version -->
+				<template v-if="['AzureOpenAI', 'AzureAI'].includes(request.orchestrator)">
+					<div class="mb-2">API Version:</div>
+					<InputText
+						v-model="request.endpoint_configuration.version"
+						class="w-100 mb-4"
+						type="text"
+					/>
+				</template>
+			</div>
+
+			<!-- Model params -->
+			<template v-if="request.orchestrator === 'AzureOpenAI'">
+				<div class="step-header span-2">What are the model details?</div>
+				<div class="span-2">
+					<div class="mb-2">Deployment Name:</div>
+					<SecretKeyInput v-model="request.endpoint_configuration.api_key" class="mb-4" />
+				</div>
+			</template>
+
+			<!-- Buttons -->
+			<div class="button-container column-2 justify-self-end">
+				<!-- Create model -->
+				<Button
+					:label="editId ? 'Save Changes' : 'Create Model/Endpoint'"
+					severity="primary"
+					@click="handleCreate"
+				/>
+
+				<!-- Cancel -->
+				<Button
+					v-if="editId"
+					style="margin-left: 16px"
+					label="Cancel"
+					severity="secondary"
+					@click="handleCancel"
+				/>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import api from '@/js/api';
+
+export default {
+	name: 'CreateModelOrEndpoint',
+
+	props: {
+		editId: {
+			type: [Boolean, String] as PropType<false | string>,
+			required: false,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			loading: false as boolean,
+			loadingStatusText: 'Retrieving data...' as string,
+
+			// nameValidationStatus: null as string | null, // 'valid', 'invalid', or null
+			// validationMessage: '' as string,
+
+			request: {
+				orchestrator: null as string | null,
+				endpoint_configuration: {
+					endpoint: '' as string,
+					api_key: '' as string,
+					api_version: '' as string,
+					// operation_type: 'chat' as string,
+				} as object,
+				model_parameters: {
+					deployment_name: '' as string,
+					// temperature: 0 as number,
+				} as object,
+			},
+
+			orchestratorOptions: [
+				{
+					label: 'Azure OpenAI',
+					value: 'AzureOpenAI',
+				},
+				{
+					label: 'Azure AI',
+					value: 'AzureAI',
+				},
+				{
+					label: 'OpenAI',
+					value: 'OpenAI',
+				},
+			],
+
+			authType: null,
+			authTypeOptions: [
+				{
+					label: 'API Key',
+					value: 'key',
+				},
+				{
+					label: 'Token',
+					value: 'token',
+				}
+			],
+		};
+	},
+
+	async created() {
+		
+	},
+
+	methods: {
+		handleCancel() {
+			if (!confirm('Are you sure you want to cancel?')) {
+				return;
+			}
+
+			this.$router.push('/models-and-endpoints');
+		},
+
+		async handleCreate() {
+			console.log(this.request);
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+.steps {
+	display: grid;
+	grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);
+	gap: 24px;
+	position: relative;
+}
+
+.steps--loading {
+	pointer-events: none;
+}
+
+.steps__loading-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	z-index: 10;
+	background-color: rgba(255, 255, 255, 0.9);
+	pointer-events: none;
+}
+
+.step-section-header {
+	background-color: rgba(150, 150, 150, 1);
+	color: white;
+	font-size: 1rem;
+	font-weight: 600;
+	padding: 16px;
+}
+
+.step-header {
+	font-weight: bold;
+	margin-bottom: -10px;
+}
+
+.step {
+	// display: flex;
+	// flex-direction: column;
+}
+
+.step--disabled {
+	pointer-events: none;
+	opacity: 0.5;
+}
+
+.step-container {
+	// padding: 16px;
+	border: 2px solid #e1e1e1;
+	flex-grow: 1;
+	position: relative;
+
+	&:hover {
+		background-color: rgba(217, 217, 217, 0.4);
+	}
+
+	&__header {
+		font-weight: bold;
+		margin-bottom: 8px;
+	}
+}
+
+.step-container__view {
+	// padding: 16px;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+}
+
+.step-container__view__inner {
+	padding: 16px;
+	flex-grow: 1;
+	word-break: break-word;
+}
+
+.step-container__view__arrow {
+	background-color: #e1e1e1;
+	color: rgb(150, 150, 150);
+	width: 40px;
+	min-width: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	&:hover {
+		background-color: #cacaca;
+	}
+}
+
+$editStepPadding: 16px;
+.step-container__edit {
+	border: 2px solid #e1e1e1;
+	position: absolute;
+	width: calc(100% + 4px);
+	background-color: white;
+	top: -2px;
+	left: -2px;
+	z-index: 5;
+	box-shadow: 0 5px 20px 0 rgba(27, 29, 33, 0.2);
+	min-height: calc(100% + 4px);
+	// padding: $editStepPadding;
+	display: flex;
+	flex-direction: row;
+}
+
+.step-container__edit__inner {
+	padding: $editStepPadding;
+	flex-grow: 1;
+}
+
+.step-container__edit__arrow {
+	background-color: #e1e1e1;
+	color: rgb(150, 150, 150);
+	min-width: 40px;
+	width: 40px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	transform: rotate(180deg);
+
+	&:hover {
+		background-color: #cacaca;
+	}
+}
+
+.step-container__edit-dropdown {
+	border: 2px solid #e1e1e1;
+	position: absolute;
+	width: calc(100% + 4px);
+	background-color: white;
+	top: -2px;
+	left: -2px;
+	z-index: 5;
+	box-shadow: 0 5px 20px 0 rgba(27, 29, 33, 0.2);
+	display: flex;
+	flex-direction: column;
+	min-height: calc(100% + 4px);
+}
+
+.step-container__edit__header {
+	padding: $editStepPadding;
+}
+
+.step-container__edit__group-header {
+	font-weight: bold;
+	padding: $editStepPadding;
+	padding-bottom: 0px;
+}
+
+.step-container__edit__option {
+	padding: $editStepPadding;
+	word-break: break-word;
+	&:hover {
+		background-color: rgba(217, 217, 217, 0.4);
+	}
+}
+
+// .step-container__edit__option + .step-container__edit__option{
+// 	border-top: 2px solid #e1e1e1;
+// }
+
+.step-container__edit__option--selected {
+	// outline: 2px solid #e1e1e1;
+	// background-color: rgba(217, 217, 217, 0.4);
+}
+
+.step__radio {
+	display: flex;
+	gap: 10px;
+}
+
+.step-option__header {
+	text-decoration: underline;
+	margin-right: 8px;
+}
+
+.primary-button {
+	background-color: var(--primary-button-bg) !important;
+	border-color: var(--primary-button-bg) !important;
+	color: var(--primary-button-text) !important;
+}
+
+.input-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+input {
+	width: 100%;
+	padding-right: 30px;
+}
+
+.icon {
+	position: absolute;
+	right: 10px;
+	cursor: default;
+}
+
+.valid {
+	color: green;
+}
+
+.invalid {
+	color: red;
+}
+
+.flex-container {
+	display: flex;
+	align-items: center; /* Align items vertically in the center */
+}
+
+.flex-item {
+	flex-grow: 1; /* Allow the textarea to grow and fill the space */
+}
+
+.flex-item-button {
+	margin-left: 8px; /* Add some space between the textarea and the button */
+}
+</style>
diff --git a/src/ui/ManagementPortal/pages/models-and-endpoints/index.vue b/src/ui/ManagementPortal/pages/models-and-endpoints/index.vue
new file mode 100644
index 0000000000..e31034a712
--- /dev/null
+++ b/src/ui/ManagementPortal/pages/models-and-endpoints/index.vue
@@ -0,0 +1,210 @@
+<template>
+	<div>
+		<div style="display: flex">
+			<div style="flex: 1">
+				<h2 class="page-header">Models & Endpoints</h2>
+				<div class="page-subheader">The following models & endpoints are available.</div>
+			</div>
+
+			<div style="display: flex; align-items: center">
+				<NuxtLink to="/models-and-endpoints/create">
+					<Button>
+						<i class="pi pi-plus" style="color: var(--text-primary); margin-right: 8px"></i>
+						Create Model/Endpoint
+					</Button>
+				</NuxtLink>
+			</div>
+		</div>
+
+		<div :class="{ 'grid--loading': loading }">
+			<!-- Loading overlay -->
+			<template v-if="loading">
+				<div class="grid__loading-overlay">
+					<LoadingGrid />
+					<div>{{ loadingStatusText }}</div>
+				</div>
+			</template>
+
+			<!-- Table -->
+			<DataTable
+				:value="modelsAndEndpoints"
+				striped-rows
+				scrollable
+				table-style="max-width: 100%"
+				size="small"
+			>
+				<template #empty>
+					No models/endpoints found. Please use the menu on the left to create a new
+					model/endpoint.
+				</template>
+				<template #loading>Loading model & endpoints. Please wait.</template>
+
+				<!-- Name -->
+				<Column
+					field="name"
+					header="Name"
+					sortable
+					style="min-width: 200px"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				></Column>
+
+				<!-- Type -->
+				<Column
+					field="type"
+					header="Source Type"
+					sortable
+					style="min-width: 200px"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				></Column>
+
+				<!-- Edit -->
+				<Column
+					header="Edit"
+					header-style="width:6rem"
+					style="text-align: center"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						headerContent: { style: { justifyContent: 'center' } },
+					}"
+				>
+					<template #body="{ data }">
+						<NuxtLink :to="'/models-and-endpoints/edit/' + data.name" class="table__button">
+							<Button link>
+								<i class="pi pi-cog" style="font-size: 1.2rem"></i>
+							</Button>
+						</NuxtLink>
+					</template>
+				</Column>
+
+				<!-- Delete -->
+				<Column
+					header="Delete"
+					header-style="width:6rem"
+					style="text-align: center"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						headerContent: { style: { justifyContent: 'center' } },
+					}"
+				>
+					<template #body="{ data }">
+						<Button link @click="itemToDelete = data">
+							<i class="pi pi-trash" style="font-size: 1.2rem; color: var(--red-400)"></i>
+						</Button>
+					</template>
+				</Column>
+			</DataTable>
+		</div>
+
+		<!-- Delete model/endpoint dialog -->
+		<Dialog
+			:visible="itemToDelete !== null"
+			modal
+			header="Delete Data Source"
+			:closable="false"
+		>
+			<p>Do you want to delete the model/endpoint "{{ itemToDelete.name }}" ?</p>
+			<template #footer>
+				<Button label="Cancel" text @click="itemToDelete = null" />
+				<Button label="Delete" severity="danger" @click="handleDelete" />
+			</template>
+		</Dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import api from '@/js/api';
+import type { ModelOrEndpoint } from '@/js/types';
+
+export default {
+	name: 'ModelsAndEndpoints',
+
+	data() {
+		return {
+			modelsAndEndpoints: [] as ModelOrEndpoint,
+			loading: false as boolean,
+			loadingStatusText: 'Retrieving data...' as string,
+			itemToDelete: null as ModelOrEndpoint | null,
+		};
+	},
+
+	async created() {
+		// await this.getModelsAndEndpoints();
+	},
+
+	methods: {
+		async getModelsAndEndpoints() {
+			// this.loading = true;
+			// try {
+			// 	this.modelsAndEndpoints = await api.getModelsAndEndpoints();
+			// } catch (error) {
+			// 	this.$toast.add({
+			// 		severity: 'error',
+			// 		detail: error?.response?._data || error,
+			// 		life: 5000,
+			// 	});
+			// }
+			// this.loading = false;
+		},
+
+		async handleDelete() {
+			// try {
+			// 	await api.deleteModelOrEndpoint(this.itemToDelete!.name);
+			// 	this.itemToDelete = null;
+			// } catch (error) {
+			// 	return this.$toast.add({
+			// 		severity: 'error',
+			// 		detail: error?.response?._data || error,
+			// 		life: 5000,
+			// 	});
+			// }
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+.table__button {
+	color: var(--primary-button-bg);
+}
+
+.steps {
+	display: grid;
+	grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);
+	gap: 24px;
+	position: relative;
+}
+
+.grid--loading {
+	pointer-events: none;
+}
+
+.grid__loading-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+	z-index: 10;
+	background-color: rgba(255, 255, 255, 0.9);
+	pointer-events: none;
+}
+</style>

From 7974a33701e4d41fb8603c9e6b5125f145aa8ecc Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 25 Apr 2024 06:10:42 -0700
Subject: [PATCH 03/31] Run linter

---
 .../pages/models-and-endpoints/create.vue              |  6 ++----
 .../pages/models-and-endpoints/index.vue               | 10 ++--------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/models-and-endpoints/create.vue b/src/ui/ManagementPortal/pages/models-and-endpoints/create.vue
index 805ac87ed4..c820fcada5 100644
--- a/src/ui/ManagementPortal/pages/models-and-endpoints/create.vue
+++ b/src/ui/ManagementPortal/pages/models-and-endpoints/create.vue
@@ -167,14 +167,12 @@ export default {
 				{
 					label: 'Token',
 					value: 'token',
-				}
+				},
 			],
 		};
 	},
 
-	async created() {
-		
-	},
+	async created() {},
 
 	methods: {
 		handleCancel() {
diff --git a/src/ui/ManagementPortal/pages/models-and-endpoints/index.vue b/src/ui/ManagementPortal/pages/models-and-endpoints/index.vue
index e31034a712..2815cb253f 100644
--- a/src/ui/ManagementPortal/pages/models-and-endpoints/index.vue
+++ b/src/ui/ManagementPortal/pages/models-and-endpoints/index.vue
@@ -34,8 +34,7 @@
 				size="small"
 			>
 				<template #empty>
-					No models/endpoints found. Please use the menu on the left to create a new
-					model/endpoint.
+					No models/endpoints found. Please use the menu on the left to create a new model/endpoint.
 				</template>
 				<template #loading>Loading model & endpoints. Please wait.</template>
 
@@ -110,12 +109,7 @@
 		</div>
 
 		<!-- Delete model/endpoint dialog -->
-		<Dialog
-			:visible="itemToDelete !== null"
-			modal
-			header="Delete Data Source"
-			:closable="false"
-		>
+		<Dialog :visible="itemToDelete !== null" modal header="Delete Model/Endpoint" :closable="false">
 			<p>Do you want to delete the model/endpoint "{{ itemToDelete.name }}" ?</p>
 			<template #footer>
 				<Button label="Cancel" text @click="itemToDelete = null" />

From 4a5c28e949b9ccbd879e884e18beac212765e927 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Fri, 25 Oct 2024 07:05:19 -0700
Subject: [PATCH 04/31] Fix sidebar comment formatting

---
 src/ui/ManagementPortal/components/Sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/components/Sidebar.vue b/src/ui/ManagementPortal/components/Sidebar.vue
index 733721c0f2..816a56efd1 100644
--- a/src/ui/ManagementPortal/components/Sidebar.vue
+++ b/src/ui/ManagementPortal/components/Sidebar.vue
@@ -48,7 +48,7 @@
 		<!-- <div class="sidebar__section-header">
 			<span class="pi pi-sitemap"></span>
 			<span>LLM's</span>
-		</div>
+		</div> -->
 
 		<NuxtLink to="/models-and-endpoints" class="sidebar__item">
 			Language Models & Endpoints

From aeab0eb75c83715ff81bca5deb80586a79f006c9 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Fri, 15 Nov 2024 06:46:19 -0800
Subject: [PATCH 05/31] Add api method to get workflows

---
 src/ui/ManagementPortal/js/api.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index b772f81fd9..0e70be8f53 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -810,4 +810,13 @@ export default {
 			},
 		);
 	},
+
+	/*
+		Workflows
+	 */
+	async getWorkflows(): Promise<any> {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/workflows?api-version=${this.apiVersion}`,
+		);
+	},
 };

From 8820d470e8d545b06d0f25acecc590585fe0d425 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 18 Nov 2024 23:49:04 -0800
Subject: [PATCH 06/31] Formatting

---
 src/ui/ManagementPortal/components/Sidebar.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/components/Sidebar.vue b/src/ui/ManagementPortal/components/Sidebar.vue
index 35370dd15c..5eb83eb511 100644
--- a/src/ui/ManagementPortal/components/Sidebar.vue
+++ b/src/ui/ManagementPortal/components/Sidebar.vue
@@ -79,7 +79,8 @@
 				<VTooltip :auto-hide="isMobile" :popper-triggers="isMobile ? [] : ['hover']">
 					<span
 						class="sidebar__username"
-						aria-label="Logged in as {{ $authStore.currentAccount?.username }}">
+						aria-label="Logged in as {{ $authStore.currentAccount?.username }}"
+					>
 						{{ $authStore.currentAccount?.name }}
 					</span>
 					<template #popper>

From 0460335ef4ddab38fcd05ac9b390a236fd8da48a Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 18 Nov 2024 23:50:24 -0800
Subject: [PATCH 07/31] Rename getWorkflows to getAgentWorkflows

---
 src/ui/ManagementPortal/js/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 0e70be8f53..0e86534e3f 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -814,7 +814,7 @@ export default {
 	/*
 		Workflows
 	 */
-	async getWorkflows(): Promise<any> {
+	async getAgentWorkflows(): Promise<any> {
 		return await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/workflows?api-version=${this.apiVersion}`,
 		);

From 020f14a89012a15354766b49f094c93108cfc164 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 18 Nov 2024 23:50:50 -0800
Subject: [PATCH 08/31] Get workflow options on create agent page

---
 src/ui/ManagementPortal/pages/agents/create.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index ab62124681..a9d51b58ef 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -839,6 +839,7 @@ export default {
 			textEmbeddingProfileSources: [] as TextEmbeddingProfile[],
 			externalOrchestratorOptions: [] as ExternalOrchestrationService[],
 			aiModelOptions: [] as AIModel[],
+			workflowOptions: [],
 			tools: {} as { [key: string]: AgentTool },
 
 			orchestratorOptions: [
@@ -959,6 +960,10 @@ export default {
 			// Filter the AIModels so we only display the ones where the type is 'completion'.
 			this.aiModelOptions = this.aiModelOptions.filter((model) => model.type === 'completion');
 
+			this.loadingStatusText = 'Retrieving workflows...';
+			const workflowOptions = await api.getAgentWorkflows();
+			this.workflowOptions = workflowOptions.map((result) => result.resource);
+
 			// Update the orchestratorOptions with the externalOrchestratorOptions.
 			this.orchestratorOptions = this.orchestratorOptions.concat(
 				this.externalOrchestratorOptions.map((service) => ({

From fa6c2e5c34476be11a75d836aa8b87c1a202f140 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Tue, 19 Nov 2024 00:09:59 -0800
Subject: [PATCH 09/31] Ensure style is scoped

---
 src/ui/ManagementPortal/pages/branding.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/pages/branding.vue b/src/ui/ManagementPortal/pages/branding.vue
index 29ece7a109..b479ec96ab 100644
--- a/src/ui/ManagementPortal/pages/branding.vue
+++ b/src/ui/ManagementPortal/pages/branding.vue
@@ -649,7 +649,7 @@ export default {
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .steps {
 	display: grid;
 	grid-template-columns: minmax(auto, 50%) minmax(auto, 50%);

From 175f002847e42bfb3cc25f0b0bc90fc2ca2dbb42 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 2 Dec 2024 23:56:20 -0800
Subject: [PATCH 10/31] Make principal display name optional if null

---
 src/ui/ManagementPortal/components/RoleAssignmentsTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue b/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
index 6870eb0e83..5fc7b88835 100644
--- a/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
+++ b/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
@@ -57,7 +57,7 @@
 						<i v-else class="pi pi-verified"></i>
 
 						<span>
-							<div>{{ data.principal.display_name }}</div>
+							<div>{{ data.principal?.display_name }}</div>
 							<div v-if="data.principal?.email">({{ data.principal?.email }})</div>
 						</span>
 					</div>

From 00e2e0dc6750ce09e38b767c7d24808fa7608ebb Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Mon, 2 Dec 2024 23:56:46 -0800
Subject: [PATCH 11/31] Create mock workflows

---
 src/ui/ManagementPortal/js/mock.ts | 37 ++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/src/ui/ManagementPortal/js/mock.ts b/src/ui/ManagementPortal/js/mock.ts
index 626f0d16fd..911b71cebb 100644
--- a/src/ui/ManagementPortal/js/mock.ts
+++ b/src/ui/ManagementPortal/js/mock.ts
@@ -414,3 +414,40 @@ export const mockRoleAssignmentsResponse = {
 		},
 	],
 };
+
+export const mockAzureOpenAIAssistantsWorkflow = {
+	type: 'azure-openai-assistants-workflow',
+	workflow_object_id: 'workflow-123',
+	workflow_name: 'Sample Workflow',
+	agent_workflow_ai_models: {
+		main_model: {
+			ai_model_object_id: 'model-456',
+			model_parameters: {
+				temperature: 0.7,
+				max_tokens: 100,
+			},
+		},
+	},
+	prompt_object_ids: {
+		main_prompt: 'prompt-789',
+	},
+	assistant_id: 'assistant-001',
+};
+
+export const mockLangChainExpressionLanguageWorkflow = {
+	type: 'langchain-expression-language-workflow',
+	workflow_object_id: 'workflow-123',
+	workflow_name: 'Sample Workflow',
+	agent_workflow_ai_models: {
+		main_model: {
+			ai_model_object_id: 'model-456',
+			model_parameters: {
+				param1: 'value1',
+				param2: 'value2',
+			},
+		},
+	},
+	prompt_object_ids: {
+		main_prompt: 'prompt-789',
+	},
+};

From c36d2f3d31a42ba35465cbb3f4b5c883a57661fc Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 11 Dec 2024 08:07:05 -0800
Subject: [PATCH 12/31] Post merge clean up

---
 src/ui/ManagementPortal/app.vue                 | 7 +++----
 src/ui/ManagementPortal/pages/agents/create.vue | 2 +-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
index cfe71d877d..44f1bfeb5a 100644
--- a/src/ui/ManagementPortal/app.vue
+++ b/src/ui/ManagementPortal/app.vue
@@ -1,17 +1,16 @@
 <template>
-	<main>
 		<Head>
 			<Title>{{ pageTitle }}</Title>
 			<Meta name="description" :content="pageTitle" />
 			<Link rel="icon" type="image/x-icon" :href="iconLink" />
 		</Head>
 
+	<div class="main-content">
 		<NuxtLayout>
 			<NuxtPage />
 		</NuxtLayout>
-
 		<Toast position="top-center" />
-	</main>
+	</div>
 </template>
 
 <script lang="ts">
@@ -59,7 +58,7 @@ html,
 body,
 #__nuxt,
 #__layout,
-main {
+.main-content {
 	height: 100%;
 	margin: 0;
 	font-family: 'Poppins', sans-serif;
diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index ca8be7948c..c50e8fdf80 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<main id="main-content">
 		<div style="display: flex">
 			<!-- Title -->
 			<div style="flex: 1">

From 4e763af132638ab8d8847a883bbb2ab7868080e1 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 11 Dec 2024 08:20:14 -0800
Subject: [PATCH 13/31] Add more utility classes

---
 src/ui/ManagementPortal/app.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
index 44f1bfeb5a..c6f6eceb7b 100644
--- a/src/ui/ManagementPortal/app.vue
+++ b/src/ui/ManagementPortal/app.vue
@@ -99,6 +99,10 @@ body,
 	margin-left: 4px !important;
 }
 
+.ml-2 {
+	margin-left: 8px !important;
+}
+
 .mr-1 {
 	margin-right: 4px !important;
 }
@@ -127,6 +131,14 @@ body,
 	margin-bottom: 16px !important;
 }
 
+.mb-5 {
+	margin-bottom: 20px !important;
+}
+
+.mb-6 {
+	margin-bottom: 24px !important;
+}
+
 .w-100 {
 	width: 100%;
 }

From 03ef4b2172309703c1b5731c6387a55f727be502 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 04:40:58 -0800
Subject: [PATCH 14/31] Add more utility classes

---
 src/ui/ManagementPortal/app.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
index c6f6eceb7b..baf15384af 100644
--- a/src/ui/ManagementPortal/app.vue
+++ b/src/ui/ManagementPortal/app.vue
@@ -107,6 +107,11 @@ body,
 	margin-right: 4px !important;
 }
 
+.mx-2 {
+	margin-left: 8px !important;
+	margin-right: 8px !important;
+}
+
 .mt-2 {
 	margin-top: 8px !important;
 }
@@ -151,6 +156,10 @@ body,
 	display: flex;
 }
 
+.flex-1 {
+	flex: 1;
+}
+
 .flex-column {
 	flex-direction: column;
 }
@@ -167,6 +176,10 @@ body,
 	justify-content: end;
 }
 
+.justify-content-between {
+	justify-content: space-between;
+}
+
 .justify-self-end {
 	justify-self: end;
 }

From f6de0d0737695fcbae697bc318568293bb51e657 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 05:30:52 -0800
Subject: [PATCH 15/31] Add getAgentWorkflows api method

---
 src/ui/ManagementPortal/js/api.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 6675d936ac..681ce903c4 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -813,6 +813,15 @@ export default {
 		);
 	},
 
+	/*
+		Agent Workflows
+	 */
+	async getAgentWorkflows(): Promise<any> {
+		return await this.fetch(
+			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/workflows?api-version=${this.apiVersion}`,
+		);
+	},
+
 	/*
 		Agent Access Tokens
 	 */

From 42b9f6b96fcb3b084d4292b9de09724cb7cda374 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 05:32:17 -0800
Subject: [PATCH 16/31] Add comment

---
 src/ui/ManagementPortal/js/api.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 681ce903c4..745b2ca71d 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -631,6 +631,9 @@ export default {
 		);
 	},
 
+	/*
+		AI Models
+	 */
 	async getAIModels(): Promise<ResourceProviderGetResult<AIModel>[]> {
 		const data = (await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.AIModel/aiModels?api-version=${this.apiVersion}`,

From bef81615a204955b98587027cce3e7ee8f327e67 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 05:34:33 -0800
Subject: [PATCH 17/31] Create initial PropertyBuilder component

---
 .../components/PropertyBuilder.vue            | 129 ++++++++++++++++++
 1 file changed, 129 insertions(+)
 create mode 100644 src/ui/ManagementPortal/components/PropertyBuilder.vue

diff --git a/src/ui/ManagementPortal/components/PropertyBuilder.vue b/src/ui/ManagementPortal/components/PropertyBuilder.vue
new file mode 100644
index 0000000000..fcec5b2b52
--- /dev/null
+++ b/src/ui/ManagementPortal/components/PropertyBuilder.vue
@@ -0,0 +1,129 @@
+<template>
+	<div class="span-2 d-flex flex-column" style="gap: 16px">
+		<div v-for="(propertyValue, propertyKey) in properties" :key="propertyKey" class="d-flex justify-content-between" style="gap: 16px">
+
+			<div class="d-flex flex-1" style="gap: 16px">
+				<!-- Property name -->
+				<InputText
+					:value="propertyKey"
+					type="text"
+					placeholder="Property Name"
+					disabled
+				/>
+
+				<span class="d-flex align-center">=</span>
+
+				<!-- Property value -->
+				<InputText
+					:value="propertyValue"
+					type="text"
+					placeholder="Property Value"
+					disabled
+				/>
+			</div>
+
+			<!-- Delete property -->
+			<Button link @click="handleDeleteProperty(propertyKey)">
+				<i class="pi pi-trash" style="font-size: 1.2rem"></i>
+			</Button>
+		</div>
+	</div>
+
+	<div class="span-2 d-flex mt-4" style="gap: 16px">
+		<div class="d-flex flex-1" style="gap: 16px">
+			<!-- Property name -->
+			<InputText
+				v-model="propertyName"
+				type="text"
+				placeholder="Property Name"
+			/>
+
+			<!-- Property value -->
+			<InputText
+				v-model="propertyValue"
+				type="text"
+				placeholder="Property Value"
+			/>
+		</div>
+
+		<!-- Add property -->
+		<Button
+			label="Add Property"
+			severity="primary"
+			style="word-wrap: none"
+			@click="handleAddProperty"
+		/>
+	</div>
+
+</template>
+
+<script lang="ts">
+export default {
+	props: {
+		modelValue: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			properties: {},
+			propertyName: '' as string,
+			propertyValue: '' as string,
+		};
+	},
+
+	watch: {
+		modelValue: {
+			immediate: true,
+			deep: true,
+			handler() {
+				this.properties = this.modelValue;
+			},
+		},
+	},
+
+	methods: {
+		handleDeleteProperty(propertyName) {
+			delete this.properties[propertyName];
+			this.$emit('update:modelValue', this.properties);
+		},
+
+		handleAddProperty() {
+			const errors = [];
+
+			if (!this.propertyName) {
+				errors.push('Please input a property name.');
+			}
+
+			if (!this.propertyValue) {
+				errors.push('Please input a property value.');
+			}
+
+			if (this.properties[this.propertyName]) {
+				errors.push('This property name already exists.');
+			}
+
+			if (errors.length > 0) {
+				this.$toast.add({
+					severity: 'error',
+					detail: errors.join('\n'),
+					life: 5000,
+				});
+
+				return;
+			}
+
+			this.properties[this.propertyName] = this.propertyValue;
+			this.propertyName = '';
+			this.propertyValue = '';
+			this.$emit('update:modelValue', this.properties);
+		},
+	},
+}
+</script>
+
+<style lang="scss">
+	
+</style>
\ No newline at end of file

From 089dc47466c43d8d53f67cf2e84ef220606ecbb7 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 05:37:08 -0800
Subject: [PATCH 18/31] Initial workflow configuration on agent form

---
 .../ManagementPortal/pages/agents/create.vue  | 147 +++++++++++++++++-
 1 file changed, 142 insertions(+), 5 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index dbd8cffede..9ce3843ee7 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -720,7 +720,72 @@
 					/>
 				</div>
 			</section>
-			
+
+			<!-- Workflow -->
+			<div class="step-section-header span-2">Workflow</div>
+			<div id="aria-orchestrator" class="step-header span-2">
+				What workflow should the agent use?
+			</div>
+
+			<!-- Workflow selection -->
+			<div class="span-2">
+				<Dropdown
+					:modelValue="selectedWorkflow?.type"
+					:options="workflowOptions"
+					option-label="type"
+					option-value="type"
+					class="dropdown--agent"
+					placeholder="--Select--"
+					aria-labelledby="aria-orchestrator"
+					@change="selectedWorkflow = JSON.parse(JSON.stringify(workflowOptions.find((workflow) => workflow.type === $event.value)))"
+				/>
+				<Button
+					class="ml-2"
+					severity="primary"
+					:label="showWorkflowConfiguration ? 'Hide Workflow Configuration' : 'Configure Workflow'"
+					:disabled="!selectedWorkflow"
+					@click="showWorkflowConfiguration = !showWorkflowConfiguration"
+				/>
+			</div>
+
+			<!-- Workflow configuration -->
+			<div v-if="showWorkflowConfiguration" class="span-2">
+
+				<!-- Workflow main model -->
+				<div class="mb-6">
+					<div class="step-header mb-2">Workflow main model:</div>
+					<Dropdown
+						:modelValue="workflowMainAIModel?.object_id"
+						:options="aiModelOptions"
+						option-label="name"
+						option-value="object_id"
+						class="dropdown--agent"
+						placeholder="--Select--"
+						aria-labelledby="aria-orchestrator"
+						@change="workflowMainAIModel = JSON.parse(JSON.stringify(aiModelOptions.find((model) => model.object_id === $event.value)))"
+					/>
+				</div>
+
+				<!-- <div class="mb-6">
+					<div class="step-header mb-2">Workflow main prompt:</div>
+					<Textarea
+						v-model="workflowMainPrompt"
+						class="w-100"
+						auto-resize
+						rows="5"
+						type="text"
+						placeholder=""
+						aria-labelledby="aria-persona"
+					/>
+				</div> -->
+
+				<!-- Workflow main model parameters -->
+				<div class="mb-6">
+					<div class="step-header mb-2">Workflow main model parameters:</div>
+					<PropertyBuilder v-model="workflowMainAIModelParameters" />
+				</div>
+			</div>
+
 			<!-- Security -->
 			<div v-if="virtualSecurityGroupId" class="step-section-header span-2">Security</div>
 
@@ -752,7 +817,7 @@
 				</div>
 			</template>
 			
-			
+			<!-- Form buttons -->
 			<div class="span-2 d-flex justify-content-end" style="gap: 16px">
 				<!-- Create agent -->
 				<Button
@@ -853,6 +918,8 @@ const getDefaultFormValues = () => {
 		orchestration_settings: {
 			orchestrator: 'LangChain' as string,
 		},
+
+		selectedWorkflow: null,
 	};
 };
 
@@ -889,7 +956,12 @@ export default {
 			textEmbeddingProfileSources: [] as TextEmbeddingProfile[],
 			externalOrchestratorOptions: [] as ExternalOrchestrationService[],
 			aiModelOptions: [] as AIModel[],
-			tools: [] as AgentTool[],
+
+			workflowOptions: [] as AgentWorkflowAIModel[],
+			showWorkflowConfiguration: false,
+			workflowMainAIModel: null as AIModel | null,
+			// workflowMainPrompt: '' as string,
+			workflowMainAIModelParameters: {} as object,
 
 			virtualSecurityGroupId: null as string | null,
 
@@ -976,6 +1048,18 @@ export default {
 		},
 	},
 
+	watch: {
+		selectedWorkflow() {
+			this.workflowMainAIModel = Object.values(this.selectedWorkflow.resource_object_ids).find(
+				(resource) => resource.properties?.object_role === 'main_model'
+			);
+		},
+
+		workflowMainAIModel() {
+			this.workflowMainAIModelParameters = this.workflowMainAIModel?.model_parameters ?? this.workflowMainAIModel?.properties?.model_parameters;
+		},
+	},
+
 	async created() {
 		this.loading = true;
 		// Uncomment to remove mock loading screen
@@ -1011,6 +1095,9 @@ export default {
 			// Filter the AIModels so we only display the ones where the type is 'completion'.
 			this.aiModelOptions = this.aiModelOptions.filter((model) => model.type === 'completion');
 
+			this.loadingStatusText = 'Retrieving workflows...';
+			this.workflowOptions = await api.getAgentWorkflows();
+
 			// Update the orchestratorOptions with the externalOrchestratorOptions.
 			this.orchestratorOptions = this.orchestratorOptions.concat(
 				this.externalOrchestratorOptions.map((service) => ({
@@ -1051,9 +1138,13 @@ export default {
 					this.systemPrompt = prompt.resource.prefix;
 				}
 			}
+
+			if (agent.workflow) {
+				this.workflowOptions.push(agent.workflow);
+			}
+
 			this.loadingStatusText = `Mapping agent values to form...`;
 			this.mapAgentToForm(agent);
-			this.tools = agent.tools;
 		} else {
 			this.editable = true;
 		}
@@ -1139,6 +1230,10 @@ export default {
 						agent.capabilities?.includes(localOption.code),
 					) || this.selectedAgentCapabilities;
 			}
+
+			this.agentTools = agent.tools;
+
+			this.selectedWorkflow = agent.workflow;
 		},
 
 		updateAgentWelcomeMessage(newContent: string) {
@@ -1307,6 +1402,20 @@ export default {
 					promptObjectId = promptResponse.objectId;
 				}
 
+				// if (this.selectedWorkflow) {
+				// 	const workflowPromptRequest = {
+				// 		type: 'multipart',
+				// 		name: this.selectedWorkflow.prompt_object_ids.main_prompt,
+				// 		cost_center: null,
+				// 		description: `Workflow prompt for the ${this.selectedWorkflowModelId} model`,
+				// 		prefix: this.workflowMainPrompt,
+				// 		suffix: '',
+				// 	};
+
+				// 	const workflowPromptResponse = await api.createOrUpdatePrompt(this.selectedWorkflow.prompt_object_ids.main_prompt, promptRequest);
+				// 	workflowPromptResponse = promptResponse.objectId;
+				// }
+
 				let textPartitioningProfileObjectId = '';
 				let dataSourceObjectId = '';
 				let indexingProfileObjectId = [''];
@@ -1338,6 +1447,32 @@ export default {
 					}
 				}
 
+				let workflow = null;
+				if (this.selectedWorkflow) {
+					workflow = {
+						...this.selectedWorkflow,
+
+						resource_object_ids: {
+							...this.selectedWorkflow.resource_object_ids,
+
+							[this.workflowMainAIModel.object_id]: {
+								object_id: this.workflowMainAIModel.object_id,
+								properties: {
+									object_role: 'main_model',
+									model_parameters: this.workflowMainAIModelParameters,
+								},
+							},
+
+							// [promptObjectId]: {
+							// 	object_id: promptObjectId,
+							// 	properties: {
+							// 		object_role: 'main_prompt',
+							// 	},
+							// },
+						},
+					};
+				}
+
 				const agentRequest: CreateAgentRequest = {
 					type: this.agentType,
 					name: this.agentName,
@@ -1380,7 +1515,9 @@ export default {
 					orchestration_settings: this.orchestration_settings,
 					ai_model_object_id: this.selectedAIModel.object_id,
 
-					tools: this.tools,
+					tools: this.agentTools,
+
+					workflow,
 				};
 
 				if (this.editAgent) {

From 97f83b9de01b0d287e2b65789e7140ce233b1d9e Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 05:37:42 -0800
Subject: [PATCH 19/31] Install json-editor-vue npm package

---
 src/ui/ManagementPortal/package-lock.json | 488 +++++++++++++++++++++-
 src/ui/ManagementPortal/package.json      |   1 +
 2 files changed, 486 insertions(+), 3 deletions(-)

diff --git a/src/ui/ManagementPortal/package-lock.json b/src/ui/ManagementPortal/package-lock.json
index d2e19ec88d..9ee8690650 100644
--- a/src/ui/ManagementPortal/package-lock.json
+++ b/src/ui/ManagementPortal/package-lock.json
@@ -13,6 +13,7 @@
 				"@vue-js-cron/light": "^4.0.5",
 				"@vueup/vue-quill": "^1.2.0",
 				"floating-vue": "^2.0.0",
+				"json-editor-vue": "^0.17.3",
 				"lodash": "^4.17.21",
 				"md5": "^2.3.0",
 				"pinia": "^2.2.2",
@@ -749,6 +750,94 @@
 				"node": ">=10.0.0"
 			}
 		},
+		"node_modules/@codemirror/autocomplete": {
+			"version": "6.18.3",
+			"resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.3.tgz",
+			"integrity": "sha512-1dNIOmiM0z4BIBwxmxEfA1yoxh1MF/6KPBbh20a5vphGV0ictKlgQsbJs6D6SkR6iJpGbpwRsa6PFMNlg9T9pQ==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.17.0",
+				"@lezer/common": "^1.0.0"
+			},
+			"peerDependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/commands": {
+			"version": "6.7.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.7.1.tgz",
+			"integrity": "sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.4.0",
+				"@codemirror/view": "^6.27.0",
+				"@lezer/common": "^1.1.0"
+			}
+		},
+		"node_modules/@codemirror/lang-json": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
+			"integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+			"dependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@lezer/json": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/language": {
+			"version": "6.10.6",
+			"resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.6.tgz",
+			"integrity": "sha512-KrsbdCnxEztLVbB5PycWXFxas4EOyk/fPAfruSOnDDppevQgid2XZ+KbJ9u+fDikP/e7MW7HPBTvTb8JlZK9vA==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.23.0",
+				"@lezer/common": "^1.1.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0",
+				"style-mod": "^4.0.0"
+			}
+		},
+		"node_modules/@codemirror/lint": {
+			"version": "6.8.4",
+			"resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.4.tgz",
+			"integrity": "sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.35.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/search": {
+			"version": "6.5.8",
+			"resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.8.tgz",
+			"integrity": "sha512-PoWtZvo7c1XFeZWmmyaOp2G0XVbOnm+fJzvghqGAktBW3cufwJUWvSCcNG0ppXiBEM05mZu6RhMtXPv2hpllig==",
+			"dependencies": {
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0",
+				"crelt": "^1.0.5"
+			}
+		},
+		"node_modules/@codemirror/state": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.0.tgz",
+			"integrity": "sha512-MwBHVK60IiIHDcoMet78lxt6iw5gJOGSbNbOIVBHWVXIH4/Nq1+GQgLLGgI1KlnN86WDXsPudVaqYHKBIx7Eyw==",
+			"dependencies": {
+				"@marijn/find-cluster-break": "^1.0.0"
+			}
+		},
+		"node_modules/@codemirror/view": {
+			"version": "6.35.3",
+			"resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.35.3.tgz",
+			"integrity": "sha512-ScY7L8+EGdPl4QtoBiOzE4FELp7JmNUsBvgBcCakXWM2uiv/K89VAzU3BMDscf0DsACLvTKePbd5+cFDTcei6g==",
+			"dependencies": {
+				"@codemirror/state": "^6.5.0",
+				"style-mod": "^4.1.0",
+				"w3c-keyname": "^2.2.4"
+			}
+		},
 		"node_modules/@es-joy/jsdoccomment": {
 			"version": "0.48.0",
 			"dev": true,
@@ -878,6 +967,36 @@
 			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz",
 			"integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
 		},
+		"node_modules/@fortawesome/fontawesome-common-types": {
+			"version": "6.7.1",
+			"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.1.tgz",
+			"integrity": "sha512-gbDz3TwRrIPT3i0cDfujhshnXO9z03IT1UKRIVi/VEjpNHtSBIP2o5XSm+e816FzzCFEzAxPw09Z13n20PaQJQ==",
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/free-regular-svg-icons": {
+			"version": "6.7.1",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.1.tgz",
+			"integrity": "sha512-e13cp+bAx716RZOTQ59DhqikAgETA9u1qTBHO3e3jMQQ+4H/N1NC1ZVeFYt1V0m+Th68BrEL1/X6XplISutbXg==",
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.7.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
+		"node_modules/@fortawesome/free-solid-svg-icons": {
+			"version": "6.7.1",
+			"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.1.tgz",
+			"integrity": "sha512-BTKc0b0mgjWZ2UDKVgmwaE0qt0cZs6ITcDgjrti5f/ki7aF5zs+N91V6hitGo3TItCFtnKg6cUVGdTmBFICFRg==",
+			"dependencies": {
+				"@fortawesome/fontawesome-common-types": "6.7.1"
+			},
+			"engines": {
+				"node": ">=6"
+			}
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.14",
 			"dev": true,
@@ -1096,6 +1215,36 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@jsep-plugin/assignment": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/@jsep-plugin/assignment/-/assignment-1.3.0.tgz",
+			"integrity": "sha512-VVgV+CXrhbMI3aSusQyclHkenWSAm95WaiKrMxRFam3JSUiIaQjoMIw2sEs/OX4XifnqeQUN4DYbJjlA8EfktQ==",
+			"engines": {
+				"node": ">= 10.16.0"
+			},
+			"peerDependencies": {
+				"jsep": "^0.4.0||^1.0.0"
+			}
+		},
+		"node_modules/@jsep-plugin/regex": {
+			"version": "1.0.4",
+			"resolved": "https://registry.npmjs.org/@jsep-plugin/regex/-/regex-1.0.4.tgz",
+			"integrity": "sha512-q7qL4Mgjs1vByCaTnDFcBnV9HS7GVPJX5vyVoCgZHNSC9rjwIlmbXG5sUuorR5ndfHAIlJ8pVStxvjXHbNvtUg==",
+			"engines": {
+				"node": ">= 10.16.0"
+			},
+			"peerDependencies": {
+				"jsep": "^0.4.0||^1.0.0"
+			}
+		},
+		"node_modules/@jsonquerylang/jsonquery": {
+			"version": "4.1.1",
+			"resolved": "https://registry.npmjs.org/@jsonquerylang/jsonquery/-/jsonquery-4.1.1.tgz",
+			"integrity": "sha512-Rfyvq70Zrb561BqSuXLsl0rG0/1tz913EQDL/4zpkp+laFGUxXIVPSaJWcdREJwADXLZDkQyaWplzEaPQvh+7A==",
+			"bin": {
+				"jsonquery": "bin/cli.js"
+			}
+		},
 		"node_modules/@kwsites/file-exists": {
 			"version": "1.1.1",
 			"dev": true,
@@ -1109,6 +1258,37 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@lezer/common": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.2.3.tgz",
+			"integrity": "sha512-w7ojc8ejBqr2REPsWxJjrMFsA/ysDCFICn8zEOR9mrqzOu2amhITYuLD8ag6XZf0CFXDrhKqw7+tW8cX66NaDA=="
+		},
+		"node_modules/@lezer/highlight": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.1.tgz",
+			"integrity": "sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==",
+			"dependencies": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/json": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz",
+			"integrity": "sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==",
+			"dependencies": {
+				"@lezer/common": "^1.2.0",
+				"@lezer/highlight": "^1.0.0",
+				"@lezer/lr": "^1.0.0"
+			}
+		},
+		"node_modules/@lezer/lr": {
+			"version": "1.4.2",
+			"resolved": "https://registry.npmjs.org/@lezer/lr/-/lr-1.4.2.tgz",
+			"integrity": "sha512-pu0K1jCIdnQ12aWNaAVU5bzi7Bd1w54J3ECgANPmYLtQKP0HBj2cE/5coBD66MT10xbtIuUr7tg0Shbsvk0mDA==",
+			"dependencies": {
+				"@lezer/common": "^1.0.0"
+			}
+		},
 		"node_modules/@mapbox/node-pre-gyp": {
 			"version": "1.0.11",
 			"dev": true,
@@ -1151,6 +1331,11 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/@marijn/find-cluster-break": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@marijn/find-cluster-break/-/find-cluster-break-1.0.2.tgz",
+			"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
+		},
 		"node_modules/@netlify/functions": {
 			"version": "2.8.1",
 			"dev": true,
@@ -2493,6 +2678,16 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/@replit/codemirror-indentation-markers": {
+			"version": "6.5.3",
+			"resolved": "https://registry.npmjs.org/@replit/codemirror-indentation-markers/-/codemirror-indentation-markers-6.5.3.tgz",
+			"integrity": "sha512-hL5Sfvw3C1vgg7GolLe/uxX5T3tmgOA3ZzqlMv47zjU1ON51pzNWiVbS22oh6crYhtVhv8b3gdXwoYp++2ilHw==",
+			"peerDependencies": {
+				"@codemirror/language": "^6.0.0",
+				"@codemirror/state": "^6.0.0",
+				"@codemirror/view": "^6.0.0"
+			}
+		},
 		"node_modules/@rollup/plugin-alias": {
 			"version": "5.1.0",
 			"dev": true,
@@ -2912,6 +3107,11 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/@sphinxxxx/color-conversion": {
+			"version": "2.2.2",
+			"resolved": "https://registry.npmjs.org/@sphinxxxx/color-conversion/-/color-conversion-2.2.2.tgz",
+			"integrity": "sha512-XExJS3cLqgrmNBIP3bBw6+1oQ1ksGjFh0+oClDKFYpCCqx/hlqwWO5KO/S63fzUo67SxI9dMrF0y5T/Ey7h8Zw=="
+		},
 		"node_modules/@stylistic/eslint-plugin": {
 			"version": "2.6.4",
 			"dev": true,
@@ -4284,6 +4484,14 @@
 				"acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
 			}
 		},
+		"node_modules/acorn-typescript": {
+			"version": "1.4.13",
+			"resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz",
+			"integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==",
+			"peerDependencies": {
+				"acorn": ">=8.9.0"
+			}
+		},
 		"node_modules/acorn-walk": {
 			"version": "8.3.3",
 			"dev": true,
@@ -4540,6 +4748,14 @@
 			"dev": true,
 			"license": "Python-2.0"
 		},
+		"node_modules/aria-query": {
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
+			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/array-buffer-byte-length": {
 			"version": "1.0.1",
 			"dev": true,
@@ -4748,6 +4964,14 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/axobject-query": {
+			"version": "4.1.0",
+			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
+			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
+			"engines": {
+				"node": ">= 0.4"
+			}
+		},
 		"node_modules/b4a": {
 			"version": "1.6.6",
 			"dev": true,
@@ -5264,6 +5488,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/codemirror-wrapped-line-indent": {
+			"version": "1.0.8",
+			"resolved": "https://registry.npmjs.org/codemirror-wrapped-line-indent/-/codemirror-wrapped-line-indent-1.0.8.tgz",
+			"integrity": "sha512-5UwuHCz4oAZuvot1DbfFxSxJacTESdNGa/KpJD7HfpVpDAJdgB1vV9OG4b4pkJqPWuOfIpFLTQEKS85kTpV+XA==",
+			"peerDependencies": {
+				"@codemirror/language": "^6.9.0",
+				"@codemirror/state": "^6.2.1",
+				"@codemirror/view": "^6.17.1"
+			}
+		},
 		"node_modules/color-convert": {
 			"version": "2.0.1",
 			"dev": true,
@@ -5447,6 +5681,11 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/crelt": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+			"integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g=="
+		},
 		"node_modules/croner": {
 			"version": "8.1.1",
 			"dev": true,
@@ -5934,7 +6173,6 @@
 		},
 		"node_modules/diff-sequences": {
 			"version": "29.6.3",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
@@ -7207,6 +7445,11 @@
 				"node": "*"
 			}
 		},
+		"node_modules/esm-env": {
+			"version": "1.2.1",
+			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.1.tgz",
+			"integrity": "sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng=="
+		},
 		"node_modules/espree": {
 			"version": "9.6.1",
 			"dev": true,
@@ -7234,6 +7477,15 @@
 				"node": ">=0.10"
 			}
 		},
+		"node_modules/esrap": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.3.tgz",
+			"integrity": "sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==",
+			"dependencies": {
+				"@jridgewell/sourcemap-codec": "^1.4.15",
+				"@types/estree": "^1.0.1"
+			}
+		},
 		"node_modules/esrecurse": {
 			"version": "4.3.0",
 			"dev": true,
@@ -7348,7 +7600,6 @@
 		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/fast-diff": {
@@ -7393,6 +7644,11 @@
 				"url": "https://github.com/sponsors/antfu"
 			}
 		},
+		"node_modules/fast-uri": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.3.tgz",
+			"integrity": "sha512-aLrHthzCjH5He4Z2H9YZ+v6Ujb9ocRuW6ZzkJQOrTxleEijANq4v1TsaPaVG1PZcuurEzrLcWRyYBYXD5cEiaw=="
+		},
 		"node_modules/fastq": {
 			"version": "1.17.1",
 			"license": "ISC",
@@ -8126,6 +8382,11 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/immutable-json-patch": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/immutable-json-patch/-/immutable-json-patch-6.0.1.tgz",
+			"integrity": "sha512-BHL/cXMjwFZlTOffiWNdY8ZTvNyYLrutCnWxrcKPHr5FqpAb6vsO6WWSPnVSys3+DruFN6lhHJJPHi8uELQL5g=="
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"dev": true,
@@ -8713,6 +8974,14 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/jmespath": {
+			"version": "0.16.0",
+			"resolved": "https://registry.npmjs.org/jmespath/-/jmespath-0.16.0.tgz",
+			"integrity": "sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==",
+			"engines": {
+				"node": ">= 0.6.0"
+			}
+		},
 		"node_modules/js-beautify": {
 			"version": "1.15.1",
 			"dev": true,
@@ -8839,6 +9108,14 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/jsep": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/jsep/-/jsep-1.4.0.tgz",
+			"integrity": "sha512-B7qPcEVE3NVkmSJbaYxvv4cHkVW7DQsZz13pUMrfS8z8Q/BuShN+gcTXrUlPiGqM2/t/EEaI030bpxMqY8gMlw==",
+			"engines": {
+				"node": ">= 10.16.0"
+			}
+		},
 		"node_modules/jsesc": {
 			"version": "2.5.2",
 			"license": "MIT",
@@ -8854,11 +9131,60 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/json-editor-vue": {
+			"version": "0.17.3",
+			"resolved": "https://registry.npmjs.org/json-editor-vue/-/json-editor-vue-0.17.3.tgz",
+			"integrity": "sha512-MVpD3TInIlruq9ye/J3XmYHTH+pqfyW0E1GVUV2ug5M0X/19zGslJ+FgeikDflvTVUxhVuCEnc9spMYmPj5Lyw==",
+			"hasInstallScript": true,
+			"dependencies": {
+				"vanilla-jsoneditor": "^2.0.0",
+				"vue-demi": "^0.14.10"
+			},
+			"peerDependencies": {
+				"@vue/composition-api": ">=1",
+				"vue": "2||3"
+			},
+			"peerDependenciesMeta": {
+				"@vue/composition-api": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/json-editor-vue/node_modules/vue-demi": {
+			"version": "0.14.10",
+			"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+			"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+			"hasInstallScript": true,
+			"bin": {
+				"vue-demi-fix": "bin/vue-demi-fix.js",
+				"vue-demi-switch": "bin/vue-demi-switch.js"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@vue/composition-api": "^1.0.0-rc.1",
+				"vue": "^3.0.0-0 || ^2.6.0"
+			},
+			"peerDependenciesMeta": {
+				"@vue/composition-api": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/json-schema-traverse": {
 			"version": "0.4.1",
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/json-source-map": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/json-source-map/-/json-source-map-0.6.1.tgz",
+			"integrity": "sha512-1QoztHPsMQqhDq0hlXY5ZqcEdUzxQEIxgFkKl4WUp2pgShObl+9ovi4kRh2TfvAfxAoHOJ9vIMEqk3k4iex7tg=="
+		},
 		"node_modules/json-stable-stringify-without-jsonify": {
 			"version": "1.0.1",
 			"dev": true,
@@ -8885,6 +9211,31 @@
 				"graceful-fs": "^4.1.6"
 			}
 		},
+		"node_modules/jsonpath-plus": {
+			"version": "10.2.0",
+			"resolved": "https://registry.npmjs.org/jsonpath-plus/-/jsonpath-plus-10.2.0.tgz",
+			"integrity": "sha512-T9V+8iNYKFL2n2rF+w02LBOT2JjDnTjioaNFrxRy0Bv1y/hNsqR/EBK7Ojy2ythRHwmz2cRIls+9JitQGZC/sw==",
+			"dependencies": {
+				"@jsep-plugin/assignment": "^1.3.0",
+				"@jsep-plugin/regex": "^1.0.4",
+				"jsep": "^1.4.0"
+			},
+			"bin": {
+				"jsonpath": "bin/jsonpath-cli.js",
+				"jsonpath-plus": "bin/jsonpath-cli.js"
+			},
+			"engines": {
+				"node": ">=18.0.0"
+			}
+		},
+		"node_modules/jsonrepair": {
+			"version": "3.11.1",
+			"resolved": "https://registry.npmjs.org/jsonrepair/-/jsonrepair-3.11.1.tgz",
+			"integrity": "sha512-9jej0NdRnXXv/n6oYxKbNhrKyPXM6SOrWEmNEpl5S+JpqzrmkxcX7gJCA+GMkgJiWd8KtH6G60+0gIlhZ4dMKQ==",
+			"bin": {
+				"jsonrepair": "bin/cli.js"
+			}
+		},
 		"node_modules/keyv": {
 			"version": "4.5.4",
 			"dev": true,
@@ -9049,6 +9400,11 @@
 				"url": "https://github.com/sponsors/antfu"
 			}
 		},
+		"node_modules/locate-character": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
+			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
+		},
 		"node_modules/locate-path": {
 			"version": "6.0.0",
 			"dev": true,
@@ -9067,6 +9423,11 @@
 			"version": "4.17.21",
 			"license": "MIT"
 		},
+		"node_modules/lodash-es": {
+			"version": "4.17.21",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+			"integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
+		},
 		"node_modules/lodash.clonedeep": {
 			"version": "4.5.0",
 			"resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -9184,6 +9545,11 @@
 			"dev": true,
 			"license": "CC0-1.0"
 		},
+		"node_modules/memoize-one": {
+			"version": "6.0.0",
+			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+			"integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw=="
+		},
 		"node_modules/merge-stream": {
 			"version": "2.0.0",
 			"license": "MIT"
@@ -9388,6 +9754,11 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/natural-compare-lite": {
+			"version": "1.4.0",
+			"resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+			"integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
+		},
 		"node_modules/neo-async": {
 			"version": "2.6.2",
 			"dev": true,
@@ -11503,7 +11874,6 @@
 		},
 		"node_modules/require-from-string": {
 			"version": "2.0.2",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
@@ -12369,6 +12739,11 @@
 			"version": "9.0.0",
 			"license": "MIT"
 		},
+		"node_modules/style-mod": {
+			"version": "4.1.2",
+			"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
+			"integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
+		},
 		"node_modules/stylehacks": {
 			"version": "7.0.3",
 			"dev": true,
@@ -12417,6 +12792,42 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/svelte": {
+			"version": "5.11.2",
+			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.11.2.tgz",
+			"integrity": "sha512-kGWswlBaohYxZHML9jp8ZYXkwjKd+WTpyAK1CCDmNzsefZHQjvsa7kbrKUckcFloNmdzwQwaZq+NyunuNOE6lw==",
+			"dependencies": {
+				"@ampproject/remapping": "^2.3.0",
+				"@jridgewell/sourcemap-codec": "^1.5.0",
+				"@types/estree": "^1.0.5",
+				"acorn": "^8.12.1",
+				"acorn-typescript": "^1.4.13",
+				"aria-query": "^5.3.1",
+				"axobject-query": "^4.1.0",
+				"esm-env": "^1.2.1",
+				"esrap": "^1.2.3",
+				"is-reference": "^3.0.3",
+				"locate-character": "^3.0.0",
+				"magic-string": "^0.30.11",
+				"zimmerframe": "^1.1.2"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
+		"node_modules/svelte/node_modules/@types/estree": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
+			"integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw=="
+		},
+		"node_modules/svelte/node_modules/is-reference": {
+			"version": "3.0.3",
+			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
+			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+			"dependencies": {
+				"@types/estree": "^1.0.6"
+			}
+		},
 		"node_modules/svg-tags": {
 			"version": "1.0.0",
 			"dev": true
@@ -13193,6 +13604,67 @@
 				"spdx-expression-parse": "^3.0.0"
 			}
 		},
+		"node_modules/vanilla-jsoneditor": {
+			"version": "2.3.3",
+			"resolved": "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-2.3.3.tgz",
+			"integrity": "sha512-QWhv0Ga11fegT00mdZboGJYbPgvjXh7rvbnIJW3BGsiSEIl/I2j18UdRI0iOLmV5C2iOMsBvpx+zelB8RhVGkA==",
+			"dependencies": {
+				"@codemirror/autocomplete": "^6.18.1",
+				"@codemirror/commands": "^6.7.1",
+				"@codemirror/lang-json": "^6.0.1",
+				"@codemirror/language": "^6.10.3",
+				"@codemirror/lint": "^6.8.2",
+				"@codemirror/search": "^6.5.6",
+				"@codemirror/state": "^6.4.1",
+				"@codemirror/view": "^6.34.1",
+				"@fortawesome/free-regular-svg-icons": "^6.6.0",
+				"@fortawesome/free-solid-svg-icons": "^6.6.0",
+				"@jsonquerylang/jsonquery": "^3.1.1 || ^4.0.0",
+				"@lezer/highlight": "^1.2.1",
+				"@replit/codemirror-indentation-markers": "^6.5.3",
+				"ajv": "^8.17.1",
+				"codemirror-wrapped-line-indent": "^1.0.8",
+				"diff-sequences": "^29.6.3",
+				"immutable-json-patch": "^6.0.1",
+				"jmespath": "^0.16.0",
+				"json-source-map": "^0.6.1",
+				"jsonpath-plus": "^9.0.0 || ^10.2.0",
+				"jsonrepair": "^3.0.0",
+				"lodash-es": "^4.17.21",
+				"memoize-one": "^6.0.0",
+				"natural-compare-lite": "^1.4.0",
+				"svelte": "^3.54.0 || ^4.0.0 || ^5.0.0",
+				"vanilla-picker": "^2.12.3"
+			}
+		},
+		"node_modules/vanilla-jsoneditor/node_modules/ajv": {
+			"version": "8.17.1",
+			"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+			"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+			"dependencies": {
+				"fast-deep-equal": "^3.1.3",
+				"fast-uri": "^3.0.1",
+				"json-schema-traverse": "^1.0.0",
+				"require-from-string": "^2.0.2"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/epoberezkin"
+			}
+		},
+		"node_modules/vanilla-jsoneditor/node_modules/json-schema-traverse": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+			"integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+		},
+		"node_modules/vanilla-picker": {
+			"version": "2.12.3",
+			"resolved": "https://registry.npmjs.org/vanilla-picker/-/vanilla-picker-2.12.3.tgz",
+			"integrity": "sha512-qVkT1E7yMbUsB2mmJNFmaXMWE2hF8ffqzMMwe9zdAikd8u2VfnsVY2HQcOUi2F38bgbxzlJBEdS1UUhOXdF9GQ==",
+			"dependencies": {
+				"@sphinxxxx/color-conversion": "^2.2.2"
+			}
+		},
 		"node_modules/vite": {
 			"version": "5.4.2",
 			"dev": true,
@@ -13907,6 +14379,11 @@
 				"vue": "^3.2.0"
 			}
 		},
+		"node_modules/w3c-keyname": {
+			"version": "2.2.8",
+			"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+			"integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+		},
 		"node_modules/watchpack": {
 			"version": "2.4.1",
 			"dev": true,
@@ -14249,6 +14726,11 @@
 				"url": "https://github.com/sponsors/harlan-zw"
 			}
 		},
+		"node_modules/zimmerframe": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
+			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
+		},
 		"node_modules/zip-stream": {
 			"version": "6.0.1",
 			"dev": true,
diff --git a/src/ui/ManagementPortal/package.json b/src/ui/ManagementPortal/package.json
index c64746853c..2818c316f6 100644
--- a/src/ui/ManagementPortal/package.json
+++ b/src/ui/ManagementPortal/package.json
@@ -40,6 +40,7 @@
 		"@vue-js-cron/light": "^4.0.5",
 		"@vueup/vue-quill": "^1.2.0",
 		"floating-vue": "^2.0.0",
+		"json-editor-vue": "^0.17.3",
 		"lodash": "^4.17.21",
 		"md5": "^2.3.0",
 		"pinia": "^2.2.2",

From d892d4233a9e1ddb6e8ea858cbc72f1c017e7ec8 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 05:38:00 -0800
Subject: [PATCH 20/31] Create initial JSONEditorDialog component

---
 .../components/JSONEditorDialog.vue           | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/ui/ManagementPortal/components/JSONEditorDialog.vue

diff --git a/src/ui/ManagementPortal/components/JSONEditorDialog.vue b/src/ui/ManagementPortal/components/JSONEditorDialog.vue
new file mode 100644
index 0000000000..7a7214596e
--- /dev/null
+++ b/src/ui/ManagementPortal/components/JSONEditorDialog.vue
@@ -0,0 +1,72 @@
+<template>
+	<Dialog
+		:visible="visible"
+		modal
+		header="Edit JSON"
+		:style="{ minWidth: '50%' }"
+		:closable="false"
+	>
+		<JsonEditorVue v-model="json" />
+
+		<template #footer>
+			<!-- Cancel -->
+			<Button
+				class="sidebar-dialog__button"
+				label="Close"
+				text
+				@click="$emit('update:visible', false)"
+			/>
+		</template>
+	</Dialog>
+</template>
+
+<script>
+import JsonEditorVue from 'json-editor-vue';
+
+export default {
+	components: {
+		JsonEditorVue,
+	},
+
+	props: {
+		modelValue: {
+			type: [Object, String],
+			required: true,
+		},
+
+		visible: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			json: {},
+		};
+	},
+
+	watch: {
+		modelValue: {
+			immediate: true,
+			deep: true,
+			handler() {
+				if (JSON.stringify(this.modelValue) === JSON.stringify(this.json)) return;
+				this.json = this.modelValue;
+			},
+		},
+
+		json: {
+			deep: true,
+			handler() {
+				if (JSON.stringify(this.modelValue) === JSON.stringify(this.json)) return;
+				this.modelValue = this.json;
+			},
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+	
+</style>

From 6f16c50526e5d1c78a2a4da630201d8537fd4700 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Wed, 11 Dec 2024 08:20:14 -0800
Subject: [PATCH 21/31] Add more utility classes

---
 src/ui/ManagementPortal/app.vue | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
index 209684e701..f67bce4f89 100644
--- a/src/ui/ManagementPortal/app.vue
+++ b/src/ui/ManagementPortal/app.vue
@@ -100,6 +100,10 @@ body,
 	margin-left: 4px !important;
 }
 
+.ml-2 {
+	margin-left: 8px !important;
+}
+
 .mr-1 {
 	margin-right: 4px !important;
 }
@@ -124,6 +128,14 @@ body,
 	margin-bottom: 16px !important;
 }
 
+.mb-5 {
+	margin-bottom: 20px !important;
+}
+
+.mb-6 {
+	margin-bottom: 24px !important;
+}
+
 .w-100 {
 	width: 100%;
 }

From 397eacdb846fc63c0a4139c3a1f1892ae13169a9 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 05:40:54 -0800
Subject: [PATCH 22/31] Add more utility classes

---
 src/ui/ManagementPortal/app.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
index f67bce4f89..f0b811ef69 100644
--- a/src/ui/ManagementPortal/app.vue
+++ b/src/ui/ManagementPortal/app.vue
@@ -164,6 +164,10 @@ body,
 	justify-content: end;
 }
 
+.justify-content-between {
+	justify-content: space-between;
+}
+
 .justify-self-end {
 	justify-self: end;
 }

From 5d405f77ec822e154dd0757f85b3ba1fb420310c Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 05:47:12 -0800
Subject: [PATCH 23/31] Add more utility classes

---
 src/ui/ManagementPortal/app.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
index f0b811ef69..98e910ac5a 100644
--- a/src/ui/ManagementPortal/app.vue
+++ b/src/ui/ManagementPortal/app.vue
@@ -124,6 +124,10 @@ body,
 	margin-bottom: 8px !important;
 }
 
+.mb-3 {
+	margin-bottom: 12px !important;
+}
+
 .mb-4 {
 	margin-bottom: 16px !important;
 }
@@ -148,6 +152,10 @@ body,
 	display: flex;
 }
 
+.flex-1 {
+	flex: 1;
+}
+
 .flex-column {
 	flex-direction: column;
 }

From 0d2b382a13e31ca16d9b93de2208f82d14dbd600 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 05:47:17 -0800
Subject: [PATCH 24/31] Styling adjustments

---
 src/ui/ManagementPortal/components/PropertyBuilder.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/ManagementPortal/components/PropertyBuilder.vue b/src/ui/ManagementPortal/components/PropertyBuilder.vue
index fcec5b2b52..f4e40c8038 100644
--- a/src/ui/ManagementPortal/components/PropertyBuilder.vue
+++ b/src/ui/ManagementPortal/components/PropertyBuilder.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="span-2 d-flex flex-column" style="gap: 16px">
+	<div class="d-flex flex-column" style="gap: 16px">
 		<div v-for="(propertyValue, propertyKey) in properties" :key="propertyKey" class="d-flex justify-content-between" style="gap: 16px">
 
 			<div class="d-flex flex-1" style="gap: 16px">
@@ -29,7 +29,7 @@
 		</div>
 	</div>
 
-	<div class="span-2 d-flex mt-4" style="gap: 16px">
+	<div class="d-flex mt-4" style="gap: 16px">
 		<div class="d-flex flex-1" style="gap: 16px">
 			<!-- Property name -->
 			<InputText

From a6c71999cf292362c1d3fe9ee34378eacd7a1ac5 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 06:10:19 -0800
Subject: [PATCH 25/31] Clean up JSONEditorDialog

---
 .../components/JSONEditorDialog.vue           | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/ui/ManagementPortal/components/JSONEditorDialog.vue b/src/ui/ManagementPortal/components/JSONEditorDialog.vue
index 7a7214596e..19afe70f19 100644
--- a/src/ui/ManagementPortal/components/JSONEditorDialog.vue
+++ b/src/ui/ManagementPortal/components/JSONEditorDialog.vue
@@ -9,12 +9,19 @@
 		<JsonEditorVue v-model="json" />
 
 		<template #footer>
+			<!-- Save -->
+			<Button
+				severity="primary"
+				label="Save"
+				@click="handleSave"
+			/>
+
 			<!-- Cancel -->
 			<Button
-				class="sidebar-dialog__button"
+				class="ml-2"
 				label="Close"
 				text
-				@click="$emit('update:visible', false)"
+				@click="handleClose"
 			/>
 		</template>
 	</Dialog>
@@ -36,7 +43,7 @@ export default {
 
 		visible: {
 			type: Boolean,
-			required: true,
+			required: false,
 		},
 	},
 
@@ -55,13 +62,16 @@ export default {
 				this.json = this.modelValue;
 			},
 		},
+	},
 
-		json: {
-			deep: true,
-			handler() {
-				if (JSON.stringify(this.modelValue) === JSON.stringify(this.json)) return;
-				this.modelValue = this.json;
-			},
+	methods: {
+		handleSave() {
+			this.$emit('update:modelValue', this.json);
+			this.handleClose();
+		},
+
+		handleClose() {
+			this.$emit('update:visible', false);
 		},
 	},
 };

From d928d0a3509911f036b08ba3715f02dcdbeee130 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 06:10:48 -0800
Subject: [PATCH 26/31] Add ability to edit agent tools

---
 .../ManagementPortal/pages/agents/create.vue  | 38 +++++++++++++++++--
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index 9ce3843ee7..72357225a1 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -753,7 +753,7 @@
 
 				<!-- Workflow main model -->
 				<div class="mb-6">
-					<div class="step-header mb-2">Workflow main model:</div>
+					<div class="step-header mb-3">Workflow main model:</div>
 					<Dropdown
 						:modelValue="workflowMainAIModel?.object_id"
 						:options="aiModelOptions"
@@ -767,7 +767,7 @@
 				</div>
 
 				<!-- <div class="mb-6">
-					<div class="step-header mb-2">Workflow main prompt:</div>
+					<div class="step-header mb-3">Workflow main prompt:</div>
 					<Textarea
 						v-model="workflowMainPrompt"
 						class="w-100"
@@ -781,11 +781,40 @@
 
 				<!-- Workflow main model parameters -->
 				<div class="mb-6">
-					<div class="step-header mb-2">Workflow main model parameters:</div>
+					<div class="step-header mb-3">Workflow main model parameters:</div>
 					<PropertyBuilder v-model="workflowMainAIModelParameters" />
 				</div>
 			</div>
 
+			<!-- Tools -->
+			<template v-if="agentTools.length > 0">
+				<div class="step-section-header span-2">Tools</div>
+				<div id="aria-orchestrator" class="step-header span-2">
+					What tools should the agent use?
+				</div>
+
+				<div class="span-2">
+					<div v-for="(tool, index) in agentTools" class="d-flex justify-content-between mb-2" :key="index">
+						<div>{{ tool.name }}</div>
+
+						<Button
+							class="ml-2"
+							severity="primary"
+							label="Configure Tool"
+							@click="selectedTool = tool"
+						/>
+
+						<JSONEditorDialog
+							v-if="selectedTool?.name === tool.name"
+							v-model="selectedTool"
+							:visible="!!selectedTool"
+							@update:visible="selectedTool = null"
+							@update:modelValue="agentTools[index] = selectedTool"
+						/>
+					</div>
+				</div>
+			</template>
+
 			<!-- Security -->
 			<div v-if="virtualSecurityGroupId" class="step-section-header span-2">Security</div>
 
@@ -920,6 +949,9 @@ const getDefaultFormValues = () => {
 		},
 
 		selectedWorkflow: null,
+
+		selectedTool: null,
+		agentTools: [] as AgentTool[],
 	};
 };
 

From 44b6933fc2cf1a262690ed76472937da96b9d1aa Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 06:16:06 -0800
Subject: [PATCH 27/31] Lint fix

---
 .../components/AgentAccessTokens.vue          | 858 +++++++++---------
 .../components/CreateAgentStepItem.vue        |   9 +-
 .../components/CustomQuillEditor.vue          |  34 +-
 .../components/JSONEditorDialog.vue           | 153 ++--
 .../components/PropertyBuilder.vue            | 241 +++--
 .../components/RoleAssignmentsTable.vue       |   2 +-
 .../ManagementPortal/components/Sidebar.vue   |  13 +-
 src/ui/ManagementPortal/js/api.ts             |   9 +-
 src/ui/ManagementPortal/js/types.ts           |  32 +-
 src/ui/ManagementPortal/layouts/default.vue   |   4 +-
 .../ManagementPortal/pages/agents/create.vue  |  62 +-
 .../ManagementPortal/pages/agents/private.vue |  22 +-
 .../ManagementPortal/pages/agents/public.vue  |  22 +-
 src/ui/ManagementPortal/pages/auth/index.vue  |  10 +-
 src/ui/ManagementPortal/pages/branding.vue    |  16 +-
 .../pages/data-sources/index.vue              |  18 +-
 .../security/role-assignments/create.vue      |   2 +-
 .../pages/security/role-assignments/index.vue |   6 +-
 18 files changed, 785 insertions(+), 728 deletions(-)

diff --git a/src/ui/ManagementPortal/components/AgentAccessTokens.vue b/src/ui/ManagementPortal/components/AgentAccessTokens.vue
index c71379b74d..13c7b026b0 100644
--- a/src/ui/ManagementPortal/components/AgentAccessTokens.vue
+++ b/src/ui/ManagementPortal/components/AgentAccessTokens.vue
@@ -1,427 +1,431 @@
-<template>
-	<div>
-		<!-- Loading overlay -->
-		<template v-if="loadingAccessTokens">
-			<div class="d-flex flex-column justify-content-center align-center">
-				<LoadingGrid />
-				<div>Loading agent access tokens...</div>
-			</div>
-		</template>
-
-		<template v-else>
-			<!-- Access tokens table -->
-			<DataTable
-				:value="accessTokens"
-				striped-rows
-				scrollable
-				table-style="max-width: 100%"
-				size="small"
-			>
-				<template #empty>No access tokens found.</template>
-
-				<template #loading>Loading access tokens. Please wait.</template>
-
-				<!-- Description -->
-				<Column
-					field="description"
-					header="Description"
-					sortable
-					:pt="{
-						headerCell: {
-							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
-						},
-						sortIcon: { style: { color: 'var(--primary-text)' } },
-					}"
-				/>
-
-				<!-- Expiration date -->
-				<Column
-					field="expiration_date"
-					header="Expiration Date"
-					sortable
-					:pt="{
-						headerCell: {
-							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
-						},
-						sortIcon: { style: { color: 'var(--primary-text)' } },
-					}"
-				>
-					<template #body="{ data }">
-						{{ new Date(data.expiration_date) }}
-					</template>
-				</Column>
-
-				<!-- Delete -->
-				<Column
-					header="Delete"
-					header-style="width:6rem"
-					style="text-align: center"
-					:pt="{
-						headerCell: {
-							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
-						},
-						headerContent: { style: { justifyContent: 'center' } },
-					}"
-				>
-					<template #body="{ data }">
-						<Button link @click="accessTokenToDelete = data">
-							<i class="pi pi-trash" style="font-size: 1.2rem"></i>
-						</Button>
-					</template>
-				</Column>
-			</DataTable>
-
-			<div class="d-flex justify-content-end mt-4">
-				<Button
-					@click="createAccessTokenDialogOpen = true"
-				>
-					Create Access Token
-				</Button>
-			</div>
-		</template>
-
-		<!-- Create access token dialog -->
-		<Dialog
-			v-model:visible="createAccessTokenDialogOpen"
-			modal
-			:header="resourceKey ? 'View Access Token Details' :'Create Access Token'"
-			:style="{ minWidth: '70%' }"
-			@hide="handleCloseAccessTokenDialog"
-		>
-			<template v-if="resourceKey">
-				<div style="font-size: 1.1rem">
-					<div class="mb-2">Remember and store this key in a safe place.</div>
-					<div style="font-weight: bold; margin-bottom: 16px">It will never be shown again.</div>
-				</div>
-
-				<SecretKeyInput
-					v-model="resourceKey"
-					textarea
-					readonly
-					placeholder="Enter API key"
-					aria-labelledby="aria-api-key"
-				/>
-			</template>
-
-			<template v-else>
-				<template v-if="loadingCreateAccessToken">
-					<div class="steps__loading-overlay">
-						<LoadingGrid />
-						<div>Creating access token...</div>
-					</div>
-				</template>
-
-				<div v-else class="mb-4">
-					<div id="aria-description" class="mb-2">Token description:</div>
-					<div class="input-wrapper">
-						<InputText
-							v-model="accessToken.description"
-							placeholder="Enter a description for this access token"
-							type="text"
-							class="w-100"
-							aria-labelledby="aria-description"
-						/>
-					</div>
-				</div>
-
-				<div>
-					<div id="aria-description" class="mb-2">Token expiration date:</div>
-					<div class="input-wrapper">
-						<Calendar
-							v-model="accessToken.expiration_date"
-							show-icon
-							show-button-bar
-							placeholder="Enter expiration date"
-							type="text"
-						/>
-					</div>
-				</div>
-			</template>
-		
-			<template #footer>
-				<template v-if="resourceKey">
-					<!-- Close -->
-					<Button
-						class="sidebar-dialog__button"
-						label="Close"
-						text
-						:disabled="loadingCreateAccessToken"
-						@click="handleCloseAccessTokenDialog"
-					/>
-
-					<!-- Copy -->
-					<Button
-						label="Copy"
-						severity="primary"
-						:disabled="loadingCreateAccessToken"
-						@click="handleCopyResourceKey"
-					/>
-
-					<!-- Save -->
-					<Button
-						label="Save"
-						severity="primary"
-						:disabled="loadingCreateAccessToken"
-						@click="handleSaveResourceKey"
-					/>
-				</template>
-
-				<template v-else>
-					<!-- Cancel -->
-					<Button
-						class="sidebar-dialog__button"
-						label="Cancel"
-						text
-						:disabled="loadingDeleteAccessToken"
-						@click="handleCloseAccessTokenDialog"
-					/>
-
-					<!-- Create -->
-					<Button @click="handleCreateAccessToken">
-						<i class="pi pi-plus" style="color: var(--text-primary); margin-right: 8px"></i>
-						Create access token
-					</Button>
-				</template>
-
-			</template>
-		</Dialog>
-
-		<!-- Delete access token dialog -->
-		<Dialog
-			:visible="accessTokenToDelete !== null"
-			modal
-			header="Delete Access Token"
-			:style="{ minWidth: '50%' }"
-			:closable="false"
-		>
-			<div>Are you sure you want to delete the access token "{{ accessTokenToDelete.description }}"?</div>
-			<template #footer>
-				<!-- Cancel -->
-				<Button
-					class="sidebar-dialog__button"
-					label="Cancel"
-					text
-					:disabled="loadingDeleteAccessToken"
-					@click="accessTokenToDelete = null"
-				/>
-
-				<!-- Delete -->
-				<Button :disabled="loadingDeleteAccessToken" @click="handleDeleteAccessToken">
-					<i class="pi pi-trash" style="color: var(--text-primary); margin-right: 8px"></i>
-					Delete access token
-				</Button>
-			</template>
-		</Dialog>
-	</div>
-</template>
-
-<script lang="ts">
-import api from '@/js/api';
-import type {
-	AgentAccessToken,
-	ResourceProviderGetResult,
-	ResourceProviderUpsertResult
-} from '@/js/types';
-
-export default {
-	props: {
-		agentName: {
-			type: String,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			loadingAccessTokens: false,
-			accessTokens: [] as AgentAccessToken[],
-
-			accessToken: null as AgentAccessToken | null,
-			resourceKey: null as string | null,
-
-			loadingCreateAccessToken: false,
-			createAccessTokenDialogOpen: false,
-
-			loadingDeleteAccessToken: false,
-			accessTokenToDelete: null as AgentAccessToken | null,
-		};
-	},
-
-	async created() {
-		this.resetAccessToken();
-	},
-
-	watch: {
-		agentName: {
-			immediate: true,
-			deep: true,
-			async handler(newVal) {
-				if (newVal) {
-					await this.fetchAccessTokens();
-				}
-			},
-		},
-	},
-
-	methods: {
-		resetAccessToken() {
-			var newId = this.generateGuid();
-			this.accessToken = {
-				id: newId,
-				object_id: '',
-				type: '',
-				name: newId,
-				display_name: '',
-				description: '',
-				cost_center: '',
-				expiration_date: new Date(new Date().setDate(new Date().getDate() + 120)),
-				active: true,
-			};
-			this.resourceKey = null;
-		},
-
-		generateGuid() {
-			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-				const r = (Math.random() * 16) | 0,
-					v = c === 'x' ? r : (r & 0x3) | 0x8;
-				return v.toString(16);
-			});
-		},
-
-		async fetchAccessTokens() {
-			this.loadingAccessTokens = true;
-			const accessTokensResponse = await api.getAgentAccessTokens(this.agentName);
-			this.accessTokens = (accessTokensResponse as ResourceProviderGetResult<AgentAccessToken>[]).map((result: ResourceProviderGetResult<AgentAccessToken>) => result.resource);
-			this.loadingAccessTokens = false;
-		},
-
-		handleCloseAccessTokenDialog() {
-			this.createAccessTokenDialogOpen = false;
-			this.resetAccessToken();
-		},
-
-		handleCopyResourceKey() {
-			if (this.resourceKey !== null) {
-				navigator.clipboard.writeText(this.resourceKey);
-				this.$toast.add({
-					severity: 'success',
-					detail: 'Access token key copied to clipboard!',
-					life: 5000,
-				});
-			}
-			else {
-				this.$toast.add({
-					severity: 'error',
-					summary: 'Error',
-					detail: 'Failed to copy access token key. Please try again.',
-					life: 5000,
-				});
-			}
-		},
-
-		handleSaveResourceKey() {
-			if (this.resourceKey === null) {
-				return;
-			}
-			const link = document.createElement('a');
-			const file = new Blob([this.resourceKey], { type: 'text/plain' });
-			link.href = URL.createObjectURL(file);
-			link.download = `${this.agentName}-${this.accessToken?.description}-key.txt`.replace(/\s+/g, '-');
-			link.click();
-			URL.revokeObjectURL(link.href);
-		},
-
-		async handleDeleteAccessToken() {
-			this.loadingDeleteAccessToken = true;
-			try {
-				if (!this.accessTokenToDelete) {
-					this.$toast.add({
-						severity: 'error',
-						summary: 'Error',
-						detail: 'Failed to delete access token. Please try again.',
-						life: 5000,
-					});
-					return;
-				}
-
-				await api.deleteAgentAccessToken(this.agentName, this.accessTokenToDelete.name);
-
-				this.$toast.add({
-					severity: 'success',
-					summary: 'Success',
-					detail: 'Successfully deleted access token.',
-					life: 5000,
-				});
-
-				this.loadingDeleteAccessToken = false;
-				this.accessTokenToDelete = null;
-				await this.fetchAccessTokens();
-			} catch (error) {
-				this.$toast.add({
-					severity: 'error',
-					summary: 'Error',
-					detail: 'Failed to delete access token. Please try again.',
-					life: 5000,
-				});
-			}
-			this.loadingDeleteAccessToken = false;
-			this.accessTokenToDelete = null;
-		},
-
-		async handleCreateAccessToken() {
-			const errors = [];
-			if (!this.accessToken?.description) {
-				errors.push('Please give the access token a description.');
-			}
-
-			if (!this.accessToken?.expiration_date) {
-				errors.push('Please make sure the access token has an expiration date.');
-			}
-
-			if (errors.length > 0) {
-				this.$toast.add({
-					severity: 'error',
-					detail: errors.join('\n'),
-					life: 5000,
-				});
-
-				return;
-			}
-
-			this.loadingCreateAccessToken = true;
-			try {
-				if (!this.accessToken) {
-					this.$toast.add({
-						severity: 'error',
-						summary: 'Error',
-						detail: 'Failed to create access token. Please try again.',
-						life: 5000,
-					});
-					return;
-				}
-
-				const result = await api.createAgentAccessToken(this.agentName, this.accessToken) as ResourceProviderUpsertResult;
-				this.resourceKey = result.resource;
-
-				this.$toast.add({
-					severity: 'success',
-					summary: 'Success',
-					detail: 'Successfully created access token.',
-					life: 5000,
-				});
-
-				this.loadingCreateAccessToken = false;
-				await this.fetchAccessTokens();
-			} catch (error) {
-				this.$toast.add({
-					severity: 'error',
-					summary: 'Error',
-					detail: 'Failed to create access token. Please try again.',
-					life: 5000,
-				});
-			}
-			this.loadingCreateAccessToken = false;
-		},
-	},
-};
-</script>
+<template>
+	<div>
+		<!-- Loading overlay -->
+		<template v-if="loadingAccessTokens">
+			<div class="d-flex flex-column justify-content-center align-center">
+				<LoadingGrid />
+				<div>Loading agent access tokens...</div>
+			</div>
+		</template>
+
+		<template v-else>
+			<!-- Access tokens table -->
+			<DataTable
+				:value="accessTokens"
+				striped-rows
+				scrollable
+				table-style="max-width: 100%"
+				size="small"
+			>
+				<template #empty>No access tokens found.</template>
+
+				<template #loading>Loading access tokens. Please wait.</template>
+
+				<!-- Description -->
+				<Column
+					field="description"
+					header="Description"
+					sortable
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				/>
+
+				<!-- Expiration date -->
+				<Column
+					field="expiration_date"
+					header="Expiration Date"
+					sortable
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						sortIcon: { style: { color: 'var(--primary-text)' } },
+					}"
+				>
+					<template #body="{ data }">
+						{{ new Date(data.expiration_date) }}
+					</template>
+				</Column>
+
+				<!-- Delete -->
+				<Column
+					header="Delete"
+					header-style="width:6rem"
+					style="text-align: center"
+					:pt="{
+						headerCell: {
+							style: { backgroundColor: 'var(--primary-color)', color: 'var(--primary-text)' },
+						},
+						headerContent: { style: { justifyContent: 'center' } },
+					}"
+				>
+					<template #body="{ data }">
+						<Button link @click="accessTokenToDelete = data">
+							<i class="pi pi-trash" style="font-size: 1.2rem"></i>
+						</Button>
+					</template>
+				</Column>
+			</DataTable>
+
+			<div class="d-flex justify-content-end mt-4">
+				<Button @click="createAccessTokenDialogOpen = true"> Create Access Token </Button>
+			</div>
+		</template>
+
+		<!-- Create access token dialog -->
+		<Dialog
+			v-model:visible="createAccessTokenDialogOpen"
+			modal
+			:header="resourceKey ? 'View Access Token Details' : 'Create Access Token'"
+			:style="{ minWidth: '70%' }"
+			@hide="handleCloseAccessTokenDialog"
+		>
+			<template v-if="resourceKey">
+				<div style="font-size: 1.1rem">
+					<div class="mb-2">Remember and store this key in a safe place.</div>
+					<div style="font-weight: bold; margin-bottom: 16px">It will never be shown again.</div>
+				</div>
+
+				<SecretKeyInput
+					v-model="resourceKey"
+					textarea
+					readonly
+					placeholder="Enter API key"
+					aria-labelledby="aria-api-key"
+				/>
+			</template>
+
+			<template v-else>
+				<template v-if="loadingCreateAccessToken">
+					<div class="steps__loading-overlay">
+						<LoadingGrid />
+						<div>Creating access token...</div>
+					</div>
+				</template>
+
+				<div v-else class="mb-4">
+					<div id="aria-description" class="mb-2">Token description:</div>
+					<div class="input-wrapper">
+						<InputText
+							v-model="accessToken.description"
+							placeholder="Enter a description for this access token"
+							type="text"
+							class="w-100"
+							aria-labelledby="aria-description"
+						/>
+					</div>
+				</div>
+
+				<div>
+					<div id="aria-description" class="mb-2">Token expiration date:</div>
+					<div class="input-wrapper">
+						<Calendar
+							v-model="accessToken.expiration_date"
+							show-icon
+							show-button-bar
+							placeholder="Enter expiration date"
+							type="text"
+						/>
+					</div>
+				</div>
+			</template>
+
+			<template #footer>
+				<template v-if="resourceKey">
+					<!-- Close -->
+					<Button
+						class="sidebar-dialog__button"
+						label="Close"
+						text
+						:disabled="loadingCreateAccessToken"
+						@click="handleCloseAccessTokenDialog"
+					/>
+
+					<!-- Copy -->
+					<Button
+						label="Copy"
+						severity="primary"
+						:disabled="loadingCreateAccessToken"
+						@click="handleCopyResourceKey"
+					/>
+
+					<!-- Save -->
+					<Button
+						label="Save"
+						severity="primary"
+						:disabled="loadingCreateAccessToken"
+						@click="handleSaveResourceKey"
+					/>
+				</template>
+
+				<template v-else>
+					<!-- Cancel -->
+					<Button
+						class="sidebar-dialog__button"
+						label="Cancel"
+						text
+						:disabled="loadingDeleteAccessToken"
+						@click="handleCloseAccessTokenDialog"
+					/>
+
+					<!-- Create -->
+					<Button @click="handleCreateAccessToken">
+						<i class="pi pi-plus" style="color: var(--text-primary); margin-right: 8px"></i>
+						Create access token
+					</Button>
+				</template>
+			</template>
+		</Dialog>
+
+		<!-- Delete access token dialog -->
+		<Dialog
+			:visible="accessTokenToDelete !== null"
+			modal
+			header="Delete Access Token"
+			:style="{ minWidth: '50%' }"
+			:closable="false"
+		>
+			<div>
+				Are you sure you want to delete the access token "{{ accessTokenToDelete.description }}"?
+			</div>
+			<template #footer>
+				<!-- Cancel -->
+				<Button
+					class="sidebar-dialog__button"
+					label="Cancel"
+					text
+					:disabled="loadingDeleteAccessToken"
+					@click="accessTokenToDelete = null"
+				/>
+
+				<!-- Delete -->
+				<Button :disabled="loadingDeleteAccessToken" @click="handleDeleteAccessToken">
+					<i class="pi pi-trash" style="color: var(--text-primary); margin-right: 8px"></i>
+					Delete access token
+				</Button>
+			</template>
+		</Dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import api from '@/js/api';
+import type {
+	AgentAccessToken,
+	ResourceProviderGetResult,
+	ResourceProviderUpsertResult,
+} from '@/js/types';
+
+export default {
+	props: {
+		agentName: {
+			type: String,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			loadingAccessTokens: false,
+			accessTokens: [] as AgentAccessToken[],
+
+			accessToken: null as AgentAccessToken | null,
+			resourceKey: null as string | null,
+
+			loadingCreateAccessToken: false,
+			createAccessTokenDialogOpen: false,
+
+			loadingDeleteAccessToken: false,
+			accessTokenToDelete: null as AgentAccessToken | null,
+		};
+	},
+
+	async created() {
+		this.resetAccessToken();
+	},
+
+	watch: {
+		agentName: {
+			immediate: true,
+			deep: true,
+			async handler(newVal) {
+				if (newVal) {
+					await this.fetchAccessTokens();
+				}
+			},
+		},
+	},
+
+	methods: {
+		resetAccessToken() {
+			var newId = this.generateGuid();
+			this.accessToken = {
+				id: newId,
+				object_id: '',
+				type: '',
+				name: newId,
+				display_name: '',
+				description: '',
+				cost_center: '',
+				expiration_date: new Date(new Date().setDate(new Date().getDate() + 120)),
+				active: true,
+			};
+			this.resourceKey = null;
+		},
+
+		generateGuid() {
+			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+				const r = (Math.random() * 16) | 0,
+					v = c === 'x' ? r : (r & 0x3) | 0x8;
+				return v.toString(16);
+			});
+		},
+
+		async fetchAccessTokens() {
+			this.loadingAccessTokens = true;
+			const accessTokensResponse = await api.getAgentAccessTokens(this.agentName);
+			this.accessTokens = (
+				accessTokensResponse as ResourceProviderGetResult<AgentAccessToken>[]
+			).map((result: ResourceProviderGetResult<AgentAccessToken>) => result.resource);
+			this.loadingAccessTokens = false;
+		},
+
+		handleCloseAccessTokenDialog() {
+			this.createAccessTokenDialogOpen = false;
+			this.resetAccessToken();
+		},
+
+		handleCopyResourceKey() {
+			if (this.resourceKey !== null) {
+				navigator.clipboard.writeText(this.resourceKey);
+				this.$toast.add({
+					severity: 'success',
+					detail: 'Access token key copied to clipboard!',
+					life: 5000,
+				});
+			} else {
+				this.$toast.add({
+					severity: 'error',
+					summary: 'Error',
+					detail: 'Failed to copy access token key. Please try again.',
+					life: 5000,
+				});
+			}
+		},
+
+		handleSaveResourceKey() {
+			if (this.resourceKey === null) {
+				return;
+			}
+			const link = document.createElement('a');
+			const file = new Blob([this.resourceKey], { type: 'text/plain' });
+			link.href = URL.createObjectURL(file);
+			link.download = `${this.agentName}-${this.accessToken?.description}-key.txt`.replace(
+				/\s+/g,
+				'-',
+			);
+			link.click();
+			URL.revokeObjectURL(link.href);
+		},
+
+		async handleDeleteAccessToken() {
+			this.loadingDeleteAccessToken = true;
+			try {
+				if (!this.accessTokenToDelete) {
+					this.$toast.add({
+						severity: 'error',
+						summary: 'Error',
+						detail: 'Failed to delete access token. Please try again.',
+						life: 5000,
+					});
+					return;
+				}
+
+				await api.deleteAgentAccessToken(this.agentName, this.accessTokenToDelete.name);
+
+				this.$toast.add({
+					severity: 'success',
+					summary: 'Success',
+					detail: 'Successfully deleted access token.',
+					life: 5000,
+				});
+
+				this.loadingDeleteAccessToken = false;
+				this.accessTokenToDelete = null;
+				await this.fetchAccessTokens();
+			} catch (error) {
+				this.$toast.add({
+					severity: 'error',
+					summary: 'Error',
+					detail: 'Failed to delete access token. Please try again.',
+					life: 5000,
+				});
+			}
+			this.loadingDeleteAccessToken = false;
+			this.accessTokenToDelete = null;
+		},
+
+		async handleCreateAccessToken() {
+			const errors = [];
+			if (!this.accessToken?.description) {
+				errors.push('Please give the access token a description.');
+			}
+
+			if (!this.accessToken?.expiration_date) {
+				errors.push('Please make sure the access token has an expiration date.');
+			}
+
+			if (errors.length > 0) {
+				this.$toast.add({
+					severity: 'error',
+					detail: errors.join('\n'),
+					life: 5000,
+				});
+
+				return;
+			}
+
+			this.loadingCreateAccessToken = true;
+			try {
+				if (!this.accessToken) {
+					this.$toast.add({
+						severity: 'error',
+						summary: 'Error',
+						detail: 'Failed to create access token. Please try again.',
+						life: 5000,
+					});
+					return;
+				}
+
+				const result = (await api.createAgentAccessToken(
+					this.agentName,
+					this.accessToken,
+				)) as ResourceProviderUpsertResult;
+				this.resourceKey = result.resource;
+
+				this.$toast.add({
+					severity: 'success',
+					summary: 'Success',
+					detail: 'Successfully created access token.',
+					life: 5000,
+				});
+
+				this.loadingCreateAccessToken = false;
+				await this.fetchAccessTokens();
+			} catch (error) {
+				this.$toast.add({
+					severity: 'error',
+					summary: 'Error',
+					detail: 'Failed to create access token. Please try again.',
+					life: 5000,
+				});
+			}
+			this.loadingCreateAccessToken = false;
+		},
+	},
+};
+</script>
diff --git a/src/ui/ManagementPortal/components/CreateAgentStepItem.vue b/src/ui/ManagementPortal/components/CreateAgentStepItem.vue
index d323021415..72b6a99701 100644
--- a/src/ui/ManagementPortal/components/CreateAgentStepItem.vue
+++ b/src/ui/ManagementPortal/components/CreateAgentStepItem.vue
@@ -2,7 +2,7 @@
 	<div class="step">
 		<div class="step-container">
 			<!-- Editing view -->
-			<div 
+			<div
 				v-if="isOpen"
 				class="step-container__edit"
 				:id="'step-content-' + id"
@@ -13,7 +13,12 @@
 					<slot name="edit" />
 
 					<div class="d-flex justify-content-end">
-						<Button class="mt-2" label="Done" aria-label="Close step editing" @click="handleClose" />
+						<Button
+							class="mt-2"
+							label="Done"
+							aria-label="Close step editing"
+							@click="handleClose"
+						/>
 					</div>
 				</div>
 
diff --git a/src/ui/ManagementPortal/components/CustomQuillEditor.vue b/src/ui/ManagementPortal/components/CustomQuillEditor.vue
index 0f9964d2d2..45aeb5c1de 100644
--- a/src/ui/ManagementPortal/components/CustomQuillEditor.vue
+++ b/src/ui/ManagementPortal/components/CustomQuillEditor.vue
@@ -22,8 +22,18 @@
 					<button class="ql-strike" aria-label="Strike" title="Strike"></button>
 					<button class="ql-link" aria-label="Link" title="Link"></button>
 					<button class="ql-image" aria-label="Image" title="Image"></button>
-					<button class="ql-list" value="ordered" aria-label="Ordered List" title="Ordered List"></button>
-					<button class="ql-list" value="bullet" aria-label="Unordered List" title="Unordered List"></button>
+					<button
+						class="ql-list"
+						value="ordered"
+						aria-label="Ordered List"
+						title="Ordered List"
+					></button>
+					<button
+						class="ql-list"
+						value="bullet"
+						aria-label="Unordered List"
+						title="Unordered List"
+					></button>
 					<button class="ql-clean" aria-label="Remove Styles" title="Remove Styles"></button>
 					<button
 						:class="`quill-view-html view-html-${randomNumber}`"
@@ -101,11 +111,11 @@ import CodeEditor from 'simple-code-editor';
 import { v4 as uuidv4 } from 'uuid';
 
 function getFocusableElements(container) {
-    return Array.from(
-        container.querySelectorAll(
-            'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
-        )
-    ).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
+	return Array.from(
+		container.querySelectorAll(
+			'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
+		),
+	).filter((el) => !el.hasAttribute('disabled') && el.offsetParent !== null);
 }
 
 export default {
@@ -202,13 +212,15 @@ export default {
 				// event.preventDefault(); // Prevent Quill's default Tab handling
 				const focusableElements = getFocusableElements(document);
 				// console.log(focusableElements);
-				const currentIndex = focusableElements.indexOf(focusableElements.find((el) => el.classList.contains(`view-html-${this.randomNumber}`)));
+				const currentIndex = focusableElements.indexOf(
+					focusableElements.find((el) => el.classList.contains(`view-html-${this.randomNumber}`)),
+				);
 				// console.log(currentIndex);
 				const nextIndex = event.shiftKey ? currentIndex - 1 : currentIndex + 1;
 				// console.log(nextIndex);
 				this.$emit('content-update', this.oldContent);
 				// focusableElements[nextIndex]?.focus();
-				
+
 				// this.$nextTick(() => {
 				// 	this.content = this.oldContent;
 				setTimeout(() => {
@@ -245,8 +257,8 @@ export default {
 		// 			const nextIndex = context.shiftKey ? currentIndex - 1 : currentIndex + 1;
 
 		// 			if (focusableElements[nextIndex]) {
-        //                 focusableElements[nextIndex].focus();
-        //             }
+		//                 focusableElements[nextIndex].focus();
+		//             }
 		// 		}
 		// 	);
 		// },
diff --git a/src/ui/ManagementPortal/components/JSONEditorDialog.vue b/src/ui/ManagementPortal/components/JSONEditorDialog.vue
index 19afe70f19..77656b60d6 100644
--- a/src/ui/ManagementPortal/components/JSONEditorDialog.vue
+++ b/src/ui/ManagementPortal/components/JSONEditorDialog.vue
@@ -1,82 +1,71 @@
-<template>
-	<Dialog
-		:visible="visible"
-		modal
-		header="Edit JSON"
-		:style="{ minWidth: '50%' }"
-		:closable="false"
-	>
-		<JsonEditorVue v-model="json" />
-
-		<template #footer>
-			<!-- Save -->
-			<Button
-				severity="primary"
-				label="Save"
-				@click="handleSave"
-			/>
-
-			<!-- Cancel -->
-			<Button
-				class="ml-2"
-				label="Close"
-				text
-				@click="handleClose"
-			/>
-		</template>
-	</Dialog>
-</template>
-
-<script>
-import JsonEditorVue from 'json-editor-vue';
-
-export default {
-	components: {
-		JsonEditorVue,
-	},
-
-	props: {
-		modelValue: {
-			type: [Object, String],
-			required: true,
-		},
-
-		visible: {
-			type: Boolean,
-			required: false,
-		},
-	},
-
-	data() {
-		return {
-			json: {},
-		};
-	},
-
-	watch: {
-		modelValue: {
-			immediate: true,
-			deep: true,
-			handler() {
-				if (JSON.stringify(this.modelValue) === JSON.stringify(this.json)) return;
-				this.json = this.modelValue;
-			},
-		},
-	},
-
-	methods: {
-		handleSave() {
-			this.$emit('update:modelValue', this.json);
-			this.handleClose();
-		},
-
-		handleClose() {
-			this.$emit('update:visible', false);
-		},
-	},
-};
-</script>
-
-<style lang="scss" scoped>
-	
-</style>
+<template>
+	<Dialog
+		:visible="visible"
+		modal
+		header="Edit JSON"
+		:style="{ minWidth: '50%' }"
+		:closable="false"
+	>
+		<JsonEditorVue v-model="json" />
+
+		<template #footer>
+			<!-- Save -->
+			<Button severity="primary" label="Save" @click="handleSave" />
+
+			<!-- Cancel -->
+			<Button class="ml-2" label="Close" text @click="handleClose" />
+		</template>
+	</Dialog>
+</template>
+
+<script>
+import JsonEditorVue from 'json-editor-vue';
+
+export default {
+	components: {
+		JsonEditorVue,
+	},
+
+	props: {
+		modelValue: {
+			type: [Object, String],
+			required: true,
+		},
+
+		visible: {
+			type: Boolean,
+			required: false,
+		},
+	},
+
+	data() {
+		return {
+			json: {},
+		};
+	},
+
+	watch: {
+		modelValue: {
+			immediate: true,
+			deep: true,
+			handler() {
+				if (JSON.stringify(this.modelValue) === JSON.stringify(this.json)) return;
+				this.json = this.modelValue;
+			},
+		},
+	},
+
+	methods: {
+		handleSave() {
+			this.$emit('update:modelValue', this.json);
+			this.handleClose();
+		},
+
+		handleClose() {
+			this.$emit('update:visible', false);
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/ui/ManagementPortal/components/PropertyBuilder.vue b/src/ui/ManagementPortal/components/PropertyBuilder.vue
index f4e40c8038..bbd912f93c 100644
--- a/src/ui/ManagementPortal/components/PropertyBuilder.vue
+++ b/src/ui/ManagementPortal/components/PropertyBuilder.vue
@@ -1,129 +1,112 @@
-<template>
-	<div class="d-flex flex-column" style="gap: 16px">
-		<div v-for="(propertyValue, propertyKey) in properties" :key="propertyKey" class="d-flex justify-content-between" style="gap: 16px">
-
-			<div class="d-flex flex-1" style="gap: 16px">
-				<!-- Property name -->
-				<InputText
-					:value="propertyKey"
-					type="text"
-					placeholder="Property Name"
-					disabled
-				/>
-
-				<span class="d-flex align-center">=</span>
-
-				<!-- Property value -->
-				<InputText
-					:value="propertyValue"
-					type="text"
-					placeholder="Property Value"
-					disabled
-				/>
-			</div>
-
-			<!-- Delete property -->
-			<Button link @click="handleDeleteProperty(propertyKey)">
-				<i class="pi pi-trash" style="font-size: 1.2rem"></i>
-			</Button>
-		</div>
-	</div>
-
-	<div class="d-flex mt-4" style="gap: 16px">
-		<div class="d-flex flex-1" style="gap: 16px">
-			<!-- Property name -->
-			<InputText
-				v-model="propertyName"
-				type="text"
-				placeholder="Property Name"
-			/>
-
-			<!-- Property value -->
-			<InputText
-				v-model="propertyValue"
-				type="text"
-				placeholder="Property Value"
-			/>
-		</div>
-
-		<!-- Add property -->
-		<Button
-			label="Add Property"
-			severity="primary"
-			style="word-wrap: none"
-			@click="handleAddProperty"
-		/>
-	</div>
-
-</template>
-
-<script lang="ts">
-export default {
-	props: {
-		modelValue: {
-			type: Object,
-			required: true,
-		},
-	},
-
-	data() {
-		return {
-			properties: {},
-			propertyName: '' as string,
-			propertyValue: '' as string,
-		};
-	},
-
-	watch: {
-		modelValue: {
-			immediate: true,
-			deep: true,
-			handler() {
-				this.properties = this.modelValue;
-			},
-		},
-	},
-
-	methods: {
-		handleDeleteProperty(propertyName) {
-			delete this.properties[propertyName];
-			this.$emit('update:modelValue', this.properties);
-		},
-
-		handleAddProperty() {
-			const errors = [];
-
-			if (!this.propertyName) {
-				errors.push('Please input a property name.');
-			}
-
-			if (!this.propertyValue) {
-				errors.push('Please input a property value.');
-			}
-
-			if (this.properties[this.propertyName]) {
-				errors.push('This property name already exists.');
-			}
-
-			if (errors.length > 0) {
-				this.$toast.add({
-					severity: 'error',
-					detail: errors.join('\n'),
-					life: 5000,
-				});
-
-				return;
-			}
-
-			this.properties[this.propertyName] = this.propertyValue;
-			this.propertyName = '';
-			this.propertyValue = '';
-			this.$emit('update:modelValue', this.properties);
-		},
-	},
-}
-</script>
-
-<style lang="scss">
-	
-</style>
\ No newline at end of file
+<template>
+	<div class="d-flex flex-column" style="gap: 16px">
+		<div
+			v-for="(propertyValue, propertyKey) in properties"
+			:key="propertyKey"
+			class="d-flex justify-content-between"
+			style="gap: 16px"
+		>
+			<div class="d-flex flex-1" style="gap: 16px">
+				<!-- Property name -->
+				<InputText :value="propertyKey" type="text" placeholder="Property Name" disabled />
+
+				<span class="d-flex align-center">=</span>
+
+				<!-- Property value -->
+				<InputText :value="propertyValue" type="text" placeholder="Property Value" disabled />
+			</div>
+
+			<!-- Delete property -->
+			<Button link @click="handleDeleteProperty(propertyKey)">
+				<i class="pi pi-trash" style="font-size: 1.2rem"></i>
+			</Button>
+		</div>
+	</div>
+
+	<div class="d-flex mt-4" style="gap: 16px">
+		<div class="d-flex flex-1" style="gap: 16px">
+			<!-- Property name -->
+			<InputText v-model="propertyName" type="text" placeholder="Property Name" />
+
+			<!-- Property value -->
+			<InputText v-model="propertyValue" type="text" placeholder="Property Value" />
+		</div>
+
+		<!-- Add property -->
+		<Button
+			label="Add Property"
+			severity="primary"
+			style="word-wrap: none"
+			@click="handleAddProperty"
+		/>
+	</div>
+</template>
+
+<script lang="ts">
+export default {
+	props: {
+		modelValue: {
+			type: Object,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			properties: {},
+			propertyName: '' as string,
+			propertyValue: '' as string,
+		};
+	},
+
+	watch: {
+		modelValue: {
+			immediate: true,
+			deep: true,
+			handler() {
+				this.properties = this.modelValue;
+			},
+		},
+	},
+
+	methods: {
+		handleDeleteProperty(propertyName) {
+			delete this.properties[propertyName];
+			this.$emit('update:modelValue', this.properties);
+		},
+
+		handleAddProperty() {
+			const errors = [];
+
+			if (!this.propertyName) {
+				errors.push('Please input a property name.');
+			}
+
+			if (!this.propertyValue) {
+				errors.push('Please input a property value.');
+			}
+
+			if (this.properties[this.propertyName]) {
+				errors.push('This property name already exists.');
+			}
+
+			if (errors.length > 0) {
+				this.$toast.add({
+					severity: 'error',
+					detail: errors.join('\n'),
+					life: 5000,
+				});
+
+				return;
+			}
+
+			this.properties[this.propertyName] = this.propertyValue;
+			this.propertyName = '';
+			this.propertyValue = '';
+			this.$emit('update:modelValue', this.properties);
+		},
+	},
+};
+</script>
+
+<style lang="scss"></style>
diff --git a/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue b/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
index e668d3d9cb..a7db3668af 100644
--- a/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
+++ b/src/ui/ManagementPortal/components/RoleAssignmentsTable.vue
@@ -138,7 +138,7 @@
 				<template #body="{ data }">
 					<Button
 						link
-						:aria-label="`Delete role assignment ${data.principal?.display_name? 'for ' + data.principal?.display_name : ''}`"
+						:aria-label="`Delete role assignment ${data.principal?.display_name ? 'for ' + data.principal?.display_name : ''}`"
 						@click="roleAssignmentToDelete = data"
 					>
 						<i class="pi pi-trash" style="font-size: 1.2rem" aria-hidden="true"></i>
diff --git a/src/ui/ManagementPortal/components/Sidebar.vue b/src/ui/ManagementPortal/components/Sidebar.vue
index 408c82ef31..e01b3109a0 100644
--- a/src/ui/ManagementPortal/components/Sidebar.vue
+++ b/src/ui/ManagementPortal/components/Sidebar.vue
@@ -90,7 +90,8 @@
 				<VTooltip :auto-hide="isMobile" :popper-triggers="isMobile ? [] : ['hover']">
 					<span
 						class="sidebar__username"
-						aria-label="Logged in as {{ $authStore.currentAccount?.username }}">
+						aria-label="Logged in as {{ $authStore.currentAccount?.username }}"
+					>
 						{{ $authStore.currentAccount?.name }}
 					</span>
 					<template #popper>
@@ -141,14 +142,14 @@ a {
 }
 
 .sidebar ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
+	list-style-type: none;
+	padding: 0;
+	margin: 0;
 }
 
 .sidebar li {
-  margin: 0;
-  padding: 0;
+	margin: 0;
+	padding: 0;
 }
 
 .sidebar__header {
diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 745b2ca71d..1f860aaaa9 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -834,14 +834,17 @@ export default {
 		)) as ResourceProviderGetResult<AgentAccessToken>[];
 	},
 
-	async createAgentAccessToken(agentName: string, body: AgentAccessToken): Promise<ResourceProviderUpsertResult> {
-		return await this.fetch(
+	async createAgentAccessToken(
+		agentName: string,
+		body: AgentAccessToken,
+	): Promise<ResourceProviderUpsertResult> {
+		return (await this.fetch(
 			`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents/${agentName}/agentAccessTokens/${body.id}?api-version=${this.apiVersion}`,
 			{
 				method: 'POST',
 				body,
 			},
-		) as ResourceProviderUpsertResult;
+		)) as ResourceProviderUpsertResult;
 	},
 
 	async deleteAgentAccessToken(agentName: string, accessTokenId: string): Promise<any> {
diff --git a/src/ui/ManagementPortal/js/types.ts b/src/ui/ManagementPortal/js/types.ts
index 5504524081..422fdeb718 100644
--- a/src/ui/ManagementPortal/js/types.ts
+++ b/src/ui/ManagementPortal/js/types.ts
@@ -28,21 +28,21 @@ export type ResourceProviderGetResult<T> = {
 };
 
 export type ResourceProviderUpsertResult = {
-    /**
-     * The id of the object that was created or updated.
-     */
-    objectId: string;
-
-    /**
-     * A flag denoting whether the upserted resource already exists.
-     */
-    resourceExists: boolean;
-
-    /**
-     * Gets or sets the resource resulting from the upsert operation.
-     * Each resource provider will decide whether to return the resource in the upsert result or not.
-     */
-    resource?: any;
+	/**
+	 * The id of the object that was created or updated.
+	 */
+	objectId: string;
+
+	/**
+	 * A flag denoting whether the upserted resource already exists.
+	 */
+	resourceExists: boolean;
+
+	/**
+	 * Gets or sets the resource resulting from the upsert operation.
+	 * Each resource provider will decide whether to return the resource in the upsert result or not.
+	 */
+	resource?: any;
 };
 
 export type AgentTool = {
@@ -103,7 +103,7 @@ export type Agent = ResourceBase & {
 export type AgentAccessToken = ResourceBase & {
 	id: string;
 	active: boolean;
-}
+};
 
 export type Prompt = ResourceBase & {
 	object_id: string;
diff --git a/src/ui/ManagementPortal/layouts/default.vue b/src/ui/ManagementPortal/layouts/default.vue
index f8e80a3f4d..e9f0eaaff4 100644
--- a/src/ui/ManagementPortal/layouts/default.vue
+++ b/src/ui/ManagementPortal/layouts/default.vue
@@ -46,7 +46,9 @@ export default {
 
 		focusMainContent() {
 			const mainContent = document.getElementById('main-content');
-			const focusableElements = mainContent.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])');
+			const focusableElements = mainContent.querySelectorAll(
+				'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])',
+			);
 			if (focusableElements.length > 0) {
 				focusableElements[0].focus();
 			}
diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index 72357225a1..c298dd2a97 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -150,7 +150,10 @@
 
 					<!-- Data source -->
 					<div v-if="dedicated_pipeline">
-						<CreateAgentStepItem v-model="editDataSource" focusQuery=".step-container__edit__option">
+						<CreateAgentStepItem
+							v-model="editDataSource"
+							focusQuery=".step-container__edit__option"
+						>
 							<template v-if="selectedDataSource">
 								<div class="step-container__header">{{ selectedDataSource.type }}</div>
 								<div>
@@ -274,11 +277,16 @@
 					</template>
 
 					<!-- Text embedding profiles -->
-					<CreateAgentStepItem v-model="editTextEmbeddingProfile" focusQuery=".step-container__edit__option">
+					<CreateAgentStepItem
+						v-model="editTextEmbeddingProfile"
+						focusQuery=".step-container__edit__option"
+					>
 						<template v-if="selectedTextEmbeddingProfile">
 							<div v-if="selectedTextEmbeddingProfile.object_id !== ''">
 								<div class="step-container__header">{{ selectedTextEmbeddingProfile.name }}</div>
-								<div v-if="selectedTextEmbeddingProfile.resolved_configuration_references?.Endpoint">
+								<div
+									v-if="selectedTextEmbeddingProfile.resolved_configuration_references?.Endpoint"
+								>
 									<span class="step-option__header">URL:</span>
 									<span>{{
 										selectedTextEmbeddingProfile.resolved_configuration_references.Endpoint
@@ -319,7 +327,9 @@
 									<div class="step-container__header">{{ textEmbeddingProfile.name }}</div>
 									<div v-if="textEmbeddingProfile.resolved_configuration_references?.Endpoint">
 										<span class="step-option__header">URL:</span>
-										<span>{{ textEmbeddingProfile.resolved_configuration_references.Endpoint }}</span
+										<span>{{
+											textEmbeddingProfile.resolved_configuration_references.Endpoint
+										}}</span
 										><br />
 										<span class="step-option__header">Deployment:</span>
 										<span>{{
@@ -477,7 +487,9 @@
 						</div>
 
 						<div class="d-flex align-center mt-2">
-							<span id="aria-conversation-history-enabled" class="step-option__header">Enabled:</span>
+							<span id="aria-conversation-history-enabled" class="step-option__header"
+								>Enabled:</span
+							>
 							<span>
 								<ToggleButton
 									v-model="conversationHistory"
@@ -737,7 +749,11 @@
 					class="dropdown--agent"
 					placeholder="--Select--"
 					aria-labelledby="aria-orchestrator"
-					@change="selectedWorkflow = JSON.parse(JSON.stringify(workflowOptions.find((workflow) => workflow.type === $event.value)))"
+					@change="
+						selectedWorkflow = JSON.parse(
+							JSON.stringify(workflowOptions.find((workflow) => workflow.type === $event.value)),
+						)
+					"
 				/>
 				<Button
 					class="ml-2"
@@ -750,7 +766,6 @@
 
 			<!-- Workflow configuration -->
 			<div v-if="showWorkflowConfiguration" class="span-2">
-
 				<!-- Workflow main model -->
 				<div class="mb-6">
 					<div class="step-header mb-3">Workflow main model:</div>
@@ -762,7 +777,11 @@
 						class="dropdown--agent"
 						placeholder="--Select--"
 						aria-labelledby="aria-orchestrator"
-						@change="workflowMainAIModel = JSON.parse(JSON.stringify(aiModelOptions.find((model) => model.object_id === $event.value)))"
+						@change="
+							workflowMainAIModel = JSON.parse(
+								JSON.stringify(aiModelOptions.find((model) => model.object_id === $event.value)),
+							)
+						"
 					/>
 				</div>
 
@@ -794,7 +813,11 @@
 				</div>
 
 				<div class="span-2">
-					<div v-for="(tool, index) in agentTools" class="d-flex justify-content-between mb-2" :key="index">
+					<div
+						v-for="(tool, index) in agentTools"
+						class="d-flex justify-content-between mb-2"
+						:key="index"
+					>
 						<div>{{ tool.name }}</div>
 
 						<Button
@@ -830,11 +853,7 @@
 						placeholder="Enter cost center name"
 						aria-labelledby="aria-cost-center"
 					/>
-					<Button
-						label="Copy"
-						severity="primary"
-						@click="handleCopySecurityGroupId"
-					/>
+					<Button label="Copy" severity="primary" @click="handleCopySecurityGroupId" />
 				</div>
 			</template>
 
@@ -845,7 +864,7 @@
 					<AgentAccessTokens :agent-name="this.agentName" />
 				</div>
 			</template>
-			
+
 			<!-- Form buttons -->
 			<div class="span-2 d-flex justify-content-end" style="gap: 16px">
 				<!-- Create agent -->
@@ -857,12 +876,7 @@
 				/>
 
 				<!-- Cancel -->
-				<Button
-					v-if="editAgent"
-					label="Cancel"
-					severity="secondary"
-					@click="handleCancel"
-				/>
+				<Button v-if="editAgent" label="Cancel" severity="secondary" @click="handleCancel" />
 			</div>
 		</div>
 	</main>
@@ -1083,12 +1097,14 @@ export default {
 	watch: {
 		selectedWorkflow() {
 			this.workflowMainAIModel = Object.values(this.selectedWorkflow.resource_object_ids).find(
-				(resource) => resource.properties?.object_role === 'main_model'
+				(resource) => resource.properties?.object_role === 'main_model',
 			);
 		},
 
 		workflowMainAIModel() {
-			this.workflowMainAIModelParameters = this.workflowMainAIModel?.model_parameters ?? this.workflowMainAIModel?.properties?.model_parameters;
+			this.workflowMainAIModelParameters =
+				this.workflowMainAIModel?.model_parameters ??
+				this.workflowMainAIModel?.properties?.model_parameters;
 		},
 	},
 
diff --git a/src/ui/ManagementPortal/pages/agents/private.vue b/src/ui/ManagementPortal/pages/agents/private.vue
index 4a5838b3b2..cca4e6151d 100644
--- a/src/ui/ManagementPortal/pages/agents/private.vue
+++ b/src/ui/ManagementPortal/pages/agents/private.vue
@@ -80,7 +80,11 @@
 					}"
 				>
 					<template #body="{ data }">
-						<NuxtLink :to="'/agents/edit/' + data.resource.name" class="table__button" tabindex="-1">
+						<NuxtLink
+							:to="'/agents/edit/' + data.resource.name"
+							class="table__button"
+							tabindex="-1"
+						>
 							<VTooltip :auto-hide="false" :popper-triggers="['hover']">
 								<Button
 									link
@@ -89,7 +93,9 @@
 								>
 									<i class="pi pi-cog" style="font-size: 1.2rem" aria-hidden="true"></i>
 								</Button>
-								<template #popper><div role="tooltip">Edit {{data.resource.name}}</div></template>
+								<template #popper
+									><div role="tooltip">Edit {{ data.resource.name }}</div></template
+								>
 							</VTooltip>
 						</NuxtLink>
 					</template>
@@ -117,7 +123,9 @@
 							>
 								<i class="pi pi-trash" style="font-size: 1.2rem" aria-hidden="true"></i>
 							</Button>
-							<template #popper><div role="tooltip">Delete {{data.resource.name}}</div></template>
+							<template #popper
+								><div role="tooltip">Delete {{ data.resource.name }}</div></template
+							>
 						</VTooltip>
 					</template>
 				</Column>
@@ -125,7 +133,13 @@
 		</div>
 
 		<!-- Delete agent dialog -->
-		<Dialog :visible="agentToDelete !== null" modal v-focustrap header="Delete Agent" :closable="false">
+		<Dialog
+			:visible="agentToDelete !== null"
+			modal
+			v-focustrap
+			header="Delete Agent"
+			:closable="false"
+		>
 			<p>Do you want to delete the agent "{{ agentToDelete.name }}" ?</p>
 			<template #footer>
 				<Button label="Cancel" text @click="agentToDelete = null" />
diff --git a/src/ui/ManagementPortal/pages/agents/public.vue b/src/ui/ManagementPortal/pages/agents/public.vue
index 2095b8fa6c..ccea96314a 100644
--- a/src/ui/ManagementPortal/pages/agents/public.vue
+++ b/src/ui/ManagementPortal/pages/agents/public.vue
@@ -80,7 +80,11 @@
 					}"
 				>
 					<template #body="{ data }">
-						<NuxtLink :to="'/agents/edit/' + data.resource.name" class="table__button" tabindex="-1">
+						<NuxtLink
+							:to="'/agents/edit/' + data.resource.name"
+							class="table__button"
+							tabindex="-1"
+						>
 							<VTooltip :auto-hide="false" :popper-triggers="['hover']">
 								<Button
 									link
@@ -89,7 +93,9 @@
 								>
 									<i class="pi pi-cog" style="font-size: 1.2rem" aria-hidden="true"></i>
 								</Button>
-								<template #popper><div role="tooltip">Edit {{data.resource.name}}</div></template>
+								<template #popper
+									><div role="tooltip">Edit {{ data.resource.name }}</div></template
+								>
 							</VTooltip>
 						</NuxtLink>
 					</template>
@@ -117,7 +123,9 @@
 							>
 								<i class="pi pi-trash" style="font-size: 1.2rem" aria-hidden="true"></i>
 							</Button>
-							<template #popper><div role="tooltip">Delete {{data.resource.name}}</div></template>
+							<template #popper
+								><div role="tooltip">Delete {{ data.resource.name }}</div></template
+							>
 						</VTooltip>
 					</template>
 				</Column>
@@ -125,7 +133,13 @@
 		</div>
 
 		<!-- Delete agent dialog -->
-		<Dialog :visible="agentToDelete !== null" modal v-focustrap header="Delete Agent" :closable="false">
+		<Dialog
+			:visible="agentToDelete !== null"
+			modal
+			v-focustrap
+			header="Delete Agent"
+			:closable="false"
+		>
 			<p>Do you want to delete the agent "{{ agentToDelete.name }}" ?</p>
 			<template #footer>
 				<Button label="Cancel" text @click="agentToDelete = null" />
diff --git a/src/ui/ManagementPortal/pages/auth/index.vue b/src/ui/ManagementPortal/pages/auth/index.vue
index f3007f3ce9..4f79726cfd 100644
--- a/src/ui/ManagementPortal/pages/auth/index.vue
+++ b/src/ui/ManagementPortal/pages/auth/index.vue
@@ -1,9 +1,15 @@
 <template>
 	<div class="login-page">
 		<div class="login-container">
-			<img :src="$appConfigStore.logoUrl" class="login__logo" :alt="$appConfigStore.logoText || 'Company Logo'" />
+			<img
+				:src="$appConfigStore.logoUrl"
+				class="login__logo"
+				:alt="$appConfigStore.logoText || 'Company Logo'"
+			/>
 			<Button icon="pi pi-microsoft" label="Sign in" size="large" @click="signIn"></Button>
-			<div v-if="$route.query.message" class="login__message" role="alert" aria-live="polite">{{ $route.query.message }}</div>
+			<div v-if="$route.query.message" class="login__message" role="alert" aria-live="polite">
+				{{ $route.query.message }}
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/src/ui/ManagementPortal/pages/branding.vue b/src/ui/ManagementPortal/pages/branding.vue
index 4c59f9dca0..632502f25c 100644
--- a/src/ui/ManagementPortal/pages/branding.vue
+++ b/src/ui/ManagementPortal/pages/branding.vue
@@ -11,7 +11,10 @@
 			<p>Customize the look and feel of your UI.</p>
 			<div style="display: flex; flex-direction: row; align-items: center; gap: 0.5rem">
 				<p>Show contrast information</p>
-				<InputSwitch v-model="showContrastInfo" aria-label="Toggle to show or hide contrast information" />
+				<InputSwitch
+					v-model="showContrastInfo"
+					aria-label="Toggle to show or hide contrast information"
+				/>
 			</div>
 		</div>
 		<div class="steps">
@@ -52,10 +55,10 @@
 					:style="{ backgroundColor: getBrandingValue('FoundationaLLM:Branding:PrimaryColor') }"
 					class="logo-preview"
 				>
-					<img 
+					<img
 						:src="$filters.publicDirectory(getBrandingValue(key))"
 						alt="Logo Preview"
-						class="logo-image" 
+						class="logo-image"
 					/>
 				</div>
 			</div>
@@ -188,12 +191,7 @@
 				/>
 				<Button label="Save" severity="primary" @click="saveBranding" />
 			</div>
-			<Dialog
-				:visible="resetBrandingDialog"
-				modal
-				header="Reset Branding"
-				:closable="false"
-			>
+			<Dialog :visible="resetBrandingDialog" modal header="Reset Branding" :closable="false">
 				<p>Are you sure you want to reset all branding values to their previous values?</p>
 				<template #footer>
 					<Button label="Cancel" text @click="resetBrandingDialog = false" />
diff --git a/src/ui/ManagementPortal/pages/data-sources/index.vue b/src/ui/ManagementPortal/pages/data-sources/index.vue
index 3d969d3973..e3e218c104 100644
--- a/src/ui/ManagementPortal/pages/data-sources/index.vue
+++ b/src/ui/ManagementPortal/pages/data-sources/index.vue
@@ -34,9 +34,7 @@
 				size="small"
 			>
 				<template #empty>
-					<div role="alert" aria-live="polite">
-						No data sources found.
-					</div>
+					<div role="alert" aria-live="polite">No data sources found.</div>
 				</template>
 
 				<template #loading>Loading data sources. Please wait.</template>
@@ -82,12 +80,18 @@
 					}"
 				>
 					<template #body="{ data }">
-						<NuxtLink :to="'/data-sources/edit/' + data.resource.name" class="table__button" tabindex="-1">
+						<NuxtLink
+							:to="'/data-sources/edit/' + data.resource.name"
+							class="table__button"
+							tabindex="-1"
+						>
 							<VTooltip :auto-hide="false" :popper-triggers="['hover']">
 								<Button link :aria-label="`Edit ${data.resource.name}`">
 									<i class="pi pi-cog" style="font-size: 1.2rem" aria-hidden="true"></i>
 								</Button>
-								<template #popper><div role="tooltip">Edit {{data.resource.name}}</div></template>
+								<template #popper
+									><div role="tooltip">Edit {{ data.resource.name }}</div></template
+								>
 							</VTooltip>
 						</NuxtLink>
 					</template>
@@ -114,7 +118,9 @@
 							>
 								<i class="pi pi-trash" style="font-size: 1.2rem" aria-hidden="true"></i>
 							</Button>
-							<template #popper><div role="tooltip">Delete {{data.resource.name}}</div></template>
+							<template #popper
+								><div role="tooltip">Delete {{ data.resource.name }}</div></template
+							>
 						</VTooltip>
 					</template>
 				</Column>
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index b7b3f3d4d7..74ae7723c7 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -106,7 +106,7 @@
 						class="w-50"
 						aria-labelledby="aria-principal-id"
 					/>
-					<Button 
+					<Button
 						label="Browse"
 						aria-label="Browse for principals"
 						severity="primary"
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
index 5695f5afa3..4ba41fa00c 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/index.vue
@@ -9,7 +9,11 @@
 			<div style="display: flex; align-items: center">
 				<NuxtLink to="/security/role-assignments/create" tabindex="-1">
 					<Button aria-label="Create Role Assignment">
-						<i class="pi pi-plus" style="color: var(--text-primary); margin-right: 8px" aria-hidden="true"></i>
+						<i
+							class="pi pi-plus"
+							style="color: var(--text-primary); margin-right: 8px"
+							aria-hidden="true"
+						></i>
 						Create Role Assignment
 					</Button>
 				</NuxtLink>

From 5547065b3e3f0178db72d468b0b5976df98e418e Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 06:18:10 -0800
Subject: [PATCH 28/31] Styling adjustments

---
 .../components/PropertyBuilder.vue            | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/ui/ManagementPortal/components/PropertyBuilder.vue b/src/ui/ManagementPortal/components/PropertyBuilder.vue
index bbd912f93c..000f648ec1 100644
--- a/src/ui/ManagementPortal/components/PropertyBuilder.vue
+++ b/src/ui/ManagementPortal/components/PropertyBuilder.vue
@@ -21,24 +21,24 @@
 				<i class="pi pi-trash" style="font-size: 1.2rem"></i>
 			</Button>
 		</div>
-	</div>
 
-	<div class="d-flex mt-4" style="gap: 16px">
-		<div class="d-flex flex-1" style="gap: 16px">
-			<!-- Property name -->
-			<InputText v-model="propertyName" type="text" placeholder="Property Name" />
+		<div class="d-flex" style="gap: 16px">
+			<div class="d-flex flex-1" style="gap: 16px">
+				<!-- Property name -->
+				<InputText v-model="propertyName" type="text" placeholder="Property Name" />
 
-			<!-- Property value -->
-			<InputText v-model="propertyValue" type="text" placeholder="Property Value" />
-		</div>
+				<!-- Property value -->
+				<InputText v-model="propertyValue" type="text" placeholder="Property Value" />
+			</div>
 
-		<!-- Add property -->
-		<Button
-			label="Add Property"
-			severity="primary"
-			style="word-wrap: none"
-			@click="handleAddProperty"
-		/>
+			<!-- Add property -->
+			<Button
+				label="Add Property"
+				severity="primary"
+				style="word-wrap: none"
+				@click="handleAddProperty"
+			/>
+		</div>
 	</div>
 </template>
 

From 4c6a3ab230204b696d2da4a645bb48f6d0c14d4c Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 06:19:26 -0800
Subject: [PATCH 29/31] Styling adjustments

---
 src/ui/ManagementPortal/pages/agents/create.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index c298dd2a97..3ad815c222 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -799,10 +799,8 @@
 				</div> -->
 
 				<!-- Workflow main model parameters -->
-				<div class="mb-6">
-					<div class="step-header mb-3">Workflow main model parameters:</div>
-					<PropertyBuilder v-model="workflowMainAIModelParameters" />
-				</div>
+				<div class="step-header mb-3">Workflow main model parameters:</div>
+				<PropertyBuilder v-model="workflowMainAIModelParameters" />
 			</div>
 
 			<!-- Tools -->

From fdcebfc42e3b49c27c5eb1d81b6ae1e7bccdd821 Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 06:24:15 -0800
Subject: [PATCH 30/31] Add utility class

---
 src/ui/ManagementPortal/app.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/ui/ManagementPortal/app.vue b/src/ui/ManagementPortal/app.vue
index 98e910ac5a..e9e340c17d 100644
--- a/src/ui/ManagementPortal/app.vue
+++ b/src/ui/ManagementPortal/app.vue
@@ -156,6 +156,10 @@ body,
 	flex: 1;
 }
 
+.gap-4 {
+	gap: 16px;
+}
+
 .flex-column {
 	flex-direction: column;
 }

From ce6eaee5840bef7983b13e56dc6c72858010cf6d Mon Sep 17 00:00:00 2001
From: Sensational Code <sensational.code@gmail.com>
Date: Thu, 12 Dec 2024 06:24:34 -0800
Subject: [PATCH 31/31] Use utility class instead of inline style

---
 .../ManagementPortal/components/PropertyBuilder.vue   | 11 +++++------
 src/ui/ManagementPortal/pages/agents/create.vue       |  4 ++--
 .../pages/security/role-assignments/create.vue        |  8 ++++----
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/ui/ManagementPortal/components/PropertyBuilder.vue b/src/ui/ManagementPortal/components/PropertyBuilder.vue
index 000f648ec1..0ed1d90f4b 100644
--- a/src/ui/ManagementPortal/components/PropertyBuilder.vue
+++ b/src/ui/ManagementPortal/components/PropertyBuilder.vue
@@ -1,12 +1,11 @@
 <template>
-	<div class="d-flex flex-column" style="gap: 16px">
+	<div class="d-flex flex-column gap-4">
 		<div
 			v-for="(propertyValue, propertyKey) in properties"
 			:key="propertyKey"
-			class="d-flex justify-content-between"
-			style="gap: 16px"
+			class="d-flex justify-content-between gap-4"
 		>
-			<div class="d-flex flex-1" style="gap: 16px">
+			<div class="d-flex flex-1">
 				<!-- Property name -->
 				<InputText :value="propertyKey" type="text" placeholder="Property Name" disabled />
 
@@ -22,8 +21,8 @@
 			</Button>
 		</div>
 
-		<div class="d-flex" style="gap: 16px">
-			<div class="d-flex flex-1" style="gap: 16px">
+		<div class="d-flex gap-4">
+			<div class="d-flex flex-1 gap-4">
 				<!-- Property name -->
 				<InputText v-model="propertyName" type="text" placeholder="Property Name" />
 
diff --git a/src/ui/ManagementPortal/pages/agents/create.vue b/src/ui/ManagementPortal/pages/agents/create.vue
index 3ad815c222..5fadf2920b 100644
--- a/src/ui/ManagementPortal/pages/agents/create.vue
+++ b/src/ui/ManagementPortal/pages/agents/create.vue
@@ -842,7 +842,7 @@
 			<!-- Virtual security group id -->
 			<template v-if="virtualSecurityGroupId">
 				<div class="step-header">Virtual security group ID</div>
-				<div class="span-2" style="display: flex; gap: 16px">
+				<div class="span-2 d-flex gap-4">
 					<InputText
 						:value="virtualSecurityGroupId"
 						disabled
@@ -864,7 +864,7 @@
 			</template>
 
 			<!-- Form buttons -->
-			<div class="span-2 d-flex justify-content-end" style="gap: 16px">
+			<div class="span-2 d-flex justify-content-end gap-4">
 				<!-- Create agent -->
 				<Button
 					:label="editAgent ? 'Save Changes' : 'Create Agent'"
diff --git a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
index 74ae7723c7..34c7ce4181 100644
--- a/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
+++ b/src/ui/ManagementPortal/pages/security/role-assignments/create.vue
@@ -58,7 +58,7 @@
 			<div class="span-2">
 				<!-- Type -->
 				<div id="aria-principal-type" class="mb-2">Principal Type:</div>
-				<div style="display: flex; gap: 16px">
+				<div class="d-flex gap-4">
 					<InputText
 						v-model="principal.object_type"
 						readonly
@@ -71,7 +71,7 @@
 
 				<!-- Name -->
 				<div id="aria-principal-name" class="mb-2 mt-2">Principal Name:</div>
-				<div style="display: flex; gap: 16px">
+				<div class="d-flex gap-4">
 					<InputText
 						v-model="principal.display_name"
 						readonly
@@ -84,7 +84,7 @@
 
 				<!-- Email -->
 				<div id="aria-principal-email" class="mb-2 mt-2">Principal Email:</div>
-				<div style="display: flex; gap: 16px">
+				<div class="d-flex gap-4">
 					<InputText
 						v-model="principal.email"
 						readonly
@@ -97,7 +97,7 @@
 
 				<!-- ID -->
 				<div id="aria-principal-id" class="mb-2 mt-2">Principal ID:</div>
-				<div style="display: flex; gap: 16px">
+				<div class="d-flex gap-4">
 					<InputText
 						v-model="roleAssignment.principal_id"
 						readonly