Aurora AI Schema Display

1"use client"
2 
3import * as React from "react"
4import { Code } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Badge } from "@/registry/aurora/ui/badge"
7 
8// ---------------------------------------------------------------------------
9// Types
10// ---------------------------------------------------------------------------
11 
12export interface JsonSchemaProperty {
13  type?: string
14  description?: string
15  items?: { type?: string }
16  [key: string]: unknown
17}
18 
19export interface JsonSchema {
20  type?: string
21  required?: string[]
22  properties?: Record<string, JsonSchemaProperty>
23  [key: string]: unknown
24}
25 
26export interface SchemaDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
27  /** JSON Schema object to render. */
28  schema: JsonSchema | unknown
29  /** Header title shown beside the code glyph. */
30  title?: string
31  /** Initial view tab. Defaults to "fields". */
32  defaultView?: "fields" | "json"
33}
34 
35// ---------------------------------------------------------------------------
36// Type-tone mapping — each JSON-schema scalar maps to an Aurora status tone.
37// Array/string -> success, integer/number -> warn, boolean -> rose.
38// ---------------------------------------------------------------------------
39 
40type TypeTone = {
41  badge: "info" | "success" | "warn" | "rose"
42}
43 
44function toneForType(type: string): TypeTone {
45  const base = type.replace(/\[\]$/, "")
46  switch (base) {
47    case "integer":
48    case "number":
49      return {
50        badge: "warn",
51      }
52    case "boolean":
53      return {
54        badge: "rose",
55      }
56    case "object":
57      return {
58        badge: "info",
59      }
60    // string, array (string[]), and anything else → success teal
61    default:
62      return {
63        badge: "success",
64      }
65  }
66}
67 
68function displayType(prop: JsonSchemaProperty): string {
69  if (prop.type === "array") {
70    const itemType = prop.items?.type ?? "any"
71    return `${itemType}[]`
72  }
73  return prop.type ?? "any"
74}
75 
76// ---------------------------------------------------------------------------
77// Raw JSON renderer (token-colored, mono).
78// ---------------------------------------------------------------------------
79 
80function renderJsonValue(value: unknown, depth = 0): React.ReactNode {
81  const indent = "  ".repeat(depth)
82 
83  if (Array.isArray(value)) {
84    if (value.length === 0) return <span style={{ color: "var(--aurora-text-muted)" }}>[]</span>
85    return (
86      <>
87        <span style={{ color: "var(--aurora-text-muted)" }}>[</span>
88        {"\n"}
89// … truncated