@redocly/theme 0.61.1 → 0.62.0-custom.0

package/lib/components/Menu/MenuItem.js

@@ -45,10 +45,10 @@ const HttpTag_1 = require("../../components/Tags/HttpTag");
 const constants_1 = require("../../core/constants");
 const utils_1 = require("../../core/utils");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
-const Badge_1 = require("../../components/Badge/Badge");
 const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
+const Tag_1 = require("../../components/Tag/Tag");
 function MenuItem(props) {
-    var _a;
+    var _a, _b;
     const { item, depth, className, onClick } = props;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -65,10 +65,13 @@ function MenuItem(props) {
     const hasChevron = isNested && !isDrilldown;
     const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
     const handleOnClick = () => {
-        telemetry.sendSidebarItemClickedMessage({
-            label: item.label,
-            type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
-        });
+        telemetry.sendSidebarItemClickedMessage([
+            {
+                object: 'sidebar_item',
+                label: item.label,
+                type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
+            },
+        ]);
         onClick === null || onClick === void 0 ? void 0 : onClick();
         if (isNested) {
             handleExpand();
@@ -89,9 +92,10 @@ function MenuItem(props) {
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(MenuItemLabelTextWrapper, null,
-            react_1.default.createElement(MenuItemLabel, null,
-                react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_a = item.badges) === null || _a === void 0 ? void 0 :
-                _a.map(({ name, color }) => (react_1.default.createElement(MenuItemBadge, { color: color, key: name }, name))),
+            react_1.default.createElement(MenuItemLabel, null, (_a = item.badges) === null || _a === void 0 ? void 0 :
+                _a.filter(({ position }) => position === 'before').map(({ name, color, icon }) => (react_1.default.createElement(SidebarTag, { color: isDirectColorValue(color) ? undefined : color, "$bgColor": isDirectColorValue(color) ? color : undefined, key: name, icon: icon && react_1.default.createElement(BadgeIcon, { icon: icon }) }, name))),
+                react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_b = item.badges) === null || _b === void 0 ? void 0 :
+                _b.filter(({ position }) => position !== 'before').map(({ name, color, icon }) => (react_1.default.createElement(SidebarTag, { color: isDirectColorValue(color) ? undefined : color, "$bgColor": isDirectColorValue(color) ? color : undefined, key: name, icon: icon && react_1.default.createElement(BadgeIcon, { icon: icon }) }, name))),
                 item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "var(--menu-item-external-icon-size)" }) : null),
             item.sublabel ? (react_1.default.createElement(MenuItemSubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null),
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
@@ -101,6 +105,12 @@ function MenuItem(props) {
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
         item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { depth: depth, linePosition: item.linePosition })) : null));
 }
