4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:T767,"use client"; import { ClassifyConsensusBlock } from "@/components/viewers/classify/classify-consensus-block"; import type { ViewerSource } from "@/components/ui/file-viewer"; import type { ClassifyResult } from "@/components/viewers/lib/classify-types"; const LOAN_APPLICATION_SOURCE: ViewerSource = { kind: "url", url: "/samples/loan-application.pdf", fileName: "loan-application.pdf", }; const CLASSIFY_RESULT: ClassifyResult = { category: "Loan Application", candidates: [ { category: "Loan Application", description: "Uniform Residential Loan Application Form 1003.", }, { category: "Tax Form", description: "Structured form, but no IRS tax identifiers.", }, { category: "Bank Statement", description: "Financial fields are present, but no transactions.", }, ], reasoning: "The document is a Uniform Residential Loan Application (Form 1003): it collects borrower, employment, and property details for a mortgage request.", consensus: { likelihoods: 0.67, choices: [ { category: "Loan Application", reasoning: "The document is a Form 1003 loan application with borrower, employment, and property sections.", }, { category: "Loan Application", reasoning: "The mortgage application fields and declarations match a loan application packet.", }, { category: "Tax Form", reasoning: "The form is structured and financial, but it does not contain transaction rows or statement periods.", }, ], }, }; export function ClassifyConsensusViewerBlock() { return ( ); } 53:T1acb,"use client"; import { CheckCircle2 } from "lucide-react"; import { cn } from "@/lib/utils"; import { FileViewer, FileViewerContent, FileViewerControls, FileViewerHeader, FileViewerInset, FileViewerProvider, FileViewerSidebar, FileViewerSidebarContent, FileViewerSidebarTrigger, FileViewerTitle, FileViewerViewport, type ViewerSource, } from "@/components/ui/file-viewer"; import { PdfViewerPages, PdfViewerProvider } from "@/components/ui/pdf-viewer"; import { ClassifierViewerProvider } from "@/components/viewers/classify/classifier-viewer"; import type { ClassifyCandidate, ClassifyResult, } from "@/components/viewers/lib/classify-types"; export type ClassifyConsensusBlockProps = { source: ViewerSource; result: ClassifyResult; sidebarWidth?: string; sidebarLabel?: string; minHeightClassName?: string; }; export function ClassifyConsensusBlock({ source, result, sidebarWidth = "18rem", sidebarLabel = "Classification consensus", minHeightClassName = "min-h-[680px]", }: ClassifyConsensusBlockProps) { return (

); } function ClassifyConsensusSidebar({ result, width, label, }: { result: ClassifyResult; width: string; label: string; }) { return ( ); } function ClassifyConsensusLegend({ result }: { result: ClassifyResult }) { const candidates = normalizeClassifyCandidates({ candidates: result.candidates ?? [], category: result.category, }); const consensus = result.consensus; const likelihood = typeof consensus?.likelihoods === "number" ? consensus.likelihoods : null; if (candidates.length === 0) return null; return (

{candidates.map((candidate) => { const isActive = candidate.category === result.category; return (

{isActive ? (

); })}

); } function ClassifyConsensusDetails({ result, }: { result: ClassifyResult; }) { const consensus = result.consensus; const choices = consensus?.choices ?? []; return (

{choices.length > 0 ? (

Votes

{choices.map((choice, index) => { const isWinner = choice.category === result.category; return (

Vote {index + 1} {choice.category}

{choice.reasoning ? (

{choice.reasoning}

) : null}

); })}

) : null}

); } function formatPercent(value: number) { return `${Math.round(value * 100)}%`; } function getConfidenceClassName(value: number) { if (value >= 0.9) return "bg-emerald-500/12 text-emerald-700"; if (value >= 0.67) return "bg-amber-500/12 text-amber-700"; return "bg-destructive/10 text-destructive"; } function normalizeClassifyCandidates({ candidates, category, }: { candidates: readonly ClassifyCandidate[]; category: string; }) { if (candidates.length === 0) return [{ category }]; if (candidates.some((candidate) => candidate.category === category)) { return candidates; } return [{ category }, ...candidates]; } 54:T2100,"use client"; import * as React from "react"; import { CheckCircle2, Loader2, Tags } from "lucide-react"; import { cn } from "@/lib/utils"; import { ViewerBody, ViewerHeader, ViewerRoot, ViewerSurface, } from "@/components/ui/viewer"; import type { ClassifyCandidate, ClassifyResult, } from "@/components/viewers/lib/classify-types"; type ClassifierViewerContextValue = { category: string | null; candidates: readonly ClassifyCandidate[]; emptyDescription: string; emptyTitle: string; isProcessing: boolean; reasoning: string | null; result: ClassifyResult | null; }; type ClassifierViewerHeaderState = { category: string | null; }; type ClassifierViewerLegendState = { candidates: readonly ClassifyCandidate[]; category: string | null; reasoning: string | null; }; type ClassifierViewerEmptyStatusState = { emptyDescription: string; emptyTitle: string; isProcessing: boolean; }; type ClassifierViewerDocumentState = { hasOutput: boolean; }; const ClassifierViewerContext = React.createContext(null); const EMPTY_CLASSIFY_CANDIDATES: readonly ClassifyCandidate[] = []; export interface ClassifierViewerProviderProps { result: ClassifyResult | null; isProcessing?: boolean; emptyTitle?: string; emptyDescription?: string; children: React.ReactNode; } export interface ClassifierViewerProps { result: ClassifyResult | null; isProcessing?: boolean; emptyTitle?: string; emptyDescription?: string; document?: React.ReactNode; } function useClassifierViewerContext(): ClassifierViewerContextValue { const context = React.useContext(ClassifierViewerContext); if (!context) { throw new Error( "useClassifierViewer must be used within ClassifierViewerProvider.", ); } return context; } function useClassifierViewerHeader(): ClassifierViewerHeaderState { const { category } = useClassifierViewerContext(); return { category, }; } function useClassifierViewerLegend(): ClassifierViewerLegendState { const { candidates, category, reasoning } = useClassifierViewerContext(); return { candidates, category, reasoning, }; } function useClassifierViewerEmpty(): ClassifierViewerEmptyStatusState { const { emptyDescription, emptyTitle, isProcessing } = useClassifierViewerContext(); return { emptyDescription, emptyTitle, isProcessing, }; } function useClassifierViewerDocument(): ClassifierViewerDocumentState { return { hasOutput: useClassifierViewerContext().category !== null, }; } export function ClassifierViewerProvider({ result, isProcessing = false, emptyTitle = "Run classify to see output", emptyDescription = "Provide input, define categories, and click Run Classify", children, }: ClassifierViewerProviderProps) { const category = result?.category ?? null; const candidates = result?.candidates ?? EMPTY_CLASSIFY_CANDIDATES; const reasoning = result?.reasoning?.trim() || null; const value = React.useMemo( () => ({ category, candidates, emptyDescription, emptyTitle, isProcessing, reasoning, result, }), [ category, candidates, emptyDescription, emptyTitle, isProcessing, reasoning, result, ], ); return ( {children} ); } export function ClassifierViewerHeader({ className }: { className?: string }) { const { category } = useClassifierViewerHeader(); if (!category) return null; const categoryNode = ( {category} ); return (

Classification {categoryNode}

); } export function ClassifierViewerLegend({ className }: { className?: string }) { const { candidates, category, reasoning } = useClassifierViewerLegend(); if (!category) return null; const normalizedCandidates = normalizeClassifierCandidates({ candidates, category, }); if (normalizedCandidates.length === 0 && !reasoning) return null; return (

{normalizedCandidates.length > 0 ? (

{normalizedCandidates.map((candidate) => { const isActive = candidate.category === category; return (

{isActive ? (

); })}

) : null} {reasoning ? (

{reasoning}

) : null}

); } export function ClassifierViewerEmptyState() { const { emptyDescription, emptyTitle, isProcessing } = useClassifierViewerEmpty(); return (

{isProcessing ? ( <>

Classifying...

) : ( <>

{emptyTitle}

{emptyDescription}

)}

); } export function ClassifierViewerDocument({ document, }: { document?: React.ReactNode; }) { const { hasOutput } = useClassifierViewerDocument(); if (!hasOutput) return ; return document ? (

{document}

) : (

No document available

); } export function ClassifierViewer({ result, isProcessing = false, emptyTitle, emptyDescription, document, }: ClassifierViewerProps) { return ( ); } function normalizeClassifierCandidates({ candidates, category, }: { candidates: readonly ClassifyCandidate[]; category: string; }): readonly ClassifyCandidate[] { if (candidates.length === 0) { return [{ category }]; } if (candidates.some((candidate) => candidate.category === category)) { return candidates; } return [{ category }, ...candidates]; } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":["@retab/file-viewer","@retab/pdf-viewer"]}]]}],["$","$L50",null,{"sourceUrl":"https://ui.retab.com/r/classify-consensus-viewer-block.json","proxyUrl":"https://shadcnregistry.com/r/retab/classify-consensus-viewer-block","itemId":"@retab/classify-consensus-viewer-block"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/new-york-v4/blocks/classify-consensus-viewer-block.tsx","content":"$52","type":"registry:component","target":"@components/blocks/classify-consensus-viewer-block.tsx"},{"path":"components/viewers/classify/classify-consensus-block.tsx","content":"$53","type":"registry:component","target":"@components/viewers/classify/classify-consensus-block.tsx"},{"path":"components/viewers/classify/classifier-viewer.tsx","content":"$54","type":"registry:component","target":"@components/viewers/classify/classifier-viewer.tsx"},{"path":"components/viewers/lib/classify-types.ts","content":"// Classification result shape for the classifier viewer.\n\nexport interface ClassifyResult {\n category: string;\n reasoning?: string;\n candidates?: readonly ClassifyCandidate[];\n consensus?: ClassifyConsensus | null;\n}\n\nexport interface ClassifyCandidate {\n category: string;\n description?: string;\n}\n\nexport interface ClassifyConsensus {\n choices?: readonly ClassifyConsensusChoice[];\n /** Consensus likelihood score (0.0-1.0) of the winning classification. */\n likelihoods?: number | null;\n}\n\nexport interface ClassifyConsensusChoice {\n category: string;\n reasoning?: string;\n}\n","type":"registry:component","target":"@components/viewers/lib/classify-types.ts"}]}]]}],"$L55"]}]

Classify Consensus

Installation

Files

@components

Styles