{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "streaming-text",
  "title": "Streaming text",
  "description": "an answer arriving · all at once under reduced motion · screen readers get it once",
  "dependencies": [],
  "registryDependencies": [
    "@kit-native/lib-reduced-motion",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/streaming-text.tsx",
      "content": "import { Text } from '@/components/ui/text';\nimport { useReducedMotion } from '@/lib/reduced-motion';\nimport * as React from 'react';\n\n/**\n * Reveals `text` a few characters at a time, the way a model's answer arrives. Shows it all at once when\n * reduced motion is on. `onDone` fires when the whole text is visible.\n */\nexport function useStreamingText(text: string, { charsPerTick = 3, tickMs = 24, onDone }: { charsPerTick?: number; tickMs?: number; onDone?: () => void } = {}) {\n  const reduced = useReducedMotion();\n  const [shown, setShown] = React.useState(0);\n  const done = reduced || shown >= text.length;\n\n  React.useEffect(() => {\n    if (done) return;\n    const t = setTimeout(() => setShown((n) => Math.min(text.length, n + charsPerTick)), tickMs);\n    return () => clearTimeout(t);\n  }, [shown, done, text.length, charsPerTick, tickMs]);\n\n  React.useEffect(() => {\n    if (done) onDone?.();\n  }, [done, onDone]);\n\n  return { visible: done ? text : text.slice(0, shown), done };\n}\n\ntype Props = { text: string; onDone?: () => void; className?: string };\n\n/** A model answer arriving. Screen readers get the full text once, not every character. */\nexport function StreamingText({ text, onDone, className }: Props) {\n  const { visible, done } = useStreamingText(text, { onDone });\n  return (\n    <Text className={className ?? 'leading-6'} accessibilityLabel={text} aria-busy={!done}>\n      {visible}\n      {!done ? <Text className=\"text-foreground/70\"> ▍</Text> : null}\n    </Text>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/streaming-text.tsx"
    }
  ],
  "meta": {
    "exports": [
      "StreamingText",
      "useStreamingText"
    ],
    "api": "<StreamingText text onDone? />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "ai"
  ],
  "type": "registry:component"
}