@redocly/theme 0.51.0-next.2 → 0.51.0-next.4

package/lib/components/Search/SearchAiResponse.js

@@ -13,16 +13,21 @@ 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 Typography_1 = require("../../components/Typography/Typography");
 const Admonition_1 = require("../../components/Admonition/Admonition");
 const ErrorFilledIcon_1 = require("../../icons/ErrorFilledIcon/ErrorFilledIcon");
 const constants_1 = require("../../core/constants");
+const ChatIcon_1 = require("../../icons/ChatIcon/ChatIcon");
 function SearchAiResponse(props) {
+    var _a;
     const { useMarkdownText } = (0, hooks_1.useThemeHooks)();
-    const { question, response, isGeneratingResponse, resources, error } = props;
+    const { question, response, isGeneratingResponse, resources, error, onSuggestionClick } = props;
+    const { search } = (0, hooks_1.useThemeConfig)();
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const markdownResponse = useMarkdownText(response || '');
     let responseContainer = null;
+    const suggestions = (_a = search === null || search === void 0 ? void 0 : search.ai) === null || _a === void 0 ? void 0 : _a.suggestions;
     const hasPendingOrReceivedResponse = response || isGeneratingResponse || error;
     if (hasPendingOrReceivedResponse) {
         let icon;
@@ -53,7 +58,15 @@ function SearchAiResponse(props) {
                     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));
+    return (react_1.default.createElement(ResponseWrapper, { "data-component-name": "Search/SearchAiResponse" },
+        !question && (react_1.default.createElement(react_1.default.Fragment, null, (suggestions === null || suggestions === void 0 ? void 0 : suggestions.length) && (react_1.default.createElement(SuggestionsWrapper, null,
+            react_1.default.createElement(SuggestionsTitle, null, translate('search.ai.suggestionsTitle', 'Suggestions')),
+            suggestions.map((suggestion, idx) => (react_1.default.createElement(SuggestionItem, { key: idx.toString(), onClick: () => {
+                    onSuggestionClick(suggestion);
+                } },
+                react_1.default.createElement(ChatIcon_1.ChatIcon, { color: "--color-blueberry-6" }),
+                react_1.default.createElement(Typography_1.Typography, { color: "--search-ai-suggestions-text-color" }, suggestion)))))))),
+        responseContainer));
 }
 const ResponseWrapper = styled_components_1.default.div `
   display: flex;
@@ -128,10 +141,33 @@ const ResourceTags = styled_components_1.default.div `
 `;
 const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag).attrs({
     className: 'tag-resource',
-    'data-component-name': 'Tags/SearchAiResourceTag',
 }) `
   .tag-default {
     --tag-color: --search-ai-resource-tag-text-color;
   }
 `;
+const SuggestionsWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  gap: var(--spacing-sm);
+  margin-left: var(--spacing-xs);
+`;
+const SuggestionsTitle = (0, styled_components_1.default)(Typography_1.Typography) `
+  font-size: var(--search-ai-suggestions-title-font-size);
+  line-height: var(--search-ai-suggestions-title-line-height);
+  font-weight: var(--search-ai-suggestions-title-font-weight);
+
+  color: var(--search-ai-suggestions-title-text-color);
+`;
+const SuggestionItem = styled_components_1.default.div `
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  gap: var(--spacing-xs);
+`;
 //# sourceMappingURL=SearchAiResponse.js.map

package/lib/components/Search/SearchDialog.js

@@ -31,7 +31,6 @@ 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");
@@ -42,9 +41,13 @@ const Tag_1 = require("../../components/Tag/Tag");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const SearchFilter_1 = require("../../components/Search/SearchFilter");
 const SearchGroups_1 = require("../../components/Search/SearchGroups");
+const Typography_1 = require("../../components/Typography/Typography");
 const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
