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

package/lib/components/Breadcrumbs/Breadcrumb.js

@@ -51,7 +51,7 @@ function Breadcrumb({ label, link, isActive, onClick, icon }) {
         react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: icon }),
         displayLabel));
     const breadcrumbContent = link ? (react_1.default.createElement(BreadcrumbLink, { "data-component-name": "Breadcrumbs/BreadcrumbLink", to: link, onClick: onClick, "$isActive": isActive }, content)) : (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbWrapper", "$isActive": isActive, onClick: onClick, tabIndex: -1 }, content));
-    return isTruncated ? (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: label, placement: "bottom", width: "max-content" }, breadcrumbContent)) : (breadcrumbContent);
+    return isTruncated ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom" }, breadcrumbContent)) : (breadcrumbContent);
 }
 const baseBreadcrumbStyles = `
   display: flex;

package/lib/components/Breadcrumbs/BreadcrumbDropdown.js

@@ -55,7 +55,7 @@ function BreadcrumbDropdown({ children, label, items, onItemClick, className, })
         return null;
     }
     const isTruncated = label.length > constants_1.BREADCRUMB_MAX_LENGTH;
-    const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: label, placement: "bottom", width: "max-content" },
+    const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom" },
         react_1.default.createElement(TriggerContentWrapper, null, children))) : (children);
     const trigger = react_1.default.createElement(StyledDropdownTrigger, null, triggerContent);
     return (react_1.default.createElement(BreadcrumbDropdownWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbDropdown", className: className, "data-testid": "breadcrumb-dropdown" },

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -27,7 +27,7 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
     }
     const displayedItems = items.slice(0, itemsToShow);
     const remainingCount = items.length - itemsToShow;
-    return (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px" },
         react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" },
             displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { textTransform: "none", maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -8,7 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlockTabs_1 = require("../../components/CodeBlock/CodeBlockTabs");
 const CopyButton_1 = require("../../components/Buttons/CopyButton");
-const TooltipWrapper_1 = require("../../components/Tooltip/TooltipWrapper");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const hooks_1 = require("../../core/hooks");
 const DeselectIcon_1 = require("../../icons/DeselectIcon/DeselectIcon");
 const MaximizeIcon_1 = require("../../icons/MaximizeIcon/MaximizeIcon");
@@ -38,15 +38,15 @@ function CodeBlockControls({ children, className, title, controls, tabs, dropdow
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
             dropdown && react_1.default.createElement(CodeBlockDropdown_1.CodeBlockDropdown, Object.assign({}, dropdown)),
-            report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top" },
+            report && !report.hidden && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.report.tooltipText', 'Report a problem'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
-            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top" },
+            expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.expand.tooltipText', 'Expand all'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all')))) : null,
-            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top" },
+            collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.collapse.tooltipText', 'Collapse all'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all')))) : null,
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
-            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top" },
+            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: translate('codeSnippet.copy.tooltipText', 'Copy to clipboard'), placement: "top", arrowPosition: "right" },
                 react_1.default.createElement(StyledCopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
                         var _a;
                         // If there already is a click handler, events should be handled there, cause they pass additional data

package/lib/components/Menu/variables.js

@@ -131,12 +131,12 @@ exports.mobileMenu = (0, styled_components_1.css) `
     * @tokens Mobile Menu
     * */
   /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
-  --menu-mobile-height: calc(100vh - var(--navbar-height));
-  --menu-mobile-height: calc(100dvh - var(--navbar-height));
+  --menu-mobile-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height) - var(--banner-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;
-  --menu-mobile-top: var(--navbar-height);
+  --menu-mobile-top: calc(var(--navbar-height) + var(--banner-height));
   --menu-mobile-transition: 0.5s;
   --menu-mobile-bg: var(--bg-color); // @presenter Color
   --menu-mobile-margin: var(--menu-mobile-items-margin-top) var(--menu-mobile-margin-horizontal) 0 var(--menu-mobile-margin-horizontal);

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,9 +40,10 @@ 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");
@@ -50,16 +51,21 @@ const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 const CheckmarkOutlineIcon_1 = require("../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
 const SearchAiActionButtons_1 = require("../../components/Search/SearchAiActionButtons");
 const SearchAiNegativeFeedbackForm_1 = require("../../components/Search/SearchAiNegativeFeedbackForm");
-function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, }) {
+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;
@@ -90,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" },
@@ -102,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))),
@@ -129,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;
@@ -168,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)'};
 `;
@@ -273,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

@@ -287,7 +287,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                 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') }),

package/lib/components/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { JSX, PropsWithChildren, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export type TooltipProps = {
     tip: string | ReactNode;
     isOpen?: boolean;
@@ -9,7 +9,6 @@ export type TooltipProps = {
     width?: string;
     dataTestId?: string;
     disabled?: boolean;
-    arrowPosition?: 'top' | 'bottom' | 'left' | 'right' | 'center';
+    arrowPosition?: 'left' | 'right' | 'center';
 };
-export declare function TooltipComponent({ children, isOpen, tip, withArrow, placement, className, width, dataTestId, disabled, arrowPosition, }: PropsWithChildren<TooltipProps>): JSX.Element;
 export declare const Tooltip: React.NamedExoticComponent<React.PropsWithChildren<TooltipProps>>;