50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T217d,'use client' import { cn } from "@/lib/utils" import ZoomableImage from "../ui/infsh/zoomable-image" import React, { memo, useMemo } from 'react' import Markdown from 'react-markdown' import remarkGfm from 'remark-gfm' import { isCloudInferenceUrl, isVideoUrl, getYouTubeVideoId, stripHtmlComments } from './helpers' import { YouTubeEmbed } from './youtube-embed' import { CompactCodeBlock } from '../components/infsh/code-block' export interface MarkdownRendererProps { content: string className?: string /** Compact mode for dense UI like chat */ compact?: boolean /** Custom file preview renderer for cloud URLs */ renderFilePreview?: (props: { uri: string; filename: string }) => React.ReactNode /** Custom image renderer for cloud URLs */ renderCloudImage?: (props: { src: string; alt?: string }) => React.ReactNode } const textSizeMap = { default: { h1: 'text-xl', h2: 'text-lg', h3: 'text-md', h4: 'text-base', h5: 'text-sm', h6: 'text-sm', p: 'text-sm', li: 'text-sm', code: 'text-xs', pre: 'text-xs', blockquote: 'text-sm', ul: 'text-sm', ol: 'text-sm', th: 'text-sm', td: 'text-sm', }, compact: { h1: 'text-xl', h2: 'text-lg', h3: 'text-base', h4: 'text-xs', h5: 'text-xs', h6: 'text-xs', p: 'text-xs', li: 'text-xs', code: 'text-xs', pre: 'text-xs', blockquote: 'text-xs', ul: 'text-xs', ol: 'text-xs', th: 'text-xs', td: 'text-xs', }, } export const MarkdownRenderer = memo(function MarkdownRenderer({ content, className, compact = false, renderFilePreview, renderCloudImage, }: MarkdownRendererProps) { const processedContent = useMemo( () => stripHtmlComments(content), [content] ) const textSize = compact ? textSizeMap.compact : textSizeMap.default const fontClass = 'legible' const paragraphClass = cn(textSize.p, 'break-words whitespace-pre-wrap my-0 py-0 text-justify leading-relaxed', fontClass) return (

{children}

, h2: ({ children }) =>

{children}

, h3: ({ children }) =>

{children}

, h4: ({ children }) =>

{children}

, h5: ({ children }) =>

{children}

, h6: ({ children }) =>

{children}

, p: ({ children }) => { // Detect if paragraph contains block-level elements that can't be inside

// This includes YouTube embeds, cloud file previews, and images const hasBlockContent = React.Children.toArray(children).some((child) => { if (!React.isValidElement(child)) return false const props = child.props as { href?: string; src?: string } // Check for YouTube links if (props.href && getYouTubeVideoId(props.href)) return true // Check for cloud URLs if (props.href && isCloudInferenceUrl(props.href)) return true // Check for images if (props.src) return true return false }) // Use div for block content to avoid invalid

inside

nesting return hasBlockContent && !compact ? (

{children}

) : (

{children}

) }, blockquote: ({ children }) => (

{children}

), // Lists ul: ({ children }) =>

{children}, ol: ({ children }) =>

{children}, li: ({ children }) =>

{children}

, // Inline elements strong: ({ children }) => {children}, em: ({ children }) => {children}, code(props) { const { children, className } = props const hasLang = /language-(\w+)/.test(className || '') const hasNewlines = String(children).includes('\n') const isBlock = hasLang || hasNewlines if (isBlock) { return {children} } // Inline code return ( {children} ) }, pre: ({ children }) => ( {children} ), // Links and images a: ({ href, children }) => { if (href && !compact) { // YouTube videos const videoId = getYouTubeVideoId(href) if (videoId) { return } // Cloud video URLs if (isCloudInferenceUrl(href) && isVideoUrl(href)) { return (

) }) 53:T87b,export function isCloudInferenceUrl(url: string): boolean { try { const urlObj = new URL(url) return urlObj.hostname === 'cloud.inference.sh' } catch { return false } } /** * Extract YouTube video ID from various URL formats */ export function getYouTubeVideoId(url: string): string | null { try { if (!url) return null const urlObj = new URL(url) // youtu.be format if (urlObj.hostname === 'youtu.be') { return urlObj.pathname.slice(1) } // youtube.com formats if (urlObj.hostname === 'youtube.com' || urlObj.hostname === 'www.youtube.com') { // Watch URLs: youtube.com/watch?v=VIDEO_ID if (urlObj.searchParams.has('v')) { return urlObj.searchParams.get('v') } // Embed URLs: youtube.com/embed/VIDEO_ID if (urlObj.pathname.startsWith('/embed/')) { return urlObj.pathname.split('/')[2] } } return null } catch { return null } } /** * Strip HTML comments from markdown content */ export function stripHtmlComments(content: string): string { return content.replace(//g, '') } /** * Heuristic: determine if a string is likely Markdown rather than plain text */ export function isLikelyMarkdown(input: string): boolean { if (!input) return false let score = 0 // Headings (# ...) if (/(?:^|\n)\s{0,3}#{1,6} \S/.test(input)) score += 2 // Bold text if (/\*\*[\s\S]*?\*\*/.test(input)) score += 1 // Italic text if (/(?:^|[^*])\*[^*\s][\s\S]*?\*(?:[^*]|$)/.test(input)) score += 1 // Lists (-, *, +, or ordered) if (/(?:^|\n)\s{0,3}(?:[-*+] |\d+\. )\S/.test(input)) score += 1 // Links/images if (/!\[[^\]]*\]$[^)]+$|\[[^\]]+\]$[^)]+$/.test(input)) score += 2 // Code blocks or inline code if (/(?:^|\n)```[\s\S]*?```/.test(input) || /`[^`\n]+`/.test(input)) score += 2 // Blockquote if (/(?:^|\n)\s{0,3}>\s?\S/.test(input)) score += 1 // Tables (GFM) if (/(?:^|\n)\|[^\n]*\|\s*(?:\n)\s*\|?\s*:?-{3,}:?\s*(?:\|\s*:?-{3,}:?\s*)+\|?/.test(input)) score += 2 // Horizontal rule if (/(?:^|\n)\s{0,3}(?:-{3,}|_{3,}|\*{3,})\s*(?:\n|$)/.test(input)) score += 1 return score > 0 } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-markdown",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-markdown","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-markdown"}]]}]}],["$","li","remark-gfm",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/remark-gfm","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"remark-gfm"}]]}]}]]}],["$","$L50",null,{"namespace":"@inferencesh","registryDependencies":["https://inference.sh/ui/r/code-block.json","https://inference.sh/ui/r/youtube-embed.json","https://inference.sh/ui/r/zoomable-image.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"markdown/markdown-renderer.tsx","content":"$52","type":"registry:component"},{"path":"lib/markdown-helpers.ts","content":"$53","type":"registry:lib","target":"lib/markdown-helpers.ts"}],"className":"h-[70svh] min-h-80"}]]}]