+const SearchAiDialog_1 = require("../../components/Search/SearchAiDialog");
 const SettingsIcon_1 = require("../../icons/SettingsIcon/SettingsIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
+const ChevronLeftIcon_1 = require("../../icons/ChevronLeftIcon/ChevronLeftIcon");
+const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
 function SearchDialog({ onClose, className }) {
     const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const otelTelemetry = useOtelTelemetry();
@@ -59,6 +62,11 @@ function SearchDialog({ onClose, className }) {
     const modalRef = (0, react_1.useRef)(null);
     const { translate } = useTranslate();
     (0, hooks_1.useDialogHotKeys)(modalRef, onClose);
+    (0, react_1.useEffect)(() => {
+        if (mode === 'ai-dialog' && aiSearch.isGeneratingResponse) {
+            setQuery('');
+        }
+    }, [mode, aiSearch.isGeneratingResponse, setQuery]);
     const handleOverlayClick = (event) => {
         var _a;
         const target = event.target;
@@ -106,37 +114,49 @@ function SearchDialog({ onClose, className }) {
     const showResults = !!((filter && filter.length) || query);
     const showSearchFilterButton = advancedSearch && mode === 'search';
     const showAiSearchButton = askAi && mode === 'search';
+    const showAiSearchItem = showAiSearchButton && query;
     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,
-                product && (react_1.default.createElement(react_1.default.Fragment, null,
-                    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: mode === 'search'
-                        ? translate('search.label', 'Search docs...')
-                        : 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);
-                        }
-                        : undefined, "data-translation-key": mode === 'search' ? 'search.label' : 'search.ai.label' }),
-                showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
-                    showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, null), onClick: () => {
-                            setMode('ai-dialog');
-                            if (query.trim()) {
-                                setQuery('');
+                product && (react_1.default.createElement(SearchProductTag, { color: "product" },
+                    product.name,
+                    react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" }))),
+                mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('search.label', 'Search docs...'), isLoading: isSearchLoading, onSubmit: showAiSearchButton
+                            ? () => {
+                                setMode('ai-dialog');
                                 aiSearch.askQuestion(query);
                             }
-                        } }, translate('search.ai.button', 'Search with AI'))) : null,
-                    showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle }))))),
+                            : undefined, "data-translation-key": "search.label" }),
+                    showHeaderButtons && (react_1.default.createElement(SearchHeaderButtons, null,
+                        showAiSearchButton ? (react_1.default.createElement(SearchAiButton, { icon: react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { gradient: true }), onClick: () => {
+                                setMode('ai-dialog');
+                                if (query.trim()) {
+                                    aiSearch.askQuestion(query);
+                                }
+                            } }, translate('search.ai.button', '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(AiDialogHeaderWrapper, null,
+                    react_1.default.createElement(Button_1.Button, { variant: "secondary", onClick: () => {
+                            setMode('search');
+                            aiSearch.clearConversation();
+                        }, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, translate('search.ai.backToSearch', 'Back to search')),
+                    react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => aiSearch.clearConversation(), icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation'))))),
             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, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
+                    showAiSearchItem && (react_1.default.createElement(SearchWithAI, { onClick: () => {
+                            setMode('ai-dialog');
+                            if (query.trim()) {
+                                aiSearch.askQuestion(query);
+                            }
+                        }, tabIndex: 0, role: "option", "aria-selected": "true" },
+                        react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { color: "var(--search-ai-icon-color)", size: "36px", background: "var(--search-ai-icon-bg-color)", margin: "0 var(--spacing-md) 0 0", borderRadius: "var(--border-radius-lg)" }),
+                        react_1.default.createElement(Typography_1.Typography, { fontWeight: "var(--font-weight-semibold)" }, query),
+                        react_1.default.createElement(Typography_1.Typography, null,
+                            "- ",
+                            translate('search.ai.label', 'Ask AI assistant')),
+                        react_1.default.createElement(ReturnKey, null, "\u23CE"))),
                     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) => {
                         var _a, _b, _c;
                         return ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_1.Fragment, { key: key },
@@ -150,7 +170,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, error: aiSearch.error }))),
+                    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(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion }))),
             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') }),
@@ -215,10 +235,17 @@ const SearchDialogHeader = styled_components_1.default.header `
   background-color: var(--search-modal-header-bg-color);
   padding: var(--search-modal-header-padding);
 `;
