@redocly/theme 0.44.6 → 0.44.8

package/lib/components/Button/Button.js

@@ -154,7 +154,7 @@ const StyledButton = styled_components_1.default.button.attrs((props) => ({
     `}
 `;
 const ButtonComponent = (props) => {
-    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, props, { iconOnly: !props.children && props.icon !== null, tabIndex: props.to ? -1 : 0 }),
+    const button = (react_1.default.createElement(StyledButton, Object.assign({ "data-component-name": "Button/Button" }, props, { iconOnly: !props.children && props.icon !== null, tabIndex: props.to ? -1 : undefined }),
         props.icon && props.iconPosition !== 'right' && props.icon,
         props.children,
         props.icon && props.iconPosition === 'right' && props.icon));

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

@@ -0,0 +1,10 @@
+export type SearchAiResponseProps = {
+    question: string;
+    isGeneratingResponse: boolean;
+    response?: string;
+    resources: {
+        url: string;
+        title: string;
+    }[];
+};
+export declare function SearchAiResponse(props: SearchAiResponseProps): JSX.Element;

package/lib/components/Search/SearchAiResponse.js

@@ -0,0 +1,88 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchAiResponse = SearchAiResponse;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Spinner_1 = require("../../icons/Spinner/Spinner");
+const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
+const DocumentIcon_1 = require("../../icons/DocumentIcon/DocumentIcon");
+const Tag_1 = require("../../components/Tag/Tag");
+const Link_1 = require("../../components/Link/Link");
+const hooks_1 = require("../../core/hooks");
+function SearchAiResponse(props) {
+    const { question, response, isGeneratingResponse, resources } = props;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    return (react_1.default.createElement(ResponseWrapper, { "data-component-name": "Search/AiResponse" },
+        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,
+            react_1.default.createElement(ResponseText, { "data-translation-key": response ? undefined : 'search.ai.thinkingText' }, response ? response : 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 },
+                    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)));
+}
+const ResponseWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  flex: 2;
+  flex-grow: 2;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+  padding: var(--search-ai-response-padding);
+  gap: var(--search-ai-response-gap);
+`;
+const ResponseHeader = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: var(--search-ai-response-header-gap);
+  align-items: center;
+`;
+const Question = styled_components_1.default.div `
+  font-size: var(--search-ai-question-font-size);
+  font-weight: var(--search-ai-question-font-weight);
+  line-height: var(--search-ai-question-line-height);
+  color: var(--search-ai-question-text-color);
+`;
+const ResponseBody = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-ai-response-body-gap);
+  padding: var(--search-ai-response-body-padding);
+`;
+const ResponseText = styled_components_1.default.pre `
+  color: var(--search-ai-response-text-color);
+  font-size: var(--search-ai-response-text-font-size);
+  line-height: var(--search-ai-response-text-line-height);
+  font-family: inherit;
+  white-space: break-spaces;
+`;
+const Resources = styled_components_1.default.div `
+  gap: var(--search-ai-resources-gap);
+  display: flex;
+  flex-direction: column;
+`;
+const ResourcesTitle = styled_components_1.default.div `
+  font-weight: var(--search-ai-resources-title-font-weight);
+  font-size: var(--search-ai-resources-title-font-size);
+  line-height: var(--search-ai-resources-title-line-height);
+`;
+const ResourceTags = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--search-ai-resource-tags-gap);
+`;
+const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  .tag-default {
+    --tag-color: --search-ai-resource-tag-text-color;
+  }
+`;
+//# sourceMappingURL=SearchAiResponse.js.map

package/lib/components/Search/SearchDialog.js

@@ -31,6 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const SearchInput_1 = require("../../components/Search/SearchInput");
 const SearchShortcut_1 = require("../../components/Search/SearchShortcut");
+const SearchAiResponse_1 = require("../../components/Search/SearchAiResponse");
 const Button_1 = require("../../components/Button/Button");
 const utils_1 = require("../../core/utils");
 const SearchItem_1 = require("../../components/Search/SearchItem");
@@ -43,13 +44,17 @@ const SearchFilter_1 = require("../../components/Search/SearchFilter");
 const SearchGroups_1 = require("../../components/Search/SearchGroups");
 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 } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch } = (0, hooks_1.useThemeHooks)();
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
-    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, } = useSearch(product === null || product === void 0 ? void 0 : product.name);
+    const [mode, setMode] = (0, react_1.useState)('search');
+    const autoSearchDisabled = mode !== 'search';
+    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
     const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onTopFacetsReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
+    const aiSearch = useAiSearch();
     const modalRef = (0, react_1.useRef)(null);
     const { translate } = useTranslate();
     (0, hooks_1.useDialogHotKeys)(modalRef, onClose);
@@ -88,6 +93,9 @@ function SearchDialog({ onClose, className }) {
         return needLoadMore;
     };
     const showResults = !!((filter && filter.length) || query);
+    const showSearchFilterButton = advancedSearch && mode === 'search';
+    const showAiSearchButton = askAi && mode === 'search';
+    const showHeaderButtons = showSearchFilterButton || showAiSearchButton;
     return (react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
         react_1.default.createElement(SearchDialogWrapper, { className: "scroll-lock", role: "dialog" },
             react_1.default.createElement(SearchDialogHeader, null,
@@ -95,9 +103,22 @@ function SearchDialog({ onClose, className }) {
                     react_1.default.createElement(SearchProductTag, { color: "product" },
                         product.name,
                         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: translate('search.label', 'Search docs...'), isLoading: isSearchLoading, "data-translation-key": "search.label" }),
-                advancedSearch && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle }))),
-            react_1.default.createElement(SearchDialogBody, null,
+                react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: mode === 'search'
+                        ? translate('search.label', 'Search docs...')
+                        : translate('search.ai.label', 'Ask a follow up question'), isLoading: isSearchLoading, showReturnButton: mode === 'ai-dialog', onReturn: () => setMode('search'), onSubmit: mode === 'ai-dialog'
+                        ? () => {
+                            setQuery('');
+                            aiSearch.askQuestion(query);
+                        }
+                        : undefined, "data-translation-key": mode === 'search' ? 'search.label' : 'search.ai.label' }),
+                showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
+                    showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { disabled: !query.trim(), icon: react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, null), onClick: () => {
+                            setMode('ai-dialog');
+                            setQuery('');
+                            aiSearch.askQuestion(query);
+                        } }, translate('search.aiButton', 'Search with AI'))) : null,
+                    showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle }))))),
+            react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchDialogBodyMainView, null,
                     react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onTopFacetsReset: onTopFacetsReset }),
                     showResults ? (items && Object.keys(items).some((key) => { var _a; return (_a = items[key]) === null || _a === void 0 ? void 0 : _a.length; }) ? (Object.keys(items).map((key) => {
@@ -113,9 +134,9 @@ function SearchDialog({ onClose, className }) {
                         translate('search.noResults.description', 'Prease, try with a different query.')))) : (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
                         react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
-                advancedSearch && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
-                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset })))),
-            react_1.default.createElement(SearchDialogFooter, null,
+                advancedSearch && mode === 'search' && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
+                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, 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 }))),
+            mode === 'search' && (react_1.default.createElement(SearchDialogFooter, 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') }),
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
@@ -123,7 +144,7 @@ function SearchDialog({ onClose, className }) {
                 isSearchLoading && (react_1.default.createElement(SearchLoading, null,
                     react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
                     translate('search.loading', 'Loading...'))),
-                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('search.cancel', 'Cancel'))))));
+                react_1.default.createElement(SearchCancelButton, { "data-translation-key": "search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('search.cancel', 'Cancel')))))));
 }
 const SearchOverlay = styled_components_1.default.div `
   position: fixed;
@@ -219,6 +240,9 @@ const SearchProductTag = (0, styled_components_1.default)(Tag_1.Tag) `
 const SearchFilterToggleButton = (0, styled_components_1.default)(Button_1.Button) `
   margin-left: 0;
 `;
+const SearchAiButton = (0, styled_components_1.default)(Button_1.Button) `
+  margin-left: 0;
+`;
 const SearchCancelButton = (0, styled_components_1.default)(Button_1.Button) `
   width: 100%;
 
@@ -247,4 +271,10 @@ const SearchLoading = styled_components_1.default.div `
     display: flex;
   }
 `;
+const SearchHeaderButtons = styled_components_1.default.div `
+  display: flex;
+  gap: var(--search-header-buttons-gap);
+  padding-left: var(--search-header-buttons-padding-left);
+  border-left: var(--search-header-buttons-border-left);
+`;
 //# sourceMappingURL=SearchDialog.js.map

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

@@ -5,6 +5,9 @@ export type SearchInputProps = {
     onChange: (value: string) => void;
     inputRef?: React.RefObject<HTMLInputElement>;
     isLoading: boolean;
+    showReturnButton?: boolean;
+    onReturn?: () => void;
+    onSubmit?: () => void;
     className?: string;
 };
-export declare function SearchInput({ placeholder, value, onChange, isLoading, className, }: SearchInputProps): JSX.Element;
+export declare function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, onReturn, onSubmit, className, }: SearchInputProps): JSX.Element;

