@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

package/src/components/Tag/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const tag = css`
   /**
     * @tokens Tag borders
@@ -16,6 +17,7 @@ export const tag = css`
   --tag-badge-border-width: 2px;
   --tag-badge-border-color: var(--border-color-secondary); // @presenter Color
   --tag-border-color-focused: var(--color-blue-4); // @presenter Color
+  --tag-close-button-bg-color-focus: var(--color-warm-grey-4); // @presenter Color
 
   /**
     * @tokens Tag spacing
@@ -62,6 +64,7 @@ export const tag = css`
   --tag-icon-width: 14px; // @presenter Spacing
   --tag-icon-height: 14px; // @presenter Spacing
 
+
   /**
     * @tokens Tag colors
     */
@@ -157,8 +160,7 @@ export const tag = css`
     --tag-border-color-hover: var(--color-info-border-hover); // @presenter Color
   }
 
-  .tag-purple,
-  .tag-head {
+  .tag-purple {
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-4); // @presenter Color
@@ -269,110 +271,133 @@ export const tag = css`
     * @tokens Operation tag colors
     */
 
-  --tag-operation-color-delete: #e70b46; // @presenter Color
-  --tag-operation-bg-color-delete: #fee2e9; // @presenter Color
-  
-  --tag-operation-color-get: #25b869; // @presenter Color
-  --tag-operation-bg-color-get: #e5faef; // @presenter Color
-  
-  --tag-operation-color-post: #1e65f5; // @presenter Color
-  --tag-operation-bg-color-post: #e2ebfe; // @presenter Color
-  
-  --tag-operation-color-put: #f5901d; // @presenter Color
-  --tag-operation-bg-color-put: #fef1e2; // @presenter Color
-  
-  --tag-operation-color-patch: #f5c31d; // @presenter Color
-  --tag-operation-bg-color-patch: #fdf6dd; // @presenter Color
-
-  --tag-operation-color-head: #5b4ccc; // @presenter Color
-  --tag-operation-bg-color-head: #e6e1fe; // @presenter Color
-
-  --tag-operation-color-options: #1a1c21; // @presenter Color
-  --tag-operation-bg-color-options: #ededf2; // @presenter Color
-  
-  --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
-
-  --tag-action-color-receive: #4db144; // @presenter Color
-  --tag-action-color-sub: #4db144; // @presenter Color
-  --tag-action-color-cons: #4db144; // @presenter Color
-
-  --tag-action-color-send: #4144f6; // @presenter Color
-  --tag-action-color-pub: #4144f6; // @presenter Color
-  --tag-action-color-publish: #4144f6; // @presenter Color
-
-  --tag-action-color-channel: #F0870E; // @presenter Color
-  --tag-action-color-topic: #F0870E; // @presenter Color
-  --tag-action-color-queue: #D72E81; // @presenter Color
-  --tag-action-color-exchange: #9B51E0; // @presenter Color
+  .tag-head {
+    --tag-color: #6355CA; // @presenter Color
+    --tag-bg-color: #ECEBFA; // @presenter Color
+    --tag-bg-color-hover: #E0DEF7; // @presenter Color
+  }
 
   .tag-delete {
-      --tag-color: var(--tag-operation-color-delete); // @presenter Color
+    --tag-color: #e70b46; // @presenter Color
+    --tag-bg-color: #fee2e9; // @presenter Color
+    --tag-bg-color-hover: #fdd3dd; // @presenter Color
   }
 
   .tag-get {
-      --tag-color: var(--tag-operation-color-get); // @presenter Color
+    --tag-color: #25b869; // @presenter Color
+    --tag-bg-color: #e5faef; // @presenter Color
+    --tag-bg-color-hover: #D4F7E5; // @presenter Color
   }
 
   .tag-post {
-      --tag-color: var(--tag-operation-color-post); // @presenter Color
+    --tag-color: #1e65f5; // @presenter Color
+    --tag-bg-color: #e2ebfe; // @presenter Color
+    --tag-bg-color-hover: #CEDDFD; // @presenter Color
   }
 
   .tag-put {
-      --tag-color: var(--tag-operation-color-put); // @presenter Color
+    --tag-color: #f5901d; // @presenter Color
+    --tag-bg-color: #fef1e2; // @presenter Color
+    --tag-bg-color-hover: #FDE2C4; // @presenter Color
   }
