---

title: AiOverview

---

# AiOverview

## Props

| Name                                       | Description | Type                 | Default                                   |
| ------------------------------------------ | ----------- | -------------------- | ----------------------------------------- |
| <code>title</code>                         |             | <code>string</code>  | <code></code>                             |
| <code>titleLoading</code>                  |             | <code>string</code>  | <code>'Generating with Empathy AI'</code> |
| <code>autoExpandInSearchNoResults</code>   |             | <code>boolean</code> | <code>true</code>                         |
| <code>contentClasses</code>                |             | <code>string</code>  | <code></code>                             |
| <code>slidingPanelsClasses</code>          |             | <code>string</code>  | <code></code>                             |
| <code>slidingPanelContainersClasses</code> |             | <code>string</code>  | <code></code>                             |
| <code>slidingPanelButtonsClasses</code>    |             | <code>string</code>  | <code></code>                             |

## Slots

| Name                                     | Description            | Bindings<br />(name - type - description) |
| ---------------------------------------- | ---------------------- | ----------------------------------------- |
| <code>title-loading</code>               |                        | None                                      |
| <code>extra-content</code>               |                        | None                                      |
| <code>sliding-panel</code>               |                        |                                           |
| <code>sliding-panels-addons</code>       |                        |                                           |
| <code>sliding-panels-left-button</code>  |                        | None                                      |
| <code>sliding-panels-right-button</code> |                        | None                                      |
| <code>result</code>                      | (required) result card |                                           |
| <code>suggestions-extra-content</code>   |                        | None                                      |

## AI Overview Examples

The `ai-overview` component provides an AI-generated summary and suggestions for queries.

### Basic usage

```vue
<template>
  <AiOverview
    :title="'AI Overview'"
    :title-loading="'Generating with Empathy AI'"
    :expand-text="'Show more'"
    :collapse-text="'Show less'"
    :content-classes="'my-content-class'"
    :sliding-panels-classes="'my-sliding-panel-class'"
    :sliding-panel-containers-classes="'my-sliding-panel-container-class'"
    :sliding-panel-buttons-classes="'my-sliding-panel-button-class'"
  >
    <template #result="{ result }">
      <ResultCard :result="result" />
    </template>
  </AiOverview>
</template>

<script setup>
import AiOverview from "@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue";
import ResultCard from "./ResultCard.vue";
</script>
```

### Customizing slots

You can customize the loading title, extra content, and sliding panel slots:

```vue
<template>
  <AiOverview
    :title="'AI Overview'"
    :title-loading="'Loading... Please wait'"
    :expand-text="'Show more'"
    :collapse-text="'Show less'"
  >
    <template #title-loading>
      <span>Custom loading title...</span>
    </template>
    <template #extra-content>
      <div>Extra content below the main overview</div>
    </template>
    <template #sliding-panels-addons="{ arrivedState }">
      <span v-if="arrivedState.left">Left end reached</span>
      <span v-if="arrivedState.right">Right end reached</span>
    </template>
    <template #result="{ result }">
      <ResultCard :result="result" />
    </template>
  </AiOverview>
</template>

<script setup>
import AiOverview from "@empathyco/x-components/js/x-modules/ai/components/ai-overview.vue";
import ResultCard from "./ResultCard.vue";
</script>
```