🚀 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/Artifact.tsx

@@ -4,6 +4,7 @@ import { visit } from 'unist-util-visit';
 import { useSetRecoilState } from 'recoil';
 import type { Pluggable } from 'unified';
 import type { Artifact } from '~/common';
+import { useMessageContext, useArtifactContext } from '~/Providers';
 import { artifactsState } from '~/store/artifacts';
 import ArtifactButton from './ArtifactButton';
 import { logger } from '~/utils';
@@ -44,6 +45,10 @@ export function Artifact({
   children: React.ReactNode | { props: { children: React.ReactNode } };
   node: unknown;
 }) {
+  const { messageId } = useMessageContext();
+  const { getNextIndex, resetCounter } = useArtifactContext();
+  const artifactIndex = useRef(getNextIndex(false)).current;
+
   const setArtifacts = useSetRecoilState(artifactsState);
   const [artifact, setArtifact] = useState<Artifact | null>(null);
 
@@ -64,7 +69,9 @@ export function Artifact({
     const title = props.title ?? 'Untitled Artifact';
     const type = props.type ?? 'unknown';
     const identifier = props.identifier ?? 'no-identifier';
-    const artifactKey = `${identifier}_${type}_${title}`.replace(/\s+/g, '_').toLowerCase();
+    const artifactKey = `${identifier}_${type}_${title}_${messageId}`
+      .replace(/\s+/g, '_')
+      .toLowerCase();
 
     throttledUpdateRef.current(() => {
       const now = Date.now();
@@ -75,6 +82,8 @@ export function Artifact({
         title,
         type,
         content,
+        messageId,
+        index: artifactIndex,
         lastUpdateTime: now,
       };
 
@@ -94,11 +103,20 @@ export function Artifact({
 
       setArtifact(currentArtifact);
     });
-  }, [props.type, props.title, setArtifacts, props.children, props.identifier]);
+  }, [
+    props.type,
+    props.title,
+    setArtifacts,
+    props.children,
+    props.identifier,
+    messageId,
+    artifactIndex,
+  ]);
 
   useEffect(() => {
+    resetCounter();
     updateArtifact();
-  }, [updateArtifact]);
+  }, [updateArtifact, resetCounter]);
 
   return <ArtifactButton artifact={artifact} />;
 }

client/src/components/Artifacts/ArtifactCodeEditor.tsx

@@ -0,0 +1,151 @@
+import debounce from 'lodash/debounce';
+import React, { memo, useEffect, useMemo, useCallback } from 'react';
+import {
+  useSandpack,
+  SandpackCodeEditor,
+  SandpackProvider as StyledProvider,
+} from '@codesandbox/sandpack-react';
+import { SandpackProviderProps } from '@codesandbox/sandpack-react/unstyled';
+import type { CodeEditorRef } from '@codesandbox/sandpack-react';
+import type { ArtifactFiles, Artifact } from '~/common';
+import { sharedFiles, sharedOptions } from '~/utils/artifacts';
+import { useEditArtifact } from '~/data-provider';
+import { useEditorContext } from '~/Providers';
+
+const createDebouncedMutation = (
+  callback: (params: {
+    index: number;
+    messageId: string;
+    original: string;
+    updated: string;
+  }) => void,
+) => debounce(callback, 500);
+
+const CodeEditor = ({
+  fileKey,
+  readOnly,
+  artifact,
+  editorRef,
+}: {
+  fileKey: string;
+  readOnly: boolean;
+  artifact: Artifact;
+  editorRef: React.MutableRefObject<CodeEditorRef>;
+}) => {
+  const { sandpack } = useSandpack();
+  const { isMutating, setIsMutating, setCurrentCode } = useEditorContext();
+  const editArtifact = useEditArtifact({
+    onMutate: () => {
+      setIsMutating(true);
+    },
+    onSuccess: () => {
+      setIsMutating(false);
+    },
+    onError: () => {
+      setIsMutating(false);
+      setCurrentCode(artifact.content);
+    },
+  });
+
+  const mutationCallback = useCallback(
+    (params: { index: number; messageId: string; original: string; updated: string }) => {
+      editArtifact.mutate(params);
+    },
+    [editArtifact],
+  );
+
+  const debouncedMutation = useMemo(
+    () => createDebouncedMutation(mutationCallback),
+    [mutationCallback],
+  );
+
+  useEffect(() => {
+    if (readOnly) {
+      return;
+    }
+    if (isMutating) {
+      return;
+    }
+
+    const currentCode = sandpack.files['/' + fileKey].code;
+
+    if (currentCode && artifact.content != null && currentCode.trim() !== artifact.content.trim()) {
+      setCurrentCode(currentCode);
+      debouncedMutation({
+        index: artifact.index,
+        messageId: artifact.messageId ?? '',
+        original: artifact.content,
+        updated: currentCode,
+      });
+    }
+
+    return () => {
+      debouncedMutation.cancel();
+    };
+  }, [
+    fileKey,
+    artifact.index,
+    artifact.content,
+    artifact.messageId,
+    readOnly,
+    isMutating,
+    sandpack.files,
+    setIsMutating,
+    setCurrentCode,
+    debouncedMutation,
+  ]);
+
+  return (
+    <SandpackCodeEditor
+      ref={editorRef}
+      showTabs={false}
+      readOnly={readOnly}
+      showRunButton={false}
+      showLineNumbers={true}
+      showInlineErrors={true}
+      className="hljs language-javascript bg-black"
+    />
+  );
+};
+
+export const ArtifactCodeEditor = memo(function ({
+  files,
+  fileKey,
+  template,
+  artifact,
+  editorRef,
+  sharedProps,
+  isSubmitting,
+}: {
+  fileKey: string;
+  artifact: Artifact;
+  files: ArtifactFiles;
+  isSubmitting: boolean;
+  template: SandpackProviderProps['template'];
+  sharedProps: Partial<SandpackProviderProps>;
+  editorRef: React.MutableRefObject<CodeEditorRef>;
+}) {
+  if (Object.keys(files).length === 0) {
+    return null;
+  }
+
+  return (
+    <StyledProvider
+      theme="dark"
+      files={{
+        ...files,
+        ...sharedFiles,
+      }}
+      options={{ ...sharedOptions }}
+      {...sharedProps}
+      template={template}
+    >
+      <CodeEditor
+        editorRef={editorRef}
+        fileKey={fileKey}
+        readOnly={isSubmitting}
+        artifact={artifact}
+      />
+    </StyledProvider>
+  );
+});

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 }}

