AI Response with Cited Sources

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/chat/chat6.tsx instead.

Usage

The file also exports chat6Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Chat6, chat6Demo } from "@/components/blocks/chat/chat6";

export default function Page() {
  return <Chat6 {...chat6Demo} />;
}

Props

Types

export interface ResponsePart {
  text: string;
  citation?: number;
}

export interface CitedSource {
  id: string;
  title: string;
  url: string;
  snippet: string;
}

Behavior notes

• Citation markers are real, interactive buttons: clicking one sets an `activeCitation` useState and highlights the matching source row (border-primary + muted background), rather than being purely presentational.
• Each source's preview snippet expands/collapses independently via a `Set<string>` of expanded ids in useState, with a real `aria-expanded` toggle button.
• Favicons are skipped in favor of a plain lucide-react Globe icon per source, so nothing depends on fetching external favicon images.
• No actual citation-to-answer scrolling or real search happens, this is a static demo dataset.