Response feedback is a production-ready ai component from BJORK UI, packaged for shadcn registries.
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { ResponseFeedback, type FeedbackPayload } from "@/components/ui/bjork-response-feedback";
const ANSWER =
"Kestrel Mini supports a 128k context window and streams at roughly 90 tokens a second on the standard tier. For long documents, split them into sections and summarise each one first.";
function Demo({
run,
last,
onSubmit,
onUndo,
}: {
run: number;
last: FeedbackPayload | null;
onSubmit: (payload: FeedbackPayload) => void;
onUndo: () => void;
}) {
const isPreview = false;
return (
<div className="flex w-[min(460px,calc(100vw-56px))] flex-col gap-3">
<p className="text-[14px] leading-[22px] text-[color:var(--bjork-text-medium)]">{ANSWER}</p>
{isPreview ? (
<ResponseFeedback defaultValue="down" defaultOpen defaultReasons={["Inaccurate", "Outdated sources"]} />
) : (
<ResponseFeedback key={run} onSubmit={onSubmit} onUndo={onUndo} />
)}
{!isPreview && (
<p className="mt-6 min-h-4 max-w-full truncate text-center font-mono text-[11px] text-[color:var(--bjork-text-faint)]">
{last
? `onSubmit → ${last.rating}${last.reasons.length ? ` · ${last.reasons.join(", ")}` : ""}${last.comment ? ` · “${last.comment}”` : ""}`
: "Nothing sent yet"}
</p>
)}
</div>
);
}
function SourceDemo(){
const [run, setRun] = useState(0);
const [last, setLast] = useState<FeedbackPayload | null>(null);
const reset = () => {
setLast(null);
setRun((r) => r + 1);
};
return <>
<Demo run={run} last={last} onSubmit={setLast} onUndo={() => setLast(null)} />
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}