client/src/components/Artifacts/ArtifactTabs.tsx

@@ -0,0 +1,60 @@
+import { useRef } from 'react';
+import * as Tabs from '@radix-ui/react-tabs';
+import type { SandpackPreviewRef, CodeEditorRef } from '@codesandbox/sandpack-react';
+import type { Artifact } from '~/common';
+import useArtifactProps from '~/hooks/Artifacts/useArtifactProps';
+import { useAutoScroll } from '~/hooks/Artifacts/useAutoScroll';
+import { ArtifactCodeEditor } from './ArtifactCodeEditor';
+import { ArtifactPreview } from './ArtifactPreview';
+import { cn } from '~/utils';
+
+export default function ArtifactTabs({
+  artifact,
+  isMermaid,
+  editorRef,
+  previewRef,
+  isSubmitting,
+}: {
+  artifact: Artifact;
+  isMermaid: boolean;
+  isSubmitting: boolean;
+  editorRef: React.MutableRefObject<CodeEditorRef>;
+  previewRef: React.MutableRefObject<SandpackPreviewRef>;
+}) {
+  const content = artifact.content ?? '';
+  const contentRef = useRef<HTMLDivElement>(null);
+  useAutoScroll({ ref: contentRef, content, isSubmitting });
+  const { files, fileKey, template, sharedProps } = useArtifactProps({ artifact });
+  return (
+    <>
+      <Tabs.Content
+        ref={contentRef}
+        value="code"
+        id="artifacts-code"
+        className={cn('flex-grow overflow-auto')}
+      >
+        <ArtifactCodeEditor
+          files={files}
+          fileKey={fileKey}
+          template={template}
+          artifact={artifact}
+          editorRef={editorRef}
+          sharedProps={sharedProps}
+          isSubmitting={isSubmitting}
+        />
+      </Tabs.Content>
+      <Tabs.Content
+        value="preview"
+        className={cn('flex-grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')}
+      >
+        <ArtifactPreview
+          files={files}
+          fileKey={fileKey}
+          template={template}
+          previewRef={previewRef}
+          sharedProps={sharedProps}
+        />
+      </Tabs.Content>
+    </>
+  );
+}

client/src/components/Artifacts/Artifacts.tsx

@@ -2,18 +2,22 @@ import { useRef, useState, useEffect } from 'react';
 import { RefreshCw } from 'lucide-react';
 import { useSetRecoilState } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
-import { SandpackPreviewRef } from '@codesandbox/sandpack-react';
+import type { SandpackPreviewRef, CodeEditorRef } from '@codesandbox/sandpack-react';
 import useArtifacts from '~/hooks/Artifacts/useArtifacts';
