@redocly/theme 0.60.0-next.6 → 0.60.0-next.8

package/lib/core/styles/global.js

@@ -28,21 +28,22 @@ const variables_23 = require("../../components/Menu/variables");
 const variables_24 = require("../../components/CodeBlock/variables");
 const variables_25 = require("../../components/Product/variables");
 const variables_26 = require("../../components/Markdown/variables");
-const variables_27 = require("../../markdoc/components/Tabs/variables");
-const variables_28 = require("../../markdoc/components/Mermaid/variables");
-const variables_29 = require("../../components/LastUpdated/variables");
-const variables_30 = require("../../components/Logo/variables");
-const variables_31 = require("../../components/StatusCode/variables");
-const variables_32 = require("../../components/Segmented/variables");
-const variables_33 = require("../../components/UserMenu/variables");
-const variables_34 = require("../../components/Tags/variables");
-const variables_35 = require("../../components/VersionPicker/variables");
-const variables_36 = require("../../components/DatePicker/variables");
-const variables_37 = require("../../components/Switch/variables");
-const variables_38 = require("../../markdoc/components/Cards/variables");
-const variables_39 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_40 = require("../../components/SkipContent/variables");
-const variables_41 = require("../../components/PageActions/variables");
+const variables_27 = require("../../components/Banner/variables");
+const variables_28 = require("../../markdoc/components/Tabs/variables");
+const variables_29 = require("../../markdoc/components/Mermaid/variables");
+const variables_30 = require("../../components/LastUpdated/variables");
+const variables_31 = require("../../components/Logo/variables");
+const variables_32 = require("../../components/StatusCode/variables");
+const variables_33 = require("../../components/Segmented/variables");
+const variables_34 = require("../../components/UserMenu/variables");
+const variables_35 = require("../../components/Tags/variables");
+const variables_36 = require("../../components/VersionPicker/variables");
+const variables_37 = require("../../components/DatePicker/variables");
+const variables_38 = require("../../components/Switch/variables");
+const variables_39 = require("../../markdoc/components/Cards/variables");
+const variables_40 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_41 = require("../../components/SkipContent/variables");
+const variables_42 = require("../../components/PageActions/variables");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -1216,32 +1217,33 @@ exports.styles = (0, styled_components_1.css) `
     ${apiReferenceDocs}
     ${variables_11.apiReferencePanels}
     ${badges}
+    ${variables_27.banner}
     ${borders}
     ${variables_5.breadcrumbs}
     ${variables_19.button}
     ${variables_20.aiAssistantButton}
     ${variables_20.connectMCPButton}
-    ${variables_38.cards}
+    ${variables_39.cards}
     ${variables_8.catalog}
     ${variables_10.catalogClassic}
     ${variables_24.code}
-    ${variables_39.codeWalkthrough}
+    ${variables_40.codeWalkthrough}
     ${docsDropdown}
     ${variables_14.dropdown}
     ${error}
     ${variables_9.filter}
     ${variables_18.footer}
     ${headingsTypography}
-    ${variables_34.httpTag}
+    ${variables_35.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_29.lastUpdated}
+    ${variables_30.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_30.logo}
+    ${variables_31.logo}
     ${variables_26.markdown}
-    ${variables_27.markdownTabs}
-    ${variables_28.mermaid}
+    ${variables_28.markdownTabs}
+    ${variables_29.mermaid}
     ${variables_23.menu}
     ${variables_23.mobileMenu}
     ${modal}
@@ -1259,23 +1261,23 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_15.tooltip}
     ${typography}
-    ${variables_33.userMenu}
-    ${variables_35.versionPicker}
+    ${variables_34.userMenu}
+    ${variables_36.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_31.statusCode}
+    ${variables_32.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_32.segmented}
-    ${variables_37.switcher}
+    ${variables_33.segmented}
+    ${variables_38.switcher}
     ${variables_16.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_36.datePicker}
+    ${variables_37.datePicker}
     ${replay}
-    ${variables_40.skipContent}
-    ${variables_41.pageActions}
+    ${variables_41.skipContent}
+    ${variables_42.pageActions}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

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

@@ -1,5 +1,5 @@
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
-import type { CatalogEntityConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { BannerConfig, CatalogEntityConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
@@ -60,7 +60,11 @@ export type ThemeHooks = {
         breadcrumbs: BreadcrumbItem[];
         currentItemSiblings?: BreadcrumbItem[];
     };
-    useSearch: (product?: string, autoSearchDisabled?: boolean, searchSessionId?: string) => {
+    useBanner: () => {
+        banner: BannerConfig | undefined;
+        dismissBanner: (content: string) => void;
+    };
+    useSearch: (product?: string, autoSearchDisabled?: boolean) => {
         query: string;
         setQuery: React.Dispatch<React.SetStateAction<string>>;
         filter: SearchFilterItem[];
@@ -78,7 +82,7 @@ export type ThemeHooks = {
     };
     useAiSearch: (options?: {
         filter?: SearchFilterItem[];
-    }, searchSessionId?: string) => {
+    }) => {
         askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
         isGeneratingResponse: boolean;
         question: string;

package/lib/index.d.ts

@@ -44,6 +44,7 @@ export * from './components/Footer/Footer';
 export * from './components/Footer/FooterColumn';
 export * from './components/Footer/FooterCopyright';
 export * from './components/Footer/FooterItem';
+export * from './components/Banner/Banner';
 export * from './components/Typography/CompactTypography';
 export * from './components/Typography/Emphasis';
 export * from './components/Typography/H1';

package/lib/index.js

@@ -89,6 +89,8 @@ __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Footer/FooterColumn"), exports);
 __exportStar(require("./components/Footer/FooterCopyright"), exports);
 __exportStar(require("./components/Footer/FooterItem"), exports);
+/* Banner */
+__exportStar(require("./components/Banner/Banner"), exports);
 /* Typography */
 __exportStar(require("./components/Typography/CompactTypography"), exports);
 __exportStar(require("./components/Typography/Emphasis"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.60.0-next.6",
+  "version": "0.60.0-next.8",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -29,8 +29,8 @@
     "@markdoc/markdoc": "0.5.2",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "react-router-dom": "^6.21.1",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
@@ -45,8 +45,8 @@
     "@types/lodash.throttle": "4.1.9",
     "@types/node": "22.18.13",
     "@types/nprogress": "0.2.3",
-    "@types/react": "^19.1.4",
-    "@types/react-dom": "^19.1.4",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/styled-components": "5.1.34",
     "@vitest/coverage-v8": "^4.0.10",
     "@vitest/ui": "3.2.4",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.6.0-next.1"
+    "@redocly/realm-asyncapi-sdk": "0.6.0-next.2"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,7 +81,7 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.40.0"
+    "@redocly/config": "0.41.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/Banner/Banner.tsx

@@ -0,0 +1,179 @@
+import React, { useRef, useEffect, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+import type { BannerConfig } from '@redocly/config';
+import type { JSX } from 'react';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { Button } from '@redocly/theme/components/Button/Button';
+
+type BannerColor = 'info' | 'success' | 'warning' | 'error';
+
+type BannerProps = {
+  className?: string;
+};
+
+function setBannerHeight(height: number): void {
+  document.documentElement.style.setProperty('--banner-height', `${height}px`);
+}
+
+export function Banner({ className }: BannerProps): JSX.Element | null {
+  const { useBanner, useMarkdownText } = useThemeHooks();
+  const { banner, dismissBanner } = useBanner();
+  const [displayBanner, setDisplayBanner] = useState<BannerConfig | undefined>(undefined);
+  const [isVisible, setIsVisible] = useState(false);
+  const markdownContent = useMarkdownText(displayBanner?.content || '');
+  const bannerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (banner) {
+      setDisplayBanner(banner);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setIsVisible(true);
+        });
+      });
+    } else {
+      setIsVisible(false);
+      const timer = setTimeout(() => {
+        setDisplayBanner(undefined);
+      }, 400);
+      return () => clearTimeout(timer);
+    }
+  }, [banner]);
+
+  useEffect(() => {
+    if (!displayBanner) {
+      const timer = setTimeout(() => {
+        setBannerHeight(0);
+      }, 400);
+      return () => clearTimeout(timer);
+    }
+
+    const bannerElement = bannerRef.current;
+    if (!bannerElement) return;
+
+    if (!isVisible) {
+      setBannerHeight(0);
+      return;
+    }
+
+    const updateHeight = (): void => {
+      const height = bannerElement.getBoundingClientRect().height;
+      setBannerHeight(height);
+    };
+
+    updateHeight();
+
+    const resizeObserver = new ResizeObserver(updateHeight);
+    resizeObserver.observe(bannerElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [displayBanner, isVisible]);
+
+  if (!displayBanner) {
+    return null;
+  }
+
+  const bannerColor =
+    ((displayBanner as BannerConfig & { color?: BannerColor }).color as BannerColor) || 'info';
+
+  return (
+    <BannerWrapper
+      ref={bannerRef}
+      data-component-name="Banner/Banner"
+      className={className}
+      $color={bannerColor}
+      $isVisible={isVisible}
+    >
+      <BannerContent>
+        <Markdown compact>{markdownContent}</Markdown>
+      </BannerContent>
+      {displayBanner.dismissible && (
+        <DismissButton
+          variant="ghost"
+          size="var(--banner-button-size)"
+          icon={<CloseIcon color={`var(--banner-${bannerColor}-icon-color)`} size="16px" />}
+          onClick={() => dismissBanner(displayBanner.content)}
+          aria-label="Dismiss banner"
+        />
+      )}
+    </BannerWrapper>
+  );
+}
+
+const BannerContent = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  p {
+    margin: 0;
+    color: var(--banner-text-color);
+    text-align: center;
+
+    a:not([role='button']) {
+      color: var(--banner-link-color);
+      text-decoration: var(--banner-link-decoration);
+    }
+
+    [data-component-name='Button/Button'] {
+      --button-font-size: var(--banner-button-font-size);
+      --button-border-radius: var(--banner-button-border-radius);
+      --button-padding: var(--banner-button-padding-inline);
+      --button-line-height: var(--banner-button-line-height);
+      --button-icon-size: var(--banner-button-icon-size);
+      --button-icon-padding: var(--banner-button-icon-padding);
+      --button-icon-left-padding: var(--banner-button-icon-left-padding);
+      --button-icon-right-padding: var(--banner-button-icon-right-padding);
+      margin: var(--banner-button-margin);
+    }
+  }
+
+  p > * {
+    vertical-align: bottom;
+  }
+`;
+
+const BannerWrapper = styled.div<{ $color?: BannerColor; $isVisible?: boolean }>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--banner-padding);
+  color: var(--banner-text-color);
+  min-height: var(--banner-min-height);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  z-index: var(--z-index-overlay);
+  transform: ${({ $isVisible }) => ($isVisible ? 'translateY(0)' : 'translateY(-100%)')};
+  transition: transform 0.4s ease-out;
+  ${({ $color }) =>
+    $color &&
+    css`
+      background-color: var(--banner-${$color}-bg-color);
+
+      ${BannerContent} {
+        p {
+          color: var(--banner-${$color}-text-color);
+        }
+
+        a:not([role='button']) {
+          color: var(--banner-${$color}-link-color);
+        }
+      }
+    `}
+`;
+
+const DismissButton = styled(Button)`
+  width: var(--banner-button-size);
+  height: var(--banner-button-size);
+  padding: var(--banner-button-padding);
+`;

package/src/components/Banner/variables.dark.ts

@@ -0,0 +1,10 @@
+import { css } from 'styled-components';
+
+export const bannerDarkMode = css`
+  /**
+  * @tokens Banner
+  */
+ 
+  --banner-warning-text-color: var(--color-white); // @presenter Color
+`;
+

package/src/components/Banner/variables.ts

@@ -0,0 +1,43 @@
+import { css } from 'styled-components';
+
+export const banner = css`
+  /**
+  * @tokens Banner
+  */
+  --banner-button-size: 22px;
+  --banner-button-padding: 3px; // @presenter Spacing
+  --banner-button-font-size: var(--font-size-base);
+  --banner-button-border-radius: var(--border-radius);
+  --banner-button-padding-inline: 1px var(--spacing-sm);
+  --banner-button-line-height: var(--line-height-base); // @presenter LineHeight
+  --banner-button-icon-size: 14px;
+  --banner-button-icon-padding: 5px; // @presenter Spacing
+  --banner-button-icon-left-padding: 1px var(--spacing-sm) 1px 10px; // @presenter Spacing
+  --banner-button-icon-right-padding: 1px 10px 1px var(--spacing-sm); // @presenter Spacing
+  --banner-button-margin: 0 var(--spacing-xs); // @presenter Spacing
+  --banner-padding: var(--spacing-xs); // @presenter Spacing
+  --banner-link-decoration: var(--link-decoration-hover);
+  --banner-min-height: 38px;
+  --banner-gap: var(--spacing-xxs); // @presenter Spacing
+
+  --banner-info-bg-color: var(--color-info-base); // @presenter Color
+  --banner-info-text-color: var(--color-static-white); // @presenter Color
+  --banner-info-icon-color: var(--color-static-white); // @presenter Color
+  --banner-info-link-color: var(--banner-info-text-color); // @presenter Color
+
+  --banner-success-bg-color: var(--color-success-base); // @presenter Color
+  --banner-success-text-color: var(--color-static-white); // @presenter Color
+  --banner-success-icon-color: var(--color-static-white); // @presenter Color
+  --banner-success-link-color: var(--banner-success-text-color); // @presenter Color
+
+  --banner-warning-bg-color: var(--color-warning-base); // @presenter Color
+  --banner-warning-text-color: var(--color-black); // @presenter Color
+  --banner-warning-icon-color: var(--color-black); // @presenter Color
+  --banner-warning-link-color: var(--banner-warning-text-color); // @presenter Color
+
+  --banner-error-bg-color: var(--color-error-base); // @presenter Color
+  --banner-error-text-color: var(--color-static-white); // @presenter Color
+  --banner-error-icon-color: var(--color-static-white); // @presenter Color
+  --banner-error-link-color: var(--banner-error-text-color); // @presenter Color
+`;
+

package/src/components/Buttons/AIAssistantButton.tsx

@@ -8,6 +8,7 @@ import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChatIcon } from '@redocly/theme/icons/ChatIcon/ChatIcon';
 import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
 import { RedoclyIcon } from '@redocly/theme/icons/RedoclyIcon/RedoclyIcon';
+import { SearchSessionProvider } from '@redocly/theme/core/contexts';
 
 type AIAssistantButtonIconType = 'chat' | 'sparkles' | 'redocly';
 type AIAssistantButtonType = 'button' | 'icon';
@@ -86,7 +87,7 @@ export function AIAssistantButton() {
   };
 
   return (
-    <>
+    <SearchSessionProvider>
       <StyledAIAssistantButton
         variant="outlined"
         size="medium"
@@ -100,7 +101,7 @@ export function AIAssistantButton() {
       </StyledAIAssistantButton>
 
       {isOpen && <SearchDialog onClose={handleClose} initialMode="ai-dialog" />}
-    </>
+    </SearchSessionProvider>
   );
 }
 

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -64,6 +64,7 @@ const LanguageDropdown = styled(Dropdown).attrs(() => ({
   },
 }))`
   display: none;
