import * as React from "react"; import { Sparkle } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { FeedbackFormPostInteractionMicroFour } from "@/registry/feedback-form-post-interaction-micro-four/feedback-form-post-interaction-micro-four"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof FeedbackFormPostInteractionMicroFour >; type FeedbackFormPostInteractionMicroFourValues = Parameters< NonNullable >[0]; export function FeedbackFormPostInteractionMicroFourDemo() { const [open, setOpen] = React.useState(false); const [lastSentiment, setLastSentiment] = React.useState("none"); return (

Micro feedback

Attach this widget to support interactions, AI responses, or doc reads.

Rate assistant reply } open={open} onOpenChange={setOpen} title="Did the assistant get you unstuck?" description="Tap a quick sentiment and optionally add more context." followupCta={{ label: "Write a public review", href: "https://usenextbase.com", }} onSubmit={async ( values: FeedbackFormPostInteractionMicroFourValues & { screenshot?: File | null; }, ) => { await new Promise((resolve) => setTimeout(resolve, 500)); setLastSentiment( `${values.sentiment ?? "n/a"} · ${values.comment?.slice(0, 40) ?? "no comment"}`, ); }} />

Last submission: {lastSentiment}

); } export {}; export default FeedbackFormPostInteractionMicroFourDemo;

Simple