From 6b565531f8afe1f71ac39f321bbe2e8ec7f3de84 Mon Sep 17 00:00:00 2001
From: joelhulen <joelhulen@gmail.com>
Date: Fri, 13 Dec 2024 10:51:13 -0500
Subject: [PATCH] Add prompt editor

---
 .../ManagementPortal/components/Sidebar.vue   |   1 +
 src/ui/ManagementPortal/js/api.ts             |  19 +
 .../ManagementPortal/pages/prompts/create.vue | 434 ++++++++++++++++++
 .../pages/prompts/edit/[promptName].vue       |  13 +
 .../ManagementPortal/pages/prompts/index.vue  | 153 ++++++
 5 files changed, 620 insertions(+)
 create mode 100644 src/ui/ManagementPortal/pages/prompts/create.vue
 create mode 100644 src/ui/ManagementPortal/pages/prompts/edit/[promptName].vue
 create mode 100644 src/ui/ManagementPortal/pages/prompts/index.vue

diff --git a/src/ui/ManagementPortal/components/Sidebar.vue b/src/ui/ManagementPortal/components/Sidebar.vue
index 408c82ef31..841f994952 100644
--- a/src/ui/ManagementPortal/components/Sidebar.vue
+++ b/src/ui/ManagementPortal/components/Sidebar.vue
@@ -26,6 +26,7 @@
 			<li><NuxtLink to="/agents/create" class="sidebar__item">Create New Agent</NuxtLink></li>
 			<li><NuxtLink to="/agents/public" class="sidebar__item">All Agents</NuxtLink></li>
 			<li><NuxtLink to="/agents/private" class="sidebar__item">My Agents</NuxtLink></li>
+			<li><NuxtLink to="/prompts" class="sidebar__item">Agent Prompts</NuxtLink></li>
 		</ul>
 		<!-- <div class="sidebar__item">Performance</div> -->
 
