@empathyco/x-components/docs/API-reference/components/semantic-queries/x-components.semantic-query.md

Empathy X Components

---

title: SemanticQuery

---

# SemanticQuery

This component renders a semantic query. A semantic query is a recommended query
that is similar in its meaning to another one.
It contains the query and the distance, which indicates how similar the query is
compared to the searched query.

## Props

| Name                    | Description                                     | Type                       | Default       |
| ----------------------- | ----------------------------------------------- | -------------------------- | ------------- |
| <code>suggestion</code> | The @empathyco/x-types#SemanticQuery to render. | <code>SemanticQuery</code> | <code></code> |

## Slots

| Name                 | Description            | Bindings<br />(name - type - description)                                                                                                          |
| -------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>default</code> | Semantic Query content | **v-bind** <code>{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}</code> - BaseSuggestion bindings |

## Events

A list of events that the component will emit:

- [`UserSelectedASemanticQuery`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the semantic query button. The event payload is the
  semantic query data.

## See it in action

Here you can see that the semantic query query is rendered.

```vue live
<template>
  <SemanticQuery :suggestion="semanticQuery" />
</template>

<script>
import { SemanticQuery } from '@empathyco/x-components/semantic-queries'

export default {
  name: 'SemanticQueryDemo',
  components: {
    SemanticQuery,
  },
  data() {
    return {
      semanticQuery: {
        modelName: 'SemanticQuery',
        query: 'jacket',
        distance: 2,
      },
    }
  },
}
</script>
```

### Play with the default slot

In this example, we add the distance of the semantic query next to the query.

```vue live
<template>
  <SemanticQuery :suggestion="semanticQuery" #default="{ suggestion, query }">
    <div>Original query: {{ query }}</div>
    <div>Suggested semantic query: {{ suggestion.query }} - {{ suggestion.distance }}</div>
  </SemanticQuery>
</template>

<script>
import { SemanticQuery } from '@empathyco/x-components/semantic-queries'

export default {
  name: 'SemanticQueryDemoDefaultSlot',
  components: {
    SemanticQuery,
  },
  data() {
    return {
      semanticQuery: {
        modelName: 'SemanticQuery',
        query: 'jacket',
        distance: 2,
      },
    }
  },
}
</script>
```