{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-code-block",
  "title": "Ai Code Block",
  "dependencies": [
    "lucide-react@0.546.0",
    "react-syntax-highlighter@15.6.6"
  ],
  "devDependencies": [
    "@types/react-syntax-highlighter@15.5.13"
  ],
  "registryDependencies": [
    "https://ui.orchid.ai/r/orchid-foundation.json",
    "https://ui.orchid.ai/r/orchid-theme.json",
    "https://ui.orchid.ai/r/ui-button.json"
  ],
  "files": [
    {
      "path": "registry/ui/orchid/ai-elements/code-block.tsx",
      "content": "\"use client\";\nimport { oneDark, oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';\nimport type { ComponentProps, HTMLAttributes, ReactNode } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { createContext, useContext, useState } from 'react';\nimport { CheckIcon, CopyIcon } from 'lucide-react';\nimport { Button } from \"../ui/button\";\nimport { cn } from \"../lib/ui-utils\";\ntype CodeBlockContextType = {\n    code: string;\n};\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n    code: '',\n});\nconst SYNTAX_HIGHLIGHTER_CODE_TAG_PROPS = {\n    className: 'font-mono text-sm',\n} as const;\nconst SYNTAX_HIGHLIGHTER_CUSTOM_STYLE = {\n    margin: 0,\n    padding: '1rem',\n    fontSize: '0.875rem',\n    background: 'hsl(var(--background))',\n    color: 'hsl(var(--foreground))',\n} as const;\nconst SYNTAX_HIGHLIGHTER_LINE_NUMBER_STYLE = {\n    color: 'hsl(var(--muted-foreground))',\n    paddingRight: '1rem',\n    minWidth: '2.5rem',\n} as const;\nconst SYNTAX_THEMES = [\n    { id: 'light', className: 'overflow-hidden dark:hidden', style: oneLight },\n    { id: 'dark', className: 'hidden overflow-hidden dark:block', style: oneDark },\n] as const;\nexport type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {\n    code: string;\n    language: string;\n    showLineNumbers?: boolean;\n    children?: ReactNode;\n};\nexport const CodeBlock = ({ code, language, showLineNumbers = false, className, children, ...props }: CodeBlockProps) => (<CodeBlockContext.Provider value={{ code }}>\n    <div className={cn('text-neutral relative w-full overflow-hidden rounded-md', className)} {...props}>\n      <div className=\"relative\">\n        {SYNTAX_THEMES.map((theme) => (<SyntaxHighlighter key={theme.id} className={theme.className} codeTagProps={SYNTAX_HIGHLIGHTER_CODE_TAG_PROPS} customStyle={SYNTAX_HIGHLIGHTER_CUSTOM_STYLE} language={language} lineNumberStyle={SYNTAX_HIGHLIGHTER_LINE_NUMBER_STYLE} showLineNumbers={showLineNumbers} style={theme.style}>\n            {code}\n          </SyntaxHighlighter>))}\n        {children && (<div className=\"absolute top-2 right-2 flex items-center gap-2\">{children}</div>)}\n      </div>\n    </div>\n  </CodeBlockContext.Provider>);\nexport type CodeBlockCopyButtonProps = ComponentProps<typeof Button> & {\n    onCopy?: () => void;\n    onError?: (error: Error) => void;\n    timeout?: number;\n};\nexport const CodeBlockCopyButton = ({ onCopy, onError, timeout = 2000, children, className, ...props }: CodeBlockCopyButtonProps) => {\n    const [isCopied, setIsCopied] = useState(false);\n    const { code } = useContext(CodeBlockContext);\n    const copyToClipboard = async () => {\n        if (typeof window === 'undefined' || !navigator.clipboard.writeText) {\n            onError?.(new Error('Clipboard API not available'));\n            return;\n        }\n        try {\n            await navigator.clipboard.writeText(code);\n            setIsCopied(true);\n            onCopy?.();\n            setTimeout(() => setIsCopied(false), timeout);\n        }\n        catch (error) {\n            onError?.(error as Error);\n        }\n    };\n    const Icon = isCopied ? CheckIcon : CopyIcon;\n    return (<Button className={cn('shrink-0', className)} onClick={copyToClipboard} size=\"icon\" variant=\"ghost\" {...props}>\n      {children ?? <Icon size={14}/>}\n    </Button>);\n};\n",
      "type": "registry:ui",
      "target": "@ui/orchid/ai-elements/code-block.tsx"
    }
  ],
  "type": "registry:ui"
}