✨ feat: Artifact Management Enhancements, Version Control, and UI Refinements (#10318)

* ✨ feat: Enhance Artifact Management with Version Control and UI Improvements

✨ feat: Improve mobile layout and responsiveness in Artifacts component

✨ feat: Refactor imports and remove unnecessary props in Artifact components

✨ feat: Enhance Artifacts and SidePanel components with improved mobile responsiveness and layout transitions

feat: Enhance artifact panel animations and improve UI responsiveness

- Updated Thinking component button styles for smoother transitions.
- Implemented dynamic rendering for artifacts panel with animation effects.
- Refactored localization keys for consistency across multiple languages.
- Added new CSS animations for iOS-inspired smooth transitions.
- Improved Tailwind CSS configuration to support enhanced animation effects.

✨ feat: Add fullWidth and icon support to Radio component for enhanced flexibility

refactor: Remove unused PreviewProps import in ArtifactPreview component

refactor: Improve button class handling and blur effect constants in Artifact components

✨ feat: Refactor Artifacts component structure and add mobile/desktop variants for improved UI

chore: Bump @librechat/client version to 0.3.2

refactor: Update button styles and transition durations for improved UI responsiveness

refactor: revert back localization key

refactor: remove unused scaling and animation properties for cleaner CSS

refactor: remove unused animation properties for cleaner configuration

* ✨ refactor: Simplify className usage in ArtifactTabs, ArtifactsHeader, and SidePanelGroup components

* refactor: Remove cycleArtifact function from useArtifacts hook

* ✨ feat: Implement Chromium resize lag fix with performance optimizations and new ArtifactsPanel component

* ✨ feat: Update Badge component for responsive design and improve tap scaling behavior

* chore: Update react-resizable-panels dependency to version 3.0.6

* ✨ feat: Refactor Artifacts components for improved structure and performance; remove unused files and optimize styles

* ✨ style: Update text color for improved visibility in Artifacts component

* ✨ style: Remove text color class for improved Spinner styling in Artifacts component

* refactor: Split EditorContext into MutationContext and CodeContext to optimize re-renders; update related components to use new hooks

* refactor: Optimize debounced mutation handling in CodeEditor component using refs to maintain current values and reduce re-renders

* fix: Correct endpoint for message artifacts by changing URL segment from 'artifacts' to 'artifact'

* feat: Enhance useEditArtifact mutation with optimistic updates and rollback on error; improve type safety with context management

* fix: proper switch to preview as soon as artifact becomes enclosed

* refactor: Remove optimistic updates from useEditArtifact mutation to prevent errors; simplify onMutate logic

* test: Add comprehensive unit tests for useArtifacts hook to validate artifact handling, tab switching, and state management

* test: Enhance unit tests for useArtifacts hook to cover new conversation transitions and null message handling

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>

client/src/Providers/EditorContext.tsx

@@ -1,29 +1,76 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useContext, useState, useMemo } from 'react';
 
-interface EditorContextType {
+/**
+ * Mutation state context - for components that need to know about save/edit status
+ * Separated from code state to prevent unnecessary re-renders
+ */
+interface MutationContextType {
   isMutating: boolean;
   setIsMutating: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+/**
+ * Code state context - for components that need the current code content
+ * Changes frequently (on every keystroke), so only subscribe if needed
+ */
+interface CodeContextType {
   currentCode?: string;
   setCurrentCode: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
 
-const EditorContext = createContext<EditorContextType | undefined>(undefined);
+const MutationContext = createContext<MutationContextType | undefined>(undefined);
+const CodeContext = createContext<CodeContextType | undefined>(undefined);
 
+/**
+ * Provides editor state management for artifact code editing
+ * Split into two contexts to prevent unnecessary re-renders:
+ * - MutationContext: for save/edit status (changes rarely)
+ * - CodeContext: for code content (changes on every keystroke)
+ */
 export function EditorProvider({ children }: { children: React.ReactNode }) {
   const [isMutating, setIsMutating] = useState(false);
   const [currentCode, setCurrentCode] = useState<string | undefined>();
 
+  const mutationValue = useMemo(() => ({ isMutating, setIsMutating }), [isMutating]);
+  const codeValue = useMemo(() => ({ currentCode, setCurrentCode }), [currentCode]);
+
   return (
-    <EditorContext.Provider value={{ isMutating, setIsMutating, currentCode, setCurrentCode }}>
-      {children}
-    </EditorContext.Provider>
+    <MutationContext.Provider value={mutationValue}>
+      <CodeContext.Provider value={codeValue}>{children}</CodeContext.Provider>
+    </MutationContext.Provider>
   );
 }
 
-export function useEditorContext() {
-  const context = useContext(EditorContext);
+/**
+ * Hook to access mutation state only
+ * Use this when you only need to know about save/edit status
+ */
+export function useMutationState() {
+  const context = useContext(MutationContext);
   if (context === undefined) {
-    throw new Error('useEditorContext must be used within an EditorProvider');
+    throw new Error('useMutationState must be used within an EditorProvider');
   }
   return context;
 }
+
+/**
+ * Hook to access code state only
+ * Use this when you need the current code content
+ */
+export function useCodeState() {
+  const context = useContext(CodeContext);
+  if (context === undefined) {
+    throw new Error('useCodeState must be used within an EditorProvider');
+  }
+  return context;
+}
+
+/**
+ * @deprecated Use useMutationState() and/or useCodeState() instead
+ * This hook causes components to re-render on every keystroke
+ */
+export function useEditorContext() {
+  const mutation = useMutationState();
+  const code = useCodeState();
+  return { ...mutation, ...code };
+}