@redocly/theme 0.59.0-next.1 → 0.59.0-next.10

package/lib/components/Search/SearchAiMessage.js

@@ -1,11 +1,45 @@
 "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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchAiMessage = SearchAiMessage;
-const react_1 = __importDefault(require("react"));
+exports.SearchAiMessage = void 0;
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const types_1 = require("../../core/types");
 const Link_1 = require("../../components/Link/Link");
 const Tag_1 = require("../../components/Tag/Tag");
 const constants_1 = require("../../core/constants");
@@ -13,29 +47,91 @@ const hooks_1 = require("../../core/hooks");
 const Markdown_1 = require("../../components/Markdown/Markdown");
 const DocumentIcon_1 = require("../../icons/DocumentIcon/DocumentIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
-function SearchAiMessage({ role, content, isThinking, resources, className, }) {
-    const { useMarkdownText, useTranslate } = (0, hooks_1.useThemeHooks)();
+const CheckmarkOutlineIcon_1 = require("../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
+const SearchAiActionButtons_1 = require("./SearchAiActionButtons");
+const SearchAiNegativeFeedbackForm_1 = require("./SearchAiNegativeFeedbackForm");
+function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, }) {
+    var _a;
+    const { useMarkdownText, useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const markDownContent = useMarkdownText(content || '');
     const { translate } = useTranslate();
+    const telemetry = useTelemetry();
+    const [feedbackSent, setFeedbackSent] = (0, react_1.useState)(false);
+    const hasResources = !isThinking && resources && resources.length > 0;
+    const resourcesCount = (_a = resources === null || resources === void 0 ? void 0 : resources.length) !== null && _a !== void 0 ? _a : 0;
+    const showSuccessMessage = feedbackSent && feedback;
+    const sendFeedbackTelemetry = (feedbackValue, dislikeReason) => {
+        if (!messageId)
+            return;
+        try {
+            telemetry.sendSearchAIFeedbackMessage({
+                feedback: feedbackValue,
+                messageId,
+                reason: dislikeReason,
+            });
+        }
+        catch (error) {
+            console.error('Error sending feedback', error);
+        }
+    };
+    const handleFeedbackClick = (feedbackValue, reason) => {
+        if (!messageId) {
+            return;
+        }
+        if (!reason) {
+            onFeedbackChange(messageId, feedbackValue);
+        }
+        sendFeedbackTelemetry(feedbackValue, reason);
+        if (feedbackValue === types_1.FeedbackType.Like || reason) {
+            setFeedbackSent(true);
+        }
+    };
     return (react_1.default.createElement(SearchAiMessageWrapper, { "data-component-name": "Search/SearchAiMessage", role: role, className: className, "data-testid": "search-ai-message" },
         role === constants_1.AiSearchConversationRole.ASSISTANT && (react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", color: "var(--search-ai-icon-color)", margin: "0 var(--spacing-xs) 0 0" })),
-        react_1.default.createElement(MessageWrapper, { role: role },
-            role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
-                !isThinking && resources && resources.length > 0 && (react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
-                    react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
-                        translate('search.ai.resourcesFound.basedOn', 'Based on'),
-                        " ",
-                        resources.length,
-                        ' ',
-                        translate('search.ai.resourcesFound.resources', 'resources')),
-                    react_1.default.createElement(ResourceTagsWrapper, 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))))))))) : (content),
-            isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
-                react_1.default.createElement(ThinkingDot, null),
-                react_1.default.createElement(ThinkingDot, null),
-                react_1.default.createElement(ThinkingDot, null))))));
+        react_1.default.createElement(MessageContentWrapper, null,
+            react_1.default.createElement(MessageWrapper, { role: role },
+                role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
+                    hasResources && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
+                            react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
+                                translate('search.ai.resourcesFound.basedOn', 'Based on'),
+                                " ",
+                                resourcesCount,
+                                ' ',
+                                translate('search.ai.resourcesFound.resources', 'resources')),
+                            react_1.default.createElement(ResourceTagsWrapper, null, resources === null || resources === void 0 ? void 0 : resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: `${resource.url}-${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)))))),
+                        react_1.default.createElement(FeedbackWrapper, null,
+                            react_1.default.createElement(SearchAiActionButtons_1.SearchAiActionButtons, { content: content, feedback: feedback, onFeedback: handleFeedbackClick, disabled: feedbackSent })))))) : (content),
+                isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
+                    react_1.default.createElement(ThinkingDot, null),
+                    react_1.default.createElement(ThinkingDot, null),
+                    react_1.default.createElement(ThinkingDot, null)))),
+            messageId && feedback === types_1.FeedbackType.Dislike && !showSuccessMessage && (react_1.default.createElement(SearchAiNegativeFeedbackForm_1.SearchAiNegativeFeedbackForm, { messageId: messageId, onClose: onFeedbackChange, onSubmit: (reason) => handleFeedbackClick(types_1.FeedbackType.Dislike, reason) })),
+            showSuccessMessage && (react_1.default.createElement(SuccessMessageWrapper, { "data-component-name": "Search/SearchAiMessage/Success" },
+                react_1.default.createElement(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon, { size: "20px", color: "var(--color-success-base)" }),
+                react_1.default.createElement(SuccessMessageText, null, translate('search.ai.feedback.thanks', 'Thank you for your feedback!')))))));
+}
+function areResourcesEqual(prev, next) {
+    if (prev === next)
+        return true;
+    if (!prev || !next || prev.length !== next.length)
+        return false;
+    return prev.every((resource, index) => {
+        const nextResource = next[index];
+        return resource.url === nextResource.url && resource.title === nextResource.title;
+    });
 }
+exports.SearchAiMessage = (0, react_1.memo)(SearchAiMessageComponent, (prevProps, nextProps) => {
+    return (prevProps.role === nextProps.role &&
+        prevProps.content === nextProps.content &&
+        prevProps.isThinking === nextProps.isThinking &&
+        prevProps.messageId === nextProps.messageId &&
+        prevProps.feedback === nextProps.feedback &&
+        prevProps.onFeedbackChange === nextProps.onFeedbackChange &&
+        areResourcesEqual(prevProps.resources, nextProps.resources));
+});
 const SearchAiMessageWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
@@ -43,6 +139,13 @@ const SearchAiMessageWrapper = styled_components_1.default.div `
   width: 100%;
   justify-content: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
 `;
+const MessageContentWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  max-width: 80%;
+  min-width: 0;
+`;
 const ResponseText = (0, styled_components_1.default)(Markdown_1.Markdown) `
   color: var(--search-ai-text-color);
   font-size: var(--search-ai-text-font-size);
@@ -63,7 +166,8 @@ const MessageWrapper = styled_components_1.default.div `
   padding: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'var(--spacing-sm)' : 'var(--spacing-xs)'}
     var(--spacing-sm);
   border-radius: var(--border-radius-lg);
-  max-width: 80%;
+  width: fit-content;
+  max-width: 100%;
   word-wrap: break-word;
   white-space: pre-wrap;
   background-color: ${({ role }) => role === constants_1.AiSearchConversationRole.USER
@@ -78,7 +182,13 @@ const ResourcesWrapper = styled_components_1.default.div `
   gap: var(--search-ai-resources-gap);
   display: flex;
   flex-direction: column;
-  margin: var(--spacing-xs) 0;
+  margin: 0;
+`;
+const FeedbackWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: row;
+  gap: var(--search-ai-feedback-gap);
+  margin-top: var(--spacing-sm);
 `;
 const ResourcesTitle = styled_components_1.default.div `
   font-weight: var(--search-ai-resources-title-font-weight);
@@ -144,4 +254,18 @@ const ThinkingDot = styled_components_1.default.div `
     }
   }
 `;
+const SuccessMessageWrapper = styled_components_1.default.div `
+  max-width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  background: var(--color-success-bg);
+  border: 1px solid var(--color-success-border);
+  border-radius: var(--border-radius-lg);
+`;
+const SuccessMessageText = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  color: var(--color-success-darker);
+`;
 //# sourceMappingURL=SearchAiMessage.js.map

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

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+import type { FeedbackType } from '../../core/types';
+export type SearchAiNegativeFeedbackFormProps = {
+    messageId: string;
+    onClose: (messageId: string, feedback: FeedbackType | undefined) => void;
+    onSubmit: (reason: string) => void;
+};
+export declare function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, }: SearchAiNegativeFeedbackFormProps): JSX.Element;

package/lib/components/Search/SearchAiNegativeFeedbackForm.js

@@ -0,0 +1,169 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchAiNegativeFeedbackForm = SearchAiNegativeFeedbackForm;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
+const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
+const SendIcon_1 = require("../../icons/SendIcon/SendIcon");
+const hooks_1 = require("../../core/hooks");
+const NEGATIVE_FEEDBACK_DEFAULT_REASONS = [
+    "Didn't answer my question",
+    "Couldn't find what I was looking for",
+    'Wrong topic',
+    'Partially helpful, but missing details',
+];
+function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [showMoreInput, setShowMoreInput] = (0, react_1.useState)(false);
+    const [detailedFeedback, setDetailedFeedback] = (0, react_1.useState)('');
+    const textAreaRef = react_1.default.useRef(null);
+    const adjustTextAreaHeight = () => {
+        const textArea = textAreaRef.current;
+        if (textArea) {
+            textArea.style.height = 'auto';
+            textArea.style.height = `${textArea.scrollHeight}px`;
+        }
+    };
+    const handleTextChange = (e) => {
+        setDetailedFeedback(e.target.value);
+        adjustTextAreaHeight();
+    };
+    (0, react_1.useEffect)(() => {
+        if (showMoreInput) {
+            adjustTextAreaHeight();
+        }
+    }, [showMoreInput]);
+    return (react_1.default.createElement(FeedbackFormWrapper, { "data-component-name": "Search/SearchAiNegativeFeedbackForm" },
+        react_1.default.createElement(FeedbackHeader, null,
+            showMoreInput ? (react_1.default.createElement(BackButton, { variant: "text", size: "small", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), onClick: () => setShowMoreInput(false), "aria-label": "Back to feedback reasons" })) : null,
+            react_1.default.createElement(FeedbackTitle, { "data-translation-key": "search.ai.feedback.title" }, translate('search.ai.feedback.title', "What didn't you like about this response?")),
+            react_1.default.createElement(CloseButton, { variant: "text", size: "small", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: () => onClose(messageId, undefined), "aria-label": "Close feedback form" })),
+        !showMoreInput ? (react_1.default.createElement(FeedbackReasonsWrapper, null,
+            NEGATIVE_FEEDBACK_DEFAULT_REASONS.map((reason) => (react_1.default.createElement(Button_1.Button, { key: reason, variant: "outlined", size: "small", onClick: () => onSubmit(reason) }, reason))),
+            react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "small", onClick: () => setShowMoreInput(true) }, "More..."))) : (react_1.default.createElement(FeedbackInputWrapper, null,
+            react_1.default.createElement(FeedbackTextArea, { ref: textAreaRef, placeholder: translate('search.ai.feedback.detailsPlaceholder', 'Add specific details'), value: detailedFeedback, onChange: handleTextChange, rows: 1, autoFocus: true }),
+            react_1.default.createElement(SendButton, { size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: !detailedFeedback.trim()
+                        ? '--button-content-color-disabled'
+                        : 'var(--search-ai-conversation-input-send-button-icon-color)' }), onClick: () => onSubmit(detailedFeedback), disabled: !detailedFeedback.trim(), "aria-label": "Send feedback" })))));
+}
+const FeedbackFormWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-xs);
+  background: var(--search-ai-feedback-form-bg-color);
+  border: 1px solid var(--search-ai-feedback-form-border-color);
+  border-radius: var(--border-radius-lg);
+`;
+const FeedbackHeader = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-sm);
+`;
+const FeedbackTitle = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  color: var(--text-color);
+  flex: 1;
+`;
+const BackButton = (0, styled_components_1.default)(Button_1.Button) `
+  flex-shrink: 0;
+`;
+const CloseButton = (0, styled_components_1.default)(Button_1.Button) `
+  flex-shrink: 0;
+`;
+const FeedbackReasonsWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+`;
+const FeedbackInputWrapper = styled_components_1.default.div `
+  position: relative;
+  width: 100%;
+`;
+const FeedbackTextArea = styled_components_1.default.textarea `
+  width: 100%;
+  min-height: 5rem;
+  max-height: 12.5rem;
+  padding: var(--spacing-xs);
+  padding-right: 3rem;
+  border: 1px solid var(--border-color-primary);
+  border-radius: var(--border-radius-md);
+  font-family: inherit;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-base);
+  background: var(--background-color);
+  color: var(--text-color);
+  resize: none;
+  overflow-y: auto;
+
+  &:focus {
+    outline: 1px solid var(--button-border-color-focused);
+    border-color: var(--button-border-color-focused);
+  }
+
+  &::placeholder {
+    color: var(--text-color-helper);
+  }
+`;
+const SendButton = (0, styled_components_1.default)(Button_1.Button) `
+  position: absolute;
+  right: var(--search-ai-conversation-input-send-button-right);
+  bottom: var(--spacing-sm);
+  transition: background-color 0.2s ease;
+  background-color: var(--search-ai-conversation-input-send-button-bg-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--search-ai-conversation-input-send-button-border-radius);
+  padding: var(--search-ai-conversation-input-send-button-padding);
+
+  &:hover {
+    background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
+  }
+
+  &:disabled {
+    background-color: var(--search-ai-conversation-input-send-button-bg-color-disabled);
+    border: var(--search-ai-conversation-input-send-button-border-disabled);
+  }
+`;
+//# sourceMappingURL=SearchAiNegativeFeedbackForm.js.map

package/lib/components/Search/SearchDialog.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -56,14 +66,25 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     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);
+    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 { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
-    const aiSearch = useAiSearch({ filter });
+    const aiSearch = useAiSearch({ filter }, searchSessionId);
     const searchInputRef = (0, react_1.useRef)(null);
     const modalRef = (0, react_1.useRef)(null);
+    const [isMobile, setIsMobile] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const mediaQuery = window.matchMedia(`(max-width: ${utils_1.breakpoints.small})`);
+        setIsMobile(mediaQuery.matches);
+        const handleChange = (e) => {
+            setIsMobile(e.matches);
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+    }, []);
     const aiQueryRef = (0, react_1.useRef)(null);
     const firstSearchResultRef = (0, react_1.useRef)(null);
     const searchKeysWithResults = items ? Object.keys(items).filter((key) => { var _a; return (_a = items[key]) === null || _a === void 0 ? void 0 : _a.length; }) : [];
@@ -116,10 +137,11 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                     totalResults: results.length.toString(),
                     index: index.toString(),
                     searchEngine: mode,
+                    searchSessionId,
                 });
                 onClose();
             } }));
-    }, [onClose, product, products, addSearchHistoryItem, query, telemetry, mode]);
+    }, [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId]);
     const showLoadMore = (0, react_1.useCallback)((groupKey, currentCount = 0) => {
         const groupFacet = facets.find((facet) => facet.field === groupField);
         let needLoadMore = false;
@@ -164,14 +186,21 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);
                                 }
+                                telemetry.sendSearchAiOpenedMessage({
+                                    method: 'ai_search_button',
+                                });
                             } }, 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();
                             focusSearchInput();
-                        }, tabIndex: 0, 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(), tabIndex: 0, icon: react_1.default.createElement(EditIcon_1.EditIcon, null) }, translate('search.ai.newConversation', 'New conversation'))))),
+                        }, tabIndex: 0, icon: react_1.default.createElement(ChevronLeftIcon_1.ChevronLeftIcon, null) }, isMobile
+                        ? 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')),
+                        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,
                     react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))),
@@ -182,12 +211,18 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                             if (query.trim()) {
                                 aiSearch.askQuestion(query);
                             }
+                            telemetry.sendSearchAiOpenedMessage({
+                                method: 'ai_search_input',
+                            });
                         }, onKeyDown: (e) => {
                             if (e.key === 'Enter') {
                                 setMode('ai-dialog');
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);
                                 }
+                                telemetry.sendSearchAiOpenedMessage({
+                                    method: 'ai_search_input',
+                                });
                             }
                         }, ref: aiQueryRef, tabIndex: 0, role: "option", "aria-selected": "true" },
                         react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { style: { flexShrink: 0 }, 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)" }),
@@ -224,6 +259,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                 telemetry.sendSearchRecentClickedMessage({
                                     query,
                                     index: index.toString(),
+                                    searchSessionId,
                                 });
                                 setQuery(query);
                                 focusSearchInput();
@@ -299,6 +335,10 @@ const AiDialogHeaderWrapper = styled_components_1.default.div `
   align-items: center;
   width: 100%;
 `;
+const AiDialogHeaderActionsWrapper = styled_components_1.default.div `
+  display: flex;
+  gap: var(--spacing-xxs);
+`;
 const SearchDialogBody = styled_components_1.default.div `
   display: flex;
   flex-direction: row-reverse;
