feat: implement useMCPSelect hook for managing MCP selection state, refactor MCPSelect component to utilize new hook

client/src/hooks/Plugins/index.ts

@@ -1,6 +1,7 @@
+export * from './useMCPSelect';
+export * from './useToolToggle';
 export { default as useAuthCodeTool } from './useAuthCodeTool';
 export { default as usePluginInstall } from './usePluginInstall';
 export { default as useCodeApiKeyForm } from './useCodeApiKeyForm';
 export { default as useSearchApiKeyForm } from './useSearchApiKeyForm';
 export { default as usePluginDialogHelpers } from './usePluginDialogHelpers';
-export { useToolToggle } from './useToolToggle';

client/src/hooks/Plugins/useMCPSelect.ts

@@ -0,0 +1,85 @@
+import { useRef, useEffect, useCallback, useMemo } from 'react';
+import { useRecoilState } from 'recoil';
+import { Constants, LocalStorageKeys } from 'librechat-data-provider';
+import useLocalStorage from '~/hooks/useLocalStorageAlt';
+import { ephemeralAgentByConvoId } from '~/store';
+
+const storageCondition = (value: unknown, rawCurrentValue?: string | null) => {
+  if (rawCurrentValue) {
+    try {
+      const currentValue = rawCurrentValue?.trim() ?? '';
+      if (currentValue.length > 2) {
+        return true;
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  return Array.isArray(value) && value.length > 0;
+};
+
+interface UseMCPSelectOptions {
+  conversationId?: string | null;
+  mcpToolDetails?: Array<{ name: string }> | null;
+  isFetched: boolean;
+}
+
+export function useMCPSelect({ conversationId, mcpToolDetails, isFetched }: UseMCPSelectOptions) {
+  const key = conversationId ?? Constants.NEW_CONVO;
+  const hasSetFetched = useRef<string | null>(null);
+  const [ephemeralAgent, setEphemeralAgent] = useRecoilState(ephemeralAgentByConvoId(key));
+
+  const mcpState = useMemo(() => {
+    return ephemeralAgent?.mcp ?? [];
+  }, [ephemeralAgent?.mcp]);
+
+  const setSelectedValues = useCallback(
+    (values: string[] | null | undefined) => {
+      if (!values) {
+        return;
+      }
+      if (!Array.isArray(values)) {
+        return;
+      }
+      setEphemeralAgent((prev) => ({
+        ...prev,
+        mcp: values,
+      }));
+    },
+    [setEphemeralAgent],
+  );
+
+  const [mcpValues, setMCPValues] = useLocalStorage<string[]>(
+    `${LocalStorageKeys.LAST_MCP_}${key}`,
+    mcpState,
+    setSelectedValues,
+    storageCondition,
+  );
+
+  useEffect(() => {
+    if (hasSetFetched.current === key) {
+      return;
+    }
+    if (!isFetched) {
+      return;
+    }
+    hasSetFetched.current = key;
+    if ((mcpToolDetails?.length ?? 0) > 0) {
+      setMCPValues(mcpValues.filter((mcp) => mcpToolDetails?.some((tool) => tool.name === mcp)));
+      return;
+    }
+    setMCPValues([]);
+  }, [isFetched, setMCPValues, mcpToolDetails, key, mcpValues]);
+
+  const mcpServerNames = useMemo(() => {
+    return (mcpToolDetails ?? []).map((tool) => tool.name);
+  }, [mcpToolDetails]);
+
+  return {
+    mcpValues,
+    setMCPValues,
+    mcpServerNames,
+    ephemeralAgent,
+    setEphemeralAgent,
+  };
+}