@redocly/theme 0.50.0 → 0.51.0-next.0

package/lib/components/PageNavigation/NextButton.js

@@ -41,9 +41,8 @@ function NextButton({ nextPage, className }) {
         return React.createElement("div", null, "\u00A0");
     }
     const nextPageText = nextPage.label || nextPage.routeSlug || '';
-    const defaultLabel = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next page';
     const translationKey = 'page.nextButton';
-    const label = translate(translationKey, { defaultValue: defaultLabel });
+    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || translate(translationKey, { defaultValue: 'Next page' });
     return (React.createElement(NextButtonWrapper, { "data-component-name": "PageNavigation/NextButton", "data-translation-key": translationKey },
         React.createElement(NextPageLabel, null, label),
         React.createElement(NextPageButton, { size: "large", to: nextPage.link, extraClass: className, variant: "link", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null), iconPosition: "right" }, nextPageText)));

package/lib/components/PageNavigation/PreviousButton.js

@@ -18,9 +18,9 @@ function PreviousButton({ prevPage, className }) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
     const prevPageText = prevPage.label || prevPage.routeSlug || '';
-    const defaultLabel = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) || 'Previous page';
     const translationKey = 'page.previousButton';
-    const label = translate(translationKey, { defaultValue: defaultLabel });
+    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) ||
+        translate(translationKey, { defaultValue: 'Previous page' });
     return (react_1.default.createElement(PreviousButtonWrapper, { "data-component-name": "PageNavigation/PreviousButton", "data-translation-key": translationKey },
         react_1.default.createElement(PreviousPageLabel, null, label),
         react_1.default.createElement(PreviousPageButton, { size: "large", to: prevPage.link, extraClass: className, variant: "link", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), iconPosition: "left" }, prevPageText)));

package/lib/components/Search/SearchAiResponse.d.ts

@@ -2,6 +2,7 @@ export type SearchAiResponseProps = {
     question: string;
     isGeneratingResponse: boolean;
     response?: string;
+    error: string | null;
     resources: {
         url: string;
         title: string;

package/lib/components/Search/SearchAiResponse.js

@@ -13,25 +13,46 @@ const Tag_1 = require("../../components/Tag/Tag");
 const Link_1 = require("../../components/Link/Link");
 const hooks_1 = require("../../core/hooks");
 const Markdown_1 = require("../../components/Markdown/Markdown");
+const Admonition_1 = require("../../components/Admonition/Admonition");
+const ErrorFilledIcon_1 = require("../../icons/ErrorFilledIcon/ErrorFilledIcon");
 function SearchAiResponse(props) {
     const { useMarkdownText } = (0, hooks_1.useThemeHooks)();
-    const { question, response, isGeneratingResponse, resources } = props;
+    const { question, response, isGeneratingResponse, resources, error } = props;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const markdownResponse = useMarkdownText(response || '');
-    return (react_1.default.createElement(ResponseWrapper, { "data-component-name": "Search/SearchAiResponse" },
-        react_1.default.createElement(ResponseHeader, null,
-            isGeneratingResponse ? (react_1.default.createElement(Spinner_1.Spinner, { size: "20px", color: "--search-ai-spinner-icon-color" })) : (react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { size: "20px", color: "--search-ai-checkmark-icon-color" })),
-            react_1.default.createElement(Question, null, question)),
-        react_1.default.createElement(ResponseBody, null,
-            response ? (react_1.default.createElement(ResponseText, Object.assign({ children: markdownResponse, as: "div" }, props))) : (react_1.default.createElement(ThinkingResponseText, { "data-translation-key": "search.ai.thinkingText" }, translate('search.ai.thinkingText', 'Thinking...'))),
-            resources.length && !isGeneratingResponse ? (react_1.default.createElement(Resources, null,
-                react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
-                    resources.length,
-                    " ",
-                    translate('search.ai.resourcesFound', 'resources found')),
-                react_1.default.createElement(ResourceTags, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
-                    react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))) : null)));
+    let responseContainer = null;
+    const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
+    if (hasPendingOrReceivedResponse) {
+        let icon;
+        switch (true) {
+            case error !== null:
+                icon = react_1.default.createElement(ErrorFilledIcon_1.ErrorFilledIcon, { size: "20px", color: "--error-bubble-content-color" });
+                break;
+            case isGeneratingResponse:
+                icon = react_1.default.createElement(Spinner_1.Spinner, { size: "20px", color: "--search-ai-spinner-icon-color" });
+                break;
+            case Boolean(response):
+                icon = react_1.default.createElement(CheckmarkFilledIcon_1.CheckmarkFilledIcon, { size: "20px", color: "--search-ai-checkmark-icon-color" });
+                break;
+        }
+        responseContainer = (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(ResponseHeader, null,
+                icon,
+                react_1.default.createElement(Question, null, question)),
+            react_1.default.createElement(ResponseBody, null,
+                response && react_1.default.createElement(ResponseText, Object.assign({ children: markdownResponse, as: "div" }, props)),
+                !response && isGeneratingResponse && (react_1.default.createElement(ThinkingResponseText, { "data-translation-key": "search.ai.thinkingText" }, translate('search.ai.thinkingText', 'Thinking...'))),
+                error && (react_1.default.createElement(Admonition_1.Admonition, { type: "danger", name: translate('search.ai.error.header', 'Oops! Something went wrong.') }, translate('search.ai.error.description', 'We encountered an issue while processing your search. Please try again later or refine your query. If the problem persists, feel free to contact support.'))),
+                resources.length && !isGeneratingResponse ? (react_1.default.createElement(Resources, null,
+                    react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
+                        resources.length,
+                        " ",
+                        translate('search.ai.resourcesFound', 'resources found')),
+                    react_1.default.createElement(ResourceTags, null, resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: idx, to: resource.url, target: "_blank" },
+                        react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title))))))) : null)));
+    }
+    return (react_1.default.createElement(ResponseWrapper, { "data-component-name": "Search/SearchAiResponse" }, responseContainer));
 }
 const ResponseWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Search/SearchDialog.js

