Merge branch 'main' into chore/use-empathy-eslint

src/adapter/adapter.ts

@@ -1,8 +1,3 @@
-import type {
-  PlatformRecommendationsRequest,
-  PlatformResult,
-  PlatformSemanticQueriesRequest,
-} from '@empathyco/x-adapter-platform'
 import type {
   ExperienceControlsResponse,
   RecommendationsRequest,
@@ -12,7 +7,11 @@ import type {
 import {
   experienceControlsResponseSchema,
   platformAdapter,
+  type PlatformRecommendationsRequest,
+  type PlatformResult,
+  type PlatformSemanticQueriesRequest,
   recommendationsRequestSchema,
+  relatedPromptsEndpointAdapter,
   resultSchema,
   semanticQueriesRequestSchema,
 } from '@empathyco/x-adapter-platform'
@@ -74,3 +73,9 @@ experienceControlsResponseSchema.$override<
     },
   },
 })
+
+adapter.relatedPrompts = relatedPromptsEndpointAdapter.extends({
+  endpoint:
+    'https://api.empathy.co/relatedprompts/mymotivemarketplace?store=Labstore+London&lang=en',
+  requestMapper: ({ query }) => ({ query }),
+})

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,9 @@
 </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 { useHasSearched } from '../../composables/use-has-searched.composable'
 import MainComponent from '../main.vue'
 import MaxDesktopWidthItem from '../max-desktop-width-item.vue'
@@ -89,7 +93,15 @@ export default defineComponent({
   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
+        :related-prompt-list="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">
@@ -18,34 +24,64 @@
 
 <script lang="ts">
 import type { FeatureLocation } from '@empathyco/x-components'
-import { LocationProvider, use$x } from '@empathyco/x-components'
+import type { SemanticQueriesConfig } from '@empathyco/x-components/types'
+import type { ComputedRef } from 'vue'
+import { LocationProvider, use$x, useState } from '@empathyco/x-components'
 import { computed, defineAsyncComponent, defineComponent } from 'vue'
 import { useHasSearched } from '../composables/use-has-searched.composable'
+import CustomRelatedPrompts from './related-prompts/custom-related-prompts.vue'
 import CustomRecommendations from './results/custom-recommendations.vue'
 import CustomSemanticQueries from './search/custom-semantic-queries.vue'
 
 export default defineComponent({
   name: 'MainComponent',
   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)),
+    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(
+      () => x.totalResults > 0 && x.totalResults < semanticQueriesConfig.value.threshold,
+    )
+
+    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,72 @@
+<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"
+        :queries-preview-info="queriesPreviewInfo"
+      ></CustomQueryPreview>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import type { RelatedPrompt } from '@empathyco/x-types'
+import type { PropType } from 'vue'
+import { use$x, useState } from '@empathyco/x-components'
+import { relatedPromptsXModule } from '@empathyco/x-components/related-prompts'
+import { computed, defineComponent } from 'vue'
+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>