mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-09-22 06:00:56 +02:00
c0511b9a5f
* refactor: useMCPSelect
- Add useGetMCPTools to use in useMCPSelect and elsewhere hooks for fetching MCP tools
- remove memoized key
- remove use of `useChatContext` and require conversationId as prop
* feat: Add MCPPanelContext and integrate conversationId as prop for useMCPSelect across components
- Introduced MCPPanelContext to manage conversationId state.
- Updated MCPSelect, MCPSubMenu, and MCPConfigDialog to accept conversationId as a prop.
- Modified ToolsDropdown and BadgeRow to pass conversationId to relevant components.
- Refactored MCPPanel to utilize MCPPanelProvider for context management.
* fix: remove nested ternary in ServerInitializationSection
- Replaced conditional operator with if-else statements for better readability in determining button text based on server initialization state and reinitialization status.
* refactor: wrap setValueWrap in useCallback for performance optimization
* refactor: streamline useMCPSelect by consolidating storageKey definition
* fix: prevent clearing selections on page refresh by tracking initial load completion
* refactor: simplify concern of useMCPSelect hook
* refactor: move ConfigFieldDetail interface to common types for better reusability, isolate usage of `useGetMCPTools`
* refactor: integrate mcpServerNames into BadgeRowContext and update ToolsDropdown and MCPSelect components
72 lines
2 KiB
TypeScript
72 lines
2 KiB
TypeScript
/* `useLocalStorage`
|
|
*
|
|
* Features:
|
|
* - JSON Serializing
|
|
* - Also value will be updated everywhere, when value updated (via `storage` event)
|
|
*/
|
|
|
|
import { useEffect, useState, useCallback } from 'react';
|
|
|
|
export default function useLocalStorage<T>(
|
|
key: string,
|
|
defaultValue: T,
|
|
globalSetState?: (value: T) => void,
|
|
storageCondition?: (value: T, rawCurrentValue?: string | null) => boolean,
|
|
): [T, (value: T) => void] {
|
|
const [value, setValue] = useState(defaultValue);
|
|
|
|
useEffect(() => {
|
|
const item = localStorage.getItem(key);
|
|
|
|
if (!item && !storageCondition) {
|
|
localStorage.setItem(key, JSON.stringify(defaultValue));
|
|
} else if (!item && storageCondition && storageCondition(defaultValue)) {
|
|
localStorage.setItem(key, JSON.stringify(defaultValue));
|
|
}
|
|
|
|
const initialValue = item && item !== 'undefined' ? JSON.parse(item) : defaultValue;
|
|
setValue(initialValue);
|
|
if (globalSetState) {
|
|
globalSetState(initialValue);
|
|
}
|
|
|
|
function handler(e: StorageEvent) {
|
|
if (e.key !== key) {
|
|
return;
|
|
}
|
|
|
|
const lsi = localStorage.getItem(key);
|
|
setValue(JSON.parse(lsi ?? ''));
|
|
}
|
|
|
|
window.addEventListener('storage', handler);
|
|
|
|
return () => {
|
|
window.removeEventListener('storage', handler);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [key, globalSetState]);
|
|
|
|
const setValueWrap = useCallback(
|
|
(value: T) => {
|
|
try {
|
|
setValue(value);
|
|
const storeLocal = () => {
|
|
localStorage.setItem(key, JSON.stringify(value));
|
|
window?.dispatchEvent(new StorageEvent('storage', { key }));
|
|
};
|
|
if (!storageCondition) {
|
|
storeLocal();
|
|
} else if (storageCondition(value, localStorage.getItem(key))) {
|
|
storeLocal();
|
|
}
|
|
globalSetState?.(value);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
},
|
|
[key, globalSetState, storageCondition],
|
|
);
|
|
|
|
return [value, setValueWrap];
|
|
}
|