feat: create related prompts module (#1642)

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';

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}`);
+}

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()
   }
 };
 

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;
   }

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';

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,13 +630,16 @@
       NextQueriesList,
       NextQuery,
       NextQueryPreview,
+      RelatedPromptsList,
+      RelatedPrompt,
       OpenMainModal,
       PartialQueryButton,
       PartialResultsList,
       PredictiveLayer,
       PreselectedFilters,
       Promoted,
       PromotedsList,
+      QueryPreview,
       QueryPreviewButton,
       QueryPreviewList,
       Recommendations,
@@ -641,6 +705,9 @@
           nextQueriesList: {
             showOnlyAfterOffset: true
           },
+          relatedPromptsList: {
+            showOnlyAfterOffset: true
+          },
           adapter: {
             useE2EAdapter: false
           }

packages/x-components/src/views/home/types.ts

@@ -18,6 +18,9 @@ export interface HomeControls {
   nextQueriesList: {
     showOnlyAfterOffset: boolean;
   };
+  relatedPromptsList: {
+    showOnlyAfterOffset: boolean;
+  };
   adapter: {
     useE2EAdapter: boolean;
   };

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.

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';