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

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/UserMenu/LoginButton.js

@@ -12,7 +12,7 @@ function LoginButton({ href, className, variant = 'primary', size = 'medium', la
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
     const buttonLabel = label || translate(labelTranslationKey, 'Login');
-    return (react_1.default.createElement("div", { "data-component-name": componentName, className: className },
+    return (react_1.default.createElement("span", { "data-component-name": componentName, className: className },
         react_1.default.createElement(Button_1.Button, { "data-translation-key": label ? undefined : labelTranslationKey, to: href, onClick: () => telemetry.sendLoginButtonClickedMessage(), "data-testid": "login-btn", extraClass: className, variant: variant, size: size }, buttonLabel)));
 }
 //# sourceMappingURL=LoginButton.js.map

package/lib/core/constants/search.d.ts

@@ -1,4 +1,4 @@
-import type { AiSearchErrorConfig } from '../types/search';
+import { type AiSearchErrorConfig, ToolCallName } from '../types/search';
 export declare enum AiSearchError {
     Unauthorized = "ai_search_unauthorized",
     Forbidden = "ai_search_forbidden",
@@ -14,3 +14,7 @@ export type AiSearchConversationRole = (typeof AiSearchConversationRole)[keyof t
 export declare const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>;
 export declare const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 export declare const SEARCH_DEBOUNCE_TIME_MS = 300;
+export declare const TOOL_CALL_DISPLAY_TEXT: Record<ToolCallName, {
+    inProgressText: string;
+    completedText: string;
+}>;

package/lib/core/constants/search.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_MAX_MESSAGE_LENGTH = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
+exports.TOOL_CALL_DISPLAY_TEXT = exports.SEARCH_DEBOUNCE_TIME_MS = exports.AI_SEARCH_MAX_MESSAGE_LENGTH = exports.AI_SEARCH_ERROR_CONFIG = exports.AiSearchConversationRole = exports.AiSearchError = void 0;
+const search_1 = require("../types/search");
 var AiSearchError;
 (function (AiSearchError) {
     AiSearchError["Unauthorized"] = "ai_search_unauthorized";
@@ -38,4 +39,26 @@ exports.AI_SEARCH_ERROR_CONFIG = {
 };
 exports.AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 exports.SEARCH_DEBOUNCE_TIME_MS = 300;
+exports.TOOL_CALL_DISPLAY_TEXT = {
+    [search_1.ToolCallName.SearchDocumentation]: {
+        inProgressText: 'Searching documentation...',
+        completedText: 'Search completed',
+    },
+    [search_1.ToolCallName.ListApis]: {
+        inProgressText: 'Browsing APIs...',
+        completedText: 'Browsed APIs',
+    },
+    [search_1.ToolCallName.GetEndpoints]: {
+        inProgressText: 'Browsing endpoints for API...',
+        completedText: 'Browsed endpoints for API',
+    },
+    [search_1.ToolCallName.GetSecuritySchemes]: {
+        inProgressText: 'Browsing security schemes for API...',
+        completedText: 'Browsed security schemes for API',
+    },
+    [search_1.ToolCallName.GetFullApiDescription]: {
+        inProgressText: 'Reading API description...',
+        completedText: 'Read API description',
+    },
+};
 //# sourceMappingURL=search.js.map

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

@@ -8,7 +8,7 @@ import type { CatalogConfig, ProductUiConfig } from '../../config';
 import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
-import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem } from './search';
+import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ToolCallName, ContentSegment } from './search';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
@@ -96,6 +96,15 @@ export type ThemeHooks = {
         error: null | AiSearchError;
         conversation: AiSearchConversationItem[];
         setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
+        toolCalls: Array<{
+            name: ToolCallName;
+            args: unknown;
+            position: number;
+            result?: {
+                documentCount: number;
+            };
+        }>;
+        contentSegments: ContentSegment[];
     };
     useMarkdownText: (text: string) => React.ReactNode;
     useFacetQuery: (field: string) => {

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

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.assistant' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.forbidden.description' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.tags.more' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to' | 'mermaid.openFullscreen' | 'mermaid.zoomIn' | 'mermaid.zoomOut' | 'mermaid.reset' | 'mermaid.close' | 'mermaid.viewer';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.assistant' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.toolResult.found' | 'search.ai.toolResult.found.documents' | 'search.ai.toolCall.searching' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.forbidden.description' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.tags.more' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to' | 'mermaid.openFullscreen' | 'mermaid.zoomIn' | 'mermaid.zoomOut' | 'mermaid.reset' | 'mermaid.close' | 'mermaid.viewer';
 export type Locale = {
     code: string;
     name: string;

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

@@ -91,10 +91,34 @@ export type SearchAiMessageResource = {
     url: string;
     title: string;
 };
+export type ToolCall = {
+    name: ToolCallName;
+    args: unknown;
+    position: number;
+    result?: {
+        documentCount: number;
+    };
+};
+export type ContentSegment = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'tool';
+    toolCall: ToolCall;
+};
 export type AiSearchConversationItem = {
     role: AiSearchConversationRole;
     content: string;
     resources?: SearchAiMessageResource[];
     messageId?: string;
     feedback?: FeedbackType;
+    toolCalls?: ToolCall[];
+    contentSegments?: ContentSegment[];
 };
+export declare enum ToolCallName {
+    SearchDocumentation = "search_documentation",
+    ListApis = "list-apis",
+    GetEndpoints = "get-endpoints",
+    GetSecuritySchemes = "get-security-schemes",
+    GetFullApiDescription = "get-full-api-description"
+}

package/lib/core/types/search.js

@@ -1,9 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FeedbackType = void 0;
+exports.ToolCallName = exports.FeedbackType = void 0;
 var FeedbackType;
 (function (FeedbackType) {
     FeedbackType["Like"] = "like";
     FeedbackType["Dislike"] = "dislike";
 })(FeedbackType || (exports.FeedbackType = FeedbackType = {}));
+var ToolCallName;
+(function (ToolCallName) {
+    ToolCallName["SearchDocumentation"] = "search_documentation";
+    ToolCallName["ListApis"] = "list-apis";
+    ToolCallName["GetEndpoints"] = "get-endpoints";
+    ToolCallName["GetSecuritySchemes"] = "get-security-schemes";
+    ToolCallName["GetFullApiDescription"] = "get-full-api-description";
+})(ToolCallName || (exports.ToolCallName = ToolCallName = {}));
 //# sourceMappingURL=search.js.map

package/lib/core/utils/content-segments.d.ts

@@ -0,0 +1,2 @@
+import type { ToolCall, ContentSegment } from '../types/search';
+export declare function splitContentByToolCalls(content: string | undefined, toolCalls: ToolCall[] | undefined): ContentSegment[];

package/lib/core/utils/content-segments.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitContentByToolCalls = splitContentByToolCalls;
+function splitContentByToolCalls(content, toolCalls) {
+    if (!toolCalls || toolCalls.length === 0) {
+        return [{ type: 'text', text: content || '' }];
+    }
+    const segments = [];
+    let lastPos = 0;
+    for (const toolCall of toolCalls) {
+        if (content && toolCall.position > lastPos) {
+            segments.push({ type: 'text', text: content.substring(lastPos, toolCall.position) });
+        }
+        segments.push({ type: 'tool', toolCall });
+        lastPos = toolCall.position;
+    }
+    if (content && lastPos < content.length) {
+        segments.push({ type: 'text', text: content.substring(lastPos) });
+    }
+    return segments;
+}
+//# sourceMappingURL=content-segments.js.map

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

@@ -43,3 +43,4 @@ export * from './get-operation-color';
 export * from './frontmatter-translate';
 export * from './transform-revisions-to-version-history';
 export * from './build-revision-url';
+export * from './content-segments';

package/lib/core/utils/index.js

@@ -59,4 +59,5 @@ __exportStar(require("./get-operation-color"), exports);
 __exportStar(require("./frontmatter-translate"), exports);
 __exportStar(require("./transform-revisions-to-version-history"), exports);
 __exportStar(require("./build-revision-url"), exports);
+__exportStar(require("./content-segments"), exports);
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.62.0-next.7",
+  "version": "0.62.0-next.8",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -29,8 +29,8 @@
     "@markdoc/markdoc": "0.5.2",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "react-router-dom": "^6.30.3",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
@@ -81,7 +81,7 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.41.4"
+    "@redocly/config": "0.42.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Menu/variables.ts

@@ -130,12 +130,12 @@ export const mobileMenu = 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/src/components/Search/SearchAiDialog.tsx

@@ -6,6 +6,8 @@ import type {
   AiSearchConversationItem,
   SearchAiMessageResource,
   FeedbackType,
+  ToolCall,
+  ContentSegment,
 } from '@redocly/theme/core/types';
 
 import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
@@ -34,6 +36,8 @@ export type SearchAiDialogProps = {
     history?: AiSearchConversationItem[],
     messageId?: string,
   ) => void;
+  toolCalls?: ToolCall[];
+  contentSegments?: ContentSegment[];
 };
 
 export function SearchAiDialog({
@@ -46,6 +50,8 @@ export function SearchAiDialog({
   className,
   conversation,
   setConversation,
+  toolCalls = [],
+  contentSegments,
 }: SearchAiDialogProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { aiAssistant } = useThemeConfig();
@@ -111,13 +117,32 @@ export function SearchAiDialog({
             content,
             resources,
             messageId: lastMessage.messageId,
+            toolCalls,
+            contentSegments,
           },
         ];
       }
 
-      return [...prev, { role: AiSearchConversationRole.ASSISTANT, content, resources }];
+      return [
+        ...prev,
+        {
+          role: AiSearchConversationRole.ASSISTANT,
+          content,
+          resources,
+          toolCalls,
+          contentSegments,
+        },
+      ];
     });
-  }, [response, conversation.length, error, resources, setConversation]);
+  }, [
+    response,
+    conversation.length,
+    error,
+    resources,
+    toolCalls,
+    contentSegments,
+    setConversation,
+  ]);
 
   useEffect(() => {
     if (error) {
@@ -171,6 +196,10 @@ export function SearchAiDialog({
             messageId={item.messageId}
             feedback={item.feedback}
             onFeedbackChange={handleFeedbackChange}
+            toolCalls={
+              item.toolCalls || (index === conversation.length - 1 ? toolCalls : undefined)
+            }
+            contentSegments={item.contentSegments}
           />
         ))}
 

package/src/components/Search/SearchAiMessage.tsx

@@ -3,7 +3,13 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { FeedbackType, type SearchAiMessageResource } from '@redocly/theme/core/types';
+import {
+  FeedbackType,
+  type SearchAiMessageResource,
+  type ToolCall,
+  type ContentSegment,
+} from '@redocly/theme/core/types';
+import { TOOL_CALL_DISPLAY_TEXT } from '@redocly/theme/core/constants';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { AiSearchConversationRole } from '@redocly/theme/core/constants';
@@ -15,6 +21,12 @@ import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/
 import { SearchAiActionButtons } from '@redocly/theme/components/Search/SearchAiActionButtons';
 import { SearchAiNegativeFeedbackForm } from '@redocly/theme/components/Search/SearchAiNegativeFeedbackForm';
 
+function MarkdownSegment({ text }: { text: string }): JSX.Element {
+  const { useMarkdownText } = useThemeHooks();
+  const markdown = useMarkdownText(text);
+  return <ResponseText as="div" children={markdown} data-testid="response-text" />;
+}
+
 export type SearchAiMessageProps = {
   role: AiSearchConversationRole;
   content: string;
@@ -24,6 +36,8 @@ export type SearchAiMessageProps = {
   messageId?: string;
   feedback?: FeedbackType;
   onFeedbackChange: (messageId: string, feedback: FeedbackType | undefined) => void;
+  toolCalls?: ToolCall[];
+  contentSegments?: ContentSegment[];
 };
 
 function SearchAiMessageComponent({
@@ -35,9 +49,10 @@ function SearchAiMessageComponent({
   messageId,
   feedback,
   onFeedbackChange,
+  toolCalls = [],
+  contentSegments = [{ type: 'text' as const, text: content }],
 }: SearchAiMessageProps): JSX.Element {
-  const { useMarkdownText, useTranslate, useTelemetry } = useThemeHooks();
-  const markDownContent = useMarkdownText(content || '');
+  const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const telemetry = useTelemetry();
   const [feedbackSent, setFeedbackSent] = useState(false);
@@ -47,6 +62,8 @@ function SearchAiMessageComponent({
 
   const showSuccessMessage = feedbackSent && feedback;
 
+  const isLoading = isThinking && content.length === 0 && toolCalls.length === 0;
+
   const sendFeedbackTelemetry = (feedbackValue: FeedbackType, dislikeReason?: string) => {
     if (!messageId) return;
 
@@ -100,7 +117,36 @@ function SearchAiMessageComponent({
         {role === AiSearchConversationRole.ASSISTANT ? (
           <>
             <MessageWrapper role={role}>
-              <ResponseText as="div" children={markDownContent} data-testid="response-text" />
+              {contentSegments.map((segment, index) => {
+                if (segment.type === 'tool') {
+                  const toolCallCompleted = Boolean(segment.toolCall.result);
+
+                  const toolCallCompletedText =
+                    TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.completedText ??
+                    `${translate('search.ai.toolResult.found', 'Found')} ${segment.toolCall.result?.documentCount ?? 0} ${translate('search.ai.toolResult.found.documents', 'documents')}`;
+
+                  const toolCallInProgressText =
+                    TOOL_CALL_DISPLAY_TEXT[segment.toolCall.name]?.inProgressText ??
+                    translate('search.ai.toolCall.searching', 'Searching...');
+
+                  const toolCallDisplayText = toolCallCompleted
+                    ? toolCallCompletedText
+                    : toolCallInProgressText;
+
+                  return (
+                    <ToolCallsInfoWrapper key={`tool-${index}`} data-testid="tool-calls-info">
+                      <ToolCallInfoItem>
+                        <DocumentIcon size="14px" color="--search-ai-text-color" />
+                        <ToolCallText $isSearching={!toolCallCompleted}>
+                          {toolCallDisplayText}
+                        </ToolCallText>
+                      </ToolCallInfoItem>
+                    </ToolCallsInfoWrapper>
+                  );
+                }
+
+                return <MarkdownSegment key={`text-${index}`} text={segment.text} />;
+              })}
               {hasResources && (
                 <>
                   <ResourcesWrapper data-testid="resources-wrapper">
@@ -109,8 +155,8 @@ function SearchAiMessageComponent({
                       {translate('search.ai.resourcesFound.resources', 'resources')}
                     </ResourcesTitle>
                     <ResourceTagsWrapper>
-                      {resources?.map((resource, idx) => (
-                        <Link key={`${resource.url}-${idx}`} to={resource.url} target="_blank">
+                      {resources?.map((resource, index) => (
+                        <Link key={`${resource.url}-${index}`} to={resource.url} target="_blank">
                           <ResourceTag
                             borderless
                             icon={<DocumentIcon color="--search-ai-resource-tag-icon-color" />}
@@ -123,7 +169,7 @@ function SearchAiMessageComponent({
                   </ResourcesWrapper>
                 </>
               )}
-              {isThinking && content.length === 0 && (
+              {isLoading && (
                 <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
                   <ThinkingDot />
                   <ThinkingDot />
@@ -190,7 +236,9 @@ export const SearchAiMessage = memo(SearchAiMessageComponent, (prevProps, nextPr
     prevProps.messageId === nextProps.messageId &&
     prevProps.feedback === nextProps.feedback &&
     prevProps.onFeedbackChange === nextProps.onFeedbackChange &&
-    areResourcesEqual(prevProps.resources, nextProps.resources)
+    areResourcesEqual(prevProps.resources, nextProps.resources) &&
+    prevProps.toolCalls?.length === nextProps.toolCalls?.length &&
+    prevProps.contentSegments === nextProps.contentSegments
   );
 });
 
@@ -230,8 +278,9 @@ const ResponseText = styled(Markdown)`
 
 const MessageWrapper = styled.div<{ role: string }>`
   padding: ${({ role }) =>
-      role === AiSearchConversationRole.USER ? 'var(--spacing-sm)' : 'var(--spacing-xs)'}
-    var(--spacing-sm);
+    role === 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%;
@@ -346,3 +395,38 @@ const SuccessMessageText = styled.div`
   font-size: var(--font-size-base);
   color: var(--color-success-darker);
 `;
+
+const ToolCallsInfoWrapper = styled.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.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+`;
+
+const ToolCallText = styled.span<{ $isSearching?: boolean }>`
+  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;
+      }
+    }
+  `}
+`;

package/src/components/Search/SearchDialog.tsx

@@ -469,6 +469,8 @@ export function SearchDialog({
               conversation={aiSearch.conversation}
               setConversation={aiSearch.setConversation}
               onMessageSent={aiSearch.askQuestion}
+              toolCalls={aiSearch.toolCalls}
+              contentSegments={aiSearch.contentSegments}
             />
           )}
         </SearchDialogBody>

package/src/components/UserMenu/LoginButton.tsx

@@ -31,7 +31,7 @@ export function LoginButton({
   const buttonLabel = label || translate(labelTranslationKey, 'Login');
 
   return (
-    <div data-component-name={componentName} className={className}>
+    <span data-component-name={componentName} className={className}>
       <Button
         data-translation-key={label ? undefined : labelTranslationKey}
         to={href}
@@ -43,6 +43,6 @@ export function LoginButton({
       >
         {buttonLabel}
       </Button>
-    </div>
+    </span>
   );
 }

package/src/core/constants/search.ts

@@ -1,4 +1,4 @@
-import type { AiSearchErrorConfig } from '../types/search';
+import { type AiSearchErrorConfig, ToolCallName } from '../types/search';
 
 export enum AiSearchError {
   Unauthorized = 'ai_search_unauthorized',
@@ -45,3 +45,29 @@ export const AI_SEARCH_ERROR_CONFIG: Record<AiSearchError, AiSearchErrorConfig>
 export const AI_SEARCH_MAX_MESSAGE_LENGTH = 45000;
 
 export const SEARCH_DEBOUNCE_TIME_MS = 300;
+
+export const TOOL_CALL_DISPLAY_TEXT: Record<
+  ToolCallName,
+  { inProgressText: string; completedText: string }
+> = {
+  [ToolCallName.SearchDocumentation]: {
+    inProgressText: 'Searching documentation...',
+    completedText: 'Search completed',
+  },
+  [ToolCallName.ListApis]: {
+    inProgressText: 'Browsing APIs...',
+    completedText: 'Browsed APIs',
+  },
+  [ToolCallName.GetEndpoints]: {
+    inProgressText: 'Browsing endpoints for API...',
+    completedText: 'Browsed endpoints for API',
+  },
+  [ToolCallName.GetSecuritySchemes]: {
+    inProgressText: 'Browsing security schemes for API...',
+    completedText: 'Browsed security schemes for API',
+  },
+  [ToolCallName.GetFullApiDescription]: {
+    inProgressText: 'Reading API description...',
+    completedText: 'Read API description',
+  },
+};

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

@@ -55,7 +55,15 @@ export const useThemeHooks = vi.fn(() => ({
   })),
   useAiSearch: vi.fn(() => ({
     askQuestion: vi.fn(),
-    references: [],
+    isGeneratingResponse: false,
+    question: '',
+    response: undefined,
+    resources: [],
+    clearConversation: vi.fn(),
+    error: null,
+    conversation: [],
+    setConversation: vi.fn(),
+    toolCalls: [],
   })),
   useFacetQuery: vi.fn(() => ({
     searchFacet: null,

package/src/core/types/hooks.ts

@@ -28,6 +28,8 @@ import type {
   SearchFilterItem,
   SearchFacetQuery,
   AiSearchConversationItem,
+  ToolCallName,
+  ContentSegment,
 } from './search';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
@@ -127,6 +129,13 @@ export type ThemeHooks = {
     error: null | AiSearchError;
     conversation: AiSearchConversationItem[];
     setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
+    toolCalls: Array<{
+      name: ToolCallName;
+      args: unknown;
+      position: number;
+      result?: { documentCount: number };
+    }>;
+    contentSegments: ContentSegment[];
   };
   useMarkdownText: (text: string) => React.ReactNode;
   useFacetQuery: (field: string) => {

package/src/core/types/l10n.ts

@@ -99,6 +99,9 @@ export type TranslationKey =
   | 'search.ai.feedback.title'
   | 'search.ai.feedback.detailsPlaceholder'
   | 'search.ai.feedback.thanks'
+  | 'search.ai.toolResult.found'
+  | 'search.ai.toolResult.found.documents'
+  | 'search.ai.toolCall.searching'
   | 'search.ai.button'
   | 'search.ai.label'
   | 'search.ai.disclaimer'

package/src/core/types/search.ts

@@ -104,10 +104,29 @@ export type SearchAiMessageResource = {
   title: string;
 };
 
+export type ToolCall = {
+  name: ToolCallName;
+  args: unknown;
+  position: number;
+  result?: { documentCount: number };
+};
+
+export type ContentSegment = { type: 'text'; text: string } | { type: 'tool'; toolCall: ToolCall };
+
 export type AiSearchConversationItem = {
   role: AiSearchConversationRole;
   content: string;
   resources?: SearchAiMessageResource[];
   messageId?: string;
   feedback?: FeedbackType;
+  toolCalls?: ToolCall[];
+  contentSegments?: ContentSegment[];
 };
+
+export enum ToolCallName {
+  SearchDocumentation = 'search_documentation',
+  ListApis = 'list-apis',
+  GetEndpoints = 'get-endpoints',
+  GetSecuritySchemes = 'get-security-schemes',
+  GetFullApiDescription = 'get-full-api-description',
+}

package/src/core/utils/content-segments.ts

@@ -0,0 +1,27 @@
+import type { ToolCall, ContentSegment } from '../types/search';
+
+export function splitContentByToolCalls(
+  content: string | undefined,
+  toolCalls: ToolCall[] | undefined,
+): ContentSegment[] {
+  if (!toolCalls || toolCalls.length === 0) {
+    return [{ type: 'text', text: content || '' }];
+  }
+
+  const segments: ContentSegment[] = [];
+  let lastPos = 0;
+
+  for (const toolCall of toolCalls) {
+    if (content && toolCall.position > lastPos) {
+      segments.push({ type: 'text', text: content.substring(lastPos, toolCall.position) });
+    }
+    segments.push({ type: 'tool', toolCall });
+    lastPos = toolCall.position;
+  }
+
+  if (content && lastPos < content.length) {
+    segments.push({ type: 'text', text: content.substring(lastPos) });
+  }
+
+  return segments;
+}

package/src/core/utils/index.ts

@@ -43,3 +43,4 @@ export * from './get-operation-color';
 export * from './frontmatter-translate';
 export * from './transform-revisions-to-version-history';
 export * from './build-revision-url';
+export * from './content-segments';