{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-message-timing",
  "type": "registry:component",
  "title": "Timing footer",
  "description": "What the turn cost: time to first token, throughput, tokens, money.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/message-timing.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/message-timing.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { mono } from \"./surfaces\";\n\nexport interface TimingStat {\n  label: string;\n  value: string;\n}\n\nexport function MessageTiming({\n  stats,\n  streaming,\n  className,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"children\" | \"stats\" | \"streaming\"> & {\n  stats: readonly TimingStat[];\n  streaming?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"message-timing\"\n      className={cn(\n        \"fade-in animate-in flex w-full max-w-sm flex-wrap items-center gap-x-3 gap-y-1 duration-500\",\n        className,\n      )}\n\n      {...props}\n    >\n      {stats.map((stat) => (\n        <span key={stat.label} className=\"flex items-baseline gap-1\">\n          <span className={cn(mono, \"text-foreground/25\")}>{stat.label}</span>\n          <span\n            className={cn(\n              mono,\n              \"tabular-nums\",\n              streaming\n                ? \"text-blue-500 dark:text-blue-400\"\n                : \"text-foreground/50\",\n            )}\n          >\n            {stat.value}\n          </span>\n        </span>\n      ))}\n    </div>\n  );\n}\n"
    }
  ]
}