+  height: auto;
   @media screen and (min-width: ${breakpoints.medium}) {
     display: block;
   }

package/src/components/Navbar/Navbar.tsx

@@ -17,6 +17,7 @@ import { ProductPicker } from '@redocly/theme/components/Product/ProductPicker';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { MenuIcon } from '@redocly/theme/icons/MenuIcon/MenuIcon';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { Banner } from '@redocly/theme/components/Banner/Banner';
 
 export type NavbarProps = {
   className?: string;
@@ -43,6 +44,7 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
 
   return (
     <NavbarWrapper data-component-name="Navbar/Navbar" className={className}>
+      <Banner />
       {isOpen && <MenuMobile hideUserProfile={!!hideUserMenu} />}
       <NavbarRow>
         {logo && <NavbarLogo config={logo} />}
@@ -76,16 +78,15 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
 
 const NavbarWrapper = styled.nav`
   --text-color: var(--navbar-text-color);
+  height: calc(var(--navbar-height) + var(--banner-height));
+  transition: height 0.4s ease-out;
 
   position: sticky;
-  display: flex;
   top: 0;
-  height: var(--navbar-height);
+  display: flex;
+  flex-direction: column;
   flex-shrink: 0;
-  align-items: center;
   box-sizing: border-box;
-  padding: var(--navbar-padding);
-  border: var(--navbar-border);
   font-size: var(--navbar-font-size);
   font-family: var(--navbar-font-family);
   z-index: var(--z-index-raised);
@@ -110,7 +111,14 @@ const NavbarRow = styled.div`
   justify-content: space-between;
   width: 100%;
   gap: 8px;
+  height: var(--navbar-height);
   max-width: var(--navbar-container-max-width);
+  padding: var(--navbar-padding);
+  border: var(--navbar-border);
+  background: var(--navbar-bg-color);
+  box-sizing: border-box;
+  margin-top: var(--banner-height);
+  transition: margin-top 0.5s ease-out;
 
   @media screen and (min-width: ${breakpoints.max}) {
     max-width: var(--container-max-width);

package/src/components/Search/Search.tsx

@@ -6,12 +6,13 @@ import type { JSX } from 'react';
 import { SearchTrigger } from '@redocly/theme/components/Search/SearchTrigger';
 import { SearchDialog } from '@redocly/theme/components/Search/SearchDialog';
 import { useSearchDialog } from '@redocly/theme/core/hooks';
+import { SearchSessionProvider } from '@redocly/theme/core/contexts';
 
 export type SearchProps = {
   className?: string;
 };
 
-export function Search({ className }: SearchProps): JSX.Element {
+function SearchContent({ className }: SearchProps): JSX.Element {
   const { isOpen, onOpen, onClose } = useSearchDialog();
 
   return (
@@ -22,6 +23,14 @@ export function Search({ className }: SearchProps): JSX.Element {
   );
 }
 
+export function Search({ className }: SearchProps): JSX.Element {
+  return (
+    <SearchSessionProvider>
+      <SearchContent className={className} />
+    </SearchSessionProvider>
+  );
+}
+
 const SearchWrapper = styled.div`
   margin-left: auto;
 `;

package/src/components/Search/SearchDialog.tsx

@@ -24,6 +24,7 @@ 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 { useSearchSession } from '@redocly/theme/core/contexts';
 import { SettingsIcon } from '@redocly/theme/icons/SettingsIcon/SettingsIcon';
 import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 import { ReturnKeyIcon } from '@redocly/theme/icons/ReturnKeyIcon/ReturnKeyIcon';
@@ -45,10 +46,10 @@ export function SearchDialog({
   const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } =
     useThemeHooks();
   const telemetry = useTelemetry();
+  const { searchSessionId, refreshSearchSessionId } = useSearchSession();
   const products = useProducts();
   const currentProduct = useCurrentProduct();
   const [product, setProduct] = useState(currentProduct);
-  const searchSessionId = `search-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
   const [mode, setMode] = useState<'search' | 'ai-dialog'>(initialMode);
   const autoSearchDisabled = mode !== 'search';
   const {
@@ -63,7 +64,7 @@ export function SearchDialog({
     advancedSearch,
     askAi,
     groupField,
-  } = useSearch(product?.name, autoSearchDisabled, searchSessionId);
+  } = useSearch(product?.name, autoSearchDisabled);
   const {
     isFilterOpen,
     onFilterToggle,
@@ -73,7 +74,7 @@ export function SearchDialog({
     onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const { addSearchHistoryItem } = useRecentSearches();
-  const aiSearch = useAiSearch({ filter }, searchSessionId);
+  const aiSearch = useAiSearch({ filter });
 
   const searchInputRef = useRef<HTMLInputElement>(null);
   const modalRef = useRef<HTMLDivElement>(null);
@@ -103,8 +104,11 @@ export function SearchDialog({
       addSearchHistoryItem(value);
     }
 
+    // Refresh the search session id so a new session starts on next open
+    refreshSearchSessionId();
+
     onClose();
-  }, [addSearchHistoryItem, onClose]);
+  }, [addSearchHistoryItem, onClose, refreshSearchSessionId]);
 
   useDialogHotKeys(modalRef, handleClose);
 
@@ -276,7 +280,10 @@ export function SearchDialog({
                 <Button
                   variant="secondary"
                   disabled={!aiSearch.conversation.length}
-                  onClick={() => aiSearch.clearConversation()}
+                  onClick={() => {
+                    refreshSearchSessionId();
+                    aiSearch.clearConversation();
+                  }}
                   tabIndex={0}
                   icon={<EditIcon />}
                 >

package/src/core/contexts/SearchContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
+
+export type SearchSessionContextValue = {
+  searchSessionId: string;
+  refreshSearchSessionId: () => void;
+};
+
+export const SearchSessionContext = createContext<SearchSessionContextValue | null>(null);
+
+export const SearchSessionProvider = ({ children }: { children: React.ReactNode }) => {
+  const [searchSessionId, setSearchSessionId] = useState(() => crypto.randomUUID());
+
+  const refreshSearchSessionId = useCallback(() => {
+    setSearchSessionId(crypto.randomUUID());
+  }, []);
+
+  const value = useMemo(
+    () => ({ searchSessionId, refreshSearchSessionId }),
+    [searchSessionId, refreshSearchSessionId],
+  );
+
+  return <SearchSessionContext.Provider value={value}>{children}</SearchSessionContext.Provider>;
+};
+
+export function useSearchSession(): SearchSessionContextValue {
+  const contextValue = useContext(SearchSessionContext);
+  if (!contextValue) {
+    throw new Error('useSearchSession must be used within a SearchSessionProvider');
+  }
+  return contextValue;
+}

package/src/core/contexts/index.ts

@@ -2,3 +2,4 @@ export * from './ThemeDataContext';
 export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
 export * from './CodeWalkthrough/CodeWalkthroughStepsContext';
 export * from './CodeSnippetContext';
+export * from './SearchContext';

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

@@ -17,6 +17,10 @@ export const useThemeHooks = vi.fn(() => ({
     sendCodeSnippetReportedMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue({ breadcrumbs: [], siblings: undefined }),
+  useBanner: vi.fn(() => ({
+    banner: undefined,
+    dismissBanner: vi.fn(),
+  })),
   usePageSharedData: vi.fn().mockReturnValue({}),
   useCatalogClassic: vi.fn(() => ({
     groups: [],