Merged PR 108: Create videos frontend

src/layout/AppMenu.vue

@@ -8,8 +8,9 @@ const model = ref([
         label: 'Knowledge Source',
         items: [{ label: 'Documents', icon: 'pi pi-fw pi-id-card', to: '/ksdocuments' },
         //{ label: 'Code Repository', icon: 'pi pi-fw pi-id-card', to: '/ks_git_repos' },
-        { label: 'Code Repository', icon: 'pi pi-fw pi-id-card', to: '/ks_git_repos/ks_code_parser' },
+            { label: 'Videos', icon: 'pi pi-fw pi-video', to: '/ksvideogroups' },
             //{ label: 'Texts', icon: 'pi pi-fw pi-id-card', to: '/kstexts' }
+            { label: 'Code Repository', icon: 'pi pi-fw pi-code', to: '/ks_git_repos/ks_code_parser' }
         ]
     },
     {

src/router/index.js

@@ -28,6 +28,14 @@ const router = createRouter({
                         { path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/ksDocuments/KsNewDocumentForm.vue') }
                     ]
                 },
+                {
+                    path: '/ksvideogroups',
+                    children: [
+                        { path: '', name: 'ks-video-group', component: () => import('@/views/pages/KsVideos/KsVideoGroup.vue') },
+                        { path: 'videos/:groupId', name: 'ks-video', component: () => import('@/views/pages/KsVideos/KsVideos.vue') },
+                        { path: 'videos/:groupId/new', name: 'ks-video-new', component: () => import('@/views/pages/KsVideos/KsNewVideoForm.vue') }
+                    ]
+                },
                 {
                     path: '/ks_git_repos',
                     children: [

src/service/KsVideoGroupService.js

@@ -0,0 +1,27 @@
+import axios from 'axios';
+
+export const KsVideoGroupService = {
+    getKsVideoGroups(projectId) {
+        return axios.get(`/fe-api/video-group/project`, {
+            params: {
+                projectId: projectId
+            }
+        });
+    },
+
+    findByProjectId(projectId) {
+        return axios.get(`/fe-api/video-group/project/${projectId}`);
+    },
+
+    createVideoGroup(formData) {
+        return axios.post('/create_video_group', formData);
+    },
+
+    deleteVideoGroup(groupId) {
+        return axios.delete(`/delete/${groupId}`);
+    },
+
+    getVideoGroupById(id) {
+        return axios.get(`/fe-api/video-group/${id}`);
+    }
+};

src/service/KsVideoService.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+export const KsVideoService = {
+    getKsVideos() {
+        return axios.get('/fe-api/ksvideos');
+    },
+
+    getKsVideosByGroupId(groupId) {
+        return axios.get(`/fe-api/ksvideos/group/${groupId}`);
+    },
+
+    downloadKsVideo(video) {
+        return axios.get(`/fe-api/ksvideos/downloadKSVideo`, video, {responseType: 'blob', });
+    }
+};

src/stores/KsVideoGroupStore.js

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { KsVideoGroupService } from '../service/KsVideoGroupService';
+
+export const KsVideoGroupStore = defineStore('ksvideogroup_store', () => {
+    const lstKsVideoGroup = ref([]);
+    const selectedKsVideoGroup = ref(null);
+
+    async function fetchKsVideoGroup(projectId) {
+        try {
+            const response = await KsVideoGroupService.getKsVideoGroups(projectId);
+            lstKsVideoGroup.value = response.data;
+        } catch (error) {
+            console.error('Error fetching video groups:', error);
+        } finally {
+        }
+    }
+
+    const ksVideoGroup = computed(() => {
+        return lstKsVideoGroup.value;
+    });
+
+    const getSelectedKsVideoGroup = computed(() => {
+        return selectedKsVideoGroup.value;
+    });
+
+    async function setSelectedKsVideoGroup(group) {
+        selectedKsVideoGroup.value = group;
+        console.log('selectedVideoGroup', selectedKsVideoGroup.value);
+    }
+
+    return {
+        fetchKsVideoGroup,
+        selectedKsVideoGroup,
+        lstKsVideoGroup,
+        ksVideoGroup,
+        getSelectedKsVideoGroup,
+        setSelectedKsVideoGroup
+    };
+});

src/stores/KsVideoStore.js

@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+import { KsVideoService } from '../service/KsVideoService';
+import { LoadingStore } from './LoadingStore';
+
+export const KsVideoStore = defineStore('ksvideo_store', () => {
+
+    const lstKsVideo = ref([])
+    const selectedKsVideo = ref(null)
+    const loadingStore = LoadingStore()
+
+
+    async function fetchKsVideoByGroupId(groupId) {
+        try {
+            const response = await KsVideoService.getKsVideosByGroupId(groupId);
+            lstKsVideo.value = response.data;
+        } catch (error) {
+            console.error('Error fetching videos by group:', error);
+            lstKsVideo.value = [];
+        } finally {
+        }
+    }
+
+    const ksVideo = computed(() => {
+        return lstKsVideo.value;
+    });
+
+    const getKsVideoByGroupId = computed(() => {
+        return lstKsVideo.value;
+    });
+
+    const getSelectedKsVideo = computed(() => {
+        return selectedKsVideo.value;
+    });
+
+    async function setSelectedKsVideo(ksVideo) {
+        selectedKsVideo.value = ksVideo;
+        console.log('selectedExecScenario', selectedKsVideo.value);
+    }
+
+    return {fetchKsVideoByGroupId, selectedKsVideo, lstKsVideo, ksVideo, getKsVideoByGroupId, getSelectedKsVideo, setSelectedKsVideo };
+});

src/views/pages/KsVideos/KsNewVideoForm.vue

@@ -0,0 +1,444 @@
+<template>
+  <Fluid>
+    <h1 class="text-xl font-bold mt-6">KS Video</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 video</Step>
+          <Step value="2">Set parameters</Step>
+          <Step value="3">Index video</Step>
+        </StepList>
+        <StepPanels>
+          <StepPanel value="1" v-slot="{ activateCallback }">
+            <div class="flex flex-col h-48">
+              <FileUpload ref="fileUpload" :maxFileSize="52428800" chooseLabel="Select Video" class="p-button"
+                style="width: 150px;" @select="onFileSelect" @remove="onFileRemove" :showUploadButton="false"
+                :showCancelButton="false" v-model:files="selectedFile" :fileLimit="1"
+                accept=".mp3,.mp4,.mkv,.flv,.mov,.ts">
+                <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. Only audio and
+                      video files are allowed.</p>
+                  </div>
+                </template>
+              </FileUpload>
+            </div>
+            <div class="flex justify-between pt-6 mt-16">
+              <Button label="Back to videos"
+                :style="{ width: '150px', backgroundColor: '#9c9c9c', color: 'white', border: '1px grey' }"
+                icon="pi pi-arrow-left" @click="router.push({ name: 'ks-video' })" />
+              <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" value="0">
+                  <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">Video Description</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'A brief overview of the video'"></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 video'"></i>
+                          <Dropdown id="ksDocType" v-model="formData.ksDocType" :options="videoTypeOptions"
+                            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 video 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>
+                      <div class="col-12 md:col-6 mb-4 mt-4">
+                        <span class="p-float-label">
+                          <label for="language">Language</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Define the language'"></i>
+                          <Dropdown id="language" v-model="formData.language" :options="languageOptions"
+                            optionLabel="name" 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="numberOfChunkToEmbed">Number Chunks to Embed</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Define the number of chunks to embed for RAG'"></i>
+                          <InputNumber id="numberOfChunkToEmbed" v-model="formData.numberOfChunkToEmbed" required
+                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'" />
+                        </span>
+                        <small v-if="errors.numberOfChunkToEmbed" class="text-red-500">
+                          {{ errors.numberOfChunkToEmbed }}
+                        </small>
+                      </div>
+                      <div class="col-12 md:col-6 mb-4 mt-4">
+                        <span class="p-float-label">
+                          <label for="chunkDurationInSeconds">Chunk duration in seconds</label>
+                          <i class="pi pi-info-circle text-violet-600 cursor-pointer"
+                            v-tooltip="'Define the chunk duration'"></i>
+                          <InputNumber id="chunkDurationInSeconds" v-model="formData.chunkDurationInSeconds" required
+                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'" />
+                        </span>
+                        <small v-if="errors.chunkDurationInSeconds" class="text-red-500">
+                          {{ errors.chunkDurationInSeconds }}
+                        </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 indexing 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="Index" :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 video "{{ selectedFile?.name }}" already exists with status "{{ existingVideo?.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 Step from 'primevue/step';
+import StepList from 'primevue/steplist';
+import StepPanel from 'primevue/steppanel';
+import StepPanels from 'primevue/steppanels';
+import Stepper from 'primevue/stepper';
+import { useToast } from 'primevue/usetoast';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { KsVideoGroupStore } from '../../../stores/KsVideoGroupStore';
+import { KsVideoStore } from '../../../stores/KsVideoStore';
+import { LoadingStore } from '../../../stores/LoadingStore';
+import { UserPrefStore } from '../../../stores/UserPrefStore';
+
+const toast = useToast();
+const route = useRoute();
+const router = useRouter();
+const userPrefStore = UserPrefStore();
+const loadingStore = LoadingStore();
+const ksVideoStore = KsVideoStore();
+const ksVideoGroupStore = KsVideoGroupStore();
+const required = ref([]);
+const fileUploaded = ref(false);
+const fileUpload = ref(null);
+const selectedFile = ref(null);
+const ingestionDialogVisible = ref(false);
+const ksVideos = ref(null);
+const showDialog = ref(false);
+const existingVideo = ref(null);
+const formDataToSend = ref(new FormData());
+const groupDocType = ref('');
+
+const videoTypeOptions = ref([
+  { name: 'Functional video', value: 'functional_video' },
+  { name: 'Code Instruction video', value: 'code_instruction_video' },
+  { name: 'Specification video', value: 'specification_video' },
+  { name: 'Other', value: 'other_video' }
+]);
+const availableAppOptions = ref([
+  { name: 'Cross', value: '' },
+  ...userPrefStore.availableApp.map(app => ({ name: app.internal_name, value: app.internal_name }))
+]);
+const languageOptions = ref([
+  { name: 'Italian', value: 'it-IT' },
+  { name: 'English', value: 'en-US' },
+  { name: 'French', value: 'fr-FR' },
+  { name: 'German', value: 'de-DE' },
+  { name: 'Spanish', value: 'es-ES' }
+]);
+const errors = ref({
+  numberOfChunkToEmbed: "",
+  chunkDurationInSeconds: "",
+});
+
+const formData = ref({
+  description: '',
+  type: '',
+  ksProjectName: '',
+  ksApplicationName: { name: 'Cross', value: '' },
+  ksDocType: { name: 'Functional', value: 'functional' },
+  ksDocSource: '',
+  numberOfChunkToEmbed: 10,
+  chunkDurationInSeconds: 600,
+  language: { name: 'Italian', value: 'it-IT' }
+});
+
+
+const isFileSelected = computed(() => selectedFile.value !== null);
+
+watch(
+  () => formData.value.numberOfChunkToEmbed,
+  (newValue) => validateField("numberOfChunkToEmbed", newValue, 5, 50),
+);
+watch(
+  () => formData.value.chunkDurationInSeconds,
+  (newValue) => validateField("chunkDurationInSeconds", newValue, 5, 900),
+);
+
+
+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 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 !== "")
+  );
+});
+
+const onFileSelect = (event) => {
+  if (event.files && event.files.length > 0) {
+    selectedFile.value = event.files[0];
+    formData.value.type = selectedFile.value.name.split('.').pop().toLowerCase();
+    formData.value.description = selectedFile.value.name;
+    fileUploaded.value = true;
+  } else {
+    selectedFile.value = null;
+    fileUploaded.value = false;
+  }
+
+  toast.add({
+    severity: 'success',
+    summary: 'Success',
+    detail: 'File uploaded successfully!',
+    life: 3000
+  });
+};
+
+onMounted(() => {
+  updateVideos();
+});
+
+async function updateVideos() {
+  await ksVideoStore.fetchKsVideoByGroupId(route.params.groupId);
+  ksVideos.value = (KsVideoStore.ksVideo || []);
+  console.log('ksVideos', ksVideos.value);
+};
+
+const onFileRemove = () => {
+  selectedFile.value = null;
+  toast.add({
+    severity: 'success',
+    summary: 'Success',
+    detail: 'File removed successfully!',
+    life: 3000
+  });
+};
+
+const startIndividualIndexing = async (id) => {
+  toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Indexing', life: 3000 });
+
+  axios.get(`/test/index_video/${id}`)
+    .then(response => {
+      if (response.data.status == "OK") {
+        toast.add({ severity: 'success', summary: 'Success', detail: 'Video indexing started...', life: 3000 });
+
+      }
+      if (response.data.status == "ERROR") {
+        toast.add({ severity: 'error', summary: 'Success', detail: 'Error indexing video:' + response.data.message, life: 3000 });
+      }
+
+    })
+    .catch(error => {
+      //ingestionDialogVisible.value = true;
+      console.error('Error indexing record: ', error)
+      toast.add({ severity: 'error', summary: 'Success', detail: 'Error indexing video:' + error, life: 3000 });
+    });
+
+
+};
+
+const deleteRecord = (name) => {
+  const videoToDelete = ksVideos.value.find(video => video.name === name);
+  if (!videoToDelete) {
+    console.error('Video not found');
+    return;
+  }
+
+  const requestPayload = {
+    ksVideoId: videoToDelete.id,
+    ksIngestionInfoId: videoToDelete.ingestionInfo.id,
+    ksDocType: videoToDelete.ingestionInfo.metadata.ksDocType,
+    ksDocSource: videoToDelete.ingestionInfo.metadata.ksDocSource,
+    ksFileSource: videoToDelete.ingestionInfo.metadata.KsFileSource,
+    ksApplicationName: videoToDelete.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 });
+    });
+
+};
+
+// onMounted(async () => {
+//   await ksVideoGroupStore.fetchKsVideoGroupById(route.params.groupId);
+//   groupDocType.value = ksVideoGroupStore.ksVideoGroup?.ksDocType || '';
+//   //per provare a mettere lo stesso type a tutti i video
+// });
+
+const submitForm = async () => {
+  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('ksVideoGroupId', route.params.groupId);
+    formDataToSend.value.append('ksDocType', formData.value.ksDocType.value);
+    formDataToSend.value.append('ksDocSource', formData.value.ksDocSource);
+    formDataToSend.value.append('numberOfChunkToEmbed', formData.value.numberOfChunkToEmbed);
+    formDataToSend.value.append('chunkDurationInSeconds', formData.value.chunkDurationInSeconds);
+    formDataToSend.value.append('language', formData.value.language.value);
+
+    // Check if video with same name exists
+    existingVideo.value = ksVideos.value?.find(video =>
+      video.name.toLowerCase() === selectedFile.value.name.toLowerCase()
+    );
+
+    if (existingVideo.value) {
+      showDialog.value = true;
+      return;
+    }
+  }
+
+  await uploadFile(formDataToSend.value);
+};
+
+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_video', formDataToSend, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+
+    ksVideos.value.push(response.data);
+
+    startIndividualIndexing(response.data.id);
+    router.push({ name: 'ks-video' });
+
+  } catch (error) {
+    console.error('Indexing failed:', error);
+  }
+};
+
+</script>
+
+<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>

