{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mermaid-diagram",
  "type": "registry:component",
  "title": "Mermaid Diagram",
  "description": "Render Mermaid diagrams in messages, including while they stream.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-mermaid-diagram.json"
  ],
  "dependencies": [
    "@assistant-ui/react",
    "@assistant-ui/react-markdown"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/mermaid-diagram.aui.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/mermaid-diagram.aui.tsx",
      "content": "\"use client\";\n\nimport { memo, type FC } from \"react\";\nimport { useAuiState } from \"@assistant-ui/react\";\nimport type { SyntaxHighlighterProps } from \"@assistant-ui/react-markdown\";\nimport {\n  MermaidDiagram as MermaidDiagramBase,\n  MermaidZoom,\n} from \"./mermaid-diagram\";\n\nexport type MermaidDiagramProps = SyntaxHighlighterProps & {\n  className?: string;\n};\n\n/**\n * Use it by passing to `componentsByLanguage` for mermaid in `markdown-text.tsx`.\n *\n * @example\n * const MarkdownTextImpl = () => {\n *   return (\n *     <MarkdownTextPrimitive\n *       remarkPlugins={[remarkGfm]}\n *       className=\"aui-md\"\n *       components={defaultComponents}\n *       componentsByLanguage={{\n *         mermaid: {\n *           SyntaxHighlighter: MermaidDiagram\n *         },\n *       }}\n *     />\n *   );\n * };\n */\nconst MermaidDiagramImpl: FC<MermaidDiagramProps> = ({\n  code,\n  className,\n  node: _node,\n  components: _components,\n  language: _language,\n}) => {\n  const isStreaming = useAuiState(\n    (s) => s.optional.part?.status.type === \"running\",\n  );\n\n  return (\n    <MermaidDiagramBase\n      code={code}\n      {...(className !== undefined ? { className } : {})}\n      streaming={isStreaming}\n    />\n  );\n};\n\nconst MermaidDiagram = memo(\n  MermaidDiagramImpl,\n) as unknown as FC<MermaidDiagramProps> & {\n  Zoom: typeof MermaidZoom;\n};\n\nMermaidDiagram.displayName = \"MermaidDiagram\";\nMermaidDiagram.Zoom = MermaidZoom;\n\nexport { MermaidDiagram, MermaidZoom };\n"
    }
  ]
}