new info added and individual ingestion enabled

src/layout/AppMenu.vue

@@ -7,12 +7,14 @@ 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_code_repo' }
+        { label: 'Code Repository', icon: 'pi pi-fw pi-id-card', to: '/ks_code_repo' }
         ]
     },
     {
         label: 'Vector Database',
-        items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' }]
+        items: [{ label: 'Dashboard', icon: 'pi pi-fw pi-home', to: '/' },
+        { label: 'Similarity Search', icon: 'pi pi-fw pi-search', to: '/ks_similarity_search' }
+        ]
     },
 ]);
 </script>

src/main.js

@@ -2,10 +2,10 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 
-import PrimeVue from 'primevue/config';
 import Aura from '@primevue/themes/aura';
-import ToastService from 'primevue/toastservice';
+import PrimeVue from 'primevue/config';
 import ConfirmationService from 'primevue/confirmationservice';
+import ToastService from 'primevue/toastservice';
 
 import BlockViewer from '@/components/BlockViewer.vue';
 

src/router/index.js

@@ -17,8 +17,9 @@ const router = createRouter({
                     path: '/ksdocuments', 
                     children: [
                         {path: '', name: 'ks-document', component: () => import('@/views/pages/KsDocuments.vue')},
-                        {path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/KsDocumentForm.vue')},
-                        {path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsDocumentForm.vue')}
+                        {path: 'new', name: 'ks-document-new', component: () => import('@/views/pages/KsNewDocumentForm.vue')},
+                        {path: ':id', name: 'ks-document-edit', component: () => import('@/views/pages/KsEditDocumentForm.vue')},
+                        {path: '/ks_similarity_search', name: 'ks_similarity_search', component: () => import('@/views/pages/KsSimilaritySearch.vue')}
         
                     ]
    

src/views/pages/KsDocumentForm.vue

@@ -1,87 +0,0 @@
-<template>
-    <div className="card">        
-        <h5>Ks document</h5>
-        <form @submit.prevent="submitForm">
-            <div class="p-field">
-                <label for="description">Description</label>
-                <InputText id="description" v-model="ksdocument.description" />
-            </div>
-            <div class="p-field">
-                <label for="fileName">File Name</label>
-                <InputText id="fileName" v-model="ksdocument.fileName" />
-            </div>
-            <div class="p-field">
-                <label for="filePath">File Path</label>
-                <InputText id="filePath" v-model="ksdocument.filePath" />
-            </div>
-            <div class="p-field">
-                <label for="ingestionDate">Ingestion Date</label>
-                <InputText id="ingestionDate" v-model="ksdocument.ingestionDate" />
-            </div>
-            <div class="p-field">
-                <label for="defaultChunkSize">Default Chunk Size</label>
-                <InputNumber id="defaultChunkSize" v-model="ksdocument.ingestionInfo.defaultChunkSize" />
-            </div>
-            <div class="p-field">
-                <label for="maxNumberOfChunks">Max Number of Chunks</label>
-                <InputNumber id="maxNumberOfChunks" v-model="ksdocument.ingestionInfo.maxNumberOfChunks" />
-            </div>
-            <div class="p-field">
-                <label for="minChunkSize">Min Chunk Size</label>
-                <InputNumber id="minChunkSize" v-model="ksdocument.ingestionInfo.minChunkSize" />
-            </div>
-            <div class="p-field">
-                <label for="minChunkSizeToEmbed">Min Chunk Size To Embed</label>
-                <InputNumber id="minChunkSizeToEmbed" v-model="ksdocument.ingestionInfo.minChunkSizeToEmbed" />
-            </div>
-            <div class="p-field">
-                <label for="type">Type</label>
-                <InputText id="type" v-model="ksdocument.ingestionInfo.type" />
-            </div>
-            <div class="p-field">
-                <label for="ingestionStatus">Ingestion Status</label>
-                <InputText id="ingestionStatus" v-model="ksdocument.ingestionStatus" />
-            </div>
-            <div class="p-field">
-                <label for="name">Name</label>
-                <InputText id="name" v-model="ksdocument.name" />
-            </div>
-            <div class="p-field">
-                <label for="metadata">Metadata</label>
-                <InputTextarea id="metadata" v-model="ksdocument.ingestionInfo.metadata" />
-            </div>
-            <Button label="Submit" type="submit" />
-        </form>
-    </div>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import { onMounted } from 'vue'
-import axios from 'axios';
-
-import { useRoute, useRouter } from 'vue-router'
-import { data } from 'autoprefixer';
-
-const route = useRoute()
-
-const ksdocument = ref({ingestionInfo:{}});
-
-onMounted(() => {
-    axios.get('http://localhost:8082/ksdocuments/'+route.params.id)
-        .then(response => {
-            console.log(response.data);
-            ksdocument.value = response.data;
-        });
-});
-
-const getStatus = (data) => {
-    if (data.ingestionStatus === 'INGESTED') {
-        return 'success';
-    } else if (data.ingestionStatus === 'NEW') {
-        return 'danger';
-    } else {
-        return 'warning';
-    }
-}
-</script>

src/views/pages/KsDocuments.vue

@@ -1,48 +1,50 @@
 <template>
-    <div className="card">        
+    <div className="card">
 
-        <DataTable
-            :value="ksdocuments"
-            :paginator="true"
-            :rows="10"
-            dataKey="id"
-            :rowHover="true"
-            showGridlines
-        >
-        <template #header>
-            <div class="flex flex-wrap items-center justify-between gap-2">
-                <span class="text-xl font-bold">KS Documents</span>
-                <Button icon="pi pi-plus" rounded raised @click="newKsDocument()" /> 
-            </div>
-        </template>
-        <Column field="name" header="Name"></Column>
-        <Column field="fileName" header="File Name"></Column>
-        <Column field="ingestionStatus" header="Status">
-            <template #body="slotProps">
-                <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
+        <DataTable :value="ksdocuments" :paginator="true" :rows="10" dataKey="id" :rowHover="true" showGridlines>
+            <template #header>
+                <div class="flex flex-wrap items-center justify-between gap-2">
+                    <span class="text-xl font-bold">KS Documents</span>
+                    <Button icon="pi pi-plus" rounded raised @click="newKsDocument()" />
+                </div>
             </template>
-        </Column>
-        <Column field="ingestionDate" header="Ingestion Date"></Column>
-        <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
-            <template #body="slotProps">
-                <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)"/>
-            </template>
-        </Column>
+            <Column field="name" header="Name"></Column>
+            <Column field="fileName" header="File Name"></Column>
+            <Column field="ingestionStatus" header="Status">
+                <template #body="slotProps">
+                    <Tag :value="slotProps.data.ingestionStatus" :severity="getStatus(slotProps.data)" />
+                </template>
+            </Column>
+            <Column field="ingestionDate" header="Ingestion Date"></Column>
+            <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
+                <template #body="slotProps">
+                    <Button type="button" icon="pi pi-pencil" rounded @click="editKsDocument(slotProps.data)" />
+                    <Tag :value="slotProps.data.id" />
+                    <Tag :value="slotProps.data.ingestionInfo.id" />
+                    <Button type="button" v-if="slotProps.data.ingestionStatus === 'NEW'" icon="pi pi-play" rounded
+                        @click="startIngestion(slotProps.data.id)" />
+                </template>
+            </Column>
         </DataTable>
+
+        <Dialog header="Ingestion Result" v-model:visible="ingestionDialogVisible" :modal="true" :closable="false">
+            <p>{{ ingestionResult }}</p>
+            <Button label="OK" icon="pi pi-check" @click="ingestionDialogVisible = false" />
+        </Dialog>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
-import { onMounted } from 'vue'
 import axios from 'axios';
-
-import { useRoute, useRouter } from 'vue-router'
-import { data } from 'autoprefixer';
+import { onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
 
 const router = useRouter()
 const ksdocuments = ref(null);
 
+const ingestionDialogVisible = ref(false);
+const ingestionResult = ref('');
+
 onMounted(() => {
     axios.get('http://localhost:8082/fe-api/ksdocuments')
         .then(response => {
@@ -57,7 +59,7 @@ const getStatus = (data) => {
     } else if (data.ingestionStatus === 'NEW') {
         return 'danger';
     } else {
-        return 'warning';
+        return 'warn';
     }
 }
 
@@ -66,9 +68,31 @@ const editKsDocument = (data) => {
     router.push({ name: 'ks-document-edit', params: { id: data.id } });
 }
 
+const startIngestion = (id) => {
+    axios.get(`http://localhost:8082/test/ingest_document/${id}`)
+        //axios.get('http://localhost:8082/test/ingestion_loop')
+        .then(response => {
+            ingestionResult.value = response.data;
+            if (response.data.status == "OK") {
+                ksdocuments.value.forEach(element => {
+                    if (response.data.ingestedDocumentId.includes(element.id)) {
+                        element.status = "INGESTED"
+                    }
+                });
+            } else {
+                ingestionResult.value = `Error: ${response.data.message}`;
+            }
+
+            ingestionDialogVisible.value = true;
+        })
+        .catch(error => {
+            ingestionDialogVisible.value = true;
+        });
+};
+
 const newKsDocument = () => {
     console.log('new');
-    router.push({ name: 'ks-document-new'});
+    router.push({ name: 'ks-document-new' });
 
 }
 </script>

src/views/pages/KsNewDocumentForm.vue

@@ -0,0 +1,263 @@
+<template>
+  <Fluid>
+    <div class="flex mt-6">
+      <div class="card flex flex-col gap-4 w-full">
+        <div>
+          <h2 class="text-3xl font-bold mb-4">Ks document</h2>
+        </div>
+        <form @submit.prevent="submitForm" class="p-fluid">
+          <div class="lex flex-col md:flex-row gap-4">
+            <div class="flex flex-wrap gap-2 w-full">
+              <label for="description">Description</label>
+              <InputText id="description" type="text" v-model="formData.description" required class="w-full" />
+            </div>
+          </div>
+
+          <div class="col-12 md:col-6 mb-4">
+            <span class="p-float-label">
+              <label for="type">Type</label>
+              <InputText id="type" v-model="formData.type" required class="w-full" />
+            </span>
+          </div>
+
+          <div class="col-12 md:col-6 mb-4">
+            <span class="p-float-label">
+              <label for="ksApplicationName">KS Application Name</label>
+              <InputText id="ksApplicationName" v-model="formData.ksApplicationName" required class="w-full" />
+            </span>
+          </div>
+
+          <div class="col-12 md:col-6 mb-4">
+            <span class="p-float-label">
+              <label for="ksDocType">KS Doc Type</label>
+              <InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" />
+            </span>
+          </div>
+
+          <div class="col-12 md:col-6 mb-4">
+            <span class="p-float-label">
+              <label for="ksDocSource">KS Doc Source</label>
+              <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
+            </span>
+          </div>
+
+          <div class="col-12 md:col-6 mb-4">
+            <span class="p-float-label">
+              <label for="defaultChunkSize">Default Chunk Size</label>
+              <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
+            </span>
+          </div>
+
+          <div class="col-12 md:col-6 mb-4">
+            <span class="p-float-label">
+              <label for="minChunkSize">Min Chunk Size</label>
+              <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
+            </span>
+          </div>
+
+          <div class="col-12 md:col-6 mb-4">
+            <span class="p-float-label">
+              <label for="maxNumberOfChunks">Max Number of Chunks</label>
+              <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
+            </span>
+          </div>
+
+          <div class="col-12 md:col-6 mb-4">
+            <span class="p-float-label">
+              <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
+              <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
+            </span>
+          </div>
+
+          <div class="col-12 mb-4">
+            <label for="file" class="block text-lg mb-2">File</label>
+            <div class="flex align-items-center">
+              <FileUpload ref="fileUpload" mode="basic" :maxFileSize="10000000" chooseLabel="Select File"
+                class="p-button-rounded" @select="onFileSelect" />
+            </div>
+          </div>
+          <Button type="submit" label="Submit" :fluid="false" class="p-button-rounded p-button-lg" />
+        </form>
+      </div>
+    </div>
+  </Fluid>
+  <!--div class="card-container">
+    <form @submit.prevent="submitForm" class="p-fluid">
+      <div class="grid">
+        <div class="col-12 mb-4">
+          <label for="file" class="block text-lg mb-2">File</label>
+          <div class="flex align-items-center">
+            <FileUpload
+              ref="fileUpload"
+              mode="basic"
+              :maxFileSize="10000000"
+              chooseLabel="Select File"
+              class="p-button-rounded"
+              @select="onFileSelect"
+            />
+
+          </div>
+        </div>
+        <div class="col-12 md:col-6 mb-4">
+          <span class="p-float-label">
+            <label for="description">Description</label>
+            <InputText id="description" 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">Type</label>
+            <InputText id="type" v-model="formData.type" required class="w-full" />
+          </span>
+        </div>
+        <div class="col-12 md:col-6 mb-4">
+          <span class="p-float-label">
+            <label for="ksApplicationName">KS Application Name</label>
+            <InputText id="ksApplicationName" v-model="formData.ksApplicationName" required class="w-full" />
+          </span>
+        </div>
+        <div class="col-12 md:col-6 mb-4">
+          <span class="p-float-label">
+            <label for="ksDocType">KS Doc Type</label>
+            <InputText id="ksDocType" v-model="formData.ksDocType" required class="w-full" />
+          </span>
+        </div>
+        <div class="col-12 md:col-6 mb-4">
+          <span class="p-float-label">
+            <label for="ksDocSource">KS Doc Source</label>
+            <InputText id="ksDocSource" v-model="formData.ksDocSource" required class="w-full" />
+          </span>
+        </div>
+        <div class="col-12 md:col-6 mb-4">
+          <span class="p-float-label">
+            <label for="defaultChunkSize">Default Chunk Size</label>
+            <InputNumber id="defaultChunkSize" v-model="formData.defaultChunkSize" required class="w-full" />
+          </span>
+        </div>
+        <div class="col-12 md:col-6 mb-4">
+          <span class="p-float-label">
+            <label for="minChunkSize">Min Chunk Size</label>
+            <InputNumber id="minChunkSize" v-model="formData.minChunkSize" required class="w-full" />
+          </span>
+        </div>
+        <div class="col-12 md:col-6 mb-4">
+          <span class="p-float-label">
+            <label for="maxNumberOfChunks">Max Number of Chunks</label>
+            <InputNumber id="maxNumberOfChunks" v-model="formData.maxNumberOfChunks" required class="w-full" />
+          </span>
+        </div>
+        <div class="col-12 md:col-6 mb-4">
+          <span class="p-float-label">
+            <label for="minChunkSizeToEmbed">Min Chunk Size to Embed</label>
+            <InputNumber id="minChunkSizeToEmbed" v-model="formData.minChunkSizeToEmbed" required class="w-full" />
+          </span>
+        </div>
+      </div>
+      <Button type="submit" label="Submit" class="p-button-rounded p-button-lg" />
+    </form>
+  </div-->
+</template>
+
+<script setup>
+import axios from 'axios';
+import { useToast } from 'primevue/usetoast';
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+const toast = useToast();
+const router = useRouter();
+
+const formData = ref({
+  description: 'Test-UI-DevopsJ2CSystem',
+  ingestionStatus: 'NEW',
+  type: 'MD_DOCUMENT',
+  ksApplicationName: 'jenkins',
+  ksDocType: 'setup-documentation',
+  ksDocSource: 'guide-for-techincal-setup',
+  defaultChunkSize: 1000,
+  minChunkSize: 200,
+  maxNumberOfChunks: 1000,
+  minChunkSizeToEmbed: 20
+});
+
+const fileUpload = ref(null);
+const selectedFile = ref(null);
+
+const onFileSelect = (event) => {
+  selectedFile.value = event.files[0];
+};
+
+const submitForm = async () => {
+  const formDataToSend = new FormData();
+
+  if (selectedFile.value) {
+    formDataToSend.append('file', selectedFile.value);
+  }
+
+  // Append each field separately to ensure they are correctly processed by the server
+  formDataToSend.append('description', formData.value.description);
+  formDataToSend.append('type', formData.value.type);
+  formDataToSend.append('ksApplicationName', formData.value.ksApplicationName);
+  formDataToSend.append('ksDocType', formData.value.ksDocType);
+  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);
+
+  try {
+    const response = await axios.post('http://localhost:8082/upload', formDataToSend, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+    console.log('Upload successful:', response.data);
+    toast.add({ severity: 'success', summary: 'Success', detail: 'File uploaded successfully', life: 3000 });
+
+    // Redirect to desktop.vue
+    router.push({ name: 'ks-document' });
+  } catch (error) {
+    console.error('Upload failed:', error);
+    toast.add({ severity: 'error', summary: 'Error', detail: 'File upload failed', life: 3000 });
+  }
+};
+
+</script>
+
+<style scoped>
+.card-container {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+:deep(.p-card) {
+  background: linear-gradient(145deg, #f3f4f6, #ffffff);
+  border-radius: 15px;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+:deep(.p-button) {
+  background: linear-gradient(45deg, #4CAF50, #45a049);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+:deep(.p-button:hover) {
+  background: linear-gradient(45deg, #45a049, #4CAF50);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+:deep(.p-inputtext:focus) {
+  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
+}
+
+:deep(.p-dropdown:focus) {
+  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
+}
+
+:deep(.p-inputnumber-input:focus) {
+  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
+}
+</style>

src/views/pages/KsSimilaritySearch.vue

@@ -0,0 +1,119 @@
+<template>
+  <Fluid>
+    <div class="flex mt-6">
+      <div class="card flex flex-col gap-4 w-full">
+        <div>
+          <h2 class="text-3xl font-bold mb-4">Similarity Search</h2>
+        </div>
+        <div class="flex flex-wrap">
+          <!--label for="address">Address</label-->
+          <Textarea id="query" v-model="query" rows="4" placeholder="Enter your query..." class="w-full" />
+        </div>
+
+        <div class="flex flex-col md:flex-row gap-4">
+          <div class="flex flex-wrap gap-2 w-full">
+            <Select id="type" v-model="dropdownItem" :options="dropdownItems" optionLabel="name"
+              placeholder="Select type" class="w-full"></Select>
+          </div>
+        </div>
+
+        <div class="p-field p-col-12 p-md-2">
+          <Button label="Send" icon="pi pi-send" :fluid="false" @click="sendQuery" />
+        </div>
+      </div>
+    </div>
+
+    <div class="flex mt-6">
+      <div class="results-container p-mt-4">
+        <Card v-for="(result, index) in messages" :key="index" class="p-mb-3">
+          <template #content>
+            <ScrollPanel style="width: 100%; max-height: 200px">
+              <pre class="result-content">{{ result }}</pre>
+            </ScrollPanel>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </Fluid>
+</template>
+
+<script setup>
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import ScrollPanel from 'primevue/scrollpanel';
+import { useToast } from 'primevue/usetoast';
+import { ref } from 'vue';
+
+const query = ref('');
+const dropdownItem = ref(null);
+const messages = ref([]);
+const toast = useToast();
+
+const dropdownItems = [
+  { name: 'Documentation', code: 'setup-documentation' },
+  { name: 'Deploy Documentation', code: 'deploy-documentation' }
+];
+
+
+const sendQuery = async () => {
+  if (query.value.trim() !== '' && dropdownItem.value) {
+    try {
+      const response = await fetch(`http://localhost:8082/test/query_vector?query="${query.value}"&type=${dropdownItem.value.code}`);
+      const data = await response.json();
+      console.log('API response:', data);
+
+      if (data && Array.isArray(data) && data.length > 0) {
+        messages.value = data;
+        toast.add({ severity: 'success', summary: 'Success', detail: 'Query sent successfully', life: 3000 });
+      } else {
+        toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 });
+      }
+    } catch (error) {
+      console.error('Error sending query:', error);
+      toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
+    }
+    query.value = '';
+    dropdownItem.value = null;
+  } else {
+    toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 });
+  }
+};
+</script>
+
+<style scoped>
+.similarity-search {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.results-container {
+  max-height: 600px;
+  overflow-y: auto;
+}
+
+.result-content {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-family: monospace;
+  font-size: 0.9em;
+  padding: 1rem;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+}
+
+.p-select {
+  width: 100%;
+}
+
+.p-select .p-select-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.p-inputtextarea {
+  resize: vertical;
+  min-height: 100px;
+}
+</style>