@redocly/theme 0.67.0 → 0.68.0-next.0

package/lib/components/Buttons/ConnectMCPButton.d.ts

@@ -5,4 +5,4 @@ export type ConnectMCPButtonProps = {
     alignment?: 'start' | 'end';
     options?: MCPOption[];
 };
-export declare function ConnectMCPButton({ placement, alignment, options }: ConnectMCPButtonProps): JSX.Element;
+export declare function ConnectMCPButton({ placement, alignment, options }: ConnectMCPButtonProps): JSX.Element | null;

package/lib/components/Buttons/ConnectMCPButton.js

@@ -39,7 +39,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectMCPButton = ConnectMCPButton;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Button_1 = require("../../components/Button/Button");
@@ -47,12 +46,9 @@ const CursorIcon_1 = require("../../icons/CursorIcon/CursorIcon");
 const VSCodeIcon_1 = require("../../icons/VSCodeIcon/VSCodeIcon");
 const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
-const ConnectIcon_1 = require("../../icons/ConnectIcon/ConnectIcon");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
 const hooks_1 = require("../../core/hooks");
-const hooks_2 = require("../../core/hooks");
-const TriggerButton = react_1.default.memo(({ text }) => {
-    return (react_1.default.createElement(StyledButton, { variant: "secondary", icon: react_1.default.createElement(ConnectIcon_1.ConnectIcon, null) }, text));
-});
 const MENU_OPTIONS = [
     {
         key: 'cursor',
@@ -80,31 +76,68 @@ const MENU_OPTIONS = [
     },
 ];
 function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = ['cursor', 'vscode', 'copy'], }) {
-    const { useTranslate } = (0, hooks_2.useThemeHooks)();
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const { isCopied, triggerButtonText, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({
-        options,
-    });
-    const menuOptions = (0, react_1.useMemo)(() => MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key)), [visibleOptions]);
-    return (react_1.default.createElement(ConnectMCPButtonWrapper, { "data-component-name": "Buttons/ConnectMCPButton" },
-        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: react_1.default.createElement(TriggerButton, { text: triggerButtonText }), triggerEvent: "hover", placement: placement, alignment: alignment, closeOnClick: false },
-            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, menuOptions.map((option) => {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const wrapperRef = (0, react_1.useRef)(null);
+    const { isCopied, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
+    (0, hooks_1.useOutsideClick)(wrapperRef, () => setIsOpen(false));
+    const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
+    const primaryOption = menuOptions[0];
+    const dropdownOptions = menuOptions.slice(1);
+    if (!primaryOption)
+        return null;
+    const PrimaryIcon = primaryOption.icon;
+    // When copy is the primary action there is no dropdown item to show the copied state, so the
+    // primary button itself must reflect it.
+    const showPrimaryCopied = primaryOption.key === 'copy' && isCopied;
+    const handleMenuAction = (key) => {
+        handleAction(key);
+        setIsOpen(false);
+    };
+    return (react_1.default.createElement(ConnectMCPButtonWrapper, { ref: wrapperRef, "data-component-name": "Buttons/ConnectMCPButton" },
+        react_1.default.createElement(SplitButtonGroup, null,
+            react_1.default.createElement(PrimaryButton, { variant: "secondary", icon: showPrimaryCopied ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(PrimaryIcon, null)), onClick: () => handleAction(primaryOption.key) }, translate(primaryOption.titleTranslationKey, primaryOption.titleDefault)),
+            dropdownOptions.length > 0 && (react_1.default.createElement(ChevronButton, { variant: "secondary", "aria-label": translate('page.actions.connectMcp.moreOptions', 'More options'), "aria-expanded": isOpen, "aria-haspopup": "menu", onClick: () => setIsOpen((prev) => !prev) }, isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null)))),
+        isOpen && dropdownOptions.length > 0 && (react_1.default.createElement(DropdownWrapper, { $placement: placement, $alignment: alignment },
+            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, dropdownOptions.map((option) => {
                 const Icon = option.icon;
                 const showCheckmark = option.key === 'copy' && isCopied;
-                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => handleAction(option.key) },
+                return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: option.key, onAction: () => handleMenuAction(option.key) },
                     react_1.default.createElement(MenuItemContent, null,
                         react_1.default.createElement(MenuItemIcon, null, showCheckmark ? (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { color: "var(--color-success-base)" })) : (react_1.default.createElement(Icon, null))),
                         react_1.default.createElement(MenuItemText, null,
                             react_1.default.createElement(MenuItemTitle, null, translate(option.titleTranslationKey, option.titleDefault)),
                             react_1.default.createElement(MenuItemDescription, null, translate(option.descriptionTranslationKey, option.descriptionDefault))))));
-            })))));
+            }))))));
 }
 const ConnectMCPButtonWrapper = styled_components_1.default.div `
   display: inline-block;
   position: relative;
 `;
