AiSources Knowledge Base Attribution

inline mode

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

The reactivity system in Vue 3 is based on ES Proxy, which can monitor array changes and dynamic properties compared to Vue 2's Object.defineProperty.

^[1]

In large projects, it is recommended to extract related states into useXxx Hooks for reuse.

^[3]

3 References

1Vue 3 Reactivity Principle95%

2In-depth Understanding of ref and reactive87%

3Vue3 Best Practices Guide.pdf72%

card mode

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

Referenced Sources5

Vue 3 Reactivity Principle

vuejs.org95% Relevance

Vue 3 introduced a reactivity system based on Proxy...

In-depth Understanding of ref and reactive

Juejin87% Relevance

ref is used for primitive types...

Vue3 Best Practices Guide.pdf

Internal Knowledge Base72% Relevance

Chapter 3 Composition API...

badge mode

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

Based on the following document analysis:

The reactivity system of Vue 3 is one of its core features...

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

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'],
  yhUI: { importStyle: true }
})

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>