folder structure modified

2024-10-11 12:17:40 +05:30
parent bda76abaf9
commit 175aff7216
9 changed files with 8 additions and 8 deletions
--- a/src/views/pages/similaritySearch/KsSimilaritySearch.vue
+++ b/src/views/pages/similaritySearch/KsSimilaritySearch.vue
@@ -0,0 +1,149 @@
+<template>
+  <Fluid>
+    <h2 class="text-4xl font-semibold text-center mb-4">Similarity Search</h2>
+    <div class="similarity-search">
+      <div class="card-container flex flex-col gap-6">
+        <div class="flex flex-col gap-4">
+          <Textarea id="query" v-model="query" rows="6" placeholder="Enter your query..." class="input-textarea" />
+          <div class="select-container">
+            <!--SelectButton id="type" v-model="dropdownItem" :options="dropdownItems" optionLabel="name"
+              class="select-button" /-->
+            <InputText v-model="filterQuery" type="text" placeholder="Add filterQuery" />
+          </div>
+        </div>
+        <Button label="Query" icon="pi pi-send" @click="sendQuery" class="send-button" />
+      </div>
+
+      <div v-if="messages.length > 0" class="results-container mt-6">
+        <Card v-for="(result, index) in messages" :key="index" class="result-card">
+          <template #content>
+            <ScrollPanel style="width: 100%; max-height: 400px">
+              <CodeSnippet :code="dynamicCode" language="systemd" />
+            </ScrollPanel>
+          </template>
+        </Card>
+      </div>
+    </div>
+  </Fluid>
+</template>
+
+<script setup>
+import CodeSnippet from '@/components/CodeSnippet.vue';
+import axios from 'axios';
+import Button from 'primevue/button';
+import Card from 'primevue/card';
+import ScrollPanel from 'primevue/scrollpanel';
+import { useToast } from 'primevue/usetoast';
+import { ref, watch } from 'vue';
+
+const query = ref('');
+const dropdownItem = ref(null);
+const messages = ref([]);
+const toast = useToast();
+const dynamicCode = ref('');
+const filterQuery = ref("'KsApplicationName' == 'ATF'")
+
+const dropdownItems = [
+  { name: 'Documentation', code: 'setup-documentation' },
+  { name: 'Deploy Documentation', code: 'deploy-documentation' },
+  { name: 'Source code', code: 'sourcecode' }
+];
+
+const sendQuery = () => {
+  if (query.value.trim() !== '' && filterQuery) {
+    axios.get('/test/query_vector', {
+      params: {
+        query: query.value,
+        filterQuery: filterQuery.value,
+      }
+    })
+      .then(response => {
+        const data = response.data;
+        console.log('API response:', data);
+
+        if (data && Array.isArray(data) && data.length > 0) {
+          messages.value = data;
+          toast.add({ severity: 'success', summary: 'Success', detail: 'Query sent successfully', life: 3000 });
+        } else {
+          toast.add({ severity: 'info', summary: 'Info', detail: 'No results found', life: 3000 });
+        }
+      })
+      .catch(error => {
+        console.error('Error sending query:', error);
+        toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to send query', life: 3000 });
+      });
+  } else {
+    toast.add({ severity: 'warn', summary: 'Warning', detail: 'Please enter a query and select a type', life: 3000 });
+  }
+};
+
+// Function to generate dynamic code snippet
+function generateDynamicCode() {
+  const randomValue = messages.value.join(', ');
+  return `[${randomValue}]`;
+}
+
+watch(messages, (newMessages) => {
+  dynamicCode.value = generateDynamicCode();
+});
+</script>
+
+<style scoped>
+.similarity-search {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.card-container {
+  padding: 2rem;
+  border-radius: 8px;
+  background-color: #ffffff;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.input-textarea {
+  width: 100%;
+  resize: vertical;
+  min-height: 150px;
+  /* Increased height for better readability */
+  border-radius: 8px;
+  padding: 1rem;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.select-container {
+  display: flex;
+  justify-content: center;
+}
+
+.select-button {
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.send-button {
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.results-container {
+  padding: 2rem;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.result-card {
+  margin-bottom: 1rem;
+  border-radius: 8px;
+}
+
+.p-scrollpanel {
+  border-radius: 8px;
+  background-color: #ffffff;
+}
+</style>