@redocly/theme 0.59.0-next.1 → 0.59.0-next.10

package/lib/components/VersionPicker/VersionPicker.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

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

@@ -6,10 +6,11 @@ export declare enum AiSearchError {
     EmptyResponse = "empty_response",
     ErrorProcessingResponse = "error_processing_response"
 }
-export declare const enum AiSearchConversationRole {
-    USER = "user",
-    ASSISTANT = "assistant"
-}
+export declare const AiSearchConversationRole: {
+    readonly USER: "user";
+    readonly ASSISTANT: "assistant";
+};
+export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof typeof AiSearchConversationRole];
 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;

package/lib/core/constants/search.js

@@ -9,11 +9,10 @@ var AiSearchError;
     AiSearchError["EmptyResponse"] = "empty_response";
     AiSearchError["ErrorProcessingResponse"] = "error_processing_response";
 })(AiSearchError || (exports.AiSearchError = AiSearchError = {}));
-var AiSearchConversationRole;
-(function (AiSearchConversationRole) {
-    AiSearchConversationRole["USER"] = "user";
-    AiSearchConversationRole["ASSISTANT"] = "assistant";
-})(AiSearchConversationRole || (exports.AiSearchConversationRole = AiSearchConversationRole = {}));
+exports.AiSearchConversationRole = {
+    USER: 'user',
+    ASSISTANT: 'assistant',
+};
 const defaultErrorConfig = {
     headerKey: 'search.ai.error.header',
     headerDefault: 'Oops! Something went wrong.',

package/lib/core/contexts/CodeSnippetContext.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActiveCodeSnippetId = exports.useCodeSnippetContext = exports.CodeSnippetContext = exports.CODE_GROUP_SNIPPET_NAME_KEY = void 0;
 exports.CodeSnippetProvider = CodeSnippetProvider;

package/lib/core/hooks/index.d.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';

package/lib/core/hooks/index.js

@@ -42,6 +42,7 @@ __exportStar(require("./use-language-picker"), exports);
 __exportStar(require("./use-product-picker"), exports);
 __exportStar(require("./search/use-search-dialog"), exports);
 __exportStar(require("./search/use-search-filter"), exports);
+__exportStar(require("./search/use-feedback-tooltip"), exports);
 __exportStar(require("./use-controlled-state"), exports);
 __exportStar(require("./use-codeblock-tabs-controls"), exports);
 __exportStar(require("./code-walkthrough/use-code-walkthrough"), exports);

package/lib/core/hooks/menu/use-nested-menu.js

@@ -71,7 +71,7 @@ function useNestedMenu({ item, labelRef, nestedMenuRef }) {
         }
         const [firstChild] = item.items;
         if (!isExpanded && item.selectFirstItemOnExpand && firstChild.link) {
-            yield (0, load_and_navigate_1.loadAndNavigate)({ navigate, to: firstChild.link });
+            yield (0, load_and_navigate_1.loadAndNavigate)({ navigate, to: (0, urls_1.withPathPrefix)(firstChild.link) });
         }
         setIsExpanded(!isExpanded);
     }), [item, isExpanded, navigate, location.pathname, setIsExpanded]);

package/lib/core/hooks/search/use-feedback-tooltip.d.ts

@@ -0,0 +1,6 @@
+type UseFeedbackTooltipReturn = {
+    isOpen: boolean;
+    showTooltip: () => void;
+};
+export declare function useFeedbackTooltip(): UseFeedbackTooltipReturn;
+export {};

package/lib/core/hooks/search/use-feedback-tooltip.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeedbackTooltip = useFeedbackTooltip;
+const react_1 = require("react");
+const use_control_1 = require("../use-control");
+const DEFAULT_TOOLTIP_DURATION = 1500;
+function useFeedbackTooltip() {
+    const [closeTooltipTimeout, setCloseTooltipTimeout] = (0, react_1.useState)(null);
+    const tooltipControl = (0, use_control_1.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,
+    };
+}
+//# sourceMappingURL=use-feedback-tooltip.js.map

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>>;

