@empathyco/x-components
Version:
Empathy X Components
67 lines (49 loc) • 2 kB
Markdown
---
title: RelatedPrompt
---
# RelatedPrompt
This component shows a suggested related prompt.
## Props
| Name | Description | Type | Default |
| -------------------------- | -------------------------------------------- | -------------------------- | ------------------ |
| <code>relatedPrompt</code> | The related prompt to render. | <code>RelatedPrompt</code> | <code></code> |
| <code>selected</code> | Indicates if the related prompt is selected. | <code>boolean</code> | <code>false</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| ----------------------------------------- | ---------------------------------------------------- | ----------------------------------------- |
| <code>related-prompt-extra-content</code> | The slot to render related prompt extra information. | |
## See it in action
### Basic usage
```vue live
<template>
<RelatedPrompt :relatedPrompt="relatedPrompt" />
</template>
<script setup>
import { RelatedPrompt } from "@empathyco/x-components/related-prompts";
import { ref } from "vue";
const relatedPrompt = ref({
suggestionText: "Try shoes",
suggestionImageUrl: "https://via.placeholder.com/56",
nextQueries: ["shoes"],
});
</script>
```
### Customizing the extra content slot
```vue live
<template>
<RelatedPrompt :relatedPrompt="relatedPrompt">
<template #related-prompt-extra-content="{ relatedPrompt }">
<span>Extra: {{ relatedPrompt.suggestionText }}</span>
</template>
</RelatedPrompt>
</template>
<script setup>
import { RelatedPrompt } from "@empathyco/x-components/related-prompts";
import { ref } from "vue";
const relatedPrompt = ref({
suggestionText: "Try bags",
suggestionImageUrl: "",
nextQueries: ["bags"],
});
</script>
```