+const AiDialogHeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
 const SearchDialogBody = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
+  flex: 1;
+  min-height: 0;
   overflow: hidden;
 
   @media screen and (max-width: ${utils_1.breakpoints.small}) {
@@ -314,4 +341,35 @@ const AiDisclaimer = styled_components_1.default.div `
   color: var(--search-ai-disclaimer-text-color);
   margin: 0 auto;
 `;
+const SearchWithAI = styled_components_1.default.div `
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--spacing-unit);
+  padding: var(--spacing-md);
+
+  color: var(--search-item-text-color);
+  background-color: var(--search-item-bg-color);
+  text-decoration: none;
+  white-space: normal;
+  outline: none;
+  border: none;
+
+  transition: all 0.3s ease;
+
+  &:focus,
+  &:hover {
+    color: var(--search-item-text-color-hover);
+    background-color: var(--search-item-bg-color-hover);
+  }
+
+  & > :first-child {
+    margin-right: var(--spacing-xs);
+  }
+`;
+const ReturnKey = (0, styled_components_1.default)(Typography_1.Typography) `
+  color: var(--search-item-text-color);
+  margin-left: auto;
+`;
 //# sourceMappingURL=SearchDialog.js.map

package/lib/components/Search/variables.js

@@ -144,12 +144,12 @@ exports.search = (0, styled_components_1.css) `
   --search-trigger-icon-size: 16px;
   --search-trigger-line-height: var(--line-height-base);
 
-  // @tokens End
-
   /**
-  * @tokens Ai Search
+  * @tokens AI Search
   */
   
+  --search-ai-gradient: linear-gradient(to right, #715efe, #ff5cdc);
+
   --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);
@@ -165,9 +165,15 @@ exports.search = (0, styled_components_1.css) `
   --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-text-color: var(--text-color-secondary);
+  --search-ai-text-font-size: var(--font-size-lg);
+  --search-ai-text-line-height: var(--line-height-lg);
+
+  --search-ai-user-bg-color: var(--color-blue-6);
+  --search-ai-user-text-color: var(--color-static-white);
+  --search-ai-assistant-bg-color: var(--layer-color);
+  --search-ai-assistant-text-color: var(--text-color-primary);
+  --search-ai-assistant-border: 1px solid var(--border-color-primary);
 
   --search-ai-resources-gap: var(--spacing-base);
   --search-ai-resources-title-font-weight: var(--font-weight-medium);
@@ -177,11 +183,111 @@ exports.search = (0, styled_components_1.css) `
   --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);
+  --search-ai-resource-tag-icon-size: 16px;
+
+  --search-ai-icon-size: 32px;
+  --search-ai-icon-bg-color: var(--search-ai-gradient);
+  --search-ai-icon-color: var(--color-static-white);
+
+  --search-ai-thinking-dots-gap: 4px;
+  --search-ai-thinking-dots-padding: 4px 0;
+  --search-ai-thinking-dot-size: 6px;
+  --search-ai-thinking-dot-color: var(--search-ai-gradient);
 
   --search-ai-disclaimer-font-size: var(--font-size-sm);
   --search-ai-disclaimer-line-height: var(--line-height-sm);
   --search-ai-disclaimer-text-color: var(--text-color-secondary);
 
+
+  --search-ai-welcome-margin: var(--spacing-md);
+  --search-ai-icon-wrapper-padding: var(--spacing-xs);
+
+  --search-ai-suggestions-title-text-color: var(--text-color-description);
+  --search-ai-suggestions-title-font-size: var(--font-size-base);
+  --search-ai-suggestions-title-line-height: var(--line-height-base);
+  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
+  --search-ai-suggestions-text-color: var(--text-color-description);
+
+  --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
+  --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
+  --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
+  --search-ai-conversation-input-send-button-border-color-disabled: var(--button-border-color-disabled);
+  --search-ai-conversation-input-send-button-icon-color: var(--color-static-white);
+
+  /**
+  * @tokens AI Search Dialog
+  */
+  --search-ai-dialog-bg-color: var(--bg-color);
+  --search-ai-dialog-header-border: var(--search-modal-border);
+  --search-ai-dialog-header-bg-color: var(--search-modal-header-bg-color);
+  --search-ai-dialog-header-padding: var(--search-modal-header-padding);
+
+  --search-ai-dialog-body-padding: var(--search-ai-response-padding);
+  --search-ai-dialog-body-gap: var(--spacing-sm);
+
+  --search-ai-dialog-input-padding: var(--spacing-sm) var(--search-ai-response-padding);
+  --search-ai-dialog-input-border: 1px solid var(--border-color-secondary);
+  --search-ai-dialog-input-bg-color: var(--bg-color);
+
+  /**
+  * @tokens AI Search Conversation Input
+  */
+  --search-ai-conversation-input-bg-color: var(--bg-color);
+  --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
+  --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
+  --search-ai-conversation-input-border-radius: var(--border-radius-lg);
+  --search-ai-conversation-input-font-size: var(--font-size-base);
+  --search-ai-conversation-input-placeholder-color: var(--search-input-placeholder-color);
+  --search-ai-conversation-input-border-color-focus: var(--color-blue-6);
+  --search-ai-conversation-input-border-color-disabled: var(--border-color-secondary);
+
+  --search-ai-conversation-input-send-button-right: 12px;
+  --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
+  --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
+  --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
+  --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
+
+  /**
+  * @tokens AI Search Response
+  */
+  --search-ai-response-padding: var(--spacing-lg);
+  --search-ai-response-gap: var(--spacing-sm);
+  --search-ai-response-header-gap: var(--spacing-md);
+  --search-ai-response-body-gap: var(--spacing-xl);
+  --search-ai-response-body-padding: 0 40px;
+
+  --search-ai-text-color: var(--text-color-secondary);
+  --search-ai-text-font-size: var(--font-size-lg);
+  --search-ai-text-line-height: var(--line-height-lg);
+
+  --search-ai-thinking-text-margin: var(--md-pre-margin) 0;
+
+  --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-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);
+
+  --search-ai-suggestions-gap: var(--spacing-sm);
+  --search-ai-suggestions-margin-left: var(--spacing-xs);
+  --search-ai-suggestion-item-gap: var(--spacing-xs);
+
+  --search-ai-suggestions-title-text-color: var(--text-color-description);
+  --search-ai-suggestions-title-font-size: var(--font-size-base);
+  --search-ai-suggestions-title-line-height: var(--line-height-base);
+  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
+
+  --search-ai-spinner-icon-color: var(--icon-color-interactive);
+  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

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

@@ -6,4 +6,8 @@ export declare enum AiSearchError {
     EmptyResponse = "empty_response",
     ErrorProcessingResponse = "error_processing_response"
 }
+export declare const enum AiSearchConversationRole {
+    USER = "user",
+    ASSISTANT = "assistant"
+}
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;

package/lib/core/constants/search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchError = void 0;
+exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
 var AiSearchError;
 (function (AiSearchError) {
     AiSearchError["Unauthorized"] = "ai_search_unauthorized";
@@ -9,6 +9,11 @@ var AiSearchError;
     AiSearchError["EmptyResponse"] = "empty_response";
     AiSearchError["ErrorProcessingResponse"] = "error_processing_response";
 })(AiSearchError || (exports.AiSearchError = AiSearchError = {}));
+var AiSearchConversationRole;
+(function (AiSearchConversationRole) {
+    AiSearchConversationRole["USER"] = "user";
+    AiSearchConversationRole["ASSISTANT"] = "assistant";
+})(AiSearchConversationRole || (exports.AiSearchConversationRole = AiSearchConversationRole = {}));
 const defaultErrorConfig = {
     headerKey: 'search.ai.error.header',
     headerDefault: 'Oops! Something went wrong.',

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

@@ -13,21 +13,49 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
     const location = (0, react_router_dom_1.useLocation)();
     const navigate = (0, react_router_dom_1.useNavigate)();
     const searchParams = (0, react_1.useMemo)(() => new URLSearchParams(location.search), [location.search]);
-    const [controlsState, setControlsState] = (0, react_1.useState)(() => {
+    const filtersRef = (0, react_1.useRef)(filters);
+    const inputsRef = (0, react_1.useRef)(inputs);
+    const togglesRef = (0, react_1.useRef)(toggles);
+    const getInitialState = () => {
         var _a, _b, _c, _d;
-        const initialState = {};
+        const state = {};
         for (const [id, toggle] of Object.entries(toggles)) {
-            initialState[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: enableDeepLink ? searchParams.get(id) === 'true' : false });
+            state[id] = Object.assign(Object.assign({}, toggle), { render: true, type: 'toggle', value: enableDeepLink ? searchParams.get(id) === 'true' : false });
         }
         for (const [id, input] of Object.entries(inputs)) {
-            initialState[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: enableDeepLink ? ((_a = searchParams.get(id)) !== null && _a !== void 0 ? _a : input.value) : input.value });
+            state[id] = Object.assign(Object.assign({}, input), { render: true, type: 'input', value: enableDeepLink ? ((_a = searchParams.get(id)) !== null && _a !== void 0 ? _a : input.value) : input.value });
         }
         for (const [id, filter] of Object.entries(filters)) {
             const defaultValue = ((_c = (_b = filter === null || filter === void 0 ? void 0 : filter.items) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.value) || '';
-            initialState[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: enableDeepLink ? ((_d = searchParams.get(id)) !== null && _d !== void 0 ? _d : defaultValue) : defaultValue });
+            state[id] = Object.assign(Object.assign({}, filter), { render: true, type: 'filter', value: enableDeepLink ? ((_d = searchParams.get(id)) !== null && _d !== void 0 ? _d : defaultValue) : defaultValue });
         }
-        return initialState;
-    });
+        return state;
+    };
+    const [controlsState, setControlsState] = (0, react_1.useState)(getInitialState);
+    (0, react_1.useEffect)(() => {
+        const sameProps = [
+            JSON.stringify(filters) === JSON.stringify(filtersRef.current),
+            JSON.stringify(inputs) === JSON.stringify(inputsRef.current),
+            JSON.stringify(toggles) === JSON.stringify(togglesRef.current),
+        ];
+        if (sameProps.every(Boolean)) {
+            return;
+        }
+        filtersRef.current = filters;
+        inputsRef.current = inputs;
+        togglesRef.current = toggles;
+        const newState = getInitialState();
+        // Preserve existing values where control type hasn't changed
+        Object.entries(newState).forEach(([id, control]) => {
+            const existingControl = controlsState[id];
+            if (existingControl && existingControl.type === control.type) {
+                // @ts-ignore
+                newState[id] = Object.assign(Object.assign({}, control), { value: existingControl.value });
+            }
+        });
+        setControlsState(newState);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filters, inputs, toggles, enableDeepLink]);
     const changeControlState = (id, value) => {
         setControlsState((prev) => {
             const control = prev[id];
@@ -124,7 +152,8 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
             getFileText,
             populateInputsWithValue,
         };
-    }, [filters, controlsState]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [controlsState]);
     /**
      * Update the URL search params with the current state of the filters and inputs
      */
@@ -144,10 +173,10 @@ function useCodeWalkthroughControls(filters, inputs, toggles, enableDeepLink) {
         const newSearch = newSearchParams.toString();
         if (newSearch === location.search.substring(1))
             return;
-        navigate({ search: newSearch });
+        navigate({ search: newSearch }, { replace: true });
         // Ignore searchParams in dependency array to avoid infinite re-renders
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [filters, controlsState, navigate, location]);
+    }, [controlsState]);
     return Object.assign({ changeControlState,
         getControlState }, walkthroughContext);
 }

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

@@ -15,35 +15,37 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
     // Track observed elements in case new observer needs to be created
     const observedElementsRef = (0, react_1.useRef)(new Set());
     const [activeStep, setActiveStep] = (0, react_1.useState)(enableDeepLink ? searchParams.get(constants_1.ACTIVE_STEP_QUERY_PARAM) : null);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const _steps = (0, react_1.useMemo)(() => steps, [JSON.stringify(steps)]);
     const register = (0, react_1.useCallback)((element) => {
         // for some reason, the observer is not ready immediately
         setTimeout(() => {
             if (observerRef.current) {
                 const stepKey = Number(element.dataset.stepKey);
-                if (Number.isInteger(stepKey) && stepKey >= 0) {
-                    steps[stepKey].compRef = element;
+                if (Number.isInteger(stepKey) && stepKey >= 0 && _steps[stepKey]) {
+                    _steps[stepKey].compRef = element;
                 }
                 observerRef.current.observe(element);
                 observedElementsRef.current.add(element);
             }
         }, 10);
-    }, [steps]);
+    }, [_steps]);
     const unregister = (0, react_1.useCallback)((element) => {
         if (observerRef.current) {
             const stepKey = Number(element.dataset.stepKey);
-            if (Number.isInteger(stepKey) && stepKey >= 0) {
-                steps[stepKey].compRef = undefined;
+            if (Number.isInteger(stepKey) && stepKey >= 0 && _steps[stepKey]) {
+                _steps[stepKey].compRef = undefined;
             }
             observerRef.current.unobserve(element);
             observedElementsRef.current.delete(element);
         }
-    }, [steps]);
+    }, [_steps]);
     const observerCallback = (0, react_1.useCallback)((entries) => {
         var _a, _b, _c;
         if (lockObserver.current) {
             return;
         }
-        const renderedSteps = steps.filter((step) => Boolean(step.compRef));
+        const renderedSteps = _steps.filter((step) => Boolean(step.compRef));
         if (renderedSteps.length < 2) {
             setActiveStep(((_a = renderedSteps[0]) === null || _a === void 0 ? void 0 : _a.id) || null);
             return;
@@ -54,7 +56,7 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
                 continue;
             }
             const { intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = entry;
-            const step = steps[stepKey];
+            const step = _steps[stepKey];
             const stepIndex = renderedSteps.findIndex((renderedStep) => renderedStep.stepKey === step.stepKey);
             const { next } = (0, utils_1.getAdjacentValues)(renderedSteps, stepIndex);
             const intersectionAtTop = (rootBounds === null || rootBounds === void 0 ? void 0 : rootBounds.bottom) !== undefined && boundingClientRect.top < rootBounds.top;
@@ -80,7 +82,7 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
                 break;
             }
         }
-    }, [steps, activeStep]);
+    }, [_steps, activeStep]);
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;
         const filtersElementHeight = ((_a = filtersElementRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) || 0;
@@ -113,10 +115,9 @@ function useCodeWalkthroughSteps(steps, enableDeepLink) {
         const newSearch = newSearchParams.toString();
         if (newSearch === location.search.substring(1))
             return;
-        navigate({ search: newSearch });
-        // Ignore searchParams in dependency array to avoid infinite re-renders
+        navigate({ search: newSearch }, { replace: true });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [activeStep, navigate, location]);
+    }, [activeStep]);
     return { register, unregister, lockObserver, filtersElementRef, activeStep, setActiveStep };
 }
 //# sourceMappingURL=use-code-walkthrough-steps.js.map

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

@@ -33,3 +33,4 @@ export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-steps';
 export * from '../../core/hooks/code-walkthrough/use-code-walkthrough-controls';
 export * from '../../core/hooks/code-walkthrough/use-code-panel';
 export * from '../../core/hooks/code-walkthrough/use-renderable-files';
+export * from '../../core/hooks/use-element-size';

package/lib/core/hooks/index.js

@@ -49,4 +49,5 @@ __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-ste
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-walkthrough-controls"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-code-panel"), exports);
 __exportStar(require("../../core/hooks/code-walkthrough/use-renderable-files"), exports);
+__exportStar(require("../../core/hooks/use-element-size"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/use-element-size.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type Size = {
+    width: number;
+    height: number;
+};
+export declare const useElementSize: <T extends HTMLElement = HTMLElement>(ref?: RefObject<T>, delay?: number) => Size;
+export {};