@@ -400,6 +440,7 @@ const AiDisclaimer = styled_components_1.default.div `
   line-height: var(--search-ai-disclaimer-line-height);
   color: var(--search-ai-disclaimer-text-color);
   margin: 0 auto;
+  text-align: center;
 `;
 const SearchWithAI = styled_components_1.default.div `
   display: flex;

package/lib/components/Search/SearchFilter.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/lib/components/Search/SearchGroups.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,14 +49,14 @@ function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuic
         onFilterChange(fieldId, values, true);
     };
     return (React.createElement(SearchGroupsWrapper, null,
-        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset() }, "All"),
+        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset(), selectable: true }, "All"),
         React.createElement(Divider, null),
         groupFacets.flatMap((facet) => facet.values.map((facetCount, index) => {
             var _a;
             const { value, count, isCounterVisible } = facetCount;
             const currentValues = ((_a = searchFilter.find((item) => item.field === facet.field)) === null || _a === void 0 ? void 0 : _a.values) || [];
             const active = currentValues === null || currentValues === void 0 ? void 0 : currentValues.includes(value);
-            return (React.createElement(GroupTag, { key: `${facet.field}-${index}`, onClick: () => handleGroupTagClick(value, facet.field, active, currentValues), active: active, borderless: true },
+            return (React.createElement(GroupTag, { key: `${facet.field}-${index}`, onClick: () => handleGroupTagClick(value, facet.field, active, currentValues), active: active, borderless: true, selectable: true },
                 value,
                 " ",
                 isCounterVisible && React.createElement("span", null, count)));

package/lib/components/Search/SearchHighlight.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };