🎨 refactor: Improve Mermaid Artifacts Styling (#9742)

* 🎨 refactor: Improve Mermaid Artifacts Styling

* refactor: Replace ArtifactMarkdown with MermaidMarkdown

client/src/components/Artifacts/ArtifactPreview.tsx

@@ -4,7 +4,7 @@ import {
   SandpackProvider,
   SandpackProviderProps,
 } from '@codesandbox/sandpack-react/unstyled';
-import type { SandpackPreviewRef } from '@codesandbox/sandpack-react/unstyled';
+import type { SandpackPreviewRef, PreviewProps } from '@codesandbox/sandpack-react/unstyled';
 import type { TStartupConfig } from 'librechat-data-provider';
 import type { ArtifactFiles } from '~/common';
 import { sharedFiles, sharedOptions } from '~/utils/artifacts';
@@ -13,6 +13,7 @@ export const ArtifactPreview = memo(function ({
   files,
   fileKey,
   template,
+  isMermaid,
   sharedProps,
   previewRef,
   currentCode,
@@ -20,6 +21,7 @@ export const ArtifactPreview = memo(function ({
 }: {
   files: ArtifactFiles;
   fileKey: string;
+  isMermaid: boolean;
   template: SandpackProviderProps['template'];
   sharedProps: Partial<SandpackProviderProps>;
   previewRef: React.MutableRefObject<SandpackPreviewRef>;
@@ -54,6 +56,15 @@ 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;
   }
@@ -73,6 +84,7 @@ export const ArtifactPreview = memo(function ({
         showRefreshButton={false}
         tabIndex={0}
         ref={previewRef}
+        style={style}
       />
     </SandpackProvider>
   );

client/src/components/Artifacts/ArtifactTabs.tsx

@@ -8,6 +8,7 @@ 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({
@@ -44,23 +45,25 @@ export default function ArtifactTabs({
         id="artifacts-code"
         className={cn('flex-grow overflow-auto')}
       >
-        <ArtifactCodeEditor
-          files={files}
-          fileKey={fileKey}
-          template={template}
-          artifact={artifact}
-          editorRef={editorRef}
-          sharedProps={sharedProps}
-        />
+        {isMermaid ? (
+          <MermaidMarkdown content={content} isSubmitting={isSubmitting} />
+        ) : (
+          <ArtifactCodeEditor
+            files={files}
+            fileKey={fileKey}
+            template={template}
+            artifact={artifact}
+            editorRef={editorRef}
+            sharedProps={sharedProps}
+          />
+        )}
       </Tabs.Content>
-      <Tabs.Content
-        value="preview"
-        className={cn('flex-grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')}
-      >
+      <Tabs.Content value="preview" className="flex-grow overflow-auto">
         <ArtifactPreview
           files={files}
           fileKey={fileKey}
           template={template}
+          isMermaid={isMermaid}
           previewRef={previewRef}
           sharedProps={sharedProps}
           currentCode={currentCode}

client/src/components/Artifacts/Artifacts.tsx

@@ -9,6 +9,7 @@ import { useEditorContext } from '~/Providers';
 import ArtifactTabs from './ArtifactTabs';
 import { CopyCodeButton } from './Code';
 import { useLocalize } from '~/hooks';
+import { cn } from '~/utils';
 import store from '~/store';
 
 export default function Artifacts() {
@@ -58,9 +59,10 @@ export default function Artifacts() {
       <div className="flex h-full w-full items-center justify-center">
         {/* Main Container */}
         <div
-          className={`flex h-full w-full flex-col overflow-hidden border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl transition-all duration-500 ease-in-out ${
-            isVisible ? 'scale-100 opacity-100 blur-0' : 'scale-105 opacity-0 blur-sm'
-          }`}
+          className={cn(
+            `flex h-full w-full flex-col overflow-hidden border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl transition-all duration-500 ease-in-out`,
+            isVisible ? 'scale-100 opacity-100 blur-0' : 'scale-105 opacity-0 blur-sm',
+          )}
         >
           {/* Header */}
           <div className="flex items-center justify-between border-b border-border-medium bg-surface-primary-alt p-2">
@@ -74,16 +76,17 @@ export default function Artifacts() {
               {/* Refresh button */}
               {activeTab === 'preview' && (
                 <button
-                  className={`mr-2 text-text-secondary transition-transform duration-500 ease-in-out ${
-                    isRefreshing ? 'rotate-180' : ''
-                  }`}
+                  className={cn(
+                    'mr-2 text-text-secondary transition-transform duration-500 ease-in-out',
+                    isRefreshing ? 'rotate-180' : '',
+                  )}
                   onClick={handleRefresh}
                   disabled={isRefreshing}
                   aria-label="Refresh"
                 >
                   <RefreshCw
                     size={16}
-                    className={`transform ${isRefreshing ? 'animate-spin' : ''}`}
+                    className={cn('transform', isRefreshing ? 'animate-spin' : '')}
                   />
                 </button>
               )}

client/src/components/Artifacts/MermaidMarkdown.tsx

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