150 lines
4.1 KiB
Vue
150 lines
4.1 KiB
Vue
<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 Button from 'primevue/button';
|
|
import Card from 'primevue/card';
|
|
import ScrollPanel from 'primevue/scrollpanel';
|
|
import SelectButton from 'primevue/selectbutton'; // Import SelectButton
|
|
import { useToast } from 'primevue/usetoast';
|
|
import { watch, ref } from 'vue';
|
|
import CodeSnippet from '@/components/CodeSnippet.vue';
|
|
import axios from 'axios';
|
|
|
|
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: 'SourceCode', 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> |