-const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
+const SplitButtonGroup = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: stretch;
+`;
+const PrimaryButton = (0, styled_components_1.default)(Button_1.Button) `
   --button-gap: var(--connect-mcp-button-gap);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+`;
+const ChevronButton = (0, styled_components_1.default)(Button_1.Button) `
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+  padding-inline: var(--connect-mcp-button-chevron-padding-inline);
+`;
+const DropdownWrapper = styled_components_1.default.div `
+  position: absolute;
+  top: ${({ $placement }) => ($placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ $placement }) => ($placement === 'top' ? '100%' : 'auto')};
+  left: ${({ $alignment }) => ($alignment === 'start' ? '0' : 'auto')};
+  right: ${({ $alignment }) => ($alignment === 'end' ? '0' : 'auto')};
+  padding-top: var(--dropdown-menu-padding-top);
+  z-index: var(--dropdown-menu-z-index);
 `;
 const MenuItemContent = styled_components_1.default.div `
   display: flex;

package/lib/components/Buttons/variables.js

@@ -59,6 +59,9 @@ exports.connectMCPButton = (0, styled_components_1.css) `
   /* Button gap */
   --connect-mcp-button-gap: var(--spacing-xs);
 
+  /* Chevron button */
+  --connect-mcp-button-chevron-padding-inline: var(--spacing-xs);
+
   /* Menu item layout */
   --connect-mcp-button-menu-item-gap: var(--spacing-sm);
   --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);

package/lib/components/Feedback/Reasons.js

@@ -41,14 +41,13 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 function Reasons({ settings, onChange, className }) {
-    const { label, component, items = [] } = settings;
+    const { label, component = 'checkbox', items = [] } = settings;
     const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     if (!items.length) {
         return null;
     }
-    const input_type = component || 'checkbox';
     const handleOptionChange = (position) => {
         const updatedCheckedState = component === 'checkbox'
             ? checkedState.map((item, index) => (index === position ? !item : item))
@@ -60,7 +59,7 @@ function Reasons({ settings, onChange, className }) {
         React.createElement(Label, null, label ||
             translate('feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
-            React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
+            React.createElement("input", { type: component, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
             React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
 }
 const ReasonsWrapper = styled_components_1.default.div `

package/lib/components/Menu/MenuItem.js

