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

🚀 feat: Artifact Editing & Downloads (#5428)

Browse source 
* refactor: expand container

* chore: bump @codesandbox/sandpack-react to latest

* WIP: first pass, show editor

* feat: implement ArtifactCodeEditor and ArtifactTabs components for enhanced artifact management

* refactor: fileKey

* refactor: auto scrolling code editor and add messageId to artifact

* feat: first pass, editing artifact

* feat: first pass, robust artifact replacement

* fix: robust artifact replacement & re-render when expected

* feat: Download Artifacts

* refactor: improve artifact editing UX

* fix: layout shift of new download button

* fix: enhance missing output checks and logging in StreamRunManager
This commit is contained in:
Danny Avila 2025-01-23 18:19:04 -05:00 • committed by GitHub
parent 87383fec27
commit ed57bb4711
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
34 changed files with 1156 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

33
client/src/hooks/Artifacts/useArtifactProps.ts Normal file
View file

@ -0,0 +1,33 @@
import { useMemo } from 'react';
import { removeNullishValues } from 'librechat-data-provider';
import type { Artifact } from '~/common';
import { getKey, getProps, getTemplate, getArtifactFilename } from '~/utils/artifacts';
import { getMermaidFiles } from '~/utils/mermaid';
export default function useArtifactProps({ artifact }: { artifact: Artifact }) {
const [fileKey, files] = useMemo(() => {
if (getKey(artifact.type ?? '', artifact.language).includes('mermaid')) {
return ['App.tsx', getMermaidFiles(artifact.content ?? '')];
}
const fileKey = getArtifactFilename(artifact.type ?? '', artifact.language);
const files = removeNullishValues({
[fileKey]: artifact.content,
});
return [fileKey, files];
}, [artifact.type, artifact.content, artifact.language]);
const template = useMemo(
() => getTemplate(artifact.type ?? '', artifact.language),
[artifact.type, artifact.language],
);
const sharedProps = useMemo(() => getProps(artifact.type ?? ''), [artifact.type]);
return {
files,
fileKey,
template,
sharedProps,
};
}