From 36cdcc681d4b049815b99a42d48c22d30c49fafa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20CG?= <victorcg88@users.noreply.github.com>
Date: Fri, 1 Nov 2024 09:58:19 +0100
Subject: [PATCH] feat: create related prompts module (#1642)

---
 packages/x-components/src/__stubs__/index.ts  |   1 +
 .../related-prompts-stubs.factory.ts          |  43 +++
 .../src/adapter/mocked-responses.ts           |   6 +-
 .../x-components/src/components/base-grid.vue |   3 +-
 packages/x-components/src/index.ts            |   1 +
 packages/x-components/src/views/home/Home.vue | 171 ++++++---
 packages/x-components/src/views/home/types.ts |   3 +
 .../x-components/src/wiring/events.types.ts   |   5 +-
 .../related-prompts/components/index.ts       |   2 +
 .../components/related-prompt.vue             | 102 +++++
 .../components/related-prompts-list.vue       | 362 ++++++++++++++++++
 .../x-modules/related-prompts/events.types.ts |  16 +
 .../src/x-modules/related-prompts/index.ts    |   5 +
 .../store/__tests__/actions.spec.ts           | 118 ++++++
 .../store/__tests__/getters.spec.ts           |  37 ++
 .../related-prompts/store/__tests__/utils.ts  |  21 +
 .../fetch-and-save-related-prompts.action.ts  |  34 ++
 .../actions/fetch-related-prompts.action.ts   |  21 +
 .../related-prompts/store/emitters.ts         |  11 +
 .../store/getters/request.getter.ts           |  15 +
 .../x-modules/related-prompts/store/index.ts  |   6 +
 .../x-modules/related-prompts/store/module.ts |  44 +++
 .../x-modules/related-prompts/store/types.ts  | 103 +++++
 .../src/x-modules/related-prompts/types.ts    |  10 +
 .../src/x-modules/related-prompts/wiring.ts   |  97 +++++
 .../src/x-modules/related-prompts/x-module.ts |  28 ++
 .../src/x-modules/x-modules.types.ts          |   2 +
 27 files changed, 1212 insertions(+), 55 deletions(-)
 create mode 100644 packages/x-components/src/__stubs__/related-prompts-stubs.factory.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/components/index.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
 create mode 100644 packages/x-components/src/x-modules/related-prompts/components/related-prompts-list.vue
 create mode 100644 packages/x-components/src/x-modules/related-prompts/events.types.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/index.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/__tests__/actions.spec.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/__tests__/getters.spec.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/__tests__/utils.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/actions/fetch-and-save-related-prompts.action.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/actions/fetch-related-prompts.action.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/emitters.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/getters/request.getter.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/index.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/module.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/store/types.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/types.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/wiring.ts
 create mode 100644 packages/x-components/src/x-modules/related-prompts/x-module.ts

diff --git a/packages/x-components/src/__stubs__/index.ts b/packages/x-components/src/__stubs__/index.ts
index 2a437254f3..aeab9517d3 100644
--- a/packages/x-components/src/__stubs__/index.ts
+++ b/packages/x-components/src/__stubs__/index.ts
@@ -15,3 +15,4 @@ export * from './results-stubs.factory';
 export * from './search-response-stubs.factory';
 export * from './semantic-queries-stubs.factory';
 export * from './tagging-response-stubs.factory';
+export * from './related-prompts-stubs.factory';
diff --git a/packages/x-components/src/__stubs__/related-prompts-stubs.factory.ts b/packages/x-components/src/__stubs__/related-prompts-stubs.factory.ts
new file mode 100644
index 0000000000..ce47147c43
--- /dev/null
+++ b/packages/x-components/src/__stubs__/related-prompts-stubs.factory.ts
@@ -0,0 +1,43 @@
+import { RelatedPrompt } from '@empathyco/x-types';
+
+/**
+ * Creates a {@link @empathyco/x-types#RelatedPrompt | related prompts} stub.
+ *
+ * @param amount - Number of stubbed related prompts to create.
+ *
+ * @returns Array of related prompts stub.
+ *
+ * @internal
+ */
+export function getRelatedPromptsStub(amount = 12): RelatedPrompt[] {
+  return Array.from({ length: amount }, (_, index) =>
+    createRelatedPromptStub(`Related Prompt ${index + 1}`)
+  );
+}
+
+/**
+ * Creates a related prompt stub with the provided options.
+ *
+ * @param suggestionText - The suggested text of the related prompt.
+ *
+ * @returns A related prompt.
+ */
+export function createRelatedPromptStub(suggestionText: string): RelatedPrompt {
+  return {
+    suggestionText,
+    nextQueries: createNextQueriesArrayStub(10),
+    modelName: 'RelatedPrompt',
+    type: Math.random() < 0.5 ? 'CURATED' : 'SYNTHETIC'
+  };
+}
+
+/**
+ * Creates an array of next queries.
+ *
+ * @param amount - Number of next queries to create.
+ *
+ * @returns Array of next queries.
+ */
+function createNextQueriesArrayStub(amount: number): string[] {
+  return Array.from({ length: amount }, (_, index) => `Next query ${index + 1}`);
+}
diff --git a/packages/x-components/src/adapter/mocked-responses.ts b/packages/x-components/src/adapter/mocked-responses.ts
index 768ee3443a..23d8049ff3 100644
--- a/packages/x-components/src/adapter/mocked-responses.ts
+++ b/packages/x-components/src/adapter/mocked-responses.ts
@@ -10,7 +10,8 @@ import {
   createSimpleFacetStub,
   getFacetsStub,
   getRelatedTagsStub,
-  getResultsStub
+  getResultsStub,
+  getRelatedPromptsStub
 } from '../__stubs__/index';
 
 export const mockedApiUrl = 'https://api.empathy.co';
@@ -198,6 +199,9 @@ export const mockedResponses = {
   },
   'related-tags': {
     relatedTags: getRelatedTagsStub()
+  },
+  'related-prompts': {
+    relatedPrompts: getRelatedPromptsStub()
   }
 };
 
diff --git a/packages/x-components/src/components/base-grid.vue b/packages/x-components/src/components/base-grid.vue
index 6f57d626e4..967fcbc41a 100644
--- a/packages/x-components/src/components/base-grid.vue
+++ b/packages/x-components/src/components/base-grid.vue
@@ -219,7 +219,8 @@
   }
 
   .x-base-grid__banner,
