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

package/src/components/Search/SearchDialog.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useRef, useState } from 'react';
+import React, { Fragment, useRef, useState, useEffect } from 'react';
 import styled from 'styled-components';
 
 import type { MouseEvent } from 'react';
@@ -6,7 +6,6 @@ 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';
@@ -17,9 +16,13 @@ import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { SearchFilter } from '@redocly/theme/components/Search/SearchFilter';
 import { SearchGroups } from '@redocly/theme/components/Search/SearchGroups';
+import { Typography } from '@redocly/theme/components/Typography/Typography';
 import { SpinnerLoader } from '@redocly/theme/components/Loaders/SpinnerLoader';
+import { SearchAiDialog } from '@redocly/theme/components/Search/SearchAiDialog';
 import { SettingsIcon } from '@redocly/theme/icons/SettingsIcon/SettingsIcon';
 import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
+import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
+import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
 
 export type SearchDialogProps = {
   onClose: () => void;
@@ -63,6 +66,12 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
 
   useDialogHotKeys(modalRef, onClose);
 
+  useEffect(() => {
+    if (mode === 'ai-dialog' && aiSearch.isGeneratingResponse) {
+      setQuery('');
+    }
+  }, [mode, aiSearch.isGeneratingResponse, setQuery]);
+
   const handleOverlayClick = (event: MouseEvent<HTMLElement>) => {
     const target = event.target as HTMLElement;
     if (typeof target.className !== 'string') return;
@@ -117,6 +126,7 @@ 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 showAiSearchItem = showAiSearchButton && query;
   const showHeaderButtons = showSearchFilterButton || showAiSearchButton;
 
   return (
@@ -129,57 +139,70 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
       <SearchDialogWrapper className="scroll-lock" role="dialog">
         <SearchDialogHeader>
           {product && (
-            <>
-              <SearchProductTag color="product">
-                {product.name}
-                <CloseIcon onClick={() => setProduct(undefined)} color="--icon-color-additional" />
-              </SearchProductTag>
-            </>
+            <SearchProductTag color="product">
+              {product.name}
+              <CloseIcon onClick={() => setProduct(undefined)} color="--icon-color-additional" />
+            </SearchProductTag>
           )}
-          <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 && (
-            <SearchHeaderButtons>
-              {showAiSearchButton ? (
-                <SearchAiButton
-                  icon={<AiStarsIcon />}
-                  onClick={() => {
-                    setMode('ai-dialog');
-                    if (query.trim()) {
-                      setQuery('');
-                      aiSearch.askQuestion(query);
-                    }
-                  }}
-                >
-                  {translate('search.ai.button', 'Search with AI')}
-                </SearchAiButton>
-              ) : null}
-              {showSearchFilterButton && (
-                <SearchFilterToggleButton icon={<SettingsIcon />} onClick={onFilterToggle} />
+          {mode === 'search' ? (
+            <>
+              <SearchInput
+                value={query}
+                onChange={setQuery}
+                placeholder={translate('search.label', 'Search docs...')}
+                isLoading={isSearchLoading}
+                onSubmit={
+                  showAiSearchButton
+                    ? () => {
+                        setMode('ai-dialog');
+                        aiSearch.askQuestion(query);
+                      }
+                    : undefined
+                }
+                data-translation-key="search.label"
+              />
+              {showHeaderButtons && (
+                <SearchHeaderButtons>
+                  {showAiSearchButton ? (
+                    <SearchAiButton
+                      icon={<AiStarsIcon gradient />}
+                      onClick={() => {
+                        setMode('ai-dialog');
+                        if (query.trim()) {
+                          aiSearch.askQuestion(query);
+                        }
+                      }}
+                    >
+                      {translate('search.ai.button', 'Search with AI')}
+                    </SearchAiButton>
+                  ) : null}
+                  {showSearchFilterButton && (
+                    <SearchFilterToggleButton icon={<SettingsIcon />} onClick={onFilterToggle} />
+                  )}
+                </SearchHeaderButtons>
               )}
-            </SearchHeaderButtons>
+            </>
+          ) : (
+            <AiDialogHeaderWrapper>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setMode('search');
+                  aiSearch.clearConversation();
+                }}
+                icon={<ChevronLeftIcon />}
+              >
+                {translate('search.ai.backToSearch', 'Back to search')}
+              </Button>
+              <Button
+                variant="secondary"
+                disabled={!aiSearch.conversation.length}
+                onClick={() => aiSearch.clearConversation()}
+                icon={<EditIcon />}
+              >
+                {translate('search.ai.newConversation', 'New conversation')}
+              </Button>
+            </AiDialogHeaderWrapper>
           )}
         </SearchDialogHeader>
 
@@ -194,6 +217,31 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                   onQuickFilterReset={onQuickFilterReset}
                   groupField={groupField}
                 />
+
+                {showAiSearchItem && (
+                  <SearchWithAI
+                    onClick={() => {
+                      setMode('ai-dialog');
+                      if (query.trim()) {
+                        aiSearch.askQuestion(query);
+                      }
+                    }}
+                    tabIndex={0}
+                    role="option"
+                    aria-selected="true"
+                  >
+                    <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)"
+                    />
+                    <Typography fontWeight="var(--font-weight-semibold)">{query}</Typography>
+                    <Typography>- {translate('search.ai.label', 'Ask AI assistant')}</Typography>
+                    <ReturnKey>⏎</ReturnKey>
+                  </SearchWithAI>
+                )}
                 {showResults ? (
                   items && Object.keys(items).some((key) => items[key]?.length) ? (
                     Object.keys(items).map((key) =>
@@ -248,12 +296,15 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
               )}
             </>
           ) : (
-            <SearchAiResponse
-              question={aiSearch.question}
-              isGeneratingResponse={aiSearch.isGeneratingResponse}
+            <SearchAiDialog
+              initialMessage={query}
               response={aiSearch.response}
-              resources={aiSearch.resources}
+              isGeneratingResponse={aiSearch.isGeneratingResponse}
               error={aiSearch.error}
+              resources={aiSearch.resources}
+              conversation={aiSearch.conversation}
+              setConversation={aiSearch.setConversation}
+              onMessageSent={aiSearch.askQuestion}
             />
           )}
         </SearchDialogBody>
@@ -363,10 +414,18 @@ const SearchDialogHeader = styled.header`
   padding: var(--search-modal-header-padding);
 `;
 
+const AiDialogHeaderWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
 const SearchDialogBody = styled.div`
   display: flex;
   flex-direction: row;
-  flex-grow: 1;
+  flex: 1;
+  min-height: 0;
   overflow: hidden;
 
   @media screen and (max-width: ${breakpoints.small}) {
@@ -476,3 +535,36 @@ const AiDisclaimer = styled.div`
   color: var(--search-ai-disclaimer-text-color);
   margin: 0 auto;
 `;
+
+const SearchWithAI = styled.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 = styled(Typography)`
+  color: var(--search-item-text-color);
+  margin-left: auto;
+`;

package/src/components/Search/variables.ts

@@ -142,12 +142,12 @@ export const search = 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);
@@ -163,9 +163,15 @@ export const search = 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);
@@ -175,10 +181,110 @@ export const search = 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
 `;

package/src/core/constants/search.ts

@@ -7,6 +7,10 @@ export enum AiSearchError {
   EmptyResponse = 'empty_response',
   ErrorProcessingResponse = 'error_processing_response',
 }
+export const enum AiSearchConversationRole {
+  USER = 'user',
+  ASSISTANT = 'assistant',
+}
 
 const defaultErrorConfig: AiSearchErrorConfig = {
   headerKey: 'search.ai.error.header',

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

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
 import type {
@@ -52,11 +52,15 @@ export function useCodeWalkthroughControls(
   const navigate = useNavigate();
   const searchParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
 
-  const [controlsState, setControlsState] = useState(() => {
-    const initialState: CodeWalkthroughControlsState = {};
+  const filtersRef = useRef(filters);
+  const inputsRef = useRef(inputs);
+  const togglesRef = useRef(toggles);
+
+  const getInitialState = () => {
+    const state: CodeWalkthroughControlsState = {};
 
     for (const [id, toggle] of Object.entries(toggles)) {
-      initialState[id] = {
+      state[id] = {
         ...toggle,
         render: true,
         type: 'toggle',
@@ -65,7 +69,7 @@ export function useCodeWalkthroughControls(
     }
 
     for (const [id, input] of Object.entries(inputs)) {
-      initialState[id] = {
+      state[id] = {
         ...input,
         render: true,
         type: 'input',
@@ -75,7 +79,7 @@ export function useCodeWalkthroughControls(
 
     for (const [id, filter] of Object.entries(filters)) {
       const defaultValue = filter?.items?.[0]?.value || '';
-      initialState[id] = {
+      state[id] = {
         ...filter,
         render: true,
         type: 'filter',
@@ -83,8 +87,43 @@ export function useCodeWalkthroughControls(
       };
     }
 
-    return initialState;
-  });
+    return state;
+  };
+
+  const [controlsState, setControlsState] = useState(getInitialState);
+
+  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] = {
+          ...control,
+          value: existingControl.value,
+        };
+      }
+    });
+
+    setControlsState(newState);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filters, inputs, toggles, enableDeepLink]);
 
   const changeControlState = (id: string, value: string | boolean) => {
     setControlsState((prev) => {
@@ -220,7 +259,8 @@ export function useCodeWalkthroughControls(
       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
@@ -242,10 +282,10 @@ export function useCodeWalkthroughControls(
 
     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 {
     changeControlState,

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

@@ -38,14 +38,17 @@ export function useCodeWalkthroughSteps(
     enableDeepLink ? searchParams.get(ACTIVE_STEP_QUERY_PARAM) : null,
   );
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const _steps = useMemo(() => steps, [JSON.stringify(steps)]);
+
   const register = useCallback(
     (element: HTMLElement) => {
       // 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);
@@ -53,22 +56,22 @@ export function useCodeWalkthroughSteps(
         }
       }, 10);
     },
-    [steps],
+    [_steps],
   );
 
   const unregister = useCallback(
     (element: HTMLElement) => {
       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 = useCallback(
@@ -77,7 +80,7 @@ export function useCodeWalkthroughSteps(
         return;
       }
 
-      const renderedSteps = steps.filter((step) => Boolean(step.compRef));
+      const renderedSteps = _steps.filter((step) => Boolean(step.compRef));
 
       if (renderedSteps.length < 2) {
         setActiveStep(renderedSteps[0]?.id || null);
@@ -92,7 +95,7 @@ export function useCodeWalkthroughSteps(
         }
 
         const { intersectionRatio, boundingClientRect, rootBounds, isIntersecting } = entry;
-        const step = steps[stepKey];
+        const step = _steps[stepKey];
 
         const stepIndex = renderedSteps.findIndex(
           (renderedStep) => renderedStep.stepKey === step.stepKey,
@@ -130,7 +133,7 @@ export function useCodeWalkthroughSteps(
         }
       }
     },
-    [steps, activeStep],
+    [_steps, activeStep],
   );
   useEffect(() => {
     const filtersElementHeight = filtersElementRef.current?.clientHeight || 0;
@@ -167,11 +170,11 @@ export function useCodeWalkthroughSteps(
 
     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 };
 }

package/src/core/hooks/index.ts

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