From 4a43ff984ab2a88e977efd12f8d9736ef27ba869 Mon Sep 17 00:00:00 2001
From: Emanuele Ferrelli <emanuele.ferrelli@accenture.com>
Date: Fri, 14 Mar 2025 15:08:17 +0100
Subject: [PATCH] Update Apollo layput Resolved Similarity Search bug

---
 package.json                                  |   5 +-
 src/assets/tailwind.css                       |   4 +
 src/layout/AppTopbar.vue                      |  24 +-
 src/stores/KsDocumentStore.js                 |   2 -
 src/views/pages/ksDocuments/KsDocuments.vue   | 245 ++++-----
 .../pages/ksDocuments/KsNewDocumentForm.vue   | 512 +++++++++++++-----
 .../similaritySearch/KsSimilaritySearch.vue   |  27 +-
 7 files changed, 538 insertions(+), 281 deletions(-)

diff --git a/package.json b/package.json
index a3de1d2..d13f55a 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
         "axios": "^1.7.2",
         "chart.js": "3.3.2",
         "moment": "^2.30.1",
-        "pinia": "^2.2.6",
+        "pinia": "^2.3.0",
         "primeicons": "^6.0.1",
         "primevue": "^4.0.0",
         "prismjs": "^1.29.0",
@@ -25,6 +25,7 @@
         "vue": "^3.4.34",
         "vue-authenticate-2": "^2.2.0",
         "vue-router": "^4.4.0",
+        "vue3-spinner": "^0.0.17",
         "webstomp-client": "^1.2.6"
     },
     "devDependencies": {
@@ -41,6 +42,6 @@
         "tailwindcss": "^3.4.6",
         "tailwindcss-primeui": "^0.3.2",
         "unplugin-vue-components": "^0.27.3",
-        "vite": "^5.3.1"
+        "vite": "^5.4.10"
     }
 }
diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index b5c61c9..8940a4d 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+img.p-fileupload-file-thumbnail {
+    display:none !important;
+  }
diff --git a/src/layout/AppTopbar.vue b/src/layout/AppTopbar.vue
index 95188f3..1ef9286 100644
--- a/src/layout/AppTopbar.vue
+++ b/src/layout/AppTopbar.vue
@@ -5,9 +5,12 @@ import { useAuth } from '@websanova/vue-auth/src/v3.js';
 import { useRouter } from 'vue-router';
 import { watch, ref, computed } from 'vue';
 import { useRoute } from 'vue-router';
-//import AppConfigurator from './AppConfigurator.vue';
+
+import { LoadingStore } from '../stores/LoadingStore.js';
 import AppProfileMenu from './AppProfileMenu.vue';
 import { UserPrefStore } from '../stores/UserPrefStore.js';
+import { JellyfishLoader, RiseLoader } from "vue3-spinner";
+
 
 const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
 const auth = useAuth();
@@ -16,6 +19,8 @@ const userPrefStore = UserPrefStore();
 const router = useRouter();
 const selectedApp = ref(userPrefStore.getSelApp);
 const route = useRoute();
+const loadingStore = LoadingStore()
+
 
 async function updateApplication() {
     await userPrefStore.setSelectedApp(selectedApp.value);
@@ -71,9 +76,17 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
 
         <div class="layout-topbar-actions">
             <div class="layout-config-menu">
-                <button type="button" class="layout-topbar-action" @click="toggleDarkMode">
+                <!-- <button type="button" class="layout-topbar-action" @click="toggleDarkMode">
                     <i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
-                </button>
+                </button> -->
+                <div v-if="loadingStore.isLoading">
+                    <!--<ProgressSpinner v-if="loadingStore.loadingType=='data'" style="width: 25px; height: 25px; margin-top: 6px" strokeWidth="2" fill="transparent"/>-->
+                    <JellyfishLoader v-if="loadingStore.loadingType=='ai'" scale="0.5" color="#a100ff" style="width: 25px; height: 10px; margin-right: 25px; margin-top:-5px"/>
+                    <RiseLoader  v-if="loadingStore.loadingType=='data'" color="#a100ff"   style="scale: 0.5; height: 10px; margin-top:5px"/>
+
+                </div>
+            </div>
+
 
                 <div class="topbar-project">
                     <button @click="redirectProject()" class="p-button p-button-outlined"
@@ -83,9 +96,9 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
                          <small>PROJECT:</small> {{ userPrefStore.user.selectedProject.fe_name }}
                     </span>   -->
                 </div>
-                <Dropdown v-model="selectedApp" :options="userPrefStore.availableApp" optionLabel="fe_name"
+                <!-- <Dropdown v-model="selectedApp" :options="userPrefStore.availableApp" optionLabel="fe_name"
                     placeholder="Select an Application" class="dropdown-list menu-list" @change="updateApplication()"
-                    :disabled="isDropdownDisabled" />
+                    :disabled="isDropdownDisabled" /> -->
                 <!--div class="relative">
                     <button
                         v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
@@ -94,7 +107,6 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
                     </button>
                     <AppConfigurator />
                 </div-->
-            </div>
 
             <button class="layout-topbar-menu-button layout-topbar-action"
                 v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }">
