146 lines
4.0 KiB
Vue
146 lines
4.0 KiB
Vue
<template>
|
|
<Fluid>
|
|
<h2 class="text-4xl font-semibold text-center mb-4">Similarity Search</h2>
|
|
<div class="similarity-search">
|
|
<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 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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Button label="Send" icon="pi pi-send" @click="sendQuery" class="send-button" />
|
|
</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 './CodeSnippet.vue';
|
|
|
|
const query = ref('');
|
|
const dropdownItem = ref(null);
|
|
const messages = ref([]);
|
|
const toast = useToast();
|
|
const dynamicCode = ref('');
|
|
|
|
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 });
|
|
}
|
|
};
|
|
|
|
// 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> |