@@ -46,8 +46,8 @@ const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
 const SettingsIcon_1 = require("../../icons/SettingsIcon/SettingsIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 function SearchDialog({ onClose, className }) {
-    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
@@ -79,11 +79,11 @@ function SearchDialog({ onClose, className }) {
                 : undefined;
         }
         return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, onClick: () => {
-                telemetry.send('search_result_clicked', {
+                otelTelemetry.send('search.result.clicked', {
                     query,
                     url: item.document.url,
-                    total_results: results.length,
-                    index,
+                    total_results: results.length.toString(),
+                    index: index.toString(),
                     search_engine: mode,
                 });
             } }));
@@ -116,7 +116,10 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" })))),
                 react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: mode === 'search'
                         ? translate('search.label', 'Search docs...')
-                        : translate('search.ai.label', 'Ask AI assistant'), isLoading: isSearchLoading, showReturnButton: mode === 'ai-dialog', onReturn: () => setMode('search'), onSubmit: mode === 'ai-dialog'
+                        : translate('search.ai.label', 'Ask AI assistant'), isLoading: isSearchLoading, showReturnButton: mode === 'ai-dialog', onReturn: () => {
+                        setMode('search');
+                        aiSearch.clearAiSearchState();
+                    }, onSubmit: mode === 'ai-dialog'
                         ? () => {
                             setQuery('');
                             aiSearch.askQuestion(query);
@@ -147,7 +150,7 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
                         react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
                 advancedSearch && mode === 'search' && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
-                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
+                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources, error: aiSearch.error }))),
             react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),

package/lib/core/hooks/code-walkthrough/use-code-panel.js

