🧪 fix: Editor Styling, Incomplete Artifact Editing, Optimize Artifact Context (#8953)

* refactor: optimize artifacts context for improved performance

* fix: layout classes for artifacts editor

* chore: linting

* fix: enhance artifact mutation handling in CodeEditor to prevent infinite retries

* fix: handle incomplete artifacts in replaceArtifactContent and add regression tests

client/src/Providers/ArtifactsContext.tsx

@@ -0,0 +1,46 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import type { TMessage } from 'librechat-data-provider';
+import { useChatContext } from './ChatContext';
+import { getLatestText } from '~/utils';
+
+interface ArtifactsContextValue {
+  isSubmitting: boolean;
+  latestMessageId: string | null;
+  latestMessageText: string;
+  conversationId: string | null;
+}
+
+const ArtifactsContext = createContext<ArtifactsContextValue | undefined>(undefined);
+
+export function ArtifactsProvider({ children }: { children: React.ReactNode }) {
+  const { isSubmitting, latestMessage, conversation } = useChatContext();
+
+  const latestMessageText = useMemo(() => {
+    return getLatestText({
+      messageId: latestMessage?.messageId ?? null,
+      text: latestMessage?.text ?? null,
+      content: latestMessage?.content ?? null,
+    } as TMessage);
+  }, [latestMessage?.messageId, latestMessage?.text, latestMessage?.content]);
+
+  /** Context value only created when relevant values change */
+  const contextValue = useMemo<ArtifactsContextValue>(
+    () => ({
+      isSubmitting,
+      latestMessageText,
+      latestMessageId: latestMessage?.messageId ?? null,
+      conversationId: conversation?.conversationId ?? null,
+    }),
+    [isSubmitting, latestMessage?.messageId, latestMessageText, conversation?.conversationId],
+  );
+
+  return <ArtifactsContext.Provider value={contextValue}>{children}</ArtifactsContext.Provider>;
+}
+
+export function useArtifactsContext() {
+  const context = useContext(ArtifactsContext);
+  if (!context) {
+    throw new Error('useArtifactsContext must be used within ArtifactsProvider');
+  }
+  return context;
+}

client/src/Providers/index.ts

@@ -23,4 +23,5 @@ export * from './SetConvoContext';
 export * from './SearchContext';
 export * from './BadgeRowContext';
 export * from './SidePanelContext';
+export * from './ArtifactsContext';
 export { default as BadgeRowProvider } from './BadgeRowContext';

client/src/components/Artifacts/ArtifactCodeEditor.tsx

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import React, { memo, useEffect, useMemo, useCallback } from 'react';
+import React, { memo, useEffect, useMemo, useCallback, useState } from 'react';
 import {
   useSandpack,
   SandpackCodeEditor,
@@ -34,13 +34,16 @@ const CodeEditor = ({
   editorRef: React.MutableRefObject<CodeEditorRef>;
 }) => {
   const { sandpack } = useSandpack();
+  const [currentUpdate, setCurrentUpdate] = useState<string | null>(null);
   const { isMutating, setIsMutating, setCurrentCode } = useEditorContext();
   const editArtifact = useEditArtifact({
-    onMutate: () => {
+    onMutate: (vars) => {
       setIsMutating(true);
+      setCurrentUpdate(vars.updated);
     },
     onSuccess: () => {
       setIsMutating(false);
+      setCurrentUpdate(null);
     },
     onError: () => {
       setIsMutating(false);
@@ -71,8 +74,14 @@ const CodeEditor = ({
     }
 
     const currentCode = (sandpack.files['/' + fileKey] as SandpackBundlerFile | undefined)?.code;
+    const isNotOriginal =
+      currentCode && artifact.content != null && currentCode.trim() !== artifact.content.trim();
+    const isNotRepeated =
+      currentUpdate == null
+        ? true
+        : currentCode != null && currentCode.trim() !== currentUpdate.trim();
 
-    if (currentCode && artifact.content != null && currentCode.trim() !== artifact.content.trim()) {
+    if (artifact.content && isNotOriginal && isNotRepeated) {
       setCurrentCode(currentCode);
       debouncedMutation({
         index: artifact.index,
@@ -92,8 +101,9 @@ const CodeEditor = ({
     artifact.messageId,
     readOnly,
     isMutating,
-    sandpack.files,
+    currentUpdate,
     setIsMutating,
+    sandpack.files,
     setCurrentCode,
     debouncedMutation,
   ]);

client/src/components/Chat/Presentation.tsx

@@ -4,7 +4,7 @@ import { FileSources, LocalStorageKeys } from 'librechat-data-provider';
 import type { ExtendedFile } from '~/common';
 import { useDeleteFilesMutation } from '~/data-provider';
 import DragDropWrapper from '~/components/Chat/Input/Files/DragDropWrapper';
-import { EditorProvider, SidePanelProvider } from '~/Providers';
+import { EditorProvider, SidePanelProvider, ArtifactsProvider } from '~/Providers';
 import Artifacts from '~/components/Artifacts/Artifacts';
 import { SidePanelGroup } from '~/components/SidePanel';
 import { useSetFilesToDelete } from '~/hooks';
@@ -66,9 +66,11 @@ export default function Presentation({ children }: { children: React.ReactNode }
           defaultCollapsed={defaultCollapsed}
           artifacts={
             artifactsVisibility === true && Object.keys(artifacts ?? {}).length > 0 ? (
-              <EditorProvider>
-                <Artifacts />
-              </EditorProvider>
+              <ArtifactsProvider>
+                <EditorProvider>
+                  <Artifacts />
+                </EditorProvider>
+              </ArtifactsProvider>
             ) : null
           }
         >

client/src/hooks/Artifacts/useArtifacts.ts

@@ -1,14 +1,15 @@
 import { useMemo, useState, useEffect, useRef } from 'react';
 import { Constants } from 'librechat-data-provider';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
-import { getLatestText, logger } from '~/utils';
-import { useChatContext } from '~/Providers';
+import { logger } from '~/utils';
+import { useArtifactsContext } from '~/Providers';
 import { getKey } from '~/utils/artifacts';
 import store from '~/store';
 
 export default function useArtifacts() {
   const [activeTab, setActiveTab] = useState('preview');
-  const { isSubmitting, latestMessage, conversation } = useChatContext();
+  const { isSubmitting, latestMessageId, latestMessageText, conversationId } =
+    useArtifactsContext();
 
   const artifacts = useRecoilValue(store.artifactsState);
   const resetArtifacts = useResetRecoilState(store.artifactsState);
@@ -31,26 +32,23 @@ export default function useArtifacts() {
     const resetState = () => {
       resetArtifacts();
       resetCurrentArtifactId();
-      prevConversationIdRef.current = conversation?.conversationId ?? null;
+      prevConversationIdRef.current = conversationId;
       lastRunMessageIdRef.current = null;
       lastContentRef.current = null;
       hasEnclosedArtifactRef.current = false;
     };
-    if (
-      conversation?.conversationId !== prevConversationIdRef.current &&
-      prevConversationIdRef.current != null
-    ) {
+    if (conversationId !== prevConversationIdRef.current && prevConversationIdRef.current != null) {
       resetState();
-    } else if (conversation?.conversationId === Constants.NEW_CONVO) {
+    } else if (conversationId === Constants.NEW_CONVO) {
       resetState();
     }
-    prevConversationIdRef.current = conversation?.conversationId ?? null;
+    prevConversationIdRef.current = conversationId;
     /** Resets artifacts when unmounting */
     return () => {
       logger.log('artifacts_visibility', 'Unmounting artifacts');
       resetState();
     };
-  }, [conversation?.conversationId, resetArtifacts, resetCurrentArtifactId]);
+  }, [conversationId, resetArtifacts, resetCurrentArtifactId]);
 
   useEffect(() => {
     if (orderedArtifactIds.length > 0) {
@@ -66,7 +64,7 @@ export default function useArtifacts() {
     if (orderedArtifactIds.length === 0) {
       return;
     }
-    if (latestMessage == null) {
+    if (latestMessageId == null) {
       return;
     }
     const latestArtifactId = orderedArtifactIds[orderedArtifactIds.length - 1];
@@ -78,7 +76,6 @@ export default function useArtifacts() {
     setCurrentArtifactId(latestArtifactId);
     lastContentRef.current = latestArtifact?.content ?? null;
 
-    const latestMessageText = getLatestText(latestMessage);
     const hasEnclosedArtifact =
       /:::artifact(?:\{[^}]*\})?(?:\s|\n)*(?:```[\s\S]*?```(?:\s|\n)*)?:::/m.test(
         latestMessageText.trim(),
@@ -95,15 +92,22 @@ export default function useArtifacts() {
         hasAutoSwitchedToCodeRef.current = true;
       }
     }
-  }, [setCurrentArtifactId, isSubmitting, orderedArtifactIds, artifacts, latestMessage]);
+  }, [
+    artifacts,
+    isSubmitting,
+    latestMessageId,
+    latestMessageText,
+    orderedArtifactIds,
+    setCurrentArtifactId,
+  ]);
 
   useEffect(() => {
-    if (latestMessage?.messageId !== lastRunMessageIdRef.current) {
-      lastRunMessageIdRef.current = latestMessage?.messageId ?? null;
+    if (latestMessageId !== lastRunMessageIdRef.current) {
+      lastRunMessageIdRef.current = latestMessageId;
       hasEnclosedArtifactRef.current = false;
       hasAutoSwitchedToCodeRef.current = false;
     }
-  }, [latestMessage]);
+  }, [latestMessageId]);
 
   const currentArtifact = currentArtifactId != null ? artifacts?.[currentArtifactId] : null;
 

client/src/mobile.css

@@ -313,20 +313,30 @@
   background-color: transparent;  /* Color of the tracking area */
 }
 
-.sp-preview-container {
-  @apply flex h-full w-full grow flex-col justify-center;
-}
-
-.sp-preview {
-  @apply flex h-full w-full grow flex-col justify-center;
-}
-
-.sp-preview-iframe {
-  @apply grow;
-}
-
+/* Base wrapper for both preview and editor */
 .sp-wrapper {
-  @apply flex h-full w-full grow flex-col justify-center;
+  @apply flex h-full w-full grow flex-col;
+}
+
+/* Stack containers (sp-preview and sp-editor) */
+.sp-preview,
+.sp-editor {
+  @apply flex h-full w-full grow flex-col;
+}
+
+/* Inner containers */
+.sp-preview-container,
+.sp-code-editor {
+  @apply flex h-full w-full grow flex-col;
+}
+
+/* Content elements */
+.sp-preview-iframe {
+  @apply h-full w-full grow;
+}
+
+.sp-cm {
+  @apply h-full w-full grow;
 }
 
 @keyframes shake {