Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-18 09:20:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

🪄 feat: Customize Sandpack bundlerURL for Artifacts (#6191)

Browse source
This commit is contained in:
Danny Avila 2025-03-05 16:03:54 -05:00 • committed by GitHub
parent 00b2d026c1
commit c8f7588164
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 36 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

15
client/src/components/Artifacts/ArtifactCodeEditor.tsx
View file

@ -8,8 +8,8 @@ import {
import { SandpackProviderProps } from '@codesandbox/sandpack-react/unstyled';
import type { CodeEditorRef } from '@codesandbox/sandpack-react';
import type { ArtifactFiles, Artifact } from '~/common';
import { useEditArtifact, useGetStartupConfig } from '~/data-provider';
import { sharedFiles, sharedOptions } from '~/utils/artifacts';
import { useEditArtifact } from '~/data-provider';
import { useEditorContext } from '~/Providers';
const createDebouncedMutation = (
@ -124,6 +124,17 @@ export const ArtifactCodeEditor = memo(function ({
sharedProps: Partial<SandpackProviderProps>;
editorRef: React.MutableRefObject<CodeEditorRef>;
}) {
const { data: config } = useGetStartupConfig();
const options: typeof sharedOptions = useMemo(() => {
if (!config) {
return sharedOptions;
}
return {
...sharedOptions,
bundlerURL: config.bundlerURL,
};
}, [config]);
if (Object.keys(files).length === 0) {
return null;
}
@ -135,7 +146,7 @@ export const ArtifactCodeEditor = memo(function ({
...files,
...sharedFiles,
}}
options={{ ...sharedOptions }}
options={options}
{...sharedProps}
template={template}
>

16
client/src/components/Artifacts/ArtifactPreview.tsx
View file

@ -7,6 +7,7 @@ import {
import type { SandpackPreviewRef } from '@codesandbox/sandpack-react/unstyled';
import type { ArtifactFiles } from '~/common';
import { sharedFiles, sharedOptions } from '~/utils/artifacts';
import { useGetStartupConfig } from '~/data-provider';
import { useEditorContext } from '~/Providers';
export const ArtifactPreview = memo(function ({
@ -23,6 +24,8 @@ export const ArtifactPreview = memo(function ({
previewRef: React.MutableRefObject<SandpackPreviewRef>;
}) {
const { currentCode } = useEditorContext();
const { data: config } = useGetStartupConfig();
const artifactFiles = useMemo(() => {
if (Object.keys(files).length === 0) {
return files;
@ -38,6 +41,17 @@ export const ArtifactPreview = memo(function ({
},
};
}, [currentCode, files, fileKey]);
const options: typeof sharedOptions = useMemo(() => {
if (!config) {
return sharedOptions;
}
return {
...sharedOptions,
bundlerURL: config.bundlerURL,
};
}, [config]);
if (Object.keys(artifactFiles).length === 0) {
return null;
}
@ -48,7 +62,7 @@ export const ArtifactPreview = memo(function ({
...artifactFiles,
...sharedFiles,
}}
options={{ ...sharedOptions }}
options={options}
{...sharedProps}
template={template}
>