@@ -82,9 +82,10 @@ function getCodeLinesFromNode(node, activeStep, areConditionsMet, populateInputs
     }
     else {
         const shouldRenderChunk = areConditionsMet(node.condition);
-        const isHighlighted = activeStep != null &&
-            node.condition.steps.length > 0 &&
-            node.condition.steps.includes(activeStep);
+        const isHighlighted = parentHighlighted ||
+            (activeStep != null &&
+                node.condition.steps.length > 0 &&
+                node.condition.steps.includes(activeStep));
         return shouldRenderChunk
             ? node.children.flatMap((child) => getCodeLinesFromNode(child, activeStep, areConditionsMet, populateInputsWithValue, isHighlighted))
             : [];

package/lib/core/hooks/code-walkthrough/use-code-walkthrough-controls.js

@@ -75,6 +75,11 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     };
     const walkthroughContext = (0, react_1.useMemo)(() => {
         const areConditionsMet = (conditions) => (0, utils_1.matchCodeWalkthroughConditions)(conditions, controlsState);
+        // reset controls
+        for (const control of Object.values(controlsState)) {
+            control.render = true;
+            control.value = control.value || defaultControlsValues[control.type];
+        }
         for (const [id, control] of Object.entries(controlsState)) {
             if (control && !areConditionsMet(control)) {
                 controlsState[id].render = false;

package/lib/core/hooks/use-color-switcher.d.ts

@@ -1,6 +1,6 @@
 export declare const useColorSwitcher: () => {
     isSwitcherHidden: boolean | undefined;
     initActiveColorMode: () => void;
-    switchColorMode: () => string;
+    switchColorMode: (mode?: string) => void;
     activeColorMode: string;
 };

package/lib/core/hooks/use-color-switcher.js

@@ -15,17 +15,20 @@ const useColorSwitcher = () => {
         const activeMode = Array.from(document.documentElement.classList).find((c) => modes.includes(c));
         setActiveColorMode(activeMode || defaultColor);
     };
-    const switchColorMode = () => {
+    const switchColorMode = (mode) => {
+        if (mode && !modes.includes(mode)) {
+            return;
+        }
         const activeIndex = modes.indexOf(activeColorMode);
-        const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
-        localStorage.setItem('colorSchema', mode);
-        document.documentElement.className = `${mode} notransition`;
+        // If specific mode is provided, use it, otherwise cycle through modes
+        const newMode = mode || (activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0]);
+        localStorage.setItem('colorSchema', newMode);
+        document.documentElement.className = `${newMode} notransition`;
         window.requestAnimationFrame(() => {
             document.documentElement.classList.remove('notransition');
         });
-        telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
-        setActiveColorMode(mode);
-        return mode;
+        telemetry.send('color_mode_switched', { from: activeColorMode, to: newMode });
+        setActiveColorMode(newMode);
     };
     return {
         isSwitcherHidden: colorMode === null || colorMode === void 0 ? void 0 : colorMode.hide,

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

@@ -9,6 +9,7 @@ const fallbacks = {
     }),
     useSubmitFeedback: () => ({ submitFeedback: () => { } }),
     useTelemetry: () => ({ telemetry: () => { } }),
+    useOtelTelemetry: () => ({ send: () => { } }),
     useBreadcrumbs: () => [],
     useCodeHighlight: () => ({ highlight: (rawContent) => rawContent }),
     useUserMenu: () => ({}),

package/lib/core/types/api-functions.d.ts

@@ -0,0 +1,5 @@
+export type { ApiFunctionsRequest as Request } from '@redocly/config';
+export type { ApiFunctionsResponse as Response } from '@redocly/config';
+export type { ApiFunctionsContext as Context } from '@redocly/config';
+export type { PropsContext } from '@redocly/config';
+export type { PageStaticData as PropsData } from '@redocly/config';

package/lib/core/types/api-functions.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=api-functions.js.map

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

@@ -73,6 +73,8 @@ export type ThemeHooks = {
             title: string;
             url: string;
         }[];
+        error: null | string;
+        clearAiSearchState: () => void;
     };
     useMarkdownText: (text: string) => React.ReactNode;
     useFacetQuery: (field: string) => {
@@ -98,6 +100,9 @@ export type ThemeHooks = {
     useTelemetry: () => {
         send(action: TelemetryEvent, data: unknown): void;
     };
+    useOtelTelemetry: () => {
+        send(action: OtelTelemetryEvent, data: unknown): void;
+    };
     useUserTeams: () => string[];
     usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
     useCodeHighlight: () => {
@@ -121,5 +126,6 @@ export type L10nConfig = {
         name: string;
     }[];
 };
-type TelemetryEvent = 'search_opened' | 'client_error_caught' | 'breadcrumb_clicked' | 'color_mode_switched' | 'sidebar_item_clicked' | 'sidebar_item_expanded' | 'sidebar_item_collapsed' | 'edit_page_link_clicked' | 'code_snippet_copied' | 'code_snippet_reported' | 'feedback_sent' | 'navbar_menu_item_clicked' | 'login_button_clicked' | 'login_provider_button_clicked' | 'logout_menu_item_clicked' | 'logo_clicked' | 'toc_item_clicked' | 'version_switched' | 'catalog_filter_changed' | 'catalog_item_clicked' | 'scorecard_link_clicked' | 'markdown_anchor_link_clicked' | 'back_to_catalog_button_clicked' | 'sidebar_drilldown_back_button_clicked' | 'footer_item_clicked' | 'request_api_access_button_clicked' | 'sidebar_samples_button_clicked' | 'change_layout_button_clicked' | 'version_picker_selection_change' | 'openapi_docs' | 'replay' | 'catalog_actions_button_clicked' | 'catalog_item_clicked' | 'filter_checkbox_toggled' | 'language_picker_locale_changed' | 'mobile_menu_button_close_clicked' | 'mobile_menu_button_open_clicked' | 'search_input_reset_button_clicked' | 'search_recent_remove_button_clicked' | 'product_picked' | 'search_result_clicked';
+type TelemetryEvent = 'search_opened' | 'client_error_caught' | 'breadcrumb_clicked' | 'color_mode_switched' | 'sidebar_item_clicked' | 'sidebar_item_expanded' | 'sidebar_item_collapsed' | 'edit_page_link_clicked' | 'code_snippet_copied' | 'code_snippet_reported' | 'feedback_sent' | 'navbar_menu_item_clicked' | 'login_button_clicked' | 'login_provider_button_clicked' | 'logout_menu_item_clicked' | 'logo_clicked' | 'toc_item_clicked' | 'version_switched' | 'catalog_filter_changed' | 'catalog_item_clicked' | 'scorecard_link_clicked' | 'markdown_anchor_link_clicked' | 'back_to_catalog_button_clicked' | 'sidebar_drilldown_back_button_clicked' | 'footer_item_clicked' | 'request_api_access_button_clicked' | 'sidebar_samples_button_clicked' | 'change_layout_button_clicked' | 'version_picker_selection_change' | 'openapi_docs' | 'replay' | 'catalog_actions_button_clicked' | 'catalog_item_clicked' | 'filter_checkbox_toggled' | 'language_picker_locale_changed' | 'mobile_menu_button_close_clicked' | 'mobile_menu_button_open_clicked' | 'search_input_reset_button_clicked' | 'search_recent_remove_button_clicked' | 'product_picked';
+type OtelTelemetryEvent = 'page.viewed' | 'error' | 'search.ai.query' | 'search.query' | 'search.result.clicked';
 export {};

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

@@ -10,3 +10,4 @@ export * from '../../core/types/select';
 export * from '../../core/types/sidebar';
 export * from '../../core/types/filter';
 export * from '../../core/types/user-menu';
+export * from '../../core/types/api-functions';

package/lib/core/types/index.js

@@ -26,4 +26,5 @@ __exportStar(require("../../core/types/select"), exports);
 __exportStar(require("../../core/types/sidebar"), exports);
 __exportStar(require("../../core/types/filter"), exports);
 __exportStar(require("../../core/types/user-menu"), exports);
+__exportStar(require("../../core/types/api-functions"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.header' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/ErrorFilledIcon/ErrorFilledIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ErrorFilledIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/ErrorFilledIcon/ErrorFilledIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorFilledIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M10.0002 1.24998C8.84911 1.24285 7.70808 1.4643 6.64326 1.9015C5.57844 2.3387 4.61101 2.98295 3.79707 3.79689C2.98313 4.61083 2.33889 5.57826 1.90168 6.64308C1.46448 7.7079 1.24303 8.84892 1.25017 9.99998C1.24303 11.151 1.46448 12.2921 1.90168 13.3569C2.33889 14.4217 2.98313 15.3891 3.79707 16.2031C4.61101 17.017 5.57844 17.6613 6.64326 18.0985C7.70808 18.5357 8.84911 18.7571 10.0002 18.75C11.1512 18.7571 12.2923 18.5357 13.3571 18.0985C14.4219 17.6613 15.3893 17.017 16.2033 16.2031C17.0172 15.3891 17.6614 14.4217 18.0986 13.3569C18.5359 12.2921 18.7573 11.151 18.7502 9.99998C18.7573 8.84892 18.5359 7.7079 18.0986 6.64308C17.6614 5.57826 17.0172 4.61083 16.2033 3.79689C15.3893 2.98295 14.4219 2.3387 13.3571 1.9015C12.2923 1.4643 11.1512 1.24285 10.0002 1.24998ZM13.4032 14.375L5.62517 6.5973L6.59748 5.62498L14.3752 13.403L13.4032 14.375Z", fill: "#F9316D" })));
+exports.ErrorFilledIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ErrorFilledIcon/ErrorFilledIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ErrorFilledIcon.js.map

package/lib/index.d.ts

@@ -212,6 +212,7 @@ export * from './icons/CharacterIcon/CharacterIcon';
 export * from './icons/FileIcon/FileIcon';
 export * from './icons/ExportIcon/ExportIcon';
 export * from './icons/CertificateIcon/CertificateIcon';
+export * from './icons/ErrorFilledIcon/ErrorFilledIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -264,6 +264,7 @@ __exportStar(require("./icons/CharacterIcon/CharacterIcon"), exports);
 __exportStar(require("./icons/FileIcon/FileIcon"), exports);
 __exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
 __exportStar(require("./icons/CertificateIcon/CertificateIcon"), exports);
+__exportStar(require("./icons/ErrorFilledIcon/ErrorFilledIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/markdoc/components/CodeWalkthrough/CodeStep.js

@@ -53,7 +53,8 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         // If the step is active during first render, scroll to it
         // This is to ensure that the step is visible when the page is loaded
         if (isActive) {
-            handleActivateStep();
+            // Ensure scrollMarginTop calculated before step being scrolled.
+            setTimeout(handleActivateStep, 5);
         }
         // Ignore dependency array because we only need to run this once
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -84,7 +85,7 @@ function CodeStep({ id, heading, stepKey, when, unless, children, }) {
         }
         return null;
     }
-    return (react_1.default.createElement(exports.StepWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeStep", ref: compRef, isActive: isActive, scrollMarginTop: scrollMarginTop, "data-step-key": stepKey, "data-step-active": isActive, onClick: handleActivateStep, onFocus: handleActivateStep, tabIndex: 0 },
+    return (react_1.default.createElement(exports.StepWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeStep", ref: compRef, isActive: isActive, scrollMarginTop: scrollMarginTop, "data-step-key": stepKey, "data-step-active": isActive, onClick: handleActivateStep, onFocus: handleActivateStep, tabIndex: 0, className: "code-step-wrapper" },
         react_1.default.createElement(StepContent, { isActive: isActive },
             heading ? react_1.default.createElement(StepHeading, null, heading) : null,
             children)));

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -44,7 +44,6 @@ const contexts_1 = require("../../../core/contexts");
 const CodePanel_1 = require("../../../markdoc/components/CodeWalkthrough/CodePanel");
 const hooks_1 = require("../../../core/hooks");
 const CodeFilters_1 = require("../../../markdoc/components/CodeWalkthrough/CodeFilters");
-const CodeStep_1 = require("../../../markdoc/components/CodeWalkthrough/CodeStep");
 function CodeWalkthrough(_a) {
     var { children, steps, preview } = _a, attributes = __rest(_a, ["children", "steps", "preview"]);
     // Steps are being modified causing the observer to be recreated in the useCodeWalkthrough hook
@@ -95,7 +94,7 @@ const ContentWrapper = styled_components_1.default.div `
   min-height: 0;
   max-width: var(--md-content-max-width);
 
-  & > *:not(${CodeStep_1.StepWrapper}) {
+  & > *:not(.code-step-wrapper) {
     padding-left: var(--spacing-xl);
   }
   overflow-y: scroll;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.50.0",
+  "version": "0.51.0-next.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/PageNavigation/NextButton.tsx

@@ -22,9 +22,9 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
   }
 
   const nextPageText = nextPage.label || nextPage.routeSlug || '';
-  const defaultLabel = navigation?.nextButton?.text || 'Next page';
   const translationKey = 'page.nextButton';
-  const label = translate(translationKey, { defaultValue: defaultLabel });
+  const label =
+    navigation?.nextButton?.text || translate(translationKey, { defaultValue: 'Next page' });
 
   return (
     <NextButtonWrapper

package/src/components/PageNavigation/PreviousButton.tsx

@@ -22,9 +22,10 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
   }
 
   const prevPageText = prevPage.label || prevPage.routeSlug || '';
-  const defaultLabel = navigation?.previousButton?.text || 'Previous page';
   const translationKey = 'page.previousButton';
-  const label = translate(translationKey, { defaultValue: defaultLabel });
+  const label =
+    navigation?.previousButton?.text ||
+    translate(translationKey, { defaultValue: 'Previous page' });
 
   return (
     <PreviousButtonWrapper

package/src/components/Search/SearchAiResponse.tsx

@@ -8,11 +8,14 @@ import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
+import { Admonition } from '@redocly/theme/components/Admonition/Admonition';
+import { ErrorFilledIcon } from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
 
 export type SearchAiResponseProps = {
   question: string;
   isGeneratingResponse: boolean;
   response?: string;
+  error: string | null;
   resources: {
     url: string;
     title: string;
@@ -21,50 +24,79 @@ export type SearchAiResponseProps = {
 
 export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
   const { useMarkdownText } = useThemeHooks();
-  const { question, response, isGeneratingResponse, resources } = props;
+  const { question, response, isGeneratingResponse, resources, error } = props;
 
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const markdownResponse = useMarkdownText(response || '');
 
+  let responseContainer = null;
+
+  const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
+  if (hasPendingOrReceivedResponse) {
+    let icon;
+    switch (true) {
+      case error !== null:
+        icon = <ErrorFilledIcon size="20px" color="--error-bubble-content-color" />;
+        break;
+      case isGeneratingResponse:
+        icon = <Spinner size="20px" color="--search-ai-spinner-icon-color" />;
+        break;
+      case Boolean(response):
+        icon = <CheckmarkFilledIcon size="20px" color="--search-ai-checkmark-icon-color" />;
+        break;
+    }
+    responseContainer = (
+      <>
+        <ResponseHeader>
+          {icon}
+          <Question>{question}</Question>
+        </ResponseHeader>
+        <ResponseBody>
+          {response && <ResponseText children={markdownResponse} as="div" {...props} />}
+          {!response && isGeneratingResponse && (
+            <ThinkingResponseText data-translation-key="search.ai.thinkingText">
+              {translate('search.ai.thinkingText', 'Thinking...')}
+            </ThinkingResponseText>
+          )}
+          {error && (
+            <Admonition
+              type="danger"
+              name={translate('search.ai.error.header', 'Oops! Something went wrong.')}
+            >
+              {translate(
+                'search.ai.error.description',
+                'We encountered an issue while processing your search. Please try again later or refine your query. If the problem persists, feel free to contact support.',
+              )}
+            </Admonition>
+          )}
+          {resources.length && !isGeneratingResponse ? (
+            <Resources>
+              <ResourcesTitle data-translation-key="search.ai.resourcesFound">
+                {resources.length} {translate('search.ai.resourcesFound', 'resources found')}
+              </ResourcesTitle>
+              <ResourceTags>
+                {resources.map((resource, idx) => (
+                  <Link key={idx} to={resource.url} target="_blank">
+                    <ResourceTag
+                      borderless
+                      icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}
+                    >
+                      {resource.title}
+                    </ResourceTag>
+                  </Link>
+                ))}
+              </ResourceTags>
+            </Resources>
+          ) : null}
+        </ResponseBody>
+      </>
+    );
+  }
+
   return (
     <ResponseWrapper data-component-name="Search/SearchAiResponse">
-      <ResponseHeader>
-        {isGeneratingResponse ? (
-          <Spinner size="20px" color="--search-ai-spinner-icon-color" />
-        ) : (
-          <CheckmarkFilledIcon size="20px" color="--search-ai-checkmark-icon-color" />
-        )}
-        <Question>{question}</Question>
-      </ResponseHeader>
-      <ResponseBody>
-        {response ? (
-          <ResponseText children={markdownResponse} as="div" {...props} />
-        ) : (
-          <ThinkingResponseText data-translation-key="search.ai.thinkingText">
-            {translate('search.ai.thinkingText', 'Thinking...')}
-          </ThinkingResponseText>
-        )}
-        {resources.length && !isGeneratingResponse ? (
-          <Resources>
-            <ResourcesTitle data-translation-key="search.ai.resourcesFound">
-              {resources.length} {translate('search.ai.resourcesFound', 'resources found')}
-            </ResourcesTitle>
-            <ResourceTags>
-              {resources.map((resource, idx) => (
-                <Link key={idx} to={resource.url} target="_blank">
-                  <ResourceTag
-                    borderless
-                    icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}
-                  >
-                    {resource.title}
-                  </ResourceTag>
-                </Link>
-              ))}
-            </ResourceTags>
-          </Resources>
-        ) : null}
-      </ResponseBody>
+      {responseContainer}
     </ResponseWrapper>
   );
 }

package/src/components/Search/SearchDialog.tsx

@@ -27,9 +27,9 @@ export type SearchDialogProps = {
 };
 
 export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element {
-  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } =
+  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useOtelTelemetry } =
     useThemeHooks();
-  const telemetry = useTelemetry();
+  const otelTelemetry = useOtelTelemetry();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
@@ -88,11 +88,11 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
         item={item}
         product={itemProduct}
         onClick={() => {
-          telemetry.send('search_result_clicked', {
+          otelTelemetry.send('search.result.clicked', {
             query,
             url: item.document.url,
-            total_results: results.length,
-            index,
+            total_results: results.length.toString(),
+            index: index.toString(),
             search_engine: mode,
           });
         }}
@@ -146,7 +146,10 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
             }
             isLoading={isSearchLoading}
             showReturnButton={mode === 'ai-dialog'}
-            onReturn={() => setMode('search')}
+            onReturn={() => {
+              setMode('search');
+              aiSearch.clearAiSearchState();
+            }}
             onSubmit={
               mode === 'ai-dialog'
                 ? () => {
@@ -250,6 +253,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
               isGeneratingResponse={aiSearch.isGeneratingResponse}
               response={aiSearch.response}
               resources={aiSearch.resources}
+              error={aiSearch.error}
             />
           )}
         </SearchDialogBody>

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

@@ -145,9 +145,10 @@ function getCodeLinesFromNode(
     const shouldRenderChunk = areConditionsMet(node.condition);
 
     const isHighlighted =
-      activeStep != null &&
-      node.condition.steps.length > 0 &&
-      node.condition.steps.includes(activeStep);
+      parentHighlighted ||
+      (activeStep != null &&
+        node.condition.steps.length > 0 &&
+        node.condition.steps.includes(activeStep));
 
     return shouldRenderChunk
       ? node.children.flatMap((child) =>

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

@@ -155,6 +155,11 @@ export function useCodeWalkthroughControls(
   const walkthroughContext = useMemo(() => {
     const areConditionsMet = (conditions: CodeWalkthroughConditionsObject) =>
       matchCodeWalkthroughConditions(conditions, controlsState);
+    // reset controls
+    for (const control of Object.values(controlsState)) {
+      control.render = true;
+      control.value = control.value || defaultControlsValues[control.type];
+    }
 
     for (const [id, control] of Object.entries(controlsState)) {
       if (control && !areConditionsMet(control)) {

package/src/core/hooks/use-color-switcher.ts

@@ -18,19 +18,24 @@ export const useColorSwitcher = () => {
     setActiveColorMode(activeMode || defaultColor);
   };
 
-  const switchColorMode = (): string => {
+  const switchColorMode = (mode?: string): void => {
+    if (mode && !modes.includes(mode)) {
+      return;
+    }
+
     const activeIndex = modes.indexOf(activeColorMode);
-    const mode = activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0];
-    localStorage.setItem('colorSchema', mode);
-    document.documentElement.className = `${mode} notransition`;
+    // If specific mode is provided, use it, otherwise cycle through modes
+    const newMode = mode || (activeIndex < modes.length - 1 ? modes[activeIndex + 1] : modes[0]);
+
+    localStorage.setItem('colorSchema', newMode);
+    document.documentElement.className = `${newMode} notransition`;
 
     window.requestAnimationFrame(() => {
       document.documentElement.classList.remove('notransition');
     });
-    telemetry.send('color_mode_switched', { from: activeColorMode, to: mode });
+    telemetry.send('color_mode_switched', { from: activeColorMode, to: newMode });
 
-    setActiveColorMode(mode);
-    return mode;
+    setActiveColorMode(newMode);
   };
 
   return {

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

@@ -11,6 +11,7 @@ const fallbacks = {
   }),
   useSubmitFeedback: () => ({ submitFeedback: () => {} }),
   useTelemetry: () => ({ telemetry: () => {} }),
+  useOtelTelemetry: () => ({ send: () => {} }),
   useBreadcrumbs: () => [],
   useCodeHighlight: () => ({ highlight: (rawContent: string) => rawContent }),
   useUserMenu: () => ({}),

package/src/core/types/api-functions.ts

@@ -0,0 +1,5 @@
+export type { ApiFunctionsRequest as Request } from '@redocly/config';
+export type { ApiFunctionsResponse as Response } from '@redocly/config';
+export type { ApiFunctionsContext as Context } from '@redocly/config';
+export type { PropsContext } from '@redocly/config';
+export type { PageStaticData as PropsData } from '@redocly/config';

package/src/core/types/hooks.ts

@@ -88,6 +88,8 @@ export type ThemeHooks = {
       title: string;
       url: string;
     }[];
+    error: null | string;
+    clearAiSearchState: () => void;
   };
   useMarkdownText: (text: string) => React.ReactNode;
   useFacetQuery: (field: string) => {
@@ -110,6 +112,7 @@ export type ThemeHooks = {
     | undefined;
   useCatalog: (config: CatalogConfig) => FilteredCatalog;
   useTelemetry: () => { send(action: TelemetryEvent, data: unknown): void };
+  useOtelTelemetry: () => { send(action: OtelTelemetryEvent, data: unknown): void };
   useUserTeams: () => string[];
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
   useCodeHighlight: () => {
@@ -173,5 +176,11 @@ type TelemetryEvent =
   | 'mobile_menu_button_open_clicked'
   | 'search_input_reset_button_clicked'
   | 'search_recent_remove_button_clicked'
-  | 'product_picked'
-  | 'search_result_clicked';
+  | 'product_picked';
+
+type OtelTelemetryEvent =
+  | 'page.viewed'
+  | 'error'
+  | 'search.ai.query'
+  | 'search.query'
+  | 'search.result.clicked';

package/src/core/types/index.ts

@@ -10,3 +10,4 @@ export * from '@redocly/theme/core/types/select';
 export * from '@redocly/theme/core/types/sidebar';
 export * from '@redocly/theme/core/types/filter';
 export * from '@redocly/theme/core/types/user-menu';
+export * from '@redocly/theme/core/types/api-functions';

package/src/core/types/l10n.ts

@@ -88,6 +88,8 @@ export type TranslationKey =
   | 'search.ai.button'
   | 'search.ai.label'
   | 'search.ai.disclaimer'
+  | 'search.ai.error.description'
+  | 'search.ai.error.header'
   | 'toc.header'
   | 'footer.copyrightText'
   | 'page.homeButton'

package/src/icons/ErrorFilledIcon/ErrorFilledIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M10.0002 1.24998C8.84911 1.24285 7.70808 1.4643 6.64326 1.9015C5.57844 2.3387 4.61101 2.98295 3.79707 3.79689C2.98313 4.61083 2.33889 5.57826 1.90168 6.64308C1.46448 7.7079 1.24303 8.84892 1.25017 9.99998C1.24303 11.151 1.46448 12.2921 1.90168 13.3569C2.33889 14.4217 2.98313 15.3891 3.79707 16.2031C4.61101 17.017 5.57844 17.6613 6.64326 18.0985C7.70808 18.5357 8.84911 18.7571 10.0002 18.75C11.1512 18.7571 12.2923 18.5357 13.3571 18.0985C14.4219 17.6613 15.3893 17.017 16.2033 16.2031C17.0172 15.3891 17.6614 14.4217 18.0986 13.3569C18.5359 12.2921 18.7573 11.151 18.7502 9.99998C18.7573 8.84892 18.5359 7.7079 18.0986 6.64308C17.6614 5.57826 17.0172 4.61083 16.2033 3.79689C15.3893 2.98295 14.4219 2.3387 13.3571 1.9015C12.2923 1.4643 11.1512 1.24285 10.0002 1.24998ZM13.4032 14.375L5.62517 6.5973L6.59748 5.62498L14.3752 13.403L13.4032 14.375Z"
+      fill="#F9316D"
+    />
+  </svg>
+);
+
+export const ErrorFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ErrorFilledIcon/ErrorFilledIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -236,6 +236,7 @@ export * from '@redocly/theme/icons/CharacterIcon/CharacterIcon';
 export * from '@redocly/theme/icons/FileIcon/FileIcon';
 export * from '@redocly/theme/icons/ExportIcon/ExportIcon';
 export * from '@redocly/theme/icons/CertificateIcon/CertificateIcon';
+export * from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';

package/src/markdoc/components/CodeWalkthrough/CodeStep.tsx

@@ -49,7 +49,8 @@ export function CodeStep({
     // If the step is active during first render, scroll to it
     // This is to ensure that the step is visible when the page is loaded
     if (isActive) {
-      handleActivateStep();
+      // Ensure scrollMarginTop calculated before step being scrolled.
+      setTimeout(handleActivateStep, 5);
     }
 
     // Ignore dependency array because we only need to run this once
@@ -97,6 +98,7 @@ export function CodeStep({
       onClick={handleActivateStep}
       onFocus={handleActivateStep}
       tabIndex={0}
+      className="code-step-wrapper"
     >
       <StepContent isActive={isActive}>
         {heading ? <StepHeading>{heading}</StepHeading> : null}

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -13,7 +13,6 @@ import {
   CodeFilters,
   GetFilterState,
 } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
-import { StepWrapper } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeStep';
 
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
 
@@ -92,7 +91,7 @@ const ContentWrapper = styled.div`
   min-height: 0;
   max-width: var(--md-content-max-width);
 
-  & > *:not(${StepWrapper}) {
+  & > *:not(.code-step-wrapper) {
     padding-left: var(--spacing-xl);
   }
   overflow-y: scroll;