From 8ef329cf2882f164f6bf306b7c036b28393d20f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20CG?= <victorcg88@users.noreply.github.com>
Date: Tue, 10 Dec 2024 16:05:31 +0100
Subject: [PATCH] refactor: remove next queries from related prompt tag (#523)

---
 package-lock.json                             |  2 +-
 .../custom-related-prompts.vue                |  4 +-
 .../related-prompts-tag-list.vue              | 57 ++-----------------
 src/components/search/results/results.vue     |  4 +-
 4 files changed, 10 insertions(+), 57 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5823392c..1e14a116 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1229,7 +1229,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "dev": true,
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
diff --git a/src/components/related-prompts/custom-related-prompts.vue b/src/components/related-prompts/custom-related-prompts.vue
index 1088b18c..c5629100 100644
--- a/src/components/related-prompts/custom-related-prompts.vue
+++ b/src/components/related-prompts/custom-related-prompts.vue
@@ -12,11 +12,11 @@
     </i18n-t>
 
     <div class="x-flex x-flex-col">
-      <RelatedPromptsTagList class="x-my-24" />
+      <RelatedPromptsTagList class="x-mt-24" />
       <CustomQueryPreview
         v-if="selectedPrompt !== -1"
         :key="queriesPreviewInfo.length"
-        class="x-rounded-[12px] x-bg-neutral-10 x-px-16"
+        class="x-rounded-b-[12px] x-bg-neutral-10 x-px-16"
         :queries-preview-info="queriesPreviewInfo"
       ></CustomQueryPreview>
     </div>
diff --git a/src/components/related-prompts/related-prompts-tag-list.vue b/src/components/related-prompts/related-prompts-tag-list.vue
index b4e1abac..bcc5dfb1 100644
--- a/src/components/related-prompts/related-prompts-tag-list.vue
+++ b/src/components/related-prompts/related-prompts-tag-list.vue
@@ -14,11 +14,13 @@
         v-for="(suggestion, index) in relatedPrompts"
         :key="index"
         :style="{ animationDelay: `${index * 0.4 + 0.05}s` }"
-        class="x-text-neutral-80 x-flex x-h-[112px] x-flex-col x-rounded-[12px] x-bg-neutral-10 x-text-md x-font-[400] x-transition-all x-duration-500 x-staggered-initial"
+        class="x-text-neutral-80 x-flex x-flex-col x-rounded-[12px] x-bg-neutral-10 x-text-md x-font-[400] x-transition-all x-duration-500 x-staggered-initial"
         :class="[
           { 'x-staggered-animation': isVisible },
           { 'x-hidden': shouldHideButton(index) },
-          isSelected(index) ? 'x-w-full' : 'x-w-[204px] desktop:x-w-[303px]',
+          isSelected(index)
+            ? 'x-w-full x-rounded-b-none'
+            : 'x-h-[112px] x-w-[204px] desktop:x-w-[303px]',
         ]"
         data-test="related-prompt-item"
       >
@@ -40,38 +42,11 @@
               {{ suggestion.suggestionText }}
             </span>
           </div>
-          <div class="x-mr-8 x-mt-8">
+          <div :class="{ 'x-mr-8 x-mt-8': !isSelected(index) }">
             <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
             <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
           </div>
         </button>
-
-        <!-- Next queries -->
-        <div
-          v-if="isSelected(index)"
-          class="x-no-scrollbar x-mt-8 x-flex x-w-full x-gap-12 x-overflow-y-hidden x-overflow-x-scroll x-px-16"
-        >
-          <button
-            v-for="(query, queryIndex) in suggestion.nextQueries"
-            :key="query"
-            :style="{ animationDelay: `${queryIndex * 0.3}s` }"
-            class="x-tag-outlined x-flex x-h-[40px] x-items-center x-justify-center x-gap-4 x-rounded-full x-border-1 x-px-12 x-staggered-initial x-staggered-animation"
-            :class="[
-              { 'x-hidden': shouldHideButton(queryIndex) },
-              isQuerySelected(queryIndex) ? 'x-bg-neutral-25' : 'x-bg-neutral-0',
-            ]"
-            @click="toggleQuery(queryIndex)"
-          >
-            <span
-              class="x-whitespace-nowrap x-text-sm"
-              :class="[isQuerySelected(queryIndex) ? ' x-text-neutral-90' : 'x-text-neutral-75']"
-            >
-              {{ query }}
-            </span>
-            <CrossTinyIcon v-if="isQuerySelected(queryIndex)" class="x-text-16 x-h-20" />
-            <PlusIcon v-else class="x-text-16 x-h-20" />
-          </button>
-        </div>
       </div>
     </div>
   </CustomSlidingPanel>
@@ -96,7 +71,6 @@ export default defineComponent({
     const isVisible = ref(false)
 
     const selectedIndex = ref<number>(-1)
-    const selectedQuery = ref<number>(-1)
 
     const observer = new IntersectionObserver(([entry]) => {
       isVisible.value = entry.isIntersecting
@@ -116,51 +90,30 @@ export default defineComponent({
       } else {
         selectedIndex.value = index
       }
-      selectedQuery.value = -1
       x.emit('UserSelectedARelatedPrompt', selectedIndex.value)
-      x.emit('UserSelectedARelatedPromptQuery', selectedQuery.value)
     }
 
     const isSelected = (index: number): boolean => selectedIndex.value === index
 
-    const toggleQuery = (queryIndex: number): void => {
-      if (selectedQuery.value === queryIndex) {
-        selectedQuery.value = -1
-      } else {
-        selectedQuery.value = queryIndex
-      }
-      x.emit('UserSelectedARelatedPromptQuery', selectedQuery.value)
-    }
-
-    const isQuerySelected = (queryIndex: number): boolean => selectedQuery.value === queryIndex
-
     const shouldHideButton = (index: number): boolean =>
       selectedIndex.value !== -1 && selectedIndex.value !== index
 
-    const shouldHideQuery = (queryIndex: number): boolean =>
-      selectedQuery.value !== -1 && selectedQuery.value !== queryIndex
-
     x.on('UserAcceptedAQueryPreview', false).subscribe(() => {
       toggleSuggestion(-1)
-      toggleQuery(-1)
     })
 
     x.on('SearchRequestChanged', false).subscribe(() => {
       toggleSuggestion(-1)
-      toggleQuery(-1)
     })
 
     return {
-      isQuerySelected,
       isSelected,
       isTouchable,
       isVisible,
       relatedPrompts,
       selectedIndex,
       shouldHideButton,
-      shouldHideQuery,
       slidingPanelContent,
-      toggleQuery,
       toggleSuggestion,
     }
   },
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index af17ac3a..f55dbabf 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -31,11 +31,11 @@
               </MainScrollItem>
             </template>
             <template #related-prompts-group>
-              <RelatedPromptsTagList v-if="!isLowResult" class="x-my-24" />
+              <RelatedPromptsTagList v-if="!isLowResult" class="-x-mb-1 x-mt-24 desktop:x-mt-0" />
               <CustomQueryPreview
                 v-if="selectedPrompt !== -1"
                 :key="queriesPreviewInfo.length"
-                class="x-rounded-[12px] x-bg-neutral-10 x-px-8 desktop:x-px-16"
+                class="x-rounded-b-[12px] x-bg-neutral-10 x-px-8 desktop:x-px-16"
                 :queries-preview-info="queriesPreviewInfo"
               ></CustomQueryPreview>
             </template>