✨ 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/components/Artifacts/ArtifactButton.tsx

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState, useResetRecoilState } from 'recoil';
 import type { Artifact } from '~/common';
 import FilePreview from '~/components/Chat/Input/Files/FilePreview';
-import { getFileType, logger } from '~/utils';
+import { cn, getFileType, logger } from '~/utils';
 import { useLocalize } from '~/hooks';
 import store from '~/store';
 
@@ -13,8 +13,9 @@ const ArtifactButton = ({ artifact }: { artifact: Artifact | null }) => {
   const location = useLocation();
   const setVisible = useSetRecoilState(store.artifactsVisibility);
   const [artifacts, setArtifacts] = useRecoilState(store.artifactsState);
-  const setCurrentArtifactId = useSetRecoilState(store.currentArtifactId);
+  const [currentArtifactId, setCurrentArtifactId] = useRecoilState(store.currentArtifactId);
   const resetCurrentArtifactId = useResetRecoilState(store.currentArtifactId);
+  const isSelected = artifact?.id === currentArtifactId;
   const [visibleArtifacts, setVisibleArtifacts] = useRecoilState(store.visibleArtifacts);
 
   const debouncedSetVisibleRef = useRef(
@@ -54,35 +55,54 @@ const ArtifactButton = ({ artifact }: { artifact: Artifact | null }) => {
 
   return (
     <div className="group relative my-4 rounded-xl text-sm text-text-primary">
-      <button
-        type="button"
-        onClick={() => {
-          if (!location.pathname.includes('/c/')) {
+      {(() => {
+        const handleClick = () => {
+          if (!location.pathname.includes('/c/')) return;
+
+          if (isSelected) {
+            resetCurrentArtifactId();
+            setVisible(false);
             return;
           }
+
           resetCurrentArtifactId();
           setVisible(true);
+
           if (artifacts?.[artifact.id] == null) {
             setArtifacts(visibleArtifacts);
           }
+
           setTimeout(() => {
             setCurrentArtifactId(artifact.id);
           }, 15);
-        }}
-        className="relative overflow-hidden rounded-xl border border-border-medium transition-all duration-300 hover:border-border-xheavy hover:shadow-lg"
-      >
-        <div className="w-fit bg-surface-tertiary p-2">
-          <div className="flex flex-row items-center gap-2">
-            <FilePreview fileType={fileType} className="relative" />
-            <div className="overflow-hidden text-left">
-              <div className="truncate font-medium">{artifact.title}</div>
-              <div className="truncate text-text-secondary">
-                {localize('com_ui_artifact_click')}
+        };
+
+        const buttonClass = cn(
+          'relative overflow-hidden rounded-xl transition-all duration-300 hover:border-border-medium hover:bg-surface-hover hover:shadow-lg active:scale-[0.98]',
+          {
+            'border-border-medium bg-surface-hover shadow-lg': isSelected,
+            'border-border-light bg-surface-tertiary shadow-sm': !isSelected,
+          },
+        );
+
+        const actionLabel = isSelected
+          ? localize('com_ui_click_to_close')
+          : localize('com_ui_artifact_click');
+
+        return (
+          <button type="button" onClick={handleClick} className={buttonClass}>
+            <div className="w-fit p-2">
+              <div className="flex flex-row items-center gap-2">
+                <FilePreview fileType={fileType} className="relative" />
+                <div className="overflow-hidden text-left">
+                  <div className="truncate font-medium">{artifact.title}</div>
+                  <div className="truncate text-text-secondary">{actionLabel}</div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-      </button>
+          </button>
+        );
+      })()}
       <br />
     </div>
   );

client/src/components/Artifacts/ArtifactCodeEditor.tsx

@@ -1,5 +1,7 @@
+import React, { useMemo, useState, useEffect, useRef, memo } from 'react';
 import debounce from 'lodash/debounce';
-import React, { useMemo, useState, useEffect, useCallback } from 'react';
+import { KeyBinding } from '@codemirror/view';
+import { autocompletion, completionKeymap } from '@codemirror/autocomplete';
 import {
   useSandpack,
   SandpackCodeEditor,
@@ -10,116 +12,143 @@ import type { SandpackBundlerFile } from '@codesandbox/sandpack-client';
 import type { CodeEditorRef } from '@codesandbox/sandpack-react';
 import type { ArtifactFiles, Artifact } from '~/common';
 import { useEditArtifact, useGetStartupConfig } from '~/data-provider';
-import { useEditorContext, useArtifactsContext } from '~/Providers';
+import { useMutationState, useCodeState } from '~/Providers/EditorContext';
+import { useArtifactsContext } from '~/Providers';
 import { sharedFiles, sharedOptions } from '~/utils/artifacts';
 
-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 [currentUpdate, setCurrentUpdate] = useState<string | null>(null);
-  const { isMutating, setIsMutating, setCurrentCode } = useEditorContext();
-  const editArtifact = useEditArtifact({
-    onMutate: (vars) => {
-      setIsMutating(true);
-      setCurrentUpdate(vars.updated);
-    },
-    onSuccess: () => {
-      setIsMutating(false);
-      setCurrentUpdate(null);
-    },
-    onError: () => {
-      setIsMutating(false);
-    },
-  });
-
-  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;
-    }
-    if (artifact.index == null) {
-      return;
-    }
-
-    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 (artifact.content && isNotOriginal && isNotRepeated) {
-      setCurrentCode(currentCode);
-      debouncedMutation({
-        index: artifact.index,
-        messageId: artifact.messageId ?? '',
-        original: artifact.content,
-        updated: currentCode,
-      });
-    }
-
-    return () => {
-      debouncedMutation.cancel();
-    };
-  }, [
+const CodeEditor = memo(
+  ({
     fileKey,
-    artifact.index,
-    artifact.content,
-    artifact.messageId,
     readOnly,
-    isMutating,
-    currentUpdate,
-    setIsMutating,
-    sandpack.files,
-    setCurrentCode,
-    debouncedMutation,
-  ]);
+    artifact,
+    editorRef,
+  }: {
+    fileKey: string;
+    readOnly?: boolean;
+    artifact: Artifact;
+    editorRef: React.MutableRefObject<CodeEditorRef>;
+  }) => {
+    const { sandpack } = useSandpack();
+    const [currentUpdate, setCurrentUpdate] = useState<string | null>(null);
+    const { isMutating, setIsMutating } = useMutationState();
+    const { setCurrentCode } = useCodeState();
+    const editArtifact = useEditArtifact({
+      onMutate: (vars) => {
+        setIsMutating(true);
+        setCurrentUpdate(vars.updated);
+      },
+      onSuccess: () => {
+        setIsMutating(false);
+        setCurrentUpdate(null);
+      },
+      onError: () => {
+        setIsMutating(false);
+      },
+    });
 
-  return (
-    <SandpackCodeEditor
-      ref={editorRef}
-      showTabs={false}
-      showRunButton={false}
-      showLineNumbers={true}
-      showInlineErrors={true}
-      readOnly={readOnly === true}
-      className="hljs language-javascript bg-black"
-    />
-  );
-};
+    /**
+     * Create stable debounced mutation that doesn't depend on changing callbacks
+     * Use refs to always access the latest values without recreating the debounce
+     */
+    const artifactRef = useRef(artifact);
+    const isMutatingRef = useRef(isMutating);
+    const currentUpdateRef = useRef(currentUpdate);
+    const editArtifactRef = useRef(editArtifact);
+    const setCurrentCodeRef = useRef(setCurrentCode);
+
+    useEffect(() => {
+      artifactRef.current = artifact;
+    }, [artifact]);
+
+    useEffect(() => {
+      isMutatingRef.current = isMutating;
+    }, [isMutating]);
+
+    useEffect(() => {
+      currentUpdateRef.current = currentUpdate;
+    }, [currentUpdate]);
+
+    useEffect(() => {
+      editArtifactRef.current = editArtifact;
+    }, [editArtifact]);
+
+    useEffect(() => {
+      setCurrentCodeRef.current = setCurrentCode;
+    }, [setCurrentCode]);
+
+    /**
+     * Create debounced mutation once - never recreate it
+     * All values are accessed via refs so they're always current
+     */
+    const debouncedMutation = useMemo(
+      () =>
+        debounce((code: string) => {
+          if (readOnly) {
+            return;
+          }
+          if (isMutatingRef.current) {
+            return;
+          }
+          if (artifactRef.current.index == null) {
+            return;
+          }
+
+          const artifact = artifactRef.current;
+          const artifactIndex = artifact.index;
+          const isNotOriginal =
+            code && artifact.content != null && code.trim() !== artifact.content.trim();
+          const isNotRepeated =
+            currentUpdateRef.current == null
+              ? true
+              : code != null && code.trim() !== currentUpdateRef.current.trim();
+
+          if (artifact.content && isNotOriginal && isNotRepeated && artifactIndex != null) {
+            setCurrentCodeRef.current(code);
+            editArtifactRef.current.mutate({
+              index: artifactIndex,
+              messageId: artifact.messageId ?? '',
+              original: artifact.content,
+              updated: code,
+            });
+          }
+        }, 500),
+      [readOnly],
+    );
+
+    /**
+     * Listen to Sandpack file changes and trigger debounced mutation
+     */
+    useEffect(() => {
+      const currentCode = (sandpack.files['/' + fileKey] as SandpackBundlerFile | undefined)?.code;
+      if (currentCode) {
+        debouncedMutation(currentCode);
+      }
+    }, [sandpack.files, fileKey, debouncedMutation]);
+
+    /**
+     * Cleanup: cancel pending mutations when component unmounts or artifact changes
+     */
+    useEffect(() => {
+      return () => {
+        debouncedMutation.cancel();
+      };
+    }, [artifact.id, debouncedMutation]);
+
+    return (
+      <SandpackCodeEditor
+        ref={editorRef}
+        showTabs={false}
+        showRunButton={false}
+        showLineNumbers={true}
+        showInlineErrors={true}
+        readOnly={readOnly === true}
+        extensions={[autocompletion()]}
+        extensionsKeymap={Array.from<KeyBinding>(completionKeymap)}
+        className="hljs language-javascript bg-black"
+      />
+    );
+  },
+);
 
 export const ArtifactCodeEditor = function ({
   files,

client/src/components/Artifacts/ArtifactPreview.tsx

@@ -1,10 +1,9 @@
-import React, { memo, useMemo } from 'react';
-import {
-  SandpackPreview,
-  SandpackProvider,
+import React, { memo, useMemo, type MutableRefObject } from 'react';
+import { SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react/unstyled';
+import type {
   SandpackProviderProps,
+  SandpackPreviewRef,
 } from '@codesandbox/sandpack-react/unstyled';
-import type { SandpackPreviewRef, PreviewProps } from '@codesandbox/sandpack-react/unstyled';
 import type { TStartupConfig } from 'librechat-data-provider';
 import type { ArtifactFiles } from '~/common';
 import { sharedFiles, sharedOptions } from '~/utils/artifacts';
@@ -22,7 +21,7 @@ export const ArtifactPreview = memo(function ({
   fileKey: string;
   template: SandpackProviderProps['template'];
   sharedProps: Partial<SandpackProviderProps>;
-  previewRef: React.MutableRefObject<SandpackPreviewRef>;
+  previewRef: MutableRefObject<SandpackPreviewRef>;
   currentCode?: string;
   startupConfig?: TStartupConfig;
 }) {
@@ -36,9 +35,7 @@ export const ArtifactPreview = memo(function ({
     }
     return {
       ...files,
-      [fileKey]: {
-        code,
-      },
+      [fileKey]: { code },
     };
   }, [currentCode, files, fileKey]);
 
@@ -46,12 +43,10 @@ export const ArtifactPreview = memo(function ({
     if (!startupConfig) {
       return sharedOptions;
     }
-    const _options: typeof sharedOptions = {
+    return {
       ...sharedOptions,
       bundlerURL: template === 'static' ? startupConfig.staticBundlerURL : startupConfig.bundlerURL,
     };
-
-    return _options;
   }, [startupConfig, template]);
 
   if (Object.keys(artifactFiles).length === 0) {
@@ -60,10 +55,7 @@ export const ArtifactPreview = memo(function ({
 
   return (
     <SandpackProvider
-      files={{
-        ...artifactFiles,
-        ...sharedFiles,
-      }}
+      files={{ ...artifactFiles, ...sharedFiles }}
       options={options}
       {...sharedProps}
       template={template}

client/src/components/Artifacts/ArtifactTabs.tsx

@@ -1,14 +1,15 @@
 import { useRef, useEffect } from 'react';
 import * as Tabs from '@radix-ui/react-tabs';
-import type { SandpackPreviewRef, CodeEditorRef } from '@codesandbox/sandpack-react';
+import type { SandpackPreviewRef } from '@codesandbox/sandpack-react/unstyled';
+import type { CodeEditorRef } from '@codesandbox/sandpack-react';
 import type { Artifact } from '~/common';
-import { useEditorContext, useArtifactsContext } from '~/Providers';
+import { useCodeState } from '~/Providers/EditorContext';
+import { useArtifactsContext } from '~/Providers';
 import useArtifactProps from '~/hooks/Artifacts/useArtifactProps';
 import { useAutoScroll } from '~/hooks/Artifacts/useAutoScroll';
 import { ArtifactCodeEditor } from './ArtifactCodeEditor';
 import { useGetStartupConfig } from '~/data-provider';
 import { ArtifactPreview } from './ArtifactPreview';
-import { cn } from '~/utils';
 
 export default function ArtifactTabs({
   artifact,
@@ -20,9 +21,10 @@ export default function ArtifactTabs({
   previewRef: React.MutableRefObject<SandpackPreviewRef>;
 }) {
   const { isSubmitting } = useArtifactsContext();
-  const { currentCode, setCurrentCode } = useEditorContext();
+  const { currentCode, setCurrentCode } = useCodeState();
   const { data: startupConfig } = useGetStartupConfig();
   const lastIdRef = useRef<string | null>(null);
+
   useEffect(() => {
     if (artifact.id !== lastIdRef.current) {
       setCurrentCode(undefined);
@@ -33,14 +35,16 @@ export default function ArtifactTabs({
   const content = artifact.content ?? '';
   const contentRef = useRef<HTMLDivElement>(null);
   useAutoScroll({ ref: contentRef, content, isSubmitting });
+
   const { files, fileKey, template, sharedProps } = useArtifactProps({ artifact });
+
   return (
-    <>
+    <div className="flex h-full w-full flex-col">
       <Tabs.Content
         ref={contentRef}
         value="code"
         id="artifacts-code"
-        className={cn('flex-grow overflow-auto')}
+        className="h-full w-full flex-grow overflow-auto"
         tabIndex={-1}
       >
         <ArtifactCodeEditor
@@ -52,7 +56,8 @@ export default function ArtifactTabs({
           sharedProps={sharedProps}
         />
       </Tabs.Content>
-      <Tabs.Content value="preview" className="flex-grow overflow-auto" tabIndex={-1}>
+
+      <Tabs.Content value="preview" className="h-full w-full flex-grow overflow-auto" tabIndex={-1}>
         <ArtifactPreview
           files={files}
           fileKey={fileKey}
@@ -63,6 +68,6 @@ export default function ArtifactTabs({
           startupConfig={startupConfig}
         />
       </Tabs.Content>
-    </>
+    </div>
   );
 }

client/src/components/Artifacts/ArtifactVersion.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { MenuButton } from '@ariakit/react';
+import { History, Check } from 'lucide-react';
+import { DropdownPopup, TooltipAnchor, Button, useMediaQuery } from '@librechat/client';
+import { useLocalize } from '~/hooks';
+
+interface ArtifactVersionProps {
+  currentIndex: number;
+  totalVersions: number;
+  onVersionChange: (index: number) => void;
+}
+
+export default function ArtifactVersion({
+  currentIndex,
+  totalVersions,
+  onVersionChange,
+}: ArtifactVersionProps) {
+  const localize = useLocalize();
+  const [isPopoverActive, setIsPopoverActive] = useState(false);
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+  const menuId = 'version-dropdown-menu';
+
+  const handleValueChange = (value: string) => {
+    const index = parseInt(value, 10);
+    onVersionChange(index);
+    setIsPopoverActive(false);
+  };
+
+  if (totalVersions <= 1) {
+    return null;
+  }
+
+  const options = Array.from({ length: totalVersions }, (_, index) => ({
+    value: index.toString(),
+    label: localize('com_ui_version_var', { 0: String(index + 1) }),
+  }));
+
+  const dropdownItems = options.map((option) => {
+    const isSelected = option.value === String(currentIndex);
+    return {
+      label: option.label,
+      onClick: () => handleValueChange(option.value),
+      value: option.value,
+      icon: isSelected ? (
+        <Check size={16} className="text-text-primary" aria-hidden="true" />
+      ) : undefined,
+    };
+  });
+
+  return (
+    <DropdownPopup
+      menuId={menuId}
+      portal
+      focusLoop
+      unmountOnHide
+      isOpen={isPopoverActive}
+      setIsOpen={setIsPopoverActive}
+      trigger={
+        <TooltipAnchor
+          description={localize('com_ui_change_version')}
+          render={
+            <Button size="icon" variant="ghost" asChild>
+              <MenuButton>
+                <History
+                  size={18}
+                  className="text-text-secondary"
+                  aria-hidden="true"
+                  focusable="false"
+                />
+              </MenuButton>
+            </Button>
+          }
+        />
+      }
+      items={dropdownItems}
+      className={isSmallScreen ? '' : 'absolute right-0 top-0 mt-2'}
+    />
+  );
+}

client/src/components/Artifacts/Artifacts.tsx

@@ -1,147 +1,332 @@
 import { useRef, useState, useEffect } from 'react';
-import { useSetRecoilState } from 'recoil';
 import * as Tabs from '@radix-ui/react-tabs';
-import { ArrowLeft, ChevronLeft, ChevronRight, RefreshCw, X } from 'lucide-react';
+import { Code, Play, RefreshCw, X } from 'lucide-react';
+import { useSetRecoilState, useResetRecoilState } from 'recoil';
+import { Button, Spinner, useMediaQuery, Radio } from '@librechat/client';
 import type { SandpackPreviewRef, CodeEditorRef } from '@codesandbox/sandpack-react';
 import useArtifacts from '~/hooks/Artifacts/useArtifacts';
 import DownloadArtifact from './DownloadArtifact';
-import { useEditorContext } from '~/Providers';
+import ArtifactVersion from './ArtifactVersion';
+import { useMutationState } from '~/Providers/EditorContext';
 import ArtifactTabs from './ArtifactTabs';
 import { CopyCodeButton } from './Code';
 import { useLocalize } from '~/hooks';
 import { cn } from '~/utils';
 import store from '~/store';
 
+const MAX_BLUR_AMOUNT = 32;
+const MAX_BACKDROP_OPACITY = 0.3;
+
 export default function Artifacts() {
   const localize = useLocalize();
-  const { isMutating } = useEditorContext();
+  const { isMutating } = useMutationState();
+  const isMobile = useMediaQuery('(max-width: 868px)');
   const editorRef = useRef<CodeEditorRef>();
   const previewRef = useRef<SandpackPreviewRef>();
   const [isVisible, setIsVisible] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [height, setHeight] = useState(90);
+  const [isDragging, setIsDragging] = useState(false);
+  const [blurAmount, setBlurAmount] = useState(0);
+  const dragStartY = useRef(0);
+  const dragStartHeight = useRef(90);
   const setArtifactsVisible = useSetRecoilState(store.artifactsVisibility);
+  const resetCurrentArtifactId = useResetRecoilState(store.currentArtifactId);
+
+  const tabOptions = [
+    {
+      value: 'code',
+      label: localize('com_ui_code'),
+      icon: <Code className="size-4" />,
+    },
+    {
+      value: 'preview',
+      label: localize('com_ui_preview'),
+      icon: <Play className="size-4" />,
+    },
+  ];
 
   useEffect(() => {
-    setIsVisible(true);
-  }, []);
+    setIsMounted(true);
+    const delay = isMobile ? 50 : 30;
+    const timer = setTimeout(() => setIsVisible(true), delay);
+    return () => {
+      clearTimeout(timer);
+      setIsMounted(false);
+    };
+  }, [isMobile]);
+
+  useEffect(() => {
+    if (!isMobile) {
+      setBlurAmount(0);
+      return;
+    }
+
+    const minHeightForBlur = 50;
+    const maxHeightForBlur = 100;
+
+    if (height <= minHeightForBlur) {
+      setBlurAmount(0);
+    } else if (height >= maxHeightForBlur) {
+      setBlurAmount(MAX_BLUR_AMOUNT);
+    } else {
+      const progress = (height - minHeightForBlur) / (maxHeightForBlur - minHeightForBlur);
+      setBlurAmount(Math.round(progress * MAX_BLUR_AMOUNT));
+    }
+  }, [height, isMobile]);
 
   const {
     activeTab,
     setActiveTab,
     currentIndex,
-    cycleArtifact,
     currentArtifact,
     orderedArtifactIds,
+    setCurrentArtifactId,
   } = useArtifacts();
 
-  if (currentArtifact === null || currentArtifact === undefined) {
+  const handleDragStart = (e: React.PointerEvent) => {
+    setIsDragging(true);
+    dragStartY.current = e.clientY;
+    dragStartHeight.current = height;
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+  };
+
+  const handleDragMove = (e: React.PointerEvent) => {
+    if (!isDragging) {
+      return;
+    }
+
+    const deltaY = dragStartY.current - e.clientY;
+    const viewportHeight = window.innerHeight;
+    const deltaPercentage = (deltaY / viewportHeight) * 100;
+    const newHeight = Math.max(10, Math.min(100, dragStartHeight.current + deltaPercentage));
+
+    setHeight(newHeight);
+  };
+
+  const handleDragEnd = (e: React.PointerEvent) => {
+    if (!isDragging) {
+      return;
+    }
+
+    setIsDragging(false);
+    (e.target as HTMLElement).releasePointerCapture(e.pointerId);
+
+    // Snap to positions based on final height
+    if (height < 30) {
+      closeArtifacts();
+    } else if (height > 95) {
+      setHeight(100);
+    } else if (height < 60) {
+      setHeight(50);
+    } else {
+      setHeight(90);
+    }
+  };
+
+  if (!currentArtifact || !isMounted) {
     return null;
   }
 
   const handleRefresh = () => {
     setIsRefreshing(true);
     const client = previewRef.current?.getClient();
-    if (client != null) {
+    if (client) {
       client.dispatch({ type: 'refresh' });
     }
     setTimeout(() => setIsRefreshing(false), 750);
   };
 
   const closeArtifacts = () => {
-    setIsVisible(false);
-    setTimeout(() => setArtifactsVisible(false), 300);
+    if (isMobile) {
+      setIsClosing(true);
+      setIsVisible(false);
+      setTimeout(() => {
+        setArtifactsVisible(false);
+        setIsClosing(false);
+        setHeight(90);
+      }, 250);
+    } else {
+      resetCurrentArtifactId();
+      setArtifactsVisible(false);
+    }
   };
 
+  const backdropOpacity =
+    blurAmount > 0
+      ? (Math.min(blurAmount, MAX_BLUR_AMOUNT) / MAX_BLUR_AMOUNT) * MAX_BACKDROP_OPACITY
+      : 0;
+
   return (
     <Tabs.Root value={activeTab} onValueChange={setActiveTab} asChild>
-      {/* Main Parent */}
-      <div className="flex h-full w-full items-center justify-center">
-        {/* Main Container */}
+      <div className="flex h-full w-full flex-col">
+        {/* Mobile backdrop with dynamic blur */}
+        {isMobile && (
+          <div
+            className={cn(
+              'fixed inset-0 z-[99] bg-black will-change-[opacity,backdrop-filter]',
+              isVisible && !isClosing
+                ? 'transition-all duration-300'
+                : 'pointer-events-none opacity-0 backdrop-blur-none transition-opacity duration-150',
+              blurAmount < 8 && isVisible && !isClosing ? 'pointer-events-none' : '',
+            )}
+            style={{
+              opacity: isVisible && !isClosing ? backdropOpacity : 0,
+              backdropFilter: isVisible && !isClosing ? `blur(${blurAmount}px)` : 'none',
+              WebkitBackdropFilter: isVisible && !isClosing ? `blur(${blurAmount}px)` : 'none',
+            }}
+            onClick={blurAmount >= 8 ? closeArtifacts : undefined}
+            aria-hidden="true"
+          />
+        )}
         <div
           className={cn(
-            `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-500 ease-in-out`,
-            isVisible ? 'scale-100 opacity-100 blur-0' : 'scale-105 opacity-0 blur-sm',
+            'flex w-full flex-col bg-surface-primary text-xl text-text-primary',
+            isMobile
+              ? cn(
+                  'fixed inset-x-0 bottom-0 z-[100] rounded-t-[20px] shadow-[0_-10px_60px_rgba(0,0,0,0.35)]',
+                  isVisible && !isClosing
+                    ? 'translate-y-0 opacity-100'
+                    : 'duration-250 translate-y-full opacity-0 transition-all',
+                  isDragging ? '' : 'transition-all duration-300',
+                )
+              : cn(
+                  'h-full shadow-2xl',
+                  isVisible && !isClosing
+                    ? 'duration-350 translate-x-0 opacity-100 transition-all'
+                    : 'translate-x-5 opacity-0 transition-all duration-300',
+                ),
           )}
+          style={isMobile ? { height: `${height}vh` } : { overflow: 'hidden' }}
         >
-          {/* Header */}
-          <div className="flex items-center justify-between border-b border-border-medium bg-surface-primary-alt p-2">
-            <div className="flex items-center">
-              <button className="mr-2 text-text-secondary" onClick={closeArtifacts}>
-                <ArrowLeft className="h-4 w-4" />
-              </button>
-              <h3 className="truncate text-sm text-text-primary">{currentArtifact.title}</h3>
+          {isMobile && (
+            <div
+              className="flex flex-shrink-0 cursor-grab items-center justify-center bg-surface-primary-alt pb-1.5 pt-2.5 active:cursor-grabbing"
+              onPointerDown={handleDragStart}
+              onPointerMove={handleDragMove}
+              onPointerUp={handleDragEnd}
+              onPointerCancel={handleDragEnd}
+            >
+              <div className="h-1 w-12 rounded-full bg-border-xheavy opacity-40 transition-all duration-200 active:opacity-60" />
             </div>
-            <div className="flex items-center">
-              {/* Refresh button */}
+          )}
+
+          {/* Header */}
+          <div
+            className={cn(
+              'flex flex-shrink-0 items-center justify-between gap-2 border-b border-border-light bg-surface-primary-alt px-3 py-2 transition-all duration-300',
+              isMobile ? 'justify-center' : 'overflow-hidden',
+            )}
+          >
+            {!isMobile && (
+              <div
+                className={cn(
+                  'flex items-center transition-all duration-500',
+                  isVisible && !isClosing
+                    ? 'translate-x-0 opacity-100'
+                    : '-translate-x-2 opacity-0',
+                )}
+              >
+                <Radio
+                  options={tabOptions}
+                  value={activeTab}
+                  onChange={setActiveTab}
+                  disabled={isMutating && activeTab !== 'code'}
+                />
+              </div>
+            )}
+
+            <div
+              className={cn(
+                'flex items-center gap-2 transition-all duration-500',
+                isMobile ? 'min-w-max' : '',
+                isVisible && !isClosing ? 'translate-x-0 opacity-100' : 'translate-x-2 opacity-0',
+              )}
+            >
               {activeTab === 'preview' && (
-                <button
-                  className={cn(
-                    'mr-2 text-text-secondary transition-transform duration-500 ease-in-out',
-                    isRefreshing ? 'rotate-180' : '',
-                  )}
+                <Button
+                  size="icon"
+                  variant="ghost"
                   onClick={handleRefresh}
                   disabled={isRefreshing}
-                  aria-label="Refresh"
+                  aria-label={localize('com_ui_refresh')}
                 >
-                  <RefreshCw
-                    size={16}
-                    className={cn('transform', isRefreshing ? 'animate-spin' : '')}
-                  />
-                </button>
+                  {isRefreshing ? (
+                    <Spinner size={16} />
+                  ) : (
+                    <RefreshCw size={16} className="transition-transform duration-200" />
+                  )}
+                </Button>
               )}
               {activeTab !== 'preview' && isMutating && (
-                <RefreshCw size={16} className="mr-2 animate-spin text-text-secondary" />
+                <RefreshCw size={16} className="animate-spin text-text-secondary" />
+              )}
+              {orderedArtifactIds.length > 1 && (
+                <ArtifactVersion
+                  currentIndex={currentIndex}
+                  totalVersions={orderedArtifactIds.length}
+                  onVersionChange={(index) => {
+                    const target = orderedArtifactIds[index];
+                    if (target) {
+                      setCurrentArtifactId(target);
+                    }
+                  }}
+                />
               )}
-              {/* 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"
-                >
-                  {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"
-                >
-                  {localize('com_ui_code')}
-                </Tabs.Trigger>
-              </Tabs.List>
-              <button className="text-text-secondary" onClick={closeArtifacts}>
-                <X className="h-4 w-4" />
-              </button>
-            </div>
-          </div>
-          {/* Content */}
-          <ArtifactTabs
-            artifact={currentArtifact}
-            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">
-              <button onClick={() => cycleArtifact('prev')} className="mr-2 text-text-secondary">
-                <ChevronLeft className="h-4 w-4" />
-              </button>
-              <span className="text-xs">{`${currentIndex + 1} / ${
-                orderedArtifactIds.length
-              }`}</span>
-              <button onClick={() => cycleArtifact('next')} className="ml-2 text-text-secondary">
-                <ChevronRight className="h-4 w-4" />
-              </button>
-            </div>
-            <div className="flex items-center gap-2">
               <CopyCodeButton content={currentArtifact.content ?? ''} />
-              {/* Download 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
-              </button> */}
+              <Button
+                size="icon"
+                variant="ghost"
+                onClick={closeArtifacts}
+                aria-label={localize('com_ui_close')}
+              >
+                <X size={16} />
+              </Button>
             </div>
           </div>
+
+          <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden bg-surface-primary">
+            <div className="absolute inset-0 flex flex-col">
+              <ArtifactTabs
+                artifact={currentArtifact}
+                editorRef={editorRef as React.MutableRefObject<CodeEditorRef>}
+                previewRef={previewRef as React.MutableRefObject<SandpackPreviewRef>}
+              />
+            </div>
+
+            <div
+              className={cn(
+                'absolute inset-0 z-[60] flex items-center justify-center bg-black/70 backdrop-blur-sm transition-opacity duration-300 ease-in-out',
+                isRefreshing ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0',
+              )}
+              aria-hidden={!isRefreshing}
+              role="status"
+            >
+              <div
+                className={cn(
+                  'transition-transform duration-300 ease-in-out',
+                  isRefreshing ? 'scale-100' : 'scale-95',
+                )}
+              >
+                <Spinner size={24} />
+              </div>
+            </div>
+          </div>
+
+          {isMobile && (
+            <div className="flex-shrink-0 border-t border-border-light bg-surface-primary-alt p-2">
+              <Radio
+                fullWidth
+                options={tabOptions}
+                value={activeTab}
+                onChange={setActiveTab}
+                disabled={isMutating && activeTab !== 'code'}
+              />
+            </div>
+          )}
         </div>
       </div>
     </Tabs.Root>

client/src/components/Artifacts/Code.tsx

@@ -2,8 +2,9 @@ import React, { memo, useEffect, useRef, useState } from 'react';
 import copy from 'copy-to-clipboard';
 import rehypeKatex from 'rehype-katex';
 import ReactMarkdown from 'react-markdown';
+import { Button } from '@librechat/client';
 import rehypeHighlight from 'rehype-highlight';
-import { Clipboard, CheckMark } from '@librechat/client';
+import { Copy, CircleCheckBig } from 'lucide-react';
 import { handleDoubleClick, langSubset } from '~/utils';
 import { useLocalize } from '~/hooks';
 
@@ -107,12 +108,13 @@ export const CopyCodeButton: React.FC<{ content: string }> = ({ content }) => {
   };
 
   return (
-    <button
-      className="mr-2 text-text-secondary"
+    <Button
+      size="icon"
+      variant="ghost"
       onClick={handleCopy}
       aria-label={isCopied ? localize('com_ui_copied') : localize('com_ui_copy_code')}
     >
-      {isCopied ? <CheckMark className="h-[18px] w-[18px]" /> : <Clipboard />}
-    </button>
+      {isCopied ? <CircleCheckBig size={16} /> : <Copy size={16} />}
+    </Button>
   );
 };

client/src/components/Artifacts/DownloadArtifact.tsx

@@ -1,20 +1,14 @@
 import React, { useState } from 'react';
-import { Download } from 'lucide-react';
+import { Download, CircleCheckBig } from 'lucide-react';
 import type { Artifact } from '~/common';
-import { CheckMark } from '@librechat/client';
+import { Button } from '@librechat/client';
 import useArtifactProps from '~/hooks/Artifacts/useArtifactProps';
-import { useEditorContext } from '~/Providers';
+import { useCodeState } from '~/Providers/EditorContext';
 import { useLocalize } from '~/hooks';
 
-const DownloadArtifact = ({
-  artifact,
-  className = '',
-}: {
-  artifact: Artifact;
-  className?: string;
-}) => {
+const DownloadArtifact = ({ artifact }: { artifact: Artifact }) => {
   const localize = useLocalize();
-  const { currentCode } = useEditorContext();
+  const { currentCode } = useCodeState();
   const [isDownloaded, setIsDownloaded] = useState(false);
   const { fileKey: fileName } = useArtifactProps({ artifact });
 
@@ -41,13 +35,14 @@ const DownloadArtifact = ({
   };
 
   return (
-    <button
-      className={`mr-2 text-text-secondary ${className}`}
+    <Button
+      size="icon"
+      variant="ghost"
       onClick={handleDownload}
       aria-label={localize('com_ui_download_artifact')}
     >
-      {isDownloaded ? <CheckMark className="h-4 w-4" /> : <Download className="h-4 w-4" />}
-    </button>
+      {isDownloaded ? <CircleCheckBig size={16} /> : <Download size={16} />}
+    </Button>
   );
 };
 

client/src/components/Chat/Input/ChatForm.tsx

@@ -301,7 +301,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
             )}
             <div
               className={cn(
-                'items-between flex gap-2 pb-2',
+                '@container items-between flex gap-2 pb-2',
                 isRTL ? 'flex-row-reverse' : 'flex-row',
               )}
             >

client/src/components/Chat/Presentation.tsx

@@ -57,6 +57,23 @@ export default function Presentation({ children }: { children: React.ReactNode }
   }, []);
   const fullCollapse = useMemo(() => localStorage.getItem('fullPanelCollapse') === 'true', []);
 
+  /**
+   * Memoize artifacts JSX to prevent recreating it on every render
+   * This is critical for performance - prevents entire artifact tree from re-rendering
+   */
+  const artifactsElement = useMemo(() => {
+    if (artifactsVisibility === true && Object.keys(artifacts ?? {}).length > 0) {
+      return (
+        <ArtifactsProvider>
+          <EditorProvider>
+            <Artifacts />
+          </EditorProvider>
+        </ArtifactsProvider>
+      );
+    }
+    return null;
+  }, [artifactsVisibility, artifacts]);
+
   return (
     <DragDropWrapper className="relative flex w-full grow overflow-hidden bg-presentation">
       <SidePanelProvider>
@@ -64,15 +81,7 @@ export default function Presentation({ children }: { children: React.ReactNode }
           defaultLayout={defaultLayout}
           fullPanelCollapse={fullCollapse}
           defaultCollapsed={defaultCollapsed}
-          artifacts={
-            artifactsVisibility === true && Object.keys(artifacts ?? {}).length > 0 ? (
-              <ArtifactsProvider>
-                <EditorProvider>
-                  <Artifacts />
-                </EditorProvider>
-              </ArtifactsProvider>
-            ) : null
-          }
+          artifacts={artifactsElement}
         >
           <main className="flex h-full flex-col overflow-y-auto" role="main">
             {children}

client/src/components/SidePanel/ArtifactsPanel.tsx

@@ -0,0 +1,82 @@
+import { useRef, useEffect, memo } from 'react';
+import { ResizableHandleAlt, ResizablePanel } from '@librechat/client';
+import type { ImperativePanelHandle } from 'react-resizable-panels';
+
+const ANIMATION_DURATION = 500;
+
+interface ArtifactsPanelProps {
+  artifacts: React.ReactNode | null;
+  currentLayout: number[];
+  minSizeMain: number;
+  shouldRender: boolean;
+  onRenderChange: (shouldRender: boolean) => void;
+}
+
+/**
+ * ArtifactsPanel component - memoized to prevent unnecessary re-renders
+ * Only re-renders when artifacts visibility or layout changes
+ */
+const ArtifactsPanel = memo(function ArtifactsPanel({
+  artifacts,
+  currentLayout,
+  minSizeMain,
+  shouldRender,
+  onRenderChange,
+}: ArtifactsPanelProps) {
+  const artifactsPanelRef = useRef<ImperativePanelHandle>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    if (artifacts != null) {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      onRenderChange(true);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          artifactsPanelRef.current?.expand();
+        });
+      });
+    } else if (shouldRender) {
+      artifactsPanelRef.current?.collapse();
+      timeoutRef.current = setTimeout(() => {
+        onRenderChange(false);
+      }, ANIMATION_DURATION);
+    }
+
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [artifacts, shouldRender, onRenderChange]);
+
+  if (!shouldRender) {
+    return null;
+  }
+
+  return (
+    <>
+      {artifacts != null && (
+        <ResizableHandleAlt withHandle className="bg-border-medium text-text-primary" />
+      )}
+      <ResizablePanel
+        ref={artifactsPanelRef}
+        defaultSize={artifacts != null ? currentLayout[1] : 0}
+        minSize={minSizeMain}
+        maxSize={70}
+        collapsible={true}
+        collapsedSize={0}
+        order={2}
+        id="artifacts-panel"
+      >
+        <div className="h-full min-w-[400px] overflow-hidden">{artifacts}</div>
+      </ResizablePanel>
+    </>
+  );
+});
+
+ArtifactsPanel.displayName = 'ArtifactsPanel';
+
+export default ArtifactsPanel;

client/src/components/SidePanel/SidePanelGroup.tsx

@@ -2,14 +2,10 @@ import { useState, useRef, useCallback, useEffect, useMemo, memo } from 'react';
 import throttle from 'lodash/throttle';
 import { useRecoilValue } from 'recoil';
 import { getConfigDefaults } from 'librechat-data-provider';
-import {
-  ResizableHandleAlt,
-  ResizablePanel,
-  ResizablePanelGroup,
-  useMediaQuery,
-} from '@librechat/client';
+import { ResizablePanel, ResizablePanelGroup, useMediaQuery } from '@librechat/client';
 import type { ImperativePanelHandle } from 'react-resizable-panels';
 import { useGetStartupConfig } from '~/data-provider';
+import ArtifactsPanel from './ArtifactsPanel';
 import { normalizeLayout } from '~/utils';
 import SidePanel from './SidePanel';
 import store from '~/store';
@@ -46,6 +42,7 @@ const SidePanelGroup = memo(
     const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
     const [fullCollapse, setFullCollapse] = useState(fullPanelCollapse);
     const [collapsedSize, setCollapsedSize] = useState(navCollapsedSize);
+    const [shouldRenderArtifacts, setShouldRenderArtifacts] = useState(artifacts != null);
 
     const isSmallScreen = useMediaQuery('(max-width: 767px)');
     const hideSidePanel = useRecoilValue(store.hideSidePanel);
@@ -109,7 +106,7 @@ const SidePanelGroup = memo(
         <ResizablePanelGroup
           direction="horizontal"
           onLayout={(sizes) => throttledSaveLayout(sizes)}
-          className="transition-width relative h-full w-full flex-1 overflow-auto bg-presentation"
+          className="relative h-full w-full flex-1 overflow-auto bg-presentation"
         >
           <ResizablePanel
             defaultSize={currentLayout[0]}
@@ -119,19 +116,17 @@ const SidePanelGroup = memo(
           >
             {children}
           </ResizablePanel>
-          {artifacts != null && (
-            <>
-              <ResizableHandleAlt withHandle className="ml-3 bg-border-medium text-text-primary" />
-              <ResizablePanel
-                defaultSize={currentLayout[1]}
-                minSize={minSizeMain}
-                order={2}
-                id="artifacts-panel"
-              >
-                {artifacts}
-              </ResizablePanel>
-            </>
+
+          {!isSmallScreen && (
+            <ArtifactsPanel
+              artifacts={artifacts}
+              currentLayout={currentLayout}
+              minSizeMain={minSizeMain}
+              shouldRender={shouldRenderArtifacts}
+              onRenderChange={setShouldRenderArtifacts}
+            />
           )}
+
           {!hideSidePanel && interfaceConfig.sidePanel === true && (
             <SidePanel
               panelRef={panelRef}
@@ -149,6 +144,9 @@ const SidePanelGroup = memo(
             />
           )}
         </ResizablePanelGroup>
+        {artifacts != null && isSmallScreen && (
+          <div className="fixed inset-0 z-[100]">{artifacts}</div>
+        )}
         <button
           aria-label="Close right side panel"
           className={`nav-mask ${!isCollapsed ? 'active' : ''}`}