2 min read

RelatedPromptsList

Component that inserts groups of related prompts in different positions of the injected search items list, based on the provided configuration.

Props

Name	Description	Type	Default
`animation`	Animation component that will be used to animate the related prompts groups.	`AnimationProp`	`'ul'`
`offset`	The first index to insert a group of related prompts at.	`number`	`24`
`frequency`	The items cycle size to keep inserting related prompts groups at.	`number`	`24`
`maxRelatedPromptsPerGroup`	The maximum amount of related prompts to add in a single group.	`number`	`4`
`maxGroups`	The maximum number of groups to insert into the injected list items list.	`number`	`undefined`
`showOnlyAfterOffset`	Determines if a group is added to the injected items list in case the number of items is smaller than the offset.	`boolean`	`false`

Events

This component emits no events.

See it in action

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.

Play with the position in the index

Play with the offset and frequency props, indicating the indices for inserting groups of related prompts. The following example shows that only three groups of related prompts can be added, as the maxGroups prop is set to 3. The first group of related prompts is inserted at index 48 using the offset prop. Since the frequency prop is set to 72, the second and third groups are inserted at indices 120 and 192, respectively. Each group can contain up to 6 related prompts (maxRelatedPromptsPerGroup).

By default, the first group of related prompts is inserted when the total number of results is smaller than the offset. You can deactivate this behavior by setting the showOnlyAfterOffset prop to true.

In the following example, related prompts will be displayed regardless of the number of results being over 48.

Customize the component layout

By default, this component shows the id of each search item, both the injected, and for the groups of related prompts generated. But it's common case to customize it using a layout component such as the BaseGrid component. To do so, you can use the default slot as follows:

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