+/* for backward compatibility */
+function isDirectColorValue(color) {
+    if (!color)
+        return false;
+    return color.startsWith('#') || color.startsWith('rgb') || color.startsWith('hsl');
+}
 function generateClassName({ type, item, className, }) {
     const classNames = [className, `menu-item-type-${type}`];
     if (type === constants_1.MenuItemType.Separator) {
@@ -279,15 +289,31 @@ const MenuItemLabel = styled_components_1.default.span `
     margin-right: var(--spacing-xxs);
   }
 `;
-const MenuItemBadge = (0, styled_components_1.default)(Badge_1.Badge) `
+const SidebarTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  ${({ $bgColor }) => $bgColor && `background-color: ${$bgColor};`} /* for backward compatibility */
   margin-left: 0;
-  background-color: ${({ color }) => color || 'var(--color-info-base)'};
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   padding: 0 var(--spacing-xxs);
-  max-width: 80px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  max-width: 90px;
+
+  --tag-padding: 0 var(--spacing-xxs);
+  --tag-content-padding: 0;
+  --tag-font-size: var(--font-size-sm);
+  --tag-line-height: var(--line-height-sm);
+  vertical-align: middle;
+
+  ${Tag_1.ContentWrapper} {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+  }
+`;
+const BadgeIcon = (0, styled_components_1.default)(GenericIcon_1.GenericIcon) `
+  --icon-width: var(--font-size-sm);
+  --icon-height: var(--font-size-sm);
+  margin-right: var(--spacing-xxs);
+  flex-shrink: 0;
 `;
 //# sourceMappingURL=MenuItem.js.map

package/lib/components/Navbar/NavbarItem.js

@@ -27,7 +27,7 @@ function NavbarItem({ navItem, className }) {
     const normalizedPath = (item.link ? (0, utils_1.removeTrailingSlash)(item.link) : item.link) || '';
     const pathWithPathPrefix = (0, utils_1.withPathPrefix)((0, utils_1.getPathnameForLocale)(normalizedPath, defaultLocale, currentLocale, locales));
     const isActive = (0, utils_1.removeTrailingSlash)(pathname) === (0, utils_1.removeTrailingSlash)(pathWithPathPrefix);
-    const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.sendNavbarMenuItemClickedMessage({ type: item.type }), external: item.external, target: item.target, to: item.link },
+    const itemContent = (react_1.default.createElement(NavbarMenuItem, { as: item.link ? Link_1.Link : undefined, active: isActive, className: className, onClick: () => telemetry.sendNavbarMenuItemClickedMessage([{ object: 'menu_item', type: item.type }]), external: item.external, target: item.target, to: item.link },
         react_1.default.createElement(NavbarIcon, { icon: item.icon, srcSet: item.srcSet }),
         react_1.default.createElement(NavbarLabel, { "data-translation-key": item.labelTranslationKey }, translate(item.labelTranslationKey, item.label)),
         item.external ? react_1.default.createElement(ExternalLinkIcon, { size: "10px" }) : null));

package/lib/components/OpenApiDocs/hooks/AdditionalOverviewInfo.d.ts

@@ -0,0 +1 @@
+export declare const AdditionalOverviewInfo: any;

package/lib/components/OpenApiDocs/hooks/AdditionalOverviewInfo.js

@@ -0,0 +1,12 @@
+"use strict";
+// interface AdditionalOverviewInfoProps {
+//   info: any;
+// }
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdditionalOverviewInfo = void 0;
+// export function AdditionalOverviewInfo(_props: AdditionalOverviewInfoProps) {
+//   return null;
+// }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+exports.AdditionalOverviewInfo = null;
+//# sourceMappingURL=AdditionalOverviewInfo.js.map

package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.d.ts

@@ -0,0 +1 @@
+export declare const AfterOpenApiDescription: any;

package/lib/components/OpenApiDocs/hooks/AfterOpenApiDescription.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AfterOpenApiDescription = void 0;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+exports.AfterOpenApiDescription = null;
+//# sourceMappingURL=AfterOpenApiDescription.js.map

package/lib/components/PageActions/PageActions.js

@@ -49,6 +49,7 @@ exports.PageActions = PageActions;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const PageActionsMenuItem_1 = require("../../components/PageActions/PageActionsMenuItem");
+const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Link_1 = require("../../components/Link/Link");
 const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
 const Button_1 = require("../../components/Button/Button");
@@ -77,16 +78,18 @@ function PageActions(props) {
             setActionState('idle');
         }, ACTION_DONE_DISPLAY_DURATION);
     });
