Source Citation

AI
Transparency

Display source citations with confidence scores, credibility indicators, and formatted references. Inspired by Perplexity's citation pattern for AI-generated content with full transparency.

Preview

Inline citations appear as superscript numbers. Hover or click to see source details.

Artificial intelligence has shown remarkable potential in healthcare applications[1]. Recent implementations of machine learning models have demonstrated significant improvements in diagnostic accuracy[2].

Variants

Different display styles for various contexts

Inline Variant

This is inline text with a citation[1]that appears as a superscript.

Sidebar Variant

1

The Impact of AI on Modern Healthcare

Dr. Sarah Johnson · 2024-01-15

Peer-Reviewed

Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.

Credibility Indicators

Visual indicators for source credibility levels

1

The Impact of AI on Modern Healthcare

Dr. Sarah Johnson · 2024-01-15

Peer-Reviewed

Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.

2

Machine Learning Best Practices

Michael Chen · 2023-12-10

Verified

Implementing proper cross-validation techniques is essential for building robust machine learning models.

3

Internal Engineering Guidelines

Engineering Team · 2024-02-01

Internal Document

All new features must undergo code review and pass automated tests before merging.

4

Community Blog Post on React Patterns

Anonymous Developer · 2024-01-20

Unverified

Using custom hooks can significantly reduce code duplication in React applications.

Citation Formats

Support for APA, MLA, and Chicago citation styles

APA Format

1

The Impact of AI on Modern Healthcare

Dr. Sarah Johnson · 2024-01-15

Peer-Reviewed

Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.

MLA Format

2

The Impact of AI on Modern Healthcare

Dr. Sarah Johnson · 2024-01-15

Peer-Reviewed

Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.

Chicago Format

3

The Impact of AI on Modern Healthcare

Dr. Sarah Johnson · 2024-01-15

Peer-Reviewed

Recent studies show that AI-assisted diagnostics improve accuracy by up to 23% compared to traditional methods.

Props

SourceCitation component API reference

PropTypeDefaultDescription
number*numberCitation number
sourceSourceData{}Source metadata object
variant'inline' | 'sidebar''inline'Display variant
format'APA' | 'MLA' | 'Chicago''APA'Academic citation format
showPreviewbooleantrueShow preview popup on hover (inline variant)
onCopy(citation: string) => voidCallback when citation is copied

SourceData Type

PropTypeDefaultDescription
titlestringTitle of the source
authorstringAuthor name
datestringPublication date (ISO format)
urlstringURL to the source
typestringSource type
credibility'verified' | 'peer_reviewed' | 'internal' | 'standard' | 'unverified'Credibility level
excerptstringBrief excerpt or quote

Usage

Import and implementation example

import { SourceCitation } from '@/blocks/ai-transparency/source-citation'

const source = {
  title: 'The Impact of AI on Modern Healthcare',
  author: 'Dr. Sarah Johnson',
  date: '2024-01-15',
  url: 'https://example.com/ai-healthcare',
  credibility: 'peer_reviewed',
  excerpt: 'Recent studies show that AI-assisted diagnostics...',
}

export default function Example() {
  return (
    <>
      {/* Inline citation within text */}
      <p>
        AI has shown remarkable potential in healthcare
        <SourceCitation
          number={1}
          source={source}
          format="APA"
          onCopy={(citation) => console.log(citation)}
        />
        .
      </p>

      {/* Sidebar variant for reference lists */}
      <div className="space-y-4">
        <h3>References</h3>
        <SourceCitation
          variant="sidebar"
          number={1}
          source={source}
          format="APA"
        />
      </div>
    </>
  )
}

Features

Built-in functionality

  • Academic citation formats: Automatically formats in APA, MLA, or Chicago style
  • Credibility indicators: Color-coded badges: verified, peer-reviewed, internal, standard, unverified
  • Source preview: Hover over inline citations to see title, author, excerpt
  • One-click copy: Copy formatted citation to clipboard
  • External links: View Source button opens source URL in new tab
  • Inline and sidebar variants: Superscript for text, card for reference lists
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Inline citation has role="button" and aria-labeltabIndex={0} for keyboard focusExternal links have rel="noopener noreferrer"

Keyboard Navigation

KeyAction
TabFocus citation button
Enter / SpaceToggle citation preview popup

Notes

  • Credibility level shown in text, not just color
  • Author and date displayed in readable format
  • Copy button provides visual feedback on success
  • Preview popup accessible on hover and click