Get real indexes and example create agent post request

src/ui/ManagementPortal/.env.example

@@ -1,2 +1,3 @@
 APP_CONFIG_ENDPOINT="" # A connection string for the App Config service.
 LOCAL_API_URL="" # The URL of the local Management API service (https://localhost:63267). IMPORTANT! Only set this value if you wish to debug the entire solution locally and bypass the App Config service value for the MANAGEMENT API URL.
+API_URL=

src/ui/ManagementPortal/js/api.ts

@@ -4,7 +4,7 @@ import type {
 	AgentDataSource,
 	AgentIndex,
 	AgentGatekeeper,
-	MockCreateAgentRequest
+	CreateAgentRequest
 } from './types';
 import { mockGetAgentIndexesResponse, mockGetAgentDataSourcesResponse } from './mock';
 
@@ -13,7 +13,17 @@ async function wait(milliseconds: number = 1000): Promise<void> {
 }
 
 export default {
-	mockLoadTime: 2000,
+	mockLoadTime: 1000,
+
+	apiUrl: null,
+	setApiUrl(apiUrl) {
+		this.apiUrl = apiUrl;
+	},
+
+	instanceId: null,
+	setInstanceId(instanceId) {
+		this.instanceId = instanceId;
+	},
 
 	async getConfigValue(key: string) {
 		return await $fetch(`/api/config/`, {
@@ -29,19 +39,18 @@ export default {
 	},
 
 	async getAgentIndexes(): Promise<AgentIndex[]> {
-		await wait(this.mockLoadTime);
-		return mockGetAgentIndexesResponse;
+		return await $fetch(`${this.apiUrl}/instances/${this.instanceId}/providers/FoundationaLLM.Vectorization/indexingprofiles`);
 	},
 
 	async getAgentGatekeepers(): Promise<AgentGatekeeper[]> {
 		await wait(this.mockLoadTime);
 		return [];
 	},
 
-	async createAgent(request: MockCreateAgentRequest): Promise<void> {
-		console.log('Mock create agent started:', request);
-		const waitPromise = await wait(this.mockLoadTime);
-		console.log('Mock create agent completed.');
-		return waitPromise;
+	async createAgent(request: CreateAgentRequest): Promise<void> {
+		return await $fetch(`/instances/${this.instanceId}/providers/FoundationaLLM.Agent/agents?api-version=1.0`, {
+			method: 'POST',
+			body: request,
+		});
 	},
 }

src/ui/ManagementPortal/js/types.ts

@@ -44,3 +44,36 @@ export type MockCreateAgentRequest = {
 	};
 	prompt: string;
 };
+
+export type CreateAgentRequest = {
+	name: string;
+	type: 'knowledge-management' | 'analytics';
+	// description: string;
+	// "language_model": {
+	//   "type": "openai",
+	//   "provider": "microsoft",
+	//   "temperature": 0,
+	//   "use_chat": true,
+	//   "api_endpoint": "FoundationaLLM:AzureOpenAI:API:Endpoint",
+	//   "api_key": "FoundationaLLM:AzureOpenAI:API:Key",
+	//   "api_version": "FoundationaLLM:AzureOpenAI:API:Version",
+	//   "version": "FoundationaLLM:AzureOpenAI:API:Completions:ModelVersion",
+	//   "deployment": "FoundationaLLM:AzureOpenAI:API:Completions:DeploymentName"
+	// },
+	indexing_profile: string;
+	embedding_profile: string;
+	sessions_enabled: boolean;
+	orchestrator: string;
+	conversation_history: {
+		enabled: boolean;
+		max_history: number;
+	};
+	gatekeeper: {
+		use_system_setting: boolean;
+		options: {
+			content_safety: number;
+			data_protection: number;
+		};
+	};
+	prompt: string;
+};

src/ui/ManagementPortal/nuxt.config.ts

@@ -45,11 +45,14 @@ export default defineNuxtConfig({
 		...(buildLoadingTemplate
 			? {
 					loadingTemplate: () => buildLoadingTemplate,
-			  }
+				}
 			: {}),
 		port: 3001,
 	},
 	runtimeConfig: {
 		APP_CONFIG_ENDPOINT: process.env.APP_CONFIG_ENDPOINT,
+		public: {
+			apiUrl: process.env.API_URL,
+		}
 	},
 });

src/ui/ManagementPortal/pages/agents/create.vue

@@ -1,4 +1,4 @@
-		
+
 <template>
 	<div>
 		<h2 class="page-header">Create New Agent</h2>
@@ -19,10 +19,10 @@
 
 			<div class="step">
 				<div class="step__header">What type of agent?</div>
-				<div class="step-container cursor-pointer" @click="handleAgentTypeSelect('knowledge')">
+				<div class="step-container cursor-pointer" @click="handleAgentTypeSelect('knowledge-management')">
 					<div class="step-container__view">
 						<div class="step__radio">
-							<RadioButton v-model="agentType" name="agentType" value="knowledge" />
+							<RadioButton v-model="agentType" name="agentType" value="knowledge-management" />
 							<div class="step-container__header">Knowledge Management</div>
 						</div>
 						<div>Best for Q&A, summarization and reasoning over textual data.</div>
@@ -395,7 +395,7 @@
 
 <script lang="ts">
 import api from '@/js/api';
-import type { MockCreateAgentRequest, AgentIndex } from '@/js/types';
+import type { CreateAgentRequest, AgentIndex } from '@/js/types';
 
 const defaultSystemPrompt: string = 'You are an analytic agent named Khalil that helps people find information about FoundationaLLM. Provide concise answers that are polite and professional.';
 
@@ -407,6 +407,8 @@ export default {
 			loading: false as boolean,
 			loadingStatusText: 'Retrieving data...' as string,
 
+			agentType: 'knowledge-management' as CreateAgentRequest['type'],
+
 			dataSources: [],
 			editDataSource: false as boolean,
 			selectedDataSource: null as null | Object,
@@ -487,7 +489,6 @@ export default {
 				},
 			],
 
-			agentType: 'knowledge' as MockCreateAgentRequest['type'],
 			systemPrompt: defaultSystemPrompt as string,
 		};
 	},
