From b073b41ff9fa32f1057e1a2916ffbae6f603377a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20CG?= <victorcg@empathy.co>
Date: Wed, 27 Nov 2024 13:25:21 +0100
Subject: [PATCH] refactor: minor changes

---
 src/components/main.vue                         | 10 ++++++++--
 .../related-prompts-tag-list.vue                | 17 +++++++++--------
 src/components/search/results/results.vue       | 10 ++++++++--
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/src/components/main.vue b/src/components/main.vue
index b8636f85..4f0dc4d7 100644
--- a/src/components/main.vue
+++ b/src/components/main.vue
@@ -24,7 +24,8 @@
 
 <script lang="ts">
   import { FeatureLocation, LocationProvider, use$x, useState } from '@empathyco/x-components';
-  import { computed, defineAsyncComponent, defineComponent } from 'vue';
+  import { computed, ComputedRef, defineAsyncComponent, defineComponent } from 'vue';
+  import { SemanticQueriesConfig } from '@empathyco/x-components/types';
   import { useHasSearched } from '../composables/use-has-searched.composable';
   import CustomRecommendations from './results/custom-recommendations.vue';
   import CustomRelatedPrompts from './related-prompts/custom-related-prompts.vue';
@@ -44,6 +45,9 @@
       const { hasSearched } = useHasSearched();
       const x = use$x();
 
+      const semanticQueriesConfig = useState('semanticQueries', ['config'])
+        .config as ComputedRef<SemanticQueriesConfig>;
+
       const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts']);
 
       const semanticsLocation = computed<FeatureLocation>(() =>
@@ -58,7 +62,9 @@
         () => x.noResults && !x.semanticQueries.length && !relatedPrompts.value?.length
       );
 
-      const isLowResult = computed(() => 0 < x.totalResults && x.totalResults < 50);
+      const isLowResult = computed(
+        () => 0 < x.totalResults && x.totalResults < semanticQueriesConfig.value.threshold
+      );
 
       const showRelatedPrompts = computed(
         () => (x.noResults || isLowResult.value) && relatedPrompts.value?.length
diff --git a/src/components/related-prompts/related-prompts-tag-list.vue b/src/components/related-prompts/related-prompts-tag-list.vue
index 4982e133..393fcf42 100644
--- a/src/components/related-prompts/related-prompts-tag-list.vue
+++ b/src/components/related-prompts/related-prompts-tag-list.vue
@@ -18,8 +18,8 @@
         :class="[
           'x-staggered-initial',
           { 'x-staggered-animation': isVisible },
-          isSelected(index) ? 'x-w-full' : 'x-w-[204px] desktop:x-w-[303px]',
-          shouldHideButton(index) ? 'x-hidden' : ''
+          { 'x-hidden': shouldHideButton(index) },
+          isSelected(index) ? 'x-w-full' : 'x-w-[204px] desktop:x-w-[303px]'
         ]"
         data-test="related-prompt-item"
       >
@@ -34,7 +34,7 @@
               :class="['x-typewritter-initial', { 'x-typewritter-animation': isVisible }]"
               :style="{
                 animationDelay: `${index * 0.4 + 0.05}s`,
-                '--n': suggestion.suggestionText.length
+                '--suggestion-text-length': suggestion.suggestionText.length
               }"
             >
               {{ suggestion.suggestionText }}
@@ -59,8 +59,8 @@
             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"
             :class="[
               'x-staggered-initial x-staggered-animation',
-              isQuerySelected(queryIndex) ? 'x-bg-neutral-25' : 'x-bg-neutral-0',
-              shouldHideQuery(queryIndex) ? 'x-hidden' : ''
+              { 'x-hidden': shouldHideButton(queryIndex) },
+              isQuerySelected(queryIndex) ? 'x-bg-neutral-25' : 'x-bg-neutral-0'
             ]"
           >
             <span
@@ -189,15 +189,16 @@
   }
 
   .x-typewritter-animation {
-    animation: t calc(var(--n) * 0.05s) steps(var(--n)) forwards;
+    animation: typewritter calc(var(--suggestion-text-length) * 0.05s)
+      steps(var(--suggestion-text-length)) forwards;
   }
 
-  @keyframes t {
+  @keyframes typewritter {
     from {
       background-size: 0 200%;
     }
     to {
-      background-size: calc(var(--n) * 1ch) 200%;
+      background-size: calc(var(--suggestion-text-length) * 1ch) 200%;
     }
   }
 
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index a6c73c39..c110839b 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -58,8 +58,9 @@
     PromotedsList,
     ResultsList
   } from '@empathyco/x-components/search';
-  import { computed, defineComponent } from 'vue';
+  import { computed, ComputedRef, defineComponent } from 'vue';
   import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { SemanticQueriesConfig } from '@empathyco/x-components/semantic-queries';
   import { useDevice } from '../../../composables/use-device.composable';
   import Result from '../../results/result.vue';
   import { useExperienceControls } from '../../../composables/use-experience-controls.composable';
@@ -88,6 +89,9 @@
       const { isMobile } = useDevice();
       const { getControlFromPath } = useExperienceControls();
 
+      const semanticQueriesConfig = useState('semanticQueries', ['config'])
+        .config as ComputedRef<SemanticQueriesConfig>;
+
       const { relatedPrompts, selectedPrompt, selectedQuery } = useState('relatedPrompts', [
         'relatedPrompts',
         'selectedPrompt',
@@ -96,7 +100,9 @@
 
       const columns = computed(() => (isMobile.value ? 2 : 4));
 
-      const isLowResult = computed(() => 0 < x.totalResults && x.totalResults < 50);
+      const isLowResult = computed(
+        () => 0 < x.totalResults && x.totalResults < semanticQueriesConfig.value.threshold
+      );
 
       const queriesPreviewInfo = computed(() => {
         const queries = relatedPrompts.value[selectedPrompt.value]?.nextQueries as string[];