-  
+
   .tag-patch {
-      --tag-color: var(--tag-operation-color-patch); // @presenter Color
+    --tag-color: #f5c31d; // @presenter Color
+    --tag-bg-color: #fdf6dd; // @presenter Color
+    --tag-bg-color-hover: #FCF0C5; // @presenter Color
   }
 
   .tag-http-deprecated {
-      --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
+    --tag-color: var(--text-color-disabled); // @presenter Color
   }
-  
-  .tag-receive {
-      --tag-color: var(--tag-action-color-receive); // @presenter Color
+
+  .tag-http-additional-operation {
+    --tag-color: #F97316; // @presenter Color
+    --tag-bg-color: #faede3; // @presenter Color
+    --tag-bg-color-hover: #fae2cf; // @presenter Color
   }
 
   .tag-send {
-      --tag-color: var(--tag-action-color-send); // @presenter Color
+    --tag-color: #4144F6; // @presenter Color
+    --tag-bg-color: #ECECFE; // @presenter Color
+    --tag-bg-color-hover: #CFCFFC; // @presenter Color
   }
 
   .tag-pub {
-      --tag-color: var(--tag-action-color-pub); // @presenter Color
+    --tag-color: #4144F6; // @presenter Color
+    --tag-bg-color: #ECECFE; // @presenter Color
+    --tag-bg-color-hover: #CFCFFC; // @presenter Color
   }
 
-  .tag-sub {
-      --tag-color: var(--tag-action-color-sub); // @presenter Color
+  .tag-publish {
+    --tag-color: #4144F6; // @presenter Color
+    --tag-bg-color: #ECECFE; // @presenter Color
+    --tag-bg-color-hover: #CFCFFC; // @presenter Color
   }
 
-  .tag-cons {
-      --tag-color: var(--tag-action-color-cons); // @presenter Color
+  .tag-receive {
+    --tag-color: #4db144; // @presenter Color
+    --tag-bg-color:  #E5FDE2; // @presenter Color
+    --tag-bg-color-hover: #D4FCCF; // @presenter Color
   }
 
-  .tag-publish {
-      --tag-color: var(--tag-action-color-publish); // @presenter Color
+  .tag-sub {
+    --tag-color: #4db144; // @presenter Color
+    --tag-bg-color:  #E5FDE2; // @presenter Color
+    --tag-bg-color-hover: #D4FCCF; // @presenter Color
+  }
+
+  .tag-cons {
+    --tag-color: #4db144; // @presenter Color
+    --tag-bg-color:  #E5FDE2; // @presenter Color
+    --tag-bg-color-hover: #D4FCCF; // @presenter Color
   }
 
   .tag-channel {
-      --tag-color: var(--tag-action-color-channel); // @presenter Color
+    --tag-color: #F0870E; // @presenter Color
+    --tag-bg-color: #FDF1E2; // @presenter Color
+    --tag-bg-color-hover: #FBE1C1; // @presenter Color
   }
 
   .tag-topic {
-      --tag-color: var(--tag-action-color-channel); // @presenter Color
+    --tag-color: #F0870E; // @presenter Color
+    --tag-bg-color: #FDF1E2; // @presenter Color
+    --tag-bg-color-hover: #FBE1C1; // @presenter Color
   }
 
   .tag-queue {
-      --tag-color: var(--tag-action-color-queue); // @presenter Color
+    --tag-color: #D72E81; // @presenter Color
+    --tag-bg-color: #FAE5F0; // @presenter Color
+    --tag-bg-color-hover: #F7D4E6; // @presenter Color
   }
 
   .tag-exchange {
-      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+    --tag-color: #9B51E0; // @presenter Color
+    --tag-bg-color: #F0E5FA; // @presenter Color
+    --tag-bg-color-hover: #E6D4F7; // @presenter Color
   }
       
   // shorten alias for exchange tag:
   .tag-exch {
-      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+    --tag-color: #9B51E0; // @presenter Color
+    --tag-bg-color: #F0E5FA; // @presenter Color
+    --tag-bg-color-hover: #E6D4F7; // @presenter Color
+  }
+
+  /**
+    * @tokens Tag variants
+    */
+
+  .tag-variant-filled {
+    --tag-border-color: transparent;
+    --tag-border-color-hover: transparent;
+  }
+
+  .tag-variant-outline {
+    --tag-bg-color: transparent;
+    --tag-bg-color-hover: transparent;
   }
       
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Tooltip/Tooltip.tsx

@@ -259,7 +259,7 @@ const TooltipWrapper = styled.div`
   position: relative;
   display: flex;
 `;
-
+/* eslint-disable theme/no-raw-colors-in-styles */
 const TooltipBody = styled.span<
   Pick<Required<TooltipProps>, 'placement' | 'withArrow' | 'arrowPosition'> & { width?: string }
 >`
@@ -302,3 +302,4 @@ const TooltipBody = styled.span<
     ${PLACEMENTS[placement]};
   `}
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/VersionPicker/VersionPicker.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 
 import type { Version } from '@redocly/config';
-import type { SelectProps } from '@redocly/theme/core/types/select';
+import type { SelectProps } from '@redocly/theme/core/types';
 
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { Select } from '@redocly/theme/components/Select/Select';
@@ -58,6 +58,7 @@ export function VersionPicker(props: { versions?: Version[]; onChange: (v: Versi
           'aria-label': translate('versionPicker.label', 'Select version'),
         }}
       />
+      {/* eslint-disable-next-line theme/require-translate */}
       <SrOnly id="version-picker-description">
         This is version picker select, using it you can select a version of the API.
       </SrOnly>

package/src/config.ts

@@ -8,6 +8,7 @@ import type {
   RudderstackAnalyticsConfig,
   GtmAnalyticsConfig,
   ScorecardConfig,
+  ScorecardsConfig,
   ProductGoogleAnalyticsConfig,
   ProductThemeOverrideConfig,
   ProductUiConfig,
@@ -27,6 +28,7 @@ export type {
   RudderstackAnalyticsConfig,
   GtmAnalyticsConfig,
   ScorecardConfig,
+  ScorecardsConfig,
   ProductGoogleAnalyticsConfig,
   ProductThemeOverrideConfig,
   ProductUiConfig,

package/src/core/constants/index.ts

@@ -4,3 +4,5 @@ export * from './code-walkthrough';
 export * from './search';
 export * from './catalog';
 export * from './breadcrumb';
+export * from './request-methods';
+export * from './mcp';

package/src/core/constants/mcp.ts

@@ -0,0 +1 @@
+export const DEFAULT_MCP_SERVER_NAME = 'mcp-server';

package/src/core/constants/request-methods.ts

@@ -0,0 +1,10 @@
+export const REQUEST_METHODS = [
+  'GET',
+  'POST',
+  'PUT',
+  'DELETE',
+  'PATCH',
+  'OPTIONS',
+  'HEAD',
+  'TRACE',
+];

package/src/core/constants/search.ts

@@ -7,10 +7,14 @@ export enum AiSearchError {
   EmptyResponse = 'empty_response',
   ErrorProcessingResponse = 'error_processing_response',
 }
-export const enum AiSearchConversationRole {
-  USER = 'user',
-  ASSISTANT = 'assistant',
-}
+
+export const AiSearchConversationRole = {
+  USER: 'user',
+  ASSISTANT: 'assistant',
+} as const;
+
+export type AiSearchConversationRole =
+  (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
 
 const defaultErrorConfig: AiSearchErrorConfig = {
   headerKey: 'search.ai.error.header',

package/src/core/hoc/index.ts

@@ -1 +1 @@
-export * from './typedMemo';
+export * from './typed-memo';

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -2,10 +2,10 @@ import { vi } from 'vitest';
 
 export const useThemeHooks = vi.fn(() => ({
   useTranslate: vi.fn(() => ({
-    translate: vi.fn((key: string, defaultValue: string) =>
+    translate: vi.fn((key: string, defaultValue: string | { defaultValue: string }) =>
       defaultValue
         ? typeof defaultValue !== 'string'
-          ? (defaultValue as any).defaultValue
+          ? (defaultValue as { defaultValue: string }).defaultValue
           : defaultValue
         : key,
     ),

package/src/core/hooks/__tests__/mocks/mock-intersection-observer.ts

@@ -3,8 +3,8 @@ export class MockIntersectionObserver {
   public readonly rootMargin: string;
   public readonly thresholds: ReadonlyArray<number>;
 
-  private viewPort: any;
-  private entries: any[];
+  private viewPort: Element | Document | Window;
+  private entries: Array<Partial<IntersectionObserverEntry> & { target: HTMLElement }>;
   private readonly callback: IntersectionObserverCallback;
 
   constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
@@ -19,10 +19,11 @@ export class MockIntersectionObserver {
   }
 
   private intersect = () => {
-    this.entries.map((entry) => {
-      entry.isIntersecting = this.isInViewPort(entry.target);
-    });
-    this.callback(this.entries, this);
+    this.entries = this.entries.map((entry) => ({
+      ...entry,
+      isIntersecting: this.isInViewPort(entry.target),
+    }));
+    this.callback(this.entries as IntersectionObserverEntry[], this);
   };
 
   isInViewPort(target: HTMLElement): boolean {
@@ -42,7 +43,7 @@ export class MockIntersectionObserver {
     this.entries = [];
   }
 
-  takeRecords(): any[] {
-    return this.entries;
+  takeRecords(): IntersectionObserverEntry[] {
+    return this.entries as IntersectionObserverEntry[];
   }
 }

package/src/core/hooks/catalog/{useCatalogEntitySchema.ts → use-catalog-entity-schema.ts}

@@ -16,17 +16,17 @@ export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntityS
     parsedSchema = undefined;
   }
 
-  let parsedApiDefinition: any | undefined;
+  let parsedApiDefinition: Record<string, unknown> | undefined;
 
   try {
     parsedApiDefinition = relatedEntity?.metadata?.schema
-      ? JSON.parse(relatedEntity.metadata.schema)
+      ? (JSON.parse(relatedEntity.metadata.schema) as Record<string, unknown>)
       : undefined;
   } catch (err) {
     parsedApiDefinition = undefined;
   }
 
-  const definition: any =
+  const definition: Record<string, unknown> =
     !parsedApiDefinition || relatedEntity?.metadata?.specType !== 'openapi'
       ? {
           openapi: '3.0.0',

package/src/core/hooks/catalog/{useGraph.ts → use-graph.ts}

@@ -42,7 +42,7 @@ type EntityGraphData = {
   key: string;
 };
 
-// TODO: This isn't final implementation, leaved comments for future reference.
+// Note: This isn't final implementation, leaved comments for future reference.
 export function useGraph({ entity, relations }: UseGraphProps): UseGraphReturn {
   const rootNodeId = entity.id;
 

package/src/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.ts

@@ -18,7 +18,7 @@ export class MockIntersectionObserver {
     this.disconnect = vi.fn();
   }
 
-  takeRecords(): any[] {
+  takeRecords(): IntersectionObserverEntry[] {
     return [];
   }
 }

package/src/core/hooks/code-walkthrough/__mocks__/mock-intersection-observer.ts

@@ -0,0 +1,24 @@
+import { vi } from 'vitest';
+
+export class MockIntersectionObserver {
+  public readonly root: Element | Document | null;
+  public readonly rootMargin: string;
+  public readonly thresholds: ReadonlyArray<number>;
+  observe: (target: HTMLElement) => void;
+  unobserve: (target: HTMLElement) => void;
+  disconnect: () => void;
+
+  // @ts-ignore
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+    this.root = null;
+    this.rootMargin = '0px';
+    this.thresholds = [1];
+    this.observe = vi.fn();
+    this.unobserve = vi.fn();
+    this.disconnect = vi.fn();
+  }
+
+  takeRecords(): IntersectionObserverEntry[] {
+    return [];
+  }
+}

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -211,6 +211,7 @@ export function useCodeWalkthroughControls(
         continue;
       }
 
+      // eslint-disable-next-line no-warning-comments
       // code-walk-todo: need to check if we have a default fallback
       const items = Array.isArray(filter?.items) ? filter.items : [];
 

package/src/core/hooks/code-walkthrough/use-code-walkthrough-steps.ts

@@ -299,7 +299,7 @@ type StepsGroup = {
   freeSpace: number;
   usedSpace: number;
   offset: number;
-  steps: { offset: number; height: number }[];
+  steps: { offset: number; height: number; ref?: HTMLElement }[];
 };
 /**
  * This function analyzes the offset and height of each step to determine
@@ -358,7 +358,7 @@ function getGroups(steps: CodeWalkthroughStep[]): StepsGroup[] {
       offset: stepOffset - currentGroup.offset,
       height: stepHeight,
       ref: step.compRef,
-    } as any);
+    });
     currentGroup.usedSpace += stepHeight + margin;
   }
 

package/src/core/hooks/code-walkthrough/use-renderable-files.ts

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import type { CodeWalkthroughFile } from '@redocly/config';
 
 import { findClosestCommonDirectory } from '../../utils/find-closest-common-directory';
-import { getFileIconByExt } from '../../utils/get-file-icon';
+import { getFileIconByExt } from '../../utils/GetFileIcon';
 import { removeLeadingSlash } from '../../utils/urls';
 
 export type RenderableFile = CodeWalkthroughFile & {

package/src/core/hooks/index.ts

@@ -26,6 +26,7 @@ export * from './use-language-picker';
 export * from './use-product-picker';
 export * from './search/use-search-dialog';
 export * from './search/use-search-filter';
+export * from './search/use-feedback-tooltip';
 export * from './use-controlled-state';
 export * from './use-codeblock-tabs-controls';
 export * from './code-walkthrough/use-code-walkthrough';
@@ -36,9 +37,14 @@ export * from './code-walkthrough/use-renderable-files';
 export * from './use-element-size';
 export * from './use-time-ago';
 export * from './use-input-key-commands';
-export * from './catalog/useCatalogEntities';
-export * from './catalog/useGraph';
+export * from './catalog/use-catalog-entities';
+export * from './catalog/use-graph';
 export * from './use-active-page-version';
 export * from './use-page-versions';
 export * from './use-user-teams';
 export * from './use-page-actions';
+export * from './use-mcp-config';
+export * from './use-connect-mcp-button';
+export * from './catalog/use-catalog-table-view-row';
+export * from './catalog/use-catalog-entity-schema';
+export * from './catalog/use-catalog-table-header-cell-actions';

package/src/core/hooks/menu/use-collapse.ts

@@ -199,13 +199,13 @@ function setStyles<T extends Partial<CSSStyleDeclaration>>(
     }
   }
 }
-
-export function useEvent<T extends (...args: any[]) => any>(callback?: T) {
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export function useEvent<T extends (...args: any[]) => any>(callback?: T): T {
   const ref = useRef<T | undefined>(callback);
 
   useEffect(() => {
     ref.current = callback;
   });
 
-  return useCallback(((...args: any) => ref.current?.(...args)) as T, []);
+  return useCallback(((...args: Parameters<T>) => ref.current?.(...args)) as T, []);
 }

package/src/core/hooks/menu/use-mobile-menu-items.ts

@@ -42,6 +42,7 @@ export const useMobileMenuItems = (menuType: MobileMenuType) => {
 
   if (menuType === MobileMenuType.PAGE) {
     if (activeVersion) {
+      // eslint-disable-next-line no-warning-comments
       // TODO: consider to refactor
       const versionsSection = buildVersionSection(translate, versions, activeVersion);
       menuItems.push(...versionsSection);

package/src/core/hooks/menu/use-nested-menu.ts

@@ -6,7 +6,7 @@ import type { MenuItemProps } from '../../types/sidebar';
 import { useMenuItemExpanded } from './use-menu-item-expanded';
 import { useCollapse } from './use-collapse';
 import { loadAndNavigate } from '../../utils/load-and-navigate';
-import { withoutPathPrefix } from '../../utils/urls';
+import { withoutPathPrefix, withPathPrefix } from '../../utils/urls';
 
 type NestedMenuProps = MenuItemProps & {
   labelRef?: React.RefObject<HTMLElement | null>;
@@ -78,7 +78,7 @@ export function useNestedMenu({ item, labelRef, nestedMenuRef }: NestedMenuProps
 
     const [firstChild] = item.items;
     if (!isExpanded && item.selectFirstItemOnExpand && firstChild.link) {
-      await loadAndNavigate({ navigate, to: firstChild.link });
+      await loadAndNavigate({ navigate, to: withPathPrefix(firstChild.link) });
     }
     setIsExpanded(!isExpanded);
   }, [item, isExpanded, navigate, location.pathname, setIsExpanded]);

package/src/core/hooks/search/use-feedback-tooltip.ts

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import { useControl } from '../use-control';
+
+type UseFeedbackTooltipReturn = {
+  isOpen: boolean;
+  showTooltip: () => void;
+};
+
+const DEFAULT_TOOLTIP_DURATION = 1500;
+
+export function useFeedbackTooltip(): UseFeedbackTooltipReturn {
+  const [closeTooltipTimeout, setCloseTooltipTimeout] = useState<NodeJS.Timeout | null>(null);
+  const tooltipControl = useControl();
+
+  const showTooltip = () => {
+    tooltipControl.handleOpen();
+    if (closeTooltipTimeout) {
+      clearTimeout(closeTooltipTimeout);
+    }
+    const newCloseTooltipTimeout = setTimeout(() => {
+      tooltipControl.handleClose();
+      setCloseTooltipTimeout(null);
+    }, DEFAULT_TOOLTIP_DURATION);
+    setCloseTooltipTimeout(newCloseTooltipTimeout);
+  };
+
+  return {
+    isOpen: tooltipControl.isOpened,
+    showTooltip,
+  };
+}

package/src/core/hooks/use-connect-mcp-button.ts

@@ -0,0 +1,79 @@
+import { useState, useCallback, useMemo } from 'react';
+import debounce from 'lodash.debounce';
+
+import type { MCPOption } from '../types';
+
+import { useThemeHooks } from './use-theme-hooks';
+import { useMCPConfig } from './use-mcp-config';
+import { ClipboardService } from '../utils/clipboard-service';
+
+export type McpButtonOptions = {
+  options?: MCPOption[];
+};
+
+export type McpButtonSettings = {
+  isCopied: boolean;
+  cursorUrl: string;
+  vscodeUrl: string;
+  triggerButtonText: string;
+  visibleOptions: MCPOption[];
+  handleAction: (action: MCPOption) => void;
+};
+
+const COPIED_RESET_TIMEOUT = 1000;
+
+export function useConnectMCPButton({
+  options = ['cursor', 'vscode', 'copy'],
+}: McpButtonOptions = {}): McpButtonSettings {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { serverName, serverUrl, cursorUrl, vscodeUrl } = useMCPConfig();
+  const [isCopied, setIsCopied] = useState(false);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const resetCopied = useCallback(
+    debounce(() => setIsCopied(false), COPIED_RESET_TIMEOUT),
+    [],
+  );
+
+  const handleAction = useCallback(
+    (action: MCPOption) => {
+      if (action === 'copy') {
+        const config = {
+          [serverName]: {
+            url: serverUrl,
+            description: 'MCP Server',
+          },
+        };
+        ClipboardService.copyCustom(JSON.stringify(config, null, 2));
+        setIsCopied(true);
+        resetCopied();
+        return;
+      }
+
+      const urlMap: Record<Exclude<MCPOption, 'copy'>, string> = {
+        cursor: cursorUrl,
+        vscode: vscodeUrl,
+      };
+
+      window.open(urlMap[action], '_blank');
+    },
+    [cursorUrl, vscodeUrl, serverUrl, serverName, resetCopied],
+  );
+
+  const triggerButtonText = useMemo(
+    () => translate('page.actions.connectMcp', 'Connect MCP'),
+    [translate],
+  );
+
+  const visibleOptions = useMemo(() => options.filter(Boolean), [options]);
+
+  return {
+    isCopied,
+    cursorUrl,
+    vscodeUrl,
+    triggerButtonText,
+    visibleOptions,
+    handleAction,
+  };
+}