Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-16 04:36:34 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🌗 refactor: Consistent Mermaid Theming for Inline and Artifact Renderers (#12055)

Browse source 
* refactor: consistent theming between inline and Artifacts Mermaid Diagram

* refactor: Enhance Mermaid component with improved theming and security features

- Updated Mermaid component to utilize useCallback for performance optimization.
- Increased maximum zoom level from 4 to 10 for better diagram visibility.
- Added security level configuration to Mermaid initialization for enhanced security.
- Refactored theme handling to ensure consistent theming between inline and artifact diagrams.
- Introduced unit tests for Mermaid configuration to validate flowchart settings and theme behavior.

* refactor: Improve theme handling in useMermaid hook

- Enhanced theme variable management by merging custom theme variables with default values for dark mode.
- Ensured consistent theming across Mermaid diagrams by preserving existing theme configurations while applying new defaults.

* refactor: Consolidate imports in mermaid test file

- Combined multiple imports from the mermaid utility into a single statement for improved readability and organization in the test file.

* feat: Add subgraph title contrast adjustment for Mermaid diagrams

- Introduced a utility function to enhance text visibility on subgraph titles by adjusting the fill color based on background luminance.
- Updated the Mermaid component to utilize this function, ensuring better contrast in rendered SVGs.
- Added comprehensive unit tests to validate the contrast adjustment logic across various scenarios.

* refactor: Update MermaidHeader component for improved button accessibility and styling

- Replaced Button components with TooltipAnchor for better accessibility and user experience.
- Consolidated button styles into a single class for consistency.
- Enhanced the layout and spacing of the header for a cleaner appearance.

* fix: hex color handling and improve contrast adjustment in Mermaid diagrams

- Updated hexLuminance function to support 3-character hex shorthand by expanding it to 6 characters.
- Refined the fixSubgraphTitleContrast function to avoid double semicolons in style attributes and ensure proper fill color adjustments based on background luminance.
- Added unit tests to validate the handling of 3-character hex fills and the prevention of double semicolons in text styles.

* chore: Simplify Virtual Scrolling Performance tests by removing performance timing checks

- Removed performance timing checks and associated console logs from tests handling 1000 and 5000 agents.
- Focused tests on verifying the correct rendering of virtual list items without measuring render time.
This commit is contained in:
Danny Avila 2026-03-04 08:25:57 -05:00
parent 6ebee069c7
commit f1eabdbdb7
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
8 changed files with 671 additions and 309 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/Agents/tests/VirtualScrollingPerformance.test.tsx
View file

@ -179,9 +179,7 @@ describe('Virtual Scrolling Performance', () => {
};
it('efficiently handles 1000 agents without rendering all DOM nodes', () => {
const startTime = performance.now();
renderComponent(1000);
const endTime = performance.now();
const virtualList = screen.getByTestId('virtual-list');
expect(virtualList).toBeInTheDocument();
@ -191,19 +189,10 @@ describe('Virtual Scrolling Performance', () => {
const renderedCards = screen.getAllByTestId(/agent-card-/);
expect(renderedCards.length).toBeLessThan(50); // Much less than 1000
expect(renderedCards.length).toBeGreaterThan(0);
// Performance check: rendering should be fast
const renderTime = endTime - startTime;
expect(renderTime).toBeLessThan(740);
console.log(`Rendered 1000 agents in ${renderTime.toFixed(2)}ms`);
console.log(`Only ${renderedCards.length} DOM nodes created for 1000 agents`);
});
it('efficiently handles 5000 agents (stress test)', () => {
const startTime = performance.now();
renderComponent(5000);
const endTime = performance.now();
const virtualList = screen.getByTestId('virtual-list');
expect(virtualList).toBeInTheDocument();
@ -213,13 +202,6 @@ describe('Virtual Scrolling Performance', () => {
const renderedCards = screen.getAllByTestId(/agent-card-/);
expect(renderedCards.length).toBeLessThan(50);
expect(renderedCards.length).toBeGreaterThan(0);
// Performance should still be reasonable
const renderTime = endTime - startTime;
expect(renderTime).toBeLessThan(200); // Should render in less than 200ms
console.log(`Rendered 5000 agents in ${renderTime.toFixed(2)}ms`);
console.log(`Only ${renderedCards.length} DOM nodes created for 5000 agents`);
});
it('calculates correct number of virtual rows for different screen sizes', () => {

182
client/src/components/Artifacts/Mermaid.tsx
View file

@ -1,153 +1,123 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useRef, useState, useCallback } from 'react';
import mermaid from 'mermaid';
import { Button } from '@librechat/client';
import { TransformWrapper, TransformComponent, ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
import { ZoomIn, ZoomOut, RefreshCw } from 'lucide-react';
import { ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
import type { ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
import { artifactFlowchartConfig } from '~/utils/mermaid';
interface MermaidDiagramProps {
content: string;
isDarkMode?: boolean;
}
/** Note: this is just for testing purposes, don't actually use this component */
const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ content }) => {
const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ content, isDarkMode = true }) => {
const mermaidRef = useRef<HTMLDivElement>(null);
const transformRef = useRef<ReactZoomPanPinchRef>(null);
const [isRendered, setIsRendered] = useState(false);
const theme = isDarkMode ? 'dark' : 'neutral';
const bgColor = isDarkMode ? '#212121' : '#FFFFFF';
useEffect(() => {
mermaid.initialize({
startOnLoad: false,
theme: 'base',
theme,
securityLevel: 'sandbox',
themeVariables: {
background: '#282C34',
primaryColor: '#333842',
secondaryColor: '#333842',
tertiaryColor: '#333842',
primaryTextColor: '#ABB2BF',
secondaryTextColor: '#ABB2BF',
lineColor: '#636D83',
fontSize: '16px',
nodeBorder: '#636D83',
mainBkg: '#282C34',
altBackground: '#282C34',
textColor: '#ABB2BF',
edgeLabelBackground: '#282C34',
clusterBkg: '#282C34',
clusterBorder: '#636D83',
labelBoxBkgColor: '#333842',
labelBoxBorderColor: '#636D83',
labelTextColor: '#ABB2BF',
},
flowchart: {
curve: 'basis',
nodeSpacing: 50,
rankSpacing: 50,
diagramPadding: 8,
htmlLabels: true,
useMaxWidth: true,
padding: 15,
wrappingWidth: 200,
},
flowchart: artifactFlowchartConfig,
});
const renderDiagram = async () => {
if (mermaidRef.current) {
try {
const { svg } = await mermaid.render('mermaid-diagram', content);
mermaidRef.current.innerHTML = svg;
if (!mermaidRef.current) {
return;
}
const svgElement = mermaidRef.current.querySelector('svg');
if (svgElement) {
svgElement.style.width = '100%';
svgElement.style.height = '100%';
try {
const { svg } = await mermaid.render('mermaid-diagram', content);
mermaidRef.current.innerHTML = svg;
const pathElements = svgElement.querySelectorAll('path');
pathElements.forEach((path) => {
path.style.strokeWidth = '1.5px';
});
const rectElements = svgElement.querySelectorAll('rect');
rectElements.forEach((rect) => {
const parent = rect.parentElement;
if (parent && parent.classList.contains('node')) {
rect.style.stroke = '#636D83';
rect.style.strokeWidth = '1px';
} else {
rect.style.stroke = 'none';
}
});
}
setIsRendered(true);
} catch (error) {
console.error('Mermaid rendering error:', error);
const svgElement = mermaidRef.current.querySelector('svg');
if (svgElement) {
svgElement.style.width = '100%';
svgElement.style.height = '100%';
}
setIsRendered(true);
} catch (error) {
console.error('Mermaid rendering error:', error);
if (mermaidRef.current) {
mermaidRef.current.innerHTML = 'Error rendering diagram';
}
}
};
renderDiagram();
}, [content]);
}, [content, theme]);
const centerAndFitDiagram = () => {
const centerAndFitDiagram = useCallback(() => {
if (transformRef.current && mermaidRef.current) {
const { centerView, zoomToElement } = transformRef.current;
zoomToElement(mermaidRef.current as HTMLElement);
centerView(1, 0);
}
};
}, []);
useEffect(() => {
if (isRendered) {
centerAndFitDiagram();
}
}, [isRendered]);
}, [isRendered, centerAndFitDiagram]);
const handlePanning = () => {
if (transformRef.current) {
const { state, instance } = (transformRef.current as ReactZoomPanPinchRef | undefined) ?? {};
if (!state || !instance) {
return;
}
const { scale, positionX, positionY } = state;
const { wrapperComponent, contentComponent } = instance;
if (wrapperComponent && contentComponent) {
const wrapperRect = wrapperComponent.getBoundingClientRect();
const contentRect = contentComponent.getBoundingClientRect();
const maxX = wrapperRect.width - contentRect.width * scale;
const maxY = wrapperRect.height - contentRect.height * scale;
let newX = positionX;
let newY = positionY;
if (newX > 0) {
newX = 0;
}
if (newY > 0) {
newY = 0;
}
if (newX < maxX) {
newX = maxX;
}
if (newY < maxY) {
newY = maxY;
}
if (newX !== positionX || newY !== positionY) {
instance.setTransformState(scale, newX, newY);
}
}
const handlePanning = useCallback(() => {
if (!transformRef.current) {
return;
}
};
const { state, instance } = transformRef.current;
if (!state || !instance) {
return;
}
const { scale, positionX, positionY } = state;
const { wrapperComponent, contentComponent } = instance;
if (!wrapperComponent || !contentComponent) {
return;
}
const wrapperRect = wrapperComponent.getBoundingClientRect();
const contentRect = contentComponent.getBoundingClientRect();
const maxX = wrapperRect.width - contentRect.width * scale;
const maxY = wrapperRect.height - contentRect.height * scale;
let newX = positionX;
let newY = positionY;
if (newX > 0) {
newX = 0;
}
if (newY > 0) {
newY = 0;
}
if (newX < maxX) {
newX = maxX;
}
if (newY < maxY) {
newY = maxY;
}
if (newX !== positionX || newY !== positionY) {
instance.setTransformState(scale, newX, newY);
}
}, []);
return (
<div className="relative h-screen w-screen cursor-move bg-[#282C34] p-5">
<div
className="relative h-screen w-screen cursor-move p-5"
style={{ backgroundColor: bgColor }}
>
<TransformWrapper
ref={transformRef}
initialScale={1}
minScale={0.1}
maxScale={4}
maxScale={10}
limitToBounds={false}
centerOnInit={true}
initialPositionY={0}
@ -174,7 +144,7 @@ const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ content }) => {
<ZoomOut className="h-4 w-4" />
</Button>
<Button onClick={centerAndFitDiagram} variant="outline" size="icon">
<RefreshCw className="h-4 w-4" />
<RotateCcw className="h-4 w-4" />
</Button>
</div>
</>

7
client/src/components/Messages/Content/Mermaid.tsx
View file

@ -12,6 +12,7 @@ import {
OGDialogContent,
} from '@librechat/client';
import { useLocalize, useDebouncedMermaid } from '~/hooks';
import { fixSubgraphTitleContrast } from '~/utils/mermaid';
import MermaidHeader from './MermaidHeader';
import cn from '~/utils/cn';
@ -181,6 +182,8 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
}
fixSubgraphTitleContrast(svgElement);
return {
processedSvg: new XMLSerializer().serializeToString(doc),
parsedDimensions: dimensions,
@ -672,7 +675,7 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
className={cn(
'relative overflow-hidden p-4 transition-colors duration-200',
'rounded-md',
showControls ? 'bg-surface-primary-alt' : 'bg-transparent',
showControls ? 'bg-surface-primary-alt dark:bg-white/[0.03]' : 'bg-transparent',
isPanning ? 'cursor-grabbing' : 'cursor-grab',
)}
style={{ height: `${calculatedHeight}px` }}
@ -811,7 +814,7 @@ const Mermaid: React.FC<MermaidProps> = memo(({ children, id, theme }) => {
className={cn(
'relative overflow-hidden p-4 transition-colors duration-200',
'rounded-md',
showControls ? 'bg-surface-primary-alt' : 'bg-transparent',
showControls ? 'bg-surface-primary-alt dark:bg-white/[0.03]' : 'bg-transparent',
isPanning ? 'cursor-grabbing' : 'cursor-grab',
)}
style={{ height: `${calculatedHeight}px` }}

90
client/src/components/Messages/Content/MermaidHeader.tsx
View file

@ -1,7 +1,7 @@
import React, { memo, useState, useCallback, useRef } from 'react';
import copy from 'copy-to-clipboard';
import { Expand, ChevronUp, ChevronDown } from 'lucide-react';
import { Button, Clipboard, CheckMark } from '@librechat/client';
import { Clipboard, CheckMark, TooltipAnchor } from '@librechat/client';
import { useLocalize } from '~/hooks';
import cn from '~/utils/cn';
@ -15,8 +15,8 @@ interface MermaidHeaderProps {
onToggleCode: () => void;
}
const buttonClasses =
'h-auto gap-1 rounded-sm px-1 py-0 text-xs text-gray-200 hover:bg-gray-600 hover:text-white focus-visible:ring-white focus-visible:ring-offset-0';
const iconBtnClass =
'flex items-center justify-center rounded p-1.5 text-text-secondary hover:bg-surface-hover focus-visible:outline focus-visible:outline-white';
const MermaidHeader: React.FC<MermaidHeaderProps> = memo(
({
@ -49,46 +49,58 @@ const MermaidHeader: React.FC<MermaidHeaderProps> = memo(
return (
<div
className={cn(
'flex items-center justify-between rounded-tl-md rounded-tr-md bg-gray-700/80 px-4 py-2 font-sans text-xs text-gray-200 backdrop-blur-sm transition-opacity duration-200',
'flex items-center justify-end gap-1 px-2 py-1 transition-opacity duration-200',
className,
)}
>
<span>{localize('com_ui_mermaid')}</span>
<div className="ml-auto flex gap-2">
{showExpandButton && onExpand && (
<Button
ref={expandButtonRef}
variant="ghost"
size="sm"
className={buttonClasses}
onClick={onExpand}
title={localize('com_ui_expand')}
{showExpandButton && onExpand && (
<TooltipAnchor
description={localize('com_ui_expand')}
render={
<button
ref={expandButtonRef}
type="button"
aria-label={localize('com_ui_expand')}
className={iconBtnClass}
onClick={onExpand}
>
<Expand className="h-4 w-4" />
</button>
}
/>
)}
<TooltipAnchor
description={showCode ? localize('com_ui_hide_code') : localize('com_ui_show_code')}
render={
<button
ref={showCodeButtonRef}
type="button"
aria-label={showCode ? localize('com_ui_hide_code') : localize('com_ui_show_code')}
className={iconBtnClass}
onClick={handleToggleCode}
>
<Expand className="h-4 w-4" />
{localize('com_ui_expand')}
</Button>
)}
<Button
ref={showCodeButtonRef}
variant="ghost"
size="sm"
className={cn(buttonClasses, 'min-w-[6rem]')}
onClick={handleToggleCode}
>
{showCode ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
{showCode ? localize('com_ui_hide_code') : localize('com_ui_show_code')}
</Button>
<Button
ref={copyButtonRef}
variant="ghost"
size="sm"
className={buttonClasses}
onClick={handleCopy}
>
{isCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard />}
{localize('com_ui_copy_code')}
</Button>
</div>
{showCode ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</button>
}
/>
<TooltipAnchor
description={isCopied ? localize('com_ui_copied') : localize('com_ui_copy_code')}
render={
<button
ref={copyButtonRef}
type="button"
aria-label={isCopied ? localize('com_ui_copied') : localize('com_ui_copy_code')}
className={iconBtnClass}
onClick={handleCopy}
>
{isCopied ? (
<CheckMark className="h-[18px] w-[18px]" />
) : (
<Clipboard className="h-4 w-4" />
)}
</button>
}
/>
</div>
);
},