@empathyco/x-components/docs/API-reference/components/related-prompts/x-components.related-prompts-list.md

Empathy X Components

---

title: RelatedPromptsList

---

# 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                |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------- | ---------------------- |
| <code>animation</code>                 | Animation component that will be used to animate the related prompts groups.                                           | <code>AnimationProp</code> | <code>'ul'</code>      |
| <code>offset</code>                    | The first index to insert a group of related prompts at.                                                               | <code>number</code>        | <code>24</code>        |
| <code>frequency</code>                 | The items cycle size to keep inserting related prompts groups at.                                                      | <code>number</code>        | <code>24</code>        |
| <code>maxRelatedPromptsPerGroup</code> | The maximum amount of related prompts to add in a single group.                                                        | <code>number</code>        | <code>4</code>         |
| <code>maxGroups</code>                 | The maximum number of groups to insert into the injected list items list.                                              | <code>number</code>        | <code>undefined</code> |
| <code>showOnlyAfterOffset</code>       | Determines if a group is added to the injected items list in case the number<br />of items is smaller than the offset. | <code>boolean</code>       | <code>false</code>     |

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

```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 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`).

```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 the first related prompts

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

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

### Customize the component layout

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

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