@vertesia/ui 1.0.0-dev.20260128.144200 → 1.0.0-dev.20260225.024852Z

package/src/widgets/markdown/codeBlockHandlers.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
 import type { CodeBlockRendererProps } from './CodeBlockRendering';
 import { CodeBlockPlaceholder, CodeBlockErrorBoundary } from './CodeBlockPlaceholder';
-import { AgentChart, type AgentChartSpec } from '../../features/agent/chat/AgentChart';
+import type { VegaLiteChartSpec } from '../../features/agent/chat/AgentChart';
 import { VegaLiteChart } from '../../features/agent/chat/VegaLiteChart';
 import { MermaidDiagram } from './MermaidDiagram';
 import { AskUserWidget, type AskUserWidgetProps } from '../../features/agent/chat/AskUserWidget';
 import { useArtifactContent } from './useArtifactContent';
-import { ArtifactContentRenderer, type ExpandRenderType } from './ArtifactContentRenderer';
+import { ArtifactContentRenderer, type ExpandRenderType, sanitizeSvg, makeSvgResponsive } from './ArtifactContentRenderer';
 
 /**
  * Context for passing artifact run ID and callbacks to code block handlers
@@ -125,7 +125,7 @@ function parseChartJson(code: string): Record<string, unknown> | null {
  */
 function detectChartLibrary(
     spec: Record<string, unknown>
-): 'vega-lite' | 'recharts' | null {
+): 'vega-lite' | null {
     // Detect Vega-Lite by $schema containing "vega"
     const hasVegaSchema =
         typeof spec.$schema === 'string' && spec.$schema.includes('vega');
@@ -135,16 +135,6 @@ function detectChartLibrary(
         return 'vega-lite';
     }
 
-    // Recharts: check for 'chart' property OR library === 'recharts' with data
-    const isRecharts =
-        ('chart' in spec || 'type' in spec || spec.library === 'recharts') &&
-        'data' in spec &&
-        Array.isArray(spec.data);
-
-    if (isRecharts) {
-        return 'recharts';
-    }
-
     return null;
 }
 
