📜 refactor: Optimize Conversation History Nav with Cursor Pagination (#5785)

* ✨ feat: improve Nav/Conversations/Convo/NewChat component performance

* ✨ feat: implement cursor-based pagination for conversations API

* 🔧 refactor: remove createdAt from conversation selection in API and type definitions

* 🔧 refactor: include createdAt in conversation selection and update related types

* ✨ fix: search functionality and bugs with loadMoreConversations

* feat: move ArchivedChats to cursor and DataTable standard

* 🔧 refactor: add InfiniteQueryObserverResult type import in Nav component

* feat: enhance conversation listing with pagination, sorting, and search capabilities

* 🔧 refactor: remove unnecessary comment regarding lodash/debounce in ArchivedChatsTable

* 🔧 refactor: remove unused translation keys for archived chats and search results

* 🔧 fix: Archived Chats, Delete Convo, Duplicate Convo

* 🔧 refactor: improve conversation components with layout adjustments and new translations

* 🔧 refactor: simplify archive conversation mutation and improve unarchive handling; fix: update fork mutation

* 🔧 refactor: decode search query parameter in conversation route; improve error handling in unarchive mutation; clean up DataTable component styles

* 🔧 refactor: remove unused translation key for empty archived chats

* 🚀 fix: `archivedConversation` query key not updated correctly while archiving

* 🧠 feat: Bedrock Anthropic Reasoning & Update Endpoint Handling (#6163)

* feat: Add thinking and thinkingBudget parameters for Bedrock Anthropic models

* chore: Update @librechat/agents to version 2.1.8

* refactor: change region order in params

* refactor: Add maxTokens parameter to conversation preset schema

* refactor: Update agent client to use bedrockInputSchema and improve error handling for model parameters

* refactor: streamline/optimize llmConfig initialization and saving for bedrock

* fix: ensure config titleModel is used for all endpoints

* refactor: enhance OpenAIClient and agent initialization to support endpoint checks for OpenRouter

* chore: bump @google/generative-ai

* ✨ feat: improve Nav/Conversations/Convo/NewChat component performance

* 🔧 refactor: remove unnecessary comment regarding lodash/debounce in ArchivedChatsTable

* 🔧 refactor: update translation keys for clarity; simplify conversation query parameters and improve sorting functionality in SharedLinks component

* 🔧 refactor: optimize conversation loading logic and improve search handling in Nav component

* fix: package-lock

* fix: package-lock 2

* fix: package lock 3

* refactor: remove unused utility files and exports to clean up the codebase

* refactor: remove i18n and useAuthRedirect modules to streamline codebase

* refactor: optimize Conversations component and remove unused ToggleContext

* refactor(Convo): add RenameForm and ConvoLink components; enhance Conversations component with responsive design

* fix: add missing @azure/storage-blob dependency in package.json

* refactor(Search): add error handling with toast notification for search errors

* refactor: make createdAt and updatedAt fields of tConvoUpdateSchema less restrictive if timestamps are missing

* chore: update @azure/storage-blob dependency to version 12.27.0, ensure package-lock is correct

* refactor(Search): improve conversation handling server side

* fix: eslint warning and errors

* refactor(Search): improved search loading state and overall UX

* Refactors conversation cache management

Centralizes conversation mutation logic into dedicated utility functions for adding, updating, and removing conversations from query caches.

Improves reliability and maintainability by:
- Consolidating duplicate cache manipulation code
- Adding type safety for infinite query data structures
- Implementing consistent cache update patterns across all conversation operations
- Removing obsolete conversation helper functions in favor of standardized utilities

* fix: conversation handling and SSE event processing

- Optimizes conversation state management with useMemo and proper hook ordering
- Improves SSE event handler documentation and error handling
- Adds reset guard flag for conversation changes
- Removes redundant navigation call
- Cleans up cursor handling logic and document structure

Improves code maintainability and prevents potential race conditions in conversation state updates

* refactor: add type for SearchBar `onChange`

* fix: type tags

* style: rounded to xl all Header buttons

* fix: activeConvo in Convo not working

* style(Bookmarks): improved UI

* a11y(AccountSettings): fixed hover style not visible when using light theme

* style(SettingsTabs): improved tab switchers and dropdowns

* feat: add translations keys for Speech

* chore: fix package-lock

* fix(mutations): legacy import after rebase

* feat: refactor conversation navigation for accessibility

* fix(search): convo and message create/update date not returned

* fix(search): show correct iconURL and endpoint for searched messages

* fix: small UI improvements

* chore: console.log cleanup

* chore: fix tests

* fix(ChatForm): improve conversation ID handling and clean up useMemo dependencies

* chore: improve typing

* chore: improve typing

* fix(useSSE): clear conversation ID on submission to prevent draft restoration

* refactor(OpenAIClient): clean up abort handler

* refactor(abortMiddleware): change handleAbort to use function expression

* feat: add PENDING_CONVO constant and update conversation ID checks

* fix: final event handling on abort

* fix: improve title sync and query cache sync on final event

* fix: prevent overwriting cached conversation data if it already exists

---------

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

client/src/components/ui/DataTable.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState, memo, useMemo } from 'react';
+import { useRecoilValue } from 'recoil';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import {
   Row,
@@ -23,11 +24,13 @@ import {
   TableHead,
   TableHeader,
   AnimatedSearchInput,
+  Skeleton,
 } from './';
 import { TrashIcon, Spinner } from '~/components/svg';
 import { useLocalize, useMediaQuery } from '~/hooks';
-import { cn } from '~/utils';
 import { LocalizeFunction } from '~/common';
+import { cn } from '~/utils';
+import store from '~/store';
 
 type TableColumn<TData, TValue> = ColumnDef<TData, TValue> & {
   meta?: {
@@ -77,6 +80,7 @@ interface DataTableProps<TData, TValue> {
   showCheckboxes?: boolean;
   onFilterChange?: (value: string) => void;
   filterValue?: string;
+  isLoading?: boolean;
 }
 
 const TableRowComponent = <TData, TValue>({
@@ -103,17 +107,11 @@ const TableRowComponent = <TData, TValue>({
   return (
     <TableRow
       data-state={row.getIsSelected() ? 'selected' : undefined}
-      className={`
-        motion-safe:animate-fadeIn border-b
-        border-border-light transition-all duration-300
-        ease-out
-        hover:bg-surface-secondary
-        ${isSearching ? 'opacity-50' : 'opacity-100'}
-        ${isSearching ? 'scale-98' : 'scale-100'}
-      `}
+      className="motion-safe:animate-fadeIn border-b border-border-light transition-all duration-300 ease-out hover:bg-surface-secondary"
       style={{
         animationDelay: `${index * 20}ms`,
         transform: `translateY(${isSearching ? '4px' : '0'})`,
+        opacity: isSearching ? 0.5 : 1,
       }}
     >
       {row.getVisibleCells().map((cell) => {
@@ -132,12 +130,7 @@ const TableRowComponent = <TData, TValue>({
         return (
           <TableCell
             key={cell.id}
-            className={`
-              w-0 max-w-0 px-2 py-1 align-middle text-xs
-              transition-all duration-300 sm:px-4
-              sm:py-2 sm:text-sm
-              ${isSearching ? 'blur-[0.3px]' : 'blur-0'}
-            `}
+            className="w-0 max-w-0 px-2 py-1 align-middle text-xs transition-all duration-300 sm:px-4 sm:py-2 sm:text-sm"
             style={getColumnStyle(
               cell.column.columnDef as TableColumn<TData, TValue>,
               isSmallScreen,
@@ -178,7 +171,7 @@ const DeleteButton = memo(
     isDeleting: boolean;
     disabled: boolean;
     isSmallScreen: boolean;
-    localize:LocalizeFunction;
+    localize: LocalizeFunction;
   }) => {
     if (!onDelete) {
       return null;
@@ -217,12 +210,14 @@ export default function DataTable<TData, TValue>({
   showCheckboxes = true,
   onFilterChange,
   filterValue,
+  isLoading,
 }: DataTableProps<TData, TValue>) {
   const localize = useLocalize();
   const isSmallScreen = useMediaQuery('(max-width: 768px)');
   const tableContainerRef = useRef<HTMLDivElement>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
 
+  const [isDeleting, setIsDeleting] = useState(false);
+  const isSearchEnabled = useRecoilValue(store.isSearchEnabled);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const [sorting, setSorting] = useState<SortingState>(defaultSort);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
@@ -342,10 +337,35 @@ export default function DataTable<TData, TValue>({
     }
   }, [onDelete, table]);
 
+  const getRandomWidth = () => Math.floor(Math.random() * (410 - 170 + 1)) + 170;
+
+  const skeletons = Array.from({ length: 13 }, (_, index) => {
+    const randomWidth = getRandomWidth();
+    const firstDataColumnIndex = tableColumns[0]?.id === 'select' ? 1 : 0;
+
+    return (
+      <TableRow key={index} className="motion-safe:animate-fadeIn border-b border-border-light">
+        {tableColumns.map((column, columnIndex) => {
+          const style = getColumnStyle(column as TableColumn<TData, TValue>, isSmallScreen);
+          const isFirstDataColumn = columnIndex === firstDataColumnIndex;
+
+          return (
+            <TableCell key={column.id} className="px-2 py-1 sm:px-4 sm:py-2" style={style}>
+              <Skeleton
+                className="h-6"
+                style={isFirstDataColumn ? { width: `${randomWidth}px` } : { width: '100%' }}
+              />
+            </TableCell>
+          );
+        })}
+      </TableRow>
+    );
+  });
+
   return (
     <div className={cn('flex h-full flex-col gap-4', className)}>
       {/* Table controls */}
-      <div className="flex flex-wrap items-center gap-2 py-2 sm:gap-4 sm:py-4">
+      <div className="flex flex-wrap items-center gap-2 sm:gap-4">
         {enableRowSelection && showCheckboxes && (
           <DeleteButton
             onDelete={handleDelete}
@@ -355,7 +375,7 @@ export default function DataTable<TData, TValue>({
             localize={localize}
           />
         )}
-        {filterColumn !== undefined && table.getColumn(filterColumn) && (
+        {filterColumn !== undefined && table.getColumn(filterColumn) && isSearchEnabled && (
           <div className="relative flex-1">
             <AnimatedSearchInput
               value={searchTerm}
@@ -411,6 +431,8 @@ export default function DataTable<TData, TValue>({
               </tr>
             )}
 
+            {isLoading && skeletons}
+
             {virtualRows.map((virtualRow) => {
               const row = rows[virtualRow.index];
               return (