From 0817dc64a48db6a7dd02a0b8fa9745fd8c5d4e3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20CG?= <victorcg88@users.noreply.github.com>
Date: Wed, 27 Nov 2024 13:46:05 +0100
Subject: [PATCH] feat: integrate related prompts (#516)

---
 src/adapter/adapter.ts                        |   9 +-
 src/components/desktop/desktop.vue            |  25 +-
 src/components/main.vue                       |  51 +++-
 .../custom-related-prompts.vue                |  71 +++++
 .../related-prompts-tag-list.vue              | 224 ++++++++++++++
 .../search/results/custom-query-preview.vue   |  74 +++++
 src/components/search/results/results.vue     |  69 +++--
 src/i18n/messages.types.ts                    |   3 +
 src/i18n/messages/de.messages.json            | 281 +++++++++---------
 src/i18n/messages/en.messages.json            |   3 +
 src/i18n/messages/es.messages.json            |   5 +-
 src/i18n/messages/fr.messages.json            |   3 +
 src/i18n/messages/it.messages.json            |   3 +
 src/i18n/messages/pt.messages.json            |   3 +
 tests/e2e/cucumber/scroll.spec.ts             |   2 +-
 15 files changed, 654 insertions(+), 172 deletions(-)
 create mode 100644 src/components/related-prompts/custom-related-prompts.vue
 create mode 100644 src/components/related-prompts/related-prompts-tag-list.vue
 create mode 100644 src/components/search/results/custom-query-preview.vue

diff --git a/src/adapter/adapter.ts b/src/adapter/adapter.ts
index d83818b9..de39d3a5 100644
--- a/src/adapter/adapter.ts
+++ b/src/adapter/adapter.ts
@@ -6,7 +6,8 @@ import {
   recommendationsRequestSchema,
   resultSchema,
   semanticQueriesRequestSchema,
-  experienceControlsResponseSchema
+  experienceControlsResponseSchema,
+  relatedPromptsEndpointAdapter
 } from '@empathyco/x-adapter-platform';
 import {
   ExperienceControlsResponse,
@@ -73,3 +74,9 @@ experienceControlsResponseSchema.$override<
     }
   }
 });
+
+adapter.relatedPrompts = relatedPromptsEndpointAdapter.extends({
+  endpoint:
+    'https://api.empathy.co/relatedprompts/mymotivemarketplace?store=Labstore+London&lang=en',
+  requestMapper: ({ query }) => ({ query })
+});
diff --git a/src/components/desktop/desktop.vue b/src/components/desktop/desktop.vue
index d7152b5a..c0e58994 100644
--- a/src/components/desktop/desktop.vue
+++ b/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>
diff --git a/src/components/main.vue b/src/components/main.vue
index 7d550512..4f0dc4d7 100644
--- a/src/components/main.vue
+++ b/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,62 @@
 </template>
 
 <script lang="ts">
-  import { FeatureLocation, LocationProvider, use$x } from '@empathyco/x-components';
-  import { computed, defineAsyncComponent, defineComponent } from 'vue';
+  import { FeatureLocation, LocationProvider, use$x, useState } from '@empathyco/x-components';
+  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';
   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 semanticQueriesConfig = useState('semanticQueries', ['config'])
+        .config as ComputedRef<SemanticQueriesConfig>;
+
+      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 < semanticQueriesConfig.value.threshold
+      );
+
+      const showRelatedPrompts = computed(
+        () => (x.noResults || isLowResult.value) && relatedPrompts.value?.length
+      );
+
+      return {
+        hasSearched,
+        relatedPrompts,
+        semanticsLocation,
+        showPartials,
+        showRecommendations,
+        showRelatedPrompts,
+        x
+      };
     }
   });
 </script>