@@ -196,8 +186,7 @@ export function VegaLiteCodeBlockHandler({ code }: CodeBlockRendererProps) {
 
 /**
  * Chart code block handler
- * Supports both Vega-Lite and Recharts specifications
- * Routes directly to the appropriate chart component based on detected library
+ * `chart` now accepts Vega-Lite specifications only.
  */
 export function ChartCodeBlockHandler({ code }: CodeBlockRendererProps) {
     const { artifactRunId } = useCodeBlockContext();
@@ -205,27 +194,22 @@ export function ChartCodeBlockHandler({ code }: CodeBlockRendererProps) {
     // Check if JSON is incomplete (streaming in progress)
     const incomplete = useMemo(() => isIncompleteJson(code), [code]);
 
-    const { chartSpec, isVegaLite } = useMemo(() => {
-        if (incomplete) return { chartSpec: null, isVegaLite: false };
+    const chartSpec = useMemo((): VegaLiteChartSpec | null => {
+        if (incomplete) return null;
 
         const spec = parseChartJson(code);
-        if (!spec) return { chartSpec: null, isVegaLite: false };
+        if (!spec) return null;
 
         const library = detectChartLibrary(spec);
-        if (!library) return { chartSpec: null, isVegaLite: false };
+        if (!library) return null;
 
-        // Vega-Lite spec - wrap in expected format
-        if (library === 'vega-lite') {
-            // If already wrapped (has library: 'vega-lite' and spec property), use as-is
-            if (spec.library === 'vega-lite' && 'spec' in spec) {
-                return { chartSpec: spec, isVegaLite: true };
-            }
-            // Native Vega-Lite spec - wrap it
-            return { chartSpec: { library: 'vega-lite' as const, spec }, isVegaLite: true };
+        // If already wrapped, use as-is.
+        if (spec.library === 'vega-lite' && 'spec' in spec && typeof spec.spec === 'object') {
+            return spec as unknown as VegaLiteChartSpec;
         }
 
-        // Recharts spec
-        return { chartSpec: spec, isVegaLite: false };
+        // Native Vega-Lite spec - wrap it.
+        return { library: 'vega-lite' as const, spec };
     }, [code, incomplete]);
 
     // Show loading placeholder for incomplete JSON (streaming)
@@ -242,23 +226,14 @@ export function ChartCodeBlockHandler({ code }: CodeBlockRendererProps) {
         return (
             <CodeBlockPlaceholder
                 type="chart"
-                error="Invalid chart specification"
+                error="Invalid Vega-Lite chart specification"
             />
         );
     }
 
-    // Route directly to the appropriate chart component
-    if (isVegaLite) {
-        return (
-            <CodeBlockErrorBoundary type="chart" fallbackCode={code}>
-                <VegaLiteChart spec={chartSpec as any} artifactRunId={artifactRunId} />
-            </CodeBlockErrorBoundary>
-        );
-    }
-
     return (
         <CodeBlockErrorBoundary type="chart" fallbackCode={code}>
-            <AgentChart spec={chartSpec as AgentChartSpec} artifactRunId={artifactRunId} />
+            <VegaLiteChart spec={chartSpec} artifactRunId={artifactRunId} />
         </CodeBlockErrorBoundary>
     );
 }
@@ -357,6 +332,32 @@ export function ProposalCodeBlockHandler({ code }: CodeBlockRendererProps) {
     );
 }
 
+/**
+ * Mockup code block handler — renders inline SVG after sanitization.
+ */
+export function MockupCodeBlockHandler({ code }: CodeBlockRendererProps) {
+    const processedSvg = useMemo(() => {
+        const trimmed = code.trim();
+        if (!trimmed) return null;
+        return makeSvgResponsive(sanitizeSvg(trimmed));
+    }, [code]);
+
+    if (!processedSvg) {
+        return (
+            <CodeBlockPlaceholder type="code" error="Empty mockup" />
+        );
+    }
+
+    return (
+        <CodeBlockErrorBoundary type="code" fallbackCode={code}>
+            <div
+                style={{ margin: '16px 0', width: '100%', overflowX: 'auto' }}
+                dangerouslySetInnerHTML={{ __html: processedSvg }}
+            />
+        </CodeBlockErrorBoundary>
+    );
+}
+
 /**
  * Expand code block handler - fetches artifact and renders content inline.
  *
@@ -381,7 +382,7 @@ export function ExpandCodeBlockHandler({ code, language }: CodeBlockRendererProp
         // Validate known types
         const validTypes: ExpandRenderType[] = [
             'chart', 'vega-lite', 'table', 'markdown',
-            'fusion-fragment', 'code', 'image', 'auto'
+            'fusion-fragment', 'mockup', 'code', 'image', 'auto'
         ];
         return validTypes.includes(type) ? type : 'auto';
     }, [language]);
@@ -467,7 +468,7 @@ export function createDefaultCodeBlockHandlers(): Record<
     React.FunctionComponent<CodeBlockRendererProps>
 > {
     return {
-        // Chart handler for generic chart code blocks (auto-detects library)
+        // Chart handler for generic chart code blocks (Vega-Lite only)
         chart: ChartCodeBlockHandler,
         // Vega-Lite handlers - always treat as Vega-Lite
         'vega-lite': VegaLiteCodeBlockHandler,
@@ -476,6 +477,10 @@ export function createDefaultCodeBlockHandlers(): Record<
         // Mermaid handler
         mermaid: MermaidCodeBlockHandler,
 
+        // Mockup handler (inline SVG)
+        mockup: MockupCodeBlockHandler,
+        svg: MockupCodeBlockHandler,
+
         // Proposal handlers
         proposal: ProposalCodeBlockHandler,
         askuser: ProposalCodeBlockHandler,

package/src/widgets/markdown/index.ts

@@ -7,6 +7,7 @@ export {
 export { MarkdownRenderer, type MarkdownRendererProps } from './MarkdownRenderer';
 export { MarkdownLink, type MarkdownLinkProps } from './MarkdownLink';
 export { MarkdownImage, type MarkdownImageProps } from './MarkdownImage';
+export { MarkdownFigure, type MarkdownFigureProps } from './MarkdownFigure';
 export {
     useResolvedUrl,
     parseUrlScheme,

package/src/widgets/markdown/markdown.css

@@ -0,0 +1,192 @@
+/*
+ * Markdown extension styles for MarkdownRenderer.
+ *
+ * Uses CSS custom properties from the Tailwind theme so colours
+ * adapt automatically to light/dark mode.
+ *
+ * Consumers must import this file in their app entry point:
+ *   import '@vertesia/ui/src/widgets/markdown/markdown.css';
+ */
+
+/* ------------------------------------------------------------------ */
+/* Page break (:::pagebreak)                                          */
+/* Rendered as a subtle divider on the web (actual break in PDF)      */
+/* ------------------------------------------------------------------ */
+
+.md-pagebreak {
+    border: none;
+    border-top: 2px dashed var(--color-border);
+    margin: 2rem 0;
+}
+
+/* ------------------------------------------------------------------ */
+/* Columns layout (:::columns / :::column)                            */
+/* ------------------------------------------------------------------ */
+
+.md-columns {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+}
+
+.md-columns > .md-column {
+    flex: 1 1 0%;
+    min-width: 0;
+}
+
+/* Stack on narrow viewports */
+@media (max-width: 640px) {
+    .md-columns {
+        flex-direction: column;
+    }
+}
+
+/* ------------------------------------------------------------------ */
+/* Callout containers (:::note, :::tip, :::warning, etc.)             */
+/* ------------------------------------------------------------------ */
+
+.md-callout {
+    border-left: 4px solid var(--color-border);
+    border-radius: var(--radius-sm, 4px);
+    padding: 0.75rem 1rem;
+    margin: 1rem 0;
+    background: var(--color-muted-background, oklch(0.97 0 0));
+}
+
+.md-callout .md-callout-title {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+/* Semantic variants */
+.md-callout-info {
+    border-left-color: var(--color-info);
+    background: color-mix(in oklch, var(--color-info) 8%, var(--color-background));
+}
+
+.md-callout-info > .md-callout-title {
+    color: var(--color-info);
+}
+
+.md-callout-attention {
+    border-left-color: var(--color-attention);
+    background: color-mix(in oklch, var(--color-attention) 8%, var(--color-background));
+}
+
+.md-callout-attention > .md-callout-title {
+    color: var(--color-attention);
+}
+
+.md-callout-destructive {
+    border-left-color: var(--color-destructive);
+    background: color-mix(in oklch, var(--color-destructive) 8%, var(--color-background));
+}
+
+.md-callout-destructive > .md-callout-title {
+    color: var(--color-destructive);
+}
+
+/* ------------------------------------------------------------------ */
+/* GitHub-style blockquote alerts (> [!NOTE], > [!WARNING], etc.)      */
+/* Uses classes from remark-github-blockquote-alert                   */
+/* ------------------------------------------------------------------ */
+
+.markdown-alert {
+    border-left: 4px solid var(--color-border);
+    border-radius: var(--radius-sm, 4px);
+    padding: 0.75rem 1rem;
+    margin: 1rem 0;
+    background: var(--color-muted-background, oklch(0.97 0 0));
+}
+
+.markdown-alert .markdown-alert-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+}
+
+.markdown-alert .markdown-alert-title svg {
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+}
+
+/* NOTE, TIP → info */
+.markdown-alert-note,
+.markdown-alert-tip {
+    border-left-color: var(--color-info);
+    background: color-mix(in oklch, var(--color-info) 8%, var(--color-background));
+}
+
+.markdown-alert-note > .markdown-alert-title,
+.markdown-alert-tip > .markdown-alert-title {
+    color: var(--color-info);
+}
+
+/* WARNING, IMPORTANT → attention */
+.markdown-alert-warning,
+.markdown-alert-important {
+    border-left-color: var(--color-attention);
+    background: color-mix(in oklch, var(--color-attention) 8%, var(--color-background));
+}
+
+.markdown-alert-warning > .markdown-alert-title,
+.markdown-alert-important > .markdown-alert-title {
+    color: var(--color-attention);
+}
+
+/* CAUTION → destructive */
+.markdown-alert-caution {
+    border-left-color: var(--color-destructive);
+    background: color-mix(in oklch, var(--color-destructive) 8%, var(--color-background));
+}
+
+.markdown-alert-caution > .markdown-alert-title {
+    color: var(--color-destructive);
+}
+
+/* ------------------------------------------------------------------ */
+/* Definition lists (<dl>, <dt>, <dd>)                                */
+/* ------------------------------------------------------------------ */
+
+.md-content dl {
+    margin: 1rem 0;
+}
+
+.md-content dt {
+    font-weight: 600;
+    margin-top: 0.75rem;
+}
+
+.md-content dt:first-child {
+    margin-top: 0;
+}
+
+.md-content dd {
+    margin-left: 1.5rem;
+    margin-top: 0.25rem;
+}
+
+/* ------------------------------------------------------------------ */
+/* Figures (<figure> / <figcaption>)                                  */
+/* ------------------------------------------------------------------ */
+
+.md-content figure {
+    margin: 1.5rem 0;
+    text-align: center;
+}
+
+.md-content figure img {
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+}
+
+.md-content figcaption {
+    font-size: 0.875rem;
+    color: var(--color-muted);
+    margin-top: 0.5rem;
+    font-style: italic;
+}

package/src/widgets/markdown/normalizeCustomSchemeLinks.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it } from 'vitest';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { normalizeCustomSchemeLinks } from './normalizeCustomSchemeLinks';
+
+function renderMarkdownToHtml(markdown: string): string {
+    return renderToStaticMarkup(
+        React.createElement(
+            Markdown,
+            { remarkPlugins: [remarkGfm], urlTransform: (url: string) => url },
+            markdown
+        )
+    );
+}
+
+describe('normalizeCustomSchemeLinks', () => {
+    it('proves baseline parser behavior: custom link with spaces is not rendered as an anchor before normalization', () => {
+        const input = '[Download PDF](artifact:out/INVOICE 2025-001.pdf)';
+        const beforeHtml = renderMarkdownToHtml(input);
+        const afterHtml = renderMarkdownToHtml(normalizeCustomSchemeLinks(input));
+
+        expect(beforeHtml).not.toContain('<a ');
+        expect(afterHtml).toContain('<a ');
+    });
+
+    it('wraps artifact destinations so links with spaces remain valid markdown', () => {
+        const input = '[Download PDF](artifact:out/INVOICE 2025-001.pdf)';
+        const output = normalizeCustomSchemeLinks(input);
+        expect(output).toBe('[Download PDF](<artifact:out/INVOICE 2025-001.pdf>)');
+    });
+
+    it('preserves optional markdown link titles', () => {
+        const input = '![Invoice](artifact:out/INVOICE 2025-001.pdf "Invoice PDF")';
+        const output = normalizeCustomSchemeLinks(input);
+        expect(output).toBe('![Invoice](<artifact:out/INVOICE 2025-001.pdf> "Invoice PDF")');
+    });
+
+    it('leaves already bracketed custom links unchanged', () => {
+        const input = '[Download](<artifact:out/INVOICE 2025-001.pdf>)';
+        const output = normalizeCustomSchemeLinks(input);
+        expect(output).toBe(input);
+    });
+
+    it('does not modify standard urls', () => {
+        const input = '[Docs](https://example.com/some path)';
+        const output = normalizeCustomSchemeLinks(input);
+        expect(output).toBe(input);
+    });
+
+    it('normalizes custom links inside table cells', () => {
+        const input = '| PDF |\n| --- |\n| [Download](artifact:out/INVOICE 2025-001.pdf) |';
+        const output = normalizeCustomSchemeLinks(input);
+        expect(output).toContain('[Download](<artifact:out/INVOICE 2025-001.pdf>)');
+    });
+
+    it('proves table-cell behavior: no anchor before normalization, anchor after normalization', () => {
+        const input = '| PDF |\n| --- |\n| [Download](artifact:out/INVOICE 2025-001.pdf) |';
+        const beforeHtml = renderMarkdownToHtml(input);
+        const afterHtml = renderMarkdownToHtml(normalizeCustomSchemeLinks(input));
+
+        expect(beforeHtml).toContain('<table>');
+        expect(beforeHtml).not.toContain('<a ');
+        expect(afterHtml).toContain('<table>');
+        expect(afterHtml).toContain('<a ');
+    });
+
+    it('does not rewrite inline code or fenced code blocks', () => {
+        const input = [
+            '`[inline](artifact:out/INVOICE 2025-001.pdf)`',
+            '',
+            '```md',
+            '[fenced](artifact:out/INVOICE 2025-001.pdf)',
+            '```',
+            '',
+            '[regular](artifact:out/INVOICE 2025-001.pdf)',
+        ].join('\n');
+
+        const output = normalizeCustomSchemeLinks(input);
+
+        expect(output).toContain('`[inline](artifact:out/INVOICE 2025-001.pdf)`');
+        expect(output).toContain('[fenced](artifact:out/INVOICE 2025-001.pdf)');
+        expect(output).toContain('[regular](<artifact:out/INVOICE 2025-001.pdf>)');
+    });
+});

package/src/widgets/markdown/normalizeCustomSchemeLinks.ts

@@ -0,0 +1,91 @@
+const CUSTOM_SCHEME_PREFIXES = [
+    'artifact:',
+    'image:',
+    'store:',
+    'document://',
+    'collection:',
+];
+
+const CUSTOM_LINK_REGEX = /(!?\[[^\]\n]*\]\()((?:artifact:|image:|store:|document:\/\/|collection:)[^)]+)(\))/g;
+const INLINE_CODE_REGEX = /`[^`\n]*`/g;
+const FENCED_CODE_BLOCK_REGEX = /(^|\n)(`{3,}|~{3,})[^\n]*\n[\s\S]*?\n\2(?=\n|$)/g;
+const LINK_TITLE_SUFFIX_REGEX = /\s+("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|\([^)]*\))\s*$/;
+
+function hasCustomScheme(destination: string): boolean {
+    return CUSTOM_SCHEME_PREFIXES.some(prefix => destination.startsWith(prefix));
+}
+
+function wrapCustomDestination(destinationWithOptionalTitle: string): string {
+    const trimmed = destinationWithOptionalTitle.trim();
+
+    // Preserve already angle-bracketed custom destinations.
+    if (trimmed.startsWith('<')) {
+        const closeIdx = trimmed.indexOf('>');
+        if (closeIdx > 0) {
+            const bracketedDestination = trimmed.slice(1, closeIdx).trim();
+            if (hasCustomScheme(bracketedDestination)) {
+                return destinationWithOptionalTitle;
+            }
+        }
+    }
+
+    const titleMatch = trimmed.match(LINK_TITLE_SUFFIX_REGEX);
+    const titleStart = titleMatch?.index ?? -1;
+    const destination = (titleStart >= 0 ? trimmed.slice(0, titleStart) : trimmed).trim();
+    const title = titleStart >= 0 ? trimmed.slice(titleStart) : '';
+
+    if (!hasCustomScheme(destination)) {
+        return destinationWithOptionalTitle;
+    }
+
+    return `<${destination}>${title}`;
+}
+
+function normalizeCustomLinksInText(text: string): string {
+    return text.replace(CUSTOM_LINK_REGEX, (_fullMatch, open, destination, close) => {
+        return `${open}${wrapCustomDestination(destination)}${close}`;
+    });
+}
+
+function normalizeOutsideInlineCode(text: string): string {
+    let result = '';
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    INLINE_CODE_REGEX.lastIndex = 0;
+    while ((match = INLINE_CODE_REGEX.exec(text)) !== null) {
+        result += normalizeCustomLinksInText(text.slice(lastIndex, match.index));
+        result += match[0];
+        lastIndex = match.index + match[0].length;
+    }
+
+    result += normalizeCustomLinksInText(text.slice(lastIndex));
+    return result;
+}
+
+/**
+ * Normalizes inline markdown links/images with custom URL schemes so they parse
+ * correctly even when paths contain spaces (e.g. artifact:out/INVOICE 2025-001.pdf).
+ *
+ * CommonMark requires destinations with spaces to be wrapped in <...>.
+ * We apply this only outside fenced/inline code spans.
+ */
+export function normalizeCustomSchemeLinks(markdown: string): string {
+    if (!markdown || !CUSTOM_SCHEME_PREFIXES.some(prefix => markdown.includes(prefix))) {
+        return markdown;
+    }
+
+    let result = '';
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    FENCED_CODE_BLOCK_REGEX.lastIndex = 0;
+    while ((match = FENCED_CODE_BLOCK_REGEX.exec(markdown)) !== null) {
+        result += normalizeOutsideInlineCode(markdown.slice(lastIndex, match.index));
+        result += match[0];
+        lastIndex = match.index + match[0].length;
+    }
+
+    result += normalizeOutsideInlineCode(markdown.slice(lastIndex));
+    return result;
+}

package/src/widgets/markdown/normalizeDirectives.ts

@@ -0,0 +1,50 @@
+/**
+ * Normalize Pandoc-style single-line fenced divs into remark-directive syntax.
+ *
+ * Pandoc allows single-line containers:
+ *   ::: pagebreak :::
+ *   ::: tip Some content here. :::
+ *
+ * remark-directive requires multi-line containers:
+ *   :::pagebreak
+ *   :::
+ *
+ *   :::tip
+ *   Some content here.
+ *   :::
+ *
+ * This preprocessor converts the single-line form into multi-line so that
+ * remark-directive can parse them correctly.
+ */
+
+/**
+ * Regex matching a single-line fenced div:
+ *   ::: name optional-content :::
+ *
+ * Groups:
+ *   [1] leading indent
+ *   [2] directive name (word chars only)
+ *   [3] optional inline content (may be empty)
+ *
+ * Only matches when both opening and closing ::: are on the SAME line,
+ * so it won't interfere with properly formatted multi-line containers.
+ */
+const SINGLE_LINE_DIRECTIVE = /^([ \t]*):::\s*(\w+)\s*(.*?)\s*:::[ \t]*$/gm;
+
+export function normalizeDirectives(markdown: string): string {
+    if (!markdown || !markdown.includes(':::')) {
+        return markdown;
+    }
+
+    return markdown.replace(
+        SINGLE_LINE_DIRECTIVE,
+        (_match, indent: string, name: string, content: string) => {
+            if (content) {
+                // Has content → multi-line container directive
+                return `${indent}:::${name}\n${indent}${content}\n${indent}:::`;
+            }
+            // No content → leaf directive (::name)
+            return `${indent}::${name}`;
+        }
+    );
+}