@djangocfg/ui-tools 2.1.407 → 2.1.409

package/src/tools/MarkdownMessage/MarkdownMessage.tsx

@@ -19,6 +19,20 @@ import { createMarkdownComponents } from './components';
 import { CollapseToggle } from './CollapseToggle';
 import { applyPreprocess, buildLinkRulesComponent, collectProtocols } from './linkRules';
 
+/** Body text size class for the plain-text / prose wrapper. */
+const SIZE_TO_TEXT: Record<'xs' | 'sm' | 'base', string> = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  base: 'text-base',
+};
+
+/** Tailwind-typography modifier per size level. */
+const SIZE_TO_PROSE: Record<'xs' | 'sm' | 'base', string> = {
+  xs: 'prose-xs',
+  sm: 'prose-sm',
+  base: 'prose-base',
+};
+
 /**
  * MarkdownMessage — chat-tuned markdown renderer.
  *
@@ -51,7 +65,7 @@ import { applyPreprocess, buildLinkRulesComponent, collectProtocols } from './li
  * ```
  *
  * Memoised: re-renders only when props change. `content` is the main
- * trigger — all other props (className, isUser, isCompact, etc.) are
+ * trigger — all other props (className, isUser, size, etc.) are
  * compared by value/reference. `onCollapseChange` is compared by
  * reference — callers should stabilise it with useCallback.
  */
