{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-day-separator",
  "type": "registry:component",
  "title": "Timestamps",
  "description": "Chronology in a long thread: days marked, times on hover.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/day-separator.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/day-separator.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { mono } from \"./surfaces\";\n\nexport interface DatedMessage {\n  id: string;\n  day: string;\n  time: string;\n  role: \"user\" | \"assistant\";\n  text: string;\n}\n\nexport function DaySeparator({\n  messages,\n  className,\n  ...props\n}: Omit<ComponentProps<\"div\">, \"children\" | \"messages\"> & {\n  messages: readonly DatedMessage[];\n}) {\n  let lastDay = \"\";\n\n  return (\n    <div\n      data-slot=\"day-separator\"\n      className={cn(\"flex w-full max-w-sm flex-col gap-2\", className)}\n\n      {...props}\n    >\n      {messages.map((message) => {\n        const newDay = message.day !== lastDay;\n        lastDay = message.day;\n\n        return (\n          <div key={message.id} className=\"flex flex-col gap-2\">\n            {newDay && (\n              <div className=\"flex items-center gap-2.5 py-1\">\n                <span className=\"bg-foreground/[0.08] h-px flex-1\" />\n                <span className={cn(mono, \"text-foreground/30\")}>\n                  {message.day}\n                </span>\n                <span className=\"bg-foreground/[0.08] h-px flex-1\" />\n              </div>\n            )}\n            <div\n              className={cn(\n                \"group flex items-baseline gap-2\",\n                message.role === \"user\" && \"flex-row-reverse\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"max-w-[80%] text-[13.5px] leading-relaxed break-words\",\n                  message.role === \"user\"\n                    ? \"bg-foreground/[0.05] rounded-2xl px-3.5 py-2\"\n                    : \"text-foreground/75\",\n                )}\n              >\n                {message.text}\n              </span>\n              <span\n                className={cn(\n                  mono,\n                  \"text-foreground/0 group-hover:text-foreground/30 shrink-0 tabular-nums transition-colors\",\n                )}\n              >\n                {message.time}\n              </span>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"
    }
  ]
}