mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-02 16:48:50 +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
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;
|
||||
});
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue