@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/src/components/SplitButton/SplitButton.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 
 import type { ComponentProps, JSX } from 'react';
@@ -45,9 +45,14 @@ export function SplitButton(props: SplitButtonProps): JSX.Element {
   } = props;
 
   const hasMenu = typeof children === 'function' || React.Children.toArray(children).length > 0;
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
   return (
-    <SplitButtonWrapper data-component-name="SplitButton/SplitButton" className={className}>
+    <SplitButtonWrapper
+      data-component-name="SplitButton/SplitButton"
+      className={className}
+      ref={wrapperRef}
+    >
       <ButtonGroup variant={variant} size={size}>
         {button}
         {hasMenu ? (
@@ -56,6 +61,7 @@ export function SplitButton(props: SplitButtonProps): JSX.Element {
             placement={placement}
             alignment={alignment}
             portalled={portalled}
+            alignmentAnchorRef={wrapperRef}
             withArrow
             onOpen={onOpen}
             onClose={onClose}

package/src/components/TableOfContent/TableOfContent.tsx

@@ -101,8 +101,8 @@ const TableOfContentHeader = styled.div`
 
 const TableOfContentItems = styled.div`
   position: sticky;
-  top: calc(var(--navbar-height) + var(--toc-offset-top));
-  max-height: calc(100vh - var(--navbar-height) - var(--toc-offset-top));
+  top: calc(var(--navbar-stack-height) + var(--toc-offset-top));
+  max-height: calc(100vh - var(--navbar-stack-height) - var(--toc-offset-top));
   overflow-y: auto;
   width: var(--toc-width);
   border-left: solid 1px var(--toc-border-color);

package/src/core/constants/common.ts

@@ -18,6 +18,7 @@ export enum FEEDBACK_TYPES {
 export const DEFAULT_FEEDBACK_TYPE = FEEDBACK_TYPES.SENTIMENT;
 
 export enum MenuItemType {
+  Select = 'select',
   Separator = 'separator',
   DrillDown = 'drilldown',
   Group = 'group',

package/src/core/constants/consent.ts

@@ -0,0 +1,29 @@
+import type { ConsentCategory } from '../types/consent';
+
+export const CONSENT_CATEGORIES: readonly ConsentCategory[] = [
+  {
+    id: 'necessary',
+    locked: true,
+    titleTranslationKey: 'consent.category.necessary.title',
+    descriptionTranslationKey: 'consent.category.necessary.description',
+    titleDefault: 'Necessary',
+    descriptionDefault:
+      'Needed for the site to work: your consent choice, your color mode, and anonymous usage data.',
+  },
+  {
+    id: 'analytics',
+    locked: false,
+    titleTranslationKey: 'consent.category.analytics.title',
+    descriptionTranslationKey: 'consent.category.analytics.description',
+    titleDefault: 'Analytics',
+    descriptionDefault: 'Helps us understand which pages are useful.',
+  },
+  {
+    id: 'marketing',
+    locked: false,
+    titleTranslationKey: 'consent.category.marketing.title',
+    descriptionTranslationKey: 'consent.category.marketing.description',
+    titleDefault: 'Marketing',
+    descriptionDefault: 'Lets us measure which campaigns bring visitors to this site.',
+  },
+];

package/src/core/constants/index.ts

@@ -10,3 +10,5 @@ export * from './mcp';
 export * from './feedback';
 export * from './heading';
 export * from './markdown';
+export * from './consent';
+export * from './prompt';

package/src/core/constants/mcp.ts

@@ -1,15 +1,9 @@
-import type { MCPOption } from '../types/mcp';
-
 export const DEFAULT_MCP_SERVER_NAME = 'mcp-server';
 
 export const MCP_ROUTE = '/mcp';
 
 export const PUBLIC_MCP_ROUTE = '/mcp-public';
 
-export const DEFAULT_MCP_OPTIONS: MCPOption[] = [
-  'cursor',
-  'vscode',
-  'claude-code',
-  'codex',
-  'copy',
-];
+export const MCP_OPTIONS = ['cursor', 'vscode', 'claude', 'claude-code', 'codex', 'copy'] as const;
+
+export const DEFAULT_MCP_OPTIONS = [...MCP_OPTIONS];

package/src/core/constants/prompt.ts

@@ -0,0 +1,34 @@
+import type { AiPromptActionOption, AiPromptTarget } from '../types/prompt';
+
+export const PROMPT_TAG = 'prompt';
+
+export const AI_PROMPT_TARGETS = Object.freeze({
+  CURSOR: 'cursor',
+  CLAUDE: 'claude',
+  CHATGPT: 'chatgpt',
+} as const);
+
+/* Block width, not viewport width: a prompt in a narrow desktop column stacks like one on a
+   phone. The viewport `breakpoints` in core/utils/media-css.ts do not apply here. */
+export const PROMPT_NARROW_BLOCK_MAX_WIDTH = '440px';
+
+export const AI_PROMPT_ACTION_OPTIONS: Record<AiPromptTarget, AiPromptActionOption> = {
+  cursor: {
+    titleTranslationKey: 'promptTag.openIn.cursor',
+    titleDefault: 'Open in Cursor',
+    descriptionTranslationKey: 'promptTag.openIn.cursorDescription',
+    descriptionDefault: 'Send this prompt to Cursor',
+  },
+  claude: {
+    titleTranslationKey: 'promptTag.openIn.claude',
+    titleDefault: 'Open in Claude',
+    descriptionTranslationKey: 'promptTag.openIn.claudeDescription',
+    descriptionDefault: 'Send this prompt to Claude',
+  },
+  chatgpt: {
+    titleTranslationKey: 'promptTag.openIn.chatgpt',
+    titleDefault: 'Open in ChatGPT',
+    descriptionTranslationKey: 'promptTag.openIn.chatgptDescription',
+    descriptionDefault: 'Send this prompt to ChatGPT',
+  },
+};

package/src/core/constants/search.ts

@@ -44,7 +44,7 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
 
 export const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 
-export const SEARCH_DEBOUNCE_TIME_MS = 300;
+export const SEARCH_DEBOUNCE_TIME_MS = 500;
 
 export const DEFAULT_KEYBOARD_SHORTCUTS = '⌘+K,CTRL+K';
 
@@ -53,7 +53,7 @@ export const TOOL_CALL_DISPLAY_TEXT: Partial<
 > = {
   [ToolCallName.SearchDocumentation]: {
     inProgressText: 'Searching documentation...',
-    completedText: 'Search completed',
+    completedText: 'Searched the documentation',
   },
   [ToolCallName.ListApis]: {
     inProgressText: 'Browsing APIs...',
@@ -75,6 +75,10 @@ export const TOOL_CALL_DISPLAY_TEXT: Partial<
     inProgressText: 'Reading API description...',
     completedText: 'Read API description',
   },
+  [ToolCallName.Execute]: {
+    inProgressText: 'Running code...',
+    completedText: 'Ran code',
+  },
   [ToolCallName.DescribeTools]: {
     inProgressText: 'Discovering available tools...',
     completedText: 'Discovered available tools',

package/src/core/contexts/PortalContainerContext.tsx

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+/** Where theme portals mount; set it inside a shadow root (the AI assistant web component), else `document.body`. */
+export const PortalContainerContext = createContext<HTMLElement | null>(null);

package/src/core/hooks/__mocks__/index.ts

@@ -23,8 +23,13 @@ export * from '../menu/use-mobile-menu-levels';
 export * from '../feedback/use-report-dialog';
 export * from '../use-product-picker';
 export * from '../search/use-search-dialog';
+export * from '../search/use-search-ai-activity';
+export * from '../search/use-persisted-quick-filter';
 export * from '../use-language-picker';
 export * from './use-element-size';
 export * from './use-time-ago';
 export * from './use-input-key-commands';
 export * from '../use-tooltip-fallback-placement';
+export * from '../use-pointer-border-highlight';
+export * from '../prompt/use-prompt-text-limit';
+export * from '../prompt/use-prompt-actions';

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

@@ -17,14 +17,32 @@ export const useThemeHooks = vi.fn(() => ({
     sendCodeSnippetReportedMessage: vi.fn(),
     sendConnectMcpClickedMessage: vi.fn(),
     sendMcpConnectionSnippetCopiedMessage: vi.fn(),
+    sendPromptTagCopiedMessage: vi.fn(),
+    sendPromptTagOpenedMessage: vi.fn(),
     sendPageActionsButtonClickedMessage: vi.fn(),
     sendColorModeSwitchedMessage: vi.fn(),
+    sendConsentChangedMessage: vi.fn(),
+    sendFilterCheckboxToggledMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue({ breadcrumbs: [], siblings: undefined }),
   useBanner: vi.fn(() => ({
     banner: undefined,
     dismissBanner: vi.fn(),
   })),
+  useConsent: vi.fn(() => ({
+    enabled: false,
+    config: undefined,
+    mode: undefined,
+    state: undefined,
+    decided: false,
+    gpc: false,
+    isDialogOpen: false,
+    openDialog: vi.fn(),
+    closeDialog: vi.fn(),
+    accept: vi.fn(),
+    reject: vi.fn(),
+    save: vi.fn(),
+  })),
   usePageSharedData: vi.fn().mockReturnValue({}),
   useCatalogClassic: vi.fn(() => ({
     groups: [],
@@ -55,6 +73,7 @@ export const useThemeHooks = vi.fn(() => ({
     items: [],
     isLoading: false,
   })),
+  useSearchFeatures: vi.fn(() => ({ askAi: false })),
   useAiSearch: vi.fn(() => ({
     askQuestion: vi.fn(),
     isGeneratingResponse: false,
@@ -102,6 +121,7 @@ export const useThemeHooks = vi.fn(() => ({
     pushDrilldownState: vi.fn(),
   }),
   useSidebarSiblingsData: vi.fn(),
+  useNavigationTabs: vi.fn(),
   useSubmitFeedback: vi.fn(() => ({
     submitFeedback: vi.fn(),
   })),

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

@@ -8,8 +8,7 @@ export class MockIntersectionObserver {
   unobserve: (target: HTMLElement) => void;
   disconnect: () => void;
 
-  // @ts-expect-error
-  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+  constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) {
     this.root = null;
     this.rootMargin = '0px';
     this.thresholds = [1];

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

@@ -9,8 +9,7 @@ export class MockIntersectionObserver {
   unobserve: (target: HTMLElement) => void;
   disconnect: () => void;
 
-  // @ts-expect-error
-  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+  constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) {
     this.root = null;
     this.rootMargin = '0px';
     this.scrollMargin = '';

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

@@ -4,7 +4,7 @@ import type {
   CodeWalkthroughFile,
   CodeWalkthroughNode,
   CodeWalkthroughConditionsObject,
-} from '@redocly/config';
+} from '@redocly/theme/core/types';
 
 import { CodeWalkthroughControlsStateContext } from '../../contexts/CodeWalkthrough/CodeWalkthroughControlsContext';
 import { CodeWalkthroughStepsContext } from '../../contexts/CodeWalkthrough/CodeWalkthroughStepsContext';

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

@@ -10,7 +10,7 @@ import type {
   CodeWalkthroughFilterItem,
   CodeWalkthroughConditionsObject,
   CodeWalkthroughControlsState,
-} from '@redocly/config';
+} from '@redocly/theme/core/types';
 
 import { downloadCodeWalkthrough } from '../../utils/download-code-walkthrough';
 import { matchCodeWalkthroughConditions } from '../../utils/match-code-walkthrough-conditions';
@@ -98,7 +98,7 @@ export function useCodeWalkthroughControls(
     Object.entries(newState).forEach(([id, control]) => {
       const existingControl = controlsState[id];
       if (existingControl && existingControl.type === control.type) {
-        // @ts-expect-error
+        // @ts-expect-error: TS2322 - the spread loses the link between `type` and `value` in the control union
         newState[id] = {
           ...control,
           value: existingControl.value,

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

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router';
 
-import type { CodeWalkthroughStepAttr } from '@redocly/config';
+import type { CodeWalkthroughStepAttr } from '@redocly/theme/core/types';
 import type { ActiveStep, WalkthroughStepsState } from '../../types/code-walkthrough';
 import type { MarkerArea } from '../../types/marker';
 

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

@@ -1,9 +1,9 @@
 import type {
+  CodeWalkthroughAttr,
   CodeWalkthroughFile,
   CodeWalkthroughStepAttr,
-  CodeWalkthroughAttr,
-} from '@redocly/config';
-import type { WalkthroughStepsState } from '../../types/code-walkthrough';
+  WalkthroughStepsState,
+} from '../../types/code-walkthrough';
 
 import {
   useCodeWalkthroughControls,

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

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '@redocly/theme/core/types';
 
 import { findClosestCommonDirectory } from '../../utils/find-closest-common-directory';
 import { getFileIconByExt } from '../../utils/GetFileIcon';

package/src/core/hooks/index.ts

@@ -21,12 +21,17 @@ export * from './menu/use-mobile-menu-levels';
 export * from './menu/use-collapse';
 export * from './feedback/use-report-dialog';
 export * from './use-tabs';
+export * from './use-tab-list';
 export * from './use-focus-trap';
+export * from './use-consent-dialog';
+export * from './use-consent-telemetry';
 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 './search/use-search-ai-activity';
+export * from './search/use-persisted-quick-filter';
 export * from './use-controlled-state';
 export * from './use-codeblock-tabs-controls';
 export * from './code-walkthrough/use-code-walkthrough';
@@ -56,3 +61,7 @@ export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
 export * from './use-anchor-positioning';
+export * from './use-scroll-item-into-view';
+export * from './use-pointer-border-highlight';
+export * from './prompt/use-prompt-text-limit';
+export * from './prompt/use-prompt-actions';

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

@@ -207,5 +207,5 @@ export function useEvent<T extends (...args: any[]) => any>(callback?: T): T {
     ref.current = callback;
   });
 
-  return useCallback(((...args: Parameters<T>) => 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

@@ -1,21 +1,36 @@
+import { useMemo } from 'react';
 import { useLocation } from 'react-router';
 
-import type { ResolvedNavItem } from '@redocly/config';
+import type { ResolvedNavItem, Version } from '@redocly/config';
 
 import { useThemeHooks } from '../use-theme-hooks';
 import { useThemeConfig } from '../use-theme-config';
 import { MobileMenuType } from '../../constants/common';
-import { buildLanguagesGroup, buildVersionSection, mapNavbarItems } from '../../utils/menu';
+import {
+  buildLanguagesGroup,
+  buildNavigationTabsSelect,
+  buildVersionSection,
+  mapNavbarItems,
+} from '../../utils/menu';
 
 const MENU_SEPARATOR: ResolvedNavItem = {
   type: 'separator',
   separatorLine: true,
 };
 
+const NO_VERSIONS: Version[] = [];
+const NO_NAV_ITEMS: ResolvedNavItem[] = [];
+
 export const useMobileMenuItems = (menuType: MobileMenuType) => {
-  const { useTranslate, useL10nConfig, useCurrentProduct, usePageVersions, useSidebarItems } =
-    useThemeHooks();
-  const { versions = [] } = usePageVersions() || {};
+  const {
+    useTranslate,
+    useL10nConfig,
+    useCurrentProduct,
+    usePageVersions,
+    useSidebarItems,
+    useNavigationTabs,
+  } = useThemeHooks();
+  const versions = usePageVersions()?.versions ?? NO_VERSIONS;
   const { defaultLocale, currentLocale, locales } = useL10nConfig();
   const { translate } = useTranslate();
   const activeVersion = versions.find((version) => version.active);
@@ -25,6 +40,7 @@ export const useMobileMenuItems = (menuType: MobileMenuType) => {
     popDrilldownState,
     backLink,
   } = useSidebarItems(activeVersion);
+  const navigationTabs = useNavigationTabs();
   const location = useLocation();
 
   const currentProduct = useCurrentProduct();
@@ -33,74 +49,93 @@ export const useMobileMenuItems = (menuType: MobileMenuType) => {
   const productThemeConfig = useThemeConfig();
   const baseThemeConfig = useThemeConfig(false);
 
-  const baseNavItems = (baseThemeConfig.navbar?.items || []) as ResolvedNavItem[];
+  const baseNavItems = (baseThemeConfig.navbar?.items ?? NO_NAV_ITEMS) as ResolvedNavItem[];
   const productNavItems = (
-    hasProductNavbarOverride ? productThemeConfig.navbar?.items || [] : []
+    hasProductNavbarOverride ? (productThemeConfig.navbar?.items ?? NO_NAV_ITEMS) : NO_NAV_ITEMS
   ) as ResolvedNavItem[];
-
-  const menuItems: ResolvedNavItem[] = [];
-
-  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);
-    }
-    if (menuItems.length && sidebarItems.length) {
-      menuItems.push(MENU_SEPARATOR);
-    }
-    menuItems.push(...(sidebarItems as ResolvedNavItem[]));
-  } else if (menuType === MobileMenuType.PRODUCT) {
-    menuItems.push(...productNavItems);
-
-    if (menuItems.length && baseNavItems.length) {
-      menuItems.push(MENU_SEPARATOR);
-    }
-
-    if (baseNavItems.length) {
-      menuItems.push(...baseNavItems);
-    }
-  } else if (menuType === MobileMenuType.MAIN_MENU) {
-    const productMenuItems: ResolvedNavItem[] = Object.values(baseThemeConfig.products || {}).map(
-      (product) => ({
+  const products = baseThemeConfig.products;
+
+  const items = useMemo(() => {
+    const menuItems: ResolvedNavItem[] = [];
+    const navigationTabsSelect =
+      menuType === MobileMenuType.PAGE ? buildNavigationTabsSelect({ navigationTabs }) : undefined;
+
+    if (menuType === MobileMenuType.PAGE) {
+      if (activeVersion) {
+        menuItems.push(...buildVersionSection(translate, versions, activeVersion));
+      }
+      if (menuItems.length && sidebarItems.length) {
+        menuItems.push(MENU_SEPARATOR);
+      }
+      menuItems.push(...(sidebarItems as ResolvedNavItem[]));
+    } else if (menuType === MobileMenuType.PRODUCT) {
+      menuItems.push(...productNavItems);
+
+      if (menuItems.length && baseNavItems.length) {
+        menuItems.push(MENU_SEPARATOR);
+      }
+
+      if (baseNavItems.length) {
+        menuItems.push(...baseNavItems);
+      }
+    } else if (menuType === MobileMenuType.MAIN_MENU) {
+      const productMenuItems: ResolvedNavItem[] = Object.values(products || {}).map((product) => ({
         label: product.name,
         link: product.link,
         icon: product.icon,
         type: 'link',
-      }),
-    );
+      }));
+
+      if (productMenuItems.length) {
+        menuItems.push({
+          type: 'separator',
+          label: translate('mobileMenu.products', 'Products'),
+        });
 
-    if (productMenuItems.length) {
-      menuItems.push({
-        type: 'separator',
-        label: translate('mobileMenu.products', 'Products'),
-      });
+        menuItems.push(...productMenuItems);
+      }
 
-      menuItems.push(...productMenuItems);
+      if (menuItems.length && baseNavItems.length) {
+        menuItems.push(MENU_SEPARATOR);
+      }
+
+      if (baseNavItems.length) {
+        menuItems.push(...baseNavItems);
+      }
     }
 
-    if (menuItems.length && baseNavItems.length) {
+    const languagesMenu = buildLanguagesGroup(locales, defaultLocale, currentLocale);
+
+    if (menuItems.length && languagesMenu) {
       menuItems.push(MENU_SEPARATOR);
     }
 
-    if (baseNavItems.length) {
-      menuItems.push(...baseNavItems);
+    if (languagesMenu) {
+      menuItems.push(languagesMenu);
     }
-  }
-
-  const languagesMenu = buildLanguagesGroup(locales, defaultLocale, currentLocale);
-
-  if (menuItems.length && languagesMenu) {
-    menuItems.push(MENU_SEPARATOR);
-  }
 
-  if (languagesMenu) {
-    menuItems.push(languagesMenu);
-  }
+    return [
+      ...(navigationTabsSelect ? [navigationTabsSelect] : []),
+      ...mapNavbarItems(menuItems, defaultLocale, currentLocale, locales, location),
+    ];
+  }, [
+    menuType,
+    navigationTabs,
+    activeVersion,
+    versions,
+    sidebarItems,
+    productNavItems,
+    baseNavItems,
+    products,
+    translate,
+    locales,
+    defaultLocale,
+    currentLocale,
+    location,
+  ]);
 
   return {
-    items: mapNavbarItems(menuItems, defaultLocale, currentLocale, locales, location),
+    items,
     popDrilldownState,
     pushDrilldownState,
     backLink,

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

@@ -8,27 +8,35 @@ import { useThemeConfig } from '../use-theme-config';
 import { MobileMenuType } from '../../constants/common';
 
 export const useMobileMenuLevels = () => {
-  const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems } = useThemeHooks();
+  const { useTranslate, useCurrentProduct, usePageVersions, useSidebarItems, useNavigationTabs } =
+    useThemeHooks();
   const { versions = [] } = usePageVersions() || {};
   const activeVersion = versions.find((version) => version?.active);
   const { currentItems: sidebarItems } = useSidebarItems(activeVersion);
+  const navigationTabs = useNavigationTabs();
   const { translate } = useTranslate();
   const currentProduct = useCurrentProduct();
   const productThemeConfig = useThemeConfig();
+  const baseThemeConfig = useThemeConfig(false);
   const location = useLocation();
 
   const hasProductNavbarOverride = currentProduct?.configOverride?.navbar;
   const productNavItems = (
     hasProductNavbarOverride ? productThemeConfig.navbar?.items || [] : []
   ) as ResolvedNavItem[];
+  const hasMainMenuItems =
+    Object.values(baseThemeConfig.products || {}).length > 0 ||
+    (baseThemeConfig.navbar?.items || []).length > 0;
 
   const menuLevels = useMemo(() => {
-    const menuLevels = [
-      {
+    const menuLevels: Array<{ label: string; type: MobileMenuType }> = [];
+
+    if (hasMainMenuItems) {
+      menuLevels.push({
         label: translate('mobileMenu.mainMenu', 'Main menu'),
         type: MobileMenuType.MAIN_MENU,
-      },
-    ];
+      });
+    }
 
     if (currentProduct && productNavItems.length) {
       menuLevels.push({
@@ -37,7 +45,7 @@ export const useMobileMenuLevels = () => {
       });
     }
 
-    if (sidebarItems.length || activeVersion) {
+    if (sidebarItems.length || activeVersion || navigationTabs?.tabs.length) {
       menuLevels.push({
         label: translate('mobileMenu.previous', 'Previous'),
         type: MobileMenuType.PAGE,

package/src/core/hooks/prompt/use-prompt-actions.ts

@@ -0,0 +1,28 @@
+import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
+import type { AiPromptTarget } from '../../types/prompt';
+
+import { useThemeHooks } from '../use-theme-hooks';
+import { getAiPromptLink } from '../../utils/get-ai-prompt-link';
+import { getBaseDataAttributes } from '../../utils/telemetry/get-base-data-attributes';
+
+type PromptTagData = Parameters<AsyncApiRealmUI.Telemetry['sendPromptTagCopiedMessage']>[0][0];
+
+export type PromptActionHandlers = {
+  reportCopy: () => void;
+  /** Opens the prompt in the AI tool and reports it. */
+  openIn: (target: AiPromptTarget) => void;
+};
+
+export function usePromptActions(prompt: string): PromptActionHandlers {
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+  const tagData: PromptTagData = getBaseDataAttributes('prompt', 'markdocTag');
+
+  return {
+    reportCopy: () => telemetry.sendPromptTagCopiedMessage([tagData]),
+    openIn: (target) => {
+      telemetry.sendPromptTagOpenedMessage([{ ...tagData, target }]);
+      window.open(getAiPromptLink(target, prompt), '_blank', 'noopener,noreferrer');
+    },
+  };
+}