@@ -59,6 +73,7 @@ function MarkdownMessageRaw({
   content,
   className = '',
   isUser = false,
+  size,
   isCompact = false,
   plainText,
   customComponents,
@@ -71,6 +86,7 @@ function MarkdownMessageRaw({
   showLessLabel = 'Show less',
   defaultExpanded = false,
   onCollapseChange,
+  codeTheme = 'dark',
 }: MarkdownMessageProps) {
   // Pre-process content through any rules that requested it. Done
   // before trim so a rule can rewrite multi-line shapes too.
@@ -117,10 +133,14 @@ function MarkdownMessageRaw({
     }
   }, [isCollapsed, collapsible, shouldCollapse, onCollapseChange]);
 
+  // `size` wins when set explicitly; otherwise fall back to the
+  // legacy binary `isCompact` so existing callers keep working.
+  const resolvedSize: 'xs' | 'sm' | 'base' = size ?? (isCompact ? 'xs' : 'sm');
+
   const components = React.useMemo(() => {
-    const base = createMarkdownComponents(isUser, isCompact);
+    const base = createMarkdownComponents(isUser, resolvedSize, codeTheme);
     return effectiveCustomComponents ? { ...base, ...effectiveCustomComponents } : base;
-  }, [isUser, isCompact, effectiveCustomComponents]);
+  }, [isUser, resolvedSize, codeTheme, effectiveCustomComponents]);
 
   const schema = React.useMemo(() => buildSchema(effectiveProtocols), [effectiveProtocols]);
   const urlTransform = React.useMemo(
@@ -128,8 +148,8 @@ function MarkdownMessageRaw({
     [effectiveProtocols],
   );
 
-  const textSizeClass = isCompact ? 'text-xs' : 'text-sm';
-  const proseClass = isCompact ? 'prose-xs' : 'prose-sm';
+  const textSizeClass = SIZE_TO_TEXT[resolvedSize];
+  const proseClass = SIZE_TO_PROSE[resolvedSize];
 
   // Resolve plain-vs-markdown branch:
   //   1. Caller-passed `plainText` wins outright (explicit beats clever).
@@ -170,7 +190,7 @@ function MarkdownMessageRaw({
               readMoreLabel={readMoreLabel}
               showLessLabel={showLessLabel}
               isUser={isUser}
-              isCompact={isCompact}
+              isCompact={resolvedSize === 'xs'}
             />
           </>
         )}

package/src/tools/MarkdownMessage/components.tsx

@@ -5,20 +5,33 @@ import { ANCHOR } from '../Chat/styles/bubbleTokens';
 import { CodeBlock, CodeBlockFallback } from './CodeBlock';
 import { extractTextFromChildren } from './plainText';
 
+/** Body / heading size classes per `size` level. */
+const SIZE_CLASSES: Record<'xs' | 'sm' | 'base', {
+  text: string;
+  headingBase: string;
+  headingSm: string;
+}> = {
+  xs: { text: 'text-xs', headingBase: 'text-sm', headingSm: 'text-xs' },
+  sm: { text: 'text-sm', headingBase: 'text-base', headingSm: 'text-sm' },
+  base: { text: 'text-base', headingBase: 'text-lg', headingSm: 'text-base' },
+};
+
 /**
  * Build the chat-tuned markdown component map.
  *
- * Base text size: text-sm (14px) for normal, text-xs (12px) for compact.
- * Heading sizes are scaled down a notch from the prose defaults so
- * inline-in-chat headings don't dominate.
+ * Body text size follows `size` (xs/sm/base → 12/14/16px). Heading
+ * sizes are scaled a notch above the body so inline-in-chat headings
+ * stand out without dominating.
  */
 export function createMarkdownComponents(
   isUser: boolean = false,
-  isCompact: boolean = false,
+  size: 'xs' | 'sm' | 'base' = 'sm',
+  codeTheme: 'dark' | 'light' = 'dark',
 ): Components {
-  const textSize = isCompact ? 'text-xs' : 'text-sm';
-  const headingBase = isCompact ? 'text-sm' : 'text-base';
-  const headingSm = isCompact ? 'text-xs' : 'text-sm';
+  const { text: textSize, headingBase, headingSm } = SIZE_CLASSES[size];
+  // Code blocks / diagrams only have a binary compact mode — treat the
+  // smallest text level as compact, larger ones as roomy.
+  const isCompact = size === 'xs';
 
   return {
     h1: ({ children }) => (
@@ -115,11 +128,11 @@ export function createMarkdownComponents(
       }
 
       try {
-        return <CodeBlock code={codeContent} language={language} isUser={isUser} isCompact={isCompact} />;
+        return <CodeBlock code={codeContent} language={language} isUser={isUser} isCompact={isCompact} codeTheme={codeTheme} />;
       } catch (error) {
         // eslint-disable-next-line no-console
         console.warn('CodeBlock failed, using fallback:', error);
-        return <CodeBlockFallback code={codeContent} language={language} isUser={isUser} isCompact={isCompact} />;
+        return <CodeBlockFallback code={codeContent} language={language} isUser={isUser} isCompact={isCompact} codeTheme={codeTheme} />;
       }
     },
 

package/src/tools/MarkdownMessage/types.ts

@@ -50,7 +50,24 @@ export interface MarkdownMessageProps {
   className?: string;
   /** Whether the message is from the user (affects styling) */
   isUser?: boolean;
-  /** Use compact size (text-xs instead of text-sm) */
+  /**
+   * Body text size — drives `<p>/<li>/<table>` etc. and scales
+   * headings a notch above the body.
+   *
+   * - `xs` — text-xs (12px), dense
+   * - `sm` — text-sm (14px), default
+   * - `base` — text-base (16px), large / `appearance="full"` chats
+   *
+   * When set, `size` wins over `isCompact`.
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'base';
+  /**
+   * Use compact size (text-xs instead of text-sm).
+   * @deprecated Use `size` instead — `isCompact` maps to
+   * `size="xs"` (true) / `size="sm"` (false) and is ignored when
+   * `size` is set explicitly.
+   */
   isCompact?: boolean;
   /**
    * Force the plain-text rendering path (single `<div>` with
@@ -114,4 +131,10 @@ export interface MarkdownMessageProps {
   defaultExpanded?: boolean;
   /** Callback when collapsed state changes */
   onCollapseChange?: (isCollapsed: boolean) => void;
+  /**
+   * Code-fence surface palette. @default 'dark' — syntax highlighting
+   * ships its own contrast model and reads washed out on a light
+   * surface. Pass `'light'` to opt into a light code surface.
+   */
+  codeTheme?: 'dark' | 'light';
 }

package/src/tools/Mermaid/Mermaid.client.tsx

@@ -5,6 +5,7 @@ import React, { useRef } from 'react';
 import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
 import { FloatingToolbar } from '../../components/FloatingToolbar';
 import { CopyAction, FullscreenAction } from '../../components/FloatingToolbar/actions';
+import { MermaidErrorPanel } from './components/MermaidErrorPanel';
 import { MermaidFullscreenModal } from './components/MermaidFullscreenModal';
 import { useMermaidFullscreen } from './hooks/useMermaidFullscreen';
 import { useMermaidRenderer } from './hooks/useMermaidRenderer';
@@ -23,6 +24,12 @@ interface MermaidProps {
      * they have a reason to.
      */
     scrollIsolation?: boolean;
+    /**
+     * Debounce window (ms) before (re)rendering after `chart` changes.
+     * Lower values feel snappier for static charts; higher values
+     * reduce churn while a diagram is streamed in. Default 300.
+     */
+    debounceMs?: number;
 }
 
 const Mermaid: React.FC<MermaidProps> = ({
@@ -31,15 +38,17 @@ const Mermaid: React.FC<MermaidProps> = ({
     isCompact = false,
     fullscreen = true,
     scrollIsolation = false,
+    debounceMs = 300,
 }) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const theme = useResolvedTheme();
 
     // Rendering logic
-    const { mermaidRef, svgContent, isVertical, isRendering } = useMermaidRenderer({
+    const { mermaidRef, svgContent, isVertical, isRendering, error } = useMermaidRenderer({
         chart,
         theme,
         isCompact,
+        debounceMs,
     });
 
     // Fullscreen modal logic (only used if fullscreen prop is true)
@@ -51,22 +60,35 @@ const Mermaid: React.FC<MermaidProps> = ({
         handleBackdropClick,
     } = useMermaidFullscreen();
 
+    // Hoist derived UI state out of JSX (data-before-JSX).
+    const hasError = error !== null;
+    // The spinner needs a box to sit in while the first diagram renders
+    // (empty SVG host has no intrinsic height).
+    const showPlaceholderHeight = isRendering && !svgContent && !hasError;
+    const showToolbar = !!svgContent && !isRendering && !hasError;
 
     return (
         <>
             <div ref={containerRef} className={`relative ${className}`}>
+                {hasError && <MermaidErrorPanel message={error} />}
+
                 <div
                     ref={mermaidRef}
                     className="flex justify-center items-center"
-                    style={{ isolation: 'isolate' }}
+                    style={{
+                        isolation: 'isolate',
+                        minHeight: showPlaceholderHeight ? 100 : undefined,
+                        display: hasError ? 'none' : undefined,
+                    }}
                 />
-                {isRendering && (
-                    <div className="absolute inset-0 flex items-center justify-center">
+
+                {isRendering && !hasError && (
+                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
                         <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary" />
                     </div>
                 )}
 
-                {svgContent && !isRendering && (
+                {showToolbar && (
                     <FloatingToolbar containerRef={containerRef} scrollIsolation={scrollIsolation}>
                         <CopyAction value={chart} title="Copy source" />
                         {fullscreen && (

package/src/tools/Mermaid/components/MermaidErrorPanel.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import { AlertTriangle } from 'lucide-react';
+
+interface MermaidErrorPanelProps {
+    /** Human-readable error message from the Mermaid parser. */
+    message: string;
+}
+
+/**
+ * Inline error panel shown when a Mermaid diagram fails to parse.
+ *
+ * Replaces the previous `innerHTML`-injected markup — keeps rendering in
+ * React, uses semantic `destructive` tokens, and stays accessible
+ * (`role="alert"`).
+ */
+export const MermaidErrorPanel: React.FC<MermaidErrorPanelProps> = ({ message }) => {
+    return (
+        <div
+            role="alert"
+            className="flex items-start gap-3 rounded-md border border-destructive/30 bg-destructive/10 p-4 text-destructive"
+        >
+            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" aria-hidden="true" />
+            <div className="min-w-0">
+                <p className="text-sm font-semibold">Diagram syntax error</p>
+                <p className="mt-0.5 break-words text-sm text-destructive/90">{message}</p>
+            </div>
+        </div>
+    );
+};

package/src/tools/Mermaid/components/MermaidFullscreenModal.tsx

@@ -6,14 +6,20 @@ import { X, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
 import { TransformWrapper, TransformComponent, useControls } from 'react-zoom-pan-pinch';
 
 import { Button } from '@djangocfg/ui-core/components';
-import { applyMermaidTextColors } from '../utils/mermaid-helpers';
+import { applyMermaidTextColors, getTextColor } from '../utils/mermaid-helpers';
 
 interface MermaidFullscreenModalProps {
     isOpen: boolean;
     svgContent: string;
-    isVertical: boolean;
+    /**
+     * Whether the source diagram is vertical. Kept for API compatibility
+     * with callers; the modal now auto-fits via measured bbox so it no
+     * longer needs an orientation hint.
+     */
+    isVertical?: boolean;
     theme: string;
-    chart: string;
+    /** Diagram source. Reserved for future modal actions (copy/export). */
+    chart?: string;
     fullscreenRef: React.RefObject<HTMLDivElement | null>;
     onClose: () => void;
     onBackdropClick: (e: React.MouseEvent) => void;
@@ -41,7 +47,6 @@ function ZoomControls() {
 export const MermaidFullscreenModal: React.FC<MermaidFullscreenModalProps> = ({
     isOpen,
     svgContent,
-    isVertical,
     theme,
     fullscreenRef,
     onClose,
@@ -99,22 +104,14 @@ export const MermaidFullscreenModal: React.FC<MermaidFullscreenModalProps> = ({
         };
     }, [isOpen, svgContent, fullscreenRef]);
 
-    // Apply text colors
+    // Re-assert theme text colors on the fullscreen SVG. The shared
+    // `getTextColor` reads the (already fully-wrapped) `--foreground`
+    // token — it never double-wraps `hsl(...)`.
     useEffect(() => {
         if (isOpen && fullscreenRef.current) {
-            const getCSSVariable = (variable: string) => {
-                if (typeof document === 'undefined') return '';
-                const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
-                return value ? `hsl(${value})` : '';
-            };
-
-            const textColor = theme === 'dark'
-                ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'
-                : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';
-
-            applyMermaidTextColors(fullscreenRef.current, textColor);
+            applyMermaidTextColors(fullscreenRef.current, getTextColor(theme));
         }
-    }, [isOpen, theme, isVertical, fullscreenRef, svgContent]);
+    }, [isOpen, theme, fullscreenRef, svgContent]);
 
     // Handle escape key
     useEffect(() => {