Merge pull request #519 from solliancenet/sc-create-agent-ui-mockup

Create agent UI mockup

src/ui/ManagementPortal/app.vue

@@ -94,10 +94,34 @@ main {
 	margin-left: 4px;
 }
 
+.mr-1 {
+	margin-right: 4px;
+}
+
+.mt-2 {
+	margin-top: 8px;
+}
+
 .w-100 {
 	width: 100%;
 }
 
+.h-100 {
+	height: 100%;
+}
+
+.d-flex {
+	display: flex;
+}
+
+.align-center {
+	align-items: center;
+}
+
+.justify-content-end {
+	justify-content: end;
+}
+
 .justify-self-end {
 	justify-self: end;
 }

src/ui/ManagementPortal/components/CreateAgentStepItem.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="step">
+		<div class="step-container">
+			<!-- Editing view -->
+			<div
+				v-if="editing"
+				class="step-container__edit"
+			>
+				<div class="step-container__edit__inner">
+
+					<slot name="edit" />
+
+					<div class="d-flex justify-content-end">
+						<Button
+							class="primary-button mt-2"
+							label="Done"
+							@click="editing = false"
+						/>
+					</div>
+				</div>
+
+				<div class="step-container__edit__arrow" @click="editing = false">
+					<span class="pi pi-arrow-down" style="font-size: 1rem;"></span>
+				</div>
+			</div>
+
+			<!-- Default view -->
+			<div class="step-container__view" @click="editing = true">
+				<div class="step-container__view__inner">
+					<slot />
+				</div>
+
+				<div class="step-container__view__arrow">
+					<span class="pi pi-arrow-down" style="font-size: 1rem;"></span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'CreateAgentStepItem',
+
+	props: ['modelValue'],
+
+	emits: ['update:modelValue'],
+
+	watch: {
+		editing() {
+			this.$emit('update:modelValue', this.editing);
+		},
+
+		modelValue() {
+			this.editing = this.modelValue;
+		}
+	},
+
+	data() {
+		return {
+			editing: false as boolean,
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>
+

src/ui/ManagementPortal/js/api.ts

@@ -4,16 +4,26 @@ import type {
 	AgentDataSource,
 	AgentIndex,
 	AgentGatekeeper,
-	MockCreateAgentRequest
+	CreateAgentRequest
 } from './types';
-import { mockGetAgentIndexesResponse } from './mock';
+import { mockGetAgentIndexesResponse, mockGetAgentDataSourcesResponse } from './mock';
 
 async function wait(milliseconds: number = 1000): Promise<void> {
 	return await new Promise<void>((resolve) => setTimeout(() => resolve(), milliseconds));
 }
 
 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/`, {
@@ -25,23 +35,22 @@ export default {
 
 	async getAgentDataSources(): Promise<AgentDataSource[]> {
 		await wait(this.mockLoadTime);
-		return [];
+		return mockGetAgentDataSourcesResponse;
 	},
 
 	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/mock.ts

@@ -32,3 +32,50 @@ export const mockGetAgentIndexesResponse: AgentIndex[] = [
 		},
 	},
 ];
+
+export const mockGetAgentDataSourcesResponse: AgentIndex[] = [
+	{
+		Name: 'AzureBlob_DataSource_1',
+		Container: {
+			Name: 'documents',
+			Formats: [
+				'pdf',
+			],
+		},
+		Description: 'Azure AI Search index for vectorization testing.',
+		Indexer: 'AzureAISearchIndexer',
+		Settings: {
+			IndexName: 'fllm-test-001',
+		},
+		ConfigurationReferences: {
+			APIKey: 'FoundationaLLM:Vectorization:AzureAISearchIndexingService:APIKey',
+			AuthenticationType: 'FoundationaLLM:Vectorization:AzureAISearchIndexingService:AuthenticationType',
+			Endpoint: 'FoundationaLLM:Vectorization:AzureAISearchIndexingService:Endpoint',
+		},
+	},
+	{
+		Name: 'AzureBlob_DataSource_2',
+		Container: {
+			Name: 'census_data',
+			Formats: [
+				'pdf',
+				'txt',
+				'doc',
+			],
+		},
+		Description: 'Azure AI Search index for the State of the Union agent.',
+		Indexer: 'AzureAISearchIndexer',
+		Settings: {
+			IndexName: 'sotu',
+			TopN: '3',
+			Filters: '[]',
+			EmbeddingFieldName: 'Embedding',
+			TextFieldName: 'Text',
+		},
+		ConfigurationReferences: {
+			APIKey: 'FoundationaLLM:Vectorization:AzureAISearchIndexingService:APIKey',
+			AuthenticationType: 'FoundationaLLM:Vectorization:AzureAISearchIndexingService:AuthenticationType',
+			Endpoint: 'FoundationaLLM:Vectorization:AzureAISearchIndexingService:Endpoint',
+		},
+	},
+];

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,7 +45,7 @@ export default defineNuxtConfig({
 		...(buildLoadingTemplate
 			? {
 					loadingTemplate: () => buildLoadingTemplate,
-			  }
+				}
 			: {}),
 		port: 3001,
 	},