feat: integrate related prompts

src/components/desktop/desktop.vue

@@ -9,7 +9,11 @@
             <LocationProvider location="results">
               <SpellcheckMessage class="x-mb-16" data-test="spellcheck-message" />
             </LocationProvider>
-            <NoResultsMessage class="x-mb-16" data-test="no-results-message" />
+            <NoResultsMessage
+              v-if="showNoResultsMessage"
+              class="x-mb-16"
+              data-test="no-results-message"
+            />
             <FallbackDisclaimerMessage class="x-mb-16" />
           </div>
 
@@ -52,9 +56,14 @@
 </template>
 
 <script lang="ts">
-  import { animateTranslate, BaseIdModal, LocationProvider } from '@empathyco/x-components';
+  import {
+    animateTranslate,
+    BaseIdModal,
+    LocationProvider,
+    useState
+  } from '@empathyco/x-components';
   import { MainScroll, Scroll } from '@empathyco/x-components/scroll';
-  import { defineAsyncComponent, defineComponent } from 'vue';
+  import { computed, defineAsyncComponent, defineComponent } from 'vue';
   import Main from '../main.vue';
   import ScrollToTop from '../scroll-to-top.vue';
   import MyHistoryAside from '../my-history/my-history-aside.vue';
@@ -91,7 +100,15 @@
     setup() {
       const rightAsideAnimation = animateTranslate('right');
       const { hasSearched } = useHasSearched();
-      return { rightAsideAnimation, hasSearched };
+      const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts']);
+
+      const showNoResultsMessage = computed(() => !relatedPrompts.value?.length);
+
+      return {
+        hasSearched,
+        rightAsideAnimation,
+        showNoResultsMessage
+      };
     }
   });
 </script>

src/components/main.vue

@@ -4,10 +4,16 @@
     <LocationProvider location="results">
       <Results />
     </LocationProvider>
-    <LocationProvider :location="semanticsLocation">
+    <LocationProvider v-if="showRelatedPrompts" location="related_prompts">
+      <CustomRelatedPrompts
+        :relatedPromptList="relatedPrompts"
+        :class="x.noResults ? 'desktop:x-mt-24' : 'x-mt-24 desktop:x-mt-32'"
+      />
+    </LocationProvider>
+    <LocationProvider v-if="!showRelatedPrompts" :location="semanticsLocation">
       <CustomSemanticQueries />
     </LocationProvider>
-    <LocationProvider v-if="!x.semanticQueries.length" location="results">
+    <LocationProvider v-if="showPartials" location="results">
       <PartialResults />
     </LocationProvider>
     <LocationProvider v-if="showRecommendations" location="no_results">
@@ -17,33 +23,56 @@
 </template>
 
 <script lang="ts">
-  import { FeatureLocation, LocationProvider, use$x } from '@empathyco/x-components';
+  import { FeatureLocation, LocationProvider, use$x, useState } from '@empathyco/x-components';
   import { computed, defineAsyncComponent, defineComponent } from 'vue';
   import { useHasSearched } from '../composables/use-has-searched.composable';
   import CustomRecommendations from './results/custom-recommendations.vue';
+  import CustomRelatedPrompts from './related-prompts/custom-related-prompts.vue';
   import CustomSemanticQueries from './search/custom-semantic-queries.vue';
 
   export default defineComponent({
     components: {
+      CustomRecommendations,
+      CustomRelatedPrompts,
       CustomSemanticQueries,
       LocationProvider,
-      CustomRecommendations,
       PartialResults: defineAsyncComponent(() => import('./search').then(m => m.PartialResults)),
-      Results: defineAsyncComponent(() => import('./search').then(m => m.Results)),
-      Redirection: defineAsyncComponent(() => import('./search').then(m => m.Redirection))
+      Redirection: defineAsyncComponent(() => import('./search').then(m => m.Redirection)),
+      Results: defineAsyncComponent(() => import('./search').then(m => m.Results))
     },
     setup() {
       const { hasSearched } = useHasSearched();
       const x = use$x();
 
+      const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts']);
+
       const semanticsLocation = computed<FeatureLocation>(() =>
         x.results.length > 0 ? 'low_results' : 'no_results'
       );
+
       const showRecommendations = computed(
         () => x.noResults && !x.partialResults.length && !x.semanticQueries.length
       );
 
-      return { hasSearched, semanticsLocation, showRecommendations, x };
+      const showPartials = computed(
+        () => x.noResults && !x.semanticQueries.length && !relatedPrompts.value?.length
+      );
+
+      const isLowResult = computed(() => 0 < x.totalResults && x.totalResults < 50);
+
+      const showRelatedPrompts = computed(
+        () => (x.noResults || isLowResult.value) && relatedPrompts.value?.length
+      );
+
+      return {
+        hasSearched,
+        relatedPrompts,
+        semanticsLocation,
+        showPartials,
+        showRecommendations,
+        showRelatedPrompts,
+        x
+      };
     }
   });
 </script>

src/components/related-prompts/custom-related-prompts.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="x-mb-32 x-flex x-flex-col">
+    <i18n-t
+      class="x-no-results-message x-text1 x-flex x-flex-wrap x-items-center x-justify-center x-break-words x-bg-neutral-10 x-p-24 x-text-center x-text-neutral-90 desktop:x-text1-lg"
+      keypath="relatedPrompts.title"
+      tag="span"
+      scope="global"
+    >
+      <template #query>
+        <span class="x-title3 x-w-auto">{{ x.query.search }}</span>
+      </template>
+    </i18n-t>
+
+    <div class="x-flex x-flex-col">
+      <RelatedPromptsTagList class="x-my-24" />
+      <CustomQueryPreview
+        v-if="selectedPrompt !== -1"
+        :key="queriesPreviewInfo.length"
+        class="x-rounded-[12px] x-bg-neutral-10 x-px-16"
+        :queriesPreviewInfo="queriesPreviewInfo"
+      ></CustomQueryPreview>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { computed, defineComponent, PropType } from 'vue';
+  import { RelatedPrompt } from '@empathyco/x-types';
+  import { use$x, useState } from '@empathyco/x-components';
+  import { relatedPromptsXModule } from '@empathyco/x-components/related-prompts';
+  import CustomQueryPreview from '../search/results/custom-query-preview.vue';
+  import RelatedPromptsTagList from './related-prompts-tag-list.vue';
+
+  export default defineComponent({
+    name: 'CustomRelatedPrompts',
+    xModule: relatedPromptsXModule.name,
+    components: {
+      CustomQueryPreview,
+      RelatedPromptsTagList
+    },
+    props: {
+      relatedPromptList: {
+        type: Array as PropType<RelatedPrompt[]>,
+        required: true,
+        default: () => []
+      }
+    },
+    setup() {
+      const x = use$x();
+      const { relatedPrompts, selectedPrompt, selectedQuery } = useState('relatedPrompts', [
+        'relatedPrompts',
+        'selectedPrompt',
+        'selectedQuery'
+      ]);
+
+      const queriesPreviewInfo = computed(() => {
+        const queries = relatedPrompts.value[selectedPrompt.value].nextQueries as string[];
+        if (selectedQuery.value === -1) {
+          return queries.map(query => ({ query }));
+        } else {
+          return [{ query: queries[selectedQuery.value] }];
+        }
+      });
+
+      return {
+        queriesPreviewInfo,
+        selectedPrompt,
+        x
+      };
+    }
+  });
+</script>