-    const menuItems = actions.map((action) => ({
-        content: 'link' in action ? (react_1.default.createElement(LinkMenuItem, { to: action.link, external: true },
-            react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action }))) : (react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action })),
-        onAction: 'onClick' in action ? () => handleActionClick(action) : undefined,
-    }));
-    return (react_1.default.createElement(PageActionsWrapper, null,
+    const menuItems = actions.map((action, index) => {
+        const key = `${action.title}-${index}`;
+        const hasLink = 'link' in action;
+        const content = hasLink ? (react_1.default.createElement(LinkMenuItem, { key: `${key}-link`, to: action.link, tabIndex: -1, external: true },
+            react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action }))) : (react_1.default.createElement(PageActionsMenuItem_1.PageActionsMenuItem, { pageAction: action }));
+        return (react_1.default.createElement(StyledDropdownMenuItem, { key: key, onAction: () => handleActionClick(action) }, content));
+    });
+    return (react_1.default.createElement(PageActionsWrapper, { "data-component-name": "PageActions/PageActions" },
         react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: "outlined", size: "medium" },
             react_1.default.createElement(Button_1.Button, { icon: renderIcon(buttonAction, actionState), to: 'link' in buttonAction ? buttonAction.link : undefined, external: true, onClick: () => handleActionClick(buttonAction) }, buttonAction.buttonText),
-            actions.length > 1 ? (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
-                react_1.default.createElement(StyledDropdownMenu, { items: menuItems }))) : null)));
+            actions.length > 1 ? (react_1.default.createElement(StyledDropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, null), placement: "bottom", alignment: "end" },
+                react_1.default.createElement(StyledDropdownMenu, null, menuItems))) : null)));
 }
 function renderIcon(buttonAction, actionState) {
     switch (actionState) {
@@ -111,7 +114,21 @@ const LinkMenuItem = (0, styled_components_1.default)(Link_1.Link) `
   text-decoration: none;
   --link-decoration-hover: none;
 `;
+const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  z-index: calc(var(--z-index-raised) - 1);
+`;
 const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
   --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
 `;
+const StyledDropdownMenuItem = (0, styled_components_1.default)(DropdownMenuItem_1.DropdownMenuItem) `
+  &:has(a) {
+    padding: 0;
+    & > a {
+      display: inline-block;
+      width: 100%;
+      padding: var(--dropdown-menu-item-padding-vertical)
+        var(--dropdown-menu-item-padding-horizontal);
+    }
+  }
+`;
 //# sourceMappingURL=PageActions.js.map

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { JSX } from 'react';
-import type { AiSearchConversationItem, SearchAiMessageResource } from '../../core/types';
+import type { AiSearchConversationItem, SearchAiMessageResource, ToolCall, ContentSegment } from '../../core/types';
 import { AiSearchError } from '../../core/constants';
 export type SearchAiDialogProps = {
     response: string | undefined;
@@ -12,5 +12,7 @@ export type SearchAiDialogProps = {
     conversation: AiSearchConversationItem[];
     setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
     onMessageSent: (message: string, history?: AiSearchConversationItem[], messageId?: string) => void;
+    toolCalls?: ToolCall[];
+    contentSegments?: ContentSegment[];
 };
-export declare function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, }: SearchAiDialogProps): JSX.Element;
+export declare function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, toolCalls, contentSegments, }: SearchAiDialogProps): JSX.Element;

package/lib/components/Search/SearchAiDialog.js

@@ -46,7 +46,7 @@ const constants_1 = require("../../core/constants");
 const SearchAiMessage_1 = require("../../components/Search/SearchAiMessage");
 const Admonition_1 = require("../../components/Admonition/Admonition");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
-function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, }) {
+function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error, resources, onMessageSent, className, conversation, setConversation, toolCalls = [], contentSegments, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { aiAssistant } = (0, hooks_1.useThemeConfig)();
     const { translate } = useTranslate();
@@ -99,12 +99,31 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
                         content,
                         resources,
                         messageId: lastMessage.messageId,
+                        toolCalls,
+                        contentSegments,
                     },
                 ];
             }
-            return [...prev, { role: constants_1.AiSearchConversationRole.ASSISTANT, content, resources }];
+            return [
+                ...prev,
+                {
+                    role: constants_1.AiSearchConversationRole.ASSISTANT,
+                    content,
+                    resources,
+                    toolCalls,
+                    contentSegments,
+                },
+            ];
         });
-    }, [response, conversation.length, error, resources, setConversation]);
+    }, [
+        response,
+        conversation.length,
+        error,
+        resources,
+        toolCalls,
+        contentSegments,
+        setConversation,
+    ]);
     (0, react_1.useEffect)(() => {
         if (error) {
             setConversation((prev) => prev.slice(0, -1));
@@ -123,7 +142,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
         react_1.default.createElement(ConversationWrapper, null,
             conversation.map((item, index) => (react_1.default.createElement(SearchAiMessage_1.SearchAiMessage, { key: `search-ai-message-${index}`, role: item.role, content: item.content, isThinking: item.role === constants_1.AiSearchConversationRole.ASSISTANT &&
                     isGeneratingResponse &&
-                    index === conversation.length - 1, resources: item.resources, messageId: item.messageId, feedback: item.feedback, onFeedbackChange: handleFeedbackChange }))),
+                    index === conversation.length - 1, resources: item.resources, messageId: item.messageId, feedback: item.feedback, onFeedbackChange: handleFeedbackChange, toolCalls: item.toolCalls || (index === conversation.length - 1 ? toolCalls : undefined), contentSegments: item.contentSegments }))),
             error && (react_1.default.createElement(Admonition_1.Admonition, { type: "danger", name: translate(constants_1.AI_SEARCH_ERROR_CONFIG[error].headerKey, constants_1.AI_SEARCH_ERROR_CONFIG[error].headerDefault) }, translate(constants_1.AI_SEARCH_ERROR_CONFIG[error].messageKey, constants_1.AI_SEARCH_ERROR_CONFIG[error].messageDefault))),
             !conversation.length && !error && (react_1.default.createElement(SuggestionsWrapper, null, suggestions === null || suggestions === void 0 ? void 0 : suggestions.map((suggestion) => (react_1.default.createElement(Button_1.Button, { key: suggestion, variant: "outlined", onClick: () => handleOnMessageSent(suggestion) }, suggestion))))),
             react_1.default.createElement("div", { ref: conversationEndRef })),

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { JSX } from 'react';
-import { FeedbackType, type SearchAiMessageResource } from '../../core/types';
+import { FeedbackType, type SearchAiMessageResource, type ToolCall, type ContentSegment } from '../../core/types';
 import { AiSearchConversationRole } from '../../core/constants';
 export type SearchAiMessageProps = {
     role: AiSearchConversationRole;
@@ -11,7 +11,9 @@ export type SearchAiMessageProps = {
     messageId?: string;
     feedback?: FeedbackType;
     onFeedbackChange: (messageId: string, feedback: FeedbackType | undefined) => void;
+    toolCalls?: ToolCall[];
+    contentSegments?: ContentSegment[];
 };
-declare function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, }: SearchAiMessageProps): JSX.Element;
+declare function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, toolCalls, contentSegments, }: SearchAiMessageProps): JSX.Element;
 export declare const SearchAiMessage: React.MemoExoticComponent<typeof SearchAiMessageComponent>;
 export {};

package/lib/components/Search/SearchAiMessage.js

@@ -40,35 +40,44 @@ 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 constants_1 = require("../../core/constants");
 const Link_1 = require("../../components/Link/Link");
 const Tag_1 = require("../../components/Tag/Tag");
-const constants_1 = require("../../core/constants");
+const constants_2 = require("../../core/constants");
 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");
 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, }) {
+const SearchAiActionButtons_1 = require("../../components/Search/SearchAiActionButtons");
+const SearchAiNegativeFeedbackForm_1 = require("../../components/Search/SearchAiNegativeFeedbackForm");
+function MarkdownSegment({ text }) {
+    const { useMarkdownText } = (0, hooks_1.useThemeHooks)();
+    const markdown = useMarkdownText(text);
+    return react_1.default.createElement(ResponseText, { as: "div", children: markdown, "data-testid": "response-text" });
+}
+function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, toolCalls = [], contentSegments = [{ type: 'text', text: content }], }) {
     var _a;
-    const { useMarkdownText, useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const markDownContent = useMarkdownText(content || '');
+    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     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 isLoading = isThinking && content.length === 0 && toolCalls.length === 0;
     const sendFeedbackTelemetry = (feedbackValue, dislikeReason) => {
         if (!messageId)
             return;
         try {
-            telemetry.sendSearchAIFeedbackMessage({
-                feedback: feedbackValue,
-                messageId,
-                reason: dislikeReason,
-            });
+            telemetry.sendSearchAIFeedbackMessage([
+                {
+                    object: 'feedback',
+                    feedback: feedbackValue,
+                    messageId,
+                    reason: dislikeReason,
+                },
+            ]);
         }
         catch (error) {
             console.error('Error sending feedback', error);
@@ -87,10 +96,25 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
         }
     };
     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(MessageContentWrapper, null, role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
+        role === constants_2.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(MessageContentWrapper, null, role === constants_2.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(MessageWrapper, { role: role },
-                react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
+                contentSegments.map((segment, index) => {
+                    var _a, _b, _c, _d, _e, _f;
+                    if (segment.type === 'tool') {
+                        const toolCallCompleted = Boolean(segment.toolCall.result);
+                        const toolCallCompletedText = (_b = (_a = constants_1.TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]) === null || _a === void 0 ? void 0 : _a.completedText) !== null && _b !== void 0 ? _b : `${translate('search.ai.toolResult.found', 'Found')} ${(_d = (_c = segment.toolCall.result) === null || _c === void 0 ? void 0 : _c.documentCount) !== null && _d !== void 0 ? _d : 0} ${translate('search.ai.toolResult.found.documents', 'documents')}`;
+                        const toolCallInProgressText = (_f = (_e = constants_1.TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]) === null || _e === void 0 ? void 0 : _e.inProgressText) !== null && _f !== void 0 ? _f : translate('search.ai.toolCall.searching', 'Searching...');
+                        const toolCallDisplayText = toolCallCompleted
+                            ? toolCallCompletedText
+                            : toolCallInProgressText;
+                        return (react_1.default.createElement(ToolCallsInfoWrapper, { key: `tool-${index}`, "data-testid": "tool-calls-info" },
+                            react_1.default.createElement(ToolCallInfoItem, null,
+                                react_1.default.createElement(DocumentIcon_1.DocumentIcon, { size: "14px", color: "--search-ai-text-color" }),
+                                react_1.default.createElement(ToolCallText, { "$isSearching": !toolCallCompleted }, toolCallDisplayText))));
+                    }
+                    return react_1.default.createElement(MarkdownSegment, { key: `text-${index}`, text: segment.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" },
@@ -99,9 +123,9 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
                             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(ResourceTagsWrapper, null, resources === null || resources === void 0 ? void 0 : resources.map((resource, index) => (react_1.default.createElement(Link_1.Link, { key: `${resource.url}-${index}`, 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)))))))),
-                isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
+                isLoading && (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))),
@@ -126,20 +150,23 @@ function areResourcesEqual(prev, next) {
     });
 }
 exports.SearchAiMessage = (0, react_1.memo)(SearchAiMessageComponent, (prevProps, nextProps) => {
+    var _a, _b;
     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));
