Message Timing

"use client";import { useMessageTiming } from "@assistant-ui/react";import {  Tooltip,  TooltipContent,  TooltipProvider,  TooltipTrigger,} from "@/components/ui/tooltip";import { cn } from "@/lib/utils";import type { FC } from "react";const formatTimingMs = (ms: number | undefined): string => {  if (ms === undefined) return "—";  if (ms < 1000) return `${Math.round(ms)}ms`;  return `${(ms / 1000).toFixed(2)}s`;};/** * Shows streaming stats (TTFT, total time, tok/s, chunks) as a badge with a * hover/focus tooltip. Renders nothing until the stream completes. * * Place it inside `ActionBarPrimitive.Root` in your `thread.tsx` so it * inherits the action bar's autohide behaviour: * * ```tsx * import { MessageTiming } from "@/components/assistant-ui/message-timing"; * * <ActionBarPrimitive.Root > *   <ActionBarPrimitive.Copy /> *   <ActionBarPrimitive.Reload /> *   <MessageTiming />  // <-- add this * </ActionBarPrimitive.Root> * ``` * * @param side - Side of the tooltip relative to the badge trigger. * @default "right" */export const MessageTiming: FC<{  className?: string;  side?: "top" | "right" | "bottom" | "left";}> = ({ className, side = "right" }) => {  const timing = useMessageTiming();  if (timing?.totalStreamTime === undefined) return null;  return (    <TooltipProvider>      <Tooltip>        <TooltipTrigger          render={            <button              type="button"              data-slot="message-timing-trigger"              aria-label="Message timing"              className={cn(                "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",                className,              )}            />          }        >          {formatTimingMs(timing.totalStreamTime)}        </TooltipTrigger>        <TooltipContent          side={side}          sideOffset={8}          data-slot="message-timing-popover"          className="bg-popover text-popover-foreground rounded-lg border px-3 py-2 [&_span>svg]:hidden!"        >          <div className="grid min-w-35 gap-1.5 text-xs">            {timing.firstTokenTime !== undefined && (              <div className="flex items-center justify-between gap-4">                <span className="text-muted-foreground">First token</span>                <span className="font-mono tabular-nums">                  {formatTimingMs(timing.firstTokenTime)}                </span>              </div>            )}            <div className="flex items-center justify-between gap-4">              <span className="text-muted-foreground">Total</span>              <span className="font-mono tabular-nums">                {formatTimingMs(timing.totalStreamTime)}              </span>            </div>            {timing.tokensPerSecond !== undefined && (              <div className="flex items-center justify-between gap-4">                <span className="text-muted-foreground">Speed</span>                <span className="font-mono tabular-nums">                  {timing.tokensPerSecond.toFixed(1)} tok/s                </span>              </div>            )}            <div className="flex items-center justify-between gap-4">              <span className="text-muted-foreground">Chunks</span>              <span className="font-mono tabular-nums">                {timing.totalChunks}              </span>            </div>          </div>        </TooltipContent>      </Tooltip>    </TooltipProvider>  );};

"use client";import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";import { cn } from "@/lib/utils";function TooltipProvider({  delay = 0,  ...props}: TooltipPrimitive.Provider.Props) {  return (    <TooltipPrimitive.Provider      data-slot="tooltip-provider"      delay={delay}      {...props}    />  );}function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;}function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;}function TooltipContent({  className,  side = "top",  sideOffset = 4,  align = "center",  alignOffset = 0,  children,  ...props}: TooltipPrimitive.Popup.Props &  Pick<    TooltipPrimitive.Positioner.Props,    "align" | "alignOffset" | "side" | "sideOffset"  >) {  return (    <TooltipPrimitive.Portal>      <TooltipPrimitive.Positioner        align={align}        alignOffset={alignOffset}        side={side}        sideOffset={sideOffset}        className="isolate z-50"      >        <TooltipPrimitive.Popup          data-slot="tooltip-content"          className={cn(            "bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",            className,          )}          {...props}        >          {children}          <TooltipPrimitive.Arrow            data-slot="tooltip-arrow"            className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5"          />        </TooltipPrimitive.Popup>      </TooltipPrimitive.Positioner>    </TooltipPrimitive.Portal>  );}export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };