{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ai-response",
  "type": "registry:ui",
  "description": "AI response component with streaming support",
  "files": [
    {
      "path": "packages/ai/response.tsx",
      "content": "'use client';\n\nimport {\n  type BundledLanguage,\n  CodeBlock,\n  CodeBlockBody,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFilename,\n  CodeBlockFiles,\n  CodeBlockHeader,\n  CodeBlockItem,\n  type CodeBlockProps,\n  CodeBlockSelect,\n  CodeBlockSelectContent,\n  CodeBlockSelectItem,\n  CodeBlockSelectTrigger,\n  CodeBlockSelectValue,\n} from '@repo/code';\nimport type { HTMLAttributes } from 'react';\nimport { memo } from 'react';\nimport ReactMarkdown, { type Options } from 'react-markdown';\nimport rehypeKatex from 'rehype-katex';\nimport remarkGfm from 'remark-gfm';\nimport remarkMath from 'remark-math';\nimport { cn } from '@repo/shadcn-ui/lib/utils';\nimport 'katex/dist/katex.min.css';\n\nexport type AIResponseProps = HTMLAttributes<HTMLDivElement> & {\n  children: Options['children'];\n  options?: Options;\n};\n\nconst components: Options['components'] = {\n  ol: ({ node, children, className, ...props }) => (\n    <ol className={cn('ml-4 list-outside list-decimal', className)} {...props}>\n      {children}\n    </ol>\n  ),\n  li: ({ node, children, className, ...props }) => (\n    <li className={cn('py-1', className)} {...props}>\n      {children}\n    </li>\n  ),\n  ul: ({ node, children, className, ...props }) => (\n    <ul className={cn('ml-4 list-outside list-decimal', className)} {...props}>\n      {children}\n    </ul>\n  ),\n  strong: ({ node, children, className, ...props }) => (\n    <span className={cn('font-semibold', className)} {...props}>\n      {children}\n    </span>\n  ),\n  a: ({ node, children, className, ...props }) => (\n    <a\n      className={cn('font-medium text-primary underline', className)}\n      rel=\"noreferrer\"\n      target=\"_blank\"\n      {...props}\n    >\n      {children}\n    </a>\n  ),\n  h1: ({ node, children, className, ...props }) => (\n    <h1\n      className={cn('mt-6 mb-2 font-semibold text-3xl', className)}\n      {...props}\n    >\n      {children}\n    </h1>\n  ),\n  h2: ({ node, children, className, ...props }) => (\n    <h2\n      className={cn('mt-6 mb-2 font-semibold text-2xl', className)}\n      {...props}\n    >\n      {children}\n    </h2>\n  ),\n  h3: ({ node, children, className, ...props }) => (\n    <h3 className={cn('mt-6 mb-2 font-semibold text-xl', className)} {...props}>\n      {children}\n    </h3>\n  ),\n  h4: ({ node, children, className, ...props }) => (\n    <h4 className={cn('mt-6 mb-2 font-semibold text-lg', className)} {...props}>\n      {children}\n    </h4>\n  ),\n  h5: ({ node, children, className, ...props }) => (\n    <h5\n      className={cn('mt-6 mb-2 font-semibold text-base', className)}\n      {...props}\n    >\n      {children}\n    </h5>\n  ),\n  h6: ({ node, children, className, ...props }) => (\n    <h6 className={cn('mt-6 mb-2 font-semibold text-sm', className)} {...props}>\n      {children}\n    </h6>\n  ),\n  pre: ({ node, className, children }) => {\n    let language = 'javascript';\n\n    if (typeof node?.properties?.className === 'string') {\n      language = node.properties.className.replace('language-', '');\n    }\n\n    const childrenIsCode =\n      typeof children === 'object' &&\n      children !== null &&\n      'type' in children &&\n      children.type === 'code';\n\n    if (!childrenIsCode) {\n      return <pre>{children}</pre>;\n    }\n\n    const data: CodeBlockProps['data'] = [\n      {\n        language,\n        filename: 'index.js',\n        code: (children.props as { children: string }).children,\n      },\n    ];\n\n    return (\n      <CodeBlock\n        className={cn('my-4 h-auto', className)}\n        data={data}\n        defaultValue={data[0].language}\n      >\n        <CodeBlockHeader>\n          <CodeBlockFiles>\n            {(item) => (\n              <CodeBlockFilename key={item.language} value={item.language}>\n                {item.filename}\n              </CodeBlockFilename>\n            )}\n          </CodeBlockFiles>\n          <CodeBlockSelect>\n            <CodeBlockSelectTrigger>\n              <CodeBlockSelectValue />\n            </CodeBlockSelectTrigger>\n            <CodeBlockSelectContent>\n              {(item) => (\n                <CodeBlockSelectItem key={item.language} value={item.language}>\n                  {item.language}\n                </CodeBlockSelectItem>\n              )}\n            </CodeBlockSelectContent>\n          </CodeBlockSelect>\n          <CodeBlockCopyButton\n            onCopy={() => console.log('Copied code to clipboard')}\n            onError={() => console.error('Failed to copy code to clipboard')}\n          />\n        </CodeBlockHeader>\n        <CodeBlockBody>\n          {(item) => (\n            <CodeBlockItem key={item.language} value={item.language}>\n              <CodeBlockContent language={item.language as BundledLanguage}>\n                {item.code}\n              </CodeBlockContent>\n            </CodeBlockItem>\n          )}\n        </CodeBlockBody>\n      </CodeBlock>\n    );\n  },\n};\n\nexport const AIResponse = memo(\n  ({ className, options, children, ...props }: AIResponseProps) => (\n    <div\n      className={cn(\n        'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',\n        className\n      )}\n      {...props}\n    >\n      <ReactMarkdown\n        components={components}\n        rehypePlugins={[rehypeKatex]}\n        remarkPlugins={[remarkGfm, remarkMath]}\n        {...options}\n      >\n        {children}\n      </ReactMarkdown>\n    </div>\n  ),\n  (prevProps, nextProps) => prevProps.children === nextProps.children\n);\n",
      "type": "registry:component"
    }
  ]
}