apollo-fe/src/views/pages/similaritySearch/KsSimilaritySearch.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 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';
import { KsDocumentStore } from '../../../stores/KsDocumentStore';

const query = ref('');
const dropdownItem = ref(null);
const messages = ref([]);
const toast = useToast();
const dynamicCode = ref('');
const ksDocumentStore = KsDocumentStore();
const doc = ksDocumentStore.getSelectedKsDocument;
//const filterQuery = ref("'KsApplicationName' == 'ATF'")
const filterQuery = ref("'KsApplicationName' == '" + doc.ingestionInfo.metadata.KsApplicationName
  + "' AND " + "'KsProjectName' == '" + doc.ingestionInfo.metadata.KsProjectName
  + "' AND " + "'KsFileSource' == '" + doc.ingestionInfo.metadata.KsFileSource
  + "' AND " + "'KsDocSource' == '" + doc.ingestionInfo.metadata.KsDocSource
  + "' AND " + "'KsDoctype' == '" + doc.ingestionInfo.metadata.KsDoctype + "'"
)

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>