src/views/pages/KsVideos/KsVideoGroup.vue

@@ -0,0 +1,319 @@
+<template>
+	<Toast />
+	<ConfirmPopup></ConfirmPopup>
+	<div>
+		<DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
+			@rowCollapse="onRowCollapse" :value="videoGroups" :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="['name', 'type', 'date']"
+			tableStyle="min-width: 70rem" removableSort>
+			<template #header>
+				<div class="flex items-center justify-between gap-8 p-6">
+					<span class="text-xl font-bold">Video Groups</span>
+					<div class="flex items-center gap-2 flex-grow">
+						<IconField class="flex-grow">
+							<InputIcon>
+								<i class="pi pi-search" />
+							</InputIcon>
+							<InputText v-model="filters['global'].value" placeholder="Search..." />
+						</IconField>
+					</div>
+					<Button icon="pi pi-plus" rounded raised @click="openNewGroupModal()"
+						v-tooltip.left="'Add New Group Video'" class="mr-2 p-button-sm" />
+				</div>
+			</template>
+			<template #empty>No video groups found</template>
+			<Column field="name" header="GroupName" sortable>
+				<template #body="{ data }">
+					<span>
+						<i :class="'pi pi-folder'" class="mr-2"></i>
+						{{ data.name }}
+					</span>
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By Name" />
+				</template>
+			</Column>
+			<Column field="type" header="DocType" dataType="date" sortable>
+				<template #body="{ data }">
+					{{ mapDocType(data.type) }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By Type" />
+				</template>
+			</Column>
+			<Column field="date" header="Date" sortable>
+				<template #body="{ data }">
+					{{ data.dateFormat }}
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
+						placeholder="Search By Date" />
+				</template>
+			</Column>
+			<Column field="id" header="Actions" style="width: 10rem" class="text-center">
+				<template #body="slotProps">
+					<div class="flex justify-center items-center space-x-3">
+						<Button type="button" icon="pi pi-eye" rounded @click="navigateToVideos(slotProps.data)"
+							v-tooltip.left="'View Videos'" class="mr-2 p-button"></Button>
+						<!--<Button type="button" icon="pi pi-pencil" rounded @click="openEditGroupModal(slotProps.data)"
+							v-tooltip.left="'Edit Group'" class="mr-2 p-button"></Button>-->
+						<Button type="button" icon="pi pi-trash" rounded @click="confirmDelete(slotProps.data.id)"
+							v-tooltip.left="'Delete Video Group'" class="mr-2 p-button"></Button>
+					</div>
+				</template>
+			</Column>
+		</DataTable>
+	</div>
+
+	<!-- Modal for New Group -->
+	<Dialog v-model:visible="showNewGroupModal" header="New Video Group" :modal="true" :style="{ width: '40vw' }">
+		<div class="flex flex-col gap-6">
+			<div>
+				<label for="groupName" class="block font-bold mb-2">Group Name</label>
+				<InputText id="groupName" v-model="newGroup.name" placeholder="Enter group name"
+					style="width: 20rem;" />
+			</div>
+			<div>
+				<label for="groupType" class="block font-bold mb-2">DocType</label>
+				<Dropdown id="groupType" v-model="newGroup.type" :options="groupTypes" optionLabel="name"
+					optionValue="value" placeholder="Select a type" style="width: 20rem;" />
+			</div>
+		</div>
+		<template #footer>
+			<Button label="Cancel" icon="pi pi-times" @click="closeNewGroupModal"
+				:style="{ width: '100px', backgroundColor: '#9c9c9c', color: 'white', border: '1px grey' }" />
+			<Button label="Save" icon="pi pi-check" @click="saveNewGroup" />
+		</template>
+	</Dialog>
+
+	<!-- Modal for Edit Group -->
+	<Dialog v-model:visible="showEditGroupModal" header="Edit Video Group" :modal="true" :style="{ width: '50vw' }">
+		<div class="flex flex-col gap-4">
+			<div>
+				<label for="editGroupName" class="block font-bold mb-2">Group Name</label>
+				<InputText id="editGroupName" v-model="editingGroup.name" placeholder="Enter group name" />
+			</div>
+			<div>
+				<label for="editGroupType" class="block font-bold mb-2">DocType</label>
+				<Dropdown id="editGroupType" v-model="editingGroup.type" :options="groupTypes" optionLabel="name"
+					optionValue="value" placeholder="Select a type" />
+			</div>
+		</div>
+		<template #footer>
+			<Button label="Cancel" icon="pi pi-times" @click="closeEditGroupModal" class="p-button-text" />
+			<Button label="Save" icon="pi pi-check" @click="updateGroup" />
+		</template>
+	</Dialog>
+	<Dialog v-model:visible="showDialog" header="Confirm Overwrite" :modal="true">
+		<p>The group "{{ newGroup?.name }}" already exists with DocType "{{ existingGroup?.type }}". 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 { UserPrefStore } from '@/stores/UserPrefStore';
+import { FilterMatchMode } from '@primevue/core/api';
+import { useConfirm } from 'primevue/useconfirm';
+import { useToast } from 'primevue/usetoast';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { KsVideoGroupService } from '../../../service/KsVideoGroupService';
+import { KsVideoGroupStore } from '../../../stores/KsVideoGroupStore';
+import { LoadingStore } from '../../../stores/LoadingStore';
+
+const expandedRows = ref([]);
+const onRowExpand = (event) => {
+	expandedRows.value = [event.data];
+};
+const onRowCollapse = (event) => {
+	expandedRows.value = [];
+};
+const formDataToSend = ref(new FormData());
+const loadingStore = LoadingStore();
+const toast = useToast();
+const confirm = useConfirm();
+const userPrefStore = UserPrefStore();
+const ksVideoGroupStore = KsVideoGroupStore();
+const router = useRouter();
+const videoGroups = ref([]);
+const existingGroup = ref(null);
+const showDialog = ref(false);
+const filters = ref({
+	global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+	name: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+	type: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
+	date: { value: null, matchMode: FilterMatchMode.STARTS_WITH }
+});
+const editingGroup = ref(null);
+const showNewGroupModal = ref(false);
+const showEditGroupModal = ref(false);
+const newGroup = ref({ name: '', type: '' });
+const groupTypes = [
+	{ name: 'Functional video', value: 'functional_video' },
+	{ name: 'Code Instruction video', value: 'code_instruction_video' },
+	{ name: 'Specification video', value: 'specification_video' },
+	{ name: 'Other', value: 'other_video' }
+];
+
+const mapDocType = (type) => {
+	const mapping = {
+		'functional_video': 'Functional Video',
+		'code_instruction_video': 'Code Instruction Video',
+		'specification_video': 'Specification Video',
+		'other_video': 'Other'
+	};
+	return mapping[type] || type;
+};
+
+onMounted(() => {
+	userPrefStore.fetchUserData().then(() => {
+		loadVideoGroups();
+	});
+});
+
+const loadVideoGroups = async () => {
+	ksVideoGroupStore.fetchKsVideoGroup(userPrefStore.selectedProject.id).then(() => {
+		videoGroups.value = getCustomDatewithAllResponse();
+	});
+};
+
+const getCustomDatewithAllResponse = () => {
+	return [...(ksVideoGroupStore.ksVideoGroup || [])].map((d) => {
+		d.date = new Date(d.date);
+		return d;
+	});
+};
+
+const openNewGroupModal = () => {
+	showNewGroupModal.value = true;
+};
+
+const closeNewGroupModal = () => {
+	showNewGroupModal.value = false;
+	newGroup.value = { name: '', type: '' };
+};
+
+const saveNewGroup = async () => {
+	formDataToSend.value = new FormData(); // Reset del formData ogni volta
+	if (newGroup.value.name && newGroup.value.type) {
+		try {
+			formDataToSend.value.append('name', newGroup.value.name.trim());
+			formDataToSend.value.append('type', newGroup.value.type);
+			formDataToSend.value.append('projectId', userPrefStore.selectedProject.id);
+			formDataToSend.value.append('applicationId', "");
+
+			const response = await KsVideoGroupService.createVideoGroup(formDataToSend.value);
+			existingGroup.value = videoGroups.value.find(group => group.name.trim() === newGroup.value.name.trim());
+			if (existingGroup.value) {
+				showDialog.value = true;
+				return;
+			}
+			// Add the name to the response data for display
+			//const groupType = groupTypes.find(type => type.value === response.data.type);
+			//response.data.type = groupType ? groupType.name : response.data.type;
+			videoGroups.value.push(response.data);
+			await loadVideoGroups();
+			closeNewGroupModal();
+			toast.add({ severity: 'success', summary: 'Success', detail: 'New group created', life: 3000 });
+		} catch (error) {
+			console.error('Error creating group:', error);
+			toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to create group', life: 3000 });
+		} finally {
+		}
+	} else {
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Please fill in all fields', life: 3000 });
+	}
+};
+
+const confirmOverwrite = async () => {
+	showDialog.value = false;
+	await deleteVideoGroup(existingGroup.value);
+	await KsVideoGroupService.createVideoGroup(formDataToSend.value);
+	await loadVideoGroups();
+	closeNewGroupModal();
+	toast.add({ severity: 'success', summary: 'Success', detail: 'Group overwritten successfully', life: 3000 });
+};
+
+const cancelOverwrite = () => {
+	showDialog.value = false;
+};
+
+const openEditGroupModal = (group) => {
+	editingGroup.value = { ...group };
+	showEditGroupModal.value = true;
+};
+
+const closeEditGroupModal = () => {
+	showEditGroupModal.value = false;
+	editingGroup.value = null;
+};
+
+const updateGroup = async () => {
+	if (editingGroup.value.name && editingGroup.value.type) {
+		try {
+			await loadVideoGroups(); // Reload all groups after update
+			closeEditGroupModal();
+			toast.add({ severity: 'success', summary: 'Success', detail: 'Group updated', life: 3000 });
+		} catch (error) {
+			console.error('Error updating group:', error);
+			toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to update group', life: 3000 });
+		} finally {
+		}
+	} else {
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Please fill in all fields', life: 3000 });
+	}
+};
+
+const confirmDelete = (id) => {
+	confirm.require({
+		target: event.target,
+		message: 'Are you sure you want to delete this video group?',
+		icon: 'pi pi-exclamation-triangle',
+		rejectProps: {
+			label: 'Cancel',
+			class: "p-button",
+			outlined: true,
+		},
+		acceptProps: {
+			label: 'Delete',
+			severity: 'danger',
+		},
+		accept: async () => {
+			try {
+				await KsVideoGroupService.deleteVideoGroup(id);
+				await loadVideoGroups(); // Reload all groups after delete
+				toast.add({ severity: 'success', summary: 'Success', detail: 'Group deleted', life: 3000 });
+			} catch (error) {
+				console.error('Error deleting group:', error);
+				toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to delete group', life: 3000 });
+			}
+		}
+	});
+};
+
+const deleteVideoGroup = async (group) => {
+	try {
+		await KsVideoGroupService.deleteVideoGroup(group.id);
+		await loadVideoGroups(); // Reload all groups after delete
+		toast.add({ severity: 'success', summary: 'Success', detail: 'Group deleted', life: 3000 });
+	} catch (error) {
+		console.error('Error deleting group:', error);
+		toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to delete group', life: 3000 });
+	} finally {
+	}
+};
+
+const navigateToVideos = (group) => {
+	router.push({ name: 'ks-video', params: { groupId: group.id } });
+};
+</script>

src/views/pages/KsVideos/KsVideos.vue

@@ -0,0 +1,478 @@
+<template>
+	<Toast />
+	<ConfirmPopup></ConfirmPopup>
+	<div>
+		<DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
+			@rowCollapse="onRowCollapse" :value="ksVideos" :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-8 p-6 ">
+					<div class="flex flex-col">
+						<span class="text-xl font-bold">Knowledge Source Videos</span>
+						<span class="text-xl mt-2">{{ groupName }}</span>
+					</div>
+					<div class="flex items-center gap-2 flex-grow">
+						<IconField class="flex-grow">
+							<InputIcon>
+								<i class="pi pi-search" />
+							</InputIcon>
+							<InputText v-model="filters['global'].value" placeholder="Search..." />
+						</IconField>
+					</div>
+					<Button icon="pi pi-plus" rounded raised @click="newKsVideo()" v-tooltip.left="'Add New Video'"
+						class="mr-2 p-button-sm" />
+					<!--<Button icon="pi pi-check-circle" rounded raised @click="startlngestion()"
+						v-tooltip.left="'Start All Videos Ingestion'" class="mr-8 p-button-sm"
+						:disabled="allVideosIngested" :class="{ 'p-button': allVideosIngested }" />-->
+				</div>
+			</template>
+			<template #empty>No Records found</template>
+			<Column field="ingestionStatus" header="Status" sortable>
+				<template #body="slotProps">
+					<Tag v-tooltip="slotProps.data.ingestionMessage" :value="slotProps.data.ingestionStatus"
+						:severity="getStatus(slotProps.data)" />
+				</template>
+				<template #filter="{ filterModel, filterCallback }">
+					<Select v-model="filterModel.value" @change="filterCallback()" :options="statuses"
+						placeholder="Select One" style="min-width: 12rem" :showClear="true">
+						<template #option="{ option }">
+							<Tag :value="option" :severity="getStatus({ ingestionStatus: option })" />
+						</template>
+					</Select>
+				</template>
+			</Column>
+			<Column field="ingestionInfo.metadata.KsFileSource" header="FileName" sortable>
+				<template #body="{ data }">
+					<span>
+						<i :class="getFileIcon(data.fileName)" class="mr-2"></i>
+						{{ data.fileName }}
+					</span>
+				</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) }}
+				</template>
+				<template #filter="{ filterModel }">
+					<DatePicker v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy"
+						@change="updateFilterModel" />
+				</template>
+			</Column>
+			<Column field="id" header="Actions" style="width: 10rem" class="text-center">
+				<template #body="slotProps">
+					<div class="flex justify-center items-center space-x-3">
+
+						<Button type="button" icon="pi pi-play" rounded
+							@click="startIndividualngestion(slotProps.data.id)" v-tooltip.left="'Start video indexing'"
+							:disabled="slotProps.data.ingestionStatus === 'INGESTED' || slotProps.data.ingestionStatus == 'IN PROGRESS' || slotProps.data.ingestionStatus == 'INGESTING' || slotProps.data.ingestionStatus == 'INGESTION_QUEUE'"
+							:class="{ 'p-button': slotProps.data.ingestionStatus === 'INGESTED' }"></Button>
+						<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' || slotProps.data.ingestionStatus == 'IN PROGRESS'"
+							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }"></Button>
+
+						<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
+							v-tooltip.left="'Similarity Search'"
+							:disabled="slotProps.data.ingestionStatus !== 'INGESTED' || slotProps.data.ingestionStatus == 'IN PROGRESS'"
+							:class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }"></Button>
+						<Button type="button" icon="pi pi-download" rounded @click="downloadFile(slotProps.data)"
+							v-tooltip.left="'Download file'" class="mr-2 p-button"></Button>
+					</div>
+				</template>
+			</Column>
+
+		</DataTable>
+	</div>
+</template>
+
+<script setup>
+import { FilterMatchMode, FilterOperator } from '@primevue/core/api';
+import axios from 'axios';
+import moment from 'moment';
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from 'primevue/usetoast';
+import { computed, onMounted, ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import Button from 'primevue/button';
+import Column from 'primevue/column';
+import DataTable from 'primevue/datatable';
+import DatePicker from 'primevue/datepicker';
+import InputText from 'primevue/inputtext';
+import Select from 'primevue/select';
+import Tag from 'primevue/tag';
+import { KsVideoGroupService } from '../../../service/KsVideoGroupService';
+import { KsVideoService } from '../../../service/KsVideoService';
+import { KsVideoStore } from '../../../stores/KsVideoStore';
+import { LoadingStore } from '../../../stores/LoadingStore';
+import { UserPrefStore } from '../../../stores/UserPrefStore';
+
+const route = useRoute();
+const expandedRows = ref([]);
+const router = useRouter()
+const ksVideos = ref(null);
+const loading = ref(true);
+const toast = useToast();
+const confirm = useConfirm();
+const groupName = ref('');
+
+//const ingestionDialogVisible = ref(false);
+const ingestionResult = ref('');
+const filters = ref();
+const userPrefStore = UserPrefStore();
+const ksVideoStore = KsVideoStore();
+const loadingStore = LoadingStore();
+const fe_status = ref('');
+
+const initFilters = () => {
+	filters.value = {
+		global: { value: null, matchMode: FilterMatchMode.CONTAINS },
+		id: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] },
+		'ingestionInfo.metadata.KsApplicationName': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+		'ingestionInfo.metadata.KsFileSource': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+		'ingestionInfo.metadata.KsDocSource': { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] },
+		ingestionDateFormat: { operator: FilterOperator.AND, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] },
+		ingestionStatus: { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+	};
+};
+
+initFilters();
+
+const statuses = ref(['NEW', 'LOADED', 'INGESTED', 'FAILED', 'ERROR', 'INGESTION_QUEUE', 'INGESTING']); // Add your statuses here
+
+onMounted(() => {
+	userPrefStore.fetchUserData().then(() => {
+		KsVideoGroupService.getVideoGroupById(route.params.groupId).then(response => {
+			groupName.value = response.data.name;
+		});
+		updateVideos();
+		setInterval(() => {
+			updateVideos();
+		}, 5000);
+	});
+
+
+});
+
+
+const onRowExpand = (event) => {
+	console.log("Row expanded:", event.data);
+};
+
+const onRowCollapse = (event) => {
+	console.log("Row collapsed:", event.data);
+};
+
+
+// watch(() => userPrefStore.getSelApp, updateVideos, { immediate: true });
+
+function updateVideos() {
+	ksVideoStore.fetchKsVideoByGroupId(route.params.groupId).then(() => {
+		ksVideos.value = getCustomDatewithAllResponse();
+	});
+};
+
+const getCustomDatewithAllResponse = () => {
+	return [...(ksVideoStore.ksVideo || [])].map((d) => {
+		d.ingestionDateFormat = new Date(d.ingestionDateFormat);
+		return d;
+	});
+};
+
+const allVideosIngested = computed(() => {
+	return ksVideos.value && ksVideos.value.every(doc => doc.ingestionStatus == 'INGESTED');
+});
+
+const getStatus = (data) => {
+	if (data.ingestionStatus == 'INGESTED') {
+		return 'success';
+	} else if (data.ingestionStatus == 'LOADED' || data.ingestionStatus == 'ERROR') {
+		return 'danger';
+	} else if (data.ingestionStatus == 'IN PROGRESS' || data.ingestionStatus == 'INGESTION_QUEUE' || data.ingestionStatus == 'INGESTING') {
+		return 'info';
+	} else {
+		return 'warning';
+	}
+}
+
+
+const updateFilterModel = () => {
+	console.log("updateFilterModel")
+}
+
+// Variabile reattiva per il nome del file
+const filename = ref("");
+
+// Funzione per scaricare il file
+const downloadFile = async (video) => {
+	console.log("video", video)
+
+	try {
+
+		const response = await KsVideoService.downloadKsVideo(video);
+		console.log("response download", response);
+
+		const contentType = response.headers['content-type']; // Tipo MIME dinamico
+		const blob = new Blob([response.data], { type: contentType });
+
+		// Crea un URL temporaneo per il download
+		const url = window.URL.createObjectURL(blob);
+		const link = document.createElement('a');
+		link.href = url;
+
+		const fileName = video.fileName;
+		console.log("fileName", fileName)
+
+		link.setAttribute('download', fileName);
+		document.body.appendChild(link);
+		link.click();
+		link.remove();
+
+	} catch (error) {
+		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 });
+	}
+};
+
+const editKsVideo = (data) => {
+	console.log(data);
+	router.push({ name: 'ks-video-edit', params: { id: data.id } });
+}
+
+const openSimilaritySearch = (video) => {
+	ksVideoStore.setSelectedKsVideo(video).then(() => {
+		router.push({ name: 'ks_similarity_search' });
+	});
+}
+
+const confirmDeleteFromVectorStore = (id) => {
+	console.log("OK");
+	confirm.require({
+		target: event.target,
+		message: 'Are you sure you want to proceed?',
+		icon: 'pi pi-exclamation-triangle',
+		rejectProps: {
+			label: 'Cancel',
+			class: "p-button",
+			outlined: true,
+		},
+		acceptProps: {
+			label: 'Delete',
+			severity: 'danger',
+		},
+		accept: () => {
+			const videoToDelete = ksVideos.value.find(video => video.id === id);
+			if (!videoToDelete) {
+				console.error('Video not found');
+				return;
+			}
+
+			const requestPayload = {
+				KsVideoId: id,
+				ksIngestionInfoId: videoToDelete.ingestionInfo.id,
+				ksDoctype: videoToDelete.ingestionInfo.metadata.KsDoctype,
+				ksDocSource: videoToDelete.ingestionInfo.metadata.KsDocSource,
+				ksFileSource: videoToDelete.ingestionInfo.metadata.KsFileSource,
+				ksApplicationName: videoToDelete.ingestionInfo.metadata.KsApplicationName,
+			};
+
+			axios.post('/fe-api/vector-store/deleteRecordsFromVectorStore', requestPayload)
+				.then(response => {
+					console.log('Delete resource:', response.data)
+					ksVideos.value.forEach(element => {
+						if (element.id == id) {
+							element.ingestionStatus = "DELETING"
+							console.log("Updated element", element)
+						}
+					});
+					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 });
+				});
+		}
+	})
+};
+
+//ingestion
+const startIndividualngestion = (id) => {
+	toast.add({ severity: 'info', summary: 'Info', detail: 'Starting indexing...', life: 3000 });
+	fe_status.value = "INGESTION_QUEUE"
+	axios.get(`/test/index_video/${id}`)
+		.then(response => {
+			if (response.data.status == "OK") {
+				toast.add({ severity: 'success', summary: 'Success', detail: 'Video indexing started...', life: 3000 });
+				fe_status.value = "INGESTION_QUEUE"
+			}
+			if (response.data.status == "ERROR") {
+				toast.add({ severity: 'error', summary: 'Success', detail: 'Error indexing video:' + response.data.message, life: 3000 });
+				fe_status.value = "ERROR"
+			}
+			ksVideos.value.forEach(element => {
+				if (element.id == id) {
+					element.ingestionStatus = fe_status.value
+					console.log("Updated element", element)
+				}
+			});
+		})
+		.catch(error => {
+			//ingestionDialogVisible.value = true;
+			console.error('Error indexing record: ', error)
+			toast.add({ severity: 'error', summary: 'Success', detail: 'Error ingesting video:' + error, life: 3000 });
+		});
+};
+
+const startlngestion = () => {
+	axios.get('/test/ingestion_loop')
+		.then(response => {
+			ingestionResult.value = response.data;
+			if (response.data.status == "OK") {
+				ksVideos.value.forEach(element => {
+					if (response.data.ingestedVideoId.includes(element.id)) {
+						element.status = "INGESTED"
+					}
+				});
+			} else {
+				ingestionResult.value = `Error: ${response.data.message}`;
+			}
+
+			//ingestionDialogVisible.value = true;
+		})
+		.catch(error => {
+			//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 newKsVideo = () => {
+	router.push({ name: 'ks-video-new' });
+};
+
+const getFileIcon = (filename) => {
+	const ext = filename.split('.').pop();
+	if (ext === 'pdf') {
+		return 'pi pi-file-pdf';
+	} else if (ext === 'doc' || ext === 'docx') {
+		return 'pi pi-file-word';
+	} else if (ext === 'xls' || ext === 'xlsx') {
+		return 'pi pi-file-excel';
+	} else if (ext === 'ppt' || ext === 'pptx') {
+		return 'pi pi-file-powerpoint';
+	} else if (ext === 'mp4') {
+		return 'pi pi-video';
+	} else {
+		return 'pi pi-file';
+	}
+}
+
+// Function to format date string
+function formatDate(dateString) {
+	// Parse the date string using moment
+	return moment(dateString).format('DD/MM/YYYY');
+}
+
+
+</script>
+
+<style scoped>
+/* Custom styling for disabled red button */
+.p-button-danger {
+	background-color: white;
+	border-color: blue;
+	color: black;
+}
+
+.p-button-danger:disabled {
+	/*background-color: red;*/
+	border-color: red;
+	color: red;
+	cursor: not-allowed;
+}
+
+.spinner-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	animation: fade-in 1s ease-in-out;
+}
+
+.spinner {
+	animation: spin 1s linear infinite;
+	width: 50px;
+	height: 50px;
+	color: var(--primary-color, #007bff);
+}
+
+
+@keyframes spin {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes pulse {
+
+	0%,
+	100% {
+		opacity: 1;
+		color: var(--primary-color, #007bff);
+	}
+
+	50% {
+		opacity: 0.11;
+		color: var(--primary-color, #007bff);
+	}
+}
+
+@keyframes fade-in {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+.card {
+	margin: 2rem;
+}
+</style>

src/views/pages/ksDocuments/KsDocuments.vue

@@ -12,7 +12,7 @@
 			: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 ">
+				<div class="flex items-center justify-between gap-8 p-6 ">
 					<span class="text-xl font-bold">Knowledge Source Documents</span>
 					<div class="flex items-center gap-2 flex-grow">
 						<IconField class="flex-grow">
@@ -66,9 +66,9 @@
 						placeholder="Search by File" />
 				</template>
 			</Column>
-			<Column field="ingestionInfo.metadata.KsDocSource" header="DocType" sortable style="min-width: 12rem">
+			<Column field="ingestionInfo.metadata.KsDoctype" header="DocType" sortable style="min-width: 12rem">
 				<template #body="{ data }">
-					{{ data.ingestionInfo.metadata.KsDoctype }}
+					{{ mapDocType(data.ingestionInfo.metadata.KsDoctype) }}
 				</template>
 				<template #filter="{ filterModel, filterCallback }">
 					<InputText v-model="filterModel.value" type="text" @input="filterCallback()"
@@ -388,6 +388,16 @@ const getFileIcon = (filename) => {
 	}
 }
 
+const mapDocType = (type) => {
+	const mapping = {
+		'functional': 'Functional',
+		'code_instruction': 'Code Instruction',
+		'specification': 'Specification',
+		'other': 'Other'
+	};
+	return mapping[type] || type;
+};
+
 // Function to format date string
 function formatDate(dateString) {
 	// Parse the date string using moment

src/views/pages/ksDocuments/KsNewDocumentForm.vue

@@ -102,7 +102,7 @@
                           <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" />
+                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'"/>
                         </span>
                         <small v-if="errors.defaultChunkSize" class="text-red-500">{{ errors.defaultChunkSize }}</small>
                       </div>
@@ -111,7 +111,8 @@
                           <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" />
+                          <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" 
+                          :disabled="userPrefStore.user.role !== 'ADMIN'"/>
                         </span>
                         <small v-if="errors.minChunkSize" class="text-red-500">{{ errors.minChunkSize }}</small>
                       </div>
@@ -121,7 +122,7 @@
                           <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" />
+                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'"/>
                         </span>
                         <small v-if="errors.minChunkSizeToEmbed" class="text-red-500">{{ errors.minChunkSizeToEmbed
                         }}</small>
@@ -132,7 +133,7 @@
                           <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" />
+                            class="w-full" :disabled="userPrefStore.user.role !== 'ADMIN'"/>
                         </span>
                         <small v-if="errors.maxNumberOfChunks" class="text-red-500">{{ errors.maxNumberOfChunks
                         }}</small>
@@ -192,6 +193,7 @@ import { useRouter } from 'vue-router';
 import { KsDocumentStore } from '../../../stores/KsDocumentStore';
 import { LoadingStore } from '../../../stores/LoadingStore';
 import { UserPrefStore } from '../../../stores/UserPrefStore';
+import { onMounted } from 'vue';
 
 const toast = useToast();
 const router = useRouter();
@@ -300,7 +302,9 @@ const onFileSelect = (event) => {
   });
 };
 
-watch(() => userPrefStore.getSelApp, updateDocuments, { immediate: true });
+onMounted(() => {
+  updateDocuments();
+});
 
 function updateDocuments() {
   ksDocumentStore.fetchKsDocument().then(() => {

src/views/pages/similaritySearch/KsSimilaritySearch.vue

@@ -14,7 +14,8 @@
           <Dropdown v-model="selectedDoctype" :options="doctypeOptions" optionLabel="label" placeholder="Select Doctype"
             :disabled="isPicklistDisabled" class="doctype-dropdown" @change="updateQuery()" />
         </div>
-        <Button :disabled="loadingStore.exectuion_loading" 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">
@@ -33,6 +34,8 @@
 
 <script setup>
 import CodeSnippet from '@/components/CodeSnippet.vue';
+import { KsVideoStore } from '@/stores/KsVideoStore';
+import { LoadingStore } from '@/stores/LoadingStore';
 import axios from 'axios';
 import Button from 'primevue/button';
 import Card from 'primevue/card';
@@ -42,7 +45,6 @@ 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('');
@@ -51,8 +53,10 @@ const messages = ref([]);
 const toast = useToast();
 const dynamicCode = ref('');
 const ksDocumentStore = KsDocumentStore();
+const ksVideoStore = KsVideoStore();
 const userPrefStore = UserPrefStore();
 const doc = ksDocumentStore.getSelectedKsDocument;
+const video = ksVideoStore.getSelectedKsVideo;
 //const filterQuery = ref("'KsApplicationName' == 'ATF'")
 const filterQuery = ref("")
 
@@ -75,15 +79,23 @@ const doctypeOptions = ref([
 
 onMounted(() => {
   console.log('SimilaritySearch page mounted');
-  if (ksDocumentStore.getSelectedKsDocument == null) {
+  console.log(ksDocumentStore.getSelectedKsDocument)
+  console.log(ksVideoStore.getSelectedKsVideo)
+  if (ksDocumentStore.getSelectedKsDocument == null && ksVideoStore.getSelectedKsVideo == null) {
     filterQuery.value = "'KsProjectName' == '" + userPrefStore.selectedProject.internal_name
       + "'";
-  } else {
+  } else if (ksDocumentStore.getSelectedKsDocument != null) {
     filterQuery.value = "'KsApplicationName' == '" + doc.ingestionInfo.metadata.KsApplicationName
       + "' AND " + "'KsProjectName' == '" + doc.ingestionInfo.metadata.KsProjectName
       + "' AND " + "'KsFileSource' == '" + doc.ingestionInfo.metadata.KsFileSource
       + "' AND " + "'KsDocSource' == '" + doc.ingestionInfo.metadata.KsDocSource
       + "' AND " + "'KsDoctype' == '" + doc.ingestionInfo.metadata.KsDoctype + "'"
+  } else if (ksVideoStore.getSelectedKsVideo != null) {
+    filterQuery.value = "'KsApplicationName' == '" + video.ingestionInfo.metadata.KsApplicationName
+      + "' AND " + "'KsProjectName' == '" + video.ingestionInfo.metadata.KsProjectName
+      + "' AND " + "'KsFileSource' == '" + video.ingestionInfo.metadata.KsFileSource
+      + "' AND " + "'KsDocSource' == '" + video.ingestionInfo.metadata.KsDocSource
+      + "' AND " + "'KsDoctype' == '" + video.ingestionInfo.metadata.KsDoctype + "'"
   }
   console.log(filterQuery.value)
 });
@@ -194,7 +206,8 @@ watch(messages, (newMessages) => {
 .result-card {
   margin-bottom: 2rem;
   border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Increased shadow for more emphasis */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  /* Increased shadow for more emphasis */
 }
 
 .p-scrollpanel {