app-03

1"use client";
2 
3import { useCompletion } from "@ai-sdk/react";
4import type { DeepPartial } from "ai";
5import { useEffect, useState } from "react";
6import type { z } from "zod";
7import { ProfileGenerateDialog } from "@/registry/blocks/app-03/components/profile-generate-dialog";
8import { Toolbar } from "@/registry/blocks/app-03/components/toolbar";
9import { XPreview } from "@/registry/blocks/app-03/components/x-preview";
10import type {
11	profileGenerationSchema,
12	XProfile,
13} from "@/registry/blocks/app-03/lib/x";
14 
15export default function XProfileGenerator() {
16	const [profile, setProfile] = useState<DeepPartial<XProfile>>({});
17 
18	const { isLoading, complete, completion } = useCompletion({
19		api: "/api/ai/x-profile",
20		onFinish: (_prompt, completion) => {
21			setProfile((profile) => ({
22				...profile,
23				bio: completion,
24			}));
25		},
26		experimental_throttle: 90,
27	});
28 
29	useEffect(() => {
30		if (completion) {
31			setProfile((profile) => ({
32				...profile,
33				bio: completion,
34			}));
35		}
36	}, [completion]);
37 
38	function onSubmit(values: z.infer<typeof profileGenerationSchema>) {
39		setProfile({
40			displayName: values.displayName,
41			username: values.username,
42		});
43		complete(JSON.stringify(values));
44	}
45 
46	return (
47		<div className="min-h-screen bg-black text-white">
48			<Toolbar />
49			<XPreview
50				profile={profile}
51				isLoading={isLoading}
52				generateDialog={<ProfileGenerateDialog onSubmit={onSubmit} />}
53			/>
54		</div>
55	);
56}