---

title: Empathize

---

# Empathize

Component containing the empathize. It has a required slot to define its content.

## Props

| Name                                    | Description                                                                                | Type                       | Default                                                                                                                                              |
| --------------------------------------- | ------------------------------------------------------------------------------------------ | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>eventsToOpenEmpathize</code>      | Array of XEvent to open the empathize.                                                     | <code>XEvent[]</code>      | <code>() => ['UserFocusedSearchBox', 'UserIsTypingAQuery', 'UserClickedSearchBox']</code>                                                            |
| <code>eventsToCloseEmpathize</code>     | Array of XEvent to close the empathize.                                                    | <code>XEvent[]</code>      | <code>() => [<br /> 'UserClosedEmpathize',<br /> 'UserSelectedASuggestion',<br /> 'UserPressedEnterKey',<br /> 'UserBlurredSearchBox',<br />]</code> |
| <code>animation</code>                  | Animation component that will be used to animate the empathize.                            | <code>AnimationProp</code> | <code>() => NoAnimation</code>                                                                                                                       |
| <code>hasContent</code>                 | Whether the empathize has content or not. As it is only known in the client, it is a prop. | <code>boolean</code>       | <code>true</code>                                                                                                                                    |
| <code>searchAndCloseOnNoContent</code>  | Fallback flag to trigger a search and close the empathize when has no-content.             | <code>boolean</code>       | <code>false</code>                                                                                                                                   |
| <code>searchAndCloseDebounceInMs</code> | Debounce time in milliseconds to search and close the empathize when has no-content.       | <code>number</code>        | <code>1000</code>                                                                                                                                    |

## Slots

| Name                 | Description                        | Bindings<br />(name - type - description) |
| -------------------- | ---------------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Modal container content | None                                      |

## Events

A list of events that the component will emit:

- [`EmpathizeOpened`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after receiving an event to change the state `isOpen` to `true` and `hasContent` to `true`.
  The event payload is undefined and can have a metadata with the module and the element that emitted it.
- [`EmpathizeClosed`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after receiving an event to change the state `isOpen` to `false` and `hasContent` to `true`.
  The event payload is undefined and can have a metadata with the module and the element that emitted it.

## Examples

This component will listen to the configured events in `eventsToOpenEmpathize` and
`eventsToCloseEmpathize` props and open/close itself accordingly. By default, those props values
are:

- Open: `UserFocusedSearchBox`, `UserIsTypingAQuery`, `UserClickedSearchBox`
- Close: `UserClosedEmpathize`, `UserSelectedASuggestion`, `UserPressedEnterKey`, `UserBlurredSearchBox`

### Basic example

The component rendering the query suggestions, popular searches and history queries with keyboard
navigation.

```vue
<template>
  <Empathize>
    <BaseKeyboardNavigation>
      <QuerySuggestions />
      <PopularSearches />
      <HistoryQueries />
    </BaseKeyboardNavigation>
  </Empathize>
</template>

<script setup>
import Empathize from "@empathyco/x-components/js/x-modules/empathize/components/empathize.vue";
import BaseKeyboardNavigation from "@empathyco/x-components/js/components/base-keyboard-navigation.vue";
import QuerySuggestions from "@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue";
import PopularSearches from "@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue";
import HistoryQueries from "@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue";
</script>
```

Defining custom values for the events to open and close the Empathize. For example, opening it when
the search box loses the focus and closing it when the search box receives the focus:

```vue
<template>
  <Empathize
    :events-to-open-empathize="['UserBlurredSearchBox']"
    :events-to-close-empathize="['UserFocusedSearchBox']"
  >
    Please, type a query in the Search Box.
  </Empathize>
</template>

<script setup>
import Empathize from "@empathyco/x-components/js/x-modules/empathize/components/empathize.vue";
</script>
```

An animation can be used for the opening and closing using the `animation` prop. The animation must
be a component with a `Transition` and a slot inside:

```vue
<template>
  <Empathize :animation="collapseFromTop">
    <PopularSearches />
  </Empathize>
</template>

<script setup>
import Empathize from "@empathyco/x-components/js/x-modules/empathize/components/empathize.vue";
import PopularSearches from "@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue";
import CollapseFromTop from "./collapseFromTop.vue";
const animation = CollapseFromTop;
</script>
```

### Advanced example

The component rendering the query suggestions, popular searches and history queries with keyboard
navigation. It also configures `searchAndCloseOnNoContent` to trigger a search and close the empathize
when it has no content as fallback behaviour. To do that, `hasContent` prop must be reactive to know
if the empathize has content or not. It also configures `searchAndCloseDebounceInMs` to 500ms as debounce time to search and close the empathize when it has no content.

```vue
<template>
  <Empathize
    :animation="empathizeAnimation"
    :events-to-close-empathize="empathizeCloseEvents"
    :has-content="showEmpathize"
    :search-and-close-debounce-in-ms="500"
    search-and-close-on-no-content
  >
    <BaseKeyboardNavigation>
      <QuerySuggestions />
      <PopularSearches />
      <HistoryQueries />
    </BaseKeyboardNavigation>
  </Empathize>
</template>

<script setup>
import Empathize from "@empathyco/x-components/js/x-modules/empathize/components/empathize.vue";
import BaseKeyboardNavigation from "@empathyco/x-components/js/components/base-keyboard-navigation.vue";
import QuerySuggestions from "@empathyco/x-components/js/x-modules/query-suggestions/components/query-suggestions.vue";
import PopularSearches from "@empathyco/x-components/js/x-modules/popular-searches/components/popular-searches.vue";
import HistoryQueries from "@empathyco/x-components/js/x-modules/history-queries/components/history-queries.vue";
import CollapseFromTop from "./collapseFromTop.vue";
import { ref } from "vue";
const empathizeAnimation = CollapseFromTop;
const empathizeCloseEvents = ["UserClosedEmpathize", "UserSelectedASuggestion"];
const showEmpathize = ref(true);
</script>
```