package/lib/components/Search/SearchInput.js

@@ -11,7 +11,8 @@ const Spinner_1 = require("../../icons/Spinner/Spinner");
 const Button_1 = require("../../components/Button/Button");
 const hooks_1 = require("../../core/hooks");
 const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
-function SearchInput({ placeholder, value, onChange, isLoading, className, }) {
+const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
+function SearchInput({ placeholder, value, onChange, isLoading, showReturnButton, onReturn, onSubmit, className, }) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const stopPropagation = (event) => event.stopPropagation();
@@ -22,9 +23,17 @@ function SearchInput({ placeholder, value, onChange, isLoading, className, }) {
         onChange('');
         telemetry.send('search_input_reset_button_clicked', {});
     };
+    const handleOnKeyUp = (e) => {
+        if (!onSubmit) {
+            return;
+        }
+        if (e.key === 'Enter') {
+            onSubmit();
+        }
+    };
     return (react_1.default.createElement(SearchInputWrapper, { "data-component-name": "Search/SearchInput", className: className },
-        value && isLoading ? (react_1.default.createElement(Spinner_1.Spinner, { size: "18px", color: "--search-input-icon-color" })) : (react_1.default.createElement(SearchIcon_1.SearchIcon, { size: "18px", color: "--search-input-icon-color" })),
-        react_1.default.createElement(SearchInputField, { value: value, placeholder: placeholder, onChange: handleOnChange, onClick: stopPropagation }),
+        showReturnButton ? (react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null), onClick: onReturn })) : value && isLoading ? (react_1.default.createElement(Spinner_1.Spinner, { size: "24px", color: "--search-input-icon-color" })) : (react_1.default.createElement(SearchIcon_1.SearchIcon, { size: "24px", color: "--search-input-icon-color" })),
+        react_1.default.createElement(SearchInputField, { value: value, placeholder: placeholder, onChange: handleOnChange, onClick: stopPropagation, onKeyUp: handleOnKeyUp }),
         !!value && (react_1.default.createElement(ResetButton, { variant: "ghost", onClick: handleOnReset, icon: react_1.default.createElement(CloseFilledIcon_1.CloseFilledIcon, null) }))));
 }
 const SearchInputWrapper = styled_components_1.default.div `

package/lib/components/Search/variables.js

@@ -96,6 +96,10 @@ exports.search = (0, styled_components_1.css) `
   --search-message-text-color: var(--text-color-secondary); // @presenter Color
   --search-message-gap: var(--spacing-md);
 