diff --git a/src/stores/KsDocumentStore.js b/src/stores/KsDocumentStore.js
index 7b35a1e..c30d693 100644
--- a/src/stores/KsDocumentStore.js
+++ b/src/stores/KsDocumentStore.js
@@ -12,11 +12,9 @@ export const KsDocumentStore = defineStore('ksdocument_store', () => {
 
 
     async function fetchKsDocument() {
-        console.log("i'm in");
         loadingStore.scenario_loading = true;
         await KsDocumentService.getKsDocuments().then(resp => {
             lstKsDocument.value = resp.data;
-            console.log("lstKsDocument", lstKsDocument.value);
             loadingStore.scenario_loading = false;
         });
         
diff --git a/src/views/pages/ksDocuments/KsDocuments.vue b/src/views/pages/ksDocuments/KsDocuments.vue
index 3b691d6..f2feb32 100644
--- a/src/views/pages/ksDocuments/KsDocuments.vue
+++ b/src/views/pages/ksDocuments/KsDocuments.vue
@@ -1,18 +1,18 @@
 <template>
-	<div class="card">
-		<Toast />
+	<Toast />
 		<ConfirmPopup></ConfirmPopup>
-		<div v-if="loadingStore.another_loading" class="loading-container">
-			<div class="spinner-container">
-				<ProgressSpinner class="spinner" />
-				<p class="loading-text">Loading data...</p>
-			</div>
-		</div>
-
-		<DataTable v-model:filters="filters" :value="ksdocuments" paginator showGridlines :rows="10" dataKey="id"
-			filterDisplay="menu" :loading="loadingStore.another_loading"
-			:globalFilterFields="['ingestionInfo.metadata.KsApplicationName', 'ingestionInfo.metadata.KsFileSources', 'ingestionInfo.metadata.KsDocSource', 'ingestionStatus', 'ingestionDateFormat']">
-			<template #header>
+   		<div >
+				<DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
+                @rowCollapse="onRowCollapse" :value="ksdocuments" 
+				:loading="loadingStore.loading_exectuion"
+				:paginator="true" :rows="10"
+                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
+                :rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader"
+                :sortOrder="1" filterDisplay="menu"
+				:globalFilterFields="['ingestionInfo.metadata.KsApplicationName', 'ingestionInfo.metadata.KsFileSources', 'ingestionInfo.metadata.KsDocSource', 'ingestionStatus', 'ingestionDateFormat']"
+                tableStyle="min-width: 70rem" removableSort>
+				<template #header>
 				<div class="flex items-center justify-between gap-4 p-4 ">
 					<span class="text-xl font-bold">Knowledge Source Documents</span>
 					<div class="flex items-center gap-2 flex-grow">
@@ -20,53 +20,19 @@
 							<InputIcon>
 								<i class="pi pi-search" />
 							</InputIcon>
-							<InputText v-model="filters['global'].value" placeholder="Keyword Search" />
+							<InputText v-model="filters['global'].value" placeholder="Search..." />
 						</IconField>
 					</div>
-					<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" v-tooltip="'Create New Document'"
-						class="mr-2" />
+					<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" 
+						v-tooltip.left="'Add New Document'"
+						class="mr-2 p-button-sm" />
 					<Button icon="pi pi-check-circle" rounded raised @click="startlngestion()"
-						v-tooltip="'Start All documents Ingestion'" class="mr-8" :disabled="allDocumentsIngested"
-						:class="{ 'p-button-danger': allDocumentsIngested }" />
+						v-tooltip.left="'Start All documents Ingestion'" 
+						class="mr-8 p-button-sm"
+						:disabled="allDocumentsIngested" :class="{ 'p-button': allDocumentsIngested }" />
 				</div>
 			</template>
 			<template #empty>No Records found</template>
-
-			<Column field="ingestionInfo.metadata.KsApplicationName" header="ApplicationName" sortable
-				style="min-width: 12rem">
-				<template #body="{ data }">
-					{{ data.ingestionInfo.metadata.KsApplicationName }}
-				</template>
-				<template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
-						placeholder="Search by File" />
-				</template>
-			</Column>
-
-			<Column field="ingestionInfo.metadata.KsProjectName" header="KsProjectName" sortable
-				style="min-width: 12rem">
-				<template #body="{ data }">
-					{{ data.ingestionInfo.metadata.KsProjectName }}
-				</template>
-			</Column>
-			<Column field="ingestionInfo.metadata.KsFileSource" header="FileSource" sortable>
-				<template #body="{ data }">
-					{{ data.ingestionInfo.metadata.KsFileSource }}
-				</template>
-				<template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
-						placeholder="Search by File Name" />
-				</template>
-			</Column>
-			<Column field="ingestionInfo.metadata.KsDocSource" header="DocSource" sortable style="min-width: 12rem">
-				<template #body="{ data }">
-					{{ data.ingestionInfo.metadata.KsDocSource }}
-				</template>
-				<template #filter="{ filterModel, filterCallback }">
-					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
-						placeholder="Search by File" />
-				</template>
-			</Column>
 			<Column field="ingestionStatus" header="Status" sortable>
 				<template #body="slotProps">
 					<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
@@ -80,6 +46,34 @@
 					</Select>
 				</template>
 			</Column>
+			<Column field="ingestionInfo.metadata.KsFileSource" header="FileName" sortable>
+				<template #body="{ data }">
+					{{ data.fileName }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search by File Name" />
+				</template>
+			</Column>
+			<Column field="ingestionInfo.metadata.KsApplicationName" header="ApplicationName" sortable
+				style="min-width: 12rem">
+				<template #body="{ data }">
+					{{ data.ingestionInfo.metadata.KsApplicationName }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search by File" />
+				</template>
+			</Column>
+			<Column field="ingestionInfo.metadata.KsDocSource" header="DocType" sortable style="min-width: 12rem">
+				<template #body="{ data }">
+					{{ data.ingestionInfo.metadata.KsDoctype }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search by File" />
+				</template>
+			</Column>
 			<Column header="Date" filterField="ingestionDateFormat" dataType="date" style="min-width: 10rem">
 				<template #body="{ data }">
 					{{ formatDate(data.ingestionDate) }}
@@ -89,34 +83,33 @@
 						@change="updateFilterModel" />
 				</template>
 			</Column>
-			<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
-				<template #body="slotProps">
-					<div class="flex justify-center items-center space-x-3">
-						<!--Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"
-							v-tooltip="'Edit the information of document'" /-->
-						<Button type="button" icon="pi pi-play" rounded
-							@click="startIndividualngestion(slotProps.data.id)"
-							v-tooltip="'Start Ingestion of document'"
+			<Column field="id" :style="{ position: 'sticky', right: '0', zIndex: '1', background: '#f3f3f3' }">
+				<!-- <Column field="id" :style="{ position: 'sticky', right: '0', zIndex: '1'}">  -->
+				 <template #body="slotProps"> 
+					 <div class="flex justify-center items-center space-x-3">
+						<!-- PARTE EDIT DA CREARE -->
+						<!-- <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"
+							v-tooltip="'Edit the information of document'" /> -->
+						 <Button type="button" icon="pi pi-play" rounded @click="startIndividualngestion(slotProps.data.id)"
+							v-tooltip.left="'Start Ingestion of document'"
 							:disabled="slotProps.data.ingestionStatus === 'INGESTED'"
-							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }" />
-						<Button type="button" icon="pi pi-trash" rounded @click="confirmDelete(slotProps.data.id)"
-							v-tooltip="'Delete the ingested Record'"
-							:disabled="slotProps.data.ingestionStatus === 'NEW'"
-							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" />
+							:class="{ 'p-button': slotProps.data.ingestionStatus === 'INGESTED' }" />
+						<Button type="button" icon="pi pi-trash" rounded @click="confirmDeleteFromVectorStore(slotProps.data.id)"
+							v-tooltip.left="'Delete the ingested Record'"
+							:disabled="slotProps.data.ingestionStatus !== 'INGESTED'"
+							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }" />
 						<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
-							v-tooltip="'Similarity Search'" :disabled="slotProps.data.ingestionStatus === 'NEW'"
-							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" />
+							v-tooltip.left="'Similarity Search'" 
+							:disabled="slotProps.data.ingestionStatus !== 'INGESTED'"
+							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }" />
 						<Button type="button" icon="pi pi-download" rounded @click="downloadFile(slotProps.data)"
-							v-tooltip="'Download file'" :disabled="slotProps.data.ingestionStatus === 'NEW'"
-							:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" />
-					</div>
-				</template>
+							v-tooltip.left="'Download file'"
+							class="mr-2 p-button" /> 
+					</div> 
+				 </template> 
 			</Column>
+
 		</DataTable>
-		<Dialog header="Ingestion Result" v-model:visible="ingestionDialogVisible" :modal="true" :closable="false">
-			<p>{{ ingestionResult }}</p>
-			<Button label="OK" icon="pi pi-check" @click="ingestionDialogVisible = false" />
-		</Dialog>
 	</div>
 </template>
 
@@ -143,13 +136,14 @@ import { KsDocumentStore } from '../../../stores/KsDocumentStore';
 import { LoadingStore } from '../../../stores/LoadingStore';
 import { UserPrefStore } from '../../../stores/UserPrefStore';
 
+const expandedRows = ref([]);
 const router = useRouter()
 const ksdocuments = ref(null);
 const loading = ref(true);
 const toast = useToast();
 const confirm = useConfirm();
 
-const ingestionDialogVisible = ref(false);
+//const ingestionDialogVisible = ref(false);
 const ingestionResult = ref('');
 const filters = ref();
 const userPrefStore = UserPrefStore();
@@ -170,18 +164,23 @@ const initFilters = () => {
 
 initFilters();
 
-const statuses = ref(['NEW', 'INGESTED', 'FAILED']); // Add your statuses here
+const statuses = ref(['NEW', 'LOADED','INGESTED', 'FAILED']); // Add your statuses here
 
 onMounted(() => {
-
 	userPrefStore.fetchUserData().then(() => {
 		updateDocuments();
-
 	});
-
-
 });
 
+const onRowExpand = (event) => {
+  console.log("Row expanded:", event.data);
+};
+
+const onRowCollapse = (event) => {
+  console.log("Row collapsed:", event.data);
+};
+
+
 watch(() => userPrefStore.getSelApp, updateDocuments, { immediate: true });
 
 function updateDocuments() {
@@ -189,6 +188,7 @@ function updateDocuments() {
 	ksDocumentStore.fetchKsDocument().then(() => {
 
 		ksdocuments.value = getCustomDatewithAllResponse();
+		//ingestionDialogVisible.value = false;
 		//loading.value = false;
 	});
 };
@@ -205,7 +205,7 @@ const allDocumentsIngested = computed(() => {
 const getStatus = (data) => {
 	if (data.ingestionStatus === 'INGESTED') {
 		return 'success';
-	} else if (data.ingestionStatus === 'NEW') {
+	} else if (data.ingestionStatus === 'LOADED') {
 		return 'danger';
 	} else {
 		return 'warn';
@@ -269,8 +269,8 @@ const downloadFile = async (doc) => {
 		link.click();
 		link.remove();*/
 	} catch (error) {
-		console.error("Errore durante il download:", error);
-		alert("Errore durante il download. Controlla il nome del file.");
+		console.error("Error while downloading the file:", error);
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Error while downloading the file. Check the file name.', life: 3000 });
 	}
 };
 
@@ -280,23 +280,21 @@ const editKsDocument = (data) => {
 }
 
 const openSimilaritySearch = (doc) => {
-	console.log("doc", doc)
 	ksDocumentStore.setSelectedKsDocument(doc).then(() => {
 		router.push({ name: 'ks_similarity_search' });
 	});
 }
 
-const confirmDelete = (id) => {
-	console.log("id", id);
-
+const confirmDeleteFromVectorStore = (id) => {
+	console.log("OK");
 	confirm.require({
-		target: event.currentTarget,
+		target: event.target,
 		message: 'Are you sure you want to proceed?',
 		icon: 'pi pi-exclamation-triangle',
 		rejectProps: {
 			label: 'Cancel',
-			severity: 'secondary',
-			outlined: true
+			class:"p-button",
+			outlined: true,
 		},
 		acceptProps: {
 			label: 'Delete',
@@ -304,7 +302,6 @@ const confirmDelete = (id) => {
 		},
 		accept: () => {
 			const documentToDelete = ksdocuments.value.find(doc => doc.id === id);
-			console.log("documentToDelete", documentToDelete)
 			if (!documentToDelete) {
 				console.error('Document not found');
 				return;
@@ -318,45 +315,46 @@ const confirmDelete = (id) => {
 				ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource,
 				ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
 			};
-			console.log("requestPayload", requestPayload)
 
-			axios.post('/fe-api/vector-store/deleteRecords', requestPayload)
+			axios.post('/fe-api/vector-store/deleteRecordsFromVectorStore', requestPayload)
 				.then(response => {
 					console.log('Delete resource:', response.data)
-					ksdocuments.value = ksdocuments.value.filter(doc => doc.id !== id);
-					console.log('ksdocuments.value', ksdocuments.value)
-					toast.add({ severity: 'info', summary: 'Confirmed', detail: 'deletion is in PROGRESS', life: 3000 });
+					updateDocuments(); // Call updateDocuments after successful deletion
+					toast.add({ severity: 'success', summary: 'Success', detail: 'Deletion Completed', life: 3000 });
 				})
 				.catch(error => {
 					console.error('Error deleting records: ', error)
 					toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Deletion', life: 3000 });
 				});
-		},
-		reject: () => {
-			toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 })
 		}
 	})
 };
 
 //ingestion
 const startIndividualngestion = (id) => {
+	toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Ingestion', life: 3000 });
 	axios.get(`/test/ingest_document/${id}`)
 		.then(response => {
 			ingestionResult.value = response.data;
 			if (response.data.status == "OK") {
 				ksdocuments.value.forEach(element => {
+					updateDocuments();
 					if (response.data.ingestedDocumentId.includes(element.id)) {
 						element.status = "INGESTED"
+						updateDocuments();
+						toast.add({severity: 'success', summary: 'Success', detail: 'File ingested successfully!', life: 3000});
 					}
 				});
 			} else {
-				ingestionResult.value = `Error: ${response.data.message}`;
+				ingestionResult.value = `Error: ${response.data.message}`;		
 			}
 
-			ingestionDialogVisible.value = true;
+			//ingestionDialogVisible.value = true;
 		})
 		.catch(error => {
-			ingestionDialogVisible.value = true;
+			//ingestionDialogVisible.value = true;
+			console.error('Error ingesting record: ', error)
+			toast.add({ severity: 'error', summary: 'Error', detail: 'Error while ingesting', life: 3000 });
 		});
 };
 
@@ -374,18 +372,18 @@ const startlngestion = () => {
 				ingestionResult.value = `Error: ${response.data.message}`;
 			}
 
-			ingestionDialogVisible.value = true;
+			//ingestionDialogVisible.value = true;
 		})
 		.catch(error => {
-			ingestionDialogVisible.value = true;
+			//ingestionDialogVisible.value = true;
+			console.error('Error ingesting records: ', error)
+			toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Ingestion', life: 3000 });
 		});
 };
 
 //new record creation
 const newKsDocument = () => {
-	console.log('new');
 	router.push({ name: 'ks-document-new' });
-
 }
 
 // Function to format date string
@@ -394,6 +392,7 @@ function formatDate(dateString) {
 	return moment(dateString).format('MM/DD/YYYY');
 }
 
+
 </script>
 
 <style scoped>
@@ -411,27 +410,6 @@ function formatDate(dateString) {
 	cursor: not-allowed;
 }
 
-.space-x-3>*+* {
-	margin-left: 1rem;
-	/* Adjust as needed for desired spacing */
-}
-
-.loading-container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: fixed;
-	/* Change to fixed */
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 9999;
-	/* Ensure it’s on top of everything */
-	background-color: rgba(255, 255, 255, 0.8);
-	/* Optional: Add a background to obscure content */
-}
-
 .spinner-container {
 	display: flex;
 	flex-direction: column;
@@ -447,12 +425,6 @@ function formatDate(dateString) {
 	color: var(--primary-color, #007bff);
 }
 
-.loading-text {
-	font-size: 1.2rem;
-	animation: pulse 1.5s infinite;
-	margin-top: 10px;
-	color: var(--primary-color, #007bff);
-}
 
 @keyframes spin {
 	0% {
@@ -491,4 +463,5 @@ function formatDate(dateString) {
 .card {
 	margin: 2rem;
 }
+
 </style>
\ No newline at end of file
diff --git a/src/views/pages/ksDocuments/KsNewDocumentForm.vue b/src/views/pages/ksDocuments/KsNewDocumentForm.vue
index f552b00..ef59447 100644
--- a/src/views/pages/ksDocuments/KsNewDocumentForm.vue
+++ b/src/views/pages/ksDocuments/KsNewDocumentForm.vue
@@ -1,130 +1,240 @@
 <template>
+  <!-- <Toast />
+  <ConfirmPopup></ConfirmPopup>
+  <div v-if="loadingStore.another_loading" class="loading-container">
+    <div class="spinner-container">
+      <ProgressSpinner class="spinner" />
+      <p class="loading-text">Loading...</p>
+    </div>
+  </div> -->
   <Fluid>
-    <div class="flex mt-6">
-      <div class="card flex flex-col gap-4 w-full">
-        <div>
-          <h2 class="text-3xl font-bold mb-4">Ks document</h2>
-        </div>
-        <form @submit.prevent="submitForm" class="p-fluid">
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="description" v-tooltip="'A brief overview of the document.'">Document
-                Description</label>
-              <InputText id="description" type="text" v-model="formData.description" required class="w-full" />
-            </span>
-          </div>
-
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="type"
-                v-tooltip="'Specify the type of file here. e.g, PDF Document, DOCX, TXT, MD Document etc..'">File
-                Type</label>
-              <InputText id="type" v-model="formData.type" required class="w-full" />
-            </span>
-          </div>
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="ksProjectName" v-tooltip="'Enter the project name here.'">KS Project Name</label>
-              <InputText id="ksProjectName" v-model="userPrefStore.selectedProject.internal_name" required
-                class="w-full" />
-            </span>
-          </div>
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="ksApplicationName" v-tooltip="'Enter the application name here.'">KS Application Name</label>
-              <InputText id="ksApplicationName" v-model="userPrefStore.getSelApp.internal_name" required
-                class="w-full" />
-            </span>
-          </div>
-
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="ksDocType" v-tooltip="'Specify the type of document e.g functional, code_istruction'">KS
-                Document Type</label>+
-              <Dropdown id="ksDocType" v-model="formData.ksDocType" :options="documentTypeOptions" optionLabel="name">
-              </Dropdown>
-            </span>
-          </div>
-
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="ksDocSource"
-                v-tooltip="'The KS Document Source field is intended to capture the origin or source from where the document was obtained or associated.  ex.. Retrieved from DevopsJ2Cloud Git Repository - CSV System Configuration '">KS
-                Document Source</label>
-              <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
-            </span>
-          </div>
-
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="defaultChunkSize" v-tooltip="'Define the default size for chunks of data.'">Default Chunk
-                Size</label>
-              <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
-            </span>
-          </div>
-
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="minChunkSize" v-tooltip="'Specify the minimum allowable size for chunks'">Min Chunk
-                Size</label>
-              <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
-            </span>
-          </div>
-
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="maxNumberOfChunks" v-tooltip="'Set the maximum number of chunks allowed.'">Max Number of
-                Chunks</label>
-              <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
-            </span>
-          </div>
-
-          <div class="col-12 md:col-6 mb-4">
-            <span class="p-float-label">
-              <label for="minChunkSizeToEmbed" v-tooltip="'Define the minimum chunk size that can be embedded.'">Min
-                Chunk Size to
-                Embed</label>
-              <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
-            </span>
-          </div>
-
-          <div class="col-12 mb-4">
-            <label for="file" class="block text-lg mb-2" v-tooltip="'Upload the file here.'">File</label>
-            <div class="flex align-items-center">
-              <FileUpload ref="fileUpload" mode="basic" :maxFileSize="10000000000" chooseLabel="Select File"
-                class="p-button-rounded" @select="onFileSelect" />
+    <h1 class="text-xl font-bold mt-6">KS Document</h1>
+    <div class="card flex mt-2 flex-col gap-4 w-full justify-center">
+      <Stepper value="1" linear :loading="loadingStore.another_loading">
+        <StepList>
+          <Step value="1">Add document</Step>
+          <Step value="2">Set parameters</Step>
+          <Step value="3">Ingest document</Step>
+        </StepList>
+        <StepPanels>
+          <StepPanel value="1" v-slot="{ activateCallback }">
+            <div class="flex flex-col h-48">
+              <FileUpload ref="fileUpload" :maxFileSize="10000000000" chooseLabel="Select File" class="p-button"
+                style="width: 150px;" @select="onFileSelect" @remove="onFileRemove" :showUploadButton="false"
+                :showCancelButton="false" v-model:files="selectedFile" :fileLimit=1>
+                <template #empty>
+                  <div class="flex items-center justify-center flex-col">
+                    <i class="pi pi-cloud-upload !border-2 !rounded-full !p-8 !text-4xl !text-muted-color" />
+                    <p class="mt-6 mb-0">Drag and drop the file you want to add to the knowledge base. You can upload
+                      only one file.</p>
+                  </div>
+                </template>
+              </FileUpload>
             </div>
-          </div>
-          <Button type="submit" label="Submit" :fluid="false"></Button>
-        </form>
-      </div>
+            <div class="flex mt-16 pt-6 justify-end">
+              <Button label="Next" icon="pi pi-arrow-right" @click="activateCallback('2')" 
+                :disabled="!isFileSelected"
+                style="width: 150px;" class="p-button" v-tooltip.top="!isFileSelected ? 'Please select a file' : ''" />
+            </div>
+          </StepPanel>
+          <form @submit.prevent="submitForm" class="p-fluid">
+            <StepPanel value="2" v-slot="{ activateCallback }">
+              <div class="flex flex-col h-full">
+                <Tabs class="mt-6">
+                  <TabList>
+                    <Tab value="0">Base</Tab>
+                    <Tab value="1">Advanced</Tab>
+                  </TabList>
+                  <TabPanels>
+                    <TabPanel value="0">
+                      <div class="col-12 md:col-6 mb-4 mt-4">
+                        <span class="p-float-label">
+                          <label for="description">Document Description</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'A brief overview of the document'"></i>
+                          <InputText id="description" type="text" v-model="formData.description" required
+                            class="w-full" />
+                        </span>
+                      </div>
+                      <div class="col-12 md:col-6 mb-4">
+                        <span class="p-float-label">
+                          <label for="type">File Type</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Specify the type of file'"></i>
+                          <InputText id="type" v-model="formData.type" required class="w-full" />
+                        </span>
+                      </div>
+                      <div class="col-12 md:col-6 mb-4">
+                        <span class="p-float-label">
+                          <label for="ksProjectName">KS Project Name</label>
+                          <InputText id="ksProjectName" v-model="userPrefStore.selectedProject.internal_name" required
+                            class="w-full" :disabled="true" />
+                        </span>
+                      </div>
+                      <div class="col-12 md:col-6 mb-4">
+                        <span class="p-float-label">
+                          <label for="ksApplicationName">KS Application Name</label>
+                          <Dropdown id="ksApplicationName" v-model="formData.ksApplicationName"
+                          :options="availableAppOptions" optionLabel="name" required class="w-full"></Dropdown>
+                        </span>
+                      </div>
+                      <div class="col-12 md:col-6 mb-4">
+                        <span class="p-float-label">
+                          <label for="ksDocType">KS Document Type</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Specify the type of document'"></i>
+                          <Dropdown id="ksDocType" v-model="formData.ksDocType" :options="documentTypeOptions"
+                            optionLabel="name" :required class="w-full"></Dropdown>
+                        </span>
+                      </div>
+                      <div class="col-12 md:col-6 mb-4">
+                        <span class="p-float-label">
+                          <label for="ksDocSource">KS Document Source</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Specify the document source. e.g, Retrieved from DevopsJ2Cloud Git Repository - CSV System Configuration '"></i>
+                          <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
+                        </span>
+                      </div>
+                    </TabPanel>
+                    <TabPanel value="1">
+                      <div class="col-12 md:col-6 mb-4 mt-4">
+                        <span class="p-float-label">
+                          <label for="defaultChunkSize">Default Chunk Size</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Define the default size for chunks of data'"></i>
+                          <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required
+                            class="w-full" />
+                        </span>
+                        <small v-if="errors.defaultChunkSize" class="text-red-500">{{ errors.defaultChunkSize }}</small>
+                      </div>
+                      <div class="col-12 md:col-6 mb-4">
+                        <span class="p-float-label">
+                          <label for="minChunkSize">Min Chunk Size</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Specify the minimum allowable size for chunks'"></i>
+                          <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
+                        </span>
+                        <small v-if="errors.minChunkSize" class="text-red-500">{{ errors.minChunkSize }}</small>
+                      </div>
+                      <div class="col-12 md:col-6 mb-4">
+                        <span class="p-float-label">
+                          <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Define the minimum chunk size that can be embedded'"></i>
+                          <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required
+                            class="w-full" />
+                        </span>
+                        <small v-if="errors.minChunkSizeToEmbed" class="text-red-500">{{ errors.minChunkSizeToEmbed
+                          }}</small>
+                      </div>
+                      <div class="col-12 md:col-6 mb-4">
+                        <span class="p-float-label">
+                          <label for="maxNumberOfChunks">Max Number of Chunks</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Set the maximum number of chunks allowed'"></i>
+                          <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required
+                            class="w-full" />
+                        </span>
+                        <small v-if="errors.maxNumberOfChunks" class="text-red-500">{{ errors.maxNumberOfChunks
+                          }}</small>
+                      </div>
+                    </TabPanel>
+                  </TabPanels>
+                </Tabs>
+              </div>
+              <div class="flex justify-between pt-6">
+                <Button label="Back"
+                  :style="{ width: '150px', backgroundColor: '#9c9c9c', color: 'white', border: '1px grey' }"
+                  icon="pi pi-arrow-left" @click="activateCallback('1')" />
+                <Button label="Next" style="width: 150px;" class="p-button" icon="pi pi-arrow-right" iconPos="right"
+                  @click="activateCallback('3')" :disabled="!isFormValid"
+                  v-tooltip.top="!isFormValid ? 'Please fill in all fields' : ''" />
+              </div>
+            </StepPanel>
+            <StepPanel value="3" v-slot="{ activateCallback }">
+              <div class="flex flex-col mt-8 h-48">
+                <p v-if="selectedFile" class="text-center">You can execute the ingestion for the following file:</p>
+                <p v-if="selectedFile" class="text-center">{{ selectedFile.name }}</p>
+                <div class="flex justify-center mt-4">
+                  <Button type="submit" label="Ingest" :fluid="false"></Button>
+                </div>
+              </div>
+              <div class="flex justify-between pt-6">
+                <Button label="Back"
+                  :style="{ width: '150px', backgroundColor: '#9c9c9c', color: 'white', border: '1px grey' }"
+                  icon="pi pi-arrow-left" @click="activateCallback('2')" />
+              </div>
+            </StepPanel>
+          </form>
+        </StepPanels>
+      </Stepper>
     </div>
   </Fluid>
+  <Dialog v-model:visible="showDialog" header="Confirm Overwrite" :modal="true">
+    <p>The document "{{ selectedFile?.name }}" already exists with status "{{ existingDocument?.ingestionStatus }}". Do you want to overwrite it?</p>
+    <template #footer>
+      <Button label="Cancel" icon="pi pi-times" @click="cancelOverwrite" class="p-button" />
+      <Button label="Overwrite" icon="pi pi-check" @click="confirmOverwrite" class="p-button-danger"/>
+    </template>
+  </Dialog>
 </template>
 
 <script setup>
 import axios from 'axios';
 import { useToast } from 'primevue/usetoast';
-import { ref } from 'vue';
+import { ref, watch, computed, onMounted, nextTick } from 'vue';
 import { useRouter } from 'vue-router';
 import { UserPrefStore } from '../../../stores/UserPrefStore';
+import Stepper from 'primevue/stepper';
+import StepList from 'primevue/steplist';
+import StepPanels from 'primevue/steppanels';
+import Step from 'primevue/step';
+import StepPanel from 'primevue/steppanel';
+import { LoadingStore } from '../../../stores/LoadingStore';
+import { KsDocumentStore } from '../../../stores/KsDocumentStore';
 
 const toast = useToast();
 const router = useRouter();
 const userPrefStore = UserPrefStore();
+const loadingStore = LoadingStore();
+const ksDocumentStore = KsDocumentStore();
+const required = ref([]);
+const ingestionResult = ref('');
+const fileUploaded = ref(false);
+const minChunkSize = ref(50);
+const maxNumberOfChunks = ref(1000);
+const minChunkSizeToEmbed = ref(50);
+const fileUpload = ref(null);
+const selectedFile = ref(null);
+const ingestionDialogVisible = ref(false);
+const ksdocuments = ref(null);
+const showDialog = ref(false);
+const existingDocument = ref(null);
+const formDataToSend = ref(new FormData());
+
 const documentTypeOptions = ref([
   { name: 'Functional', value: 'functional' },
   { name: 'Code Instruction', value: 'code_instruction' },
   { name: 'Specification', value: 'specification' },
   { name: 'Other', value: 'other' }
 ]);
+const availableAppOptions = ref([
+  { name: 'Cross', value: '' },
+  ...userPrefStore.availableApp.map(app => ({ name: app.internal_name, value: app.internal_name }))
+]);
+const errors = ref({
+  defaultChunkSize: "",
+  minChunkSize: "",
+  maxNumberOfChunks: "",
+  minChunkSizeToEmbed: "",
+});
 
 const formData = ref({
   description: '',
   type: '',
   ksProjectName: '',
-  ksApplicationName: '',
-  ksDocType: 'functional',
+  ksApplicationName: { name: 'Cross', value: '' },
+  ksDocType: { name: 'Functional', value: 'functional' },
   ksDocSource: '',
   defaultChunkSize: 2000,
   minChunkSize: 50,
@@ -132,48 +242,200 @@ const formData = ref({
   minChunkSizeToEmbed: 50
 });
 
-const fileUpload = ref(null);
-const selectedFile = ref(null);
 
-const onFileSelect = (event) => {
-  selectedFile.value = event.files[0];
+const isFileSelected = computed(() => selectedFile.value !== null);
+
+watch(
+  () => formData.value.defaultChunkSize,
+  (newValue) => validateField("defaultChunkSize", newValue, 500, 2000),
+);
+watch(
+  () => formData.value.minChunkSize,
+  (newValue) => validateField("minChunkSize", newValue, minChunkSize.value, 100)
+);
+watch(
+  () => formData.value.maxNumberOfChunks,
+  (newValue) => validateField("maxNumberOfChunks", newValue, maxNumberOfChunks.value, 2000)
+);
+watch(
+  () => formData.value.minChunkSizeToEmbed,
+  (newValue) => validateField("minChunkSizeToEmbed", newValue, minChunkSizeToEmbed.value, 100)
+);
+
+const validateField = (field, value, minvalue, maxvalue) => {
+  if (value === null || value === undefined || value < minvalue || value > maxvalue) {
+    errors.value[field] = "Value must be between " + minvalue + " and " + maxvalue;
+  } else {
+    errors.value[field] = "";
+  }
 };
 
-const submitForm = async () => {
-  const formDataToSend = new FormData();
+const isFormValid = computed(() => {
+  return (
+    formData.value.description &&
+    formData.value.type &&
+    formData.value.ksApplicationName &&
+    formData.value.ksDocType &&
+    formData.value.ksDocSource &&
+    !Object.values(errors.value).some((err) => err !== "")
+  );
+});
 
-  if (selectedFile.value) {
-    formDataToSend.append('file', selectedFile.value);
+const onFileSelect = (event) => {
+  if (event.files && event.files.length > 0) {
+    selectedFile.value = event.files[0];
+    formData.value.type = selectedFile.value.name.split('.').pop().toLowerCase();
+    fileUploaded.value = true;
+  } else {
+    selectedFile.value = null;
+    fileUploaded.value = false;
   }
 
-  formDataToSend.append('description', formData.value.description);
-  formDataToSend.append('type', formData.value.type);
-  formDataToSend.append('ksApplicationName', userPrefStore.getSelApp.internal_name);
-  formDataToSend.append('ksProjectName', userPrefStore.selectedProject.internal_name);
-  formDataToSend.append('ksDocType', formData.value.ksDocType.value);
-  formDataToSend.append('ksDocSource', formData.value.ksDocSource);
-  formDataToSend.append('defaultChunkSize', formData.value.defaultChunkSize);
-  formDataToSend.append('minChunkSize', formData.value.minChunkSize);
-  formDataToSend.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
-  formDataToSend.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
+  toast.add({
+    severity: 'success',
+    summary: 'Success',
+    detail: 'File uploaded successfully!',
+    life: 3000
+  });
+};
 
+watch(() => userPrefStore.getSelApp, updateDocuments, { immediate: true });
+
+function updateDocuments() {
+  ksDocumentStore.fetchKsDocument().then(() => {
+
+    ksdocuments.value = [...(ksDocumentStore.ksDocument || [])];
+  });
+};
+
+const onFileRemove = () => {
+  selectedFile.value = null;
+  toast.add({
+    severity: 'success',
+    summary: 'Success',
+    detail: 'File removed successfully!',
+    life: 3000
+  });
+};
+
+const startIndividualngestion = async (id) => {
+  try {
+    const response = await axios.get(`/test/ingest_document/${id}`);
+    ingestionResult.value = response.data;
+
+    if (response.status !== 200) {
+      ingestionResult.value = `Error: ${response.data.message}`;
+    }
+    ingestionDialogVisible.value = true;
+  } catch (error) {
+    console.error('Error during ingestion:', error);
+    ingestionDialogVisible.value = true;
+    throw error;
+  }
+};
+
+const deleteRecord =  (name) => {
+  const documentToDelete = ksdocuments.value.find(doc => doc.name === name);
+  if (!documentToDelete) {
+    console.error('Document not found');
+    return;
+  }
+
+  const requestPayload = {
+    ksDocumentId: documentToDelete.id,
+    ksIngestionInfoId: documentToDelete.ingestionInfo.id,
+    ksDoctype: documentToDelete.ingestionInfo.metadata.KsDoctype,
+    ksDocSource: documentToDelete.ingestionInfo.metadata.KsDocSource,
+    ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource,
+    ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName,
+  };
+
+  axios.post('/fe-api/vector-store/deleteRecords', requestPayload)
+    .then(response => {
+      console.log('Delete resource:', response.data)
+    })
+    .catch(error => {
+      console.error('Error overwriting records: ', error)
+      toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Overwriting', life: 3000 });
+    });
+
+};
+
+
+
+
+const submitForm = async () => {
+  existingDocument.value = null
+  formDataToSend.value = new FormData(); // Reset del formData ogni volta
+
+  if (selectedFile.value) {
+    formDataToSend.value.append('file', selectedFile.value); // Aggiungi il file
+
+    // Aggiungi i dati del fileUploadDTO
+    formDataToSend.value.append('description', formData.value.description);
+    formDataToSend.value.append('type', formData.value.type);
+    formDataToSend.value.append('ksProjectName', userPrefStore.selectedProject.internal_name);
+    formDataToSend.value.append('ksApplicationName', formData.value.ksApplicationName.value);
+    formDataToSend.value.append('ksDocType', formData.value.ksDocType.value);
+    formDataToSend.value.append('ksDocSource', formData.value.ksDocSource);
+    formDataToSend.value.append('defaultChunkSize', formData.value.defaultChunkSize);
+    formDataToSend.value.append('minChunkSize', formData.value.minChunkSize);
+    formDataToSend.value.append('maxNumberOfChunks', formData.value.maxNumberOfChunks);
+    formDataToSend.value.append('minChunkSizeToEmbed', formData.value.minChunkSizeToEmbed);
+  }
+  existingDocument.value = ksdocuments.value.find(doc => doc.name === selectedFile.value.name);
+  if (existingDocument.value) {
+    showDialog.value = true;
+    return;
+  }
+
+  await uploadFile(formDataToSend.value); // Passa formDataToSend.value a uploadFile
+};
+
+const confirmOverwrite = async () => {
+  showDialog.value = false;
+  deleteRecord(selectedFile.value.name);
+  await uploadFile(formDataToSend.value);
+};
+
+const cancelOverwrite = () => {
+  showDialog.value = false;
+};
+
+const uploadFile = async (formDataToSend) => {
   try {
     const response = await axios.post('/upload', formDataToSend, {
       headers: {
         'Content-Type': 'multipart/form-data'
       }
     });
-    console.log('Upload successful:', response.data);
-    toast.add({ severity: 'success', summary: 'Success', detail: 'File uploaded successfully', life: 3000 });
-
-    // Redirect to desktop.vue
+    await startIndividualngestion(response.data.id);
+    toast.add({ severity: 'success', summary: 'Success', detail: 'File ingested successfully', life: 3000 });
     router.push({ name: 'ks-document' });
   } catch (error) {
-    console.error('Upload failed:', error);
-    toast.add({ severity: 'error', summary: 'Error', detail: 'File upload failed', life: 3000 });
+    console.error('Ingestion failed:', error);
+    toast.add({ severity: 'error', summary: 'Error', detail: 'File ingestion failed', life: 3000 });
   }
 };
 
 </script>
 
-<style scoped></style>
\ No newline at end of file
+<style scoped>
+.pi-info-circle {
+  margin-left: 6px;
+  cursor: pointer;
+}
+
+.loading-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-color: rgba(255, 255, 255, 0.8);
+}
+</style>
diff --git a/src/views/pages/similaritySearch/KsSimilaritySearch.vue b/src/views/pages/similaritySearch/KsSimilaritySearch.vue
index e1e7c71..d5fc14f 100644
--- a/src/views/pages/similaritySearch/KsSimilaritySearch.vue
+++ b/src/views/pages/similaritySearch/KsSimilaritySearch.vue
@@ -14,14 +14,15 @@
           <Dropdown v-model="selectedDoctype" :options="doctypeOptions" optionLabel="label" placeholder="Select Doctype"
             :disabled="isPicklistDisabled" class="doctype-dropdown" @change="updateQuery()" />
         </div>
-        <Button label="Query" icon="pi pi-send" @click="sendQuery" class="send-button" />
+        <Button :disabled="loadingStore.exectuion_loading" label="Query" icon="pi pi-send" @click="sendQuery" class="send-button" />
       </div>
 
       <div v-if="messages.length > 0" class="results-container mt-6">
         <Card v-for="(result, index) in messages" :key="index" class="result-card">
           <template #content>
+            <h3 class="text-xl font-semibold mb-2">{{ result.metadata.source }}</h3>
             <ScrollPanel style="width: 100%; max-height: 400px">
-              <CodeSnippet :code="dynamicCode" language="systemd" />
+              <CodeSnippet :code="result.text" language="systemd" />
             </ScrollPanel>
           </template>
         </Card>
@@ -41,7 +42,9 @@ import { computed, onMounted, ref, watch } from 'vue';
 import { onBeforeRouteLeave } from 'vue-router';
 import { KsDocumentStore } from '../../../stores/KsDocumentStore';
 import { UserPrefStore } from '../../../stores/UserPrefStore';
+import { LoadingStore } from '@/stores/LoadingStore';
 
+const loadingStore = LoadingStore();
 const query = ref('');
 const dropdownItem = ref(null);
 const messages = ref([]);
@@ -66,7 +69,8 @@ const selectedDoctype = ref(null);
 const doctypeOptions = ref([
   { label: 'All', value: 'all' },
   { label: 'Functional', value: 'functional' },
-  { label: 'Code Instruction', value: 'code_instruction' }
+  { label: 'Code Instruction', value: 'code_instruction' },
+  { label: 'Other', value: 'other' }
 ]);
 
 onMounted(() => {
@@ -90,6 +94,7 @@ onMounted(() => {
       + "' AND " + "'KsDocSource' == '" + doc.ingestionInfo.metadata.KsDocSource
       + "' AND " + "'KsDoctype' == '" + doc.ingestionInfo.metadata.KsDoctype + "'"
   }
+  console.log(filterQuery.value)
 });
 
 function updateQuery() {
@@ -106,8 +111,6 @@ function updateQuery() {
   if (selectedDoctype.value && selectedDoctype.value.value !== "all") {
     filterQuery.value = filterQuery.value + " AND 'KsDoctype' == '" + selectedDoctype.value.value + "'";
   }
-
-  console.log('Filter query:', filterQuery.value);
 }
 
 onBeforeRouteLeave(() => {
@@ -115,6 +118,8 @@ onBeforeRouteLeave(() => {
 });
 
 const sendQuery = () => {
+  messages.value = []
+  loadingStore.exectuion_loading = true;
   if (query.value.trim() !== '' && filterQuery) {
     axios.get('/test/query_vector', {
       params: {
@@ -124,28 +129,29 @@ const sendQuery = () => {
     })
       .then(response => {
         const data = response.data;
-        console.log('API response:', data);
-
         if (data && Array.isArray(data) && data.length > 0) {
           messages.value = data;
           toast.add({ severity: 'success', summary: 'Success', detail: 'Query sent successfully', life: 3000 });
         } else {
           toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 });
         }
+        loadingStore.exectuion_loading = false;
       })
       .catch(error => {
+        loadingStore.exectuion_loading = false;
         console.error('Error sending query:', error);
         toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
       });
   } else {
     toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 });
+    loadingStore.exectuion_loading = false;
+
   }
 };
 
 // Function to generate dynamic code snippet
 function generateDynamicCode() {
-  const randomValue = messages.value.join(', ');
-  return `[${randomValue}]`;
+  return messages.value.map(message => `[${message}]`);
 }
 
 watch(messages, (newMessages) => {
@@ -203,8 +209,9 @@ watch(messages, (newMessages) => {
 }
 
 .result-card {
-  margin-bottom: 1rem;
+  margin-bottom: 2rem;
   border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Increased shadow for more emphasis */
 }
 
 .p-scrollpanel {