{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "message-timing",
  "type": "registry:component",
  "title": "Message Timing",
  "description": "Badge with streaming stats: time to first token, total time, and tokens per second.",
  "dependencies": [
    "@assistant-ui/react"
  ],
  "registryDependencies": [
    "tooltip"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/message-timing.aui.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/message-timing.aui.radix.tsx",
      "content": "\"use client\";\n\nimport { useMessageTiming } from \"@assistant-ui/react\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\nimport { cn } from \"@/lib/utils\";\nimport type { FC } from \"react\";\n\nconst formatTimingMs = (ms: number | undefined): string => {\n  if (ms === undefined) return \"—\";\n  if (ms < 1000) return `${Math.round(ms)}ms`;\n  return `${(ms / 1000).toFixed(2)}s`;\n};\n\n/**\n * Shows streaming stats (TTFT, total time, tok/s, chunks) as a badge with a\n * hover/focus tooltip. Renders nothing until the stream completes.\n *\n * Place it inside `ActionBarPrimitive.Root` in your `thread.tsx` so it\n * inherits the action bar's autohide behaviour:\n *\n * ```tsx\n * import { MessageTiming } from \"@/components/assistant-ui/elements/message-timing.aui\";\n *\n * <ActionBarPrimitive.Root >\n *   <ActionBarPrimitive.Copy />\n *   <ActionBarPrimitive.Reload />\n *   <MessageTiming />  // <-- add this\n * </ActionBarPrimitive.Root>\n * ```\n *\n * @param side - Side of the tooltip relative to the badge trigger.\n * @default \"right\"\n */\nexport const MessageTiming: FC<{\n  className?: string;\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n}> = ({ className, side = \"right\" }) => {\n  const timing = useMessageTiming();\n  if (timing?.totalStreamTime === undefined) return null;\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <button\n            type=\"button\"\n            data-slot=\"message-timing-trigger\"\n            aria-label=\"Message timing\"\n            className={cn(\n              \"text-muted-foreground hover:bg-accent hover:text-accent-foreground flex items-center rounded-md p-1 font-mono text-xs tabular-nums transition-colors\",\n              className,\n            )}\n          >\n            {formatTimingMs(timing.totalStreamTime)}\n          </button>\n        </TooltipTrigger>\n        <TooltipContent\n          side={side}\n          sideOffset={8}\n          data-slot=\"message-timing-popover\"\n          className=\"bg-popover text-popover-foreground border px-3 py-2 [&_[data-slot=tooltip-arrow]]:hidden\"\n        >\n          <div className=\"grid min-w-35 gap-1.5 text-xs\">\n            {timing.firstTokenTime !== undefined && (\n              <div className=\"flex items-center justify-between gap-4\">\n                <span className=\"text-muted-foreground\">First token</span>\n                <span className=\"font-mono tabular-nums\">\n                  {formatTimingMs(timing.firstTokenTime)}\n                </span>\n              </div>\n            )}\n            <div className=\"flex items-center justify-between gap-4\">\n              <span className=\"text-muted-foreground\">Total</span>\n              <span className=\"font-mono tabular-nums\">\n                {formatTimingMs(timing.totalStreamTime)}\n              </span>\n            </div>\n            {timing.tokensPerSecond !== undefined && (\n              <div className=\"flex items-center justify-between gap-4\">\n                <span className=\"text-muted-foreground\">Speed</span>\n                <span className=\"font-mono tabular-nums\">\n                  {timing.tokensPerSecond.toFixed(1)} tok/s\n                </span>\n              </div>\n            )}\n            <div className=\"flex items-center justify-between gap-4\">\n              <span className=\"text-muted-foreground\">Chunks</span>\n              <span className=\"font-mono tabular-nums\">\n                {timing.totalChunks}\n              </span>\n            </div>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  );\n};\n"
    }
  ]
}