diff --git a/src/ui/ManagementPortal/js/api.ts b/src/ui/ManagementPortal/js/api.ts
index 166ab78800..6daf14b006 100644
--- a/src/ui/ManagementPortal/js/api.ts
+++ b/src/ui/ManagementPortal/js/api.ts
@@ -543,6 +543,25 @@ export default {
 	/*
 		Prompts
 	 */
+	async getPrompts(): Promise<ResourceProviderGetResult<Prompt>[] | null> {
+		try {
+			const data = await this.fetch(`/instances/${this.instanceId}/providers/FoundationaLLM.Prompt/prompts?api-version=${this.apiVersion}`);
+			return data as ResourceProviderGetResult<Prompt>[];
+		} catch (error) {
+			return null;
+		}
+	},
+
+	async getPromptByName(promptName: string): Promise<ResourceProviderGetResult<Prompt> | null> {
+		// Attempt to retrieve the prompt. If it doesn't exist, return an empty object.
+		try {
+			const data = await this.fetch(`/instances/${this.instanceId}/providers/FoundationaLLM.Prompt/prompts/${promptName}?api-version=${this.apiVersion}`);
+			return data[0];
+		} catch (error) {
+			return null;
+		}
+	},
+
 	async getPrompt(promptId: string): Promise<ResourceProviderGetResult<Prompt> | null> {
 		// Attempt to retrieve the prompt. If it doesn't exist, return an empty object.
 		try {
diff --git a/src/ui/ManagementPortal/pages/prompts/create.vue b/src/ui/ManagementPortal/pages/prompts/create.vue
new file mode 100644
index 0000000000..3a312fc784
--- /dev/null
+++ b/src/ui/ManagementPortal/pages/prompts/create.vue
@@ -0,0 +1,434 @@
+<template>
+	<main id="main-content">
+		<div style="display: flex">
+			<!-- Title -->
+			<div style="flex: 1">
+				<h2 class="page-header">{{ editPrompt ? 'Edit Agent Prompt' : 'Create New Agent Prompt' }}</h2>
+				<div class="page-subheader">
+					{{
+						editPrompt
+							? 'Edit your prompt below.'
+							: 'Complete the settings below to create a new prompt.'
+					}}
+				</div>
+			</div>
+		</div>
+
+		<div class="steps" :class="{ 'steps--loading': loading }">
+			<!-- Loading overlay -->
+			<template v-if="loading">
+				<div class="steps__loading-overlay" role="status" aria-live="polite">
+					<LoadingGrid />
+					<div>{{ loadingStatusText }}</div>
+				</div>
+			</template>
+
+			<div class="span-2">
+				<div id="aria-agent-name" class="step-header mb-2">Prompt name:</div>
+				<div id="aria-agent-name-desc" class="mb-2">
+					No special characters or spaces, use letters and numbers with dashes and underscores only.
+				</div>
+				<div class="input-wrapper">
+					<InputText
+						v-model="prompt.name"
+						:disabled="editPrompt"
+						type="text"
+						class="w-100"
+						placeholder="Enter agent prompt name"
+						aria-labelledby="aria-agent-name aria-agent-name-desc"
+					/>
+				</div>
+			</div>
+			<div class="span-2">
+				<div class="step-header mb-2">Description:</div>
+				<div id="aria-description" class="mb-2">
+					Provide a description to help others understand the prompt's purpose.
+				</div>
+				<InputText
+					v-model="prompt.description"
+					type="text"
+					class="w-100"
+					placeholder="Enter agent description"
+					aria-labelledby="aria-description"
+				/>
+			</div>
+
+			<!-- System prompt -->
+			<section aria-labelledby="system-prompt" class="span-2 steps">
+				<h3 class="step-section-header span-2" id="system-prompt">Prompt Prefix</h3>
+
+				<div id="aria-persona" class="step-header">What is the persona of the agent?</div>
+
+				<div class="span-2">
+					<Textarea
+						v-model="prompt.prefix"
+						class="w-100"
+						auto-resize
+						rows="5"
+						type="text"
+						placeholder="You are an analytic agent named Khalil that helps people find information about FoundationaLLM. Provide concise answers that are polite and professional."
+						aria-labelledby="aria-persona"
+					/>
+				</div>
+			</section>
+			
+			<div class="span-2 d-flex justify-content-end" style="gap: 16px">
+				<!-- Create agent -->
+				<Button
+					:label="editPrompt ? 'Save Changes' : 'Create Agent Prompt'"
+					severity="primary"
+					:disabled="editable === false"
+					@click="handleCreatePrompt"
+				/>
+
+				<!-- Cancel -->
+				<Button
+					v-if="editPrompt"
+					label="Cancel"
+					severity="secondary"
+					@click="handleCancel"
+				/>
+			</div>
+		</div>
+	</main>
+</template>
+
+<script lang="ts">
+import type { PropType } from 'vue';
+import { ref } from 'vue';
+import { debounce } from 'lodash';
+import api from '@/js/api';
+import type {
+	Prompt,
+	CreatePromptRequest
+} from '@/js/types';
+
+export default {
+	name: 'CreatePrompt',
+
+	props: {
+		editPrompt: {
+			type: [Boolean, String] as PropType<false | string>,
+			required: false,
+			default: false,
+		},
+	},
+
+	data() {
+		return {
+			loading: false as boolean,
+			loadingStatusText: 'Retrieving data...' as string,
+
+			prompt: {} as Prompt,
+
+			editable: false as boolean,
+
+			nameValidationStatus: null as string | null, // 'valid', 'invalid', or null
+			validationMessage: '' as string,
+		};
+	},
+
+	async created() {
+		this.loading = true;
+
+		if (this.editPrompt) {
+			this.loadingStatusText = `Retrieving prompt: ${this.editPrompt}...`;
+			const promptGetResult = await api.getPromptByName(this.editPrompt);
+			this.editable = promptGetResult?.actions.includes('FoundationaLLM.Prompt/prompts/write') ?? false;
+
+			const prompt = promptGetResult?.resource;
+			this.loadingStatusText = `Mapping prompt values to form...`;
+			if (prompt) {
+				this.prompt = prompt;
+			}
+		} else {
+			this.editable = true;
+		}
+
+		this.loading = false;
+	},
+
+	methods: {
+		handleCancel() {
+			if (!confirm('Are you sure you want to cancel?')) {
+				return;
+			}
+			this.$router.push('/prompts');
+		},
+
+		async handleCreatePrompt() {
+			const errors = [];
+			if (!this.prompt.name) {
+				errors.push('Please give the prompt a name.');
+			}
+
+			if (!this.prompt.prefix) {
+				errors.push('The prompt requires a prefix.');
+			}
+
+			if (errors.length > 0) {
+				this.$toast.add({
+					severity: 'error',
+					detail: errors.join('\n'),
+					life: 5000,
+				});
+
+				return;
+			}
+
+			this.loading = true;
+			this.loadingStatusText = 'Saving prompt...';
+
+			const promptRequest: CreatePromptRequest = {
+				type: 'multipart',
+				name: this.prompt.name,
+				cost_center: this.prompt.cost_center,
+				description: this.prompt.description,
+				prefix: this.prompt.prefix,
+				suffix: this.prompt.suffix,
+				object_id: this.prompt.object_id || '',
+				display_name: this.prompt.display_name,
+				expiration_date: this.prompt.expiration_date,
+			};
+
+			try {
+				await api.createOrUpdatePrompt(this.editPrompt, promptRequest);
+			} catch (error) {
+				this.loading = false;
+				return this.$toast.add({
+					severity: 'error',
+					detail: error?.response?._data || error,
+					life: 5000,
+				});
+			}
+
+			this.$toast.add({
+				severity: 'success',
+				detail: `Prompt ${this.editPrompt ? 'updated' : 'created'} successfully.`,
+				life: 5000,
+			});
+
+			this.loading = false;
+
+			this.$router.push('/prompts');
+		},
+	},
+};
+</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 {
+	margin: 0px;
+	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;
+}
+
+.input-wrapper {
+	position: relative;
+	display: flex;
+	align-items: center;
+}
+
+input {
+	width: 100%;
+	padding-right: 30px;
+}
+
+.icon {
+	position: absolute;
+	right: 10px;
+	cursor: default;
+}
+
+// .p-button-icon {
+// 	color: var(--primary-button-text) !important;
+// }
+
+.valid {
+	color: green;
+}
+
+.invalid {
+	color: red;
+}
+
+.virtual-security-group-id {
+	margin: 0 1rem 0 0;
+	width: auto;
+}
+</style>
diff --git a/src/ui/ManagementPortal/pages/prompts/edit/[promptName].vue b/src/ui/ManagementPortal/pages/prompts/edit/[promptName].vue
new file mode 100644
index 0000000000..994d336db1
--- /dev/null
+++ b/src/ui/ManagementPortal/pages/prompts/edit/[promptName].vue
@@ -0,0 +1,13 @@
+<template>
+	<CreatePrompt :edit-prompt="$route.params.promptName" />
+</template>
+
+<script lang="ts">
+import CreatePrompt from '../create.vue';
+
+export default {
+	components: {
+		CreatePrompt,
+	},
+};
+</script>
diff --git a/src/ui/ManagementPortal/pages/prompts/index.vue b/src/ui/ManagementPortal/pages/prompts/index.vue
new file mode 100644
index 0000000000..891f9890a5
--- /dev/null
+++ b/src/ui/ManagementPortal/pages/prompts/index.vue
@@ -0,0 +1,153 @@
+<template>
+	<main id="main-content">
+		<h2 class="page-header">All Agent Prompts</h2>
+
+		<div :class="{ 'grid--loading': loading }">
+			<!-- Loading overlay -->
+			<template v-if="loading">
+				<div class="grid__loading-overlay" role="status" aria-live="polite">
+					<LoadingGrid />
+					<div>{{ loadingStatusText }}</div>
+				</div>
+			</template>
+
+			<!-- Table -->
+			<DataTable :value="prompts" striped-rows scrollable table-style="max-width: 100%" size="small">
+				<template #empty>
+					<div role="alert" aria-live="polite">
+						No prompts found.
+					</div>
+				</template>
+				<template #loading>Loading agent prompts. Please wait.</template>
+
+				<!-- Name -->
+				<Column
+					field="resource.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>
+
+				<!-- Description -->
+				<Column
+					field="resource.description"
+					header="Description"
+					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="'/prompts/edit/' + data.resource.name" class="table__button" tabindex="-1">
+							<VTooltip :auto-hide="false" :popper-triggers="['hover']">
+								<Button
+									link
+									:disabled="!data.actions.includes('FoundationaLLM.Prompt/prompts/write')"
+									: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>
+							</VTooltip>
+						</NuxtLink>
+					</template>
+				</Column>
+
+			</DataTable>
+		</div>
+	</main>
+</template>
+
+<script lang="ts">
+import api from '@/js/api';
+import type { Prompt, ResourceProviderGetResult } from '@/js/types';
+
+export default {
+	name: 'Prompts',
+
+	data() {
+		return {
+			prompts: [] as ResourceProviderGetResult<Prompt>[],
+			loading: false as boolean,
+			loadingStatusText: 'Retrieving data...' as string,
+			accessControlModalOpen: false,
+		};
+	},
+
+	async created() {
+		await this.getPrompts();
+	},
+
+	methods: {
+		async getPrompts() {
+			this.loading = true;
+			try {
+				this.prompts = (await api.getPrompts()) || [];
+			} catch (error) {
+				this.$toast.add({
+					severity: 'error',
+					detail: error?.response?._data || error,
+					life: 5000,
+				});
+			}
+			this.loading = false;
+		},
+	},
+};
+</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>