-  .x-base-grid__next-queries-group {
+  .x-base-grid__next-queries-group,
+  .x-base-grid__related-prompts-group {
     grid-column-start: 1;
     grid-column-end: -1;
   }
diff --git a/packages/x-components/src/index.ts b/packages/x-components/src/index.ts
index c32bee25e7..f215f3c1ba 100644
--- a/packages/x-components/src/index.ts
+++ b/packages/x-components/src/index.ts
@@ -26,6 +26,7 @@ export * from './x-modules/popular-searches';
 export * from './x-modules/queries-preview';
 export * from './x-modules/query-suggestions';
 export * from './x-modules/recommendations';
+export * from './x-modules/related-prompts';
 export * from './x-modules/related-tags';
 export * from './x-modules/scroll';
 export * from './x-modules/search';
diff --git a/packages/x-components/src/views/home/Home.vue b/packages/x-components/src/views/home/Home.vue
index 9de9623b72..a8f42d5ab9 100644
--- a/packages/x-components/src/views/home/Home.vue
+++ b/packages/x-components/src/views/home/Home.vue
@@ -76,7 +76,7 @@
         </label>
       </li>
       <li class="x-test-controls__item">
-        <label for="nextQueriesPreview.maxItemsToRender">
+        <label for="nextQueriesList.showOnlyAfterOffset">
           next-queries-list - showOnlyAfterOffset
           <input
             v-model="controls.nextQueriesList.showOnlyAfterOffset"
@@ -86,6 +86,17 @@
           />
         </label>
       </li>
+      <li class="x-test-controls__item">
+        <label for="relatedPromptsList.showOnlyAfterOffset">
+          related-prompts-list - showOnlyAfterOffset
+          <input
+            v-model="controls.relatedPromptsList.showOnlyAfterOffset"
+            id="relatedPromptsList.showOnlyAfterOffset"
+            type="checkbox"
+            data-test="rp-preview-show-after-offset"
+          />
+        </label>
+      </li>
       <li class="x-test-controls__item">
         <label for="adapter.e2eAdapter">
           Use mocked adapter
@@ -315,64 +326,111 @@
                       :show-only-after-offset="controls.nextQueriesList.showOnlyAfterOffset"
                       class="x-mot-next-queries-list"
                     >
-                      <BaseVariableColumnGrid
-                        style="--x-size-min-width-grid-item: 150px"
-                        class="x-gap-12"
-                        :animation="resultsAnimation"
-                        :columns="x.device === 'mobile' ? 2 : 4"
+                      <RelatedPromptsList
+                        :show-only-after-offset="controls.relatedPromptsList.showOnlyAfterOffset"
+                        class="x-mot-related-prompt-list"
                       >
-                        <template #result="{ item: result }">
-                          <MainScrollItem :item="result">
-                            <Result :result="result" data-test="search-result" />
-                          </MainScrollItem>
-                        </template>
+                        <BaseVariableColumnGrid
+                          style="--x-size-min-width-grid-item: 150px"
+                          class="x-gap-12"
+                          :animation="resultsAnimation"
+                          :columns="x.device === 'mobile' ? 2 : 4"
+                        >
+                          <template #result="{ item: result }">
+                            <MainScrollItem :item="result">
+                              <Result :result="result" data-test="search-result" />
+                            </MainScrollItem>
+                          </template>
 
-                        <template #banner="{ item: banner }">
-                          <Banner :banner="banner" />
-                        </template>
+                          <template #banner="{ item: banner }">
+                            <Banner :banner="banner" />
+                          </template>
 
-                        <template #promoted="{ item: promoted }">
-                          <Promoted :promoted="promoted" />
-                        </template>
+                          <template #promoted="{ item: promoted }">
+                            <Promoted :promoted="promoted" />
+                          </template>
 
-                        <template #next-queries-group="{ item: { nextQueries } }">
-                          <NextQueryPreview
-                            :suggestion="nextQueries[0]"
-                            :max-items-to-render="controls.nextQueriesPreview.maxItemsToRender"
-                            #default="{ results }"
-                            class="x-pt-24"
-                          >
-                            <h1 class="x-title2">Others clients have searched</h1>
-                            <NextQuery
-                              class="x-suggestion x-text1 x-text1-lg"
+                          <template #next-queries-group="{ item: { nextQueries } }">
+                            <NextQueryPreview
                               :suggestion="nextQueries[0]"
-                              data-test="next-query-preview-name"
+                              :max-items-to-render="controls.nextQueriesPreview.maxItemsToRender"
+                              #default="{ results }"
+                              class="x-pt-24"
                             >
-                              <span class="x-font-bold">{{ nextQueries[0].query }}</span>
-                            </NextQuery>
-                            <div class="x-mb-24">
-                              <SlidingPanel :resetOnContentChange="false">
-                                <div class="x-flex x-flex-row x-gap-8">
-                                  <Result
-                                    v-for="result in results"
-                                    :key="result.id"
-                                    :result="result"
-                                    style="max-width: 180px"
-                                    data-test="next-query-preview-result"
-                                  />
-                                </div>
-                              </SlidingPanel>
-                            </div>
-                            <NextQuery
-                              :suggestion="nextQueries[0]"
-                              data-test="view-all-results"
-                              class="x-button x-button-outlined x-rounded-full x-mx-auto x-mt-8 x-mb-24"
+                              <h1 class="x-title2">Others clients have searched</h1>
+                              <NextQuery
+                                class="x-suggestion x-text1 x-text1-lg"
+                                :suggestion="nextQueries[0]"
+                                data-test="next-query-preview-name"
+                              >
+                                <span class="x-font-bold">{{ nextQueries[0].query }}</span>
+                              </NextQuery>
+                              <div class="x-mb-24">
+                                <SlidingPanel :resetOnContentChange="false">
+                                  <div class="x-flex x-flex-row x-gap-8">
+                                    <Result
+                                      v-for="result in results"
+                                      :key="result.id"
+                                      :result="result"
+                                      style="max-width: 180px"
+                                      data-test="next-query-preview-result"
+                                    />
+                                  </div>
+                                </SlidingPanel>
+                              </div>
+                              <NextQuery
+                                :suggestion="nextQueries[0]"
+                                data-test="view-all-results"
+                                class="x-button x-button-outlined x-rounded-full x-mx-auto x-mt-8 x-mb-24"
+                              >
+                                {{ 'View all results' }}
+                              </NextQuery>
+                            </NextQueryPreview>
+                          </template>
+
+                          <template #related-prompts-group="{ item: { relatedPrompts } }">
+                            <RelatedPrompt
+                              class="x-bg-neutral-10 x-flex x-flex-col x-gap-16 x-pt-24"
+                              :relatedPrompt="relatedPrompts[0]"
+                              nextQueryButtonClass="x-button-lead x-button-sm x-button-outlined"
                             >
-                              {{ 'View all results' }}
-                            </NextQuery>
-                          </NextQueryPreview>
-                        </template>
-                      </BaseVariableColumnGrid>
+                              <template #header="{ suggestionText }">
+                                <h2 class="x-title2">{{ suggestionText }}</h2>
+                              </template>
+                              <template #selected-query="{ selectedQuery }">
+                                <QueryPreview
+                                  :queryPreviewInfo="{ query: selectedQuery }"
+                                  #default="{ totalResults, results }"
+                                >
+                                  <SlidingPanel>
+                                    <template #header>
+                                      <QueryPreviewButton
+                                        :queryPreviewInfo="{ query: selectedQuery }"
+                                        class="x-button x-button-lead x-button-tight x-title3 x-title3-sm desktop:x-title3-md"
+                                      >
+                                        {{ selectedQuery }}
+                                        ({{ totalResults }})
+                                        <ArrowRightIcon class="x-icon-lg" />
+                                      </QueryPreviewButton>
+                                    </template>
+
+                                    <div
+                                      class="x-transform-style-3d x-flex x-gap-16 x-pr-8 x-pt-8 desktop:x-pt-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>
+                                  </SlidingPanel>
+                                </QueryPreview>
+                              </template>
+                            </RelatedPrompt>
+                          </template>
+                        </BaseVariableColumnGrid>
+                      </RelatedPromptsList>
                     </NextQueriesList>
                   </BannersList>
                 </PromotedsList>
@@ -530,6 +588,9 @@
   import { QueryPreviewInfo } from '../../x-modules/queries-preview/store/types';
   import QueryPreviewButton from '../../x-modules/queries-preview/components/query-preview-button.vue';
   import DisplayEmitter from '../../components/display-emitter.vue';
+  import RelatedPromptsList from '../../x-modules/related-prompts/components/related-prompts-list.vue';
+  import RelatedPrompt from '../../x-modules/related-prompts/components/related-prompt.vue';
+  import QueryPreview from '../../x-modules/queries-preview/components/query-preview.vue';
   import Aside from './aside.vue';
   import PredictiveLayer from './predictive-layer.vue';
   import Result from './result.vue';
@@ -569,6 +630,8 @@
       NextQueriesList,
       NextQuery,
       NextQueryPreview,
+      RelatedPromptsList,
+      RelatedPrompt,
       OpenMainModal,
       PartialQueryButton,
       PartialResultsList,
@@ -576,6 +639,7 @@
       PreselectedFilters,
       Promoted,
       PromotedsList,
+      QueryPreview,
       QueryPreviewButton,
       QueryPreviewList,
       Recommendations,
@@ -641,6 +705,9 @@
           nextQueriesList: {
             showOnlyAfterOffset: true
           },
+          relatedPromptsList: {
+            showOnlyAfterOffset: true
+          },
           adapter: {
             useE2EAdapter: false
           }
diff --git a/packages/x-components/src/views/home/types.ts b/packages/x-components/src/views/home/types.ts
index 8591a3d65c..b9b4dfcdd0 100644
--- a/packages/x-components/src/views/home/types.ts
+++ b/packages/x-components/src/views/home/types.ts
@@ -18,6 +18,9 @@ export interface HomeControls {
   nextQueriesList: {
     showOnlyAfterOffset: boolean;
   };
+  relatedPromptsList: {
+    showOnlyAfterOffset: boolean;
+  };
   adapter: {
     useE2EAdapter: boolean;
   };
diff --git a/packages/x-components/src/wiring/events.types.ts b/packages/x-components/src/wiring/events.types.ts
index fbca9c3efb..a527a08488 100644
--- a/packages/x-components/src/wiring/events.types.ts
+++ b/packages/x-components/src/wiring/events.types.ts
@@ -22,6 +22,7 @@ import { UrlXEvents } from '../x-modules/url/events.types';
 import { XModuleName } from '../x-modules/x-modules.types';
 import { SemanticQueriesXEvents } from '../x-modules/semantic-queries/events.types';
 import { ExperienceControlsXEvents } from '../x-modules/experience-controls/events.types';
+import { RelatedPromptsXEvents } from '../x-modules/related-prompts/events.types';
 import { WireMetadata } from './wiring.types';
 /* eslint-disable max-len */
 /**.
@@ -51,6 +52,7 @@ import { WireMetadata } from './wiring.types';
  * {@link https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/search/events.types.ts | SearchXEvents}
  * {@link https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/tagging/events.types.ts | TaggingXEvents}
  * {@link https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/url/events.types.ts | UrlXEvents}
+ * {@link https://github.com/empathyco/x/blob/main/packages/x-components/src/x-modules/related-prompts/events.types.ts | RelatedPromptsXEvents}
  *
  * @public
  */
@@ -73,7 +75,8 @@ export interface XEventsTypes
     SemanticQueriesXEvents,
     TaggingXEvents,
     ExperienceControlsXEvents,
-    UrlXEvents {
+    UrlXEvents,
+    RelatedPromptsXEvents {
   /**
    * The provided number of columns of a grid has changed.
    * Payload: the columns number.
diff --git a/packages/x-components/src/x-modules/related-prompts/components/index.ts b/packages/x-components/src/x-modules/related-prompts/components/index.ts
new file mode 100644
index 0000000000..557325c884
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/components/index.ts
@@ -0,0 +1,2 @@
+export { default as RelatedPrompt } from './related-prompt.vue';
+export { default as RelatedPromptsList } from './related-prompts-list.vue';
diff --git a/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue b/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
new file mode 100644
index 0000000000..7663c3a688
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/components/related-prompt.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="x-related-prompt" data-test="related-prompt">
+    <div class="x-related-prompt__info">
+      <slot name="header" :suggestionText="relatedPrompt.suggestionText">
+        {{ relatedPrompt.suggestionText }}
+      </slot>
+      <slot name="next-queries" :nextQueries="relatedPrompt.nextQueries">
+        <SlidingPanel :resetOnContentChange="false">
+          <div class="x-related-prompt__sliding-panel-content">
+            <button
+              v-for="(nextQuery, index) in relatedPrompt.nextQueries"
+              :key="index"
+              @click="onClick(nextQuery)"
+              :class="[
+                'x-button',
+                { 'x-selected': selectedNextQuery === nextQuery },
+                nextQueryButtonClass
+              ]"
+            >
+              <slot name="next-query" :nextQuery="nextQuery">
+                <span>{{ nextQuery }}</span>
+                <CrossTinyIcon v-if="selectedNextQuery === nextQuery" class="x-icon" />
+                <PlusIcon v-else class="x-icon" />
+              </slot>
+            </button>
+          </div>
+        </SlidingPanel>
+      </slot>
+    </div>
+    <div class="x-related-prompt__query-preview">
+      <slot name="selected-query" :selectedQuery="selectedNextQuery">
+        {{ selectedNextQuery }}
+      </slot>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, PropType, ref } from 'vue';
+  import { RelatedPrompt } from '@empathyco/x-types';
+  import { relatedPromptsXModule } from '../x-module';
+  import CrossTinyIcon from '../../../components/icons/cross-tiny.vue';
+  import PlusIcon from '../../../components/icons/plus.vue';
+  import SlidingPanel from '../../../components/sliding-panel.vue';
+
+  /**
+   * This component shows a suggested related prompt with the associated next queries.
+   * It allows to select one of the next query and show it.
+   *
+   * It provide slots to customize the header, the next queries list,
+   * the individual next query inside the list and the selected query.
+   *
+   * @public
+   */
+  export default defineComponent({
+    name: 'RelatedPrompt',
+    components: {
+      SlidingPanel,
+      CrossTinyIcon,
+      PlusIcon
+    },
+    xModule: relatedPromptsXModule.name,
+    props: {
+      relatedPrompt: {
+        type: Object as PropType<RelatedPrompt>,
+        required: true
+      },
+      nextQueryButtonClass: {
+        type: String,
+        default: 'x-button-outlined'
+      }
+    },
+    setup(props) {
+      const selectedNextQuery = ref(props.relatedPrompt.nextQueries[0]);
+
+      /**
+       * Handles the click event on a next query button.
+       *
+       * @param nextQuery - The clicked next query.
+       */
+      function onClick(nextQuery: string): void {
+        if (selectedNextQuery.value === nextQuery) {
+          selectedNextQuery.value = '';
+        } else {
+          selectedNextQuery.value = nextQuery;
+        }
+      }
+
+      return { selectedNextQuery, onClick };
+    }
+  });
+</script>
+<style lang="css" scoped>
+  .x-related-prompt__info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .x-related-prompt__sliding-panel-content {
+    display: flex;
+    gap: 8px;
+  }
+</style>
diff --git a/packages/x-components/src/x-modules/related-prompts/components/related-prompts-list.vue b/packages/x-components/src/x-modules/related-prompts/components/related-prompts-list.vue
new file mode 100644
index 0000000000..0c0429689d
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/components/related-prompts-list.vue
@@ -0,0 +1,362 @@
+<script lang="ts">
+  import { computed, ComputedRef, defineComponent, h, inject, provide, Ref } from 'vue';
+  import { RelatedPrompt } from '@empathyco/x-types';
+  import { AnimationProp } from '../../../types/animation-prop';
+  import { groupItemsBy } from '../../../utils/array';
+  import ItemsList from '../../../components/items-list.vue';
+  import { ListItem } from '../../../utils/types';
+  import {
+    HAS_MORE_ITEMS_KEY,
+    LIST_ITEMS_KEY,
+    QUERY_KEY
+  } from '../../../components/decorators/injection.consts';
+  import { relatedPromptsXModule } from '../x-module';
+  import { useState } from '../../../composables/use-state';
+  import { RelatedPromptsGroup } from '../types';
+
+  /**
+   * Component that inserts groups of related prompts in different positions of the injected search
+   * items list, based on the provided configuration.
+   *
+   * @public
+   */
+  export default defineComponent({
+    name: 'RelatedPromptsList',
+    xModule: relatedPromptsXModule.name,
+    props: {
+      /**
+       * Animation component that will be used to animate the related prompts groups.
+       */
+      animation: {
+        type: AnimationProp,
+        default: 'ul'
+      },
+      /**
+       * The first index to insert a group of related prompts at.
+       */
+      offset: {
+        type: Number,
+        default: 24
+      },
+      /**
+       * The items cycle size to keep inserting related prompts groups at.
+       */
+      frequency: {
+        type: Number,
+        default: 24
+      },
+      /**
+       * The maximum amount of related prompts to add in a single group.
+       */
+      maxRelatedPromptsPerGroup: {
+        type: Number,
+        default: 4
+      },
+      /**
+       * The maximum number of groups to insert into the injected list items list.
+       */
+      maxGroups: {
+        type: Number,
+        default: undefined
+      },
+      /**
+       * Determines if a group is added to the injected items list in case the number
+       * of items is smaller than the offset.
+       */
+      showOnlyAfterOffset: {
+        type: Boolean,
+        default: false
+      }
+    },
+    setup(props, { slots }) {
+      const { query, status } = useState('relatedPrompts', ['query', 'status']);
+
+      /**
+       * The state related prompts.
+       */
+      const relatedPrompts: ComputedRef<RelatedPrompt[]> = useState('relatedPrompts', [
+        'relatedPrompts'
+      ]).relatedPrompts;
+
+      /**
+       * Injected query, updated when the related request(s) have succeeded.
+       */
+      const injectedQuery = inject<Ref<string | undefined>>(QUERY_KEY as string);
+
+      /**
+       * Indicates if there are more available results than the injected.
+       */
+      const hasMoreItems = inject<Ref<boolean | undefined>>(HAS_MORE_ITEMS_KEY as string);
+
+      /**
+       * The grouped related prompts based on the given config.
+       *
+       * @returns A list of related prompts groups.
+       */
+      const relatedPromptsGroups = computed<RelatedPromptsGroup[]>(() =>
+        Object.values(
+          groupItemsBy(relatedPrompts.value, (_, index) =>
+            Math.floor(index / props.maxRelatedPromptsPerGroup)
+          )
+        )
+          .slice(0, props.maxGroups)
+          .map((relatedPrompts, index) => ({
+            modelName: 'RelatedPromptsGroup' as const,
+            id: `related-prompts-group-${index}`,
+            relatedPrompts
+          }))
+      );
+
+      /**
+       * It injects {@link ListItem} provided by an ancestor as injectedListItems.
+       */
+      const injectedListItems = inject<Ref<ListItem[]>>(LIST_ITEMS_KEY as string);
+
+      /**
+       * Checks if the related prompts are outdated taking into account the injected query.
+       *
+       * @returns True if the related prompts are outdated, false if not.
+       */
+      const relatedPromptsAreOutdated = computed(
+        () =>
+          !!injectedQuery?.value &&
+          (query.value !== injectedQuery.value || status.value !== 'success')
+      );
+
+      /**
+       * Checks if the number of items is smaller than the offset so a group
+       * should be added to the injected items list.
+       *
+       * @returns True if a group should be added, false if not.
+       */
+      const hasNotEnoughListItems = computed(
+        () =>
+          !props.showOnlyAfterOffset &&
+          !hasMoreItems?.value &&
+          injectedListItems !== undefined &&
+          injectedListItems.value.length > 0 &&
+          props.offset > injectedListItems.value.length
+      );
+
+      /**
+       * New list of {@link ListItem}s to render.
+       *
+       * @returns The new list of {@link ListItem}s with the related prompts groups inserted.
+       */
+      const items = computed((): ListItem[] => {
+        if (!injectedListItems?.value) {
+          return relatedPromptsGroups.value;
+        }
+        if (relatedPromptsAreOutdated.value) {
+          return injectedListItems.value;
+        }
+        if (hasNotEnoughListItems.value) {
+          return injectedListItems.value.concat(relatedPromptsGroups.value[0] ?? []);
+        }
+        return relatedPromptsGroups?.value.reduce(
+          (items, relatedPromptsGroup, index) => {
+            const targetIndex = props.offset + props.frequency * index;
+            if (targetIndex <= items.length) {
+              items.splice(targetIndex, 0, relatedPromptsGroup);
+            }
+            return items;
+          },
+          [...injectedListItems.value]
+        );
+      });
+
+      /**
+       * The computed list items of the entity that uses the mixin.
+       *
+       * @remarks It should be overridden in the component that uses the mixin and
+       * it's intended to be filled with items from the state. Vue doesn't allow
+       * mixins as abstract classes.
+       * @returns An empty array as fallback in case it is not overridden.
+       */
+      provide(LIST_ITEMS_KEY as string, items);
+
+      return () => {
+        const innerProps = { items: items.value, animation: props.animation };
+        // https://vue-land.github.io/faq/forwarding-slots#passing-all-slots
+        return slots.default?.(innerProps)[0] ?? h(ItemsList, innerProps, slots);
+      };
+    }
+  });
+</script>
+
+<docs lang="mdx">
+## Events
+
+This component emits no events.
+
+## See it in action
+
+  <!-- prettier-ignore-start -->
+
+:::warning Backend microservice required To use this component, the <b>QuerySignals</b> microservice
+must be implemented. :::
+
+  <!-- prettier-ignore-end -->
+
+Usually, this component is going to be used together with the `ResultsList` one. Related prompts
+groups will be inserted between the results, guiding users to discover new searches directly from
+the results list.
+
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList />
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsList,
+      ResultsList,
+      SearchInput
+    }
+  };
+</script>
+```
+
+### Play with the index that related prompts groups are inserted at
+
+The component allows to customise where are the related prompts groups inserted. In the following
+example, the first group of related prompts will be inserted at the index `48` (`offset`), and then
+a second group will be inserted at index `120` because of the `frequency` prop configured to `72`.
+Finally, a third group will be inserted at index `192`. Because `maxGroups` is configured to `3`, no
+more groups will be inserted. Each one of this groups will have up to `6` related prompts
+(`maxRelatedPromptsPerGroup`).
+
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList
+        :offset="48"
+        :frequency="72"
+        :maxRelatedPromptsPerGroup="6"
+        :maxGroups="3"
+      />
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsList,
+      ResultsList,
+      SearchInput
+    }
+  };
+</script>
+```
+
+### Showing/hiding first related prompts group when no more items
+
+By default, the first related prompts group will be inserted when the total number of results is
+smaller than the offset, but this behavior can be deactivated by setting the `showOnlyAfterOffset`
+to `true`.
+
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList
+        :offset="48"
+        :frequency="72"
+        :maxRelatedPromptsPerGroup="1"
+        :showOnlyAfterOffset="true"
+      />
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsList,
+      ResultsList,
+      SearchInput
+    }
+  };
+</script>
+```
+
+### Customise the layout of the component
+
+This component will render by default the `id` of each search item, both the injected, and for the
+groups of related prompts generated, but the common case is to integrate it with another layout
+component, for example the `BaseGrid`. To do so, you can use the `default` slot
+
+```vue
+<template>
+  <div>
+    <SearchInput />
+    <ResultsList>
+      <RelatedPromptsList
+        :offset="48"
+        :frequency="72"
+        :maxRelatedPromptsPerGroup="6"
+        :maxGroups="3"
+        #default="{ items }"
+      >
+        <BaseGrid :items="items" :animation="animation">
+          <template #related-prompts-group="{ item }">
+            <span v-for="const prompt of items.relatedPrompts">
+              RelatedPromptsGroup:
+              <pre>{{ prompt }}</pre>
+            </span>
+          </template>
+          <template #result="{ item }">
+            <span>Result: {{ item.name }}</span>
+          </template>
+          <template #default="{ item }">
+            <span>Default: {{ item }}</span>
+          </template>
+        </BaseGrid>
+      </RelatedPromptsList>
+    </ResultsList>
+  </div>
+</template>
+
+<script>
+  import { RelatedPromptsList } from '@empathyco/x-components/related-prompts';
+  import { ResultsList } from '@empathyco/x-components/search';
+  import { SearchInput } from '@empathyco/x-components/search-box';
+  import { BaseGrid } from '@empathyco/x-components';
+
+  export default {
+    name: 'RelatedPromptsListDemo',
+    components: {
+      RelatedPromptsLis,
+      ResultsList,
+      BaseGrid,
+      SearchInput
+    }
+  };
+</script>
+```
+</docs>
diff --git a/packages/x-components/src/x-modules/related-prompts/events.types.ts b/packages/x-components/src/x-modules/related-prompts/events.types.ts
new file mode 100644
index 0000000000..12d8c1f126
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/events.types.ts
@@ -0,0 +1,16 @@
+import { RelatedPromptsRequest } from '@empathyco/x-types';
+
+/**
+ * Dictionary of the events of RelatedPrompts XModule, where each key is the event name,
+ * and the value is the event payload type or `void` if it has no payload.
+ *
+ * @public
+ */
+export interface RelatedPromptsXEvents {
+  /**
+   * Any property of the related-prompts request has changed
+   * Payload: The new related-prompts request or `null` if there is not enough data in the state
+   * to conform a valid request.
+   */
+  RelatedPromptsRequestUpdated: RelatedPromptsRequest | null;
+}
diff --git a/packages/x-components/src/x-modules/related-prompts/index.ts b/packages/x-components/src/x-modules/related-prompts/index.ts
new file mode 100644
index 0000000000..0baeb1b99e
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/index.ts
@@ -0,0 +1,5 @@
+export * from './components';
+export * from './events.types';
+export * from './store';
+export * from './wiring';
+export * from './x-module';
diff --git a/packages/x-components/src/x-modules/related-prompts/store/__tests__/actions.spec.ts b/packages/x-components/src/x-modules/related-prompts/store/__tests__/actions.spec.ts
new file mode 100644
index 0000000000..79efe65bec
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/__tests__/actions.spec.ts
@@ -0,0 +1,118 @@
+import { mount } from '@vue/test-utils';
+import { Store } from 'vuex';
+import { getRelatedPromptsStub } from '../../../../__stubs__';
+import { getMockedAdapter, installNewXPlugin } from '../../../../__tests__/utils';
+import { SafeStore } from '../../../../store/__tests__/utils';
+import {
+  RelatedPromptsActions,
+  RelatedPromptsGetters,
+  RelatedPromptsMutations,
+  RelatedPromptsState
+} from '../types';
+import { relatedPromptsXStoreModule } from '../module';
+import { resetRelatedPromptsStateWith } from './utils';
+
+describe('testing related prompts module actions', () => {
+  const mockedRelatedPrompts = getRelatedPromptsStub();
+
+  const adapter = getMockedAdapter({
+    relatedPrompts: { relatedPrompts: mockedRelatedPrompts }
+  });
+
+  const store: SafeStore<
+    RelatedPromptsState,
+    RelatedPromptsGetters,
+    RelatedPromptsMutations,
+    RelatedPromptsActions
+  > = new Store(relatedPromptsXStoreModule as any);
+  mount(
+    {},
+    {
+      global: {
+        plugins: [installNewXPlugin({ adapter, store })]
+      }
+    }
+  );
+
+  beforeEach(() => {
+    resetRelatedPromptsStateWith(store);
+  });
+
+  describe('fetchRelatedPrompts', () => {
+    it('should return related prompts', async () => {
+      resetRelatedPromptsStateWith(store, {
+        query: 'honeyboo'
+      });
+
+      const relatedPrompts = await store.dispatch('fetchRelatedPrompts', store.getters.request);
+      expect(relatedPrompts).toEqual(mockedRelatedPrompts);
+    });
+
+    it('should return `null` if there is not request', async () => {
+      const relatedPrompts = await store.dispatch('fetchRelatedPrompts', store.getters.request);
+      expect(relatedPrompts).toBeNull();
+    });
+  });
+
+  describe('fetchAndSaveRelatedPrompts', () => {
+    it('should request and store related prompts in the state', async () => {
+      resetRelatedPromptsStateWith(store, {
+        query: 'honeyboo'
+      });
+
+      const actionPromise = store.dispatch('fetchAndSaveRelatedPrompts', store.getters.request);
+      expect(store.state.status).toEqual('loading');
+      await actionPromise;
+      expect(store.state.relatedPrompts).toEqual(mockedRelatedPrompts);
+      expect(store.state.status).toEqual('success');
+    });
+
+    it('should not clear related prompts in the state if the query is empty', async () => {
+      resetRelatedPromptsStateWith(store, { relatedPrompts: mockedRelatedPrompts });
+
+      await store.dispatch('fetchAndSaveRelatedPrompts', store.getters.request);
+      expect(store.state.relatedPrompts).toEqual(mockedRelatedPrompts);
+    });
+
+    it('should cancel the previous request if it is not yet resolved', async () => {
+      resetRelatedPromptsStateWith(store, { query: 'steak' });
+      const initialRelatedPrompts = store.state.relatedPrompts;
+      adapter.relatedPrompts.mockResolvedValueOnce({
+        relatedPrompts: mockedRelatedPrompts.slice(0, 1)
+      });
+
+      const firstRequest = store.dispatch('fetchAndSaveRelatedPrompts', store.getters.request);
+      const secondRequest = store.dispatch('fetchAndSaveRelatedPrompts', store.getters.request);
+
+      await firstRequest;
+      expect(store.state.status).toEqual('loading');
+      expect(store.state.relatedPrompts).toBe(initialRelatedPrompts);
+      await secondRequest;
+      expect(store.state.status).toEqual('success');
+      expect(store.state.relatedPrompts).toEqual(mockedRelatedPrompts);
+    });
+
+    it('should set the status to error when it fails', async () => {
+      resetRelatedPromptsStateWith(store, { query: 'milk' });
+      adapter.relatedPrompts.mockRejectedValueOnce('Generic error');
+      const relatedPrompts = store.state.relatedPrompts;
+      await store.dispatch('fetchAndSaveRelatedPrompts', store.getters.request);
+
+      expect(store.state.relatedPrompts).toBe(relatedPrompts);
+      expect(store.state.status).toEqual('error');
+    });
+  });
+
+  describe('cancelFetchAndSaveRelatedPrompts', () => {
+    it('should cancel the request and do not modify the stored related prompts', async () => {
+      resetRelatedPromptsStateWith(store, { query: 'honeyboo' });
+      const previousRelatedPrompts = store.state.relatedPrompts;
+      await Promise.all([
+        store.dispatch('fetchAndSaveRelatedPrompts', store.getters.request),
+        store.dispatch('cancelFetchAndSaveRelatedPrompts')
+      ]);
+      expect(store.state.relatedPrompts).toEqual(previousRelatedPrompts);
+      expect(store.state.status).toEqual('success');
+    });
+  });
+});
diff --git a/packages/x-components/src/x-modules/related-prompts/store/__tests__/getters.spec.ts b/packages/x-components/src/x-modules/related-prompts/store/__tests__/getters.spec.ts
new file mode 100644
index 0000000000..304ea29c0c
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/__tests__/getters.spec.ts
@@ -0,0 +1,37 @@
+import { RelatedPromptsRequest } from '@empathyco/x-types';
+import { map } from '@empathyco/x-utils';
+import { Store } from 'vuex';
+import { relatedPromptsXStoreModule } from '../module';
+import { RelatedPromptsState } from '../types';
+import { resetRelatedPromptsStateWith } from './utils';
+
+describe('testing related prompts module getters', () => {
+  const gettersKeys = map(relatedPromptsXStoreModule.getters, getter => getter);
+  const store: Store<RelatedPromptsState> = new Store(relatedPromptsXStoreModule as any);
+
+  beforeEach(() => {
+    resetRelatedPromptsStateWith(store);
+  });
+
+  describe(`${gettersKeys.request} getter`, () => {
+    it('should return a request object if there is a query', () => {
+      resetRelatedPromptsStateWith(store, {
+        query: 'queso',
+        params: {
+          catalog: 'es'
+        }
+      });
+
+      expect(store.getters[gettersKeys.request]).toEqual<RelatedPromptsRequest>({
+        query: 'queso',
+        extraParams: {
+          catalog: 'es'
+        }
+      });
+    });
+
+    it('should return null when there is not query', () => {
+      expect(store.getters[gettersKeys.request]).toBeNull();
+    });
+  });
+});
diff --git a/packages/x-components/src/x-modules/related-prompts/store/__tests__/utils.ts b/packages/x-components/src/x-modules/related-prompts/store/__tests__/utils.ts
new file mode 100644
index 0000000000..cf4e0254f7
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/__tests__/utils.ts
@@ -0,0 +1,21 @@
+import { DeepPartial } from '@empathyco/x-utils';
+import { Store } from 'vuex';
+import { resetStoreModuleState } from '../../../../__tests__/utils';
+import { relatedPromptsXStoreModule } from '../module';
+import { RelatedPromptsState } from '../types';
+
+/**
+ * Reset related prompt module state with its original state and the partial state passes as
+ * parameter.
+ *
+ * @param store - Related prompt store state.
+ * @param state - Partial related prompt store state to be replaced.
+ *
+ * @internal
+ */
+export function resetRelatedPromptsStateWith(
+  store: Store<RelatedPromptsState>,
+  state?: DeepPartial<RelatedPromptsState>
+): void {
+  resetStoreModuleState<RelatedPromptsState>(store, relatedPromptsXStoreModule.state(), state);
+}
diff --git a/packages/x-components/src/x-modules/related-prompts/store/actions/fetch-and-save-related-prompts.action.ts b/packages/x-components/src/x-modules/related-prompts/store/actions/fetch-and-save-related-prompts.action.ts
new file mode 100644
index 0000000000..7c515cee7e
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/actions/fetch-and-save-related-prompts.action.ts
@@ -0,0 +1,34 @@
+import { RelatedPrompt, RelatedPromptsRequest } from '@empathyco/x-types';
+import { createFetchAndSaveActions } from '../../../../store/utils/fetch-and-save-action.utils';
+import { RelatedPromptsActionContext } from '../types';
+
+const { fetchAndSave, cancelPrevious } = createFetchAndSaveActions<
+  RelatedPromptsActionContext,
+  RelatedPromptsRequest | null,
+  RelatedPrompt[] | null
+>({
+  fetch({ dispatch }, request) {
+    return dispatch('fetchRelatedPrompts', request);
+  },
+  onSuccess({ commit }, relatedPrompts) {
+    if (relatedPrompts) {
+      commit('setRelatedPromptsProducts', relatedPrompts);
+    }
+  }
+});
+
+/**
+ * Default implementation for
+ * {@link RelatedPromptsActions.fetchAndSaveRelatedPrompts} action.
+ *
+ * @public
+ */
+export const fetchAndSaveRelatedPrompts = fetchAndSave;
+
+/**
+ * Default implementation for
+ * {@link RelatedPromptsActions.cancelFetchAndSaveRelatedPrompts} action.
+ *
+ * @public
+ */
+export const cancelFetchAndSaveRelatedPrompts = cancelPrevious;
diff --git a/packages/x-components/src/x-modules/related-prompts/store/actions/fetch-related-prompts.action.ts b/packages/x-components/src/x-modules/related-prompts/store/actions/fetch-related-prompts.action.ts
new file mode 100644
index 0000000000..01471c0518
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/actions/fetch-related-prompts.action.ts
@@ -0,0 +1,21 @@
+import { XPlugin } from '../../../../plugins/x-plugin';
+import { RelatedPromptsXStoreModule } from '../types';
+
+/**
+ * Default implementation for the {@link RelatedPromptsActions.fetchRelatedPrompts}.
+ *
+ * @param _ - The {@link https://vuex.vuejs.org/guide/actions.html | context} of the actions,
+ * provided by Vuex.
+ * @param request - The related prompts request to make.
+ * @returns The related prompts response.
+ *
+ * @public
+ */
+export const fetchRelatedPrompts: RelatedPromptsXStoreModule['actions']['fetchRelatedPrompts'] = (
+  _,
+  request
+) => {
+  return request
+    ? XPlugin.adapter.relatedPrompts(request).then(({ relatedPrompts }) => relatedPrompts)
+    : null;
+};
diff --git a/packages/x-components/src/x-modules/related-prompts/store/emitters.ts b/packages/x-components/src/x-modules/related-prompts/store/emitters.ts
new file mode 100644
index 0000000000..ac53143aa3
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/emitters.ts
@@ -0,0 +1,11 @@
+import { createStoreEmitters } from '../../../store';
+import { relatedPromptsXStoreModule } from './module';
+
+/**
+ * {@link StoreEmitters} For the related-prompts module.
+ *
+ * @internal
+ */
+export const relatedPromptsStoreEmitters = createStoreEmitters(relatedPromptsXStoreModule, {
+  RelatedPromptsRequestUpdated: (_, getters) => getters.request
+});
diff --git a/packages/x-components/src/x-modules/related-prompts/store/getters/request.getter.ts b/packages/x-components/src/x-modules/related-prompts/store/getters/request.getter.ts
new file mode 100644
index 0000000000..ca76032a0b
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/getters/request.getter.ts
@@ -0,0 +1,15 @@
+import { RelatedPromptsXStoreModule } from '../types';
+
+/**
+ * Default implementation for the {@link RelatedPromptsGetters.request} getter.
+ *
+ * @param state - Current {@link https://vuex.vuejs.org/guide/state.html | state} of the related
+ * prompts module.
+ *
+ * @returns The related prompts request to fetch data from the API.
+ *
+ * @public
+ */
+export const request: RelatedPromptsXStoreModule['getters']['request'] = ({ params, query }) => {
+  return query ? { query, extraParams: params } : null;
+};
diff --git a/packages/x-components/src/x-modules/related-prompts/store/index.ts b/packages/x-components/src/x-modules/related-prompts/store/index.ts
new file mode 100644
index 0000000000..5b601e6469
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/index.ts
@@ -0,0 +1,6 @@
+export * from './actions/fetch-and-save-related-prompts.action';
+export * from './actions/fetch-related-prompts.action';
+export { request as relatedPromptRequest } from './getters/request.getter';
+export * from './emitters';
+export * from './module';
+export * from './types';
diff --git a/packages/x-components/src/x-modules/related-prompts/store/module.ts b/packages/x-components/src/x-modules/related-prompts/store/module.ts
new file mode 100644
index 0000000000..91d4a6d614
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/module.ts
@@ -0,0 +1,44 @@
+import { setStatus } from '../../../store/utils/status-store.utils';
+import { setQuery } from '../../../store/utils/query.utils';
+import { RelatedPromptsXStoreModule } from './types';
+import {
+  cancelFetchAndSaveRelatedPrompts,
+  fetchAndSaveRelatedPrompts
+} from './actions/fetch-and-save-related-prompts.action';
+import { fetchRelatedPrompts } from './actions/fetch-related-prompts.action';
+import { request } from './getters/request.getter';
+
+/**
+ * {@link XStoreModule} For the related prompt module.
+ *
+ * @internal
+ */
+export const relatedPromptsXStoreModule: RelatedPromptsXStoreModule = {
+  state: () => ({
+    query: '',
+    relatedPrompts: [],
+    status: 'initial',
+    params: {}
+  }),
+  getters: {
+    request
+  },
+  mutations: {
+    setStatus,
+    setQuery,
+    setParams(state, params) {
+      state.params = params;
+    },
+    setRelatedPromptsProducts(state, products) {
+      state.relatedPrompts = products;
+    },
+    resetRelatedPromptsState(state) {
+      state.relatedPrompts = [];
+    }
+  },
+  actions: {
+    fetchRelatedPrompts,
+    fetchAndSaveRelatedPrompts,
+    cancelFetchAndSaveRelatedPrompts
+  }
+};
diff --git a/packages/x-components/src/x-modules/related-prompts/store/types.ts b/packages/x-components/src/x-modules/related-prompts/store/types.ts
new file mode 100644
index 0000000000..6de258ab1d
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/store/types.ts
@@ -0,0 +1,103 @@
+import { RelatedPrompt, RelatedPromptsRequest } from '@empathyco/x-types';
+import { Dictionary } from '@empathyco/x-utils';
+import { QueryMutations, QueryState } from '../../../store/utils/query.utils';
+import { StatusMutations, StatusState } from '../../../store/utils/status-store.utils';
+import { XActionContext, XStoreModule } from '../../../store';
+
+/**
+ * Related prompts module state.
+ *
+ * @public
+ */
+export interface RelatedPromptsState extends StatusState, QueryState {
+  /** The list of the related-prompts, related to the `query` property of the state. */
+  relatedPrompts: RelatedPrompt[];
+  /** The extra params property of the state. */
+  params: Dictionary<unknown>;
+}
+
+/**
+ * Related prompts module getters.
+ *
+ * @public
+ */
+export interface RelatedPromptsGetters {
+  /**
+   * Request object to retrieve the related prompts using the search adapter, or null if there is
+   * no valid data to conform a valid request.
+   */
+  request: RelatedPromptsRequest | null;
+}
+
+/**
+ * Related prompts module mutations.
+ *
+ * @public
+ */
+export interface RelatedPromptsMutations extends StatusMutations, QueryMutations {
+  /**
+   * Sets the extra params of the module.
+   *
+   * @param params - The new extra params.
+   */
+  setParams(params: Dictionary<unknown>): void;
+  /**
+   * Sets the related prompts of the module.
+   *
+   * @param relatedPrompts - The new related prompts to save to the state.
+   */
+  setRelatedPromptsProducts(products: RelatedPrompt[]): void;
+  /**
+   * Resets the related prompts state.
+   */
+  resetRelatedPromptsState(): void;
+}
+
+/**
+ * Related prompts module actions.
+ *
+ * @public
+ */
+export interface RelatedPromptsActions {
+  /**
+   * Requests a new set of related prompts for the module query, and returns them.
+   *
+   * @param request - The related prompts request.
+   */
+  fetchRelatedPrompts(request: RelatedPromptsRequest | null): RelatedPrompt[] | null;
+  /**
+   * Requests a new set of related prompts and stores them in the module.
+   *
+   * @param request - The related prompts request.
+   */
+  fetchAndSaveRelatedPrompts(request: RelatedPromptsRequest | null): void;
+  /**
+   * Cancels / interrupt {@link RelatedPromptsActions.fetchAndSaveRelatedPrompts}
+   * synchronous promise.
+   */
+  cancelFetchAndSaveRelatedPrompts(): void;
+}
+
+/**
+ * Related prompts store module.
+ *
+ * @public
+ */
+export type RelatedPromptsXStoreModule = XStoreModule<
+  RelatedPromptsState,
+  RelatedPromptsGetters,
+  RelatedPromptsMutations,
+  RelatedPromptsActions
+>;
+
+/**
+ * Alias type for actions context of the {@link RelatedPromptsXStoreModule}.
+ *
+ * @public
+ */
+export type RelatedPromptsActionContext = XActionContext<
+  RelatedPromptsState,
+  RelatedPromptsGetters,
+  RelatedPromptsMutations,
+  RelatedPromptsActions
+>;
diff --git a/packages/x-components/src/x-modules/related-prompts/types.ts b/packages/x-components/src/x-modules/related-prompts/types.ts
new file mode 100644
index 0000000000..3b26690fb2
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/types.ts
@@ -0,0 +1,10 @@
+import { RelatedPrompt } from '@empathyco/x-types';
+import { ListItem } from '../../utils';
+
+/**
+ * Related promts group interface for the RelatedPrompts.
+ */
+export interface RelatedPromptsGroup extends ListItem {
+  modelName: 'RelatedPromptsGroup';
+  relatedPrompts: RelatedPrompt[];
+}
diff --git a/packages/x-components/src/x-modules/related-prompts/wiring.ts b/packages/x-components/src/x-modules/related-prompts/wiring.ts
new file mode 100644
index 0000000000..72758d813f
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/wiring.ts
@@ -0,0 +1,97 @@
+import {
+  namespacedWireCommit,
+  namespacedWireCommitWithoutPayload,
+  namespacedWireDispatch,
+  namespacedWireDispatchWithoutPayload
+} from '../../wiring/namespaced-wires.factory';
+import {
+  NamespacedWireCommit,
+  NamespacedWireCommitWithoutPayload
+} from '../../wiring/namespaced-wiring.types';
+import { createWiring } from '../../wiring/wiring.utils';
+
+/**
+ * `relatedPrompts` {@link XModuleName | XModule name}.
+ */
+const moduleName = 'relatedPrompts';
+
+/**
+ * WireCommit for {@link RelatedPromptsXModule}.
+ */
+const wireCommit: NamespacedWireCommit<typeof moduleName> = namespacedWireCommit(moduleName);
+
+/**
+ * WireCommitWithoutPayload for {@link RelatedPromptsXModule}.
+ */
+const wireCommitWithoutPayload: NamespacedWireCommitWithoutPayload<typeof moduleName> =
+  namespacedWireCommitWithoutPayload(moduleName);
+
+/**
+ * WireDispatch for {@link RelatedPromptsXModule}.
+ */
+const wireDispatch = namespacedWireDispatch(moduleName);
+
+/**
+ * WireDispatchWithoutPayload for {@link RelatedPromptsXModule}.
+ */
+const wireDispatchWithoutPayload = namespacedWireDispatchWithoutPayload(moduleName);
+
+/**
+ * Sets the related prompts state `query`.
+ */
+const setRelatedPromptsQuery = wireCommit('setQuery');
+
+/**
+ * Sets the related prompts state `query` from url params.
+ */
+const setRelatedPromptsQueryFromUrl = wireCommit(
+  'setQuery',
+  ({ eventPayload: { query } }) => query
+);
+
+/**
+ * Sets the related prompts state `params`.
+ */
+const setRelatedPromptsExtraParams = wireCommit('setParams');
+
+/**
+ * Resets the related prompts state.
+ */
+const resetRelatedPromptsStateWire = wireCommitWithoutPayload('resetRelatedPromptsState');
+
+/**
+ * Fetches and saves the related prompts response.
+ */
+const fetchAndSaveRelatedPromptsResponseWire = wireDispatch('fetchAndSaveRelatedPrompts');
+
+/**
+ * Cancels the fetch and save related prompts response.
+ */
+const cancelFetchAndSaveSearchResponseWire = wireDispatchWithoutPayload(
+  'cancelFetchAndSaveRelatedPrompts'
+);
+
+/**
+ * Wiring configuration for the {@link RelatedPromptsXModule | related prompts module}.
+ *
+ * @internal
+ */
+export const relatedPromptsWiring = createWiring({
+  ParamsLoadedFromUrl: {
+    setRelatedPromptsQueryFromUrl
+  },
+  UserAcceptedAQuery: {
+    setRelatedPromptsQuery
+  },
+  UserClearedQuery: {
+    cancelFetchAndSaveSearchResponseWire,
+    resetRelatedPromptsStateWire,
+    setRelatedPromptsQuery
+  },
+  RelatedPromptsRequestUpdated: {
+    fetchAndSaveRelatedPromptsResponseWire
+  },
+  ExtraParamsChanged: {
+    setRelatedPromptsExtraParams
+  }
+});
diff --git a/packages/x-components/src/x-modules/related-prompts/x-module.ts b/packages/x-components/src/x-modules/related-prompts/x-module.ts
new file mode 100644
index 0000000000..8c93988817
--- /dev/null
+++ b/packages/x-components/src/x-modules/related-prompts/x-module.ts
@@ -0,0 +1,28 @@
+import { XPlugin } from '../../plugins/x-plugin';
+import { XModule } from '../x-modules.types';
+import { RelatedPromptsXStoreModule } from './store/types';
+import { relatedPromptsXStoreModule } from './store/module';
+import { relatedPromptsStoreEmitters } from './store/emitters';
+import { relatedPromptsWiring } from './wiring';
+
+/**
+ * RelatedPrompts {@link XModule} alias.
+ *
+ * @public
+ */
+export type RelatedPromptsXModule = XModule<RelatedPromptsXStoreModule>;
+
+/**
+ * Related Prompts {@link XModule} implementation. This module is auto-registered as soon as you
+ * import any component from the `related-prompts` entry point.
+ *
+ * @public
+ */
+export const relatedPromptsXModule: RelatedPromptsXModule = {
+  name: 'relatedPrompts',
+  storeModule: relatedPromptsXStoreModule,
+  storeEmitters: relatedPromptsStoreEmitters,
+  wiring: relatedPromptsWiring
+};
+
+XPlugin.registerXModule(relatedPromptsXModule);
diff --git a/packages/x-components/src/x-modules/x-modules.types.ts b/packages/x-components/src/x-modules/x-modules.types.ts
index 858ec432e5..c9f97a7a1d 100644
--- a/packages/x-components/src/x-modules/x-modules.types.ts
+++ b/packages/x-components/src/x-modules/x-modules.types.ts
@@ -20,6 +20,7 @@ import { SemanticQueriesXModule } from './semantic-queries/x-module';
 import { TaggingXModule } from './tagging';
 import { UrlXModule } from './url';
 import { ExperienceControlsXModule } from './experience-controls/x-module';
+import { RelatedPromptsXModule } from './related-prompts/x-module';
 
 /**
  * Gives each {@link XModule} a name, that can be used to retrieve then its value.
@@ -38,6 +39,7 @@ export interface XModulesTree {
   queriesPreview: QueriesPreviewXModule;
   querySuggestions: QuerySuggestionsXModule;
   recommendations: RecommendationsXModule;
+  relatedPrompts: RelatedPromptsXModule;
   relatedTags: RelatedTagsXModule;
   scroll: ScrollXModule;
   search: SearchXModule;