🪟 feat: DataTable update + Various UI enhancements (#9698)

* 🎨 feat: Enhance Import Conversations UI with loading state and new localization key

* fix: Correct pluralization in selected items message in translation.json

* Refactor Chat Input File Table Headers to Use SortFilterHeader Component

- Replaced button-based sorting headers in the Chat Input Files Table with a new SortFilterHeader component for better code organization and consistency.
- Updated the header for filename, updatedAt, and bytes columns to utilize the new component.

Enhance Navigation Component with Skeleton Loading States

- Added Skeleton loading states to the Nav component for better user experience during data fetching.
- Updated Suspense fallbacks for AgentMarketplaceButton and BookmarkNav components to display Skeletons.

Refactor Avatar Component for Improved UI

- Enhanced the Avatar component by adding a Label for drag-and-drop functionality.
- Improved styling and structure for the file upload area.

Update Shared Links Component for Better Error Handling and Sorting

- Improved error handling in the Shared Links component for fetching next pages and deleting shared links.
- Simplified the header rendering for sorting columns and added sorting functionality to the title and createdAt columns.

Refactor Archived Chats Component

- Merged ArchivedChats and ArchivedChatsTable components into a single ArchivedChats component for better maintainability.
- Implemented sorting and searching functionality with debouncing for improved performance.
- Enhanced the UI with better loading states and error handling.

Update DataTable Component for Sorting Icons

- Added sorting icons (ChevronUp, ChevronDown, ChevronsUpDown) to the DataTable headers for better visual feedback on sorting state.

Localization Updates

- Updated translation.json to fix missing translations and improve existing ones for better user experience.

* ✨ feat: Update DataTable component to streamline props and enhance sorting icons

* fix: TS issues

* feat: polish and redefine DataTable + shared links and archived chats

* feat: enhance DataTable with column pinning and improve sorting functionality

* feat: enhance deepEqual function for array support and improve column style stability

* refactor: DataTable and ArchivedChats; fix: sorting ArchivedChats API

* feat(DataTable): Implement new DataTable component with hooks and optimized features

- Added DataTable component with support for virtual scrolling, row selection, and customizable columns.
- Introduced hooks for debouncing search input, managing row selection, and calculating column styles.
- Enhanced accessibility with keyboard navigation and selection checkboxes.
- Implemented skeleton loading state for better user experience during data fetching.
- Added DataTableSearch component for filtering data with debounced input.
- Created utility logger for improved debugging in development.
- Updated translations to support new UI elements and actions.

* refactor: update SharedLinks and ArchivedChats to use desktopOnly instead of hideOnMobile; remove unused DataTableColumnHeader component

* fix: ensure desktopOnly columns are hidden on mobile in DataTable

* refactor: reorganize imports in DataTable components and update index exports

* refactor: improve styling and animations in Artifacts, ArtifactsSubMenu, and MCPSubMenu components; update border-radius in style.css

* refactor(Artifacts): enhance button toggle functionality and manage expanded state with useEffect

* refactor: comment out desktopOnly property in SharedLinks and ArchivedChats components; update translation.json with new keys for link actions

* refactor(DataTable): streamline column visibility logic and enhance type definitions; improve cleanup timers and optimize rendering

* refactor(DataTable): enhance type definitions for processed data rows and update custom actions renderer type

* refactor(DataTable): optimize processed data handling and improve warning for missing IDs; streamline DataTableComponents imports

* refactor(DataTable): enhance accessibility features and improve localization for selection and loading states

* refactor: improve padding in dialog content and enhance row selection functionality in ArchivedChats and DataTable components

* refactor(DataTable): remove unnecessary role and tabindex attributes from select all button for improved accessibility

* refactor(translation): remove outdated error messages and unused UI strings for cleaner localization

* refactor(DataTable): enhance virtualization and scrolling performance with dynamic overscan adjustments

* refactor(DataTableErrorBoundary): enhance error handling and localization support

* refactor(DataTable): improve column sizing and visibility handling; remove deprecated features

* refactor: enhance UI components with improved class handling and state management

* refactor(DataTable): improve column width handling and responsiveness; disable row selection

* refactor(DataTable): enhance accessibility with row header support and improve column visibility handling

* chore(DataTable): comments update

* refactor(Table): add unwrapped prop for direct table rendering; adjust minWidth calculation for responsiveness

* refactor(DataTable): simplify search handling by removing unnecessary trimming; adjust column width handling for better responsiveness

* refactor(translation): remove redundant drag and drop UI text for clarity

* refactor(parsers): change uiResources to a constant and streamline artifacts handling

* chore: remove unused file, bump @librechat/client to 0.3.2; fix(SharedLinks): missing import;

* refactor: change button variant from destructive to ghost for delete actions in SharedLinks and ArchivedChats components

* refactor(DataTable): simplify aria-sort assignment for better readability

* refactor(DataTable): update aria-label and ariaLabel to use indexed placeholder for localization

* refactor(translation): update no data messages for consistency

* Refactor code structure for improved readability and maintainability

* chore: restore linting fixes

* chore: restore linting fixes 2; refactor: remove unused translation keys

* feat(tests): add unit tests for DataTable components and error handling

- Implement tests for SelectionCheckbox and SkeletonRows components in DataTable.
- Add tests for DataTableErrorBoundary to ensure proper error handling and UI rendering.
- Create tests for DataTableSearch to validate search functionality and accessibility.
- Update DialogTemplate tests to reflect hardcoded cancel text.
- Remove redundant IntersectionObserver mock in SplitText tests.
- Unmock react-i18next in Translation tests to validate actual i18n functionality.

* refactor: Remove jest-environment-jsdom dependency from package.json; fix: reset package-lock

* chore: revert lint fixes

* chore: clean up package.json by removing unused devDependencies and redundant test scripts

* chore: update package dependencies in package.json and package-lock.json

- Added new devDependencies: @babel/core, @babel/preset-env, @babel/preset-react, @babel/preset-typescript, @tanstack/react-table, @tanstack/react-virtual, @testing-library/jest-dom, identity-obj-proxy, jest, jest-environment-jsdom, and lucide-react.
- Updated existing devDependencies to their latest versions.
- Added new module @asamuzakjp/css-color to package-lock.json with its dependencies.
- Updated version of @babel/plugin-transform-destructuring and added @babel/plugin-transform-explicit-resource-management in package-lock.json.

---------

Co-authored-by: Danny Avila <danny@librechat.ai>

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

@@ -1,4 +1,4 @@
-import React, { memo, useState, useCallback, useMemo } from 'react';
+import React, { memo, useState, useCallback, useMemo, useEffect } from 'react';
 import * as Ariakit from '@ariakit/react';
 import { CheckboxButton } from '@librechat/client';
 import { ArtifactModes } from 'librechat-data-provider';
@@ -18,6 +18,7 @@ function Artifacts() {
   const { toggleState, debouncedChange, isPinned } = artifacts;
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const [isButtonExpanded, setIsButtonExpanded] = useState(false);
 
   const currentState = useMemo<ArtifactsToggleState>(() => {
     if (typeof toggleState === 'string' && toggleState) {
@@ -33,11 +34,26 @@ function Artifacts() {
   const handleToggle = useCallback(() => {
     if (isEnabled) {
       debouncedChange({ value: '' });
+      setIsButtonExpanded(false);
     } else {
       debouncedChange({ value: ArtifactModes.DEFAULT });
     }
   }, [isEnabled, debouncedChange]);
 
+  const handleMenuButtonClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setIsButtonExpanded(!isButtonExpanded);
+    },
+    [isButtonExpanded],
+  );
+
+  useEffect(() => {
+    if (!isPopoverOpen) {
+      setIsButtonExpanded(false);
+    }
+  }, [isPopoverOpen]);
+
   const handleShadcnToggle = useCallback(() => {
     if (isShadcnEnabled) {
       debouncedChange({ value: ArtifactModes.DEFAULT });
@@ -77,21 +93,24 @@ function Artifacts() {
               'border-amber-600/40 bg-amber-500/10 hover:bg-amber-700/10',
               'transition-colors',
             )}
-            onClick={(e) => e.stopPropagation()}
+            onClick={handleMenuButtonClick}
           >
-            <ChevronDown className="ml-1 h-4 w-4 text-text-secondary md:ml-0" aria-hidden="true" />
+            <ChevronDown
+              className={cn(
+                'ml-1 h-4 w-4 text-text-secondary transition-transform duration-300 md:ml-0.5',
+                isButtonExpanded && 'rotate-180',
+              )}
+            aria-hidden="true" />
           </Ariakit.MenuButton>
 
           <Ariakit.Menu
-            gutter={8}
+            gutter={4}
             className={cn(
-              'animate-popover z-50 flex max-h-[300px]',
-              'flex-col overflow-auto overscroll-contain rounded-xl',
-              'bg-surface-secondary px-1.5 py-1 text-text-primary shadow-lg',
-              'border border-border-light',
-              'min-w-[250px] outline-none',
+              'animate-popover-top-left z-50 flex min-w-[250px] flex-col rounded-xl',
+              'border border-border-light bg-surface-secondary shadow-lg',
             )}
-            portal
+            portal={true}
+            unmountOnHide={true}
           >
             <div className="px-2 py-1.5">
               <div className="mb-2 text-xs font-medium text-text-secondary">
@@ -106,18 +125,16 @@ function Artifacts() {
                   event.stopPropagation();
                   handleShadcnToggle();
                 }}
-                disabled={isCustomEnabled}
                 className={cn(
-                  'mb-1 flex items-center justify-between rounded-lg px-2 py-2',
-                  'cursor-pointer outline-none transition-colors',
-                  'hover:bg-black/[0.075] dark:hover:bg-white/10',
-                  'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
-                  isCustomEnabled && 'cursor-not-allowed opacity-50',
+                  'mb-1 flex items-center justify-between gap-2 rounded-lg px-2 py-2',
+                  'cursor-pointer bg-surface-secondary text-text-primary outline-none transition-colors',
+                  'hover:bg-surface-hover data-[active-item]:bg-surface-hover',
+                  isShadcnEnabled && 'bg-surface-active',
                 )}
               >
-                <div className="flex items-center gap-2">
+                <span className="text-sm">{localize('com_ui_include_shadcnui' as any)}</span>
+                <div className="ml-auto flex items-center">
                   <Ariakit.MenuItemCheck checked={isShadcnEnabled} />
-                  <span className="text-sm">{localize('com_ui_include_shadcnui' as any)}</span>
                 </div>
               </Ariakit.MenuItem>
 
@@ -130,15 +147,15 @@ function Artifacts() {
                   handleCustomToggle();
                 }}
                 className={cn(
-                  'flex items-center justify-between rounded-lg px-2 py-2',
-                  'cursor-pointer outline-none transition-colors',
-                  'hover:bg-black/[0.075] dark:hover:bg-white/10',
-                  'data-[active-item]:bg-black/[0.075] dark:data-[active-item]:bg-white/10',
+                  'mb-1 flex items-center justify-between gap-2 rounded-lg px-2 py-2',
+                  'cursor-pointer bg-surface-secondary text-text-primary outline-none transition-colors',
+                  'hover:bg-surface-hover data-[active-item]:bg-surface-hover',
+                  isCustomEnabled && 'bg-surface-active',
                 )}
               >
-                <div className="flex items-center gap-2">
+                <span className="text-sm">{localize('com_ui_custom_prompt_mode' as any)}</span>
+                <div className="ml-auto flex items-center">
                   <Ariakit.MenuItemCheck checked={isCustomEnabled} />
-                  <span className="text-sm">{localize('com_ui_custom_prompt_mode' as any)}</span>
                 </div>
               </Ariakit.MenuItem>
             </div>