Order tracking

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

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

{
  "$type": "Card",
  "title": "Order #48213",
  "children": [
    {
      "$type": "Alert",
      "$key": "alert",
      "tone": "success",
      "title": "Order confirmed",
      "description": "Your order is on its way and should arrive today."
    },
    {
      "$type": "ListView",
      "$key": "timeline",
      "children": [
        {
          "$type": "ListViewItem",
          "$key": "placed",
          "$action": {
            "type": "view_order_event",
            "eventId": "placed"
          },
          "children": {
            "$type": "Row",
            "justify": "between",
            "children": [
              {
                "$type": "Col",
                "$key": "label",
                "gap": 1,
                "children": [
                  {
                    "$type": "Text",
                    "$key": "title",
                    "value": "Order placed",
                    "weight": "medium"
                  },
                  {
                    "$type": "Caption",
                    "$key": "time",
                    "value": "Today at 9:02 AM"
                  }
                ]
              },
              {
                "$type": "Badge",
                "$key": "badge",
                "value": "Done",
                "variant": "success"
              }
            ]
          }
        },
        {
          "$type": "ListViewItem",
          "$key": "packed",
          "$action": {
            "type": "view_order_event",
            "eventId": "packed"
          },
          "children": {
            "$type": "Row",
            "justify": "between",
            "children": [
              {
                "$type": "Col",
                "$key": "label",
                "gap": 1,
                "children": [
                  {
                    "$type": "Text",
                    "$key": "title",
                    "value": "Packed",
                    "weight": "medium"
                  },
                  {
                    "$type": "Caption",
                    "$key": "time",
                    "value": "Today at 9:41 AM"
                  }
                ]
              },
              {
                "$type": "Badge",
                "$key": "badge",
                "value": "Done",
                "variant": "success"
              }
            ]
          }
        },
        {
          "$type": "ListViewItem",
          "$key": "transit",
          "$action": {
            "type": "view_order_event",
            "eventId": "transit"
          },
          "children": {
            "$type": "Row",
            "justify": "between",
            "children": [
              {
                "$type": "Col",
                "$key": "label",
                "gap": 1,
                "children": [
                  {
                    "$type": "Text",
                    "$key": "title",
                    "value": "Out for delivery",
                    "weight": "medium"
                  },
                  {
                    "$type": "Caption",
                    "$key": "time",
                    "value": "Estimated 2:00 to 4:00 PM"
                  }
                ]
              },
              {
                "$type": "Badge",
                "$key": "badge",
                "value": "In progress",
                "variant": "info"
              }
            ]
          }
        }
      ]
    },
    {
      "$type": "Divider",
      "$key": "divider"
    },
    {
      "$type": "Row",
      "$key": "actions",
      "justify": "end",
      "children": [
        {
          "$type": "Button",
          "$key": "track",
          "label": "Track package",
          "buttonStyle": "outline",
          "$action": {
            "type": "track_order",
            "orderId": "48213"
          }
        },
        {
          "$type": "Button",
          "$key": "support",
          "label": "Contact support",
          "buttonStyle": "ghost",
          "$action": {
            "type": "contact_support",
            "orderId": "48213"
          }
        }
      ]
    }
  ]
}