mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-26 13:18:51 +01:00
🪄 feat: Code Artifacts (#3798)
* feat: Add CodeArtifacts component to Beta settings tab * chore: Update npm dependency to @codesandbox/sandpack-react@2.18.2 * WIP: artifacts first pass * WIP first pass remark-directive * chore: revert markdown to original component + new artifacts rendering * refactor: first pass rewrite * refactor: add throttling * first pass styling * style: Add Radix Tabs, more styling changes * feat: second pass * style: code styling * fix: package markdown fixes * feat: Add useEffect hook to Artifacts component for visibility control, slide in animation * fix: only set artifact if there is content * refactor: typing and make latest artifact active if the number of artifacts changed * feat: artifacts + shadcnui * feat: Add Copy Code button to Artifacts component * feat: first pass streaming updates * refactor: optimize ordering of artifacts in Artifacts component * refactor: optimize ordering of artifacts and add latest artifact activation in Artifacts component * refactor: add order prop to Artifact * feat: update to latest, use update time for ordering * refactor: optimize ordering of artifacts and activate latest artifact in Artifacts component * wip: remove thinking text and artifact formatting if empty * refactor: optimize Markdown rendering and add support for code artifacts * feat: global state for current artifact Id and set on artifact preview click * refactor: Rename CodePreview component to ArtifactButton * refactor: apply growth to artifact frame so artifact preview can take full space * refactor: remove artifactIdsState * refactor: nullify artifact state and reset on empty conversation * feat: reset artifact state on conversation change * feat: artifacts system prompt in backend * refactor: update UI artifact toggle label to match localization key * style: remove ArtifactButton inline-block styling * feat: memoize ArtifactPreview, add html support * refactor: abstract out components * chore: bump react-resizable-panel * refactor: resizable panel order props * fix: side panel resizing crashes * style: temporarily remove scrolling, add better styling * chore: remove thinking for now * chore: preprocess artifacts for now * feat: Add auto scrolling to CodeMarkdown (artifacts) * feat: autoswitch to preview * feat: auto switch to code, adjust prompt, remove unused code * feat: refresh button * feat: open/close artifacts * wip: mermaid * refactor: w-fit Artifact button * chore: organize code * feat: first pass mermaid * refactor: improve panning logic in MermaidDiagram component * feat: center/zoom on first render * refactor: add centering with reset button * style: mermaid styling * refactor: add back MermaidDiagram * fix: static/html template * fix: mermaid * add examples to artifacts prompt * refactor: fix CodeBar plugin prop logic * refactor: remove unnecessary mention of artifacts when not requested * fix: remove preprocessCodeArtifacts function and fix imports * feat: improve artifacts guidelines and remove unnecessary mentions * refactor: improve artifacts guidelines and remove unnecessary mentions * chore: uninstall unused packages * chore: bump vite * chore: update three dependency to version 0.167.1 * refactor: move beta settings, add additional artifacts toggles * feat: artifacts mode toggles * refactor: adjust prompt * feat: shadcnui instructions * feat: code artifacts custom prompt mode * chore: Update artifacts UI labels and instructions localizations * refactor: Remove unused code in Markdown component
This commit is contained in:
Danny Avila
GitHub
parent
80e1bdc282
commit
7c1ee242eb
56 changed files with 11062 additions and 1043 deletions
94
client/src/utils/artifacts.spec.ts
Normal file
94
client/src/utils/artifacts.spec.ts
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import { preprocessCodeArtifacts } from './artifacts';
|
||||
|
||||
describe('preprocessCodeArtifacts', () => {
|
||||
test('should return non-string inputs unchanged', () => {
|
||||
expect(preprocessCodeArtifacts(123 as unknown as string)).toBe('');
|
||||
expect(preprocessCodeArtifacts(null as unknown as string)).toBe('');
|
||||
expect(preprocessCodeArtifacts(undefined)).toBe('');
|
||||
expect(preprocessCodeArtifacts({} as unknown as string)).toEqual('');
|
||||
});
|
||||
|
||||
test('should remove <thinking> tags and their content', () => {
|
||||
const input = '<thinking>This should be removed</thinking>Some content';
|
||||
const expected = 'Some content';
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test('should remove unclosed <thinking> tags and their content', () => {
|
||||
const input = '<thinking>This should be removed\nSome content';
|
||||
const expected = '';
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test('should remove artifact headers up to and including empty code block', () => {
|
||||
const input = ':::artifact{identifier="test"}\n```\n```\nSome content';
|
||||
const expected = ':::artifact{identifier="test"}\n```\n```\nSome content';
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test('should keep artifact headers when followed by empty code block and content', () => {
|
||||
const input = ':::artifact{identifier="test"}\n```\n```\nSome content';
|
||||
const expected = ':::artifact{identifier="test"}\n```\n```\nSome content';
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test('should handle multiple artifact headers correctly', () => {
|
||||
const input = ':::artifact{id="1"}\n```\n```\n:::artifact{id="2"}\n```\ncode\n```\nContent';
|
||||
const expected = ':::artifact{id="1"}\n```\n```\n:::artifact{id="2"}\n```\ncode\n```\nContent';
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test('should handle complex input with multiple patterns', () => {
|
||||
const input = `
|
||||
<thinking>Remove this</thinking>
|
||||
Some text
|
||||
:::artifact{id="1"}
|
||||
\`\`\`
|
||||
\`\`\`
|
||||
<thinking>And this</thinking>
|
||||
:::artifact{id="2"}
|
||||
\`\`\`
|
||||
keep this code
|
||||
\`\`\`
|
||||
More text
|
||||
`;
|
||||
const expected = `
|
||||
|
||||
Some text
|
||||
:::artifact{id="1"}
|
||||
\`\`\`
|
||||
\`\`\`
|
||||
|
||||
:::artifact{id="2"}
|
||||
\`\`\`
|
||||
keep this code
|
||||
\`\`\`
|
||||
More text
|
||||
`;
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test('should remove artifact headers without code blocks', () => {
|
||||
const input = ':::artifact{identifier="test"}\nSome content without code block';
|
||||
const expected = '';
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test('should remove artifact headers up to incomplete code block', () => {
|
||||
const input = ':::artifact{identifier="react-cal';
|
||||
const expected = '';
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test('should keep artifact headers when any character follows code block', () => {
|
||||
const input = ':::artifact{identifier="react-calculator"}\n```t';
|
||||
const expected = ':::artifact{identifier="react-calculator"}\n```t';
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
|
||||
test('should keep artifact headers when whitespace follows code block', () => {
|
||||
const input = ':::artifact{identifier="react-calculator"}\n``` ';
|
||||
const expected = ':::artifact{identifier="react-calculator"}\n``` ';
|
||||
expect(preprocessCodeArtifacts(input)).toBe(expected);
|
||||
});
|
||||
});
|
||||
237
client/src/utils/artifacts.ts
Normal file
237
client/src/utils/artifacts.ts
Normal file
|
|
@ -0,0 +1,237 @@
|
|||
import dedent from 'dedent';
|
||||
import { ArtifactModes } from 'librechat-data-provider';
|
||||
import type {
|
||||
SandpackProviderProps,
|
||||
SandpackPredefinedTemplate,
|
||||
} from '@codesandbox/sandpack-react';
|
||||
import * as shadcnComponents from '~/utils/shadcn';
|
||||
|
||||
export const getArtifactsMode = ({
|
||||
codeArtifacts,
|
||||
includeShadcnui,
|
||||
customPromptMode,
|
||||
}: {
|
||||
codeArtifacts: boolean;
|
||||
includeShadcnui: boolean;
|
||||
customPromptMode: boolean;
|
||||
}): ArtifactModes | undefined => {
|
||||
if (!codeArtifacts) {
|
||||
return undefined;
|
||||
} else if (customPromptMode) {
|
||||
return ArtifactModes.CUSTOM;
|
||||
} else if (includeShadcnui) {
|
||||
return ArtifactModes.SHADCNUI;
|
||||
}
|
||||
return ArtifactModes.DEFAULT;
|
||||
};
|
||||
|
||||
const artifactFilename = {
|
||||
'application/vnd.mermaid': 'App.tsx',
|
||||
'application/vnd.react': 'App.tsx',
|
||||
'text/html': 'index.html',
|
||||
'application/vnd.code-html': 'index.html',
|
||||
default: 'index.html',
|
||||
// 'css': 'css',
|
||||
// 'javascript': 'js',
|
||||
// 'typescript': 'ts',
|
||||
// 'jsx': 'jsx',
|
||||
// 'tsx': 'tsx',
|
||||
};
|
||||
|
||||
const artifactTemplate: Record<
|
||||
keyof typeof artifactFilename,
|
||||
SandpackPredefinedTemplate | undefined
|
||||
> = {
|
||||
'text/html': 'static',
|
||||
'application/vnd.react': 'react-ts',
|
||||
'application/vnd.mermaid': 'react-ts',
|
||||
'application/vnd.code-html': 'static',
|
||||
default: 'static',
|
||||
// 'css': 'css',
|
||||
// 'javascript': 'js',
|
||||
// 'typescript': 'ts',
|
||||
// 'jsx': 'jsx',
|
||||
// 'tsx': 'tsx',
|
||||
};
|
||||
|
||||
export function getFileExtension(language?: string): string {
|
||||
switch (language) {
|
||||
case 'application/vnd.react':
|
||||
return 'tsx';
|
||||
case 'application/vnd.mermaid':
|
||||
return 'mermaid';
|
||||
case 'text/html':
|
||||
return 'html';
|
||||
// case 'jsx':
|
||||
// return 'jsx';
|
||||
// case 'tsx':
|
||||
// return 'tsx';
|
||||
// case 'html':
|
||||
// return 'html';
|
||||
// case 'css':
|
||||
// return 'css';
|
||||
default:
|
||||
return 'txt';
|
||||
}
|
||||
}
|
||||
|
||||
export function getKey(type: string, language?: string): string {
|
||||
return `${type}${(language?.length ?? 0) > 0 ? `-${language}` : ''}`;
|
||||
}
|
||||
|
||||
export function getArtifactFilename(type: string, language?: string): string {
|
||||
const key = getKey(type, language);
|
||||
return artifactFilename[key] ?? artifactFilename.default;
|
||||
}
|
||||
|
||||
export function getTemplate(type: string, language?: string): SandpackPredefinedTemplate {
|
||||
const key = getKey(type, language);
|
||||
return artifactTemplate[key] ?? (artifactTemplate.default as SandpackPredefinedTemplate);
|
||||
}
|
||||
|
||||
const standardDependencies = {
|
||||
three: '^0.167.1',
|
||||
'lucide-react': '^0.394.0',
|
||||
'react-router-dom': '^6.11.2',
|
||||
'class-variance-authority': '^0.6.0',
|
||||
clsx: '^1.2.1',
|
||||
'date-fns': '^3.3.1',
|
||||
'tailwind-merge': '^1.9.1',
|
||||
'tailwindcss-animate': '^1.0.5',
|
||||
recharts: '2.12.7',
|
||||
'@radix-ui/react-accordion': '^1.1.2',
|
||||
'@radix-ui/react-alert-dialog': '^1.0.2',
|
||||
'@radix-ui/react-aspect-ratio': '^1.1.0',
|
||||
'@radix-ui/react-avatar': '^1.1.0',
|
||||
'@radix-ui/react-checkbox': '^1.0.3',
|
||||
'@radix-ui/react-collapsible': '^1.0.3',
|
||||
'@radix-ui/react-dialog': '^1.0.2',
|
||||
'@radix-ui/react-dropdown-menu': '^2.1.1',
|
||||
'@radix-ui/react-hover-card': '^1.0.5',
|
||||
'@radix-ui/react-label': '^2.0.0',
|
||||
'@radix-ui/react-menubar': '^1.1.1',
|
||||
'@radix-ui/react-navigation-menu': '^1.2.0',
|
||||
'@radix-ui/react-popover': '^1.0.7',
|
||||
'@radix-ui/react-progress': '^1.1.0',
|
||||
'@radix-ui/react-radio-group': '^1.1.3',
|
||||
'@radix-ui/react-select': '^2.0.0',
|
||||
'@radix-ui/react-separator': '^1.0.3',
|
||||
'@radix-ui/react-slider': '^1.1.1',
|
||||
'@radix-ui/react-switch': '^1.0.3',
|
||||
'@radix-ui/react-tabs': '^1.0.3',
|
||||
'@radix-ui/react-toast': '^1.1.5',
|
||||
'@radix-ui/react-tooltip': '^1.0.6',
|
||||
'@radix-ui/react-slot': '^1.1.0',
|
||||
'@radix-ui/react-toggle': '^1.1.0',
|
||||
'@radix-ui/react-toggle-group': '^1.1.0',
|
||||
'embla-carousel-react': '^8.2.0',
|
||||
'react-day-picker': '^9.0.8',
|
||||
vaul: '^0.9.1',
|
||||
};
|
||||
|
||||
const mermaidDependencies = Object.assign(
|
||||
{
|
||||
mermaid: '^11.0.2',
|
||||
'react-zoom-pan-pinch': '^3.6.1',
|
||||
},
|
||||
standardDependencies,
|
||||
);
|
||||
|
||||
const dependenciesMap: Record<keyof typeof artifactFilename, object> = {
|
||||
'application/vnd.mermaid': mermaidDependencies,
|
||||
'application/vnd.react': standardDependencies,
|
||||
'text/html': standardDependencies,
|
||||
'application/vnd.code-html': standardDependencies,
|
||||
default: standardDependencies,
|
||||
};
|
||||
|
||||
export function getDependencies(type: string): Record<string, string> {
|
||||
return dependenciesMap[type] ?? standardDependencies;
|
||||
}
|
||||
|
||||
export function getProps(type: string): Partial<SandpackProviderProps> {
|
||||
return {
|
||||
customSetup: {
|
||||
dependencies: getDependencies(type),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const sharedOptions: SandpackProviderProps['options'] = {
|
||||
externalResources: ['https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css'],
|
||||
};
|
||||
|
||||
export const sharedFiles = {
|
||||
'/lib/utils.ts': shadcnComponents.utils,
|
||||
'/components/ui/accordion.tsx': shadcnComponents.accordian,
|
||||
'/components/ui/alert-dialog.tsx': shadcnComponents.alertDialog,
|
||||
'/components/ui/alert.tsx': shadcnComponents.alert,
|
||||
'/components/ui/avatar.tsx': shadcnComponents.avatar,
|
||||
'/components/ui/badge.tsx': shadcnComponents.badge,
|
||||
'/components/ui/breadcrumb.tsx': shadcnComponents.breadcrumb,
|
||||
'/components/ui/button.tsx': shadcnComponents.button,
|
||||
'/components/ui/calendar.tsx': shadcnComponents.calendar,
|
||||
'/components/ui/card.tsx': shadcnComponents.card,
|
||||
'/components/ui/carousel.tsx': shadcnComponents.carousel,
|
||||
'/components/ui/checkbox.tsx': shadcnComponents.checkbox,
|
||||
'/components/ui/collapsible.tsx': shadcnComponents.collapsible,
|
||||
'/components/ui/dialog.tsx': shadcnComponents.dialog,
|
||||
'/components/ui/drawer.tsx': shadcnComponents.drawer,
|
||||
'/components/ui/dropdown-menu.tsx': shadcnComponents.dropdownMenu,
|
||||
'/components/ui/input.tsx': shadcnComponents.input,
|
||||
'/components/ui/label.tsx': shadcnComponents.label,
|
||||
'/components/ui/menubar.tsx': shadcnComponents.menuBar,
|
||||
'/components/ui/navigation-menu.tsx': shadcnComponents.navigationMenu,
|
||||
'/components/ui/pagination.tsx': shadcnComponents.pagination,
|
||||
'/components/ui/popover.tsx': shadcnComponents.popover,
|
||||
'/components/ui/progress.tsx': shadcnComponents.progress,
|
||||
'/components/ui/radio-group.tsx': shadcnComponents.radioGroup,
|
||||
'/components/ui/select.tsx': shadcnComponents.select,
|
||||
'/components/ui/separator.tsx': shadcnComponents.separator,
|
||||
'/components/ui/skeleton.tsx': shadcnComponents.skeleton,
|
||||
'/components/ui/slider.tsx': shadcnComponents.slider,
|
||||
'/components/ui/switch.tsx': shadcnComponents.switchComponent,
|
||||
'/components/ui/table.tsx': shadcnComponents.table,
|
||||
'/components/ui/tabs.tsx': shadcnComponents.tabs,
|
||||
'/components/ui/textarea.tsx': shadcnComponents.textarea,
|
||||
'/components/ui/toast.tsx': shadcnComponents.toast,
|
||||
'/components/ui/toaster.tsx': shadcnComponents.toaster,
|
||||
'/components/ui/toggle-group.tsx': shadcnComponents.toggleGroup,
|
||||
'/components/ui/toggle.tsx': shadcnComponents.toggle,
|
||||
'/components/ui/tooltip.tsx': shadcnComponents.tooltip,
|
||||
'/components/ui/use-toast.tsx': shadcnComponents.useToast,
|
||||
'/public/index.html': dedent`
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
};
|
||||
|
||||
export function preprocessCodeArtifacts(text?: string): string {
|
||||
if (typeof text !== 'string') {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Remove <thinking> tags and their content
|
||||
text = text.replace(/<thinking>[\s\S]*?<\/thinking>|<thinking>[\s\S]*/g, '');
|
||||
|
||||
// Process artifact headers
|
||||
const regex = /(^|\n)(:::artifact[\s\S]*?(?:```[\s\S]*?```|$))/g;
|
||||
return text.replace(regex, (match, newline, artifactBlock) => {
|
||||
if (artifactBlock.includes('```') === true) {
|
||||
// Keep artifact headers with code blocks (empty or not)
|
||||
return newline + artifactBlock;
|
||||
}
|
||||
// Remove artifact headers without code blocks, but keep the newline
|
||||
return newline;
|
||||
});
|
||||
}
|
||||
|
|
@ -27,6 +27,12 @@ const codeFile = {
|
|||
title: 'Code',
|
||||
};
|
||||
|
||||
const artifact = {
|
||||
paths: CodePaths,
|
||||
fill: '#2D305C',
|
||||
title: 'Code',
|
||||
};
|
||||
|
||||
export const fileTypes = {
|
||||
/* Category matches */
|
||||
file: {
|
||||
|
|
@ -41,6 +47,7 @@ export const fileTypes = {
|
|||
csv: spreadsheet,
|
||||
pdf: textDocument,
|
||||
'text/x-': codeFile,
|
||||
artifact: artifact,
|
||||
|
||||
/* Exact matches */
|
||||
// 'application/json':,
|
||||
|
|
|
|||
235
client/src/utils/mermaid.ts
Normal file
235
client/src/utils/mermaid.ts
Normal file
|
|
@ -0,0 +1,235 @@
|
|||
import dedent from 'dedent';
|
||||
|
||||
const mermaid = dedent(`import React, { useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
TransformWrapper,
|
||||
TransformComponent,
|
||||
ReactZoomPanPinchRef,
|
||||
} from "react-zoom-pan-pinch";
|
||||
import mermaid from "mermaid";
|
||||
import { ZoomIn, ZoomOut, RefreshCw } from "lucide-react";
|
||||
import { Button } from "/components/ui/button";
|
||||
|
||||
interface MermaidDiagramProps {
|
||||
content: string;
|
||||
}
|
||||
|
||||
const MermaidDiagram: React.FC<MermaidDiagramProps> = ({ content }) => {
|
||||
const mermaidRef = useRef<HTMLDivElement>(null);
|
||||
const transformRef = useRef<ReactZoomPanPinchRef>(null);
|
||||
const [isRendered, setIsRendered] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: "base",
|
||||
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,
|
||||
defaultRenderer: "dagre-d3",
|
||||
padding: 15,
|
||||
wrappingWidth: 200,
|
||||
},
|
||||
});
|
||||
|
||||
const renderDiagram = async () => {
|
||||
if (mermaidRef.current) {
|
||||
try {
|
||||
const { svg } = await mermaid.render("mermaid-diagram", content);
|
||||
mermaidRef.current.innerHTML = svg;
|
||||
|
||||
const svgElement = mermaidRef.current.querySelector("svg");
|
||||
if (svgElement) {
|
||||
svgElement.style.width = "100%";
|
||||
svgElement.style.height = "100%";
|
||||
|
||||
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);
|
||||
mermaidRef.current.innerHTML = "Error rendering diagram";
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
renderDiagram();
|
||||
}, [content]);
|
||||
|
||||
const centerAndFitDiagram = () => {
|
||||
if (transformRef.current && mermaidRef.current) {
|
||||
const { centerView, zoomToElement } = transformRef.current;
|
||||
zoomToElement(mermaidRef.current as HTMLElement);
|
||||
centerView(1, 0);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (isRendered) {
|
||||
centerAndFitDiagram();
|
||||
}
|
||||
}, [isRendered]);
|
||||
|
||||
const handlePanning = () => {
|
||||
if (transformRef.current) {
|
||||
const { state, instance } = transformRef.current;
|
||||
if (!state) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative h-screen w-screen cursor-move bg-[#282C34] p-5">
|
||||
<TransformWrapper
|
||||
ref={transformRef}
|
||||
initialScale={1}
|
||||
minScale={0.1}
|
||||
maxScale={10}
|
||||
limitToBounds={false}
|
||||
centerOnInit={true}
|
||||
initialPositionY={0}
|
||||
wheel={{ step: 0.1 }}
|
||||
panning={{ velocityDisabled: true }}
|
||||
alignmentAnimation={{ disabled: true }}
|
||||
onPanning={handlePanning}
|
||||
>
|
||||
{({ zoomIn, zoomOut }) => (
|
||||
<>
|
||||
<TransformComponent
|
||||
wrapperStyle={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
ref={mermaidRef}
|
||||
style={{
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
minWidth: "100%",
|
||||
minHeight: "100%",
|
||||
}}
|
||||
/>
|
||||
</TransformComponent>
|
||||
<div className="absolute bottom-2 right-2 flex space-x-2">
|
||||
<Button onClick={() => zoomIn(0.1)} variant="outline" size="icon">
|
||||
<ZoomIn className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => zoomOut(0.1)}
|
||||
variant="outline"
|
||||
size="icon"
|
||||
>
|
||||
<ZoomOut className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
onClick={centerAndFitDiagram}
|
||||
variant="outline"
|
||||
size="icon"
|
||||
>
|
||||
<RefreshCw className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</TransformWrapper>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MermaidDiagram;`);
|
||||
|
||||
const wrapMermaidDiagram = (content: string) => {
|
||||
return dedent(`import React from 'react';
|
||||
import MermaidDiagram from '/components/ui/MermaidDiagram';
|
||||
|
||||
export default App = () => (
|
||||
<MermaidDiagram content={\`${content}\`} />
|
||||
);
|
||||
`);
|
||||
};
|
||||
|
||||
export const getMermaidFiles = (content: string) => {
|
||||
return {
|
||||
'App.tsx': wrapMermaidDiagram(content),
|
||||
'index.tsx': dedent(`import React, { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import "./styles.css";
|
||||
|
||||
import App from "./App";
|
||||
|
||||
const root = createRoot(document.getElementById("root"));
|
||||
root.render(<App />);
|
||||
;`),
|
||||
'/components/ui/MermaidDiagram.tsx': mermaid,
|
||||
};
|
||||
};
|
||||
3098
client/src/utils/shadcn.ts
Normal file
3098
client/src/utils/shadcn.ts
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue