📝 feat: Add Markdown Rendering Support for Artifacts (#10049)

* Add Markdown rendering support for artifacts

* Add tests

* Remove custom code for mermaid

* Remove unnecessary dark mode hook

* refactor: optimize mermaid dependencies

- Added support for additional MIME types in artifact templates.
- Updated mermaidDependencies to include new packages: class-variance-authority, clsx, tailwind-merge, and @radix-ui/react-slot.
- Refactored zoom and refresh icons in MermaidDiagram component for improved clarity and maintainability.

* fix: add Markdown support for artifacts rendering

* feat: support 'text/md' as an additional MIME type for Markdown artifacts

* refactor: simplify markdownDependencies structure in artifacts utility

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

client/src/components/Artifacts/ArtifactCodeEditor.tsx

@@ -144,9 +144,10 @@ export const ArtifactCodeEditor = function ({
     }
     return {
       ...sharedOptions,
+      activeFile: '/' + fileKey,
       bundlerURL: template === 'static' ? config.staticBundlerURL : config.bundlerURL,
     };
-  }, [config, template]);
+  }, [config, template, fileKey]);
   const [readOnly, setReadOnly] = useState(isSubmitting ?? false);
   useEffect(() => {
     setReadOnly(isSubmitting ?? false);

client/src/components/Artifacts/ArtifactPreview.tsx

@@ -13,7 +13,6 @@ export const ArtifactPreview = memo(function ({
   files,
   fileKey,
   template,
-  isMermaid,
   sharedProps,
   previewRef,
   currentCode,
@@ -21,7 +20,6 @@ export const ArtifactPreview = memo(function ({
 }: {
   files: ArtifactFiles;
   fileKey: string;
-  isMermaid: boolean;
   template: SandpackProviderProps['template'];
   sharedProps: Partial<SandpackProviderProps>;
   previewRef: React.MutableRefObject<SandpackPreviewRef>;
@@ -56,15 +54,6 @@ export const ArtifactPreview = memo(function ({
     return _options;
   }, [startupConfig, template]);
 
-  const style: PreviewProps['style'] | undefined = useMemo(() => {
-    if (isMermaid) {
-      return {
-        backgroundColor: '#282C34',
-      };
-    }
-    return;
-  }, [isMermaid]);
-
   if (Object.keys(artifactFiles).length === 0) {
     return null;
   }
@@ -84,7 +73,6 @@ export const ArtifactPreview = memo(function ({
         showRefreshButton={false}
         tabIndex={0}
         ref={previewRef}
-        style={style}
       />
     </SandpackProvider>
   );

client/src/components/Artifacts/ArtifactTabs.tsx

@@ -8,17 +8,14 @@ import { useAutoScroll } from '~/hooks/Artifacts/useAutoScroll';
 import { ArtifactCodeEditor } from './ArtifactCodeEditor';
 import { useGetStartupConfig } from '~/data-provider';
 import { ArtifactPreview } from './ArtifactPreview';
-import { MermaidMarkdown } from './MermaidMarkdown';
 import { cn } from '~/utils';
 
 export default function ArtifactTabs({
   artifact,
-  isMermaid,
   editorRef,
   previewRef,
 }: {
   artifact: Artifact;
-  isMermaid: boolean;
   editorRef: React.MutableRefObject<CodeEditorRef>;
   previewRef: React.MutableRefObject<SandpackPreviewRef>;
 }) {
@@ -46,25 +43,20 @@ export default function ArtifactTabs({
         className={cn('flex-grow overflow-auto')}
         tabIndex={-1}
       >
-        {isMermaid ? (
-          <MermaidMarkdown content={content} isSubmitting={isSubmitting} />
-        ) : (
-          <ArtifactCodeEditor
-            files={files}
-            fileKey={fileKey}
-            template={template}
-            artifact={artifact}
-            editorRef={editorRef}
-            sharedProps={sharedProps}
-          />
-        )}
+        <ArtifactCodeEditor
+          files={files}
+          fileKey={fileKey}
+          template={template}
+          artifact={artifact}
+          editorRef={editorRef}
+          sharedProps={sharedProps}
+        />
       </Tabs.Content>
       <Tabs.Content value="preview" className="flex-grow overflow-auto" tabIndex={-1}>
         <ArtifactPreview
           files={files}
           fileKey={fileKey}
           template={template}
-          isMermaid={isMermaid}
           previewRef={previewRef}
           sharedProps={sharedProps}
           currentCode={currentCode}

client/src/components/Artifacts/Artifacts.tsx

@@ -27,7 +27,6 @@ export default function Artifacts() {
 
   const {
     activeTab,
-    isMermaid,
     setActiveTab,
     currentIndex,
     cycleArtifact,
@@ -116,7 +115,6 @@ export default function Artifacts() {
           </div>
           {/* Content */}
           <ArtifactTabs
-            isMermaid={isMermaid}
             artifact={currentArtifact}
             editorRef={editorRef as React.MutableRefObject<CodeEditorRef>}
             previewRef={previewRef as React.MutableRefObject<SandpackPreviewRef>}

client/src/components/Artifacts/MermaidMarkdown.tsx

@@ -1,11 +0,0 @@
-import { CodeMarkdown } from './Code';
-
-export function MermaidMarkdown({
-  content,
-  isSubmitting,
-}: {
-  content: string;
-  isSubmitting: boolean;
-}) {
-  return <CodeMarkdown content={`\`\`\`mermaid\n${content}\`\`\``} isSubmitting={isSubmitting} />;
-}