import * as React from "react"; import { Frown, Smile, Sparkles } from "lucide-react"; import { Alert } from "@/components/ui/alert"; import { Button } from "@/components/ui/button"; import { FeedbackFormPersistentSidebarThree } from "@/registry/feedback-form-persistent-sidebar-three/feedback-form-persistent-sidebar-three"; 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 FeedbackFormPersistentSidebarThree >; const topics: ComponentProps["topics"] = [ { value: "automation", label: "Automation workflows", description: "Triggers, actions, run history", }, { value: "reporting", label: "Reporting & dashboards", description: "Charts, filters, exports", }, { value: "billing", label: "Billing & usage", description: "Invoices, limits, renewals", }, ]; const sentiments: ComponentProps["sentiments"] = [ { value: "friction", label: "Issue", icon: Frown }, { value: "idea", label: "Idea", icon: Sparkles }, { value: "praise", label: "Delight", icon: Smile }, ]; export function FeedbackFormPersistentSidebarThreeDemo() { const [lastEvent, setLastEvent] = React.useState(""); return (

Use the toggle button to open the persistent panel. Drafts are saved per topic, so try switching contexts before submitting.

Last event: {lastEvent || "None yet"}

{ await new Promise((resolve) => setTimeout(resolve, 500)); setLastEvent( `Submitted for ${payload.topic} with sentiment ${payload.sentiment ?? "n/a"}`, ); }} onStartChat={(topic) => setLastEvent(`Started chat about ${topic}`)} />

); } export default FeedbackFormPersistentSidebarThreeDemo;

Simple