admin/apollo-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update Apollo layput

Browse Source 
Resolved Similarity Search bug
This commit is contained in:
Emanuele Ferrelli
2025-03-14 15:08:17 +01:00
parent 2338845f00
commit 4a43ff984a
7 changed files with 538 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@@ -16,7 +16,7 @@
"axios": "^1.7.2", "axios": "^1.7.2",
"chart.js": "3.3.2", "chart.js": "3.3.2",
"moment": "^2.30.1", "moment": "^2.30.1",
"pinia": "^2.2.6", "pinia": "^2.3.0",
"primeicons": "^6.0.1", "primeicons": "^6.0.1",
"primevue": "^4.0.0", "primevue": "^4.0.0",
"prismjs": "^1.29.0", "prismjs": "^1.29.0",
@@ -25,6 +25,7 @@
"vue": "^3.4.34", "vue": "^3.4.34",
"vue-authenticate-2": "^2.2.0", "vue-authenticate-2": "^2.2.0",
"vue-router": "^4.4.0", "vue-router": "^4.4.0",
"vue3-spinner": "^0.0.17",
"webstomp-client": "^1.2.6" "webstomp-client": "^1.2.6"
}, },
"devDependencies": { "devDependencies": {
@@ -41,6 +42,6 @@
"tailwindcss": "^3.4.6", "tailwindcss": "^3.4.6",
"tailwindcss-primeui": "^0.3.2", "tailwindcss-primeui": "^0.3.2",
"unplugin-vue-components": "^0.27.3", "unplugin-vue-components": "^0.27.3",
"vite": "^5.3.1" "vite": "^5.4.10"
} }
} }

4
src/assets/tailwind.css
View File

@@ -1,3 +1,7 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
img.p-fileupload-file-thumbnail {
display:none !important;
}

24
src/layout/AppTopbar.vue
View File

@@ -5,9 +5,12 @@ import { useAuth } from '@websanova/vue-auth/src/v3.js';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { watch, ref, computed } from 'vue'; import { watch, ref, computed } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
//import AppConfigurator from './AppConfigurator.vue';
import { LoadingStore } from '../stores/LoadingStore.js';
import AppProfileMenu from './AppProfileMenu.vue'; import AppProfileMenu from './AppProfileMenu.vue';
import { UserPrefStore } from '../stores/UserPrefStore.js'; import { UserPrefStore } from '../stores/UserPrefStore.js';
import { JellyfishLoader, RiseLoader } from "vue3-spinner";
const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout(); const { onMenuToggle, toggleDarkMode, isDarkTheme } = useLayout();
const auth = useAuth(); const auth = useAuth();
@@ -16,6 +19,8 @@ const userPrefStore = UserPrefStore();
const router = useRouter(); const router = useRouter();
const selectedApp = ref(userPrefStore.getSelApp); const selectedApp = ref(userPrefStore.getSelApp);
const route = useRoute(); const route = useRoute();
const loadingStore = LoadingStore()
async function updateApplication() { async function updateApplication() {
await userPrefStore.setSelectedApp(selectedApp.value); await userPrefStore.setSelectedApp(selectedApp.value);
@@ -71,9 +76,17 @@ watch(() => userPrefStore.getSelApp, appUpdated, { immediate: true });
<div class="layout-topbar-actions"> <div class="layout-topbar-actions">
<div class="layout-config-menu"> <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> <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"> <div class="topbar-project">
<button @click="redirectProject()" class="p-button p-button-outlined" <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 }} <small>PROJECT:</small> {{ userPrefStore.user.selectedProject.fe_name }}
</span> --> </span> -->
</div> </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()" placeholder="Select an Application" class="dropdown-list menu-list" @change="updateApplication()"
:disabled="isDropdownDisabled" /> :disabled="isDropdownDisabled" /> -->
<!--div class="relative"> <!--div class="relative">
<button <button
v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }" 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> </button>
<AppConfigurator /> <AppConfigurator />
</div--> </div-->
</div>
<button class="layout-topbar-menu-button layout-topbar-action" <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 }"> v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }">

2
src/stores/KsDocumentStore.js
View File

