AiSources Knowledge Base Attribution

inline mode

Suitable for embedding below conversation bubbles, hover to preview summary.

card mode

Displays full attribution details, supports maxVisible to control default display count, expendable for more.

badge mode

Minimalist badge, click to pop up side drawer for details, suitable for space-constrained scenarios.

Citation Jump & Highlight

By getting the component instance and calling the scrollToSource(id) method, you can precisely jump from the citation in the main text to the corresponding source item and trigger a highlight micro-animation.

API

Props

Attribute	Type	Default	Description
sources	AiSourceItem[]	[]	Source data list
mode	'inline' | 'card' | 'badge'	'inline'	Display mode
maxVisible	number	5	Default display count
showScore	boolean	true	Whether to show relevance score
showFileType	boolean	true	Whether to show file type icon
themeOverrides	ComponentThemeVars	-	Theme overrides

AiSourceItem

Field	Type	Description
id	string | number	Unique ID (also shown as source number)
title	string	Source title
url	string	Source URL
source	string	Source website/doc name
score	number	Match relevance (0-1)
excerpt	string	Summary/Reference snippet
fileType	'web' | 'pdf' | 'doc' | 'xlsx' | 'code' | string	File type

Events

Event Name	Params	Description
click	(source: AiSourceItem)	Clicked source item
open	(source: AiSourceItem)	Clicked to view original source

Methods

Method Name	Params	Description
scrollToSource	(id: string | number)	Scroll to the specified source item and trigger the highlight

Theme Variables

CSS Variable	Description	Default
--yh-ai-sources-badge-bg	Badge background color	var(--yh-color-primary-light-9)
--yh-ai-sources-badge-color	Badge text color	var(--yh-color-primary)
--yh-ai-sources-card-bg	Card background color	var(--yh-bg-color)
--yh-ai-sources-drawer-width	Side drawer width	380px
--yh-ai-sources-score-high	High relevance color	var(--yh-color-success)
--yh-ai-sources-score-mid	Medium relevance color	var(--yh-color-primary)

<yh-ai-sources
  :sources="sources"
  mode="card"
  :theme-overrides="{
    aiSourcesCardBg: '#f0f9ff',
    aiSourcesDrawerWidth: '460px'
  }"
/>

Nuxt Support

Configuration

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@yh-ui/nuxt']
  // YH-UI CSS is injected by default; only configure yhUI.importStyle when disabling auto styles
})

RAG Retrieval Scene Example

<!-- components/AiReply.vue -->
<script setup lang="ts">
import type { AiSourceItem } from '@yh-ui/components'

const props = defineProps<{
  content: string
  sources?: AiSourceItem[]
>()

const handleOpenSource = (source: AiSourceItem) => {
  // Open original source document
  window.open(source.url, '_blank')
}
</script>

<template>
  <div class="ai-reply">
    <div class="ai-reply__content">{{ content }}</div>
    <!-- Show RAG attribution -->
    <YhAiSources
      v-if="sources && sources.length"
      :sources="sources"
      mode="inline"
      :show-score="true"
      @open="handleOpenSource"
    />
  </div>
</template>

SSR Considerations

The side drawer in badge mode uses <Teleport to="body">, which needs to be used with <ClientOnly> in SSR environments:

<ClientOnly>
  <YhAiSources :sources="sources" mode="badge" />
</ClientOnly>