mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-07 02:58:50 +01:00
🧩 feat: Web Search Config Validations & Clipboard Citation Processing (#7530)
* 🔧 chore: Add missing optional `scraperTimeout` to webSearchSchema
* chore: Add missing optional `scraperTimeout` to web search authentication result
* chore: linting
* feat: Integrate attachment handling and citation processing in message components
- Added `useAttachments` hook to manage message attachments and search results.
- Updated `MessageParts`, `ContentParts`, and `ContentRender` components to utilize the new hook for improved attachment handling.
- Enhanced `useCopyToClipboard` to format citations correctly, including support for composite citations and deduplication.
- Introduced utility functions for citation processing and cleanup.
- Added tests for the new `useCopyToClipboard` functionality to ensure proper citation formatting and handling.
* feat: Add configuration for LibreChat Code Interpreter API and Web Search variables
* fix: Update searchResults type to use SearchResultData for better type safety
* feat: Add web search configuration validation and logging
- Introduced `checkWebSearchConfig` function to validate web search configuration values, ensuring they are environment variable references.
- Added logging for proper configuration and warnings for incorrect values.
- Created unit tests for `checkWebSearchConfig` to cover various scenarios, including valid and invalid configurations.
* docs: Update README to include Web Search feature details
- Added a section for the Web Search feature, highlighting its capabilities to search the internet and enhance AI context.
- Included links for further information on the Web Search functionality.
* ci: Add mock for checkWebSearchConfig in AppService tests
* chore: linting
* feat: Enhance Shared Messages with Web Search UI by adding searchResults prop to SearchContent and MinimalHoverButtons components
* chore: linting
* refactor: remove Meilisearch index sync from importConversations function
* feat: update safeSearch implementation to use SafeSearchTypes enum
* refactor: remove commented-out code in loadTools function
* fix: ensure responseMessageId handles latestMessage ID correctly
* feat: enhance Vite configuration for improved chunking and caching
- Added additional globIgnores for map files in Workbox configuration.
- Implemented high-impact chunking for various large libraries to optimize performance.
- Increased chunkSizeWarningLimit from 1200 to 1500 for better handling of larger chunks.
* refactor: move health check hook to Root, fix bad setState for Temporary state
- Enhanced the `useHealthCheck` hook to initiate health checks only when the user is authenticated.
- Added logic for managing health check intervals and handling window focus events.
- Introduced a new test suite for `useHealthCheck` to cover various scenarios including authentication state changes and error handling.
- Removed the health check invocation from `ChatRoute` and added it to `Root` for global health monitoring.
* fix: update font alias in Vite configuration for correct path resolution
This commit is contained in:
Danny Avila
GitHub
parent
cede5d120c
commit
b2f44fc90f
34 changed files with 1709 additions and 140 deletions
316
client/src/data-provider/__tests__/connection.test.ts
Normal file
316
client/src/data-provider/__tests__/connection.test.ts
Normal file
|
|
@ -0,0 +1,316 @@
|
|||
import { renderHook, act } from '@testing-library/react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { useHealthCheck } from '../connection';
|
||||
import { QueryKeys, Time, dataService } from 'librechat-data-provider';
|
||||
|
||||
// Mock dependencies
|
||||
jest.mock('@tanstack/react-query');
|
||||
jest.mock('librechat-data-provider', () => ({
|
||||
QueryKeys: { health: 'health' },
|
||||
Time: { TEN_MINUTES: 600000, FIVE_MINUTES: 300000 },
|
||||
dataService: { healthCheck: jest.fn() },
|
||||
}));
|
||||
|
||||
jest.mock('~/utils', () => ({
|
||||
logger: { log: jest.fn() },
|
||||
}));
|
||||
|
||||
// Mock timers
|
||||
jest.useFakeTimers();
|
||||
|
||||
const mockQueryClient = {
|
||||
fetchQuery: jest.fn(),
|
||||
getQueryState: jest.fn(),
|
||||
getQueryData: jest.fn(),
|
||||
invalidateQueries: jest.fn(),
|
||||
} as any;
|
||||
|
||||
const mockUseQueryClient = useQueryClient as jest.MockedFunction<typeof useQueryClient>;
|
||||
|
||||
describe('useHealthCheck', () => {
|
||||
let addEventListenerSpy: jest.SpyInstance;
|
||||
let removeEventListenerSpy: jest.SpyInstance;
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
jest.clearAllTimers();
|
||||
mockUseQueryClient.mockReturnValue(mockQueryClient);
|
||||
|
||||
addEventListenerSpy = jest.spyOn(window, 'addEventListener');
|
||||
removeEventListenerSpy = jest.spyOn(window, 'removeEventListener');
|
||||
|
||||
mockQueryClient.fetchQuery.mockResolvedValue({});
|
||||
mockQueryClient.getQueryState.mockReturnValue(null);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
addEventListenerSpy.mockRestore();
|
||||
removeEventListenerSpy.mockRestore();
|
||||
});
|
||||
|
||||
describe('when not authenticated', () => {
|
||||
it('should not start health check', () => {
|
||||
renderHook(() => useHealthCheck(false));
|
||||
|
||||
// Fast-forward past the delay
|
||||
act(() => {
|
||||
jest.advanceTimersByTime(1000);
|
||||
});
|
||||
|
||||
expect(mockQueryClient.fetchQuery).not.toHaveBeenCalled();
|
||||
expect(addEventListenerSpy).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('when authenticated', () => {
|
||||
it('should start health check after delay', async () => {
|
||||
renderHook(() => useHealthCheck(true));
|
||||
|
||||
// Should not run immediately
|
||||
expect(mockQueryClient.fetchQuery).not.toHaveBeenCalled();
|
||||
|
||||
// Should run after 500ms delay
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
expect(mockQueryClient.fetchQuery).toHaveBeenCalledWith(
|
||||
[QueryKeys.health],
|
||||
expect.any(Function),
|
||||
{
|
||||
retry: false,
|
||||
cacheTime: 0,
|
||||
staleTime: 0,
|
||||
},
|
||||
);
|
||||
});
|
||||
|
||||
it('should set up 10-minute interval', async () => {
|
||||
renderHook(() => useHealthCheck(true));
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500); // Initial delay
|
||||
});
|
||||
|
||||
// Clear the initial call
|
||||
mockQueryClient.fetchQuery.mockClear();
|
||||
|
||||
// Advance by 10 minutes
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(Time.TEN_MINUTES);
|
||||
});
|
||||
|
||||
expect(mockQueryClient.fetchQuery).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should run health check continuously every 10 minutes', async () => {
|
||||
renderHook(() => useHealthCheck(true));
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500); // Initial delay
|
||||
});
|
||||
|
||||
// Clear the initial call
|
||||
mockQueryClient.fetchQuery.mockClear();
|
||||
|
||||
// Test multiple intervals to ensure it keeps running
|
||||
for (let i = 1; i <= 5; i++) {
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(Time.TEN_MINUTES);
|
||||
});
|
||||
|
||||
expect(mockQueryClient.fetchQuery).toHaveBeenCalledTimes(i);
|
||||
}
|
||||
|
||||
// Verify it's been called 5 times total (once per interval)
|
||||
expect(mockQueryClient.fetchQuery).toHaveBeenCalledTimes(5);
|
||||
|
||||
// Test that it continues after longer periods
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(Time.TEN_MINUTES * 3); // Advance 30 more minutes
|
||||
});
|
||||
|
||||
// Should have been called 3 more times (total of 8)
|
||||
expect(mockQueryClient.fetchQuery).toHaveBeenCalledTimes(8);
|
||||
});
|
||||
|
||||
it('should add window focus event listener', async () => {
|
||||
renderHook(() => useHealthCheck(true));
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
expect(addEventListenerSpy).toHaveBeenCalledWith('focus', expect.any(Function));
|
||||
});
|
||||
|
||||
it('should handle window focus correctly when no previous check', async () => {
|
||||
renderHook(() => useHealthCheck(true));
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
// Get the focus handler
|
||||
const focusHandler = addEventListenerSpy.mock.calls[0][1];
|
||||
|
||||
// Mock no query state (no previous check)
|
||||
mockQueryClient.getQueryState.mockReturnValue(null);
|
||||
mockQueryClient.fetchQuery.mockClear();
|
||||
|
||||
// Trigger focus event
|
||||
await act(async () => {
|
||||
focusHandler();
|
||||
});
|
||||
|
||||
expect(mockQueryClient.fetchQuery).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should handle window focus correctly when check is recent', async () => {
|
||||
renderHook(() => useHealthCheck(true));
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
// Get the focus handler
|
||||
const focusHandler = addEventListenerSpy.mock.calls[0][1];
|
||||
|
||||
// Mock recent query state (within 10 minutes)
|
||||
mockQueryClient.getQueryState.mockReturnValue({
|
||||
dataUpdatedAt: Date.now() - 300000, // 5 minutes ago
|
||||
});
|
||||
mockQueryClient.fetchQuery.mockClear();
|
||||
|
||||
// Trigger focus event
|
||||
await act(async () => {
|
||||
focusHandler();
|
||||
});
|
||||
|
||||
expect(mockQueryClient.fetchQuery).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should handle window focus correctly when check is old', async () => {
|
||||
renderHook(() => useHealthCheck(true));
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
// Get the focus handler
|
||||
const focusHandler = addEventListenerSpy.mock.calls[0][1];
|
||||
|
||||
// Mock old query state (older than 10 minutes)
|
||||
mockQueryClient.getQueryState.mockReturnValue({
|
||||
dataUpdatedAt: Date.now() - 700000, // 11+ minutes ago
|
||||
});
|
||||
mockQueryClient.fetchQuery.mockClear();
|
||||
|
||||
// Trigger focus event
|
||||
await act(async () => {
|
||||
focusHandler();
|
||||
});
|
||||
|
||||
expect(mockQueryClient.fetchQuery).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('should prevent multiple initializations', async () => {
|
||||
const { rerender } = renderHook(({ auth }) => useHealthCheck(auth), {
|
||||
initialProps: { auth: true },
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
const initialCallCount = addEventListenerSpy.mock.calls.length;
|
||||
|
||||
// Re-render with same auth state
|
||||
rerender({ auth: true });
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
// Should not add more event listeners
|
||||
expect(addEventListenerSpy).toHaveBeenCalledTimes(initialCallCount);
|
||||
});
|
||||
|
||||
it('should handle API errors gracefully', async () => {
|
||||
const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
|
||||
mockQueryClient.fetchQuery.mockRejectedValue(new Error('API Error'));
|
||||
|
||||
renderHook(() => useHealthCheck(true));
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
expect(consoleSpy).toHaveBeenCalledWith('Health check failed:', expect.any(Error));
|
||||
consoleSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('cleanup', () => {
|
||||
it('should clear intervals on unmount', async () => {
|
||||
const { unmount } = renderHook(() => useHealthCheck(true));
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
const clearIntervalSpy = jest.spyOn(global, 'clearInterval');
|
||||
|
||||
unmount();
|
||||
|
||||
expect(clearIntervalSpy).toHaveBeenCalled();
|
||||
clearIntervalSpy.mockRestore();
|
||||
});
|
||||
|
||||
it('should remove event listeners on unmount', async () => {
|
||||
const { unmount } = renderHook(() => useHealthCheck(true));
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
unmount();
|
||||
|
||||
expect(removeEventListenerSpy).toHaveBeenCalledWith('focus', expect.any(Function));
|
||||
});
|
||||
|
||||
it('should clear timeout on unmount before initialization', () => {
|
||||
const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
|
||||
const { unmount } = renderHook(() => useHealthCheck(true));
|
||||
|
||||
// Unmount before delay completes
|
||||
unmount();
|
||||
|
||||
expect(clearTimeoutSpy).toHaveBeenCalled();
|
||||
clearTimeoutSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
||||
describe('authentication state changes', () => {
|
||||
it('should start health check when authentication becomes true', async () => {
|
||||
const { rerender } = renderHook(({ auth }) => useHealthCheck(auth), {
|
||||
initialProps: { auth: false },
|
||||
});
|
||||
|
||||
// Should not start when false
|
||||
act(() => {
|
||||
jest.advanceTimersByTime(1000);
|
||||
});
|
||||
expect(mockQueryClient.fetchQuery).not.toHaveBeenCalled();
|
||||
|
||||
// Should start when becomes true
|
||||
rerender({ auth: true });
|
||||
|
||||
await act(async () => {
|
||||
jest.advanceTimersByTime(500);
|
||||
});
|
||||
|
||||
expect(mockQueryClient.fetchQuery).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,31 +1,84 @@
|
|||
import { useCallback, useRef } from 'react';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useCallback, useRef, useEffect } from 'react';
|
||||
import { useQueryClient } from '@tanstack/react-query';
|
||||
import { QueryKeys, Time, dataService } from 'librechat-data-provider';
|
||||
import { logger } from '~/utils';
|
||||
|
||||
export const useHealthCheck = () => {
|
||||
useQuery([QueryKeys.health], () => dataService.healthCheck(), {
|
||||
refetchInterval: Time.TEN_MINUTES,
|
||||
retry: false,
|
||||
onError: (error) => {
|
||||
console.error('Health check failed:', error);
|
||||
},
|
||||
cacheTime: 0,
|
||||
staleTime: 0,
|
||||
refetchOnWindowFocus: (query) => {
|
||||
if (!query.state.dataUpdatedAt) {
|
||||
return true;
|
||||
export const useHealthCheck = (isAuthenticated = false) => {
|
||||
const queryClient = useQueryClient();
|
||||
const isInitialized = useRef(false);
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
const focusHandlerRef = useRef<(() => Promise<void>) | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
// Only start health check if authenticated
|
||||
if (!isAuthenticated) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevent multiple initializations
|
||||
if (isInitialized.current) {
|
||||
return;
|
||||
}
|
||||
isInitialized.current = true;
|
||||
|
||||
// Use a longer delay to ensure all rendering is complete
|
||||
const initTimer = setTimeout(() => {
|
||||
const performHealthCheck = async () => {
|
||||
try {
|
||||
await queryClient.fetchQuery([QueryKeys.health], () => dataService.healthCheck(), {
|
||||
retry: false,
|
||||
cacheTime: 0,
|
||||
staleTime: 0,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Health check failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Initial check
|
||||
performHealthCheck();
|
||||
|
||||
// Set up interval for recurring checks
|
||||
intervalRef.current = setInterval(performHealthCheck, Time.TEN_MINUTES);
|
||||
|
||||
// Set up window focus handler
|
||||
const handleWindowFocus = async () => {
|
||||
const queryState = queryClient.getQueryState([QueryKeys.health]);
|
||||
|
||||
if (!queryState?.dataUpdatedAt) {
|
||||
await performHealthCheck();
|
||||
return;
|
||||
}
|
||||
|
||||
const lastUpdated = new Date(queryState.dataUpdatedAt);
|
||||
const tenMinutesAgo = new Date(Date.now() - Time.TEN_MINUTES);
|
||||
|
||||
logger.log(`Last health check: ${lastUpdated.toISOString()}`);
|
||||
logger.log(`Ten minutes ago: ${tenMinutesAgo.toISOString()}`);
|
||||
|
||||
if (lastUpdated < tenMinutesAgo) {
|
||||
await performHealthCheck();
|
||||
}
|
||||
};
|
||||
|
||||
// Store handler for cleanup
|
||||
focusHandlerRef.current = handleWindowFocus;
|
||||
window.addEventListener('focus', handleWindowFocus);
|
||||
}, 500);
|
||||
|
||||
return () => {
|
||||
clearTimeout(initTimer);
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
intervalRef.current = null;
|
||||
}
|
||||
|
||||
const lastUpdated = new Date(query.state.dataUpdatedAt);
|
||||
const tenMinutesAgo = new Date(Date.now() - Time.TEN_MINUTES);
|
||||
|
||||
logger.log(`Last health check: ${lastUpdated.toISOString()}`);
|
||||
logger.log(`Ten minutes ago: ${tenMinutesAgo.toISOString()}`);
|
||||
|
||||
return lastUpdated < tenMinutesAgo;
|
||||
},
|
||||
});
|
||||
// Remove focus event listener if it was added
|
||||
if (focusHandlerRef.current) {
|
||||
window.removeEventListener('focus', focusHandlerRef.current);
|
||||
focusHandlerRef.current = null;
|
||||
}
|
||||
};
|
||||
}, [isAuthenticated, queryClient]);
|
||||
};
|
||||
|
||||
export const useInteractionHealthCheck = () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue