Source cards

import { type Source, SourceCards } from "@oration/canon/components/ai/source-cards";import { SegmentedControl } from "@oration/canon/components/segmented-control";import { cn } from "@oration/canon/lib/utils";import * as React from "react";export function Layouts() {    const [layout, setLayout] = React.useState<"row" | "grid" | "list">("row");    const sources: Source[] = [        {            id: "kb-runs",            kind: "doc",            title: "Payment run schedule, Q4",            snippet:                "ACH runs every Tuesday and Friday. Wires release the same business day before 2 PM CT.",            meta: "Knowledge base",            score: 0.94,        },        {            id: "kb-cutoff",            kind: "doc",            title: "Approval cutoffs",            snippet:                "Invoices approved by 5:00 PM CT the day before a run are included in it.",            meta: "Payments playbook",            score: 0.9,        },        {            id: "vendor-northwind",            kind: "record",            title: "Northwind Freight vendor record",            snippet:                "Paid by ACH. Terms net 30. Remittance to ar@northwindfreight.example.",            meta: "Supplier record",            score: 0.86,        },        {            id: "call-sep21",            kind: "transcript",            title: "Call with Northwind Freight",            snippet: "“If it's approved today, does it make Tuesday's run?”",            meta: "Call on Sep 21",            score: 0.78,        },    ];    return (        <div className="flex w-full flex-col gap-4">            <SegmentedControl                label="Layout"                value={layout}                onValueChange={setLayout}                options={[                    { value: "row", label: "Row" },                    { value: "grid", label: "Grid" },                    { value: "list", label: "List" },                ]}                className="self-start"            />            <div className={cn("w-full", layout === "list" && "max-w-sm")}>                <SourceCards sources={sources} layout={layout} />            </div>        </div>    );}

import { type Source, SourceCards } from "@oration/canon/components/ai/source-cards";export function Kinds() {    const sources: Source[] = [        {            id: "k-doc",            kind: "doc",            title: "Remittance advice FAQ",            snippet:                "Discounts appear as a separate line on the remittance advice, not on the payment itself.",            meta: "Knowledge base",        },        {            id: "k-url",            kind: "url",            title: "ACH returns and reason codes",            snippet:                "R01 means insufficient funds; R03 means no account or unable to locate the account.",            href: "https://example.com/ach-return-codes",        },        {            id: "k-record",            kind: "record",            title: "Halcyon terms",            snippet:                "Payment terms 2/10 net 30. Early payment enrolled March 2026.",            meta: "Supplier record",        },        {            id: "k-transcript",            kind: "transcript",            title: "Call with Halcyon accounts receivable",            snippet:                "“The $412.50 short on INV-20931, is that the early-pay discount?”",            meta: "Call on Sep 24",        },    ];    return (        <div className="w-full max-w-sm">            <SourceCards sources={sources} layout="list" title="Context used" />        </div>    );}

import { Citation, type Source, SourceCards } from "@oration/canon/components/ai/source-cards";export function Citations() {    const payment: Source = {        id: "c-pmt",        kind: "record",        title: "Payment PMT-58213",        snippet:            "ACH, $20,212.50, sent Sep 25. Discount applied: $412.50 (2/10 net 30).",        meta: "ERP payment",        score: 0.96,    };    const terms: Source = {        id: "c-terms",        kind: "record",        title: "Halcyon terms",        snippet:            "Payment terms 2/10 net 30. Early payment enrolled March 2026.",        meta: "Supplier record",        score: 0.89,    };    return (        <div className="flex w-full max-w-lg flex-col gap-4">            <p className="text-sm leading-relaxed text-pretty text-foreground">                Halcyon was paid $20,212.50 on September 25                <Citation index={1} source={payment} />, which is $412.50 less                than the invoice because of the 2% early-payment discount on                their terms                <Citation index={2} source={terms} />. A third marker with no                source falls back to plain text                <Citation index={3} />.            </p>            <SourceCards sources={[payment, terms]} title={null} />        </div>    );}

import { type Source, SourceCard } from "@oration/canon/components/ai/source-cards";import { Button } from "@oration/canon/components/button";import { toast } from "@oration/canon/components/toast";export function SingleCard() {    const source: Source = {        id: "pinned",        kind: "doc",        title: "Bank change verification",        snippet:            "Bank changes need a verified callback to the number on file before the change is applied. Never use a number the caller gives you.",        meta: "Payment security",    };    return (        <div className="flex w-full max-w-md flex-col gap-2 rounded-xl bg-card p-4 text-left shadow-border">            <div className="flex items-center justify-between gap-2">                <h3 className="text-13 font-medium text-foreground">                    Reply to Jordan Lee                </h3>                <Button                    type="button"                    variant="ghost"                    size="xs"                    onClick={() =>                        toast.add({                            title: "Source unpinned",                            description: "Bank change verification",                        })                    }                >                    Unpin                </Button>            </div>            <p className="text-13 text-muted-foreground">                Pinned for this reply            </p>            <SourceCard source={source} />        </div>    );}

import { type Source, SourceCards } from "@oration/canon/components/ai/source-cards";export function AssistPanel() {    const knowledge: Source[] = [        {            id: "kb-ach-trace",            kind: "doc",            title: "Tracing an ACH the supplier hasn't received",            snippet: "Share the 15-digit trace number and the settlement date.",            meta: "Payments playbook",            score: 0.92,        },        {            id: "kb-remit",            kind: "doc",            title: "Resending a remittance advice",            snippet:                "Remittances can be resent to any address on the supplier record.",            meta: "Remittances",            score: 0.87,        },        {            id: "kb-returns",            kind: "doc",            title: "When an ACH is returned",            snippet:                "Returned payments reissue on the next run once the bank details are confirmed.",            meta: "Payment runs",            score: 0.77,        },    ];    return (        <aside className="flex w-80 flex-col gap-4 rounded-xl bg-card p-4 text-left shadow-border">            <div className="flex flex-col gap-0.5">                <h3 className="text-13 font-medium text-foreground">Assist</h3>                <p className="text-xs text-muted-foreground">                    Orchard Street, where is my payment                </p>            </div>            <SourceCards                sources={knowledge}                layout="list"                title="From the knowledge base"            />        </aside>    );}

import { type Source, SourceCard } from "@oration/canon/components/ai/source-cards";export function StatesMatrix() {    const source: Source = {        id: "st",        kind: "doc",        title: "Approval cutoffs",        snippet:            "Invoices approved by 5:00 PM CT the day before a run are included in it.",        meta: "Payments playbook",        score: 0.9,    };    const cells = [        { label: "Rest", className: "" },        {            label: "Linked",            className: "bg-muted shadow-[inset_0_0_0_1px_var(--border-strong)]",        },        { label: "Hover", className: "bg-muted" },        { label: "Focus visible", className: "ring-3 ring-ring/40" },    ];    return (        <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">            {cells.map((cell) => (                <div key={cell.label} className="flex min-w-0 flex-col gap-2">                    <span className="text-xs text-muted-foreground">                        {cell.label}                    </span>                    <SourceCard                        source={source}                        index={1}                        className={cell.className}                    />                </div>            ))}        </div>    );}