similaritysearch UI modified

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>