@inferencesh/ui 0.0.0-stage → 0.1.2

package/src/markdown/docs-markdown-renderer.tsx

@@ -0,0 +1,518 @@
+'use client'
+
+import { cn } from "cn"
+import ZoomableImage from "../components/zoomable-image"
+import { Hash, Link as LinkIcon } from 'lucide-react'
+import React, { memo, useMemo } from 'react'
+import Markdown from 'react-markdown'
+import { safeUrlTransform } from '../lib/safe-content'
+import remarkGfm from 'remark-gfm'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize, { defaultSchema, type Options as SanitizeSchema } from 'rehype-sanitize'
+import type { Root, Code } from 'mdast'
+
+/** What raw HTML in markdown may keep. This renderer shows user-written
+ *  content (skills, knowledge, agent output) on the app's own origin, so raw
+ *  HTML goes through GitHub's allowlist (defaultSchema: no script, iframe,
+ *  object, embed, style, event handlers or javascript: URLs), plus the
+ *  attribute the docs components switch on (div data-type; title is already
+ *  allowed everywhere) and the code-fence meta string.
+ *
+ *  Ids: remark-rehype already prefixes the ids it generates (footnotes) with
+ *  user-content-, so the schema does not clobber ids again (that would make
+ *  user-content-user-content-fn-1 and break footnote links). Instead an id
+ *  is kept only when it carries that prefix, which still stops raw HTML from
+ *  naming elements after document or window properties (DOM clobbering). */
+export const markdownSanitizeSchema: SanitizeSchema = {
+  ...defaultSchema,
+  clobber: ['name'],
+  attributes: {
+    ...defaultSchema.attributes,
+    '*': [...(defaultSchema.attributes?.['*'] ?? []).filter((a) => a !== 'id'), ['id', /^user-content-/]],
+    div: [...(defaultSchema.attributes?.div ?? []), 'dataType'],
+    code: [...(defaultSchema.attributes?.code ?? []), 'dataMeta'],
+  },
+}
+
+/** Remark plugin that preserves code-fence meta strings (e.g. ```text Python)
+ *  as data-meta attributes so they survive the remark→rehype conversion. */
+function remarkCodeMeta() {
+  return (tree: Root) => {
+    function walk(node: Root | Root['children'][number]) {
+      if (node.type === 'code') {
+        const code = node as Code
+        if (code.meta) {
+          ;(code as any).data = (code as any).data || {}
+          ;(code as any).data.hProperties = (code as any).data.hProperties || {}
+          ;(code as any).data.hProperties['data-meta'] = code.meta
+        }
+      }
+      if ('children' in node && Array.isArray(node.children)) {
+        for (const child of node.children) walk(child)
+      }
+    }
+    walk(tree)
+  }
+}
+import { Callout } from '../docs/callout'
+import { CodeGroup } from '../docs/code-group'
+import { DocsTabs, DocsTab } from '../docs/doc-tabs'
+import { Steps, Step } from '../docs/steps'
+import { isCloudInferenceUrl, isVideoUrl, getYouTubeVideoId, stripHtmlComments } from './helpers'
+import { YouTubeEmbed } from './youtube-embed'
+import { CodeBlock as MarkdownCodeBlock } from '../components/code-block'
+
+// Heading with anchor link
+function HeadingWithAnchor({
+  level,
+  children,
+  id,
+}: {
+  level: 1 | 2 | 3 | 4 | 5 | 6
+  children: React.ReactNode
+  id?: string
+}) {
+  const getTextContent = (node: React.ReactNode): string => {
+    if (typeof node === 'string') return node
+    if (typeof node === 'number') return String(node)
+    if (!node) return ''
+    if (Array.isArray(node)) return node.map(getTextContent).join('')
+    if (React.isValidElement(node)) {
+      return getTextContent((node.props as { children?: React.ReactNode }).children)
+    }
+    return ''
+  }
+
+  const text = getTextContent(children)
+  const headingId =
+    id ||
+    text
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/(^-|-$)/g, '')
+
+  const Tag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  const sizeClasses = {
+    1: 'text-3xl font-bold mt-0 mb-6',
+    2: 'text-2xl font-bold mt-12 mb-4 pb-2 border-b border-border',
+    3: 'text-xl font-semibold mt-10 mb-3',
+    4: 'text-lg font-semibold mt-8 mb-2',
+    5: 'text-base font-semibold mt-6 mb-2',
+    6: 'text-base font-medium mt-4 mb-2',
+  }
+
+  return (
+    <Tag
+      id={headingId}
+      className={cn(
+        sizeClasses[level],
+        'group scroll-mt-20 flex items-center gap-2 lowercase',
+        '[&:first-child]:mt-0'
+      )}
+    >
+      {children}
+      <a
+        href={`#${headingId}`}
+        className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-brand-pink"
+        aria-label={`Link to ${text}`}
+      >
+        <Hash className="h-4 w-4" />
+      </a>
+    </Tag>
+  )
+}
+
+// Parse callout blocks from blockquotes
+function parseCalloutFromBlockquote(children: React.ReactNode): {
+  type: 'note' | 'tip' | 'info' | 'warning' | 'danger' | 'example' | 'terminal'
+  title?: string
+  content: React.ReactNode
+} | null {
+  const childArray = React.Children.toArray(children)
+  if (childArray.length === 0) return null
+
+  const firstChild = childArray[0]
+  if (!React.isValidElement(firstChild)) return null
+
+  const props = firstChild.props as { children?: React.ReactNode }
+  if (!props.children) return null
+
+  const innerChildren = React.Children.toArray(props.children)
+  if (innerChildren.length === 0) return null
+
+  const firstText = innerChildren[0]
+  if (typeof firstText !== 'string') return null
+
+  const match = firstText.match(
+    /^\[!(NOTE|TIP|INFO|WARNING|DANGER|EXAMPLE|TERMINAL)\](?:\s*(.*))?/
+  )
+  if (!match) return null
+
+  const type = match[1].toLowerCase() as
+    | 'note'
+    | 'tip'
+    | 'info'
+    | 'warning'
+    | 'danger'
+    | 'example'
+    | 'terminal'
+  const title = match[2]?.trim() || undefined
+
+  const restOfFirstText = firstText
+    .replace(
+      /^\[!(NOTE|TIP|INFO|WARNING|DANGER|EXAMPLE|TERMINAL)\](?:\s*(.*))?/,
+      ''
+    )
+    .trim()
+  const restOfInnerChildren = innerChildren.slice(1)
+  const restOfChildren = childArray.slice(1)
+
+  const content = (
+    <>
+      {restOfFirstText && <p>{restOfFirstText}</p>}
+      {restOfInnerChildren}
+      {restOfChildren}
+    </>
+  )
+
+  return { type, title, content }
+}
+
+// Parse YAML frontmatter from markdown content.
+// Returns [frontmatter entries, body without frontmatter].
+function parseFrontmatter(content: string): [Record<string, string>, string] {
+  if (!content.startsWith('---')) return [{}, content]
+  const lines = content.split('\n')
+  let endIndex = -1
+  for (let i = 1; i < lines.length; i++) {
+    if (lines[i].trim() === '---') {
+      endIndex = i
+      break
+    }
+  }
+  if (endIndex === -1) return [{}, content]
+
+  const entries: Record<string, string> = {}
+  let currentKey = ''
+  let currentValue = ''
+
+  for (let i = 1; i < endIndex; i++) {
+    const line = lines[i]
+    const match = line.match(/^(\w[\w-]*):\s*(.*)/)
+    if (match) {
+      if (currentKey) entries[currentKey] = currentValue.trim()
+      currentKey = match[1]
+      currentValue = match[2]
+    } else if (currentKey && (line.startsWith('  ') || line.startsWith('\t'))) {
+      currentValue += ' ' + line.trim()
+    }
+  }
+  if (currentKey) entries[currentKey] = currentValue.trim()
+
+  const body = lines.slice(endIndex + 1).join('\n').replace(/^\n/, '')
+  return [entries, body]
+}
+
+// Render frontmatter as a GitHub-style metadata table
+function FrontmatterTable({ entries }: { entries: Record<string, string> }) {
+  const keys = Object.keys(entries).filter(k => entries[k])
+  if (keys.length === 0) return null
+
+  return (
+    <div className="my-4 w-full overflow-x-auto rounded-xl border border-border">
+      <table className="w-full text-sm">
+        <tbody>
+          {keys.map(key => (
+            <tr key={key} className="border-b border-border last:border-0 hover:bg-muted/30 transition-colors">
+              <td className="px-4 py-2 font-medium text-muted-foreground w-1/4 bg-muted/30">{key}</td>
+              <td className="px-4 py-2 text-foreground/90">{entries[key]}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export interface DocsMarkdownRendererProps {
+  content: string
+  className?: string
+  /** Custom renderer for cloud.inference.sh file links */
+  renderFilePreview?: (props: { uri: string; filename: string }) => React.ReactNode
+  /** Custom renderer for cloud.inference.sh images */
+  renderCloudImage?: (props: { src: string; alt?: string }) => React.ReactNode
+}
+
+export const DocsMarkdownRenderer = memo(function DocsMarkdownRenderer({
+  content,
+  className,
+  renderFilePreview,
+  renderCloudImage,
+}: DocsMarkdownRendererProps) {
+  const [frontmatter, bodyContent] = useMemo(
+    () => parseFrontmatter(content),
+    [content]
+  )
+  const processedContent = useMemo(
+    () => stripHtmlComments(bodyContent),
+    [bodyContent]
+  )
+
+  return (
+    <div className={cn('docs-content', className)}>
+      {Object.keys(frontmatter).length > 0 && (
+        <FrontmatterTable entries={frontmatter} />
+      )}
+      <Markdown
+        urlTransform={safeUrlTransform}
+        remarkPlugins={[remarkCodeMeta, [remarkGfm, { singleTilde: false }]]}
+        rehypePlugins={[rehypeRaw, [rehypeSanitize, markdownSanitizeSchema]]}
+        components={{
+          // Headings with anchors
+          h1: ({ children }) => <HeadingWithAnchor level={1}>{children}</HeadingWithAnchor>,
+          h2: ({ children }) => <HeadingWithAnchor level={2}>{children}</HeadingWithAnchor>,
+          h3: ({ children }) => <HeadingWithAnchor level={3}>{children}</HeadingWithAnchor>,
+          h4: ({ children }) => <HeadingWithAnchor level={4}>{children}</HeadingWithAnchor>,
+          h5: ({ children }) => <HeadingWithAnchor level={5}>{children}</HeadingWithAnchor>,
+          h6: ({ children }) => <HeadingWithAnchor level={6}>{children}</HeadingWithAnchor>,
+
+          // Paragraphs
+          p: ({ children }) => {
+            const childArray = React.Children.toArray(children)
+            const hasBlockContent = childArray.some(
+              (child) => {
+                if (!React.isValidElement(child)) return false
+                const props = child.props as { href?: string; src?: string; children?: React.ReactNode }
+                if (props.src) return true
+                if (props.href && isCloudInferenceUrl(props.href)) return true
+                // YouTube embed only when it's a bare link (link text = URL)
+                if (props.href && getYouTubeVideoId(props.href)) {
+                  const linkChildren = React.Children.toArray(props.children)
+                  return linkChildren.length === 1 && typeof linkChildren[0] === 'string' && !!getYouTubeVideoId(linkChildren[0])
+                }
+                return false
+              }
+            )
+            if (hasBlockContent) {
+              return <div className="my-4">{children}</div>
+            }
+            return (
+              <p className="text-base leading-7 text-foreground/90 my-4 [&:first-child]:mt-0 [&:last-child]:mb-0">
+                {children}
+              </p>
+            )
+          },
+
+          // Blockquotes - with callout detection
+          blockquote: ({ children }) => {
+            const callout = parseCalloutFromBlockquote(children)
+            if (callout) {
+              return (
+                <Callout type={callout.type} title={callout.title}>
+                  {callout.content}
+                </Callout>
+              )
+            }
+            return (
+              <blockquote className="my-6 border-l-4 border-muted-foreground/20 pl-4 text-muted-foreground italic">
+                {children}
+              </blockquote>
+            )
+          },
+
+          // Lists
+          ul: ({ children }) => (
+            <ul className="my-4 ml-6 list-disc space-y-2 marker:text-muted-foreground/50">
+              {children}
+            </ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="my-4 ml-6 list-decimal space-y-2 marker:text-muted-foreground/50">
+              {children}
+            </ol>
+          ),
+          // id: footnote items (user-content-fn-N) are the targets of the
+          // footnote references.
+          li: ({ children, id }) => (
+            <li id={id} className="text-base leading-7 text-foreground/90 pl-1">
+              {children}
+            </li>
+          ),
+
+          // Inline elements
+          strong: ({ children }) => (
+            <strong className="font-semibold text-foreground">{children}</strong>
+          ),
+          em: ({ children }) => <em className="italic">{children}</em>,
+
+          // Code
+          code(props) {
+            const { children, className, node } = props as any
+            const match = /language-(\w+)/.exec(className || '')
+            const hasNewlines = String(children).includes('\n')
+            const isBlock = match || hasNewlines
+            const meta = node?.properties?.['dataMeta'] || undefined
+
+            if (isBlock) {
+              return (
+                <code className={cn('font-mono', className)} data-meta={meta}>{children}</code>
+              )
+            }
+            // Inline code
+            return (
+              <code className="relative rounded-md bg-muted px-[0.4rem] py-[0.2rem] font-mono text-sm text-brand-pink">
+                {children}
+              </code>
+            )
+          },
+
+          pre: ({ children }) => {
+            const codeChild = React.Children.toArray(children)[0]
+            let language: string | undefined
+            let meta: string | undefined
+            if (React.isValidElement(codeChild)) {
+              const codeProps = codeChild.props as { className?: string; 'data-meta'?: string }
+              const className = codeProps.className || ''
+              const match = /language-(\w+)/.exec(className)
+              if (match) {
+                language = match[1]
+              }
+              meta = codeProps['data-meta']
+            }
+            // textSize is explicit because the shared CodeBlock defaults to
+            // text-xs for the app's dense panels; docs prose wants text-sm.
+            return <MarkdownCodeBlock language={language} data-meta={meta} textSize="text-sm">{children}</MarkdownCodeBlock>
+          },
+
+          // Links
+          // id: footnote references (user-content-fnref-N) are the targets
+          // of the footnotes' back links.
+          a: ({ href, children, id }) => {
+            if (href) {
+              // YouTube videos — only embed when the link text is the URL itself
+              // (bare URL on its own line), not when it has a custom label like [text](url)
+              const videoId = getYouTubeVideoId(href)
+              const childArray = React.Children.toArray(children)
+              const isBareLink = childArray.length === 1 && typeof childArray[0] === 'string' && getYouTubeVideoId(childArray[0])
+              if (videoId && isBareLink) {
+                return <YouTubeEmbed videoId={videoId} />
+              }
+
+              // Cloud video URLs — embed as <video> player
+              if (isCloudInferenceUrl(href) && isVideoUrl(href)) {
+                return (
+                  <video
+                    src={href}
+                    controls
+                    playsInline
+                    className="my-6 rounded-xl w-full max-w-2xl"
+                  />
+                )
+              }
+
+              // Cloud file previews (custom renderer)
+              if (isCloudInferenceUrl(href) && renderFilePreview) {
+                return renderFilePreview({
+                  uri: href,
+                  filename: typeof children === 'string' ? children : 'file',
+                })
+              }
+
+              // External vs internal links
+              const isExternal = href.startsWith('http')
+              return (
+                <a
+                  id={id}
+                  href={href}
+                  className="text-brand-pink font-medium hover:underline underline-offset-4 inline-flex items-center gap-1"
+                  target={isExternal ? '_blank' : undefined}
+                  rel={isExternal ? 'noopener noreferrer' : undefined}
+                >
+                  {children}
+                  {isExternal && <LinkIcon className="h-3 w-3" />}
+                </a>
+              )
+            }
+            return <>{children}</>
+          },
+
+          // Images
+          img: ({ src, alt }) => {
+            if (!src || typeof src !== 'string') return null
+
+            // Cloud images (custom renderer)
+            if (isCloudInferenceUrl(src) && renderCloudImage) {
+              return renderCloudImage({ src, alt })
+            }
+
+            return (
+              <ZoomableImage
+                src={src}
+                alt={alt || ''}
+                className="my-6 rounded-xl border border-border max-w-full h-auto"
+              />
+            )
+          },
+
+          // Tables
+          table: ({ children }) => (
+            <div className="my-6 w-full overflow-x-auto rounded-xl border border-border">
+              <table className="w-full text-sm">{children}</table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-muted/50 border-b border-border">
+              {children}
+            </thead>
+          ),
+          tbody: ({ children }) => <tbody>{children}</tbody>,
+          tr: ({ children }) => (
+            <tr className="border-b border-border last:border-0 hover:bg-muted/30 transition-colors">
+              {children}
+            </tr>
+          ),
+          th: ({ children }) => (
+            <th className="px-4 py-3 text-left font-semibold text-foreground">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td className="px-4 py-3 text-foreground/90">{children}</td>
+          ),
+
+          // Horizontal rule
+          hr: () => <hr className="my-8 border-t border-border" />,
+
+          // Strikethrough
+          s: ({ children }) => (
+            <s className="line-through text-muted-foreground">{children}</s>
+          ),
+
+          // Custom components via data-type attribute
+          div: ({ children, node, ...props }) => {
+            const dataType = node?.properties?.['dataType'] as string | undefined
+
+            switch (dataType) {
+              case 'codegroup':
+                return <CodeGroup>{children}</CodeGroup>
+              case 'tabs':
+                return <DocsTabs>{children}</DocsTabs>
+              case 'tab':
+                const tabTitle = node?.properties?.['title'] as string | undefined
+                return <DocsTab title={tabTitle || 'Tab'}>{children}</DocsTab>
+              case 'steps':
+                return <Steps>{children}</Steps>
+              case 'step':
+                const stepTitle = node?.properties?.['title'] as string | undefined
+                return <Step title={stepTitle || ''}>{children}</Step>
+              default:
+                return <div {...props}>{children}</div>
+            }
+          },
+        }}
+      >
+        {processedContent}
+      </Markdown>
+    </div>
+  )
+})

package/src/markdown/helpers.ts

@@ -0,0 +1,95 @@
+// Shared markdown utilities
+
+/**
+ * Detect if URL is from cloud.inference.sh
+ */
+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
+  }
+}
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.mov', '.ogg']
+
+/**
+ * Check if a URL points to a video file
+ */
+export function isVideoUrl(url: string): boolean {
+  try {
+    const pathname = new URL(url).pathname.toLowerCase()
+    return VIDEO_EXTENSIONS.some(ext => pathname.endsWith(ext))
+  } catch {
+    return false
+  }
+}
+
+/**
+ * Strip HTML comments from markdown content
+ */
+export function stripHtmlComments(content: string): string {
+  return content.replace(/<!--[\s\S]*?-->/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
+}
+

package/src/markdown/index.ts

@@ -0,0 +1,24 @@
+// Markdown rendering components
+// Shared between app and web
+
+// Renderers
+export { MarkdownRenderer } from './markdown-renderer'
+export { DocsMarkdownRenderer } from './docs-markdown-renderer'
+export type { MarkdownRendererProps } from './markdown-renderer'
+export type { DocsMarkdownRendererProps } from './docs-markdown-renderer'
+
+// Components
+export { YouTubeEmbed } from './youtube-embed'
+
+// Code blocks - re-export from the code-block module with backward-compatible names
+export { CodeBlock as MarkdownCodeBlock, CompactCodeBlock } from '../components/code-block'
+export type { CodeBlockProps as MarkdownCodeBlockProps } from '../components/code-block'
+
+// Helpers
+export {
+  isCloudInferenceUrl,
+  getYouTubeVideoId,
+  stripHtmlComments,
+  isLikelyMarkdown,
+} from './helpers'
+