-import { CodeMarkdown, CopyCodeButton } from './Code';
-import { getFileExtension } from '~/utils/artifacts';
-import { ArtifactPreview } from './ArtifactPreview';
-import { cn } from '~/utils';
+import DownloadArtifact from './DownloadArtifact';
+import { useEditorContext } from '~/Providers';
+import useLocalize from '~/hooks/useLocalize';
+import ArtifactTabs from './ArtifactTabs';
+import { CopyCodeButton } from './Code';
 import store from '~/store';
 
 export default function Artifacts() {
+  const localize = useLocalize();
+  const { isMutating } = useEditorContext();
+  const editorRef = useRef<CodeEditorRef>();
   const previewRef = useRef<SandpackPreviewRef>();
-  const [isRefreshing, setIsRefreshing] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
   const setArtifactsVisible = useSetRecoilState(store.artifactsVisible);
 
   useEffect(() => {
@@ -23,9 +27,9 @@ export default function Artifacts() {
   const {
     activeTab,
     isMermaid,
-    isSubmitting,
     setActiveTab,
     currentIndex,
+    isSubmitting,
     cycleArtifact,
     currentArtifact,
     orderedArtifactIds,
@@ -47,10 +51,10 @@ export default function Artifacts() {
   return (
     <Tabs.Root value={activeTab} onValueChange={setActiveTab} asChild>
       {/* Main Parent */}
-      <div className="flex h-full w-full items-center justify-center py-2">
+      <div className="flex h-full w-full items-center justify-center">
         {/* Main Container */}
         <div
-          className={`flex h-[97%] w-[97%] flex-col overflow-hidden rounded-xl border border-border-medium bg-surface-primary text-xl text-text-primary shadow-xl transition-all duration-300 ease-in-out ${
+          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-300 ease-in-out ${
             isVisible
               ? 'translate-x-0 scale-100 opacity-100'
               : 'translate-x-full scale-95 opacity-0'
@@ -95,18 +99,23 @@ export default function Artifacts() {
                   />
                 </button>
               )}
+              {activeTab !== 'preview' && isMutating && (
+                <RefreshCw size={16} className="mr-2 animate-spin text-text-secondary" />
+              )}
+              {/* Tabs */}
               <Tabs.List className="mr-2 inline-flex h-7 rounded-full border border-border-medium bg-surface-tertiary">
                 <Tabs.Trigger
                   value="preview"
+                  disabled={isMutating}
                   className="border-0.5 flex items-center gap-1 rounded-full border-transparent py-1 pl-2.5 pr-2.5 text-xs font-medium text-text-secondary data-[state=active]:border-border-light data-[state=active]:bg-surface-primary-alt data-[state=active]:text-text-primary"
                 >
-                  Preview
+                  {localize('com_ui_preview')}
                 </Tabs.Trigger>
                 <Tabs.Trigger
                   value="code"
                   className="border-0.5 flex items-center gap-1 rounded-full border-transparent py-1 pl-2.5 pr-2.5 text-xs font-medium text-text-secondary data-[state=active]:border-border-light data-[state=active]:bg-surface-primary-alt data-[state=active]:text-text-primary"
                 >
-                  Code
+                  {localize('com_ui_code')}
                 </Tabs.Trigger>
               </Tabs.List>
               <button
@@ -129,26 +138,13 @@ export default function Artifacts() {
             </div>
           </div>
           {/* Content */}
-          <Tabs.Content
-            value="code"
-            className={cn('flex-grow overflow-x-auto overflow-y-scroll bg-gray-900 p-4')}
-          >
-            <CodeMarkdown
-              content={`\`\`\`${getFileExtension(currentArtifact.type)}\n${
-                currentArtifact.content ?? ''
-              }\`\`\``}
-              isSubmitting={isSubmitting}
-            />
-          </Tabs.Content>
-          <Tabs.Content
-            value="preview"
-            className={cn('flex-grow overflow-auto', isMermaid ? 'bg-[#282C34]' : 'bg-white')}
-          >
-            <ArtifactPreview
-              artifact={currentArtifact}
-              previewRef={previewRef as React.MutableRefObject<SandpackPreviewRef>}
-            />
-          </Tabs.Content>
+          <ArtifactTabs
+            isMermaid={isMermaid}
+            artifact={currentArtifact}
+            isSubmitting={isSubmitting}
+            editorRef={editorRef as React.MutableRefObject<CodeEditorRef>}
+            previewRef={previewRef as React.MutableRefObject<SandpackPreviewRef>}
+          />
           {/* Footer */}
           <div className="flex items-center justify-between border-t border-border-medium bg-surface-primary-alt p-2 text-sm text-text-secondary">
             <div className="flex items-center">
@@ -178,20 +174,10 @@ export default function Artifacts() {
                 </svg>
               </button>
             </div>
-            <div className="flex items-center">
+            <div className="flex items-center gap-2">
               <CopyCodeButton content={currentArtifact.content ?? ''} />
               {/* Download Button */}
-              {/* <button className="mr-2 text-text-secondary">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  fill="currentColor"
-                  viewBox="0 0 256 256"
-                >
-                  <path d="M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z" />
-                </svg>
-              </button> */}
+              <DownloadArtifact artifact={currentArtifact} />
               {/* Publish button */}
               {/* <button className="border-0.5 min-w-[4rem] whitespace-nowrap rounded-md border-border-medium bg-[radial-gradient(ellipse,_var(--tw-gradient-stops))] from-surface-active from-50% to-surface-active px-3 py-1 text-xs font-medium text-text-primary transition-colors hover:bg-surface-active hover:text-text-primary active:scale-[0.985] active:bg-surface-active">
                 Publish

client/src/components/Artifacts/DownloadArtifact.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { Download } from 'lucide-react';
+import type { Artifact } from '~/common';
+import useArtifactProps from '~/hooks/Artifacts/useArtifactProps';
+import { useEditorContext } from '~/Providers';
+import { CheckMark } from '~/components/svg';
+import { useLocalize } from '~/hooks';
+
+const DownloadArtifact = ({
+  artifact,
+  className = '',
+}: {
+  artifact: Artifact;
+  className?: string;
+}) => {
+  const localize = useLocalize();
+  const { currentCode } = useEditorContext();
+  const [isDownloaded, setIsDownloaded] = useState(false);
+  const { fileKey: fileName } = useArtifactProps({ artifact });
+
+  const handleDownload = () => {
+    try {
+      const content = currentCode ?? artifact.content ?? '';
+      if (!content) {
+        return;
+      }
+      const blob = new Blob([content], { type: 'text/plain' });
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(url);
+      setIsDownloaded(true);
+      setTimeout(() => setIsDownloaded(false), 3000);
+    } catch (error) {
+      console.error('Download failed:', error);
+    }
+  };
+
+  return (
+    <button
+      className={`mr-2 text-text-secondary ${className}`}
+      onClick={handleDownload}
+      aria-label={localize('com_ui_download_artifact')}
+    >
+      {isDownloaded ? <CheckMark className="h-4 w-4" /> : <Download className="h-4 w-4" />}
+    </button>
+  );
+};
+
+export default DownloadArtifact;

client/src/components/Chat/Messages/Content/Markdown.tsx

@@ -8,9 +8,14 @@ import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import remarkDirective from 'remark-directive';
 import type { Pluggable } from 'unified';
+import {
+  useToastContext,
+  ArtifactProvider,
+  CodeBlockProvider,
+  useCodeBlockContext,
+} from '~/Providers';
 import { Artifact, artifactPlugin } from '~/components/Artifacts/Artifact';
 import { langSubset, preprocessLaTeX, handleDoubleClick } from '~/utils';
-import { useToastContext, CodeBlockProvider, useCodeBlockContext } from '~/Providers';
 import CodeBlock from '~/components/Messages/Content/CodeBlock';
 import { useFileDownload } from '~/data-provider';
 import useLocalize from '~/hooks/useLocalize';
@@ -194,27 +199,29 @@ const Markdown = memo(({ content = '', showCursor, isLatestMessage }: TContentPr
     : [supersub, remarkGfm, [remarkMath, { singleDollarTextMath: true }]];
 
   return (
-    <CodeBlockProvider>
-      <ReactMarkdown
-        /** @ts-ignore */
-        remarkPlugins={remarkPlugins}
-        /* @ts-ignore */
-        rehypePlugins={rehypePlugins}
-        // linkTarget="_new"
-        components={
-          {
-            code,
-            a,
-            p,
-            artifact: Artifact,
-          } as {
-            [nodeType: string]: React.ElementType;
+    <ArtifactProvider>
+      <CodeBlockProvider>
+        <ReactMarkdown
+          /** @ts-ignore */
+          remarkPlugins={remarkPlugins}
+          /* @ts-ignore */
+          rehypePlugins={rehypePlugins}
+          // linkTarget="_new"
+          components={
+            {
+              code,
+              a,
+              p,
+              artifact: Artifact,
+            } as {
+              [nodeType: string]: React.ElementType;
+            }
           }
-        }
-      >
-        {isLatestMessage && showCursor === true ? currentContent + cursor : currentContent}
-      </ReactMarkdown>
-    </CodeBlockProvider>
+        >
+          {isLatestMessage && showCursor === true ? currentContent + cursor : currentContent}
+        </ReactMarkdown>
+      </CodeBlockProvider>
+    </ArtifactProvider>
   );
 });
 

client/src/components/Chat/Messages/Content/MarkdownLite.tsx

@@ -7,7 +7,7 @@ import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import type { PluggableList } from 'unified';
 import { code, codeNoExecution, a, p } from './Markdown';
-import { CodeBlockProvider } from '~/Providers';
+import { CodeBlockProvider, ArtifactProvider } from '~/Providers';
 import { langSubset } from '~/utils';
 
 const MarkdownLite = memo(
@@ -25,30 +25,32 @@ const MarkdownLite = memo(
     ];
 
     return (
-      <CodeBlockProvider>
-        <ReactMarkdown
-          remarkPlugins={[
+      <ArtifactProvider>
+        <CodeBlockProvider>
+          <ReactMarkdown
+            remarkPlugins={[
+              /** @ts-ignore */
+              supersub,
+              remarkGfm,
+              [remarkMath, { singleDollarTextMath: true }],
+            ]}
             /** @ts-ignore */
-            supersub,
-            remarkGfm,
-            [remarkMath, { singleDollarTextMath: true }],
-          ]}
-          /** @ts-ignore */
-          rehypePlugins={rehypePlugins}
-          // linkTarget="_new"
-          components={
-            {
-              code: codeExecution ? code : codeNoExecution,
-              a,
-              p,
-            } as {
-              [nodeType: string]: React.ElementType;
+            rehypePlugins={rehypePlugins}
+            // linkTarget="_new"
+            components={
+              {
+                code: codeExecution ? code : codeNoExecution,
+                a,
+                p,
+              } as {
+                [nodeType: string]: React.ElementType;
+              }
             }
-          }
-        >
-          {content}
-        </ReactMarkdown>
-      </CodeBlockProvider>
+          >
+            {content}
+          </ReactMarkdown>
+        </CodeBlockProvider>
+      </ArtifactProvider>
     );
   },
 );

client/src/components/Chat/Messages/ui/MessageRender.tsx

@@ -121,13 +121,14 @@ const MessageRender = memo(
 
     return (
       <div
+        id={msg.messageId}
         aria-label={`message-${msg.depth}-${msg.messageId}`}
         className={cn(
           baseClasses,
           layoutClasses,
           latestCardClasses,
           showRenderClasses,
-          'focus:outline-none focus:ring-2 focus:ring-border-xheavy',
+          'message-render focus:outline-none focus:ring-2 focus:ring-border-xheavy',
         )}
         onClick={clickHandler}
         onKeyDown={(e) => {

client/src/components/Chat/Presentation.tsx

@@ -8,6 +8,7 @@ import { useDeleteFilesMutation } from '~/data-provider';
 import Artifacts from '~/components/Artifacts/Artifacts';
 import { SidePanel } from '~/components/SidePanel';
 import { useSetFilesToDelete } from '~/hooks';
+import { EditorProvider } from '~/Providers';
 import store from '~/store';
 
 const defaultInterface = getConfigDefaults().interface;
@@ -94,7 +95,9 @@ export default function Presentation({
             artifactsVisible === true &&
             codeArtifacts === true &&
             Object.keys(artifacts ?? {}).length > 0 ? (
-                <Artifacts />
+                <EditorProvider>
+                  <Artifacts />
+                </EditorProvider>
               ) : null
           }
         >

client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx

@@ -42,13 +42,11 @@ function ConvoOptions({
 
   const duplicateConversation = useDuplicateConversationMutation({
     onSuccess: (data) => {
-      if (data != null) {
-        navigateToConvo(data.conversation);
-        showToast({
-          message: localize('com_ui_duplication_success'),
-          status: 'success',
-        });
-      }
+      navigateToConvo(data.conversation);
+      showToast({
+        message: localize('com_ui_duplication_success'),
+        status: 'success',
+      });
     },
     onMutate: () => {
       showToast({

client/src/components/Messages/ContentRender.tsx

@@ -120,13 +120,15 @@ const ContentRender = memo(
 
     return (
       <div
+        id={msg.messageId}
         aria-label={`message-${msg.depth}-${msg.messageId}`}
         className={cn(
           baseClasses,
-          isCard ? cardClasses : chatSpaceClasses,
+          isCard === true ? cardClasses : chatSpaceClasses,
           conditionalClasses.latestCard,
           conditionalClasses.cardRender,
           conditionalClasses.focus,
+          'message-render',
         )}
         onClick={clickHandler}
         onKeyDown={(e) => {