ai-response

1'use client';
2 
3import {
4  type BundledLanguage,
5  CodeBlock,
6  CodeBlockBody,
7  CodeBlockContent,
8  CodeBlockCopyButton,
9  CodeBlockFilename,
10  CodeBlockFiles,
11  CodeBlockHeader,
12  CodeBlockItem,
13  type CodeBlockProps,
14  CodeBlockSelect,
15  CodeBlockSelectContent,
16  CodeBlockSelectItem,
17  CodeBlockSelectTrigger,
18  CodeBlockSelectValue,
19} from '@repo/code';
20import type { HTMLAttributes } from 'react';
21import { memo } from 'react';
22import ReactMarkdown, { type Options } from 'react-markdown';
23import rehypeKatex from 'rehype-katex';
24import remarkGfm from 'remark-gfm';
25import remarkMath from 'remark-math';
26import { cn } from '@repo/shadcn-ui/lib/utils';
27import 'katex/dist/katex.min.css';
28 
29export type AIResponseProps = HTMLAttributes<HTMLDivElement> & {
30  children: Options['children'];
31  options?: Options;
32};
33 
34const components: Options['components'] = {
35  ol: ({ node, children, className, ...props }) => (
36    <ol className={cn('ml-4 list-outside list-decimal', className)} {...props}>
37      {children}
38    </ol>
39  ),
40  li: ({ node, children, className, ...props }) => (
41    <li className={cn('py-1', className)} {...props}>
42      {children}
43    </li>
44  ),
45  ul: ({ node, children, className, ...props }) => (
46    <ul className={cn('ml-4 list-outside list-decimal', className)} {...props}>
47      {children}
48    </ul>
49  ),
50  strong: ({ node, children, className, ...props }) => (
51    <span className={cn('font-semibold', className)} {...props}>
52      {children}
53    </span>
54  ),
55  a: ({ node, children, className, ...props }) => (
56    <a
57      className={cn('font-medium text-primary underline', className)}
58      rel="noreferrer"
59      target="_blank"
60      {...props}
61    >
62      {children}
63    </a>
64  ),
65  h1: ({ node, children, className, ...props }) => (
66    <h1
67      className={cn('mt-6 mb-2 font-semibold text-3xl', className)}
68      {...props}
69    >
70      {children}
71    </h1>
72  ),
73  h2: ({ node, children, className, ...props }) => (
74    <h2
75      className={cn('mt-6 mb-2 font-semibold text-2xl', className)}
76      {...props}
77    >
78      {children}
79    </h2>
80  ),
81  h3: ({ node, children, className, ...props }) => (
82    <h3 className={cn('mt-6 mb-2 font-semibold text-xl', className)} {...props}>
83      {children}
84    </h3>
85  ),
86  h4: ({ node, children, className, ...props }) => (
87    <h4 className={cn('mt-6 mb-2 font-semibold text-lg', className)} {...props}>
88      {children}
89    </h4>
90  ),
91  h5: ({ node, children, className, ...props }) => (
92    <h5
93// … truncated