package/lib/core/hooks/use-tabs.js

@@ -6,15 +6,20 @@ const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const MORE_BUTTON_WIDTH = 80;
 const TABS_GAP = 8;
-function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
+function useTabs({ activeTab, onTabChange, totalTabs, containerRef, }) {
     const [tabs, setTabs] = (0, react_1.useState)({
         visible: Array.from({ length: totalTabs }, (_, i) => i),
         overflow: [],
     });
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const isFirstCalculation = (0, react_1.useRef)(true);
     const tabRefs = (0, react_1.useRef)([]);
     const tabWidthsRef = (0, react_1.useRef)([]);
     const tabLabelsRef = (0, react_1.useRef)([]);
-    const allTabsHidden = (0, react_1.useMemo)(() => tabs.visible.length === 0, [tabs.visible]);
+    const activeTabRef = (0, react_1.useRef)(activeTab);
+    const calculateVisibleTabsRef = (0, react_1.useRef)(null);
+    // Synchronously update ref before any callbacks or effects run
+    activeTabRef.current = activeTab;
     const setTabRef = (0, react_1.useCallback)((element, index) => {
         tabRefs.current[index] = element;
         const width = element === null || element === void 0 ? void 0 : element.offsetWidth;
@@ -25,18 +30,25 @@ function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
         if (label) {
             tabLabelsRef.current[index] = label;
         }
-    }, []);
-    const focusTab = (index) => {
+        // Trigger calculation once all tabs are registered
+        if (isFirstCalculation.current &&
+            tabWidthsRef.current.length >= totalTabs &&
+            tabLabelsRef.current.length >= totalTabs &&
+            calculateVisibleTabsRef.current) {
+            requestAnimationFrame(calculateVisibleTabsRef.current);
+        }
+    }, [totalTabs]);
+    const focusTab = (0, react_1.useCallback)((index) => {
         const currentElement = tabRefs.current[index];
         currentElement === null || currentElement === void 0 ? void 0 : currentElement.focus();
-    };
+    }, []);
     const onTabSelect = (0, react_1.useCallback)((index) => {
         var _a;
         focusTab(index);
         const label = (_a = tabRefs.current[index]) === null || _a === void 0 ? void 0 : _a.getAttribute('data-label');
         if (label)
             onTabChange(label);
-    }, [onTabChange]);
+    }, [onTabChange, focusTab]);
     const handleKeyboard = (0, react_1.useCallback)((event, index) => {
         let newIndex = index;
         if (event.key === 'ArrowRight') {
@@ -59,109 +71,155 @@ function useTabs({ activeTab, onTabChange, totalTabs, containerRef }) {
         onTabSelect(newIndex);
     }, [totalTabs, onTabSelect]);
     const replaceLastVisibleTabWithClickedOverflowTab = (0, react_1.useCallback)((clickedIndex) => {
-        const { visible: visibleTabs, overflow: overflowTabs } = tabs;
-        // Indexes of visible tabs should be sorted(asc), to replace the last visible tab with the clicked tab
-        const newVisibleTabs = [...visibleTabs].sort((a, b) => a - b);
-        const newOverflowTabs = [...overflowTabs];
-        const clickedIdxInOverflow = newOverflowTabs.indexOf(clickedIndex);
-        if (clickedIdxInOverflow !== -1) {
-            const lastVisible = newVisibleTabs[newVisibleTabs.length - 1];
-            newOverflowTabs.splice(clickedIdxInOverflow, 1);
-            newOverflowTabs.unshift(lastVisible);
-            newVisibleTabs.splice(newVisibleTabs.length - 1, 1);
-            newVisibleTabs.unshift(clickedIndex);
-        }
-        setTabs({
-            visible: newVisibleTabs,
-            overflow: newOverflowTabs,
+        setTabs((prevTabs) => {
+            const { visible: visibleTabs, overflow: overflowTabs } = prevTabs;
+            const sortedVisible = [...visibleTabs].sort((a, b) => a - b);
+            const lastVisible = sortedVisible[sortedVisible.length - 1];
+            return {
+                visible: visibleTabs.map((idx) => (idx === lastVisible ? clickedIndex : idx)),
+                overflow: overflowTabs.map((idx) => (idx === clickedIndex ? lastVisible : idx)),
+            };
         });
-    }, [tabs]);
+    }, []);
     const onTabClick = (0, react_1.useCallback)((labelOrIndex) => {
         const clickedIndex = typeof labelOrIndex === 'string'
             ? tabRefs.current.findIndex((ref) => (ref === null || ref === void 0 ? void 0 : ref.getAttribute('data-label')) === labelOrIndex)
             : labelOrIndex;
         if (clickedIndex === -1)
             return;
-        const hasOverflowTabs = tabs.overflow.length > 0;
-        if (hasOverflowTabs && !allTabsHidden && tabs.overflow.includes(clickedIndex)) {
-            replaceLastVisibleTabWithClickedOverflowTab(clickedIndex);
-        }
         const label = tabLabelsRef.current[clickedIndex];
-        if (label) {
-            onTabChange(label);
-            focusTab(clickedIndex);
+        if (!label)
+            return;
+        // If this is an overflow tab, replace it with a visible one
+        if (tabs.overflow.includes(clickedIndex)) {
+            replaceLastVisibleTabWithClickedOverflowTab(clickedIndex);
         }
-    }, [allTabsHidden, tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab]);
+        onTabChange(label);
+        focusTab(clickedIndex);
+    }, [tabs.overflow, onTabChange, replaceLastVisibleTabWithClickedOverflowTab, focusTab]);
     const calculateVisibleTabs = (0, react_1.useCallback)(() => {
         const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
         if (!container)
             return;
         const containerWidth = container.offsetWidth;
         const tabWidths = tabWidthsRef.current;
-        const activeTabIndex = tabRefs.current.findIndex((ref) => (ref === null || ref === void 0 ? void 0 : ref.getAttribute('data-label')) === activeTab);
-        // Active tab should always be visible, so we include it at the beginning of the array
+        const tabLabels = tabLabelsRef.current;
+        // Wait until all tabs are registered before calculating
+        if (tabWidths.length < totalTabs || tabLabels.length < totalTabs) {
+            return;
+        }
+        // Check if container has proper width (not zero)
+        if (containerWidth === 0) {
+            return;
+        }
+        // Find active tab index by label in tabLabelsRef, not by DOM element
+        // because tab might not be rendered if it's in overflow
+        const activeTabIndex = tabLabels.findIndex((label) => label === activeTabRef.current);
         let tabsWidth = activeTabIndex !== -1 ? tabWidths[activeTabIndex] : 0;
-        const visible = activeTabIndex !== -1 ? [activeTabIndex] : [];
-        const overflow = [];
+        const visibleTabs = activeTabIndex !== -1 ? [activeTabIndex] : [];
+        const overflowTabs = [];
         for (let i = 0; i < tabWidths.length; i++) {
-            // Skip active tab, it was added initially
-            if (i === activeTabIndex) {
+            if (i === activeTabIndex)
                 continue;
-            }
             const tabWidthWithGap = tabWidths[i] + TABS_GAP;
             const projectedWidth = tabsWidth + tabWidthWithGap;
             if (projectedWidth <= containerWidth) {
-                visible.push(i);
+                visibleTabs.push(i);
                 tabsWidth += tabWidthWithGap;
             }
             else {
-                overflow.push(i);
+                overflowTabs.push(i);
             }
         }
-        if (overflow.length > 0) {
+        if (overflowTabs.length > 0) {
             tabsWidth += MORE_BUTTON_WIDTH;
-            // Remove tabs starting from the end of the array until the width of the visible tabs is less than the container width
-            while (tabsWidth > containerWidth && visible.length) {
-                const removed = visible.pop();
-                if (removed !== undefined) {
-                    overflow.unshift(removed);
+            while (tabsWidth > containerWidth && visibleTabs.length > 1) {
+                const removed = visibleTabs.pop();
+                // Never remove the active tab - it should always stay visible or be the last one
+                if (removed !== undefined && removed !== activeTabIndex) {
+                    overflowTabs.unshift(removed);
                     tabsWidth -= tabWidths[removed];
                 }
+                else if (removed === activeTabIndex) {
+                    // Put it back if we accidentally removed the active tab
+                    visibleTabs.push(removed);
+                    break;
+                }
+            }
+            // If even with only the active tab visible, it doesn't fit with More button,
+            // move all tabs to overflow (show only dropdown)
+            if (tabsWidth > containerWidth && visibleTabs.length === 1) {
+                overflowTabs.unshift(...visibleTabs);
+                visibleTabs.length = 0;
             }
         }
         setTabs({
-            visible,
-            overflow,
+            visible: visibleTabs,
+            overflow: overflowTabs,
         });
-    }, [containerRef, activeTab]);
+        // Set ready state on first calculation
+        if (isFirstCalculation.current) {
+            isFirstCalculation.current = false;
+            setIsReady(true);
+        }
+    }, [containerRef, totalTabs]);
+    // Store calculateVisibleTabs in ref for use in setTabRef
+    calculateVisibleTabsRef.current = calculateVisibleTabs;
+    // Reset isFirstCalculation when totalTabs changes (new page/tabs)
     (0, react_1.useEffect)(() => {
-        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current))
+        isFirstCalculation.current = true;
+        setIsReady(false);
+        // Clear refs so we wait for new tabs to register
+        tabWidthsRef.current = [];
+        tabLabelsRef.current = [];
+    }, [totalTabs]);
+    // Call calculateVisibleTabs on first render and resize
+    (0, react_1.useEffect)(() => {
+        const container = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+        if (!container)
             return;
-        let resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
+        let resizeTimeout = null;
+        // Use ResizeObserver to wait until container has proper size
+        const resizeObserver = new ResizeObserver(() => {
+            if (resizeTimeout)
+                cancelAnimationFrame(resizeTimeout);
+            resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
+        });
+        resizeObserver.observe(container);
         const handleResize = () => {
-            if (resizeTimeout) {
+            if (resizeTimeout)
                 cancelAnimationFrame(resizeTimeout);
-            }
             resizeTimeout = requestAnimationFrame(calculateVisibleTabs);
         };
         window.addEventListener('resize', handleResize);
         return () => {
+            resizeObserver.disconnect();
             window.removeEventListener('resize', handleResize);
-            cancelAnimationFrame(resizeTimeout);
+            if (resizeTimeout)
+                cancelAnimationFrame(resizeTimeout);
         };
     }, [containerRef, totalTabs, calculateVisibleTabs]);
