Table reservation

import { renderGenerativeUI } from "@assistant-ui/react-generative-ui";

<div data-aui-theme="elements">
  {renderGenerativeUI(spec, library, { status: "done" })}
</div>

{
  "$type": "Card",
  "asForm": true,
  "confirm": {
    "label": "Confirm reservation",
    "$action": {
      "type": "book_reservation"
    }
  },
  "cancel": {
    "label": "Cancel"
  },
  "children": [
    {
      "$type": "Header",
      "$key": "title",
      "text": "Reserve a table",
      "size": "md"
    },
    {
      "$type": "Text",
      "$key": "intro",
      "value": "We hold the table for 15 minutes past the reserved time.",
      "size": "sm",
      "color": "secondary"
    },
    {
      "$type": "Input",
      "$key": "name",
      "name": "guestName",
      "label": "Name",
      "placeholder": "Full name"
    },
    {
      "$type": "Select",
      "$key": "party",
      "name": "partySize",
      "label": "Party size",
      "placeholder": "Select party size",
      "options": [
        {
          "label": "1 guest",
          "value": "1"
        },
        {
          "label": "2 guests",
          "value": "2"
        },
        {
          "label": "3 guests",
          "value": "3"
        },
        {
          "label": "4+ guests",
          "value": "4"
        }
      ]
    },
    {
      "$type": "DatePicker",
      "$key": "date",
      "name": "date",
      "label": "Date"
    },
    {
      "$type": "RadioGroup",
      "$key": "seating",
      "name": "seating",
      "label": "Seating preference",
      "defaultValue": "indoor",
      "options": [
        {
          "label": "Indoor",
          "value": "indoor"
        },
        {
          "label": "Patio",
          "value": "patio"
        }
      ]
    },
    {
      "$type": "Checkbox",
      "$key": "reminder",
      "name": "reminder",
      "label": "Send a reminder 1 hour before"
    }
  ]
}