+  --search-header-buttons-gap: var(--spacing-sm);
+  --search-header-buttons-padding-left: var(--spacing-sm);
+  --search-header-buttons-border-left: 1px solid var(--border-color-primary);
+
     /**
   * @tokens Search filter
   */
@@ -140,5 +144,39 @@ exports.search = (0, styled_components_1.css) `
   --search-trigger-line-height: var(--line-height-base);
 
   // @tokens End
+
+  /**
+  * @tokens Ai Search
+  */
+  
+  --search-ai-spinner-icon-color: var(--icon-color-interactive);
+  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+  --search-ai-response-padding: var(--spacing-lg);
+  --search-ai-response-gap: var(--spacing-sm);
+
+  --search-ai-response-header-gap: var(--spacing-md);
+
+  --search-ai-question-font-size: var(--font-size-xl);
+  --search-ai-question-font-weight: var(--font-weight-semibold);
+  --search-ai-question-line-height: var(--line-height-xl);
+  --search-ai-question-text-color: var(--text-color-primary);
+
+  --search-ai-response-body-gap: var(--spacing-xl);
+  --search-ai-response-body-padding: 0 40px;
+
+  --search-ai-response-text-color: var(--text-color-secondary);
+  --search-ai-response-text-font-size: var(--font-size-lg);
+  --search-ai-response-text-line-height: var(--line-height-lg);
+
+  --search-ai-resources-gap: var(--spacing-base);
+  --search-ai-resources-title-font-weight: var(--font-weight-medium);
+  --search-ai-resources-title-font-size: var(--font-size-lg);
+  --search-ai-resources-title-line-height: var(--line-height-lg);
+
+  --search-ai-resource-tags-gap: var(--spacing-base);
+  --search-ai-resource-tag-text-color: var(--text-color-secondary);
+  --search-ai-resource-tag-icon-color: var(--text-color-secondary);
+
+  // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -35,6 +35,10 @@ export declare const useThemeHooks: jest.Mock<{
         items: never[];
         isLoading: boolean;
     }, [], any>;
+    useAiSearch: jest.Mock<{
+        askQuestion: jest.Mock<any, any, any>;
+        references: never[];
+    }, [], any>;
     useFacetQuery: jest.Mock<{
         searchFacet: null;
         setSearchFacet: jest.Mock<any, any, any>;

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

@@ -43,6 +43,10 @@ exports.useThemeHooks = jest.fn(() => ({
         items: [],
         isLoading: false,
     })),
+    useAiSearch: jest.fn(() => ({
+        askQuestion: jest.fn(),
+        references: [],
+    })),
     useFacetQuery: jest.fn(() => ({
         searchFacet: null,
         setSearchFacet: jest.fn(),

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

@@ -45,7 +45,7 @@ export type ThemeHooks = {
         location: Location;
     };
     useBreadcrumbs: () => BreadcrumbItem[];
-    useSearch: (product?: string) => {
+    useSearch: (product?: string, autoSearchDisabled?: boolean) => {
         query: string;
         setQuery: React.Dispatch<React.SetStateAction<string>>;
         filter: SearchFilterItem[];
@@ -58,6 +58,17 @@ export type ThemeHooks = {
             offset: number;
         } | undefined>>;
         advancedSearch?: boolean;
+        askAi?: boolean;
+    };
+    useAiSearch: () => {
+        askQuestion: (question: string) => void;
+        isGeneratingResponse: boolean;
+        question: string;
+        response?: string;
+        resources: {
+            title: string;
+            url: string;
+        }[];
     };
     useFacetQuery: (field: string) => {
         searchFacet: SearchFacet | null;

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.noResults.description' | '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' | '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.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' | '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.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | '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';
+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.noResults.description' | '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.aiButton' | 'search.ai.label' | '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.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' | '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.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | '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';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/AiStarsIcon/AiStarsIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const AiStarsIcon: 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/AiStarsIcon/AiStarsIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AiStarsIcon = 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({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M11.2597 9.12114C8.08498 8.40423 7.59322 7.91247 6.87631 4.73772C6.84346 4.59262 6.7143 4.48929 6.56505 4.48929C6.4158 4.48929 6.28664 4.59262 6.2538 4.73772C5.53657 7.91247 5.04513 8.40423 1.87038 9.12114C1.72495 9.1543 1.62163 9.28314 1.62163 9.43239C1.62163 9.58164 1.72495 9.71048 1.87038 9.74365C5.04513 10.4609 5.53657 10.9526 6.2538 14.1271C6.28664 14.2722 6.4158 14.3755 6.56505 14.3755C6.7143 14.3755 6.84346 14.2722 6.87631 14.1271C7.59354 10.9526 8.08498 10.4609 11.2597 9.74365C11.4052 9.71048 11.5082 9.58164 11.5082 9.43239C11.5082 9.28314 11.4048 9.1543 11.2597 9.12114Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M14.1299 4.17834C12.4423 3.79725 12.2053 3.5603 11.8242 1.87294C11.7911 1.72752 11.6622 1.62451 11.513 1.62451C11.3637 1.62451 11.2349 1.72752 11.2017 1.87294C10.8206 3.5603 10.5837 3.79725 8.8963 4.17834C8.75088 4.21151 8.64787 4.34035 8.64787 4.4896C8.64787 4.63885 8.75088 4.76769 8.8963 4.80086C10.5837 5.18195 10.8206 5.4189 11.2017 7.10658C11.2349 7.25168 11.3637 7.35501 11.513 7.35501C11.6622 7.35501 11.7911 7.25168 11.8242 7.10658C12.2053 5.4189 12.4423 5.18195 14.1299 4.80086C14.275 4.76769 14.3784 4.63885 14.3784 4.4896C14.3784 4.34035 14.275 4.21151 14.1299 4.17834Z", fill: "#1A1C21" })));
+exports.AiStarsIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/AiStarsIcon/AiStarsIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=AiStarsIcon.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.44.6",
+  "version": "0.44.8",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "timeago.js": "4.0.2",
     "i18next": "22.4.15",
     "nprogress": "0.2.0",
-    "@redocly/config": "0.13.0"
+    "@redocly/config": "0.15.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Button/Button.tsx

@@ -175,7 +175,7 @@ const ButtonComponent: React.FC<ButtonProps> = (props) => {
       data-component-name="Button/Button"
       {...props}
       iconOnly={!props.children && props.icon !== null}
-      tabIndex={props.to ? -1 : 0}
+      tabIndex={props.to ? -1 : undefined}
     >
       {props.icon && props.iconPosition !== 'right' && props.icon}
       {props.children}

package/src/components/Search/SearchAiResponse.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
+import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
+import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export type SearchAiResponseProps = {
+  question: string;
+  isGeneratingResponse: boolean;
+  response?: string;
+  resources: {
+    url: string;
+    title: string;
+  }[];
+};
+
+export function SearchAiResponse(props: SearchAiResponseProps): JSX.Element {
+  const { question, response, isGeneratingResponse, resources } = props;
+
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  return (
+    <ResponseWrapper data-component-name="Search/AiResponse">
+      <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>
+        <ResponseText data-translation-key={response ? undefined : 'search.ai.thinkingText'}>
+          {response ? response : translate('search.ai.thinkingText', 'Thinking...')}
+        </ResponseText>
+        {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}>
+                  <ResourceTag
+                    borderless
+                    icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}
+                  >
+                    {resource.title}
+                  </ResourceTag>
+                </Link>
+              ))}
+            </ResourceTags>
+          </Resources>
+        ) : null}
+      </ResponseBody>
+    </ResponseWrapper>
+  );
+}
+
+const ResponseWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 2;
+  flex-grow: 2;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+  padding: var(--search-ai-response-padding);
+  gap: var(--search-ai-response-gap);
+`;
+
+const ResponseHeader = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: var(--search-ai-response-header-gap);
+  align-items: center;
+`;
+
+const Question = styled.div`
+  font-size: var(--search-ai-question-font-size);
+  font-weight: var(--search-ai-question-font-weight);
+  line-height: var(--search-ai-question-line-height);
+  color: var(--search-ai-question-text-color);
+`;
+
+const ResponseBody = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--search-ai-response-body-gap);
+  padding: var(--search-ai-response-body-padding);
+`;
+
+const ResponseText = styled.pre`
+  color: var(--search-ai-response-text-color);
+  font-size: var(--search-ai-response-text-font-size);
+  line-height: var(--search-ai-response-text-line-height);
+  font-family: inherit;
+  white-space: break-spaces;
+`;
+
+const Resources = styled.div`
+  gap: var(--search-ai-resources-gap);
+  display: flex;
+  flex-direction: column;
+`;
+
+const ResourcesTitle = styled.div`
+  font-weight: var(--search-ai-resources-title-font-weight);
+  font-size: var(--search-ai-resources-title-font-size);
+  line-height: var(--search-ai-resources-title-line-height);
+`;
+
+const ResourceTags = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--search-ai-resource-tags-gap);
+`;
+
+const ResourceTag = styled(Tag)`
+  .tag-default {
+    --tag-color: --search-ai-resource-tag-text-color;
+  }
+`;

package/src/components/Search/SearchDialog.tsx

@@ -6,6 +6,7 @@ import type { SearchFacetCount, SearchItemData } from '@redocly/theme/core/types
 
 import { SearchInput } from '@redocly/theme/components/Search/SearchInput';
 import { SearchShortcut } from '@redocly/theme/components/Search/SearchShortcut';
+import { SearchAiResponse } from '@redocly/theme/components/Search/SearchAiResponse';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { breakpoints, concatClassNames } from '@redocly/theme/core/utils';
 import { SearchItem } from '@redocly/theme/components/Search/SearchItem';
@@ -18,6 +19,7 @@ import { SearchFilter } from '@redocly/theme/components/Search/SearchFilter';
 import { SearchGroups } from '@redocly/theme/components/Search/SearchGroups';
 import { SpinnerLoader } from '@redocly/theme/components/Loaders/SpinnerLoader';
 import { SettingsIcon } from '@redocly/theme/icons/SettingsIcon/SettingsIcon';
+import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 
 export type SearchDialogProps = {
   onClose: () => void;
@@ -25,10 +27,12 @@ export type SearchDialogProps = {
 };
 
 export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Element {
-  const { useTranslate, useCurrentProduct, useSearch, useProducts } = useThemeHooks();
+  const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch } = useThemeHooks();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
+  const [mode, setMode] = useState<'search' | 'ai-dialog'>('search');
+  const autoSearchDisabled = mode !== 'search';
   const {
     query,
     setQuery,
@@ -39,7 +43,8 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     facets,
     setLoadMore,
     advancedSearch,
-  } = useSearch(product?.name);
+    askAi,
+  } = useSearch(product?.name, autoSearchDisabled);
   const {
     isFilterOpen,
     onFilterToggle,
@@ -48,6 +53,8 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     onFacetReset,
     onTopFacetsReset,
   } = useSearchFilter(filter, setFilter);
+  const aiSearch = useAiSearch();
+
   const modalRef = useRef<HTMLDivElement>(null);
   const { translate } = useTranslate();
 
@@ -89,6 +96,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
   };
 
   const showResults = !!((filter && filter.length) || query);
+  const showSearchFilterButton = advancedSearch && mode === 'search';
+  const showAiSearchButton = askAi && mode === 'search';
+  const showHeaderButtons = showSearchFilterButton || showAiSearchButton;
 
   return (
     <SearchOverlay
@@ -110,106 +120,154 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
           <SearchInput
             value={query}
             onChange={setQuery}
-            placeholder={translate('search.label', 'Search docs...')}
+            placeholder={
+              mode === 'search'
+                ? translate('search.label', 'Search docs...')
+                : translate('search.ai.label', 'Ask a follow up question')
+            }
             isLoading={isSearchLoading}
-            data-translation-key="search.label"
+            showReturnButton={mode === 'ai-dialog'}
+            onReturn={() => setMode('search')}
+            onSubmit={
+              mode === 'ai-dialog'
+                ? () => {
+                    setQuery('');
+                    aiSearch.askQuestion(query);
+                  }
+                : undefined
+            }
+            data-translation-key={mode === 'search' ? 'search.label' : 'search.ai.label'}
           />
-          {advancedSearch && (
-            <SearchFilterToggleButton icon={<SettingsIcon />} onClick={onFilterToggle} />
+          {showHeaderButtons && (
+            <SearchHeaderButtons>
+              {showAiSearchButton ? (
+                <SearchAiButton
+                  disabled={!query.trim()}
+                  icon={<AiStarsIcon />}
+                  onClick={() => {
+                    setMode('ai-dialog');
+                    setQuery('');
+                    aiSearch.askQuestion(query);
+                  }}
+                >
+                  {translate('search.aiButton', 'Search with AI')}
+                </SearchAiButton>
+              ) : null}
+              {showSearchFilterButton && (
+                <SearchFilterToggleButton icon={<SettingsIcon />} onClick={onFilterToggle} />
+              )}
+            </SearchHeaderButtons>
           )}
         </SearchDialogHeader>
+
         <SearchDialogBody>
-          <SearchDialogBodyMainView>
-            <SearchGroups
-              facets={facets}
-              searchFilter={filter}
-              onFilterChange={onFilterChange}
-              onTopFacetsReset={onTopFacetsReset}
-            />
-            {showResults ? (
-              items && Object.keys(items).some((key) => items[key]?.length) ? (
-                Object.keys(items).map((key) =>
-                  items[key]?.length ? (
-                    <Fragment key={key}>
-                      <SearchGroupTitle>{key}</SearchGroupTitle>
-                      {items[key]?.map(mapItem)}
-                      {showLoadMore(key, items[key]?.length || 0) && (
-                        <SearchGroupFooter
-                          data-translation-key="search.showMore"
-                          onClick={() =>
-                            setLoadMore({ groupKey: key, offset: items[key]?.length || 0 })
-                          }
-                        >
-                          {translate('search.showMore', 'Show more')}
-                        </SearchGroupFooter>
+          {mode === 'search' ? (
+            <>
+              <SearchDialogBodyMainView>
+                <SearchGroups
+                  facets={facets}
+                  searchFilter={filter}
+                  onFilterChange={onFilterChange}
+                  onTopFacetsReset={onTopFacetsReset}
+                />
+                {showResults ? (
+                  items && Object.keys(items).some((key) => items[key]?.length) ? (
+                    Object.keys(items).map((key) =>
+                      items[key]?.length ? (
+                        <Fragment key={key}>
+                          <SearchGroupTitle>{key}</SearchGroupTitle>
+                          {items[key]?.map(mapItem)}
+                          {showLoadMore(key, items[key]?.length || 0) && (
+                            <SearchGroupFooter
+                              data-translation-key="search.showMore"
+                              onClick={() =>
+                                setLoadMore({ groupKey: key, offset: items[key]?.length || 0 })
+                              }
+                            >
+                              {translate('search.showMore', 'Show more')}
+                            </SearchGroupFooter>
+                          )}
+                        </Fragment>
+                      ) : null,
+                    )
+                  ) : isSearchLoading ? (
+                    <SearchMessage>
+                      <SpinnerLoader size="26px" color="var(--search-input-icon-color)" />
+                      {translate('search.loading', 'Loading...')}
+                    </SearchMessage>
+                  ) : (
+                    <SearchMessage data-translation-key="search.noResults">
+                      <b>{translate('search.noResults.title', 'No results')}</b>
+                      {translate(
+                        'search.noResults.description',
+                        'Prease, try with a different query.',
                       )}
-                    </Fragment>
-                  ) : null,
-                )
-              ) : isSearchLoading ? (
-                <SearchMessage>
-                  <SpinnerLoader size="26px" color="var(--search-input-icon-color)" />
-                  {translate('search.loading', 'Loading...')}
-                </SearchMessage>
-              ) : (
-                <SearchMessage data-translation-key="search.noResults">
-                  <b>{translate('search.noResults.title', 'No results')}</b>
-                  {translate('search.noResults.description', 'Prease, try with a different query.')}
-                </SearchMessage>
-              )
-            ) : (
-              <>
-                <SearchRecent onSelect={setQuery} />
-                <SearchSuggestedPages />
-              </>
-            )}
-          </SearchDialogBodyMainView>
-          {advancedSearch && isFilterOpen && (
-            <SearchDialogBodyFilterView>
-              <SearchFilter
-                facets={facets}
-                filter={filter}
-                query={query}
-                onFilterChange={onFilterChange}
-                onFilterReset={onFilterReset}
-                onFacetReset={onFacetReset}
-              />
-            </SearchDialogBodyFilterView>
-          )}
-        </SearchDialogBody>
-        <SearchDialogFooter>
-          <SearchShortcuts>
-            <SearchShortcut
-              data-translation-key="search.keys.navigate"
-              combination="Tab"
-              text={translate('search.keys.navigate', 'to navigate')}
-            />
-            <SearchShortcut
-              data-translation-key="search.keys.select"
-              combination="⏎"
-              text={translate('search.keys.select', 'to select')}
-            />
-            <SearchShortcut
-              data-translation-key="search.keys.exit"
-              combination="Esc"
-              text={translate('search.keys.exit', 'to exit')}
+                    </SearchMessage>
+                  )
+                ) : (
+                  <>
+                    <SearchRecent onSelect={setQuery} />
+                    <SearchSuggestedPages />
+                  </>
+                )}
+              </SearchDialogBodyMainView>
+              {advancedSearch && mode === 'search' && isFilterOpen && (
+                <SearchDialogBodyFilterView>
+                  <SearchFilter
+                    facets={facets}
+                    filter={filter}
+                    query={query}
+                    onFilterChange={onFilterChange}
+                    onFilterReset={onFilterReset}
+                    onFacetReset={onFacetReset}
+                  />
+                </SearchDialogBodyFilterView>
+              )}
+            </>
+          ) : (
+            <SearchAiResponse
+              question={aiSearch.question}
+              isGeneratingResponse={aiSearch.isGeneratingResponse}
+              response={aiSearch.response}
+              resources={aiSearch.resources}
             />
-          </SearchShortcuts>
-          {isSearchLoading && (
-            <SearchLoading>
-              <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
-              {translate('search.loading', 'Loading...')}
-            </SearchLoading>
           )}
-          <SearchCancelButton
-            data-translation-key="search.cancel"
-            variant="secondary"
-            size="small"
-            onClick={onClose}
-          >
-            {translate('search.cancel', 'Cancel')}
-          </SearchCancelButton>
-        </SearchDialogFooter>
+        </SearchDialogBody>
+        {mode === 'search' && (
+          <SearchDialogFooter>
+            <SearchShortcuts>
+              <SearchShortcut
+                data-translation-key="search.keys.navigate"
+                combination="Tab"
+                text={translate('search.keys.navigate', 'to navigate')}
+              />
+              <SearchShortcut
+                data-translation-key="search.keys.select"
+                combination="⏎"
+                text={translate('search.keys.select', 'to select')}
+              />
+              <SearchShortcut
+                data-translation-key="search.keys.exit"
+                combination="Esc"
+                text={translate('search.keys.exit', 'to exit')}
+              />
+            </SearchShortcuts>
+            {isSearchLoading && (
+              <SearchLoading>
+                <SpinnerLoader size="16px" color="var(--search-input-icon-color)" />
+                {translate('search.loading', 'Loading...')}
+              </SearchLoading>
+            )}
+            <SearchCancelButton
+              data-translation-key="search.cancel"
+              variant="secondary"
+              size="small"
+              onClick={onClose}
+            >
+              {translate('search.cancel', 'Cancel')}
+            </SearchCancelButton>
+          </SearchDialogFooter>
+        )}
       </SearchDialogWrapper>
     </SearchOverlay>
   );
@@ -320,6 +378,10 @@ const SearchFilterToggleButton = styled(Button)`
   margin-left: 0;
 `;
 
+const SearchAiButton = styled(Button)`
+  margin-left: 0;
+`;
+
 const SearchCancelButton = styled(Button)`
   width: 100%;
 
