{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-streaming-text",
  "type": "registry:component",
  "title": "Streaming text",
  "description": "Tokens arrive softly: the newest words land in blue and settle into ink.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-range.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/streaming-text.tsx",
      "content": "\"use client\";\n\nimport { type ComponentProps, useMemo } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { take } from \"../utils/range\";\n\nexport interface Segment {\n  text: string;\n  mono?: boolean;\n}\n\nexport function StreamingText({\n  segments,\n  count,\n  streaming,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"p\">,\n  \"children\" | \"segments\" | \"count\" | \"streaming\"\n> & {\n  segments: Segment[];\n  count: number;\n  streaming: boolean;\n}) {\n  const words = useMemo(\n    () =>\n      segments.flatMap((segment) =>\n        segment.text\n          .split(\" \")\n          .map((word) => ({ word, mono: segment.mono ?? false })),\n      ),\n    [segments],\n  );\n  const shown = take(words, count);\n\n  return (\n    <p\n      data-slot=\"streaming-text\"\n      className={cn(\n        \"min-h-[8.5rem] max-w-sm text-sm leading-relaxed text-pretty\",\n        className,\n      )}\n\n      {...props}\n    >\n      {shown.map(({ word, mono: isMono }, i) => {\n        const fresh = streaming && shown.length - 1 - i < 2;\n        return (\n          <span\n            key={i}\n            className=\"fade-in animate-in fill-mode-both duration-500 motion-reduce:animate-none\"\n          >\n            <span\n              className={cn(\n                \"transition-colors duration-700 motion-reduce:transition-none\",\n                fresh && \"text-blue-500 dark:text-blue-400\",\n                isMono &&\n                  \"bg-foreground/[0.06] rounded-md px-1.5 py-0.5 font-mono text-[0.85em]\",\n              )}\n            >\n              {word}\n            </span>{\" \"}\n          </span>\n        );\n      })}\n      {streaming && shown.length > 0 && (\n        <span\n          aria-hidden\n          className=\"-mb-0.5 ml-0.5 inline-block h-4 w-0.5 animate-pulse rounded-full bg-blue-500 dark:bg-blue-400\"\n        />\n      )}\n    </p>\n  );\n}\n"
    }
  ]
}