@vertesia/ui 0.81.1 → 1.0.0-dev.20260203.130115Z

package/src/widgets/markdown/CodeBlockPlaceholder.test.tsx

@@ -0,0 +1,57 @@
+import { describe, it, expect } from 'vitest';
+
+// Test the TYPE_CONFIG structure and CodeBlockPlaceholder behavior through type checks
+describe('CodeBlockPlaceholder types', () => {
+    // Test constants matching the component's config
+    const TYPE_LABELS: Record<string, string> = {
+        chart: 'chart',
+        mermaid: 'diagram',
+        proposal: 'options',
+        code: 'code',
+        image: 'image',
+        link: 'link',
+    };
+
+    const TYPE_HEIGHTS: Record<string, number> = {
+        chart: 200,
+        mermaid: 150,
+        proposal: 100,
+        code: 80,
+        image: 150,
+        link: 24,
+    };
+
+    it('should have config for all code block types', () => {
+        const types = ['chart', 'mermaid', 'proposal', 'code', 'image', 'link'];
+        types.forEach(type => {
+            expect(TYPE_LABELS[type]).toBeTruthy();
+            expect(TYPE_HEIGHTS[type]).toBeGreaterThan(0);
+        });
+    });
+
+    it('should have appropriate default heights', () => {
+        // Chart placeholders should be tall enough to show a chart preview
+        expect(TYPE_HEIGHTS.chart).toBeGreaterThanOrEqual(200);
+
+        // Link placeholders should be inline (small height)
+        expect(TYPE_HEIGHTS.link).toBeLessThan(50);
+
+        // Image placeholders should have reasonable height
+        expect(TYPE_HEIGHTS.image).toBeGreaterThanOrEqual(100);
+    });
+
+    it('should have unique labels for user feedback', () => {
+        const labels = Object.values(TYPE_LABELS);
+        const uniqueLabels = new Set(labels);
+        expect(uniqueLabels.size).toBe(labels.length);
+    });
+});
+
+describe('CodeBlockErrorBoundary behavior', () => {
+    it('should be a React Component (verified by import)', async () => {
+        // This test verifies the component can be imported without error
+        const { CodeBlockErrorBoundary } = await import('./CodeBlockPlaceholder');
+        expect(CodeBlockErrorBoundary).toBeDefined();
+        expect(typeof CodeBlockErrorBoundary).toBe('function');
+    });
+});

package/src/widgets/markdown/CodeBlockPlaceholder.tsx

