@redocly/theme 0.61.0 → 0.62.0-custom.0

package/lib/components/Search/SearchAiMessage.js

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

package/lib/components/Search/SearchDialog.js

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

package/lib/components/Select/variables.js

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

package/lib/components/SvgViewer/SvgViewer.d.ts

@@ -0,0 +1,15 @@
+import type { JSX, ReactNode } from 'react';
+export type SvgViewerLabels = {
+    zoomIn?: string;
+    zoomOut?: string;
+    fitToView?: string;
+    close?: string;
+    dialogLabel?: string;
+};
+export type SvgViewerProps = {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+    labels?: SvgViewerLabels;
+};
+export declare function SvgViewer({ isOpen, onClose, children, labels, }: SvgViewerProps): JSX.Element | null;