+        areResourcesEqual(prevProps.resources, nextProps.resources) &&
+        ((_a = prevProps.toolCalls) === null || _a === void 0 ? void 0 : _a.length) === ((_b = nextProps.toolCalls) === null || _b === void 0 ? void 0 : _b.length) &&
+        prevProps.contentSegments === nextProps.contentSegments);
 });
 const SearchAiMessageWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   width: 100%;
-  justify-content: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
+  justify-content: ${({ role }) => role === constants_2.AiSearchConversationRole.USER ? 'flex-end' : 'flex-start'};
 `;
 const MessageContentWrapper = styled_components_1.default.div `
   display: flex;
@@ -165,18 +192,19 @@ const ResponseText = (0, styled_components_1.default)(Markdown_1.Markdown) `
   }
 `;
 const MessageWrapper = styled_components_1.default.div `
-  padding: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'var(--spacing-sm)' : 'var(--spacing-xs)'}
-    var(--spacing-sm);
+  padding: ${({ role }) => role === constants_2.AiSearchConversationRole.USER
+    ? 'var(--spacing-sm)'
+    : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
   border-radius: var(--border-radius-lg);
   width: fit-content;
   max-width: 100%;
   word-wrap: break-word;
   white-space: pre-wrap;
-  background-color: ${({ role }) => role === constants_1.AiSearchConversationRole.USER
+  background-color: ${({ role }) => role === constants_2.AiSearchConversationRole.USER
     ? 'var(--search-ai-user-bg-color)'
     : 'var(--search-ai-assistant-bg-color)'};
-  border: ${({ role }) => role === constants_1.AiSearchConversationRole.USER ? 'none' : 'var(--search-ai-assistant-border)'};
-  color: ${({ role }) => role === constants_1.AiSearchConversationRole.USER
+  border: ${({ role }) => role === constants_2.AiSearchConversationRole.USER ? 'none' : 'var(--search-ai-assistant-border)'};
+  color: ${({ role }) => role === constants_2.AiSearchConversationRole.USER
     ? 'var(--search-ai-user-text-color)'
     : 'var(--search-ai-assistant-text-color)'};
 `;
@@ -270,4 +298,35 @@ const SuccessMessageText = styled_components_1.default.div `
   font-size: var(--font-size-base);
   color: var(--color-success-darker);
 `;
+const ToolCallsInfoWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xxs);
+  margin: 0 0 var(--spacing-sm) 0;
+  font-size: var(--font-size-xs);
+  color: var(--search-ai-text-color);
+  opacity: 0.6;
+`;
+const ToolCallInfoItem = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+`;
+const ToolCallText = styled_components_1.default.span `
+  font-weight: var(--font-weight-regular);
+
+  ${({ $isSearching }) => $isSearching &&
+    `
+    animation: pulse 1.5s ease-in-out infinite;
+    
+    @keyframes pulse {
+      0%, 100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.4;
+      }
+    }
+  `}
+`;
 //# sourceMappingURL=SearchAiMessage.js.map

package/lib/components/Search/SearchDialog.js

