similaritysearch UI modified

src/views/pages/CodeSnippet.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="code-snippet-container">
+    <div class="button-container h-8 w-8 p-0 inline-flex items-center justify-center">
+        <!-- Button to copy code to clipboard -->
+        <Button icon="pi pi-copy" @click="copyToClipboard" class="p-mt-2" />
+    </div>
+    <!-- Code display area with syntax highlighting -->
+    <pre v-html="highlightedCode"></pre>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import Button from 'primevue/button';
+import Toast from 'primevue/toast';
+import { useToast } from 'primevue/usetoast';
+
+import Prism from 'prismjs';
+import 'prismjs/components/prism-javascript'; // Import necessary languages
+import 'prismjs/components/prism-systemd'; // Import necessary languages
+import 'prismjs/themes/prism-tomorrow.css'; // Import a theme for syntax highlighting
+
+const toast = useToast();
+
+// Define the code snippet as a prop
+const props = defineProps({
+  code: {
+    type: String,
+    required: true
+  },
+  language: {
+    type: String,
+    default: 'systemd'
+  }
+});
+
+const highlightedCode = computed(() => {
+  return Prism.highlight(props.code, Prism.languages[props.language], props.language);
+});
+
+// Function to copy the code to the clipboard
+function copyToClipboard() {
+  navigator.clipboard.writeText(props.code).then(() => {
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Code copied to clipboard!', life: 10000 });
+  }).catch((error) => {
+    console.error('Failed to copy code:', error);
+    toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to copy code.', life: 10000 });
+  });
+}
+</script>
+
+<style scoped>
+.code-snippet-container {
+  position: relative; /* Enable positioning of child elements */
+}
+
+.class="button-container" {
+    position: sticky;
+    top: 10px; /* Adjust as needed */
+    right: 10px; /* Adjust as needed */
+    z-index: 1000;
+}
+
+pre {
+  background-color: #2d2d2d;
+  color: #ccc;
+  padding: 1em;
+  border-radius: 5px;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+.button-container {
+  position: absolute;
+  top: 10px; /* Adjust as needed */
+  right: 10px; /* Adjust as needed */
+}
+
+.p-mt-2 {
+  margin-top: 1em;
+}
+</style>

src/views/pages/KsSimilaritySearch.vue

@@ -1,34 +1,28 @@
 <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 class="similarity-search">
+      <div class="card-container flex flex-col gap-6">
+        <h2 class="text-4xl font-semibold text-center mb-4">Similarity Search</h2>
+        <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>
-
-        <div class="p-field p-col-12 p-md-2">
-          <Button label="Send" icon="pi pi-send" :fluid="false" @click="sendQuery" />
-        </div>
+        <Button label="Send" icon="pi pi-send" @click="sendQuery" class="send-button" />
       </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">
+      <div 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: 200px">
-              <pre class="result-content">{{ result }}</pre>
+            <ScrollPanel style="width: 100%; max-height: 400px">
+              <CodeSnippet :code="dynamicCode" language="systemd" />
             </ScrollPanel>
           </template>
         </Card>
@@ -41,20 +35,22 @@
 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 { ref } from 'vue';
+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 {
@@ -78,42 +74,73 @@ const sendQuery = async () => {
     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: 1200px;
+  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 {
-  max-height: 600px;
-  overflow-y: auto;
+  padding: 2rem;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-.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;
+.result-card {
+  margin-bottom: 1rem;
+  border-radius: 8px;
 }
 
-.p-select {
-  width: 100%;
-}
-
-.p-select .p-select-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.p-inputtextarea {
-  resize: vertical;
-  min-height: 100px;
+.p-scrollpanel {
+  border-radius: 8px;
+  background-color: #ffffff;
 }
 </style>