+
{/* Render images first */}
{imageBlocks.length > 0 && (
@@ -706,14 +601,20 @@ function MessageBubble({
}
// Render a single content block
-function renderContentBlock(block: ContentBlock, idx: number): React.JSX.Element | null {
+function renderContentBlock(
+ block: ContentBlock,
+ idx: number,
+ isStreaming: boolean = false
+): React.JSX.Element | null {
switch (block.type) {
case 'thought':
return ![]()
b.content)
.join('\n\n')
+ // Streaming state: only the last text block is streaming when message is not complete
+ const isStreaming = !isComplete
+
// Not collapsible - render all blocks normally
if (!shouldCollapse) {
return (
= {
+ js: 'javascript',
+ ts: 'typescript',
+ py: 'python',
+ sh: 'bash',
+ zsh: 'bash',
+ yml: 'yaml',
+ rb: 'ruby',
+ rs: 'rust',
+ kt: 'kotlin',
+ 'objective-c': 'objc',
+ objc: 'objc'
+}
+
+// Simple LRU cache for highlighted code
+const highlightCache = new Map()
+const CACHE_MAX_SIZE = 200
+
+function getCacheKey(code: string, lang: string, theme: string): string {
+ return `${theme}:${lang}:${code}`
+}
+
+function isValidLanguage(lang: string): lang is BundledLanguage {
+ const normalized = LANGUAGE_ALIASES[lang] || lang
+ return normalized in bundledLanguages
+}
+
+/**
+ * CodeBlock - Syntax highlighted code block using Shiki
+ *
+ * Uses VS Code's syntax highlighting engine for accurate highlighting.
+ * Lazy-loads highlighting and caches results for performance.
+ */
+export function CodeBlock({
+ code,
+ language = 'text',
+ className,
+ mode = 'full',
+ forcedTheme
+}: CodeBlockProps): React.JSX.Element {
+ const [highlighted, setHighlighted] = React.useState(null)
+ const [isLoading, setIsLoading] = React.useState(true)
+ const [copied, setCopied] = React.useState(false)
+
+ // Subscribe to dark mode changes via MutationObserver
+ const isDarkMode = useIsDarkMode()
+
+ // Resolve language alias - keep as string to allow 'text' fallback
+ const langLower = language.toLowerCase()
+ const resolvedLang: string = LANGUAGE_ALIASES[langLower] || langLower
+
+ React.useEffect(() => {
+ let cancelled = false
+
+ async function highlight(): Promise {
+ // Theme priority:
+ // 1. forcedTheme prop - explicit override
+ // 2. isDarkMode from hook - reactive to theme changes
+ let theme: string
+ if (forcedTheme) {
+ theme = forcedTheme === 'dark' ? 'github-dark' : 'github-light'
+ } else {
+ theme = isDarkMode ? 'github-dark' : 'github-light'
+ }
+ const cacheKey = getCacheKey(code, resolvedLang, theme)
+
+ const cached = highlightCache.get(cacheKey)
+ if (cached) {
+ if (!cancelled) {
+ setHighlighted(cached)
+ setIsLoading(false)
+ }
+ return
+ }
+
+ try {
+ // Use valid language or fallback to plaintext
+ const lang = isValidLanguage(resolvedLang) ? resolvedLang : 'text'
+
+ const html = await codeToHtml(code, {
+ lang,
+ theme
+ })
+
+ // Cache the result
+ if (highlightCache.size >= CACHE_MAX_SIZE) {
+ const firstKey = highlightCache.keys().next().value
+ if (firstKey) highlightCache.delete(firstKey)
+ }
+ highlightCache.set(cacheKey, html)
+
+ if (!cancelled) {
+ setHighlighted(html)
+ setIsLoading(false)
+ }
+ } catch (error) {
+ // Fallback to plain text on error
+ console.warn(`Shiki highlighting failed for language "${resolvedLang}":`, error)
+ if (!cancelled) {
+ setHighlighted(null)
+ setIsLoading(false)
+ }
+ }
+ }
+
+ highlight()
+
+ return () => {
+ cancelled = true
+ }
+ }, [code, resolvedLang, forcedTheme, isDarkMode])
+
+ const handleCopy = React.useCallback(async () => {
+ try {
+ await navigator.clipboard.writeText(code)
+ setCopied(true)
+ setTimeout(() => setCopied(false), 2000)
+ } catch (err) {
+ console.error('Failed to copy code:', err)
+ }
+ }, [code])
+
+ // Terminal mode: raw monospace with minimal styling
+ if (mode === 'terminal') {
+ return (
+ {
+ const baseComponents: Partial = {
+ // Links: Make clickable with callbacks
+ a: ({ href, children }) => {
+ const handleClick = (e: React.MouseEvent): void => {
+ e.preventDefault()
+ if (href) {
+ // Check if it's a file path
+ if (FILE_PATH_REGEX.test(href) && onFileClick) {
+ onFileClick(href)
+ } else if (onUrlClick) {
+ onUrlClick(href)
+ } else {
+ // Default: open in new window
+ window.open(href, '_blank', 'noopener,noreferrer')
+ }
+ }
+ }
+
+ return (
+
+ {children}
+
+ )
+ }
+ }
+
+ // Terminal mode: minimal formatting
+ if (mode === 'terminal') {
+ return {
+ ...baseComponents,
+ // No special code handling - just monospace
+ code: ({ children }) => {children} ,
+ // Plain tables
+ table: ({ children }) => {children}
,
+ th: ({ children }) => {children} ,
+ td: ({ children }) => {children}
+ }
+ }
+
+ // Minimal mode: clean with syntax highlighting
+ if (mode === 'minimal') {
+ return {
+ ...baseComponents,
+ // Inline code
+ code: ({ className, children, ...props }) => {
+ const match = /language-(\w+)/.exec(className || '')
+ const isBlock =
+ 'node' in props && props.node?.position?.start.line !== props.node?.position?.end.line
+
+ // Block code - use CodeBlock with full mode
+ if (match || isBlock) {
+ const code = String(children).replace(/\n$/, '')
+ return {children}
+ },
+ pre: ({ children }) => <>{children},
+ // Comfortable paragraph spacing
+ p: ({ children }) => {children} ,
+ // Clean tables
+ table: ({ children }) => (
+ {children}
+ ),
+ td: ({ children }) => {children} ,
+ // Headings - H1/H2 same size, differentiated by weight
+ h1: ({ children }) =>
, + // Strong/emphasis + strong: ({ children }) => {children}, + em: ({ children }) => {children} + } + } + + // Full mode: rich styling + return { + ...baseComponents, + // Full code blocks with copy button + code: ({ className, children, ...props }) => { + const match = /language-(\w+)/.exec(className || '') + const isBlock = + 'node' in props && props.node?.position?.start.line !== props.node?.position?.end.line + + if (match || isBlock) { + const code = String(children).replace(/\n$/, '') + return{children}
+ },
+ pre: ({ children }) => <>{children},
+ // Rich paragraph spacing
+ p: ({ children }) => {children} ,
+ // Beautiful tables
+ table: ({ children }) => (
+ {children} ,
+ td: ({ children }) => {children} ,
+ tr: ({ children }) => {children} ,
+ // Rich headings
+ h1: ({ children }) =>
, + // Strong/emphasis + strong: ({ children }) => {children}, + em: ({ children }) => {children}, + del: ({ children }) =>{children}
+ }
+}
+
+/**
+ * Markdown - Customizable markdown renderer with multiple render modes
+ *
+ * Features:
+ * - Three render modes: terminal, minimal, full
+ * - Syntax highlighting via Shiki
+ * - GFM support (tables, task lists, strikethrough)
+ * - Clickable links and file paths
+ * - Memoization for streaming performance
+ */
+export function Markdown({
+ children,
+ mode = 'minimal',
+ className,
+ onUrlClick,
+ onFileClick
+}: MarkdownProps): React.JSX.Element {
+ const components = React.useMemo(
+ () => createComponents(mode, onUrlClick, onFileClick),
+ [mode, onUrlClick, onFileClick]
+ )
+
+ // Preprocess to convert raw URLs and file paths to markdown links
+ const processedContent = React.useMemo(() => preprocessLinks(children), [children])
+
+ return (
+
+ {content}
+
+ )
+ },
+ (prev, next) => {
+ // Only re-render if content actually changed
+ return prev.content === next.content && prev.mode === next.mode
+ }
+)
+MemoizedBlock.displayName = 'MemoizedBlock'
+
+/**
+ * StreamingMarkdown - Optimized markdown renderer for streaming content
+ *
+ * Splits content into blocks (paragraphs, code blocks) and memoizes each block
+ * independently. Only the last (active) block re-renders during streaming.
+ *
+ * Key insight: Completed blocks get a content-hash as their React key.
+ * Same content = same key = React skips re-render entirely.
+ *
+ * @example
+ * Content: "Hello\n\n```js\ncode\n```\n\nMore..."
+ *
+ * Block 1: "Hello" -> key="block-abc123" -> memoized
+ * Block 2: "```js\ncode\n```" -> key="block-xyz789" -> memoized
+ * Block 3: "More..." -> key="active-2" -> re-renders
+ */
+export function StreamingMarkdown({
+ content,
+ isStreaming,
+ mode = 'minimal',
+ onUrlClick,
+ onFileClick
+}: StreamingMarkdownProps): React.JSX.Element {
+ // Split into blocks - memoized to avoid recomputation
+ // Must be called unconditionally to satisfy Rules of Hooks
+ const blocks = React.useMemo(
+ () => (isStreaming ? splitIntoBlocks(content) : []),
+ [content, isStreaming]
+ )
+
+ // Not streaming - use simple Markdown (no block splitting needed)
+ if (!isStreaming) {
+ return (
+
+ {content}
+
+ )
+ }
+
+ return (
+ <>
+ {blocks.map((block, i) => {
+ const isLastBlock = i === blocks.length - 1
+
+ // Complete blocks use content hash as key -> stable identity -> memoized
+ // Last block uses "active" prefix -> always re-renders on content change
+ const key = isLastBlock ? `active-${i}` : `block-${simpleHash(block.content)}`
+
+ return (
+
- {blocks.map((block, idx) => renderContentBlock(block, idx))}
+ {blocks.map((block, idx) => {
+ // Only the last text block gets streaming optimization
+ const isLastTextBlock =
+ block.type === 'text' && blocks.slice(idx + 1).every((b) => b.type !== 'text')
+ return renderContentBlock(block, idx, isStreaming && isLastTextBlock)
+ })}
{/* Processing: show spinner + time + label */}
{isProcessing && (
-
- {content}
-
+
{/* Preview when collapsed */}
{!isExpanded && isLong && (
diff --git a/src/renderer/src/components/markdown/CodeBlock.tsx b/src/renderer/src/components/markdown/CodeBlock.tsx
new file mode 100644
index 000000000..ced571483
--- /dev/null
+++ b/src/renderer/src/components/markdown/CodeBlock.tsx
@@ -0,0 +1,287 @@
+import * as React from 'react'
+import { codeToHtml, bundledLanguages, type BundledLanguage } from 'shiki'
+import { cn } from '@/lib/utils'
+
+/**
+ * Hook to detect dark mode changes via MutationObserver
+ * Returns true if 'dark' class is present on document.documentElement
+ */
+function useIsDarkMode(): boolean {
+ const [isDark, setIsDark] = React.useState(() =>
+ document.documentElement.classList.contains('dark')
+ )
+
+ React.useEffect(() => {
+ const observer = new MutationObserver((mutations) => {
+ for (const mutation of mutations) {
+ if (mutation.attributeName === 'class') {
+ setIsDark(document.documentElement.classList.contains('dark'))
+ }
+ }
+ })
+
+ observer.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ['class']
+ })
+
+ return () => observer.disconnect()
+ }, [])
+
+ return isDark
+}
+
+export interface CodeBlockProps {
+ code: string
+ language?: string
+ className?: string
+ /**
+ * Render mode affects code block styling:
+ * - 'terminal': Minimal, keeps control chars visible
+ * - 'minimal': Clean code, basic styling
+ * - 'full': Rich styling with background, copy button, etc.
+ */
+ mode?: 'terminal' | 'minimal' | 'full'
+ /**
+ * Force a specific theme. If not provided, detects from document.documentElement.classList
+ */
+ forcedTheme?: 'light' | 'dark'
+}
+
+// Map common aliases to Shiki language names
+const LANGUAGE_ALIASES: Record
+ {isStreaming ? (
+ {content}
+ )}
)
}
@@ -927,21 +844,21 @@ function ThoughtBlockView({ text }: { text: string }): React.JSX.Element | null
- {text}
+ {text}
- {text}
+ {text}
)}
{/* Show full content when not long */}
{!isLong && (
- {text}
+ {text}
)}
+ {code}
+
+ )
+ }
+
+ // Minimal mode: just syntax highlighting, no chrome
+ if (mode === 'minimal') {
+ if (isLoading || !highlighted) {
+ return (
+
+ {code}
+
+ )
+ }
+
+ return (
+
+ )
+ }
+
+ // Full mode: rich styling with header and copy button
+ return (
+
+ {/* Language label + copy button */}
+
+ )
+}
+
+/**
+ * InlineCode - Styled inline code span
+ * Features: subtle background (3%), subtle border (5%), 75% opacity text
+ */
+export function InlineCode({
+ children,
+ className
+}: {
+ children: React.ReactNode
+ className?: string
+}): React.JSX.Element {
+ return (
+
+
+ {resolvedLang !== 'text' ? resolvedLang : 'plain text'}
+
+
+
+
+ {/* Code content */}
+
+ {isLoading || !highlighted ? (
+
+
+ {code}
+
+ ) : (
+
+ )}
+
+ {children}
+
+ )
+}
diff --git a/src/renderer/src/components/markdown/Markdown.tsx b/src/renderer/src/components/markdown/Markdown.tsx
new file mode 100644
index 000000000..114b71e41
--- /dev/null
+++ b/src/renderer/src/components/markdown/Markdown.tsx
@@ -0,0 +1,301 @@
+import * as React from 'react'
+import ReactMarkdown, { type Components } from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import remarkGfm from 'remark-gfm'
+import { cn } from '@/lib/utils'
+import { CodeBlock, InlineCode } from './CodeBlock'
+import { preprocessLinks } from './linkify'
+
+/**
+ * Render modes for markdown content:
+ *
+ * - 'terminal': Raw output with minimal formatting, control chars visible
+ * Best for: Debug output, raw logs, when you want to see exactly what's there
+ *
+ * - 'minimal': Clean rendering with syntax highlighting but no extra chrome
+ * Best for: Chat messages, inline content, when you want readability without clutter
+ *
+ * - 'full': Rich rendering with beautiful tables, styled code blocks, proper typography
+ * Best for: Documentation, long-form content, when presentation matters
+ */
+export type RenderMode = 'terminal' | 'minimal' | 'full'
+
+export interface MarkdownProps {
+ children: string
+ /**
+ * Render mode controlling formatting level
+ * @default 'minimal'
+ */
+ mode?: RenderMode
+ className?: string
+ /**
+ * Message ID for memoization (optional)
+ * When provided, memoizes parsed blocks to avoid re-parsing during streaming
+ */
+ id?: string
+ /**
+ * Callback when a URL is clicked
+ */
+ onUrlClick?: (url: string) => void
+ /**
+ * Callback when a file path is clicked
+ */
+ onFileClick?: (path: string) => void
+}
+
+// File path detection regex - matches paths starting with /, ~/, or ./
+const FILE_PATH_REGEX =
+ /^(?:\/|~\/|\.\/)[\w\-./@]+\.(?:ts|tsx|js|jsx|mjs|cjs|md|json|yaml|yml|py|go|rs|css|scss|less|html|htm|txt|log|sh|bash|zsh|swift|kt|java|c|cpp|h|hpp|rb|php|xml|toml|ini|cfg|conf|env|sql|graphql|vue|svelte|astro|prisma)$/i
+
+/**
+ * Create custom components based on render mode
+ */
+function createComponents(
+ mode: RenderMode,
+ onUrlClick?: (url: string) => void,
+ onFileClick?: (path: string) => void
+): Partial{children},
+ pre: ({ children }) => {children},
+ // Minimal paragraph spacing
+ p: ({ children }) => {children}
, + // Simple lists + ul: ({ children }) =>- {children}
- {children}
{children}
, + // Styled lists + ul: ({ children }) => ( +-
+ {children}
+
- {children}
+ {children}
+
+ ),
+ thead: ({ children }) => {children},
+ th: ({ children }) => (
+ {children}
, + h2: ({ children }) => ( +{children}
+ ), + h3: ({ children }) => ( +{children}
+ ), + // Blockquotes + blockquote: ({ children }) => ( ++ {children} ++ ), + // Horizontal rules + hr: () =>
, + // Strong/emphasis + strong: ({ children }) => {children}, + em: ({ children }) => {children} + } + } + + // Full mode: rich styling + return { + ...baseComponents, + // Full code blocks with copy button + code: ({ className, children, ...props }) => { + const match = /language-(\w+)/.exec(className || '') + const isBlock = + 'node' in props && props.node?.position?.start.line !== props.node?.position?.end.line + + if (match || isBlock) { + const code = String(children).replace(/\n$/, '') + return
{children}
, + // Styled lists + ul: ({ children }) => ( +-
+ {children}
+
- {children}
+ {children}
+
+ ),
+ thead: ({ children }) => {children},
+ tbody: ({ children }) => {children},
+ th: ({ children }) => {children}
, + h2: ({ children }) => ( +{children}
+ ), + h3: ({ children }) =>{children}
, + h4: ({ children }) =>{children}
, + // Styled blockquotes + blockquote: ({ children }) => ( ++ {children} ++ ), + // Task lists (GFM) + input: ({ type, checked }) => { + if (type === 'checkbox') { + return ( + + ) + } + return + }, + // Horizontal rules + hr: () =>
, + // Strong/emphasis + strong: ({ children }) => {children}, + em: ({ children }) => {children}, + del: ({ children }) =>
+
+ {processedContent}
+
+
+ )
+}
+
+/**
+ * MemoizedMarkdown - Optimized for streaming scenarios
+ *
+ * Splits content into blocks and memoizes each block separately,
+ * so only new/changed blocks re-render during streaming.
+ */
+export const MemoizedMarkdown = React.memo(Markdown, (prevProps, nextProps) => {
+ // If id is provided, use it for memoization
+ if (prevProps.id && nextProps.id) {
+ return (
+ prevProps.id === nextProps.id &&
+ prevProps.children === nextProps.children &&
+ prevProps.mode === nextProps.mode
+ )
+ }
+ // Otherwise compare content and mode
+ return prevProps.children === nextProps.children && prevProps.mode === nextProps.mode
+})
+MemoizedMarkdown.displayName = 'MemoizedMarkdown'
diff --git a/src/renderer/src/components/markdown/StreamingMarkdown.tsx b/src/renderer/src/components/markdown/StreamingMarkdown.tsx
new file mode 100644
index 000000000..6d68435fd
--- /dev/null
+++ b/src/renderer/src/components/markdown/StreamingMarkdown.tsx
@@ -0,0 +1,186 @@
+import * as React from 'react'
+import { Markdown, type RenderMode } from './Markdown'
+
+export interface StreamingMarkdownProps {
+ content: string
+ isStreaming: boolean
+ mode?: RenderMode
+ onUrlClick?: (url: string) => void
+ onFileClick?: (path: string) => void
+}
+
+interface Block {
+ content: string
+ isCodeBlock: boolean
+}
+
+/**
+ * Simple hash function for cache keys
+ * Uses djb2 algorithm - fast and produces good distribution
+ */
+function simpleHash(str: string): string {
+ let hash = 5381
+ for (let i = 0; i < str.length; i++) {
+ hash = ((hash << 5) + hash) ^ str.charCodeAt(i)
+ }
+ return (hash >>> 0).toString(36)
+}
+
+/**
+ * Split content into blocks (paragraphs and code blocks)
+ *
+ * Block boundaries:
+ * - Double newlines (paragraph separators)
+ * - Code fences (```)
+ *
+ * This is intentionally simple - just string scanning, no regex per line.
+ */
+function splitIntoBlocks(content: string): Block[] {
+ const blocks: Block[] = []
+ const lines = content.split('\n')
+ let currentBlock = ''
+ let inCodeBlock = false
+
+ for (let i = 0; i < lines.length; i++) {
+ const line = lines[i]
+
+ // Check for code fence (``` at start of line, optionally followed by language)
+ if (line.startsWith('```')) {
+ if (!inCodeBlock) {
+ // Starting a code block - flush current paragraph first
+ if (currentBlock.trim()) {
+ blocks.push({ content: currentBlock.trim(), isCodeBlock: false })
+ currentBlock = ''
+ }
+ inCodeBlock = true
+ currentBlock = line + '\n'
+ } else {
+ // Ending a code block
+ currentBlock += line
+ blocks.push({ content: currentBlock, isCodeBlock: true })
+ currentBlock = ''
+ inCodeBlock = false
+ }
+ } else if (inCodeBlock) {
+ // Inside code block - append line
+ currentBlock += line + '\n'
+ } else if (line === '') {
+ // Empty line outside code block = paragraph boundary
+ if (currentBlock.trim()) {
+ blocks.push({ content: currentBlock.trim(), isCodeBlock: false })
+ currentBlock = ''
+ }
+ } else {
+ // Regular text line
+ if (currentBlock) {
+ currentBlock += '\n' + line
+ } else {
+ currentBlock = line
+ }
+ }
+ }
+
+ // Flush remaining content
+ if (currentBlock) {
+ blocks.push({
+ content: inCodeBlock ? currentBlock : currentBlock.trim(),
+ isCodeBlock: inCodeBlock // Unclosed code block = still streaming
+ })
+ }
+
+ return blocks
+}
+
+/**
+ * Memoized block component
+ *
+ * Only re-renders if content or mode changes.
+ * The key is assigned by the parent based on content hash,
+ * so identical content won't even attempt to render.
+ */
+const MemoizedBlock = React.memo(
+ function Block({
+ content,
+ mode,
+ onUrlClick,
+ onFileClick
+ }: {
+ content: string
+ mode: RenderMode
+ onUrlClick?: (url: string) => void
+ onFileClick?: (path: string) => void
+ }) {
+ return (
+