@redocly/theme 0.60.0-next.7 → 0.60.0

package/lib/components/Buttons/AIAssistantButton.js

@@ -46,6 +46,7 @@ const hooks_1 = require("../../core/hooks");
 const ChatIcon_1 = require("../../icons/ChatIcon/ChatIcon");
 const AiStarsGradientIcon_1 = require("../../icons/AiStarsGradientIcon/AiStarsGradientIcon");
 const RedoclyIcon_1 = require("../../icons/RedoclyIcon/RedoclyIcon");
+const contexts_1 = require("../../core/contexts");
 const defaultConfig = {
     hide: false,
     inputType: 'button',
@@ -92,7 +93,7 @@ function AIAssistantButton() {
     const handleClose = () => {
         setIsOpen(false);
     };
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(contexts_1.SearchSessionProvider, null,
         React.createElement(StyledAIAssistantButton, { variant: "outlined", size: "medium", "$inputType": inputType, onClick: handleOpen, "aria-label": `AI Assistant button - ${inputIcon}`, "data-component-name": "Buttons/AIAssistantButton" },
             icon,
             inputType === 'button' && text),

package/lib/components/Search/Search.js

@@ -9,12 +9,17 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const SearchTrigger_1 = require("../../components/Search/SearchTrigger");
 const SearchDialog_1 = require("../../components/Search/SearchDialog");
 const hooks_1 = require("../../core/hooks");
-function Search({ className }) {
+const contexts_1 = require("../../core/contexts");
+function SearchContent({ className }) {
     const { isOpen, onOpen, onClose } = (0, hooks_1.useSearchDialog)();
     return (react_1.default.createElement(SearchWrapper, { "data-component-name": "Search/Search", className: className },
         react_1.default.createElement(SearchTrigger_1.SearchTrigger, { onClick: onOpen }),
         isOpen && react_1.default.createElement(SearchDialog_1.SearchDialog, { onClose: onClose })));
 }
+function Search({ className }) {
+    return (react_1.default.createElement(contexts_1.SearchSessionProvider, null,
+        react_1.default.createElement(SearchContent, { className: className })));
+}
 const SearchWrapper = styled_components_1.default.div `
   margin-left: auto;
 `;

package/lib/components/Search/SearchDialog.js

@@ -54,6 +54,7 @@ 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 contexts_1 = require("../../core/contexts");
 const SettingsIcon_1 = require("../../icons/SettingsIcon/SettingsIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
@@ -63,16 +64,16 @@ const AiStarsGradientIcon_1 = require("../../icons/AiStarsGradientIcon/AiStarsGr
 function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const { useTranslate, useCurrentProduct, useSearch, useProducts, useAiSearch, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
+    const { searchSessionId, refreshSearchSessionId } = (0, contexts_1.useSearchSession)();
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
-    const searchSessionId = `search-${Date.now()}-${Math.random().toString(36).substring(2, 8)}`;
     const [mode, setMode] = (0, react_1.useState)(initialMode);
     const autoSearchDisabled = mode !== 'search';
-    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled, searchSessionId);
+    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
     const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
-    const aiSearch = useAiSearch({ filter }, searchSessionId);
+    const aiSearch = useAiSearch({ filter });
     const searchInputRef = (0, react_1.useRef)(null);
     const modalRef = (0, react_1.useRef)(null);
     const [isMobile, setIsMobile] = (0, react_1.useState)(false);
@@ -95,8 +96,10 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
         if (value) {
             addSearchHistoryItem(value);
         }
+        // Refresh the search session id so a new session starts on next open
+        refreshSearchSessionId();
         onClose();
-    }, [addSearchHistoryItem, onClose]);
+    }, [addSearchHistoryItem, onClose, refreshSearchSessionId]);
     (0, hooks_1.useDialogHotKeys)(modalRef, handleClose);
     const focusSearchInput = () => {
         requestAnimationFrame(() => {
@@ -199,7 +202,10 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                         ? translate('search.ai.back', 'Back')
                         : translate('search.ai.backToSearch', 'Back to search')),
                     react_1.default.createElement(AiDialogHeaderActionsWrapper, null,
-                        react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => aiSearch.clearConversation(), tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation')),
+                        react_1.default.createElement(Button_1.Button, { variant: "secondary", disabled: !aiSearch.conversation.length, onClick: () => {
+                                refreshSearchSessionId();
+                                aiSearch.clearConversation();
+                            }, tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation')),
                         isMobile && react_1.default.createElement(Button_1.Button, { variant: "text", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: handleClose }))))),
             react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
                 advancedSearch && isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,

package/lib/core/contexts/SearchContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type SearchSessionContextValue = {
+    searchSessionId: string;
+    refreshSearchSessionId: () => void;
+};
+export declare const SearchSessionContext: React.Context<SearchSessionContextValue | null>;
+export declare const SearchSessionProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export declare function useSearchSession(): SearchSessionContextValue;

package/lib/core/contexts/SearchContext.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchSessionProvider = exports.SearchSessionContext = void 0;
+exports.useSearchSession = useSearchSession;
+const react_1 = __importStar(require("react"));
+exports.SearchSessionContext = (0, react_1.createContext)(null);
+const SearchSessionProvider = ({ children }) => {
+    const [searchSessionId, setSearchSessionId] = (0, react_1.useState)(() => crypto.randomUUID());
+    const refreshSearchSessionId = (0, react_1.useCallback)(() => {
+        setSearchSessionId(crypto.randomUUID());
+    }, []);
+    const value = (0, react_1.useMemo)(() => ({ searchSessionId, refreshSearchSessionId }), [searchSessionId, refreshSearchSessionId]);
+    return react_1.default.createElement(exports.SearchSessionContext.Provider, { value: value }, children);
+};
+exports.SearchSessionProvider = SearchSessionProvider;
+function useSearchSession() {
+    const contextValue = (0, react_1.useContext)(exports.SearchSessionContext);
+    if (!contextValue) {
+        throw new Error('useSearchSession must be used within a SearchSessionProvider');
+    }
+    return contextValue;
+}
+//# sourceMappingURL=SearchContext.js.map

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

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

package/lib/core/contexts/index.js

@@ -18,4 +18,5 @@ __exportStar(require("./ThemeDataContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughControlsContext"), exports);
 __exportStar(require("./CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
 __exportStar(require("./CodeSnippetContext"), exports);
+__exportStar(require("./SearchContext"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/search/use-search-dialog.js

@@ -9,6 +9,7 @@ const react_router_dom_1 = require("react-router-dom");
 const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
 const use_theme_hooks_1 = require("../use-theme-hooks");
 const use_theme_config_1 = require("../use-theme-config");
+const contexts_1 = require("../../contexts");
 function useSearchDialog() {
     var _a, _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -16,6 +17,7 @@ function useSearchDialog() {
     const location = (0, react_router_dom_1.useLocation)();
     const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
+    const { refreshSearchSessionId } = (0, contexts_1.useSearchSession)();
     const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['⌘+K,CTRL+K'];
     const hotKeys = keyShortcuts === null || keyShortcuts === void 0 ? void 0 : keyShortcuts.join(',');
     (0, react_1.useEffect)(() => {
@@ -35,8 +37,9 @@ function useSearchDialog() {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const onClose = (0, react_1.useCallback)(() => {
+        refreshSearchSessionId();
         setIsOpen(false);
-    }, []);
+    }, [refreshSearchSessionId]);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     (0, react_1.useEffect)(onClose, [location]);
     return { isOpen, onOpen, onClose };

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -52,6 +52,8 @@ export declare const useTelemetryFallback: () => {
     sendSwitchServersClickedMessage: () => void;
     sendExamplesSwitcherClickedMessage: () => void;
     sendTryItOpenedMessage: () => void;
+    sendViewSecurityDetailsClickedMessage: () => void;
+    sendViewSecurityDetailsClosedMessage: () => void;
     sendAsyncapiDocsViewedMessage: () => void;
     sendAsyncapiDocsPerformanceMetricsMessage: () => void;
     sendAsyncapiDocsSwitchMessageClickedMessage: () => void;

package/lib/core/hooks/use-telemetry-fallback.js

@@ -57,6 +57,8 @@ const useTelemetryFallback = () => ({
     sendSwitchServersClickedMessage: () => { },
     sendExamplesSwitcherClickedMessage: () => { },
     sendTryItOpenedMessage: () => { },
+    sendViewSecurityDetailsClickedMessage: () => { },
+    sendViewSecurityDetailsClosedMessage: () => { },
     sendAsyncapiDocsViewedMessage: () => { },
     sendAsyncapiDocsPerformanceMetricsMessage: () => { },
     sendAsyncapiDocsSwitchMessageClickedMessage: () => { },

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

@@ -24,3 +24,4 @@ export { useDialogHotKeys } from '../hooks/use-dialog-hotkeys';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
+export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.getOperationColor = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.SearchSessionContext = exports.SearchSessionProvider = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.getOperationColor = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -51,4 +51,7 @@ Object.defineProperty(exports, "isNotNull", { enumerable: true, get: function ()
 Object.defineProperty(exports, "isObject", { enumerable: true, get: function () { return type_guards_1.isObject; } });
 var ThemeDataContext_1 = require("../contexts/ThemeDataContext");
 Object.defineProperty(exports, "ThemeDataContext", { enumerable: true, get: function () { return ThemeDataContext_1.ThemeDataContext; } });
+var SearchContext_1 = require("../contexts/SearchContext");
+Object.defineProperty(exports, "SearchSessionProvider", { enumerable: true, get: function () { return SearchContext_1.SearchSessionProvider; } });
+Object.defineProperty(exports, "SearchSessionContext", { enumerable: true, get: function () { return SearchContext_1.SearchSessionContext; } });
 //# sourceMappingURL=index.js.map

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

@@ -64,7 +64,7 @@ export type ThemeHooks = {
         banner: BannerConfig | undefined;
         dismissBanner: (content: string) => void;
     };
-    useSearch: (product?: string, autoSearchDisabled?: boolean, searchSessionId?: string) => {
+    useSearch: (product?: string, autoSearchDisabled?: boolean) => {
         query: string;
         setQuery: React.Dispatch<React.SetStateAction<string>>;
         filter: SearchFilterItem[];
@@ -82,7 +82,7 @@ export type ThemeHooks = {
     };
     useAiSearch: (options?: {
         filter?: SearchFilterItem[];
-    }, searchSessionId?: string) => {
+    }) => {
         askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
         isGeneratingResponse: boolean;
         question: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.60.0-next.7",
+  "version": "0.60.0",
   "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"
   },
   "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/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/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/search/use-search-dialog.ts

@@ -4,6 +4,7 @@ import hotkeys from 'hotkeys-js';
 
 import { useThemeHooks } from '../use-theme-hooks';
 import { useThemeConfig } from '../use-theme-config';
+import { useSearchSession } from '../../contexts';
 
 export function useSearchDialog() {
   const [isOpen, setIsOpen] = useState(false);
@@ -11,6 +12,7 @@ export function useSearchDialog() {
   const location = useLocation();
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
+  const { refreshSearchSessionId } = useSearchSession();
   const keyShortcuts = themeSettings?.search?.shortcuts ?? ['⌘+K,CTRL+K'];
   const hotKeys = keyShortcuts?.join(',');
 
@@ -34,8 +36,9 @@ export function useSearchDialog() {
   }, []);
 
   const onClose = useCallback(() => {
+    refreshSearchSessionId();
     setIsOpen(false);
-  }, []);
+  }, [refreshSearchSessionId]);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(onClose, [location]);

package/src/core/hooks/use-telemetry-fallback.ts

@@ -54,6 +54,8 @@ export const useTelemetryFallback = () => ({
   sendSwitchServersClickedMessage: () => {},
   sendExamplesSwitcherClickedMessage: () => {},
   sendTryItOpenedMessage: () => {},
+  sendViewSecurityDetailsClickedMessage: () => {},
+  sendViewSecurityDetailsClosedMessage: () => {},
   sendAsyncapiDocsViewedMessage: () => {},
   sendAsyncapiDocsPerformanceMetricsMessage: () => {},
   sendAsyncapiDocsSwitchMessageClickedMessage: () => {},

package/src/core/openapi/index.ts

@@ -37,3 +37,4 @@ export { useDialogHotKeys } from '../hooks/use-dialog-hotkeys';
 export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
+export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';

package/src/core/types/hooks.ts

@@ -91,7 +91,6 @@ export type ThemeHooks = {
   useSearch: (
     product?: string,
     autoSearchDisabled?: boolean,
-    searchSessionId?: string,
   ) => {
     query: string;
     setQuery: React.Dispatch<React.SetStateAction<string>>;
@@ -113,10 +112,7 @@ export type ThemeHooks = {
     advancedSearch?: boolean;
     askAi?: boolean;
   };
-  useAiSearch: (
-    options?: { filter?: SearchFilterItem[] },
-    searchSessionId?: string,
-  ) => {
+  useAiSearch: (options?: { filter?: SearchFilterItem[] }) => {
     askQuestion: (question: string, history?: AiSearchConversationItem[]) => void;
     isGeneratingResponse: boolean;
     question: string;