new info added and individual ingestion enabled

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>