Source Explorer

A dedicated space to browse, filter and open every source behind an answer. The same data-driven content renders as a side panel, an inline list, or a modal — with confidence meters, verification badges, a featured detail panel and a metadata table.

Loading demo: source-explorer-real-world

Installation

npx sdaia-ui@latest add source-explorer

Usage

import { SourceExplorer } from "sdaia-ui"

1<SourceExplorer
2  variant="side-panel"
3  title="Sources"
4  verified
5  subtitle="8 sources used · 6 verified"
6  filters={["All types", "PDF", "Web", "Internal"]}
7  sources={SOURCES}
8  detail={DETAIL}
9  metadata={METADATA}
10/>

Examples

Side panel

A docked panel beside the conversation — full source list, detail and metadata.

Loading demo: source-explorer-side-panel

Inline

A compact strip of source chips embedded in the message flow.

Loading demo: source-explorer-inline

A focused two-column overlay for deeper exploration.

Loading demo: source-explorer-modal

Brand

High-emphasis, brand-coloured surface.

Loading demo: source-explorer-brand

Outline

Bordered, transparent fill.

Loading demo: source-explorer-outline

API Reference

Prop	Type	Default	Required
variant	'side-panel' \| 'inline' \| 'modal'	'side-panel'	optional
style	'neutral' \| 'brand' \| 'outline'	'neutral'	optional
sources	SourceExplorerItem[]	[]	optional
title	ReactNode	'Sources'	optional
count	number	—	optional
verified	boolean	false	optional
subtitle	ReactNode	—	optional
filters	string[]	—	optional
detail	SourceExplorerDetail	—	optional
metadata	SourceExplorerMetaRow[]	—	optional
moreCount	number	—	optional
primaryActionLabel	ReactNode	'View all sources'	optional
footerNote	ReactNode	—	optional
onClose	(e) => void	—	optional
dir	'ltr' \| 'rtl'	'ltr'	optional