Markdown Renderer (legacy)

1'use client'
2 
3import { cn } from "@/lib/utils"
4import ZoomableImage from "../ui/infsh/zoomable-image"
5import React, { memo, useMemo } from 'react'
6import Markdown from 'react-markdown'
7import remarkGfm from 'remark-gfm'
8import { isCloudInferenceUrl, isVideoUrl, getYouTubeVideoId, stripHtmlComments } from './helpers'
9import { YouTubeEmbed } from './youtube-embed'
10import { CompactCodeBlock } from '../components/infsh/code-block'
11 
12export interface MarkdownRendererProps {
13  content: string
14  className?: string
15  /** Compact mode for dense UI like chat */
16  compact?: boolean
17  /** Custom file preview renderer for cloud URLs */
18  renderFilePreview?: (props: { uri: string; filename: string }) => React.ReactNode
19  /** Custom image renderer for cloud URLs */
20  renderCloudImage?: (props: { src: string; alt?: string }) => React.ReactNode
21}
22 
23const textSizeMap = {
24  default: {
25    h1: 'text-xl',
26    h2: 'text-lg',
27    h3: 'text-md',
28    h4: 'text-base',
29    h5: 'text-sm',
30    h6: 'text-sm',
31    p: 'text-sm',
32    li: 'text-sm',
33    code: 'text-xs',
34    pre: 'text-xs',
35    blockquote: 'text-sm',
36    ul: 'text-sm',
37    ol: 'text-sm',
38    th: 'text-sm',
39    td: 'text-sm',
40  },
41  compact: {
42    h1: 'text-xl',
43    h2: 'text-lg',
44    h3: 'text-base',
45    h4: 'text-xs',
46    h5: 'text-xs',
47    h6: 'text-xs',
48    p: 'text-xs',
49    li: 'text-xs',
50    code: 'text-xs',
51    pre: 'text-xs',
52    blockquote: 'text-xs',
53    ul: 'text-xs',
54    ol: 'text-xs',
55    th: 'text-xs',
56    td: 'text-xs',
57  },
58}
59 
60export const MarkdownRenderer = memo(function MarkdownRenderer({
61  content,
62  className,
63  compact = false,
64  renderFilePreview,
65  renderCloudImage,
66}: MarkdownRendererProps) {
67  const processedContent = useMemo(
68    () => stripHtmlComments(content),
69    [content]
70  )
71 
72  const textSize = compact ? textSizeMap.compact : textSizeMap.default
73  const fontClass = 'legible'
74  const paragraphClass = cn(textSize.p, 'break-words whitespace-pre-wrap my-0 py-0 text-justify leading-relaxed', fontClass)
75 
76  return (
77    <div className={className}>
78      <Markdown
79        remarkPlugins={[[remarkGfm, { singleTilde: false }]]}
80        components={{
81          // Block elements
82          h1: ({ children }) => <h1 className={cn(textSize.h1, 'font-bold my-0 [&:first-child]:mt-0 mt-8 py-0', fontClass)}>{children}</h1>,
83          h2: ({ children }) => <h2 className={cn(textSize.h2, 'font-bold my-0 [&:first-child]:mt-0 mt-8 py-0', fontClass)}>{children}</h2>,
84// … truncated