🧪 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';