@@ -74,6 +74,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
     const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
     const { addSearchHistoryItem } = (0, hooks_1.useRecentSearches)();
     const aiSearch = useAiSearch({ filter });
+    (0, hooks_1.useModalScrollLock)(true);
     const searchInputRef = (0, react_1.useRef)(null);
     const modalRef = (0, react_1.useRef)(null);
     const [isMobile, setIsMobile] = (0, react_1.useState)(false);
@@ -134,14 +135,17 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
         }
         return (react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct, innerRef: innerRef, onClick: () => {
                 addSearchHistoryItem(query);
-                telemetry.sendSearchResultClickedMessage({
-                    query,
-                    url: item.document.url,
-                    totalResults: results.length.toString(),
-                    index: index.toString(),
-                    searchEngine: mode,
-                    searchSessionId,
-                });
+                telemetry.sendSearchResultClickedMessage([
+                    {
+                        object: 'search',
+                        query: query,
+                        url: item.document.url,
+                        totalResults: results.length.toString(),
+                        index: index.toString(),
+                        searchEngine: mode,
+                        searchSessionId,
+                    },
+                ]);
                 onClose();
             } }));
     }, [onClose, product, products, addSearchHistoryItem, query, telemetry, mode, searchSessionId]);
@@ -189,18 +193,23 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                 if (query.trim()) {
                                     aiSearch.askQuestion(query);
                                 }
-                                telemetry.sendSearchAiOpenedMessage({
-                                    method: 'ai_search_button',
-                                });
+                                telemetry.sendSearchAiOpenedMessage([
+                                    {
+                                        object: 'search',
+                                        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: () => {
+                    initialMode === 'ai-dialog' ? (react_1.default.createElement(AiDialogHeaderTitle, null,
+                        react_1.default.createElement(AiStarsGradientIcon_1.AiStarsGradientIcon, { color: "var(--search-ai-button-icon-color)", size: "1.25rem" }),
+                        translate('search.ai.assistant', 'Assistant'))) : (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) }, isMobile
                         ? translate('search.ai.back', 'Back')
-                        : translate('search.ai.backToSearch', 'Back to search')),
+                        : 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: () => {
                                 refreshSearchSessionId();
@@ -217,18 +226,24 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                             if (query.trim()) {
                                 aiSearch.askQuestion(query);
                             }
-                            telemetry.sendSearchAiOpenedMessage({
-                                method: 'ai_search_input',
-                            });
+                            telemetry.sendSearchAiOpenedMessage([
+                                {
+                                    object: 'search',
+                                    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',
-                                });
+                                telemetry.sendSearchAiOpenedMessage([
+                                    {
+                                        object: 'search',
+                                        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)" }),
@@ -262,15 +277,18 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                         translate('search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "search.noResults" },
                         react_1.default.createElement("b", null, translate('search.noResults.title', 'No results'))))) : (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: (query, index) => {
-                                telemetry.sendSearchRecentClickedMessage({
-                                    query,
-                                    index: index.toString(),
-                                    searchSessionId,
-                                });
+                                telemetry.sendSearchRecentClickedMessage([
+                                    {
+                                        object: 'search',
+                                        query,
+                                        index: index.toString(),
+                                        searchSessionId,
+                                    },
+                                ]);
                                 setQuery(query);
                                 focusSearchInput();
                             } }),
-                        react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion }))),
+                        react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion, toolCalls: aiSearch.toolCalls, contentSegments: aiSearch.contentSegments }))),
             react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
@@ -345,6 +363,13 @@ const AiDialogHeaderActionsWrapper = styled_components_1.default.div `
   display: flex;
   gap: var(--spacing-xxs);
 `;
+const AiDialogHeaderTitle = styled_components_1.default.span `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--font-size-lg);
+`;
 const SearchDialogBody = styled_components_1.default.div `
   display: flex;
   flex-direction: row-reverse;

package/lib/components/Select/variables.js

@@ -12,7 +12,7 @@ exports.select = (0, styled_components_1.css) `
   --select-text-color: var(--text-color-secondary); // @presenter Color
   --select-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
-  
+
   --select-input-padding-vertical: 6px; // @presenter Spacing
   --select-input-padding-horizontal: 6px; // @presenter Spacing
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
@@ -40,7 +40,7 @@ exports.select = (0, styled_components_1.css) `
   --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
-  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  
+  --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color
 
   --select-placeholder-color: var(--color-warm-grey-6); // @presenter Color
   // @tokens End