JSON Schema Editor

1"use client";
2 
3import type { JSONSchema7 } from "ai";
4import { Asterisk, Brackets, Plus, Save, Trash2 } from "lucide-react";
5import { nanoid } from "nanoid";
6import { type ComponentProps, useState } from "react";
7import { Button } from "@/components/ui/button";
8import {
9	Dialog,
10	DialogContent,
11	DialogDescription,
12	DialogHeader,
13	DialogTitle,
14	DialogTrigger,
15} from "@/components/ui/dialog";
16import { Input } from "@/components/ui/input";
17import {
18	Select,
19	SelectContent,
20	SelectItem,
21	SelectTrigger,
22	SelectValue,
23} from "@/components/ui/select";
24import { cn } from "@/lib/utils";
25 
26const MAX_NESTING_LEVEL = 5;
27 
28const SCHEMA_TYPES = [
29	"string",
30	"number",
31	"integer",
32	"boolean",
33	"enum",
34	"object",
35] as const;
36 
37export type JsonSchemaEditorJSONSchemaType = (typeof SCHEMA_TYPES)[number];
38 
39export interface JsonSchemaEditorInternalSchemaProperty {
40	id: string;
41	type: JsonSchemaEditorJSONSchemaType;
42	isArray?: boolean;
43	isRequired?: boolean;
44	enumValues?: string[];
45	properties?: Record<string, JsonSchemaEditorInternalSchemaProperty>;
46	description?: string;
47}
48 
49export interface JsonSchemaEditorInternalSchema {
50	type: "object";
51	properties: Record<string, JsonSchemaEditorInternalSchemaProperty>;
52	required?: string[];
53	additionalProperties?: boolean;
54	description?: string;
55}
56 
57/**
58 * Parse a JSON Schema property into an internal representation
59 * Shared utility for both editor and preview components
60 */
61function parseJSONSchemaProperty(prop: Record<string, unknown>): {
62	type: string;
63	isArray: boolean;
64	description?: string;
65	properties?: Record<string, ReturnType<typeof parseJSONSchemaProperty>>;
66	enumValues?: string[];
67} {
68	const result: {
69		type: string;
70		isArray: boolean;
71		description?: string;
72		properties?: Record<string, ReturnType<typeof parseJSONSchemaProperty>>;
73		enumValues?: string[];
74	} = {
75		type: "string",
76		isArray: false,
77	};
78 
79	if (prop.type === "array" && prop.items && typeof prop.items === "object") {
80		result.isArray = true;
81		const items = prop.items as Record<string, unknown>;
82 
83		if (typeof items.type === "string") {
84			result.type = items.type;
85		}
86 
87		if (items.enum && Array.isArray(items.enum)) {
88			result.type = "enum";
89			result.enumValues = items.enum.map(String);
90		}
91 
92		if (
93			items.type === "object" &&
94			items.properties &&
95			typeof items.properties === "object"
96		) {
97			result.type = "object";
98			result.properties = {};
99 
100			for (const [nestedName, nestedProp] of Object.entries(
101				items.properties as Record<string, unknown>,
102			)) {
103// … truncated