+    // Recalculate when activeTab changes to ensure it's visible
+    (0, react_1.useEffect)(() => {
+        if (!(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || isFirstCalculation.current)
+            return;
+        requestAnimationFrame(calculateVisibleTabs);
+    }, [activeTab, containerRef, calculateVisibleTabs]);
     return {
         setTabRef,
         onTabClick,
         handleKeyboard,
         visibleTabs: tabs.visible,
         overflowTabs: tabs.overflow,
-        allTabsHidden,
+        isReady,
     };
 }
 const useActiveTab = ({ initialTab, tabsId }) => {
     const [searchParams, setSearchParams] = (0, react_router_dom_1.useSearchParams)();
-    const [activeTab, setActiveTab] = (0, react_1.useState)(getInitialTab({ initialTab, searchParams, tabsId }));
+    const initialTabValue = (0, react_1.useMemo)(() => getInitialTab({ initialTab, searchParams, tabsId }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTabValue);
     const prevActiveTabRef = (0, react_1.useRef)(activeTab);
     (0, react_1.useEffect)(() => {
         const hasActiveTabChanged = prevActiveTabRef.current !== activeTab;
@@ -174,10 +232,10 @@ const useActiveTab = ({ initialTab, tabsId }) => {
             return searchParams;
         });
     }, [activeTab, setSearchParams, tabsId]);
-    return {
+    return (0, react_1.useMemo)(() => ({
         activeTab,
         setActiveTab,
-    };
+    }), [activeTab]);
 };
 exports.useActiveTab = useActiveTab;
 const getInitialTab = ({ initialTab, searchParams, tabsId }) => {

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -36,20 +36,22 @@ export declare const useTelemetryFallback: () => {
     sendLanguagePickerLocaleChangedMessage: () => void;
     sendSearchOpenedMessage: () => void;
     sendSearchQueryMessage: () => void;
+    sendSearchAiOpenedMessage: () => void;
     sendSearchAIQueryMessage: () => void;
+    sendSearchAIFeedbackMessage: () => void;
     sendFeedbackMessage: () => void;
     sendSearchResultClickedMessage: () => void;
     sendRedirectMessage: () => void;
     sendOpenapiDocsMessage: () => void;
     sendCopyCodeSnippetClickedMessage: () => void;
-    sendOpenapiDocsViewedMessage: () => void;
-    sendOpenapiDocsPerformanceMetricsMessage: () => void;
-    sendOpenapiDocsDownloadDefinitionClickedMessage: () => void;
-    sendOpenapiDocsSelectLanguageClickedMessage: () => void;
-    sendOpenapiDocsExpandCollapseAllClickedMessage: () => void;
-    sendOpenapiDocsSwitchServersClickedMessage: () => void;
-    sendOpenapiDocsExamplesSwitcherClickedMessage: () => void;
-    sendOpenapiDocsTryItOpenedMessage: () => void;
+    sendViewedMessage: () => void;
+    sendPerformanceMetricsMessage: () => void;
+    sendDownloadDefinitionClickedMessage: () => void;
+    sendSelectLanguageClickedMessage: () => void;
+    sendExpandCollapseAllClickedMessage: () => void;
+    sendSwitchServersClickedMessage: () => void;
+    sendExamplesSwitcherClickedMessage: () => void;
+    sendTryItOpenedMessage: () => void;
     sendAsyncapiDocsViewedMessage: () => void;
     sendAsyncapiDocsPerformanceMetricsMessage: () => void;
     sendAsyncapiDocsSwitchMessageClickedMessage: () => void;

package/lib/core/hooks/use-telemetry-fallback.js

@@ -40,20 +40,22 @@ const useTelemetryFallback = () => ({
     sendLanguagePickerLocaleChangedMessage: () => { },
     sendSearchOpenedMessage: () => { },
     sendSearchQueryMessage: () => { },
+    sendSearchAiOpenedMessage: () => { },
     sendSearchAIQueryMessage: () => { },
+    sendSearchAIFeedbackMessage: () => { },
     sendFeedbackMessage: () => { },
     sendSearchResultClickedMessage: () => { },
     sendRedirectMessage: () => { },
     sendOpenapiDocsMessage: () => { },
     sendCopyCodeSnippetClickedMessage: () => { },
-    sendOpenapiDocsViewedMessage: () => { },
-    sendOpenapiDocsPerformanceMetricsMessage: () => { },
-    sendOpenapiDocsDownloadDefinitionClickedMessage: () => { },
-    sendOpenapiDocsSelectLanguageClickedMessage: () => { },
-    sendOpenapiDocsExpandCollapseAllClickedMessage: () => { },
-    sendOpenapiDocsSwitchServersClickedMessage: () => { },
-    sendOpenapiDocsExamplesSwitcherClickedMessage: () => { },
-    sendOpenapiDocsTryItOpenedMessage: () => { },
+    sendViewedMessage: () => { },
+    sendPerformanceMetricsMessage: () => { },
+    sendDownloadDefinitionClickedMessage: () => { },
+    sendSelectLanguageClickedMessage: () => { },
+    sendExpandCollapseAllClickedMessage: () => { },
+    sendSwitchServersClickedMessage: () => { },
+    sendExamplesSwitcherClickedMessage: () => { },
+    sendTryItOpenedMessage: () => { },
     sendAsyncapiDocsViewedMessage: () => { },
     sendAsyncapiDocsPerformanceMetricsMessage: () => { },
     sendAsyncapiDocsSwitchMessageClickedMessage: () => { },

package/lib/core/styles/dark.js

@@ -37,6 +37,10 @@ const replayDarkMode = (0, styled_components_1.css) `
   --replay-server-variable-bg-color-hover: rgba(31, 10, 144, 0.4); // @presenter Color
   --replay-path-parameter-bg-color-hover: rgba(5, 88, 99, 0.4); // @presenter Color
 
+  --replay-runtime-expression-color:  rgba(147, 166, 249, 1); // @presenter Color
+  --replay-runtime-expression-bg-color: rgba(147, 166, 249, 0.16); // @presenter Color
+  --replay-operators-color: rgba(168, 143, 88, 1); // @presenter Color
+
   // @tokens End
 `;
 exports.darkMode = (0, styled_components_1.css) `

package/lib/core/styles/global.js

@@ -1203,6 +1203,10 @@ const replay = (0, styled_components_1.css) `
   --replay-server-variable-bg-color-hover: rgba(119, 45, 240, 0.16); // @presenter Color
   --replay-path-parameter-bg-color-hover: rgba(4, 117, 161, 0.16); // @presenter Color
 
+  --replay-runtime-expression-color: rgba(54, 90, 249, 1); // @presenter Color
+  --replay-runtime-expression-bg-color: rgba(54, 90, 249, 0.08); // @presenter Color
+  --replay-operators-color: rgba(193, 142, 31, 1); // @presenter Color
+
   // @tokens End
 `;
 exports.styles = (0, styled_components_1.css) `

package/lib/core/templates/Markdown.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = default_1;
 const React = __importStar(require("react"));

package/lib/core/types/hooks.d.ts

@@ -60,7 +60,7 @@ export type ThemeHooks = {
         breadcrumbs: BreadcrumbItem[];
         currentItemSiblings?: BreadcrumbItem[];
     };
-    useSearch: (product?: string, autoSearchDisabled?: boolean) => {
+    useSearch: (product?: string, autoSearchDisabled?: boolean, searchSessionId?: string) => {
         query: string;
         setQuery: React.Dispatch<React.SetStateAction<string>>;
         filter: SearchFilterItem[];
@@ -78,7 +78,7 @@ export type ThemeHooks = {
     };
     useAiSearch: (options?: {
         filter?: SearchFilterItem[];
-    }) => {
+    }, searchSessionId?: string) => {
         askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
         isGeneratingResponse: boolean;
         question: string;
@@ -112,7 +112,10 @@ export type ThemeHooks = {
         prevPage?: ResolvedNavItemWithLink;
         nextPage?: ResolvedNavItemWithLink;
     } | undefined;
-    useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number, initialViewMode?: CatalogViewMode) => UseCatalogResponse;
+    useCatalog: (config?: CatalogEntityConfig, serverFilters?: Record<string, {
+        value: string;
+        count: number;
+    }[]>, entitiesCounterInitial?: number, initialViewMode?: CatalogViewMode) => UseCatalogResponse;
     useCatalogSort: () => UseCatalogSortResponse;
     useCatalogSearch: () => UseCatalogSearchResponse;
     useFetchCatalogEntities: (params: CatalogApiParams, initialData?: BffCatalogEntityList) => CatalogApiResults<BffCatalogEntity, BffCatalogEntityList>;