fix: add kb search results in popover

desk/src/components/SearchArticles.vue

@@ -1,9 +1,9 @@
 <template>
   <div
     v-if="!isEmpty(articles.data) && query.length > 2"
-    class="rounded border bg-cyan-50 px-5 py-3 text-base"
+    class="rounded border p-4 text-base"
   >
-    <div class="mb-2 font-medium px-4" v-if="!hideViewAll">
+    <div class="mb-2 font-medium pl-2" v-if="!hideViewAll">
       These articles may already cover what you are looking for
       <RouterLink
         class="group cursor-pointer space-x-1 hover:text-gray-900"
@@ -15,14 +15,20 @@
         <span class="text-xs underline">(View All)</span>
       </RouterLink>
     </div>
-    <dl>
+    <span class="text-p-sm pl-2">
+      <span class="font-medium">Search Results</span>
+    </span>
+    <dl
+      class="mx-auto w-full flex flex-col gap-2"
+      v-if="articles.data.length > 0"
+    >
       <div
         v-for="a in articles.data"
         :key="a.id"
-        class="focus:ring-cyan-30 rounded-md border-2 border-hidden p-4 hover:bg-cyan-100 focus:outline-none focus:ring active:bg-cyan-50"
+        class="rounded-md border-2 p-2 border-hidden hover:bg-surface-gray-2"
       >
         <RouterLink
-          class="group cursor-pointer hover:text-gray-900 flex flex-col gap-2"
+          class="group cursor-pointer hover:text-gray-900 flex flex-col gap-1"
           :to="{
             name: 'ArticlePublic',
             params: {
@@ -32,19 +38,49 @@
           }"
           target="_blank"
         >
-          <dt class="font-semibold">{{ a.subject }} - {{ a.headings }}</dt>
+          <dt class="font-base">{{ a.subject }} - {{ a.headings }}</dt>
           <!-- eslint-disable-next-line vue/no-v-html -->
-          <dd class="font-light text-p-sm" v-html="a.description"></dd>
+          <dd
+            class="font-base text-p-sm text-gray-600 line-clamp-2"
+            v-html="a.description"
+          ></dd>
         </RouterLink>
       </div>
     </dl>
   </div>
+  <div
+    v-else-if="
+      !articles.loading && articles.data?.length === 0 && query.length > 2
+    "
+    class="flex flex-col items-center justify-center h-[240px] gap-2 rounded border"
+  >
+    <Icon icon="heroicons-outline:search" class="h-8 w-8 text-gray-400" />
+    <div class="flex items-center flex-col justify-center">
+      <p class="font-base">No answers found</p>
+      <span class="font-base text-p-sm text-gray-600 text-center"
+        >Rephrase the question and try again with some keywords</span
+      >
+    </div>
+  </div>
+  <div
+    v-else-if="articles.loading"
+    class="flex flex-col items-center justify-center h-[240px] gap-2 rounded border"
+  >
+    <Icon icon="heroicons-outline:search" class="h-8 w-8 text-gray-400" />
+    <div class="flex items-center flex-col justify-center">
+      <p class="font-base">Searching...</p>
+      <span class="font-base text-p-sm text-gray-600 text-center"
+        >Please wait while we search for the answers</span
+      >
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { watch } from "vue";
 import { createResource } from "frappe-ui";
 import { isEmpty } from "lodash";
+import { Icon } from "@iconify/vue";
 
 interface P {
   query: string;

desk/src/pages/knowledge-base/KnowledgeBaseCustomer.vue

@@ -8,23 +8,46 @@
     <div
       class="max-w-4xl 2xl:max-w-5xl pt-4 sm:px-5 w-full flex flex-col gap-4"
     >
-      <FormControl
-        ref="searchInputRef"
-        type="text"
-        class="w-full"
-        placeholder="Ask a question..."
-        size="lg"
-        v-model="query"
+      <Popover
+        :popover-class="[' max-w-[310px] md:max-w-[842px] !top-1 ']"
+        class="flex w-full [&>div:first-child]:w-full"
       >
-        <template #prefix>
-          <Icon icon="lucide:search" class="h-4 w-4 text-gray-500" />
+        <template #target="{ open, close }">
+          <FormControl
+            ref="searchInputRef"
+            type="text"
+            class="w-full focus:outline-none outline-none border-inherit shadow-none"
+            placeholder="Ask a question..."
+            size="md"
+            v-model="query"
+            @update:model-value="
+              (e:string) => {
+                if (e.length >= 3) {
+                  open();
+                } else {
+                  close();
+                }
+              }
+            "
+          >
+            <template #prefix>
+              <Icon icon="lucide:search" class="h-4 w-4 text-gray-500" />
+            </template>
+          </FormControl>
         </template>
-      </FormControl>
-
-      <!-- Searched Articles -->
-      <div class="flex flex-col gap-3">
-        <SearchArticles :query="query" :hideViewAll="true" />
-      </div>
+        <template #body-main>
+          <!-- Searched Articles -->
+          <div
+            class="max-h-[320px] md:max-h-[420px] overflow-scroll flex flex-col"
+          >
+            <SearchArticles
+              :query="query"
+              :hideViewAll="true"
+              class="rounded border p-3"
+            />
+          </div>
+        </template>
+      </Popover>
 
       <!-- Categories Folder -->
       <section class="flex flex-col gap-3">
@@ -38,13 +61,14 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { FormControl, usePageMeta } from "frappe-ui";
+import { FormControl, usePageMeta, Popover } from "frappe-ui";
 import { Icon } from "@iconify/vue";
 import { LayoutHeader } from "@/components";
 import CategoryFolderContainer from "@/components/knowledge-base/CategoryFolderContainer.vue";
 import SearchArticles from "../../components/SearchArticles.vue";
-const query = ref("");
 
+const query = ref("");
+const searchInputRef = ref(null);
 usePageMeta(() => {
   return {
     title: "Knowledge Base",

helpdesk/search.py

@@ -156,7 +156,9 @@ def search(
         query = self.clean_query(query)
         query = Query(query).paging(start, page_length)
         if highlight:
-            query = query.highlight(tags=["<mark>", "</mark>"])
+            query = query.highlight(
+                tags=["<mark style='background: #FFFF8F!important'>", "</mark>"]
+            )
 
         query.summarize(fields=["description"])
         query.scorer("DISMAX")