@redocly/theme 0.59.0-rc.2 → 0.59.0

package/lib/core/hooks/use-connect-mcp-button.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useConnectMCPButton = useConnectMCPButton;
+const react_1 = require("react");
+const lodash_debounce_1 = __importDefault(require("lodash.debounce"));
+const use_theme_hooks_1 = require("./use-theme-hooks");
+const use_mcp_config_1 = require("./use-mcp-config");
+const clipboard_service_1 = require("../utils/clipboard-service");
+const COPIED_RESET_TIMEOUT = 1000;
+function useConnectMCPButton({ options = ['cursor', 'vscode', 'copy'], } = {}) {
+    const { useTranslate } = (0, use_theme_hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { serverName, serverUrl, cursorUrl, vscodeUrl } = (0, use_mcp_config_1.useMCPConfig)();
+    const [isCopied, setIsCopied] = (0, react_1.useState)(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const resetCopied = (0, react_1.useCallback)((0, lodash_debounce_1.default)(() => setIsCopied(false), COPIED_RESET_TIMEOUT), []);
+    const handleAction = (0, react_1.useCallback)((action) => {
+        if (action === 'copy') {
+            const config = {
+                [serverName]: {
+                    url: serverUrl,
+                    description: 'MCP Server',
+                },
+            };
+            clipboard_service_1.ClipboardService.copyCustom(JSON.stringify(config, null, 2));
+            setIsCopied(true);
+            resetCopied();
+            return;
+        }
+        const urlMap = {
+            cursor: cursorUrl,
+            vscode: vscodeUrl,
+        };
+        window.open(urlMap[action], '_blank');
+    }, [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied]);
+    const triggerButtonText = (0, react_1.useMemo)(() => translate('page.actions.connectMcp', 'Connect MCP'), [translate]);
+    const visibleOptions = (0, react_1.useMemo)(() => options.filter(Boolean), [options]);
+    return {
+        isCopied,
+        cursorUrl,
+        vscodeUrl,
+        triggerButtonText,
+        visibleOptions,
+        handleAction,
+    };
+}
+//# sourceMappingURL=use-connect-mcp-button.js.map

package/lib/core/hooks/use-mcp-config.d.ts

@@ -0,0 +1,9 @@
+export type McpConfig = {
+    serverName: string;
+    origin: string;
+    serverUrl: string;
+    cursorUrl: string;
+    vscodeUrl: string;
+    isMcpDisabled: boolean;
+};
+export declare function useMCPConfig(): McpConfig;

package/lib/core/hooks/use-mcp-config.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMCPConfig = useMCPConfig;
+const react_1 = require("react");
+const use_theme_config_1 = require("./use-theme-config");
+const dom_1 = require("../utils/dom");
+const constants_1 = require("../constants");
+const mcp_1 = require("../utils/mcp");
+function useMCPConfig() {
+    var _a, _b, _c, _d, _e;
+    const themeConfig = (0, use_theme_config_1.useThemeConfig)();
+    const origin = dom_1.IS_BROWSER ? window.location.origin : globalThis['SSR_HOSTNAME'];
+    const serverName = ((_b = (_a = themeConfig.mcp) === null || _a === void 0 ? void 0 : _a.docs) === null || _b === void 0 ? void 0 : _b.name) || constants_1.DEFAULT_MCP_SERVER_NAME;
+    const serverUrl = `${origin}/mcp`;
+    const isMcpDisabled = ((_c = themeConfig.mcp) === null || _c === void 0 ? void 0 : _c.hide) || ((_e = (_d = themeConfig.mcp) === null || _d === void 0 ? void 0 : _d.docs) === null || _e === void 0 ? void 0 : _e.hide) || false;
+    const cursorUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('cursor', { serverName, url: serverUrl }), [serverName, serverUrl]);
+    const vscodeUrl = (0, react_1.useMemo)(() => (0, mcp_1.generateMCPDeepLink)('vscode', { serverName, url: serverUrl }), [serverName, serverUrl]);
+    return {
+        serverName,
+        origin,
+        serverUrl,
+        cursorUrl,
+        vscodeUrl,
+        isMcpDisabled,
+    };
+}
+//# sourceMappingURL=use-mcp-config.js.map

package/lib/core/hooks/use-page-actions.d.ts

@@ -1,3 +1,3 @@
 import type { PageAction } from '../types';
-export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'mcp-cursor' | 'mcp-claude' | 'mcp-json';
+export type PageActionType = 'copy' | 'view' | 'chatgpt' | 'claude' | 'docs-mcp-cursor' | 'docs-mcp-vscode' | 'mcp-cursor' | 'mcp-vscode';
 export declare function usePageActions(pageSlug: string, mcpUrl?: string, actions?: PageActionType[]): PageAction[];

package/lib/core/hooks/use-page-actions.js

@@ -15,13 +15,22 @@ const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const ChatGptIcon_1 = require("../../icons/ChatGptIcon/ChatGptIcon");
 const ClaudeIcon_1 = require("../../icons/ClaudeIcon/ClaudeIcon");
 const MarkdownFullIcon_1 = require("../../icons/MarkdownFullIcon/MarkdownFullIcon");
+const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
+const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
 const use_theme_hooks_1 = require("./use-theme-hooks");
 const use_theme_config_1 = require("./use-theme-config");
+const use_mcp_config_1 = require("./use-mcp-config");
 const clipboard_service_1 = require("../utils/clipboard-service");
 const dom_1 = require("../utils/dom");
-const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
-const DEFAULT_ENABLED_ACTIONS = ['copy', 'view', 'chatgpt', 'claude'];
-const CURSOR_URL = 'cursor://anysphere.cursor-deeplink/mcp/install?name=$NAME&config=$BASE64_ENCODED_CONFIG';
+const mcp_1 = require("../utils/mcp");
+const DEFAULT_ENABLED_ACTIONS = [
+    'copy',
+    'view',
+    'chatgpt',
+    'claude',
+    'docs-mcp-cursor',
+    'docs-mcp-vscode',
+];
 function usePageActions(pageSlug, mcpUrl, actions) {
     var _a, _b, _c;
     const { useTranslate, usePageData, usePageProps, usePageSharedData } = (0, use_theme_hooks_1.useThemeHooks)();
@@ -29,144 +38,115 @@ function usePageActions(pageSlug, mcpUrl, actions) {
     const themeConfig = (0, use_theme_config_1.useThemeConfig)();
     const pageProps = usePageProps();
     const openApiSharedData = usePageSharedData('openAPIDocsStore');
+    const mcpConfig = (0, use_mcp_config_1.useMCPConfig)();
     const shouldHideAllActions = shouldHidePageActions(pageProps, themeConfig, (_a = openApiSharedData === null || openApiSharedData === void 0 ? void 0 : openApiSharedData.options) === null || _a === void 0 ? void 0 : _a.excludeFromSearch);
     const { isPublic } = usePageData() || {};
+    const createMCPHandler = (0, react_1.useCallback)((clientType, requiresMcpUrl = false) => () => {
+        if (requiresMcpUrl && !mcpUrl)
+            return null;
+        if (!requiresMcpUrl && (mcpUrl || mcpConfig.isMcpDisabled))
+            return null;
+        const config = requiresMcpUrl
+            ? { serverName: mcpConfig.serverName, url: mcpUrl || '' }
+            : { serverName: mcpConfig.serverName, url: mcpConfig.serverUrl || '' };
+        return createMCPAction({ clientType, mcpConfig: config, translate });
+    }, [mcpUrl, mcpConfig, translate]);
     const result = (0, react_1.useMemo)(() => {
         var _a, _b;
-        if (shouldHideAllActions && !(actions === null || actions === void 0 ? void 0 : actions.length)) {
+        if (shouldHideAllActions) {
             return [];
         }
         const origin = dom_1.IS_BROWSER ? window.location.origin : globalThis['SSR_HOSTNAME'];
         const normalizedSlug = pageSlug.startsWith('/') ? pageSlug : '/' + pageSlug;
         const mdPageUrl = new URL(origin + normalizedSlug + (normalizedSlug === '/' ? 'index.html.md' : '.md')).toString();
-        function getExternalAiPromptLink(baseUrl) {
-            const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
-            const url = new URL(baseUrl);
-            url.searchParams.set('q', externalAiPrompt);
-            return url.toString();
-        }
-        return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || actions || DEFAULT_ENABLED_ACTIONS)
-            .map((action) => {
-            function generateMCPConfig(isCursor) {
-                const jsonConfig = {
-                    'mcp-server': {
-                        url: mcpUrl,
-                        description: 'MCP Server',
-                    },
-                };
-                if (isCursor) {
-                    const url = CURSOR_URL.replace('$NAME', 'mcp-server').replace('$BASE64_ENCODED_CONFIG', btoa(JSON.stringify(jsonConfig['mcp-server'])));
-                    return url;
-                }
-                return JSON.stringify(jsonConfig, null, 2);
-            }
-            switch (action) {
-                case 'mcp-cursor':
-                    if (!mcpUrl) {
-                        return null;
-                    }
-                    return {
-                        buttonText: translate('page.actions.cursorMcpButtonText', 'Connect to Cursor'),
-                        title: translate('page.actions.cursorMcpTitle', 'Connect to Cursor'),
-                        description: translate('page.actions.cursorMcpDescription', 'Install MCP server on Cursor'),
-                        iconComponent: CursorIcon_1.CursorIcon,
-                        onClick: () => {
-                            try {
-                                const url = generateMCPConfig(true);
-                                window.open(url, '_blank');
-                            }
-                            catch (error) {
-                                console.error(error);
-                            }
-                        },
-                    };
-                case 'mcp-claude':
-                    if (!mcpUrl) {
-                        return null;
-                    }
-                    return {
-                        buttonText: 'Copy Claude configuration',
-                        title: 'Copy Claude configuration',
-                        description: 'Copy MCP configuration for Claude',
-                        iconComponent: ClaudeIcon_1.ClaudeIcon,
-                        onClick: () => __awaiter(this, void 0, void 0, function* () {
-                            clipboard_service_1.ClipboardService.copyCustom(`claude mcp add --transport http server ${mcpUrl}`);
-                        }),
-                    };
-                case 'mcp-json':
-                    return {
-                        buttonText: 'Copy MCP configuration',
-                        title: 'Copy MCP JSON configuration',
-                        description: 'Copy MCP JSON configuration',
-                        iconComponent: CopyIcon_1.CopyIcon,
-                        onClick: () => __awaiter(this, void 0, void 0, function* () {
-                            clipboard_service_1.ClipboardService.copyCustom(generateMCPConfig());
-                        }),
-                    };
-                case 'copy':
-                    return {
-                        buttonText: translate('page.actions.copyButtonText', 'Copy'),
-                        title: translate('page.actions.copyTitle', 'Copy for LLM'),
-                        description: translate('page.actions.copyDescription', 'Copy page as Markdown for LLMs'),
-                        iconComponent: CopyIcon_1.CopyIcon,
-                        onClick: () => __awaiter(this, void 0, void 0, function* () {
-                            try {
-                                const result = yield fetch(mdPageUrl);
-                                if (result.status !== 200) {
-                                    throw new Error('Failed to fetch markdown content');
-                                }
-                                const text = yield result.text();
-                                clipboard_service_1.ClipboardService.copyCustom(text);
-                            }
-                            catch (error) {
-                                console.error(error);
-                            }
-                        }),
-                    };
-                case 'view':
-                    return {
-                        buttonText: translate('page.actions.viewAsMdButtonText', 'View as Markdown'),
-                        title: translate('page.actions.viewAsMdTitle', 'View as Markdown'),
-                        description: translate('page.actions.viewAsMdDescription', 'Open this page as Markdown'),
-                        iconComponent: MarkdownFullIcon_1.MarkdownFullIcon,
-                        link: mdPageUrl,
-                    };
-                case 'chatgpt':
-                    if (!isPublic) {
-                        return null;
+        const actionHandlers = {
+            'docs-mcp-cursor': createMCPHandler('cursor'),
+            'docs-mcp-vscode': createMCPHandler('vscode'),
+            'mcp-cursor': createMCPHandler('cursor', true),
+            'mcp-vscode': createMCPHandler('vscode', true),
+            copy: () => ({
+                buttonText: translate('page.actions.copyButtonText', 'Copy'),
+                title: translate('page.actions.copyTitle', 'Copy for LLM'),
+                description: translate('page.actions.copyDescription', 'Copy page as Markdown for LLMs'),
+                iconComponent: CopyIcon_1.CopyIcon,
+                onClick: () => __awaiter(this, void 0, void 0, function* () {
+                    try {
+                        const result = yield fetch(mdPageUrl);
+                        if (result.status !== 200) {
+                            return;
+                        }
+                        const text = yield result.text();
+                        clipboard_service_1.ClipboardService.copyCustom(text);
                     }
-                    return {
-                        buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
-                        title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
-                        description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
-                        iconComponent: ChatGptIcon_1.ChatGptIcon,
-                        link: getExternalAiPromptLink('https://chat.openai.com'),
-                    };
-                case 'claude':
-                    if (!isPublic) {
-                        return null;
+                    catch (error) {
+                        console.error(error);
                     }
-                    return {
-                        buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
-                        title: translate('page.actions.claudeTitle', 'Open in Claude'),
-                        description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
-                        iconComponent: ClaudeIcon_1.ClaudeIcon,
-                        link: getExternalAiPromptLink('https://claude.ai/new'),
-                    };
-            }
-        })
+                }),
+            }),
+            view: () => ({
+                buttonText: translate('page.actions.viewAsMdButtonText', 'View as Markdown'),
+                title: translate('page.actions.viewAsMdTitle', 'View as Markdown'),
+                description: translate('page.actions.viewAsMdDescription', 'Open this page as Markdown'),
+                iconComponent: MarkdownFullIcon_1.MarkdownFullIcon,
+                link: mdPageUrl,
+            }),
+            chatgpt: () => {
+                if (!isPublic) {
+                    return null;
+                }
+                return {
+                    buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
+                    title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
+                    description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
+                    iconComponent: ChatGptIcon_1.ChatGptIcon,
+                    link: getExternalAiPromptLink('https://chat.openai.com', mdPageUrl),
+                };
+            },
+            claude: () => {
+                if (!isPublic) {
+                    return null;
+                }
+                return {
+                    buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
+                    title: translate('page.actions.claudeTitle', 'Open in Claude'),
+                    description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
+                    iconComponent: ClaudeIcon_1.ClaudeIcon,
+                    link: getExternalAiPromptLink('https://claude.ai/new', mdPageUrl),
+                };
+            },
+        };
+        return (((_b = (_a = themeConfig.navigation) === null || _a === void 0 ? void 0 : _a.actions) === null || _b === void 0 ? void 0 : _b.items) || actions || DEFAULT_ENABLED_ACTIONS)
+            .map((action) => { var _a; return (_a = actionHandlers[action]) === null || _a === void 0 ? void 0 : _a.call(actionHandlers); })
             .filter((action) => action !== null);
     }, [
         shouldHideAllActions,
         pageSlug,
         (_c = (_b = themeConfig.navigation) === null || _b === void 0 ? void 0 : _b.actions) === null || _c === void 0 ? void 0 : _c.items,
         actions,
-        mcpUrl,
         translate,
         isPublic,
+        createMCPHandler,
     ]);
     return result;
 }
+function getExternalAiPromptLink(baseUrl, mdPageUrl) {
+    const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
+    const url = new URL(baseUrl);
+    url.searchParams.set('q', externalAiPrompt);
+    return url.toString();
+}
+function createMCPAction({ clientType, mcpConfig, translate }) {
+    const url = (0, mcp_1.generateMCPDeepLink)(clientType, mcpConfig);
+    const sharedProps = {
+        onClick: () => {
+            window.open(url, '_blank');
+        },
+    };
+    if (clientType === 'cursor') {
+        return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'), title: translate('page.actions.connectMcp.cursor', 'Connect to Cursor'), description: translate('page.actions.connectMcp.cursorDescription', 'Install MCP server on Cursor'), iconComponent: CursorIcon_1.CursorIcon });
+    }
+    return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), description: translate('page.actions.connectMcp.vscodeDescription', 'Install MCP server on VS Code'), iconComponent: VSCodeIcon_1.VSCodeIcon });
+}
 function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch) {
     var _a, _b, _c, _d, _e, _f;
     // Can't use any actions if no markdown files are generated for LLMs

package/lib/core/hooks/use-product-picker.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useProductPicker = useProductPicker;
 const react_router_dom_1 = require("react-router-dom");
 const use_theme_hooks_1 = require("./use-theme-hooks");
+const utils_1 = require("../utils");
 function useProductPicker() {
     const { useCurrentProduct, useProducts, useTelemetry, useLoadAndNavigate } = (0, use_theme_hooks_1.useThemeHooks)();
     const currentProduct = useCurrentProduct();
@@ -14,7 +15,7 @@ function useProductPicker() {
         if (!product)
             return;
         telemetry.sendProductPickedMessage({ product: product.slug });
-        loadAndNavigate({ navigate, to: product.link });
+        loadAndNavigate({ navigate, to: (0, utils_1.withPathPrefix)(product.link) });
     }
     return {
         currentProduct,

package/lib/core/hooks/use-tabs.d.ts

@@ -4,18 +4,19 @@ type UseTabsProps = {
     totalTabs: number;
     containerRef?: React.RefObject<HTMLElement | null>;
 };
-export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef }: UseTabsProps): {
+type UseTabsReturn = {
     setTabRef: (element: HTMLButtonElement | null, index: number) => void;
     onTabClick: (labelOrIndex: string | number) => void;
     handleKeyboard: (event: React.KeyboardEvent, index: number) => void;
     visibleTabs: number[];
     overflowTabs: number[];
-    allTabsHidden: boolean;
+    isReady: boolean;
 };
 type UseActiveTabProps = {
     initialTab: string;
     tabsId?: string;
 };
+export declare function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }: UseTabsProps): UseTabsReturn;
 export declare const useActiveTab: ({ initialTab, tabsId }: UseActiveTabProps) => {
     activeTab: string;
     setActiveTab: import("react").Dispatch<import("react").SetStateAction<string>>;