@@ -49,6 +49,7 @@ const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 const Tag_1 = require("../../components/Tag/Tag");
 function MenuItem(props) {
     var _a, _b;
+    var _c;
     const { item, depth, className, onClick } = props;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -101,7 +102,7 @@ function MenuItem(props) {
     return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }), role: "listitem" },
         item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive, onKeyDown: handleExpandOnEnter }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { $isExpanded: isExpanded, $depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
-        item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { $depth: depth, $linePosition: item.linePosition })) : null));
+        item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { $depth: depth, $linePosition: (_c = item.linePosition) !== null && _c !== void 0 ? _c : constants_1.DEFAULT_LINE_POSITION })) : null));
 }
 /* for backward compatibility */
 function isDirectColorValue(color) {

package/lib/components/Search/SearchAiDialog.js

@@ -47,11 +47,12 @@ const SearchAiMessage_1 = require("../../components/Search/SearchAiMessage");
 const Admonition_1 = require("../../components/Admonition/Admonition");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, toolCalls = [], contentSegments, }) {
+    var _a;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { aiAssistant } = (0, hooks_1.useThemeConfig)();
     const { translate } = useTranslate();
     const conversationEndRef = react_1.default.useRef(null);
-    const suggestions = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions;
+    const suggestions = (_a = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions) !== null && _a !== void 0 ? _a : [];
     const placeholder = isGeneratingResponse
         ? translate('search.ai.generatingResponse', 'Generating response...')
         : conversation.length > 0

package/lib/components/Search/SearchAiResponse.js

@@ -19,6 +19,7 @@ const ErrorFilledIcon_1 = require("../../icons/ErrorFilledIcon/ErrorFilledIcon")
 const constants_1 = require("../../core/constants");
 const ChatIcon_1 = require("../../icons/ChatIcon/ChatIcon");
 function SearchAiResponse(props) {
+    var _a;
     const { useMarkdownText } = (0, hooks_1.useThemeHooks)();
     const { question, response, isGeneratingResponse, resources, error, onSuggestionClick } = props;
     const { aiAssistant } = (0, hooks_1.useThemeConfig)();
@@ -26,7 +27,7 @@ function SearchAiResponse(props) {
     const { translate } = useTranslate();
     const markdownResponse = useMarkdownText(response || '');
     let responseContainer = null;
-    const suggestions = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions;
+    const suggestions = (_a = aiAssistant === null || aiAssistant === void 0 ? void 0 : aiAssistant.suggestions) !== null && _a !== void 0 ? _a : [];
     const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
     if (hasPendingOrReceivedResponse) {
         let icon;

package/lib/components/Search/SearchTrigger.js

@@ -43,14 +43,14 @@ const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 const utils_1 = require("../../core/utils");
+const constants_1 = require("../../core/constants");
 function SearchTrigger({ onClick, className }) {
     var _a;
     var _b;
     const themeSettings = (0, hooks_1.useThemeConfig)();
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const defaultKeyShortcut = '⌘+K,CTRL+K';
-    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : [defaultKeyShortcut];
+    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : [constants_1.DEFAULT_KEYBOARD_SHORTCUTS];
     let mainShortcutKey = null;
     if (keyShortcuts) {
         if (Array.isArray(keyShortcuts)) {
@@ -67,7 +67,7 @@ function SearchTrigger({ onClick, className }) {
         React.createElement(SearchTriggerInput, { "data-testid": "search-trigger-input", "data-translation-key": "search.navbar.label" },
             React.createElement(SearchIcon_1.SearchIcon, null),
             translate('search.navbar.label', 'Search'),
-            mainShortcutKey === defaultKeyShortcut ? (React.createElement("span", null, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
+            mainShortcutKey === constants_1.DEFAULT_KEYBOARD_SHORTCUTS ? (React.createElement("span", null, isMac ? '⌘K' : 'Ctrl+K')) : (React.createElement("span", null, mainShortcutKey)))));
 }
 const SearchTriggerWrapper = styled_components_1.default.div `
   color: var(--search-trigger-color);

package/lib/core/constants/common.d.ts

@@ -30,3 +30,4 @@ export declare const DEFAULT_COLOR_MODES: {
     readonly LIGHT: 'light';
     readonly DARK: 'dark';
 };
+export declare const DEFAULT_LINE_POSITION = "top";

package/lib/core/constants/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_COLOR_MODES = exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
+exports.DEFAULT_LINE_POSITION = exports.DEFAULT_COLOR_MODES = exports.MobileMenuType = exports.MenuItemType = exports.DEFAULT_FEEDBACK_TYPE = exports.FEEDBACK_TYPES = exports.ICONS_CDN_URL = exports.CONTENT_ID = exports.DEFAULT_LOCALE_PLACEHOLDER = exports.REDOCLY_TEAMS_RBAC = void 0;
 var config_1 = require("@redocly/config");
 Object.defineProperty(exports, "REDOCLY_TEAMS_RBAC", { enumerable: true, get: function () { return config_1.REDOCLY_TEAMS_RBAC; } });
 exports.DEFAULT_LOCALE_PLACEHOLDER = 'default_locale';
@@ -37,4 +37,5 @@ exports.DEFAULT_COLOR_MODES = {
     LIGHT: 'light',
     DARK: 'dark',
 };
+exports.DEFAULT_LINE_POSITION = 'top';
 //# sourceMappingURL=common.js.map

package/lib/core/constants/search.d.ts

@@ -14,6 +14,7 @@ export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof t
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
 export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 export declare const SEARCH_DEBOUNCE_TIME_MS = 300;
+export declare const DEFAULT_KEYBOARD_SHORTCUTS = "\u2318+K,CTRL+K";
 export declare const TOOL_CALL_DISPLAY_TEXT: Partial<Record<string, {
     inProgressText: string;
     completedText: string;

package/lib/core/constants/search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TOOL_CALL_DISPLAY_TEXT = exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_MAX_MESSAGE_LENGTH = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
+exports.TOOL_CALL_DISPLAY_TEXT = exports.DEFAULT_KEYBOARD_SHORTCUTS = exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_MAX_MESSAGE_LENGTH = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
 const search_1 = require("../types/search");
 var AiSearchError;
 (function (AiSearchError) {
@@ -39,6 +39,7 @@ exports.AI_SEARCH_ERROR_CONFIG = {
 };
 exports.AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 exports.SEARCH_DEBOUNCE_TIME_MS = 300;
+exports.DEFAULT_KEYBOARD_SHORTCUTS = '⌘+K,CTRL+K';
 exports.TOOL_CALL_DISPLAY_TEXT = {
     [search_1.ToolCallName.SearchDocumentation]: {
         inProgressText: 'Searching documentation...',

package/lib/core/hooks/search/use-search-dialog.js

@@ -11,6 +11,7 @@ const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
 const contexts_1 = require("../../contexts");
 const utils_1 = require("../../utils");
+const constants_1 = require("../../constants");
 function useSearchDialog() {
     var _a;
     var _b;
@@ -20,7 +21,7 @@ function useSearchDialog() {
     const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { refreshSearchSessionId } = (0, contexts_1.useSearchSession)();
-    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['⌘+K,CTRL+K'];
+    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : [constants_1.DEFAULT_KEYBOARD_SHORTCUTS];
     const hotKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
     (0, react_1.useEffect)(() => {
         if (hotKeys) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.67.0",
+  "version": "0.68.0-next.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.1.8",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.13.0"
+    "@redocly/realm-asyncapi-sdk": "0.14.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.50.1"
+    "@redocly/config": "0.52.0"
   },
   "scripts": {
     "watch": "tsgo -p tsconfig.build.json && (concurrently \"tsgo -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -1,10 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
 import type { MCPOption } from '@redocly/theme/core/types';
 
-import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -12,21 +11,9 @@ import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
 import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
 import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
 import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
-import { ConnectIcon } from '@redocly/theme/icons/ConnectIcon/ConnectIcon';
-import { useConnectMCPButton } from '@redocly/theme/core/hooks';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-
-type TriggerButtonProps = {
-  text: string;
-};
-
-const TriggerButton = React.memo(({ text }: TriggerButtonProps): JSX.Element => {
-  return (
-    <StyledButton variant="secondary" icon={<ConnectIcon />}>
-      {text}
-    </StyledButton>
-  );
-});
+import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
+import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
+import { useConnectMCPButton, useOutsideClick, useThemeHooks } from '@redocly/theme/core/hooks';
 
 type MenuOption = {
   key: MCPOption;
@@ -74,57 +61,93 @@ export function ConnectMCPButton({
   placement = 'bottom',
   alignment = 'end',
   options = ['cursor', 'vscode', 'copy'],
-}: ConnectMCPButtonProps): JSX.Element {
+}: ConnectMCPButtonProps): JSX.Element | null {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
+  const [isOpen, setIsOpen] = useState(false);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const { isCopied, triggerButtonText, visibleOptions, handleAction } = useConnectMCPButton({
-    options,
-  });
+  const { isCopied, visibleOptions, handleAction } = useConnectMCPButton({ options });
 
-  const menuOptions = useMemo(
-    () => MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key)),
-    [visibleOptions],
-  );
+  useOutsideClick(wrapperRef, () => setIsOpen(false));
+
+  const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
+  const primaryOption = menuOptions[0];
+  const dropdownOptions = menuOptions.slice(1);
+
+  if (!primaryOption) return null;
+
+  const PrimaryIcon = primaryOption.icon;
+  // When copy is the primary action there is no dropdown item to show the copied state, so the
+  // primary button itself must reflect it.
+  const showPrimaryCopied = primaryOption.key === 'copy' && isCopied;
+
+  const handleMenuAction = (key: MCPOption) => {
+    handleAction(key);
+    setIsOpen(false);
+  };
 
   return (
-    <ConnectMCPButtonWrapper data-component-name="Buttons/ConnectMCPButton">
-      <Dropdown
-        trigger={<TriggerButton text={triggerButtonText} />}
-        triggerEvent="hover"
-        placement={placement}
-        alignment={alignment}
-        closeOnClick={false}
-      >
-        <DropdownMenu>
-          {menuOptions.map((option) => {
-            const Icon = option.icon;
-            const showCheckmark = option.key === 'copy' && isCopied;
-
-            return (
-              <DropdownMenuItem key={option.key} onAction={() => handleAction(option.key)}>
-                <MenuItemContent>
-                  <MenuItemIcon>
-                    {showCheckmark ? (
-                      <CheckmarkFilledIcon color="var(--color-success-base)" />
-                    ) : (
-                      <Icon />
-                    )}
-                  </MenuItemIcon>
-                  <MenuItemText>
-                    <MenuItemTitle>
-                      {translate(option.titleTranslationKey, option.titleDefault)}
-                    </MenuItemTitle>
-                    <MenuItemDescription>
-                      {translate(option.descriptionTranslationKey, option.descriptionDefault)}
-                    </MenuItemDescription>
-                  </MenuItemText>
-                </MenuItemContent>
-              </DropdownMenuItem>
-            );
-          })}
-        </DropdownMenu>
-      </Dropdown>
+    <ConnectMCPButtonWrapper ref={wrapperRef} data-component-name="Buttons/ConnectMCPButton">
+      <SplitButtonGroup>
+        <PrimaryButton
+          variant="secondary"
+          icon={
+            showPrimaryCopied ? (
+              <CheckmarkFilledIcon color="var(--color-success-base)" />
+            ) : (
+              <PrimaryIcon />
+            )
+          }
+          onClick={() => handleAction(primaryOption.key)}
+        >
+          {translate(primaryOption.titleTranslationKey, primaryOption.titleDefault)}
+        </PrimaryButton>
+        {dropdownOptions.length > 0 && (
+          <ChevronButton
+            variant="secondary"
+            aria-label={translate('page.actions.connectMcp.moreOptions', 'More options')}
+            aria-expanded={isOpen}
+            aria-haspopup="menu"
+            onClick={() => setIsOpen((prev) => !prev)}
+          >
+            {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
+          </ChevronButton>
+        )}
+      </SplitButtonGroup>
+
+      {isOpen && dropdownOptions.length > 0 && (
+        <DropdownWrapper $placement={placement} $alignment={alignment}>
+          <DropdownMenu>
+            {dropdownOptions.map((option) => {
+              const Icon = option.icon;
+              const showCheckmark = option.key === 'copy' && isCopied;
+
+              return (
+                <DropdownMenuItem key={option.key} onAction={() => handleMenuAction(option.key)}>
+                  <MenuItemContent>
+                    <MenuItemIcon>
+                      {showCheckmark ? (
+                        <CheckmarkFilledIcon color="var(--color-success-base)" />
+                      ) : (
+                        <Icon />
+                      )}
+                    </MenuItemIcon>
+                    <MenuItemText>
+                      <MenuItemTitle>
+                        {translate(option.titleTranslationKey, option.titleDefault)}
+                      </MenuItemTitle>
+                      <MenuItemDescription>
+                        {translate(option.descriptionTranslationKey, option.descriptionDefault)}
+                      </MenuItemDescription>
+                    </MenuItemText>
+                  </MenuItemContent>
+                </DropdownMenuItem>
+              );
+            })}
+          </DropdownMenu>
+        </DropdownWrapper>
+      )}
     </ConnectMCPButtonWrapper>
   );
 }
@@ -134,8 +157,32 @@ const ConnectMCPButtonWrapper = styled.div`
   position: relative;
 `;
 
-const StyledButton = styled(Button)`
+const SplitButtonGroup = styled.div`
+  display: inline-flex;
+  align-items: stretch;
+`;
+
+const PrimaryButton = styled(Button)`
   --button-gap: var(--connect-mcp-button-gap);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+`;
+
+const ChevronButton = styled(Button)`
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: none;
+  padding-inline: var(--connect-mcp-button-chevron-padding-inline);
+`;
+
+const DropdownWrapper = styled.div<{ $placement?: string; $alignment?: string }>`
+  position: absolute;
+  top: ${({ $placement }) => ($placement === 'top' ? 'auto' : '100%')};
+  bottom: ${({ $placement }) => ($placement === 'top' ? '100%' : 'auto')};
+  left: ${({ $alignment }) => ($alignment === 'start' ? '0' : 'auto')};
+  right: ${({ $alignment }) => ($alignment === 'end' ? '0' : 'auto')};
+  padding-top: var(--dropdown-menu-padding-top);
+  z-index: var(--dropdown-menu-z-index);
 `;
 
 const MenuItemContent = styled.div`

package/src/components/Buttons/variables.ts

@@ -58,6 +58,9 @@ export const connectMCPButton = css`
   /* Button gap */
   --connect-mcp-button-gap: var(--spacing-xs);
 
+  /* Chevron button */
+  --connect-mcp-button-chevron-padding-inline: var(--spacing-xs);
+
   /* Menu item layout */
   --connect-mcp-button-menu-item-gap: var(--spacing-sm);
   --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);

package/src/components/Feedback/Reasons.tsx

@@ -16,7 +16,7 @@ export type ReasonsProps = {
 };
 
 export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.Element | null {
-  const { label, component, items = [] } = settings;
+  const { label, component = 'checkbox', items = [] } = settings;
   const [checkedState, setCheckedState] = React.useState(new Array(items.length).fill(false));
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -25,8 +25,6 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
     return null;
   }
 
-  const input_type = component || 'checkbox';
-
   const handleOptionChange = (position: number) => {
     const updatedCheckedState =
       component === 'checkbox'
@@ -53,7 +51,7 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
       {items.map((reason, idx) => (
         <OptionWrapper key={reason}>
           <input
-            type={input_type}
+            type={component}
             value={reason}
             checked={checkedState[idx]}
             name="reasons"

package/src/components/Menu/MenuItem.tsx

@@ -10,7 +10,7 @@ import { Link } from '@redocly/theme/components/Link/Link';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
-import { MenuItemType } from '@redocly/theme/core/constants';
+import { DEFAULT_LINE_POSITION, MenuItemType } from '@redocly/theme/core/constants';
 import {
   getBaseDataAttributes,
   getMenuItemType,
@@ -178,7 +178,10 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
         </MenuItemNestedWrapper>
       ) : null}
       {item.separatorLine ? (
-        <MenuItemSeparatorLine $depth={depth} $linePosition={item.linePosition} />
+        <MenuItemSeparatorLine
+          $depth={depth}
+          $linePosition={item.linePosition ?? DEFAULT_LINE_POSITION}
+        />
       ) : null}
     </MenuItemWrapper>
   );

package/src/components/Search/SearchAiDialog.tsx

@@ -59,7 +59,7 @@ export function SearchAiDialog({
 
   const conversationEndRef = React.useRef<HTMLDivElement>(null);
 
-  const suggestions = aiAssistant?.suggestions;
+  const suggestions = aiAssistant?.suggestions ?? [];
 
   const placeholder = isGeneratingResponse
     ? translate('search.ai.generatingResponse', 'Generating response...')

package/src/components/Search/SearchAiResponse.tsx

@@ -42,7 +42,7 @@ export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
 
   let responseContainer = null;
 
-  const suggestions = aiAssistant?.suggestions;
+  const suggestions = aiAssistant?.suggestions ?? [];
 
   const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
   if (hasPendingOrReceivedResponse) {

package/src/components/Search/SearchTrigger.tsx

@@ -7,6 +7,7 @@ import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { SearchIcon } from '@redocly/theme/icons/SearchIcon/SearchIcon';
 import { breakpoints, getUserAgent } from '@redocly/theme/core/utils';
+import { DEFAULT_KEYBOARD_SHORTCUTS } from '@redocly/theme/core/constants';
 
 export type SearchTriggerProps = {
   onClick: () => void;
@@ -18,8 +19,7 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
-  const defaultKeyShortcut = '⌘+K,CTRL+K';
-  const keyShortcuts = themeSettings?.search?.shortcuts ?? [defaultKeyShortcut];
+  const keyShortcuts = themeSettings?.search?.shortcuts ?? [DEFAULT_KEYBOARD_SHORTCUTS];
   let mainShortcutKey: string | null | undefined = null;
 
   if (keyShortcuts) {
@@ -52,7 +52,7 @@ export function SearchTrigger({ onClick, className }: SearchTriggerProps): JSX.E
       >
         <SearchIcon />
         {translate('search.navbar.label', 'Search')}
-        {mainShortcutKey === defaultKeyShortcut ? (
+        {mainShortcutKey === DEFAULT_KEYBOARD_SHORTCUTS ? (
           <span>{isMac ? '⌘K' : 'Ctrl+K'}</span>
         ) : (
           <span>{mainShortcutKey}</span>

package/src/core/constants/common.ts

@@ -35,3 +35,5 @@ export const DEFAULT_COLOR_MODES = {
   LIGHT: 'light',
   DARK: 'dark',
 } as const;
+
+export const DEFAULT_LINE_POSITION = 'top';

package/src/core/constants/search.ts

@@ -46,6 +46,8 @@ export const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 
 export const SEARCH_DEBOUNCE_TIME_MS = 300;
 
+export const DEFAULT_KEYBOARD_SHORTCUTS = '⌘+K,CTRL+K';
+
 export const TOOL_CALL_DISPLAY_TEXT: Partial<
   Record<string, { inProgressText: string; completedText: string }>
 > = {

package/src/core/hooks/search/use-search-dialog.ts

@@ -6,6 +6,7 @@ import { useThemeHooks } from '../use-theme-hooks';
 import { useThemeConfig } from '../use-theme-config';
 import { useSearchSession } from '../../contexts';
 import { getBaseDataAttributes } from '../../utils';
+import { DEFAULT_KEYBOARD_SHORTCUTS } from '../../constants';
 
 export function useSearchDialog() {
   const [isOpen, setIsOpen] = useState(false);
@@ -14,7 +15,7 @@ export function useSearchDialog() {
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
   const { refreshSearchSessionId } = useSearchSession();
-  const keyShortcuts = themeSettings?.search?.shortcuts ?? ['⌘+K,CTRL+K'];
+  const keyShortcuts = themeSettings?.search?.shortcuts ?? [DEFAULT_KEYBOARD_SHORTCUTS];
   const hotKeys = keyShortcuts?.join(',');
 
   useEffect(() => {