InlineCitation
Inline citation badges that open a card listing sources (with carousel for several) on hover, click or Enter, so keyboard users can reach every source.
import { InlineCitation } from "@cynco-labs/ui/ai";Example
import {
InlineCitation,
InlineCitationCard,
InlineCitationCardBody,
InlineCitationCardTrigger,
InlineCitationSource,
InlineCitationText,
} from "@cynco-labs/ui/ai";
export default function InlineCitationDemo() {
return (
<p className="text-body max-w-[520px]">
{"SST-registered businesses must issue e-invoices through MyInvois "}
<InlineCitation>
<InlineCitationText>from their phase start date</InlineCitationText>
<InlineCitationCard defaultOpen>
<InlineCitationCardTrigger sources={["https://sdk.myinvois.hasil.gov.my"]} />
<InlineCitationCardBody>
<InlineCitationSource
title="MyInvois e-Invoice guideline"
url="https://sdk.myinvois.hasil.gov.my"
description="Phases, thresholds and what an e-invoice must contain."
/>
</InlineCitationCardBody>
</InlineCitationCard>
</InlineCitation>
.
</p>
);
}Use
Citing sources inside assistant text.
Props
InlineCitationText, InlineCitationCard › InlineCitationCardTrigger sources, InlineCitationCardBody › InlineCitationSource (title, url, description) or the carousel parts, InlineCitationQuote.