@@ -532,12 +533,34 @@ export default {
 		async handleCreateAgent() {
 			this.loading = true;
 			this.loadingStatusText = 'Creating agent...';
-			const previousMockLoadTime = api.mockLoadTime;
-			api.mockLoadTime = 5000;
+
 			await api.createAgent({
+				name: 'Test agent ' + Math.round(Math.random() * 1000),
+				type: this.agentType,
+
+				embedding_profile: this.selectedDataSource?.ConfigurationReferences?.Endpoint,
+				indexing_profile: this.selectedIndexSource?.ConfigurationReferences?.Endpoint,
+
+				// embedding_profile: string;
+				// sessions_enabled: boolean;
+				// orchestrator: string;
+
+				conversation_history: {
+					enabled: this.conversationHistory,
+					// max_history: number,
+				},
+
+				gatekeeper: {
+					use_system_setting: this.gatekeeperEnabled,
+					options: {
+						content_safety: this.gatekeeperContentSafety,
+						data_protection: this.gatekeeperDataProtection,
+					},
+				},
+
 				prompt: this.systemPrompt,
 			});
-			api.mockLoadTime = previousMockLoadTime;
+
 			this.loading = false;
 			// Route to created agent's page
 		},

src/ui/ManagementPortal/plugins/init.ts

@@ -1,11 +1,15 @@
 import { defineNuxtPlugin } from '#app';
 import { useAppConfigStore } from '@/stores/appConfigStore';
+import api from '@/js/api';
 
 export default defineNuxtPlugin(async (nuxtApp: any) => {
 	// Load config variables into the app config store
 	const appConfigStore = useAppConfigStore(nuxtApp.$pinia);
 	await appConfigStore.getConfigVariables();
 
+	api.setApiUrl(appConfigStore.apiUrl);
+	api.setInstanceId(appConfigStore.instanceId);
+
 	// Provide global properties to the app
 	nuxtApp.provide('appConfigStore', appConfigStore);
 });

src/ui/ManagementPortal/stores/appConfigStore.ts

@@ -37,7 +37,7 @@ export const useAppConfigStore = defineStore('appConfig', {
 	actions: {
 		async getConfigVariables() {
 			const [
-				// apiUrl,
+				apiUrl,
 				instanceId,
 				logoUrl,
 				logoText,
@@ -59,6 +59,7 @@ export const useAppConfigStore = defineStore('appConfig', {
 				authCallbackPath,
 			] = await Promise.all([
 				// api.getConfigValue('FoundationaLLM:APIs:ManagementAPI:APIUrl'),
+				new Promise((resolve) => resolve(useRuntimeConfig('apiUrl').public.apiUrl)),
 
 				api.getConfigValue('FoundationaLLM:Instance:Id'),
 
@@ -83,7 +84,7 @@ export const useAppConfigStore = defineStore('appConfig', {
 				api.getConfigValue('FoundationaLLM:Management:Entra:CallbackPath'),
 			]);
 
-			// this.apiUrl = apiUrl;
+			this.apiUrl = apiUrl;
 			this.instanceId = instanceId;
 
 			this.logoUrl = logoUrl;