{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shiki-highlighter",
  "type": "registry:component",
  "title": "Shiki Highlighter",
  "description": "Code block highlighting powered by react-shiki.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-shiki-highlighter.json"
  ],
  "dependencies": [
    "react-shiki",
    "@assistant-ui/react",
    "@assistant-ui/react-markdown"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/shiki-highlighter.aui.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/shiki-highlighter.aui.tsx",
      "content": "\"use client\";\n\nimport type { FC } from \"react\";\nimport type { ShikiHighlighterProps } from \"react-shiki\";\nimport { useAuiState } from \"@assistant-ui/react\";\nimport type { SyntaxHighlighterProps as AUIProps } from \"@assistant-ui/react-markdown\";\nimport { SyntaxHighlighter as SyntaxHighlighterBase } from \"./shiki-highlighter\";\n\n/**\n * Props for the SyntaxHighlighter component\n */\nexport type HighlighterProps = Omit<\n  ShikiHighlighterProps,\n  \"children\" | \"theme\"\n> & {\n  theme?: ShikiHighlighterProps[\"theme\"];\n} & Pick<AUIProps, \"language\" | \"code\"> &\n  Partial<Pick<AUIProps, \"node\" | \"components\">>;\n\n/**\n * SyntaxHighlighter component, using react-shiki\n * Use it by passing to `defaultComponents` in `markdown-text.tsx`\n *\n * Skips tokenization while the message part is streaming and renders the\n * plain code in the same container, so streaming costs no Shiki work and\n * settling is a color change rather than a layout shift.\n *\n * @example\n * const defaultComponents = memoizeMarkdownComponents({\n *   SyntaxHighlighter,\n *   h1: //...\n *   //...other elements...\n * });\n */\nexport const SyntaxHighlighter: FC<HighlighterProps> = ({\n  node: _node,\n  components: _components,\n  ...props\n}) => {\n  const isStreaming = useAuiState(\n    (s) => s.optional.part?.status.type === \"running\",\n  );\n\n  return <SyntaxHighlighterBase {...props} streaming={isStreaming} />;\n};\n\nSyntaxHighlighter.displayName = \"SyntaxHighlighter\";\n"
    }
  ]
}