🚀 feat: Artifact Editing & Downloads (#5428)

* 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

client/src/components/Artifacts/ArtifactPreview.tsx

@@ -1,67 +1,51 @@
-import React, { useMemo, memo } from 'react';
-import { Sandpack } from '@codesandbox/sandpack-react';
-import { removeNullishValues } from 'librechat-data-provider';
-import { SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react/unstyled';
-import type { SandpackPreviewRef } from '@codesandbox/sandpack-react/unstyled';
-import type { Artifact } from '~/common';
+import React, { memo, useMemo } from 'react';
 import {
-  getKey,
-  getProps,
-  sharedFiles,
-  getTemplate,
-  sharedOptions,
-  getArtifactFilename,
-} from '~/utils/artifacts';
-import { getMermaidFiles } from '~/utils/mermaid';
+  SandpackPreview,
+  SandpackProvider,
+  SandpackProviderProps,
+} from '@codesandbox/sandpack-react/unstyled';
+import type { SandpackPreviewRef } from '@codesandbox/sandpack-react/unstyled';
+import type { ArtifactFiles } from '~/common';
+import { sharedFiles, sharedOptions } from '~/utils/artifacts';
+import { useEditorContext } from '~/Providers';
 
 export const ArtifactPreview = memo(function ({
-  showEditor = false,
-  artifact,
+  files,
+  fileKey,
   previewRef,
+  sharedProps,
+  template,
 }: {
-  showEditor?: boolean;
-  artifact: Artifact;
+  files: ArtifactFiles;
+  fileKey: string;
+  template: SandpackProviderProps['template'];
+  sharedProps: Partial<SandpackProviderProps>;
   previewRef: React.MutableRefObject<SandpackPreviewRef>;
 }) {
-  const files = useMemo(() => {
-    if (getKey(artifact.type ?? '', artifact.language).includes('mermaid')) {
-      return getMermaidFiles(artifact.content ?? '');
+  const { currentCode } = useEditorContext();
+  const artifactFiles = useMemo(() => {
+    if (Object.keys(files).length === 0) {
+      return files;
     }
-    return removeNullishValues({
-      [getArtifactFilename(artifact.type ?? '', artifact.language)]: artifact.content,
-    });
-  }, [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]);
-
-  if (Object.keys(files).length === 0) {
+    const code = currentCode ?? '';
+    if (!code) {
+      return files;
+    }
+    return {
+      ...files,
+      [fileKey]: {
+        code,
+      },
+    };
+  }, [currentCode, files, fileKey]);
+  if (Object.keys(artifactFiles).length === 0) {
     return null;
   }
 
-  return showEditor ? (
-    <Sandpack
-      options={{
-        showNavigator: true,
-        editorHeight: '80vh',
-        showTabs: true,
-        ...sharedOptions,
-      }}
-      files={{
-        ...files,
-        ...sharedFiles,
-      }}
-      {...sharedProps}
-      template={template}
-    />
-  ) : (
+  return (
     <SandpackProvider
       files={{
-        ...files,
+        ...artifactFiles,
         ...sharedFiles,
       }}
       options={{ ...sharedOptions }}