@@ -12,11 +12,9 @@ export const KsDocumentStore = defineStore('ksdocument_store', () => {
async function fetchKsDocument() { async function fetchKsDocument() {
console.log("i'm in");
loadingStore.scenario_loading = true; loadingStore.scenario_loading = true;
await KsDocumentService.getKsDocuments().then(resp => { await KsDocumentService.getKsDocuments().then(resp => {
lstKsDocument.value = resp.data; lstKsDocument.value = resp.data;
console.log("lstKsDocument", lstKsDocument.value);
loadingStore.scenario_loading = false; loadingStore.scenario_loading = false;
}); });

231
src/views/pages/ksDocuments/KsDocuments.vue
View File

@@ -1,17 +1,17 @@
<template> <template>
<div class="card">
<Toast /> <Toast />
<ConfirmPopup></ConfirmPopup> <ConfirmPopup></ConfirmPopup>
<div v-if="loadingStore.another_loading" class="loading-container"> <div >
<div class="spinner-container"> <DataTable v-model:filters="filters" v-model:expandedRows="expandedRows" @rowExpand="onRowExpand"
<ProgressSpinner class="spinner" /> @rowCollapse="onRowCollapse" :value="ksdocuments"
<p class="loading-text">Loading data...</p> :loading="loadingStore.loading_exectuion"
</div> :paginator="true" :rows="10"
</div> paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords} records"
<DataTable v-model:filters="filters" :value="ksdocuments" paginator showGridlines :rows="10" dataKey="id" :rowsPerPageOptions="[10, 15, 20, 50, 100]" dataKey="id" :rowHover="true" rowGroupMode="subheader"
filterDisplay="menu" :loading="loadingStore.another_loading" :sortOrder="1" filterDisplay="menu"
:globalFilterFields="['ingestionInfo.metadata.KsApplicationName', 'ingestionInfo.metadata.KsFileSources', 'ingestionInfo.metadata.KsDocSource', 'ingestionStatus', 'ingestionDateFormat']"> :globalFilterFields="['ingestionInfo.metadata.KsApplicationName', 'ingestionInfo.metadata.KsFileSources', 'ingestionInfo.metadata.KsDocSource', 'ingestionStatus', 'ingestionDateFormat']"
tableStyle="min-width: 70rem" removableSort>
<template #header> <template #header>
<div class="flex items-center justify-between gap-4 p-4 "> <div class="flex items-center justify-between gap-4 p-4 ">
<span class="text-xl font-bold">Knowledge Source Documents</span> <span class="text-xl font-bold">Knowledge Source Documents</span>
@@ -20,53 +20,19 @@
<InputIcon> <InputIcon>
<i class="pi pi-search" /> <i class="pi pi-search" />
</InputIcon> </InputIcon>
<InputText v-model="filters['global'].value" placeholder="Keyword Search" /> <InputText v-model="filters['global'].value" placeholder="Search..." />
</IconField> </IconField>
</div> </div>
<Button icon="pi pi-plus" rounded raised @click="newKsDocument()" v-tooltip="'Create New Document'" <Button icon="pi pi-plus" rounded raised @click="newKsDocument()"
class="mr-2" /> v-tooltip.left="'Add New Document'"
class="mr-2 p-button-sm" />
<Button icon="pi pi-check-circle" rounded raised @click="startlngestion()" <Button icon="pi pi-check-circle" rounded raised @click="startlngestion()"
v-tooltip="'Start All documents Ingestion'" class="mr-8" :disabled="allDocumentsIngested" v-tooltip.left="'Start All documents Ingestion'"
:class="{ 'p-button-danger': allDocumentsIngested }" /> class="mr-8 p-button-sm"
:disabled="allDocumentsIngested" :class="{ 'p-button': allDocumentsIngested }" />
</div> </div>
</template> </template>
<template #empty>No Records found</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> <Column field="ingestionStatus" header="Status" sortable>
<template #body="slotProps"> <template #body="slotProps">
<Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" /> <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
@@ -80,6 +46,34 @@
</Select> </Select>
</template> </template>
</Column> </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"> <Column header="Date" filterField="ingestionDateFormat" dataType="date" style="min-width: 10rem">
<template #body="{ data }"> <template #body="{ data }">
{{ formatDate(data.ingestionDate) }} {{ formatDate(data.ingestionDate) }}
@@ -89,34 +83,33 @@
@change="updateFilterModel" /> @change="updateFilterModel" />
</template> </template>
</Column> </Column>
<Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible"> <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"> <template #body="slotProps">
<div class="flex justify-center items-center space-x-3"> <div class="flex justify-center items-center space-x-3">
<!--Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)" <!-- PARTE EDIT DA CREARE -->
v-tooltip="'Edit the information of document'" /--> <!-- <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"
<Button type="button" icon="pi pi-play" rounded v-tooltip="'Edit the information of document'" /> -->
@click="startIndividualngestion(slotProps.data.id)" <Button type="button" icon="pi pi-play" rounded @click="startIndividualngestion(slotProps.data.id)"
v-tooltip="'Start Ingestion of document'" v-tooltip.left="'Start Ingestion of document'"
:disabled="slotProps.data.ingestionStatus === 'INGESTED'" :disabled="slotProps.data.ingestionStatus === 'INGESTED'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'INGESTED' }" /> :class="{ 'p-button': slotProps.data.ingestionStatus === 'INGESTED' }" />
<Button type="button" icon="pi pi-trash" rounded @click="confirmDelete(slotProps.data.id)" <Button type="button" icon="pi pi-trash" rounded @click="confirmDeleteFromVectorStore(slotProps.data.id)"
v-tooltip="'Delete the ingested Record'" v-tooltip.left="'Delete the ingested Record'"
:disabled="slotProps.data.ingestionStatus === 'NEW'" :disabled="slotProps.data.ingestionStatus !== 'INGESTED'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" /> :class="{ 'mr-2 p-button': slotProps.data.ingestionStatus !== 'INGESTED' }" />
<Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)" <Button type="button" icon="pi pi-search" rounded @click="openSimilaritySearch(slotProps.data)"
v-tooltip="'Similarity Search'" :disabled="slotProps.data.ingestionStatus === 'NEW'" v-tooltip.left="'Similarity Search'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" /> :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)" <Button type="button" icon="pi pi-download" rounded @click="downloadFile(slotProps.data)"
v-tooltip="'Download file'" :disabled="slotProps.data.ingestionStatus === 'NEW'" v-tooltip.left="'Download file'"
:class="{ 'p-button-danger': slotProps.data.ingestionStatus === 'NEW' }" /> class="mr-2 p-button" />
</div> </div>
</template> </template>
</Column> </Column>
</DataTable> </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> </div>
</template> </template>
@@ -143,13 +136,14 @@ import { KsDocumentStore } from '../../../stores/KsDocumentStore';
import { LoadingStore } from '../../../stores/LoadingStore'; import { LoadingStore } from '../../../stores/LoadingStore';
import { UserPrefStore } from '../../../stores/UserPrefStore'; import { UserPrefStore } from '../../../stores/UserPrefStore';
const expandedRows = ref([]);
const router = useRouter() const router = useRouter()
const ksdocuments = ref(null); const ksdocuments = ref(null);
const loading = ref(true); const loading = ref(true);
const toast = useToast(); const toast = useToast();
const confirm = useConfirm(); const confirm = useConfirm();
const ingestionDialogVisible = ref(false); //const ingestionDialogVisible = ref(false);
const ingestionResult = ref(''); const ingestionResult = ref('');
const filters = ref(); const filters = ref();
const userPrefStore = UserPrefStore(); const userPrefStore = UserPrefStore();
@@ -170,18 +164,23 @@ const initFilters = () => {
initFilters(); initFilters();
const statuses = ref(['NEW', 'INGESTED', 'FAILED']); // Add your statuses here const statuses = ref(['NEW', 'LOADED','INGESTED', 'FAILED']); // Add your statuses here
onMounted(() => { onMounted(() => {
userPrefStore.fetchUserData().then(() => { userPrefStore.fetchUserData().then(() => {
updateDocuments(); 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 }); watch(() => userPrefStore.getSelApp, updateDocuments, { immediate: true });
function updateDocuments() { function updateDocuments() {
@@ -189,6 +188,7 @@ function updateDocuments() {
ksDocumentStore.fetchKsDocument().then(() => { ksDocumentStore.fetchKsDocument().then(() => {
ksdocuments.value = getCustomDatewithAllResponse(); ksdocuments.value = getCustomDatewithAllResponse();
//ingestionDialogVisible.value = false;
//loading.value = false; //loading.value = false;
}); });
}; };
@@ -205,7 +205,7 @@ const allDocumentsIngested = computed(() => {
const getStatus = (data) => { const getStatus = (data) => {
if (data.ingestionStatus === 'INGESTED') { if (data.ingestionStatus === 'INGESTED') {
return 'success'; return 'success';
} else if (data.ingestionStatus === 'NEW') { } else if (data.ingestionStatus === 'LOADED') {
return 'danger'; return 'danger';
} else { } else {
return 'warn'; return 'warn';
@@ -269,8 +269,8 @@ const downloadFile = async (doc) => {
link.click(); link.click();
link.remove();*/ link.remove();*/
} catch (error) { } catch (error) {
console.error("Errore durante il download:", error); console.error("Error while downloading the file:", error);
alert("Errore durante il download. Controlla il nome del file."); 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) => { const openSimilaritySearch = (doc) => {
console.log("doc", doc)
ksDocumentStore.setSelectedKsDocument(doc).then(() => { ksDocumentStore.setSelectedKsDocument(doc).then(() => {
router.push({ name: 'ks_similarity_search' }); router.push({ name: 'ks_similarity_search' });
}); });
} }
const confirmDelete = (id) => { const confirmDeleteFromVectorStore = (id) => {
console.log("id", id); console.log("OK");
confirm.require({ confirm.require({
target: event.currentTarget, target: event.target,
message: 'Are you sure you want to proceed?', message: 'Are you sure you want to proceed?',
icon: 'pi pi-exclamation-triangle', icon: 'pi pi-exclamation-triangle',
rejectProps: { rejectProps: {
label: 'Cancel', label: 'Cancel',
severity: 'secondary', class:"p-button",
outlined: true outlined: true,
}, },
acceptProps: { acceptProps: {
label: 'Delete', label: 'Delete',
@@ -304,7 +302,6 @@ const confirmDelete = (id) => {
}, },
accept: () => { accept: () => {
const documentToDelete = ksdocuments.value.find(doc => doc.id === id); const documentToDelete = ksdocuments.value.find(doc => doc.id === id);
console.log("documentToDelete", documentToDelete)
if (!documentToDelete) { if (!documentToDelete) {
console.error('Document not found'); console.error('Document not found');
return; return;
@@ -318,45 +315,46 @@ const confirmDelete = (id) => {
ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource, ksFileSource: documentToDelete.ingestionInfo.metadata.KsFileSource,
ksApplicationName: documentToDelete.ingestionInfo.metadata.KsApplicationName, 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 => { .then(response => {
console.log('Delete resource:', response.data) console.log('Delete resource:', response.data)
ksdocuments.value = ksdocuments.value.filter(doc => doc.id !== id); updateDocuments(); // Call updateDocuments after successful deletion
console.log('ksdocuments.value', ksdocuments.value) toast.add({ severity: 'success', summary: 'Success', detail: 'Deletion Completed', life: 3000 });
toast.add({ severity: 'info', summary: 'Confirmed', detail: 'deletion is in PROGRESS', life: 3000 });
}) })
.catch(error => { .catch(error => {
console.error('Error deleting records: ', error) console.error('Error deleting records: ', error)
toast.add({ severity: 'error', summary: 'Error', detail: 'Error in Deletion', life: 3000 }); 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 //ingestion
const startIndividualngestion = (id) => { const startIndividualngestion = (id) => {
toast.add({ severity: 'info', summary: 'Info', detail: 'Starting Ingestion', life: 3000 });
axios.get(`/test/ingest_document/${id}`) axios.get(`/test/ingest_document/${id}`)
.then(response => { .then(response => {
ingestionResult.value = response.data; ingestionResult.value = response.data;
if (response.data.status == "OK") { if (response.data.status == "OK") {
ksdocuments.value.forEach(element => { ksdocuments.value.forEach(element => {
updateDocuments();
if (response.data.ingestedDocumentId.includes(element.id)) { if (response.data.ingestedDocumentId.includes(element.id)) {
element.status = "INGESTED" element.status = "INGESTED"
updateDocuments();
toast.add({severity: 'success', summary: 'Success', detail: 'File ingested successfully!', life: 3000});
} }
}); });
} else { } else {
ingestionResult.value = `Error: ${response.data.message}`; ingestionResult.value = `Error: ${response.data.message}`;
} }
ingestionDialogVisible.value = true; //ingestionDialogVisible.value = true;
}) })
.catch(error => { .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}`; ingestionResult.value = `Error: ${response.data.message}`;
} }
ingestionDialogVisible.value = true; //ingestionDialogVisible.value = true;
}) })
.catch(error => { .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 //new record creation
const newKsDocument = () => { const newKsDocument = () => {
console.log('new');
router.push({ name: 'ks-document-new' }); router.push({ name: 'ks-document-new' });
} }
// Function to format date string // Function to format date string
@@ -394,6 +392,7 @@ function formatDate(dateString) {
return moment(dateString).format('MM/DD/YYYY'); return moment(dateString).format('MM/DD/YYYY');
} }
</script> </script>
<style scoped> <style scoped>
@@ -411,27 +410,6 @@ function formatDate(dateString) {
cursor: not-allowed; 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 { .spinner-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -447,12 +425,6 @@ function formatDate(dateString) {
color: var(--primary-color, #007bff); 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 { @keyframes spin {
0% { 0% {
@@ -491,4 +463,5 @@ function formatDate(dateString) {
.card { .card {
margin: 2rem; margin: 2rem;
} }
</style> </style>

422
src/views/pages/ksDocuments/KsNewDocumentForm.vue
View File

@@ -1,130 +1,240 @@
<template> <template>
<Fluid> <!-- <Toast />
<div class="flex mt-6"> <ConfirmPopup></ConfirmPopup>
<div class="card flex flex-col gap-4 w-full"> <div v-if="loadingStore.another_loading" class="loading-container">
<div> <div class="spinner-container">
<h2 class="text-3xl font-bold mb-4">Ks document</h2> <ProgressSpinner class="spinner" />
<p class="loading-text">Loading...</p>
</div> </div>
</div> -->
<Fluid>
<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 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"> <form @submit.prevent="submitForm" class="p-fluid">
<div class="col-12 md:col-6 mb-4"> <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"> <span class="p-float-label">
<label for="description" v-tooltip="'A brief overview of the document.'">Document <label for="description">Document Description</label>
Description</label> <i class="pi pi-info-circle text-violet-600 cursor-pointer"
<InputText id="description" type="text" v-model="formData.description" required class="w-full" /> v-tooltip="'A brief overview of the document'"></i>
<InputText id="description" type="text" v-model="formData.description" required
class="w-full" />
</span> </span>
</div> </div>
<div class="col-12 md:col-6 mb-4"> <div class="col-12 md:col-6 mb-4">
<span class="p-float-label"> <span class="p-float-label">
<label for="type" <label for="type">File Type</label>
v-tooltip="'Specify the type of file here. e.g, PDF Document, DOCX, TXT, MD Document etc..'">File <i class="pi pi-info-circle text-violet-600 cursor-pointer"
Type</label> v-tooltip="'Specify the type of file'"></i>
<InputText id="type" v-model="formData.type" required class="w-full" /> <InputText id="type" v-model="formData.type" required class="w-full" />
</span> </span>
</div> </div>
<div class="col-12 md:col-6 mb-4"> <div class="col-12 md:col-6 mb-4">
<span class="p-float-label"> <span class="p-float-label">
<label for="ksProjectName" v-tooltip="'Enter the project name here.'">KS Project Name</label> <label for="ksProjectName">KS Project Name</label>
<InputText id="ksProjectName" v-model="userPrefStore.selectedProject.internal_name" required <InputText id="ksProjectName" v-model="userPrefStore.selectedProject.internal_name" required
class="w-full" /> class="w-full" :disabled="true" />
</span> </span>
</div> </div>
<div class="col-12 md:col-6 mb-4"> <div class="col-12 md:col-6 mb-4">
<span class="p-float-label"> <span class="p-float-label">
<label for="ksApplicationName" v-tooltip="'Enter the application name here.'">KS Application Name</label> <label for="ksApplicationName">KS Application Name</label>
<InputText id="ksApplicationName" v-model="userPrefStore.getSelApp.internal_name" required <Dropdown id="ksApplicationName" v-model="formData.ksApplicationName"
class="w-full" /> :options="availableAppOptions" optionLabel="name" required class="w-full"></Dropdown>
</span> </span>
</div> </div>
<div class="col-12 md:col-6 mb-4"> <div class="col-12 md:col-6 mb-4">
<span class="p-float-label"> <span class="p-float-label">
<label for="ksDocType" v-tooltip="'Specify the type of document e.g functional, code_istruction'">KS <label for="ksDocType">KS Document Type</label>
Document Type</label>+ <i class="pi pi-info-circle text-violet-600 cursor-pointer"
<Dropdown id="ksDocType" v-model="formData.ksDocType" :options="documentTypeOptions" optionLabel="name"> v-tooltip="'Specify the type of document'"></i>
</Dropdown> <Dropdown id="ksDocType" v-model="formData.ksDocType" :options="documentTypeOptions"
optionLabel="name" :required class="w-full"></Dropdown>
</span> </span>
</div> </div>
<div class="col-12 md:col-6 mb-4"> <div class="col-12 md:col-6 mb-4">
<span class="p-float-label"> <span class="p-float-label">
<label for="ksDocSource" <label for="ksDocSource">KS Document Source</label>
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 <i class="pi pi-info-circle text-violet-600 cursor-pointer"
Document Source</label> 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" /> <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
</span> </span>
</div> </div>
</TabPanel>
<div class="col-12 md:col-6 mb-4"> <TabPanel value="1">
<div class="col-12 md:col-6 mb-4 mt-4">
<span class="p-float-label"> <span class="p-float-label">
<label for="defaultChunkSize" v-tooltip="'Define the default size for chunks of data.'">Default Chunk <label for="defaultChunkSize">Default Chunk Size</label>
Size</label> <i class="pi pi-info-circle text-violet-600 cursor-pointer"
<InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" /> v-tooltip="'Define the default size for chunks of data'"></i>
<InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required
class="w-full" />
</span> </span>
<small v-if="errors.defaultChunkSize" class="text-red-500">{{ errors.defaultChunkSize }}</small>
</div> </div>
<div class="col-12 md:col-6 mb-4"> <div class="col-12 md:col-6 mb-4">
<span class="p-float-label"> <span class="p-float-label">
<label for="minChunkSize" v-tooltip="'Specify the minimum allowable size for chunks'">Min Chunk <label for="minChunkSize">Min Chunk Size</label>
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" />
</span> </span>
<small v-if="errors.minChunkSize" class="text-red-500">{{ errors.minChunkSize }}</small>
</div> </div>
<div class="col-12 md:col-6 mb-4"> <div class="col-12 md:col-6 mb-4">
<span class="p-float-label"> <span class="p-float-label">
<label for="maxNumberOfChunks" v-tooltip="'Set the maximum number of chunks allowed.'">Max Number of <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
Chunks</label> <i class="pi pi-info-circle text-violet-600 cursor-pointer"
<InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" /> v-tooltip="'Define the minimum chunk size that can be embedded'"></i>
<InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required
class="w-full" />
</span> </span>
<small v-if="errors.minChunkSizeToEmbed" class="text-red-500">{{ errors.minChunkSizeToEmbed
}}</small>
</div> </div>
<div class="col-12 md:col-6 mb-4"> <div class="col-12 md:col-6 mb-4">
<span class="p-float-label"> <span class="p-float-label">
<label for="minChunkSizeToEmbed" v-tooltip="'Define the minimum chunk size that can be embedded.'">Min <label for="maxNumberOfChunks">Max Number of Chunks</label>
Chunk Size to <i class="pi pi-info-circle text-violet-600 cursor-pointer"
Embed</label> v-tooltip="'Set the maximum number of chunks allowed'"></i>
<InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" /> <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required
class="w-full" />
</span> </span>
<small v-if="errors.maxNumberOfChunks" class="text-red-500">{{ errors.maxNumberOfChunks
}}</small>
</div> </div>
</TabPanel>
<div class="col-12 mb-4"> </TabPanels>
<label for="file" class="block text-lg mb-2" v-tooltip="'Upload the file here.'">File</label> </Tabs>
<div class="flex align-items-center"> </div>
<FileUpload ref="fileUpload" mode="basic" :maxFileSize="10000000000" chooseLabel="Select File" <div class="flex justify-between pt-6">
class="p-button-rounded" @select="onFileSelect" /> <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> </div>
<Button type="submit" label="Submit" :fluid="false"></Button> <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> </form>
</div> </StepPanels>
</Stepper>
</div> </div>
</Fluid> </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> </template>
<script setup> <script setup>
import axios from 'axios'; import axios from 'axios';
import { useToast } from 'primevue/usetoast'; import { useToast } from 'primevue/usetoast';
import { ref } from 'vue'; import { ref, watch, computed, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { UserPrefStore } from '../../../stores/UserPrefStore'; 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 toast = useToast();
const router = useRouter(); const router = useRouter();
const userPrefStore = UserPrefStore(); 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([ const documentTypeOptions = ref([
{ name: 'Functional', value: 'functional' }, { name: 'Functional', value: 'functional' },
{ name: 'Code Instruction', value: 'code_instruction' }, { name: 'Code Instruction', value: 'code_instruction' },
{ name: 'Specification', value: 'specification' }, { name: 'Specification', value: 'specification' },
{ name: 'Other', value: 'other' } { 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({ const formData = ref({
description: '', description: '',
type: '', type: '',
ksProjectName: '', ksProjectName: '',
ksApplicationName: '', ksApplicationName: { name: 'Cross', value: '' },
ksDocType: 'functional', ksDocType: { name: 'Functional', value: 'functional' },
ksDocSource: '', ksDocSource: '',
defaultChunkSize: 2000, defaultChunkSize: 2000,
minChunkSize: 50, minChunkSize: 50,
@@ -132,48 +242,200 @@ const formData = ref({
minChunkSizeToEmbed: 50 minChunkSizeToEmbed: 50
}); });
const fileUpload = ref(null);
const selectedFile = ref(null);
const onFileSelect = (event) => { const isFileSelected = computed(() => selectedFile.value !== null);
selectedFile.value = event.files[0];
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 isFormValid = computed(() => {
const formDataToSend = new FormData(); 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) { const onFileSelect = (event) => {
formDataToSend.append('file', selectedFile.value); 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); toast.add({
formDataToSend.append('type', formData.value.type); severity: 'success',
formDataToSend.append('ksApplicationName', userPrefStore.getSelApp.internal_name); summary: 'Success',
formDataToSend.append('ksProjectName', userPrefStore.selectedProject.internal_name); detail: 'File uploaded successfully!',
formDataToSend.append('ksDocType', formData.value.ksDocType.value); life: 3000
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);
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 { try {
const response = await axios.post('/upload', formDataToSend, { const response = await axios.post('/upload', formDataToSend, {
headers: { headers: {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
} }
}); });
console.log('Upload successful:', response.data); await startIndividualngestion(response.data.id);
toast.add({ severity: 'success', summary: 'Success', detail: 'File uploaded successfully', life: 3000 }); toast.add({ severity: 'success', summary: 'Success', detail: 'File ingested successfully', life: 3000 });
// Redirect to desktop.vue
router.push({ name: 'ks-document' }); router.push({ name: 'ks-document' });
} catch (error) { } catch (error) {
console.error('Upload failed:', error); console.error('Ingestion failed:', error);
toast.add({ severity: 'error', summary: 'Error', detail: 'File upload failed', life: 3000 }); toast.add({ severity: 'error', summary: 'Error', detail: 'File ingestion failed', life: 3000 });
} }
}; };
</script> </script>
<style scoped></style> <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>

27
src/views/pages/similaritySearch/KsSimilaritySearch.vue
View File

@@ -14,14 +14,15 @@
<Dropdown v-model="selectedDoctype" :options="doctypeOptions" optionLabel="label" placeholder="Select Doctype" <Dropdown v-model="selectedDoctype" :options="doctypeOptions" optionLabel="label" placeholder="Select Doctype"
:disabled="isPicklistDisabled" class="doctype-dropdown" @change="updateQuery()" /> :disabled="isPicklistDisabled" class="doctype-dropdown" @change="updateQuery()" />
</div> </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>
<div v-if="messages.length > 0" class="results-container mt-6"> <div v-if="messages.length > 0" class="results-container mt-6">
<Card v-for="(result, index) in messages" :key="index" class="result-card"> <Card v-for="(result, index) in messages" :key="index" class="result-card">
<template #content> <template #content>
<h3 class="text-xl font-semibold mb-2">{{ result.metadata.source }}</h3>
<ScrollPanel style="width: 100%; max-height: 400px"> <ScrollPanel style="width: 100%; max-height: 400px">
<CodeSnippet :code="dynamicCode" language="systemd" /> <CodeSnippet :code="result.text" language="systemd" />
</ScrollPanel> </ScrollPanel>
</template> </template>
</Card> </Card>
@@ -41,7 +42,9 @@ import { computed, onMounted, ref, watch } from 'vue';
import { onBeforeRouteLeave } from 'vue-router'; import { onBeforeRouteLeave } from 'vue-router';
import { KsDocumentStore } from '../../../stores/KsDocumentStore'; import { KsDocumentStore } from '../../../stores/KsDocumentStore';
import { UserPrefStore } from '../../../stores/UserPrefStore'; import { UserPrefStore } from '../../../stores/UserPrefStore';
import { LoadingStore } from '@/stores/LoadingStore';
const loadingStore = LoadingStore();
const query = ref(''); const query = ref('');
const dropdownItem = ref(null); const dropdownItem = ref(null);
const messages = ref([]); const messages = ref([]);
@@ -66,7 +69,8 @@ const selectedDoctype = ref(null);
const doctypeOptions = ref([ const doctypeOptions = ref([
{ label: 'All', value: 'all' }, { label: 'All', value: 'all' },
{ label: 'Functional', value: 'functional' }, { label: 'Functional', value: 'functional' },
{ label: 'Code Instruction', value: 'code_instruction' } { label: 'Code Instruction', value: 'code_instruction' },
{ label: 'Other', value: 'other' }
]); ]);
onMounted(() => { onMounted(() => {
@@ -90,6 +94,7 @@ onMounted(() => {
+ "' AND " + "'KsDocSource' == '" + doc.ingestionInfo.metadata.KsDocSource + "' AND " + "'KsDocSource' == '" + doc.ingestionInfo.metadata.KsDocSource
+ "' AND " + "'KsDoctype' == '" + doc.ingestionInfo.metadata.KsDoctype + "'" + "' AND " + "'KsDoctype' == '" + doc.ingestionInfo.metadata.KsDoctype + "'"
} }
console.log(filterQuery.value)
}); });
function updateQuery() { function updateQuery() {
@@ -106,8 +111,6 @@ function updateQuery() {
if (selectedDoctype.value && selectedDoctype.value.value !== "all") { if (selectedDoctype.value && selectedDoctype.value.value !== "all") {
filterQuery.value = filterQuery.value + " AND 'KsDoctype' == '" + selectedDoctype.value.value + "'"; filterQuery.value = filterQuery.value + " AND 'KsDoctype' == '" + selectedDoctype.value.value + "'";
} }
console.log('Filter query:', filterQuery.value);
} }
onBeforeRouteLeave(() => { onBeforeRouteLeave(() => {
@@ -115,6 +118,8 @@ onBeforeRouteLeave(() => {
}); });
const sendQuery = () => { const sendQuery = () => {
messages.value = []
loadingStore.exectuion_loading = true;
if (query.value.trim() !== '' && filterQuery) { if (query.value.trim() !== '' && filterQuery) {
axios.get('/test/query_vector', { axios.get('/test/query_vector', {
params: { params: {
@@ -124,28 +129,29 @@ const sendQuery = () => {
}) })
.then(response => { .then(response => {
const data = response.data; const data = response.data;
console.log('API response:', data);
if (data && Array.isArray(data) && data.length > 0) { if (data && Array.isArray(data) && data.length > 0) {
messages.value = data; messages.value = data;
toast.add({ severity: 'success', summary: 'Success', detail: 'Query sent successfully', life: 3000 }); toast.add({ severity: 'success', summary: 'Success', detail: 'Query sent successfully', life: 3000 });
} else { } else {
toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 }); toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 });
} }
loadingStore.exectuion_loading = false;
}) })
.catch(error => { .catch(error => {
loadingStore.exectuion_loading = false;
console.error('Error sending query:', error); console.error('Error sending query:', error);
toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 }); toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
}); });
} else { } else {
toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 }); 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 to generate dynamic code snippet
function generateDynamicCode() { function generateDynamicCode() {
const randomValue = messages.value.join(', '); return messages.value.map(message => `[${message}]`);
return `[${randomValue}]`;
} }
watch(messages, (newMessages) => { watch(messages, (newMessages) => {
@@ -203,8 +209,9 @@ watch(messages, (newMessages) => {
} }
.result-card { .result-card {
margin-bottom: 1rem; margin-bottom: 2rem;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Increased shadow for more emphasis */
} }
.p-scrollpanel { .p-scrollpanel {