@@ -0,0 +1,165 @@
+import React from 'react';
+import { BarChart3, GitBranch, MessageSquare, Code, Image, Link, Download, Table, FileText } from 'lucide-react';
+
+export type CodeBlockType = 'chart' | 'mermaid' | 'proposal' | 'code' | 'image' | 'link' | 'expand' | 'table' | 'markdown' | 'fusion-fragment';
+
+export interface CodeBlockPlaceholderProps {
+    /** The type of content being loaded */
+    type: CodeBlockType;
+    /** Optional error message to display */
+    error?: string;
+    /** Callback to retry loading */
+    onRetry?: () => void;
+    /** Optional custom message */
+    message?: string;
+    /** Height hint for the placeholder (default varies by type) */
+    height?: number;
+}
+
+const TYPE_CONFIG: Record<CodeBlockType, { icon: React.ElementType; label: string; defaultHeight: number }> = {
+    chart: { icon: BarChart3, label: 'chart', defaultHeight: 200 },
+    mermaid: { icon: GitBranch, label: 'diagram', defaultHeight: 150 },
+    proposal: { icon: MessageSquare, label: 'options', defaultHeight: 100 },
+    code: { icon: Code, label: 'code', defaultHeight: 80 },
+    image: { icon: Image, label: 'image', defaultHeight: 150 },
+    link: { icon: Link, label: 'link', defaultHeight: 24 },
+    expand: { icon: Download, label: 'content', defaultHeight: 100 },
+    table: { icon: Table, label: 'table', defaultHeight: 150 },
+    markdown: { icon: FileText, label: 'content', defaultHeight: 100 },
+    'fusion-fragment': { icon: Code, label: 'fragment', defaultHeight: 150 },
+};
+
+/**
+ * Placeholder component shown while code blocks are loading.
+ * Provides visual feedback and error states with retry capability.
+ */
+export function CodeBlockPlaceholder({
+    type,
+    error,
+    onRetry,
+    message,
+    height,
+}: CodeBlockPlaceholderProps) {
+    const config = TYPE_CONFIG[type];
+    const displayHeight = height ?? config.defaultHeight;
+    const isInline = type === 'link';
+
+    if (error) {
+        return (
+            <div
+                className={`flex items-center gap-2 rounded border border-destructive/30 bg-destructive/5 text-destructive ${
+                    isInline ? 'inline-flex px-2 py-1 text-sm' : 'p-4'
+                }`}
+                style={!isInline ? { minHeight: displayHeight } : undefined}
+            >
+                <span className="text-destructive">Failed to load {config.label}</span>
+                {onRetry && (
+                    <button
+                        onClick={onRetry}
+                        className="ml-2 rounded bg-destructive/10 px-2 py-1 text-xs hover:bg-destructive/20 transition-colors"
+                    >
+                        Retry
+                    </button>
+                )}
+            </div>
+        );
+    }
+
+    const IconComponent = config.icon;
+
+    if (isInline) {
+        return (
+            <span className="inline-flex items-center gap-1 text-muted animate-pulse">
+                <IconComponent className="h-3 w-3" />
+                <span>{message || `Loading ${config.label}...`}</span>
+            </span>
+        );
+    }
+
+    return (
+        <div
+            className="flex flex-col items-center justify-center gap-3 rounded border border-border bg-muted/30 animate-pulse"
+            style={{ minHeight: displayHeight }}
+        >
+            <IconComponent className="h-8 w-8 text-muted" />
+            <span className="text-sm text-muted">
+                {message || `Loading ${config.label}...`}
+            </span>
+            <div className="flex gap-1">
+                {[...Array(3)].map((_, i) => (
+                    <div
+                        key={i}
+                        className="h-2 w-2 rounded-full bg-muted animate-bounce"
+                        style={{ animationDelay: `${i * 150}ms` }}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+/**
+ * Error boundary for code block rendering.
+ * Catches rendering errors and displays a fallback UI.
+ */
+interface CodeBlockErrorBoundaryProps {
+    children: React.ReactNode;
+    type: CodeBlockType;
+    fallbackCode?: string;
+    onError?: (error: Error) => void;
+}
+
+interface CodeBlockErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+}
+
+export class CodeBlockErrorBoundary extends React.Component<
+    CodeBlockErrorBoundaryProps,
+    CodeBlockErrorBoundaryState
+> {
+    constructor(props: CodeBlockErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError(error: Error): CodeBlockErrorBoundaryState {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        console.error(`CodeBlock rendering error (${this.props.type}):`, error, errorInfo);
+        this.props.onError?.(error);
+    }
+
+    handleRetry = () => {
+        this.setState({ hasError: false, error: undefined });
+    };
+
+    render() {
+        if (this.state.hasError) {
+            const { type, fallbackCode } = this.props;
+            return (
+                <div className="space-y-2">
+                    <CodeBlockPlaceholder
+                        type={type}
+                        error={this.state.error?.message || 'Rendering failed'}
+                        onRetry={this.handleRetry}
+                    />
+                    {fallbackCode && (
+                        <details className="text-sm">
+                            <summary className="cursor-pointer text-muted hover:text-foreground">
+                                Show raw content
+                            </summary>
+                            <pre className="mt-2 overflow-x-auto rounded bg-muted/50 p-2 text-xs">
+                                <code>{fallbackCode}</code>
+                            </pre>
+                        </details>
+                    )}
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}

package/src/widgets/markdown/CodeBlockRendering.tsx

@@ -0,0 +1,57 @@
+import { createContext, useContext, useMemo } from "react";
+
+export interface CodeBlockRendererProps {
+    code: string;
+    language?: string;
+}
+export class CodeBlockRendererRegistry {
+    components: Record<string, React.FunctionComponent<any>> = {};
+
+    registerComponent(language: string, component: React.FunctionComponent<CodeBlockRendererProps>) {
+        this.components[language] = component;
+    }
+
+    getComponent(language: string): React.FunctionComponent<CodeBlockRendererProps> | undefined {
+        return this.components[language];
+    }
+
+}
+
+const Context = createContext<CodeBlockRendererRegistry | null>(null);
+
+interface CodeBlockRendererProviderProps {
+    components: Record<string, React.FunctionComponent<CodeBlockRendererProps>>;
+    children: React.ReactNode;
+}
+/**
+ * the compoennts must be memoized to avoid rerendering the provider unnecessarily
+ * @param param0
+ * @returns
+ */
+export function CodeBlockRendererProvider({ components, children }: CodeBlockRendererProviderProps) {
+    const registry = useMemo(() => {
+        const registry = new CodeBlockRendererRegistry();
+        for (const [language, component] of Object.entries(components)) {
+            registry.registerComponent(language, component);
+        }
+        return registry;
+    }, [components]);
+
+    return (
+        <>
+            <Context.Provider value={registry}>{children}</Context.Provider>
+        </>
+    )
+}
+
+export function useCodeBlockRendererRegistry() {
+    return useContext(Context);
+}
+
+export function useCodeBlockComponent(language: string) {
+    const registry = useContext(Context);
+    if (registry) {
+        return registry.getComponent(language);
+    }
+    return undefined;
+}

package/src/widgets/markdown/MarkdownImage.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { useResolvedUrl, parseUrlScheme } from './useResolvedUrl';
+import { CodeBlockPlaceholder } from './CodeBlockPlaceholder';
+
+export interface MarkdownImageProps {
+    node?: any;
+    src?: string;
+    alt?: string;
+    className?: string;
+    artifactRunId?: string;
+    /** Existing image component to delegate to for standard URLs */
+    ExistingImg?: React.ComponentType<any>;
+}
+
+/**
+ * Markdown image component with support for custom URL schemes.
+ * Handles artifact: and image: URLs with loading states and error handling.
+ */
+export function MarkdownImage({
+    node,
+    src,
+    alt,
+    className,
+    artifactRunId,
+    ExistingImg,
+    ...rest
+}: MarkdownImageProps) {
+    const rawSrc = src || '';
+    const { scheme } = parseUrlScheme(rawSrc);
+
+    // For standard URLs, delegate to existing component or render directly
+    if (scheme === 'standard') {
+        if (typeof ExistingImg === 'function') {
+            return <ExistingImg node={node} src={src} alt={alt} {...rest} />;
+        }
+        return <img src={src} alt={alt} className={className} {...rest} />;
+    }
+
+    // For artifact: and image: URLs, use the resolver
+    return (
+        <ResolvedImage
+            rawSrc={rawSrc}
+            alt={alt}
+            artifactRunId={artifactRunId}
+            className={className}
+            rest={rest}
+        />
+    );
+}
+
+/**
+ * Internal component for images that need async URL resolution
+ */
+function ResolvedImage({
+    rawSrc,
+    alt,
+    artifactRunId,
+    className,
+    rest,
+}: {
+    rawSrc: string;
+    alt?: string;
+    artifactRunId?: string;
+    className?: string;
+    rest: Record<string, unknown>;
+}) {
+    const { url, isLoading, error, retry } = useResolvedUrl({
+        rawUrl: rawSrc,
+        artifactRunId,
+        disposition: 'inline',
+    });
+
+    if (isLoading) {
+        return <CodeBlockPlaceholder type="image" message={alt ? `Loading ${alt}...` : undefined} />;
+    }
+
+    if (error) {
+        return (
+            <CodeBlockPlaceholder
+                type="image"
+                error={error}
+                onRetry={retry}
+            />
+        );
+    }
+
+    if (!url) {
+        return null;
+    }
+
+    return <img src={url} alt={alt} className={className} {...rest} />;
+}

package/src/widgets/markdown/MarkdownLink.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import type { Element } from 'hast';
+import { useResolvedUrl, parseUrlScheme, mapSchemeToRoute } from './useResolvedUrl';
+import { CodeBlockPlaceholder } from './CodeBlockPlaceholder';
+
+export interface MarkdownLinkProps {
+    node?: Element;
+    href?: string;
+    children?: React.ReactNode;
+    className?: string;
+    artifactRunId?: string;
+    /** Existing link component to delegate to for standard URLs */
+    ExistingLink?: React.ComponentType<any>;
+}
+
+/**
+ * Markdown link component with support for custom URL schemes.
+ * Handles artifact:, image:, store:, document://, and collection: URLs.
+ */
+export function MarkdownLink({
+    node,
+    href,
+    children,
+    className,
+    artifactRunId,
+    ExistingLink,
+    ...rest
+}: MarkdownLinkProps) {
+    const rawHref = href || '';
+    const { scheme, path } = parseUrlScheme(rawHref);
+
+    // For schemes that map directly to routes (store:, document://, collection:)
+    const mappedRoute = mapSchemeToRoute(scheme, path);
+    if (mappedRoute) {
+        if (typeof ExistingLink === 'function') {
+            return (
+                <ExistingLink node={node} href={mappedRoute} {...rest}>
+                    {children}
+                </ExistingLink>
+            );
+        }
+        return (
+            <a
+                href={mappedRoute}
+                {...rest}
+                className={className}
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                {children}
+            </a>
+        );
+    }
+
+    // For standard URLs, delegate to existing component or render directly
+    if (scheme === 'standard') {
+        if (typeof ExistingLink === 'function') {
+            return (
+                <ExistingLink node={node} href={href} {...rest}>
+                    {children}
+                </ExistingLink>
+            );
+        }
+        return (
+            <a
+                href={href}
+                {...rest}
+                className={className}
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                {children}
+            </a>
+        );
+    }
+
+    // For artifact: and image: URLs, use the resolver
+    return (
+        <ResolvedLink
+            rawHref={rawHref}
+            artifactRunId={artifactRunId}
+            className={className}
+            rest={rest}
+        >
+            {children}
+        </ResolvedLink>
+    );
+}
+
+/**
+ * Internal component for links that need async URL resolution
+ */
+function ResolvedLink({
+    rawHref,
+    artifactRunId,
+    className,
+    children,
+    rest,
+}: {
+    rawHref: string;
+    artifactRunId?: string;
+    className?: string;
+    children?: React.ReactNode;
+    rest: Record<string, unknown>;
+}) {
+    const { url, isLoading, error, retry } = useResolvedUrl({
+        rawUrl: rawHref,
+        artifactRunId,
+        disposition: 'attachment',
+    });
+
+    if (isLoading) {
+        return (
+            <span className="inline-flex items-center gap-1 text-muted">
+                <CodeBlockPlaceholder type="link" />
+            </span>
+        );
+    }
+
+    if (error) {
+        return (
+            <span className="inline-flex items-center gap-1">
+                <CodeBlockPlaceholder type="link" error={error} onRetry={retry} />
+            </span>
+        );
+    }
+
+    return (
+        <a
+            href={url || '#'}
+            {...rest}
+            className={className}
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            {children}
+        </a>
+    );
+}