@@ -351,3 +413,10 @@ const SearchLoading = styled.div`
     display: flex;
   }
 `;
+
+const SearchHeaderButtons = styled.div`
+  display: flex;
+  gap: var(--search-header-buttons-gap);
+  padding-left: var(--search-header-buttons-padding-left);
+  border-left: var(--search-header-buttons-border-left);
+`;

package/src/components/Search/SearchInput.tsx

@@ -8,6 +8,7 @@ import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
+import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
 
 export type SearchInputProps = {
   placeholder?: string;
@@ -15,6 +16,9 @@ export type SearchInputProps = {
   onChange: (value: string) => void;
   inputRef?: React.RefObject<HTMLInputElement>;
   isLoading: boolean;
+  showReturnButton?: boolean;
+  onReturn?: () => void;
+  onSubmit?: () => void;
   className?: string;
 };
 
@@ -23,6 +27,9 @@ export function SearchInput({
   value,
   onChange,
   isLoading,
+  showReturnButton,
+  onReturn,
+  onSubmit,
   className,
 }: SearchInputProps): JSX.Element {
   const { useTelemetry } = useThemeHooks();
@@ -39,18 +46,31 @@ export function SearchInput({
     telemetry.send('search_input_reset_button_clicked', {});
   };
 
+  const handleOnKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!onSubmit) {
+      return;
+    }
+
+    if (e.key === 'Enter') {
+      onSubmit();
+    }
+  };
+
   return (
     <SearchInputWrapper data-component-name="Search/SearchInput" className={className}>
-      {value && isLoading ? (
-        <Spinner size="18px" color="--search-input-icon-color" />
+      {showReturnButton ? (
+        <Button icon={<ChevronLeftIcon />} onClick={onReturn} />
+      ) : value && isLoading ? (
+        <Spinner size="24px" color="--search-input-icon-color" />
       ) : (
-        <SearchIcon size="18px" color="--search-input-icon-color" />
+        <SearchIcon size="24px" color="--search-input-icon-color" />
       )}
       <SearchInputField
         value={value}
         placeholder={placeholder}
         onChange={handleOnChange}
         onClick={stopPropagation}
+        onKeyUp={handleOnKeyUp}
       />
       {!!value && (
         <ResetButton variant="ghost" onClick={handleOnReset} icon={<CloseFilledIcon />} />

package/src/components/Search/variables.ts

@@ -94,6 +94,10 @@ export const search = css`
   --search-message-text-color: var(--text-color-secondary); // @presenter Color
   --search-message-gap: var(--spacing-md);
 
+  --search-header-buttons-gap: var(--spacing-sm);
+  --search-header-buttons-padding-left: var(--spacing-sm);
+  --search-header-buttons-border-left: 1px solid var(--border-color-primary);
+
     /**
   * @tokens Search filter
   */
@@ -138,4 +142,38 @@ export const search = css`
   --search-trigger-line-height: var(--line-height-base);
 
   // @tokens End
+
+  /**
+  * @tokens Ai Search
+  */
+  
+  --search-ai-spinner-icon-color: var(--icon-color-interactive);
+  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+  --search-ai-response-padding: var(--spacing-lg);
+  --search-ai-response-gap: var(--spacing-sm);
+
+  --search-ai-response-header-gap: var(--spacing-md);
+
+  --search-ai-question-font-size: var(--font-size-xl);
+  --search-ai-question-font-weight: var(--font-weight-semibold);
+  --search-ai-question-line-height: var(--line-height-xl);
+  --search-ai-question-text-color: var(--text-color-primary);
+
+  --search-ai-response-body-gap: var(--spacing-xl);
+  --search-ai-response-body-padding: 0 40px;
+
+  --search-ai-response-text-color: var(--text-color-secondary);
+  --search-ai-response-text-font-size: var(--font-size-lg);
+  --search-ai-response-text-line-height: var(--line-height-lg);
+
+  --search-ai-resources-gap: var(--spacing-base);
+  --search-ai-resources-title-font-weight: var(--font-weight-medium);
+  --search-ai-resources-title-font-size: var(--font-size-lg);
+  --search-ai-resources-title-line-height: var(--line-height-lg);
+
+  --search-ai-resource-tags-gap: var(--spacing-base);
+  --search-ai-resource-tag-text-color: var(--text-color-secondary);
+  --search-ai-resource-tag-icon-color: var(--text-color-secondary);
+
+  // @tokens End
 `;

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

@@ -42,6 +42,10 @@ export const useThemeHooks = jest.fn(() => ({
     items: [],
     isLoading: false,
   })),
+  useAiSearch: jest.fn(() => ({
+    askQuestion: jest.fn(),
+    references: [],
+  })),
   useFacetQuery: jest.fn(() => ({
     searchFacet: null,
     setSearchFacet: jest.fn(),

package/src/core/types/hooks.ts

@@ -54,7 +54,10 @@ export type ThemeHooks = {
     location: Location;
   };
   useBreadcrumbs: () => BreadcrumbItem[];
-  useSearch: (product?: string) => {
+  useSearch: (
+    product?: string,
+    autoSearchDisabled?: boolean,
+  ) => {
     query: string;
     setQuery: React.Dispatch<React.SetStateAction<string>>;
     filter: SearchFilterItem[];
@@ -72,6 +75,17 @@ export type ThemeHooks = {
       >
     >;
     advancedSearch?: boolean;
+    askAi?: boolean;
+  };
+  useAiSearch: () => {
+    askQuestion: (question: string) => void;
+    isGeneratingResponse: boolean;
+    question: string;
+    response?: string;
+    resources: {
+      title: string;
+      url: string;
+    }[];
   };
   useFacetQuery: (field: string) => {
     searchFacet: SearchFacet | null;

package/src/core/types/l10n.ts

@@ -84,6 +84,10 @@ export type TranslationKey =
   | 'search.filter.title'
   | 'search.filter.reset'
   | 'search.filter.field.reset'
+  | 'search.ai.thinkingText'
+  | 'search.ai.resourcesFound'
+  | 'search.aiButton'
+  | 'search.ai.label'
   | 'toc.header'
   | 'footer.copyrightText'
   | 'page.homeButton'

package/src/icons/AiStarsIcon/AiStarsIcon.tsx

@@ -0,0 +1,30 @@
+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 viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M11.2597 9.12114C8.08498 8.40423 7.59322 7.91247 6.87631 4.73772C6.84346 4.59262 6.7143 4.48929 6.56505 4.48929C6.4158 4.48929 6.28664 4.59262 6.2538 4.73772C5.53657 7.91247 5.04513 8.40423 1.87038 9.12114C1.72495 9.1543 1.62163 9.28314 1.62163 9.43239C1.62163 9.58164 1.72495 9.71048 1.87038 9.74365C5.04513 10.4609 5.53657 10.9526 6.2538 14.1271C6.28664 14.2722 6.4158 14.3755 6.56505 14.3755C6.7143 14.3755 6.84346 14.2722 6.87631 14.1271C7.59354 10.9526 8.08498 10.4609 11.2597 9.74365C11.4052 9.71048 11.5082 9.58164 11.5082 9.43239C11.5082 9.28314 11.4048 9.1543 11.2597 9.12114Z"
+      fill="#1A1C21"
+    />
+    <path
+      d="M14.1299 4.17834C12.4423 3.79725 12.2053 3.5603 11.8242 1.87294C11.7911 1.72752 11.6622 1.62451 11.513 1.62451C11.3637 1.62451 11.2349 1.72752 11.2017 1.87294C10.8206 3.5603 10.5837 3.79725 8.8963 4.17834C8.75088 4.21151 8.64787 4.34035 8.64787 4.4896C8.64787 4.63885 8.75088 4.76769 8.8963 4.80086C10.5837 5.18195 10.8206 5.4189 11.2017 7.10658C11.2349 7.25168 11.3637 7.35501 11.513 7.35501C11.6622 7.35501 11.7911 7.25168 11.8242 7.10658C12.2053 5.4189 12.4423 5.18195 14.1299 4.80086C14.275 4.76769 14.3784 4.63885 14.3784 4.4896C14.3784 4.34035 14.275 4.21151 14.1299 4.17834Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const AiStarsIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AiStarsIcon/AiStarsIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;