app-02

1"use client";
2 
3import { experimental_useObject as useObject } from "@ai-sdk/react";
4import { zodResolver } from "@hookform/resolvers/zod";
5import { useState } from "react";
6import { useForm } from "react-hook-form";
7import { z } from "zod";
8import { Button } from "@/components/ui/button";
9import { Dialog, DialogContent } from "@/components/ui/dialog";
10import { Input } from "@/components/ui/input";
11import { Label } from "@/components/ui/label";
12import { Textarea } from "@/components/ui/textarea";
13import { PersonaDisplay } from "@/registry/blocks/app-02/components/persona-display";
14import { getRandomExample } from "@/registry/blocks/app-02/lib/example-businesses";
15import {
16	formSchema,
17	ProductPersonaSchema,
18	UserPersonaSchema,
19} from "@/registry/blocks/app-02/lib/persona";
20 
21type FormData = z.infer<typeof formSchema>;
22 
23export default function PersonaGenerator() {
24	const [showDialog, setShowDialog] = useState(false);
25 
26	const {
27		register,
28		handleSubmit,
29		formState: { errors },
30		reset,
31	} = useForm<FormData>({
32		resolver: zodResolver(formSchema),
33	});
34 
35	const { object, submit, isLoading } = useObject({
36		api: "/api/ai/persona",
37		schema: z.object({
38			userPersona: UserPersonaSchema,
39			productPersona: ProductPersonaSchema,
40		}),
41	});
42 
43	const onSubmit = async (data: FormData) => {
44		setShowDialog(true);
45		submit(data);
46	};
47 
48	const handleRandomize = () => {
49		const example = getRandomExample();
50		reset(example);
51	};
52 
53	return (
54		<div className="max-w-3xl mx-auto p-6 space-y-8">
55			<div className="space-y-4 text-center">
56				<h4 className="text-3xl font-bold tracking-tight">
57					AI Persona Generator
58				</h4>
59				<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
60					Generate detailed user and product personas for your
61					business using AI. Fill in the details below or try a random
62					example to get started.
63				</p>
64			</div>
65 
66			<div className="flex justify-end">
67				<Button
68					variant="outline"
69					onClick={handleRandomize}
70					className="group"
71				>
72					<span className="mr-2 group-hover:animate-spin">🎲</span>
73					Try Random Example
74				</Button>
75			</div>
76 
77			<div className="bg-card border rounded-lg p-6">
78				<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
79					<div className="grid gap-6 sm:grid-cols-2">
80						<div className="space-y-2">
81							<Label htmlFor="businessName">Business Name</Label>
82							<Input
83								id="businessName"
84								{...register("businessName")}
85// … truncated