Source Citation Rail

"use client";

import * as React from "react";
import {
  SourceCitationRail,
  CitationMarker,
  type CitationSource,
} from "@/components/ui/source-citation-rail";

const sources: CitationSource[] = [
  {
    id: "s1",
    index: 1,
    title: "Streaming responses guide",
    domain: "docs.example.dev",
    url: "https://example.dev/streaming",
    type: "docs",
    excerpt:
      "Flush tokens to the client as soon as they are produced instead of buffering the whole response, and apply backpressure when the read buffer fills.",
    verified: true,
  },
  {
    id: "s2",
    index: 2,
    title: "Trust in cited AI answers",
    domain: "research.example.org",
    url: "https://example.org/citations-study",
    type: "paper",
    excerpt:
      "In a field study, readers trusted answers more when inline markers were clearly tied to a source list they could open and inspect.",
    author: "J. Alvarez",
    publishedAt: "2024-03-12",
  },
];

export default function SourceCitationRailDemo() {
  const [activeId, setActiveId] = React.useState<string | null>(null);

  return (
    <div className="w-full max-w-3xl">
      <SourceCitationRail
        sources={sources}
        activeSourceId={activeId}
        onActiveSourceChange={setActiveId}
        layout="rail"
      >
        <article className="text-sm leading-relaxed">
          <h2 className="mb-2 text-base font-semibold">
            How should a product stream AI answers with low latency?
          </h2>
          <p>
            Flush tokens to the client as soon as they are produced instead of
            buffering the whole response
            <CitationMarker source="s1" />. Readers trusted answers more when
            inline markers were clearly tied to a source list they could open
            and inspect <CitationMarker source="s2" />.
          </p>
        </article>
      </SourceCitationRail>
    </div>
  );
}