AiOverview

Props

Name	Description	Type	Default
title		string
titleLoading		string	'Generating with Empathy AI'
expandText		string	'Show more'
collapseText		string	'Show less'
autoExpandInSearchNoResults		boolean	true
contentClasses		string
slidingPanelsClasses		string
slidingPanelContainersClasses		string
slidingPanelButtonsClasses		string

Slots

Name	Description	Bindings (name - type - description)
title-loading		None
extra-content		None
sliding-panel
sliding-panels-addons
sliding-panels-left-button		None
sliding-panels-right-button		None
result	(required) result card
suggestions-extra-content		None
cta-button		None

AI Overview Examples

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

Basic usage

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

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