diff --git a/src/components/related-prompts/custom-related-prompts.vue b/src/components/related-prompts/custom-related-prompts.vue
new file mode 100644
index 00000000..8d80668f
--- /dev/null
+++ b/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>
diff --git a/src/components/related-prompts/related-prompts-tag-list.vue b/src/components/related-prompts/related-prompts-tag-list.vue
new file mode 100644
index 00000000..393fcf42
--- /dev/null
+++ b/src/components/related-prompts/related-prompts-tag-list.vue
@@ -0,0 +1,224 @@
+<template>
+  <CustomSlidingPanel
+    :resetOnContentChange="true"
+    :scrollContainerClass="
+      selectedIndex === -1 ? 'desktop:x-sliding-panel-fade desktop:x-sliding-panel-fade-sm' : ''
+    "
+  >
+    <div
+      ref="slidingPanelContent"
+      class="x-flex x-gap-8 x-font-main desktop:x-mx-0 desktop:x-mb-0"
+      :class="{ 'x-w-[calc(100%)]': selectedIndex !== -1 }"
+    >
+      <div
+        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"
+        :class="[
+          'x-staggered-initial',
+          { 'x-staggered-animation': isVisible },
+          { 'x-hidden': shouldHideButton(index) },
+          isSelected(index) ? 'x-w-full' : 'x-w-[204px] desktop:x-w-[303px]'
+        ]"
+        data-test="related-prompt-item"
+      >
+        <!-- Suggestion -->
+        <button
+          @click="toggleSuggestion(index)"
+          class="x-flex x-flex-row x-items-start x-justify-between x-gap-12 x-px-16 x-pt-8 x-text-start x-transition-all x-duration-500"
+          :class="isSelected(index) ? 'x-w-full' : 'x-w-[204px] x-grow desktop:x-w-[303px]'"
+        >
+          <div class="x-flex x-min-h-[32px]">
+            <span
+              :class="['x-typewritter-initial', { 'x-typewritter-animation': isVisible }]"
+              :style="{
+                animationDelay: `${index * 0.4 + 0.05}s`,
+                '--suggestion-text-length': suggestion.suggestionText.length
+              }"
+            >
+              {{ suggestion.suggestionText }}
+            </span>
+          </div>
+          <div class="x-mr-8 x-mt-8">
+            <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"
+            @click="toggleQuery(queryIndex)"
+            :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"
+            :class="[
+              'x-staggered-initial x-staggered-animation',
+              { 'x-hidden': shouldHideButton(queryIndex) },
+              isQuerySelected(queryIndex) ? 'x-bg-neutral-25' : 'x-bg-neutral-0'
+            ]"
+          >
+            <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>
+</template>
+<script lang="ts">
+  import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+  import { CrossTinyIcon, PlusIcon, use$x, useState } from '@empathyco/x-components';
+  import { relatedPromptsXModule } from '@empathyco/x-components/related-prompts';
+  import CustomSlidingPanel from '../../components/custom-sliding-panel.vue';
+  import { useDevice } from '../../composables/use-device.composable';
+
+  export default defineComponent({
+    name: 'RelatedPromptsTagList',
+    xModule: relatedPromptsXModule.name,
+    components: { PlusIcon, CrossTinyIcon, CustomSlidingPanel },
+    setup() {
+      const x = use$x();
+      const { isTouchable } = useDevice();
+      const { relatedPrompts } = useState('relatedPrompts', ['relatedPrompts']);
+
+      const slidingPanelContent = ref<Element>();
+      const isVisible = ref(false);
+
+      const selectedIndex = ref<number>(-1);
+      const selectedQuery = ref<number>(-1);
+
+      const observer = new IntersectionObserver(([entry]) => {
+        isVisible.value = entry.isIntersecting;
+      });
+
+      onMounted(() => {
+        observer.observe(slidingPanelContent.value as Element);
+      });
+
+      onUnmounted(() => {
+        observer.disconnect();
+      });
+
+      const toggleSuggestion = (index: number): void => {
+        if (selectedIndex.value === index) {
+          selectedIndex.value = -1;
+        } 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
+      };
+    }
+  });
+</script>
+
+<style>
+  .x-no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .x-no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .x-typewritter-initial {
+    color: #0000;
+    background: linear-gradient(-90deg, transparent 5px, #0000 0) 10px 0,
+      linear-gradient(#575757 0 0) 0 0;
+    background-size: 0 200%;
+    -webkit-background-clip: padding-box, text;
+    background-clip: padding-box, text;
+    background-repeat: no-repeat;
+  }
+
+  .x-typewritter-animation {
+    animation: typewritter calc(var(--suggestion-text-length) * 0.05s)
+      steps(var(--suggestion-text-length)) forwards;
+  }
+
+  @keyframes typewritter {
+    from {
+      background-size: 0 200%;
+    }
+    to {
+      background-size: calc(var(--suggestion-text-length) * 1ch) 200%;
+    }
+  }
+
+  .x-staggered-initial {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+
+  .x-staggered-animation {
+    animation: fadeInUp 0.6s forwards;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>
diff --git a/src/components/search/results/custom-query-preview.vue b/src/components/search/results/custom-query-preview.vue
new file mode 100644
index 00000000..04c5e7e2
--- /dev/null
+++ b/src/components/search/results/custom-query-preview.vue
@@ -0,0 +1,74 @@
+<template>
+  <QueryPreviewList
+    v-if="queriesPreviewInfo"
+    :debounceTimeMs="250"
+    :queriesPreviewInfo="queriesPreviewInfo"
+    :persistInCache="true"
+    :queryFeature="queryFeature"
+    data-wysiwyg="query-previews"
+    #default="{ queryPreviewInfo, totalResults, results, queryTagging }"
+  >
+    <div class="x-mb-40 x-flex x-flex-col x-gap-2 desktop:x-mb-64 desktop:x-gap-16">
+      <h1 class="x-title1 x-text-neutral-90 max-desktop:x-title1-sm max-desktop:x-px-16">
+        {{ queryPreviewInfo.title }}
+      </h1>
+      <CustomSlidingPanel>
+        <template #header>
+          <QueryPreviewButton
+            :queryPreviewInfo="queryPreviewInfo"
+            class="x-button x-button-lead x-button-tight x-title3 x-title3-sm desktop:x-title3-md max-desktop:x-px-16"
+          >
+            {{ queryPreviewInfo.query }}
+            ({{ totalResults }})
+            <ArrowRightIcon class="x-icon-lg" />
+          </QueryPreviewButton>
+        </template>
+        <DisplayClickProvider resultFeature="query-preview" :queryTagging="queryTagging">
+          <div class="x-transform-style-3d x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
+            <Result
+              v-for="result in results"
+              :key="result.id"
+              :result="result"
+              class="x-w-[calc(38vw-16px)] x-min-w-[142px] desktop:x-w-[216px]"
+            />
+          </div>
+        </DisplayClickProvider>
+      </CustomSlidingPanel>
+    </div>
+  </QueryPreviewList>
+</template>
+
+<script lang="ts">
+  import { defineComponent, PropType } from 'vue';
+  import {
+    QueryPreviewList,
+    QueryPreviewInfo,
+    QueryPreviewButton
+  } from '@empathyco/x-components/queries-preview';
+  import { QueryFeature, ArrowRightIcon } from '@empathyco/x-components';
+  import CustomSlidingPanel from '../../custom-sliding-panel.vue';
+  import DisplayClickProvider from '../display-click-provider.vue';
+  import { default as Result } from '../../results/result.vue';
+
+  export default defineComponent({
+    name: 'CustomQueryPreview',
+    components: {
+      ArrowRightIcon,
+      CustomSlidingPanel,
+      DisplayClickProvider,
+      QueryPreviewButton,
+      QueryPreviewList,
+      Result
+    },
+    props: {
+      queryFeature: {
+        type: String as PropType<QueryFeature>,
+        default: 'customer'
+      },
+      queriesPreviewInfo: {
+        type: Array as PropType<QueryPreviewInfo[]>,
+        default: () => []
+      }
+    }
+  });
+</script>
diff --git a/src/components/search/results/results.vue b/src/components/search/results/results.vue
index 7be3b1d6..c110839b 100644
--- a/src/components/search/results/results.vue
+++ b/src/components/search/results/results.vue
@@ -6,12 +6,7 @@
   >
     <PromotedsList>
       <BannersList>
-        <NextQueriesList
-          :offset="24"
-          :frequency="48"
-          :maxNextQueriesPerGroup="maxNextQueriesPerGroup"
-          :showOnlyAfterOffset="x.partialResults.length > 0"
-        >
+        <RelatedPromptsList :offset="24" :maxGroups="1" :showOnlyAfterOffset="x.totalResults < 50">
           <BaseVariableColumnGrid
             class="x-gap-x-16 x-gap-y-32"
             :animation="staggeredFadeAndSlide"
@@ -31,11 +26,17 @@
                 <Promoted :promoted="promoted" />
               </MainScrollItem>
             </template>
-            <template #next-queries-group="{ item: { nextQueries } }">
-              <NextQueryPreview :nextQuery="nextQueries[0]" />
+            <template #related-prompts-group>
+              <RelatedPromptsTagList v-if="!isLowResult" class="x-my-24" />
+              <CustomQueryPreview
+                v-if="selectedPrompt !== -1"
+                :key="queriesPreviewInfo.length"
+                class="x-rounded-[12px] x-bg-neutral-10 x-px-8 desktop:x-px-16"
+                :queriesPreviewInfo="queriesPreviewInfo"
+              ></CustomQueryPreview>
             </template>
           </BaseVariableColumnGrid>
-        </NextQueriesList>
+        </RelatedPromptsList>
       </BannersList>
     </PromotedsList>
   </ResultsList>
@@ -46,7 +47,8 @@
     BaseVariableColumnGrid,
     infiniteScroll,
     StaggeredFadeAndSlide,
-    use$x
+    use$x,
+    useState
   } from '@empathyco/x-components';
   import { MainScrollItem } from '@empathyco/x-components/scroll';
   import {
@@ -56,23 +58,26 @@
     PromotedsList,
     ResultsList
   } from '@empathyco/x-components/search';
-  import { defineComponent } from 'vue';
-  import { NextQueriesList } from '@empathyco/x-components/next-queries';
+  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';
-  import NextQueryPreview from './custom-next-query-preview.vue';
+  import RelatedPromptsTagList from '../../related-prompts/related-prompts-tag-list.vue';
+  import CustomQueryPreview from './custom-query-preview.vue';
 
   export default defineComponent({
     components: {
       Banner,
       BannersList,
       BaseVariableColumnGrid,
+      CustomQueryPreview,
       MainScrollItem,
-      NextQueryPreview,
-      NextQueriesList,
       Promoted,
       PromotedsList,
+      RelatedPromptsList,
+      RelatedPromptsTagList,
       Result,
       ResultsList
     },
@@ -80,14 +85,42 @@
       'infinite-scroll': infiniteScroll
     },
     setup() {
+      const x = use$x();
       const { isMobile } = useDevice();
       const { getControlFromPath } = useExperienceControls();
 
+      const semanticQueriesConfig = useState('semanticQueries', ['config'])
+        .config as ComputedRef<SemanticQueriesConfig>;
+
+      const { relatedPrompts, selectedPrompt, selectedQuery } = useState('relatedPrompts', [
+        'relatedPrompts',
+        'selectedPrompt',
+        'selectedQuery'
+      ]);
+
+      const columns = computed(() => (isMobile.value ? 2 : 4));
+
+      const isLowResult = computed(
+        () => 0 < x.totalResults && x.totalResults < semanticQueriesConfig.value.threshold
+      );
+
+      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 {
-        staggeredFadeAndSlide: StaggeredFadeAndSlide,
-        columns: isMobile.value ? 2 : 4,
+        columns,
+        isLowResult,
         maxNextQueriesPerGroup: getControlFromPath('nextQueries.maxItems', 1),
-        x: use$x()
+        queriesPreviewInfo,
+        selectedPrompt,
+        staggeredFadeAndSlide: StaggeredFadeAndSlide,
+        x
       };
     }
   });
diff --git a/src/i18n/messages.types.ts b/src/i18n/messages.types.ts
index 67ff08f1..34451f19 100644
--- a/src/i18n/messages.types.ts
+++ b/src/i18n/messages.types.ts
@@ -128,4 +128,7 @@ export interface Messages {
     accept: string;
     reject: string;
   };
+  relatedPrompts: {
+    title: string;
+  };
 }
diff --git a/src/i18n/messages/de.messages.json b/src/i18n/messages/de.messages.json
index 6e2e9bba..42ecdb59 100644
--- a/src/i18n/messages/de.messages.json
+++ b/src/i18n/messages/de.messages.json
@@ -1,145 +1,148 @@
 {
-    "base": {
-      "searchBox": {
-        "clear": "Löschen",
-        "placeholder": "Wonach suchen Sie?"
-      },
-      "popularSearches": {
-        "title": "Beliebte Suchanfragen"
-      },
-      "historyQueries": {
-        "clear": "Alle löschen",
-        "removeLabel": "{suggestion} aus Verlauf löschen",
-        "title": "Verlaufsanfragen"
-      },
-      "myHistory": {
-        "title": "Mein Verlauf",
-        "subtitle": "Dies ist die vollständige Liste der Verlaufsanfragen",
-        "message": {
-          "header": "Diese Daten werden lokal gespeichert. Nur auf Ihrem Gerät und verlassen es nie.",
-          "body": "Sie können die Verlaufsanfragen jederzeit deaktivieren.",
-          "footer": "Ihre Privatsphäre unter Ihrer Kontrolle."
-        },
-        "noHistory": "Keine Verlaufaktivität vorhanden",
-        "openButton": "Mein Verlauf",
-        "suggestionResults": "({totalResults} Ergebnisse)",
-        "switch": {
-          "title": "Verlaufsanfragen",
-          "enable": "Aktivieren",
-          "disable": "Deaktivieren und löschen"
-        },
-        "confirmDisableModal": {
-          "title": "Verlaufsanfragen deaktivieren?",
-          "message": "Durch Deaktivieren der Verlaufsanfragen löschen Sie auch die gesamte Verlaufsliste.",
-          "dismiss": "Abbrechen",
-          "confirm": "Deaktivieren"
-        }
-      },
-      "nextQueries": {
-        "title": "Was kommt als Nächstes"
-      },
-      "nextQueriesGroup": {
-        "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:"
-      },
-      "nextQueryPreview": {
-        "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:",
-        "query": "{query}",
-        "totalResults": "({totalResults})",
-        "viewResults": "Alle Ergebnisse anzeigen"
-      },
-      "identifierResults": {
-        "title": "SKU-Suche"
-      },
-      "recommendations": {
-        "title": "Top-Klicks"
-      },
-      "facets": {
-        "gender": "Geschlecht",
-        "categoryPaths": "Kategorien",
-        "price": "Preis",
-        "brand": "Marke",
-        "fit": "Passform",
-        "collection": "Kollektion",
-        "genres": "Geschlechter",
-        "isAdult": "Inhalt für",
-        "type": "Kerl",
-        "runtimeMinutes": "Dauer in Minuten"
-      },
-      "facetsPanel": {
-        "title": "SORTIEREN & FILTERN",
-        "viewResults": "ERGEBNISSE ANZEIGEN ({totalResults})"
-      },
-      "filters": {
-        "all": "Alle",
-        "showMore": "Mehr anzeigen",
-        "showLess": "Weniger anzeigen"
-      },
-      "partialResults": {
-        "query": "{query}",
-        "totalResults": "({totalResults})",
-        "viewResults": "Alle anzeigen"
-      },
-      "priceFilter": {
-        "lessThan": "weniger als {'{max}'}",
-        "fromTo": "{'{min}'} - {'{max}'}",
-        "from": "ab {'{min}'}"
-      },
-      "toggleAside": {
-        "showAside": "Sortieren & Filtern"
-      },
-      "totalResults": {
-        "message": "{totalResults} Ergebnisse für {query}"
-      },
-      "semanticQueries": {
-        "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:"
-      },
-      "sort": {
-        "label": "Sortieren nach",
-        "values": {
-          "price asc": "Preis: Niedrig bis Hoch",
-          "price desc": "Preis: Hoch bis Niedrig",
-          "default": "Relevanz"
-        }
-      },
-      "selectedFilters": {
-        "clear": "FILTER LÖSCHEN ({selectedFiltersNumber})"
-      },
-      "result": {
-        "addToCart": "IN DEN WARENKORB LEGEN"
-      },
-      "spellcheck": {
-        "message": "Keine Ergebnisse gefunden für {query}. Wir zeigen Ihnen Ergebnisse für"
-      },
-      "noResults": {
-        "message": "Es tut uns leid, aber es gibt keine Ergebnisse für {query}. Sie könnten an diesen Produkten interessiert sein"
-      },
-      "fallbackDisclaimer": {
-        "message": "Keine Ergebnisse gefunden für {query} mit den ausgewählten Filtern. Die Filter wurden aufgehoben"
-      },
-      "columnPicker": {
-        "message": "Ansicht"
-      },
-      "queryPreview": {
-        "viewResults": "Alle Ergebnisse anzeigen"
-      },
-      "redirections": {
-        "title": "Ihre Suche entspricht einem besonderen Ort auf unserer Website. Um ihn zu besuchen, werden Sie umgeleitet",
-        "accept": "Ja, leite mich um",
-        "reject": "Nein, ich bleibe hier"
+  "base": {
+    "searchBox": {
+      "clear": "Löschen",
+      "placeholder": "Wonach suchen Sie?"
+    },
+    "popularSearches": {
+      "title": "Beliebte Suchanfragen"
+    },
+    "historyQueries": {
+      "clear": "Alle löschen",
+      "removeLabel": "{suggestion} aus Verlauf löschen",
+      "title": "Verlaufsanfragen"
+    },
+    "myHistory": {
+      "title": "Mein Verlauf",
+      "subtitle": "Dies ist die vollständige Liste der Verlaufsanfragen",
+      "message": {
+        "header": "Diese Daten werden lokal gespeichert. Nur auf Ihrem Gerät und verlassen es nie.",
+        "body": "Sie können die Verlaufsanfragen jederzeit deaktivieren.",
+        "footer": "Ihre Privatsphäre unter Ihrer Kontrolle."
+      },
+      "noHistory": "Keine Verlaufaktivität vorhanden",
+      "openButton": "Mein Verlauf",
+      "suggestionResults": "({totalResults} Ergebnisse)",
+      "switch": {
+        "title": "Verlaufsanfragen",
+        "enable": "Aktivieren",
+        "disable": "Deaktivieren und löschen"
+      },
+      "confirmDisableModal": {
+        "title": "Verlaufsanfragen deaktivieren?",
+        "message": "Durch Deaktivieren der Verlaufsanfragen löschen Sie auch die gesamte Verlaufsliste.",
+        "dismiss": "Abbrechen",
+        "confirm": "Deaktivieren"
       }
     },
-    "mobile": {
-      "nextQueriesGroup": {
-        "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:"
-      },
-      "nextQueryPreview": {
-        "viewResults": "Alle anzeigen"
-      },
-      "totalResults": {
-        "message": "{totalResults} Ergebnisse"
-      },
-      "queryPreview": {
-        "viewResults": "Alle anzeigen"
+    "nextQueries": {
+      "title": "Was kommt als Nächstes"
+    },
+    "nextQueriesGroup": {
+      "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:"
+    },
+    "nextQueryPreview": {
+      "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:",
+      "query": "{query}",
+      "totalResults": "({totalResults})",
+      "viewResults": "Alle Ergebnisse anzeigen"
+    },
+    "identifierResults": {
+      "title": "SKU-Suche"
+    },
+    "recommendations": {
+      "title": "Top-Klicks"
+    },
+    "facets": {
+      "gender": "Geschlecht",
+      "categoryPaths": "Kategorien",
+      "price": "Preis",
+      "brand": "Marke",
+      "fit": "Passform",
+      "collection": "Kollektion",
+      "genres": "Geschlechter",
+      "isAdult": "Inhalt für",
+      "type": "Kerl",
+      "runtimeMinutes": "Dauer in Minuten"
+    },
+    "facetsPanel": {
+      "title": "SORTIEREN & FILTERN",
+      "viewResults": "ERGEBNISSE ANZEIGEN ({totalResults})"
+    },
+    "filters": {
+      "all": "Alle",
+      "showMore": "Mehr anzeigen",
+      "showLess": "Weniger anzeigen"
+    },
+    "partialResults": {
+      "query": "{query}",
+      "totalResults": "({totalResults})",
+      "viewResults": "Alle anzeigen"
+    },
+    "priceFilter": {
+      "lessThan": "weniger als {'{max}'}",
+      "fromTo": "{'{min}'} - {'{max}'}",
+      "from": "ab {'{min}'}"
+    },
+    "toggleAside": {
+      "showAside": "Sortieren & Filtern"
+    },
+    "totalResults": {
+      "message": "{totalResults} Ergebnisse für {query}"
+    },
+    "semanticQueries": {
+      "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:"
+    },
+    "sort": {
+      "label": "Sortieren nach",
+      "values": {
+        "price asc": "Preis: Niedrig bis Hoch",
+        "price desc": "Preis: Hoch bis Niedrig",
+        "default": "Relevanz"
       }
+    },
+    "selectedFilters": {
+      "clear": "FILTER LÖSCHEN ({selectedFiltersNumber})"
+    },
+    "result": {
+      "addToCart": "IN DEN WARENKORB LEGEN"
+    },
+    "spellcheck": {
+      "message": "Keine Ergebnisse gefunden für {query}. Wir zeigen Ihnen Ergebnisse für"
+    },
+    "noResults": {
+      "message": "Es tut uns leid, aber es gibt keine Ergebnisse für {query}. Sie könnten an diesen Produkten interessiert sein"
+    },
+    "fallbackDisclaimer": {
+      "message": "Keine Ergebnisse gefunden für {query} mit den ausgewählten Filtern. Die Filter wurden aufgehoben"
+    },
+    "columnPicker": {
+      "message": "Ansicht"
+    },
+    "queryPreview": {
+      "viewResults": "Alle Ergebnisse anzeigen"
+    },
+    "redirections": {
+      "title": "Ihre Suche entspricht einem besonderen Ort auf unserer Website. Um ihn zu besuchen, werden Sie umgeleitet",
+      "accept": "Ja, leite mich um",
+      "reject": "Nein, ich bleibe hier"
+    },
+    "relatedPrompts": {
+      "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:"
+    }
+  },
+  "mobile": {
+    "nextQueriesGroup": {
+      "message": "Diejenigen, die nach {query} gesucht haben, haben auch angesehen:"
+    },
+    "nextQueryPreview": {
+      "viewResults": "Alle anzeigen"
+    },
+    "totalResults": {
+      "message": "{totalResults} Ergebnisse"
+    },
+    "queryPreview": {
+      "viewResults": "Alle anzeigen"
     }
   }
+}
diff --git a/src/i18n/messages/en.messages.json b/src/i18n/messages/en.messages.json
index 00865878..8a566253 100644
--- a/src/i18n/messages/en.messages.json
+++ b/src/i18n/messages/en.messages.json
@@ -126,6 +126,9 @@
       "title": "Your search matches a special place in our website, to visit it, you are being redirected",
       "accept": "Yes, redirect me",
       "reject": "No, I'll stay here"
+    },
+    "relatedPrompts": {
+      "title": "Are you interested in \"{query}\"? Explore this suggestions:"
     }
   },
   "mobile": {
diff --git a/src/i18n/messages/es.messages.json b/src/i18n/messages/es.messages.json
index a49a5487..31bfb33f 100644
--- a/src/i18n/messages/es.messages.json
+++ b/src/i18n/messages/es.messages.json
@@ -123,9 +123,12 @@
       "viewResults": "Ver todos los resultados"
     },
     "redirections": {
-     "title": "Tu búsqueda coincide con una página especial de nuestra web, vas a ser redirigido a:",
+      "title": "Tu búsqueda coincide con una página especial de nuestra web, vas a ser redirigido a:",
       "accept": "Sí, redirígeme",
       "reject": "No, me quedaré aquí"
+    },
+    "relatedPrompts": {
+      "title": "¿Estás interesado en \"{query}\"? Explora estas sugerencias:"
     }
   },
   "mobile": {
diff --git a/src/i18n/messages/fr.messages.json b/src/i18n/messages/fr.messages.json
index b9ce801c..e05bc591 100644
--- a/src/i18n/messages/fr.messages.json
+++ b/src/i18n/messages/fr.messages.json
@@ -126,6 +126,9 @@
       "title": "Votre recherche correspond à un endroit spécial de notre site, pour le visiter, vous êtes redirigé",
       "accept": "Oui, redirigez-moi",
       "reject": "Non, je reste ici"
+    },
+    "relatedPrompts": {
+      "title": "Êtes-vous intéressé par «{query}»? Explorez ces suggestions:"
     }
   },
   "mobile": {
diff --git a/src/i18n/messages/it.messages.json b/src/i18n/messages/it.messages.json
index fd4f46fa..81dec2a2 100644
--- a/src/i18n/messages/it.messages.json
+++ b/src/i18n/messages/it.messages.json
@@ -126,6 +126,9 @@
       "title": "La vostra ricerca corrisponde a un luogo speciale del nostro sito web, per visitare il quale siete stati reindirizzati",
       "accept": "Sì, reindirizzami",
       "reject": "No, rimango qui"
+    },
+    "relatedPrompts": {
+      "title": "Ti interessa \"{query}\"? Esplora questi suggerimenti:"
     }
   },
   "mobile": {
diff --git a/src/i18n/messages/pt.messages.json b/src/i18n/messages/pt.messages.json
index 1e7abe22..b7904282 100644
--- a/src/i18n/messages/pt.messages.json
+++ b/src/i18n/messages/pt.messages.json
@@ -126,6 +126,9 @@
       "title": "A sua pesquisa corresponde a um local especial no nosso sítio Web, para o visitar, está a ser redireccionado",
       "accept": "Sim, redirecionar-me",
       "reject": "Não, vou ficar aqui"
+    },
+    "relatedPrompts": {
+      "title": "Você está interessado em \"{query}\"? Explore estas sugestões:"
     }
   },
   "mobile": {
diff --git a/tests/e2e/cucumber/scroll.spec.ts b/tests/e2e/cucumber/scroll.spec.ts
index 2b5ae4b1..7ef63f9e 100644
--- a/tests/e2e/cucumber/scroll.spec.ts
+++ b/tests/e2e/cucumber/scroll.spec.ts
@@ -31,7 +31,7 @@ Then('scroll position is at top', () => {
  * the subheader. And then we can reach the bottom because we have the total height of the page.
  */
 When('scrolling down to the bottom', () => {
-  cy.getByDataTest('query-preview-item')
+  cy.getByDataTest('related-prompt-item')
     .should('have.length.at.least', 5)
     .then(() => {
       cy.getByDataTest('base-scroll').scrollTo('center', { duration: 1000 });