{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-directive-text",
  "type": "registry:component",
  "title": "Directive Text",
  "description": "The props-driven directive chip renderer: bring your own formatter, no runtime required.",
  "registryDependencies": [
    "https://r.assistant-ui.com/badge.json"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/directive-text.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/directive-text.tsx",
      "content": "\"use client\";\n\nimport type { FC } from \"react\";\nimport { Badge } from \"@/components/ui/badge\";\n\ntype IconComponent = FC<{ className?: string }>;\n\nexport type DirectiveTextSegment =\n  | { readonly kind: \"text\"; readonly text: string }\n  | {\n      readonly kind: \"mention\";\n      readonly type: string;\n      readonly label: string;\n      readonly id: string;\n    };\n\nexport type DirectiveTextFormatter = {\n  /** Parse text into alternating text and directive segments. */\n  parse(text: string): readonly DirectiveTextSegment[];\n};\n\nexport type CreateDirectiveTextOptions = {\n  /** Maps a directive `type` to an icon component. */\n  iconMap?: Record<string, IconComponent>;\n  /** Icon rendered when `iconMap` has no entry for the segment type. */\n  fallbackIcon?: IconComponent;\n};\n\n/** Creates a text component that parses directive syntax and renders inline chips. */\nexport function createDirectiveText(\n  formatter: DirectiveTextFormatter,\n  options?: CreateDirectiveTextOptions,\n): FC<{ text: string }> {\n  const iconMap = options?.iconMap;\n  const fallbackIcon = options?.fallbackIcon;\n\n  const Component: FC<{ text: string }> = ({ text }) => {\n    const segments = formatter.parse(text);\n\n    if (segments.length === 1 && segments[0]!.kind === \"text\") {\n      return <>{text}</>;\n    }\n\n    return (\n      <>\n        {segments.map((seg, i) => {\n          if (seg.kind === \"text\") {\n            return (\n              <span key={i} className=\"whitespace-pre-wrap\">\n                {seg.text}\n              </span>\n            );\n          }\n\n          const Icon = iconMap?.[seg.type] ?? fallbackIcon;\n          return (\n            <Badge\n              key={i}\n              variant=\"secondary\"\n              data-slot=\"directive-text-chip\"\n              data-directive-type={seg.type}\n              data-directive-id={seg.id}\n              aria-label={`${seg.type}: ${seg.label}`}\n              className=\"aui-directive-chip items-baseline px-1.5 py-0.5 text-[13px] leading-none [&_svg]:self-center\"\n            >\n              {Icon && <Icon />}\n              {seg.label}\n            </Badge>\n          );\n        })}\n      </>\n    );\n  };\n  Component.displayName = \"DirectiveText\";\n  return Component;\n}\n"
    }
  ]
}