✨ 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/data-provider/Messages/mutations.ts

@@ -1,15 +1,52 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { dataService, QueryKeys, Constants } from 'librechat-data-provider';
-import type { UseMutationResult } from '@tanstack/react-query';
+import type { UseMutationResult, UseMutationOptions } from '@tanstack/react-query';
 import type * as t from 'librechat-data-provider';
 
+type EditArtifactContext = {
+  previousMessages: Record<string, t.TMessage[] | undefined>;
+  updatedConversationId: string | null;
+};
+
 export const useEditArtifact = (
   _options?: t.EditArtifactOptions,
-): UseMutationResult<t.TEditArtifactResponse, Error, t.TEditArtifactRequest> => {
+): UseMutationResult<
+  t.TEditArtifactResponse,
+  Error,
+  t.TEditArtifactRequest,
+  EditArtifactContext
+> => {
   const queryClient = useQueryClient();
-  const { onSuccess, ...options } = _options ?? {};
-  return useMutation({
+  const { onSuccess, onError, onMutate: userOnMutate, ...options } = _options ?? {};
+
+  const mutationOptions: UseMutationOptions<
+    t.TEditArtifactResponse,
+    Error,
+    t.TEditArtifactRequest,
+    EditArtifactContext
+  > = {
     mutationFn: (variables: t.TEditArtifactRequest) => dataService.editArtifact(variables),
+    /**
+     * onMutate: No optimistic updates for artifact editing
+     * The code editor shows changes instantly via local Sandpack state
+     * Optimistic updates cause "original content not found" errors because:
+     * 1. First edit optimistically updates cache
+     * 2. Artifact.content reflects the updated cache
+     * 3. Next edit sends updated content as "original" → doesn't match DB → error
+     */
+    onMutate: async (vars) => {
+      // Call user's onMutate if provided
+      if (userOnMutate) {
+        await userOnMutate(vars);
+      }
+      return { previousMessages: {}, updatedConversationId: null };
+    },
+    onError: (error, vars, context) => {
+      onError?.(error, vars, context);
+    },
+    /**
+     * On success: Update with server response to ensure consistency
+     */
     onSuccess: (data, vars, context) => {
       let targetNotFound = true;
       const setMessageData = (conversationId?: string | null) => {
@@ -50,11 +87,13 @@ export const useEditArtifact = (
         console.warn(
           'Edited Artifact Message not found in cache, trying `new` as `conversationId`',
         );
-        setMessageData(Constants.NEW_CONVO);
+        setMessageData(Constants.NEW_CONVO as string);
       }
 
       onSuccess?.(data, vars, context);
     },
     ...options,
-  });
+  };
+
+  return useMutation(mutationOptions);
 };