A workspace app's help assistant answers a data-residency question from its docs, status page, trust center and changelog. A community thread it read but didn't cite sits last, with a monogram.
registry/demos/footnote-demo.tsx
"use client";
import { Footnote, type FootnoteClaim, type FootnoteSource } from "@/components/ui/footnote";
const sources: FootnoteSource[] = [
{
id: "docs",
site: "docs.plinth.so",
title: "Data residency: moving a workspace",
href: "#data-residency",
snippet:
"Owners of Business and Enterprise workspaces can move their data to our Frankfurt region. Start the move from Settings → Data residency and pick a window that suits your team.",
quote: "move their data to our Frankfurt region",
},
{
id: "status",
site: "status.plinth.so",
title: "Scheduled maintenance: region moves",
href: "#region-moves",
snippet:
"While a move runs, the workspace stays readable but can't be edited. Plan for about 20 minutes for every 10 GB of files.",
quote: "about 20 minutes for every 10 GB of files",
},
{
id: "trust",
site: "trust.plinth.so",
title: "Audit log retention",
href: "#audit-logs",
snippet:
"When a workspace changes region, audit events from the last 90 days move with it. Older events stay where they were recorded until they expire.",
quote: "Older events stay where they were recorded",
},
{
id: "changelog",
site: "plinth.so/changelog",
title: "5.2: EU data residency is generally available",
href: "#changelog-5-2",
snippet: "After six months in beta, hosting in Frankfurt is open to every Business and Enterprise workspace.",
quote: "open to every Business and Enterprise workspace",
},
{
id: "community",
site: "community.plinth.so",
title: "Moving a 40 GB workspace: how long did yours take?",
href: "#community-thread",
snippet: "Ours took a little under an hour on a Sunday morning. Search was back before the move finished.",
},
];
const answer: FootnoteClaim[] = [
{
text: "Yes. Workspaces on the Business and Enterprise plans can move to Frankfurt from Settings → Data residency.",
cite: "docs",
},
{
text: "The move runs in a window you pick, and the workspace is read-only for about 20 minutes per 10 GB of files.",
cite: "status",
},
{
text: "Pages, files and search move with it; audit logs older than 90 days stay in the US until they expire.",
cite: "trust",
},
{ text: "EU hosting has been generally available since version 5.2.", cite: "changelog" },
];
export function FootnoteDemo() {
return (
<Footnote
question="Can we move our workspace to the EU region?"
answer={answer}
sources={sources}
read={11}
avatar={<PlinthMark className="size-3.5" />}
className="max-w-lg"
/>
);
}
function PlinthMark({ className }: { className?: string }) {
return (
<svg viewBox="0 0 16 16" className={className} aria-hidden>
<path d="M2 12.5h12V14H2zM4 8.5h8V11H4zM6 3h4v4H6z" fill="currentColor" />
</svg>
);
}
Live preview, examples and props: https://keyframeui.com/components/footnote#footnote-demo