@redocly/theme 0.70.0-next.5 → 0.70.0-next.6

package/lib/components/Buttons/ConnectMCPButton.js

@@ -19,55 +19,50 @@ const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 const hooks_1 = require("../../core/hooks");
 const constants_1 = require("../../core/constants");
-const MENU_OPTIONS = [
-    {
-        key: 'cursor',
+const MENU_OPTIONS = {
+    cursor: {
         icon: CursorIcon_1.CursorIcon,
         titleTranslationKey: 'page.actions.connectMcp.cursor',
         titleDefault: 'Connect to Cursor',
         descriptionTranslationKey: 'page.actions.connectMcp.cursorDescription',
         descriptionDefault: 'Install MCP server on Cursor',
     },
-    {
-        key: 'vscode',
+    vscode: {
         icon: VSCodeIcon_1.VSCodeIcon,
         titleTranslationKey: 'page.actions.connectMcp.vscode',
         titleDefault: 'Connect to VS Code',
         descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
         descriptionDefault: 'Install MCP server on VS Code',
     },
-    {
-        key: 'claude-code',
+    'claude-code': {
         icon: ClaudeIcon_1.ClaudeIcon,
         titleTranslationKey: 'page.actions.connectMcp.claudeCode',
         titleDefault: 'Connect to Claude Code',
         descriptionTranslationKey: 'page.actions.connectMcp.claudeCodeDescription',
         descriptionDefault: 'Copy the Claude Code CLI command',
     },
-    {
-        key: 'codex',
+    codex: {
         icon: CodexIcon_1.CodexIcon,
         titleTranslationKey: 'page.actions.connectMcp.codex',
         titleDefault: 'Connect to Codex CLI',
         descriptionTranslationKey: 'page.actions.connectMcp.codexDescription',
         descriptionDefault: 'Copy the Codex CLI command',
     },
-    {
-        key: 'copy',
+    copy: {
         icon: CopyIcon_1.CopyIcon,
         titleTranslationKey: 'page.actions.connectMcp.copyConfig',
         titleDefault: 'Copy MCP Configuration',
         descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
         descriptionDefault: 'Copy MCP JSON Configuration',
     },
-];
+};
 // Copy actions keep the dropdown open so the copied checkmark is visible.
 const COPY_OPTIONS = ['claude-code', 'codex', 'copy'];
 function ConnectMCPButton({ placement = 'bottom', alignment = 'end', options = constants_1.DEFAULT_MCP_OPTIONS, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { copiedOption, visibleOptions, handleAction } = (0, hooks_1.useConnectMCPButton)({ options });
-    const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
+    const menuOptions = visibleOptions.map((key) => (Object.assign({ key }, MENU_OPTIONS[key])));
     const primaryOption = menuOptions[0];
     const dropdownOptions = menuOptions.slice(1);
     if (!primaryOption)

package/lib/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.js

@@ -35,5 +35,5 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntityRelationsGraph = void 0;
 const utils_1 = require("../../../../core/utils");
-exports.CatalogEntityRelationsGraph = (0, utils_1.dynamic)(() => Promise.resolve().then(() => __importStar(require('./CatalogEntityRelationsGraph'))).then((mod) => mod.CatalogEntityRelationsGraph));
+exports.CatalogEntityRelationsGraph = (0, utils_1.dynamic)(() => Promise.resolve().then(() => __importStar(require('../../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph'))).then((mod) => mod.CatalogEntityRelationsGraph));
 //# sourceMappingURL=CatalogEntityRelationsGraph.lazy.js.map

package/lib/components/Catalog/CatalogFilter/CatalogFilterDateRange.js

@@ -46,6 +46,7 @@ const hooks_1 = require("../../../core/hooks");
 const utils_1 = require("../../../core/utils");
 const Accordion_1 = require("../../../components/Accordion/Accordion");
 function CatalogFilterDateRange({ filter, className, }) {
+    const [today] = (0, react_1.useState)(() => new Date());
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const from = (0, react_1.useMemo)(() => (filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined), [filter.selectedOptions.from]);
@@ -62,7 +63,7 @@ function CatalogFilterDateRange({ filter, className, }) {
                 react_1.default.createElement(DateRangeWrapper, null,
                     react_1.default.createElement(DateRangeRow, null,
                         react_1.default.createElement("span", null, translate('filter.dateRange.from', 'From:')),
-                        react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: new Date(), onChange: (from) => {
+                        react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: today, onChange: (from) => {
                                 if (Array.isArray(from))
                                     return;
                                 filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));

package/lib/components/Dropdown/Dropdown.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { RenderableChildren } from '../../core/types';
+import type { DropdownAlignment, RenderableChildren } from '../../core/types';
 type DropdownMenuContext = {
     close: () => void;
     isOpen: boolean;
@@ -9,13 +9,15 @@ export type DropdownProps = {
     children: RenderableChildren<DropdownMenuContext>;
     triggerEvent?: 'click' | 'hover';
     placement?: 'top' | 'bottom';
-    alignment?: 'start' | 'end';
+    alignment?: DropdownAlignment;
     active?: boolean;
     closeOnClick?: boolean;
     dataAttributes?: Record<string, string>;
     className?: string;
     withArrow?: boolean;
     portalled?: boolean;
+    /** Element the menu lines up with when it is not the dropdown itself, e.g. a whole split button. */
+    alignmentAnchorRef?: React.RefObject<HTMLElement | null>;
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
     onOpen?: () => void;

package/lib/components/Dropdown/Dropdown.js

@@ -38,15 +38,17 @@ const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
+const utils_1 = require("../../core/utils");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;
-exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, portalled = false, onClick, onClose, onOpen, }, ref) => {
+exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, portalled = false, alignmentAnchorRef, onClick, onClose, onOpen, }, ref) => {
     var _a, _b;
     const dropdownRef = (0, react_1.useRef)(null);
     const menuRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(false, active);
     const [menuStyle, setMenuStyle] = (0, react_1.useState)({});
+    const [fittedAlignment, setFittedAlignment] = (0, react_1.useState)(alignment);
     const wrapperRef = ref || dropdownRef;
     const handleOpen = () => {
         setIsOpen(true);
@@ -78,13 +80,13 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
         }
     };
     const updateMenuPosition = (0, react_1.useCallback)(() => {
-        var _a;
-        var _b;
+        var _a, _b;
+        var _c, _d, _e;
         const wrapper = wrapperRef.current;
         if (!wrapper)
             return;
-        const rect = wrapper.getBoundingClientRect();
-        const menuHeight = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0;
+        const rect = ((_c = alignmentAnchorRef === null || alignmentAnchorRef === void 0 ? void 0 : alignmentAnchorRef.current) !== null && _c !== void 0 ? _c : wrapper).getBoundingClientRect();
+        const menuHeight = (_d = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _d !== void 0 ? _d : 0;
         const fitsBelow = rect.bottom + menuHeight <= window.innerHeight;
         const fitsAbove = rect.top - menuHeight >= 0;
         const openUpward = placement === 'top' ? fitsAbove || !fitsBelow : !fitsBelow && fitsAbove;
@@ -95,7 +97,7 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
         else {
             style.top = rect.bottom;
         }
-        if (alignment === 'end') {
+        if ((0, utils_1.fitDropdownAlignment)(rect, (_e = (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth) !== null && _e !== void 0 ? _e : 0, alignment) === 'end') {
             style.right = window.innerWidth - rect.right;
         }
         else {
@@ -106,7 +108,25 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
             style.zIndex = zIndex;
         }
         setMenuStyle(style);
-    }, [placement, alignment, wrapperRef]);
+    }, [placement, alignment, wrapperRef, alignmentAnchorRef]);
+    /* The absolute-positioned menu is placed by CSS, so the side is measured once it is
+       shown and again on resize; a side that runs off the viewport flips to the other one. */
+    const updateFittedAlignment = (0, react_1.useCallback)(() => {
+        var _a;
+        const wrapper = wrapperRef.current;
+        const menu = menuRef.current;
+        if (!wrapper || !menu)
+            return;
+        const rect = ((_a = alignmentAnchorRef === null || alignmentAnchorRef === void 0 ? void 0 : alignmentAnchorRef.current) !== null && _a !== void 0 ? _a : wrapper).getBoundingClientRect();
+        setFittedAlignment((0, utils_1.fitDropdownAlignment)(rect, menu.offsetWidth, alignment));
+    }, [alignment, wrapperRef, alignmentAnchorRef]);
+    useIsomorphicLayoutEffect(() => {
+        if (portalled || !isOpen)
+            return;
+        updateFittedAlignment();
+        window.addEventListener('resize', updateFittedAlignment);
+        return () => window.removeEventListener('resize', updateFittedAlignment);
+    }, [portalled, isOpen, updateFittedAlignment]);
     useIsomorphicLayoutEffect(() => {
         if (!portalled || !isOpen)
             return;
@@ -123,7 +143,7 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
     const triggerChild = react_1.default.Children.only(trigger);
     const isLinkTrigger = Boolean(((_a = triggerChild.props) === null || _a === void 0 ? void 0 : _a.to) || ((_b = triggerChild.props) === null || _b === void 0 ? void 0 : _b.href));
     const dropdownTrigger = (0, react_1.cloneElement)(triggerChild, Object.assign(Object.assign(Object.assign({ onClick: triggerEvent === 'click' ? handleToggle : undefined, 'aria-haspopup': 'menu', 'aria-expanded': isOpen, icon: withArrow ? isOpen ? react_1.default.createElement(ChevronUpIcon_1.ChevronUpIcon, null) : react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, null) : undefined }, (withArrow ? { iconPosition: 'right' } : {})), triggerChild.props), { onKeyDown: triggerEvent === 'click' || !isLinkTrigger ? handleKeyDown : undefined }));
-    const menu = (react_1.default.createElement(ChildrenWrapper, { ref: menuRef, $placement: placement, $alignment: alignment, $isOpen: isOpen, $portalled: portalled, style: portalled ? menuStyle : undefined, onClick: closeOnClick ? handleChildClick : undefined }, menuContent));
+    const menu = (react_1.default.createElement(ChildrenWrapper, { ref: menuRef, $placement: placement, $alignment: fittedAlignment, $isOpen: isOpen, $portalled: portalled, style: portalled ? menuStyle : undefined, onClick: closeOnClick ? handleChildClick : undefined }, menuContent));
     const portalledMenu = isOpen && typeof document !== 'undefined' ? (0, react_dom_1.createPortal)(menu, document.body) : null;
     return (react_1.default.createElement(DropdownWrapper, Object.assign({ "data-component-name": "Dropdown/Dropdown", "data-testid": "dropdown" }, dataAttributes, { className: className, ref: wrapperRef, onPointerEnter: triggerEvent === 'hover' ? handleOpen : undefined, onPointerLeave: triggerEvent === 'hover' ? handleClose : undefined, onClick: onClick }),
         dropdownTrigger,

package/lib/components/Filter/FilterDateRange.js

@@ -1,10 +1,43 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterDateRange = FilterDateRange;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const FilterOptions_1 = require("../../components/Filter/FilterOptions");
 const FilterTitle_1 = require("../../components/Filter/FilterTitle");
@@ -12,6 +45,7 @@ const DatePicker_1 = require("../../components/DatePicker/DatePicker");
 const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 function FilterDateRange({ filter }) {
+    const [today] = (0, react_1.useState)(() => new Date());
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const from = filter.selectedOptions.from ? new Date(filter.selectedOptions.from) : undefined;
@@ -22,7 +56,7 @@ function FilterDateRange({ filter }) {
             react_1.default.createElement(DateRangeWrapper, null,
                 react_1.default.createElement(DateRangeRow, null,
                     react_1.default.createElement("span", null, translate('filter.dateRange.from', 'From:')),
-                    react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: new Date(), onChange: (from) => {
+                    react_1.default.createElement(DatePicker_1.DatePicker, { closeCalendar: true, format: "y-MM-dd", dayPlaceholder: "DD", monthPlaceholder: "MM", yearPlaceholder: "YYYY", value: from, maxDate: today, onChange: (from) => {
                             if (Array.isArray(from))
                                 return;
                             filter.selectOption(Object.assign(Object.assign({}, filter.selectedOptions), { from: (0, utils_1.formatDateWithoutTimeZone)(from), to: (0, utils_1.formatDateWithoutTimeZone)(to) }));

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

@@ -0,0 +1,10 @@
+import { type JSX } from 'react';
+import type { ToolCall } from '../../core/types';
+export type SearchAiActivityProps = {
+    /** One run of consecutive tool calls; an empty list means the assistant has not called a tool yet. */
+    toolCalls: ToolCall[];
+    /** The assistant works on this group now; once it moves on, a call without a result counts as finished. */
+    isActive: boolean;
+    className?: string;
+};
+export declare function SearchAiActivity({ toolCalls, isActive, className, }: SearchAiActivityProps): JSX.Element;

package/lib/components/Search/SearchAiActivity.js

@@ -0,0 +1,278 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchAiActivity = SearchAiActivity;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const hooks_1 = require("../../core/hooks");
+const styles_1 = require("../../core/styles");
+const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
+const ChatIcon_1 = require("../../icons/ChatIcon/ChatIcon");
+const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
+const CodeIcon_1 = require("../../icons/CodeIcon/CodeIcon");
+const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
+const ACTIVITY_KIND_ICONS = {
+    thinking: AiStarsIcon_1.AiStarsIcon,
+    search: SearchIcon_1.SearchIcon,
+    support: ChatIcon_1.ChatIcon,
+    code: CodeIcon_1.CodeIcon,
+};
+function SearchAiActivity({ toolCalls, isActive, className, }) {
+    var _a;
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const listId = (0, react_1.useId)();
+    const { status, steps } = (0, hooks_1.useSearchAiActivity)({ toolCalls, isActive });
+    const StatusIcon = ACTIVITY_KIND_ICONS[status.kind];
+    const header = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(IconWrapper, { "aria-hidden": true },
+            react_1.default.createElement(StatusIcon, { size: "var(--search-ai-activity-icon-size)" })),
+        react_1.default.createElement(StatusLabel, { key: `${status.label}${(_a = status.detail) !== null && _a !== void 0 ? _a : ''}`, title: status.detail ? `${status.label} “${status.detail}”` : status.label, $isRunning: status.isRunning },
+            status.label,
+            status.detail && react_1.default.createElement(StatusDetail, null,
+                " \u201C",
+                status.detail,
+                "\u201D")),
+        steps.length > 1 && (react_1.default.createElement(react_1.default.Fragment, null,
+            ' ',
+            react_1.default.createElement(ToolCallCount, null, steps.length))),
+        steps.length > 0 && (react_1.default.createElement(ExpandIcon, { size: "var(--search-ai-activity-icon-size)", $isExpanded: isExpanded }))));
+    return (react_1.default.createElement(SearchAiActivityWrapper, { "data-component-name": "Search/SearchAiActivity", "data-testid": "tool-calls-info", className: className }, steps.length > 0 ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(HeaderButton, { type: "button", "aria-expanded": isExpanded, "aria-controls": listId, onClick: () => setIsExpanded((expanded) => !expanded) }, header),
+        react_1.default.createElement(StepsWrapper, { id: listId, $isExpanded: isExpanded },
+            react_1.default.createElement(StepList, null, steps.map((step) => {
+                const StepIcon = ACTIVITY_KIND_ICONS[step.kind];
+                return (react_1.default.createElement(StepItem, { key: step.id },
+                    react_1.default.createElement(StepIconWrapper, { "aria-hidden": true },
+                        react_1.default.createElement(StepIcon, { size: "var(--search-ai-activity-icon-size)" })),
+                    react_1.default.createElement(StepText, { $isRunning: step.isRunning && isExpanded }, step.label)));
+            }))))) : (react_1.default.createElement(HeaderWrapper, null, header))));
+}
+const labelIn = (0, styled_components_1.keyframes) `
+  from {
+    opacity: 0.35;
+  }
+`;
+const shimmerSweep = (0, styled_components_1.keyframes) `
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+`;
+const shimmer = (0, styled_components_1.css) `
+  @supports (background-clip: text) or (-webkit-background-clip: text) {
+    @media (prefers-reduced-motion: no-preference) {
+      background:
+        linear-gradient(
+            90deg,
+            transparent 0%,
+            transparent 40%,
+            var(--search-ai-activity-shimmer-color) 50%,
+            transparent 60%,
+            transparent 100%
+          )
+          100% 0 / 250% 100% no-repeat,
+        linear-gradient(currentColor, currentColor);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation:
+        ${labelIn} var(--search-ai-activity-fade-duration) ease-out,
+        ${shimmerSweep} var(--search-ai-activity-shimmer-duration) linear
+          infinite;
+    }
+  }
+`;
+const SearchAiActivityWrapper = styled_components_1.default.div `
+  font-size: var(--search-ai-activity-font-size);
+  line-height: var(--search-ai-activity-line-height);
+  color: var(--search-ai-activity-text-color);
+`;
+const headerStyles = (0, styled_components_1.css) `
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  max-width: 100%;
+  min-height: var(--search-ai-activity-line-height);
+  white-space: nowrap;
+`;
+const HeaderWrapper = styled_components_1.default.div `
+  ${headerStyles}
+`;
+const HeaderButton = styled_components_1.default.button `
+  ${headerStyles}
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--border-radius);
+  background: none;
+  font: inherit;
+  color: inherit;
+  text-align: start;
+  cursor: pointer;
+  transition: color var(--search-ai-activity-fade-duration) ease-out;
+
+  &:hover {
+    color: var(--search-ai-activity-text-color-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--button-border-color-focused);
+    outline-offset: 2px;
+  }
+`;
+const IconWrapper = styled_components_1.default.span `
+  display: inline-flex;
+  flex-shrink: 0;
+  width: var(--search-ai-activity-icon-size);
+  height: var(--search-ai-activity-icon-size);
+`;
+const StatusLabel = styled_components_1.default.span `
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: var(--font-weight-regular);
+  animation: ${labelIn} var(--search-ai-activity-fade-duration) ease-out;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+
+  ${({ $isRunning }) => $isRunning && shimmer}
+`;
+const StatusDetail = styled_components_1.default.span `
+  color: var(--search-ai-activity-detail-color);
+`;
+const ToolCallCount = styled_components_1.default.span `
+  flex-shrink: 0;
+  min-width: calc(var(--search-ai-activity-line-height) - 4px);
+  padding: 0 var(--spacing-xxs);
+  border-radius: calc(var(--search-ai-activity-line-height) / 2);
+  background: var(--search-ai-activity-count-bg-color);
+  font-size: var(--search-ai-activity-count-font-size);
+  line-height: calc(var(--search-ai-activity-line-height) - 4px);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+`;
+const ExpandIcon = (0, styled_components_1.default)(ChevronDownIcon_1.ChevronDownIcon) `
+  flex-shrink: 0;
+  margin-inline-start: calc(var(--spacing-xxs) * -1);
+  transform: rotate(${({ $isExpanded }) => ($isExpanded ? '180deg' : '0deg')});
+  transition: transform var(--search-ai-activity-expand-duration)
+    var(--search-ai-activity-easing);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+const StepsWrapper = styled_components_1.default.div `
+  display: grid;
+  grid-template-rows: ${({ $isExpanded }) => ($isExpanded ? '1fr' : '0fr')};
+  opacity: ${({ $isExpanded }) => ($isExpanded ? 1 : 0)};
+  visibility: ${({ $isExpanded }) => ($isExpanded ? 'visible' : 'hidden')};
+  ${({ $isExpanded }) => !$isExpanded &&
+    (0, styled_components_1.css) `
+      contain: inline-size;
+    `}
+  transition:
+    grid-template-rows var(--search-ai-activity-expand-duration) var(--search-ai-activity-easing),
+    opacity var(--search-ai-activity-expand-duration) ease-out,
+    visibility var(--search-ai-activity-expand-duration);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+`;
+const STEP_GAP = 'var(--spacing-xs)';
+const ICON_OFFSET = 'calc((var(--search-ai-activity-line-height) - var(--search-ai-activity-icon-size)) / 2)';
+const RAIL_GAP = '3px';
+const RAIL_INSET = 'calc(var(--search-ai-activity-icon-size) / 2 - 0.5px)';
+const StepList = styled_components_1.default.ol `
+  min-height: 0;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  /* Padding would stay visible while the list is collapsed; the spacer collapses with it. */
+  &::before {
+    content: "";
+    display: block;
+    height: ${STEP_GAP};
+  }
+`;
+const StepItem = styled_components_1.default.li `
+  position: relative;
+  display: flex;
+  gap: var(--spacing-xs);
+  padding-bottom: ${STEP_GAP};
+  ${styles_1.searchAiAppearAnimation}
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+
+  &:first-child::before,
+  &:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    inset-inline-start: ${RAIL_INSET};
+    width: 1px;
+    background: var(--search-ai-activity-rail-color);
+  }
+
+  &:first-child::before {
+    top: calc(${STEP_GAP} * -1 - ${ICON_OFFSET} + ${RAIL_GAP});
+    height: calc(${STEP_GAP} + ${ICON_OFFSET} * 2 - ${RAIL_GAP} * 2);
+  }
+
+  &:not(:last-child)::after {
+    top: calc(
+      ${ICON_OFFSET} + var(--search-ai-activity-icon-size) + ${RAIL_GAP}
+    );
+    bottom: calc(${RAIL_GAP} - ${ICON_OFFSET});
+  }
+`;
+const StepIconWrapper = (0, styled_components_1.default)(IconWrapper) `
+  margin-top: ${ICON_OFFSET};
+`;
+const StepText = styled_components_1.default.span `
+  min-width: 0;
+  overflow-wrap: anywhere;
+
+  ${({ $isRunning }) => $isRunning && shimmer}
+`;
+//# sourceMappingURL=SearchAiActivity.js.map

package/lib/components/Search/SearchAiDialog.js

@@ -99,6 +99,10 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
         }
         // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- merges the streamed assistant response into the lifted conversation state as chunks arrive
         setConversation((prev) => {
+            // A reset can land between this effect's render and its update.
+            if (prev.length === 0) {
+                return prev;
+            }
             const lastMessage = prev[prev.length - 1];
             const content = response || '';
             if (lastMessage && lastMessage.role === constants_1.AiSearchConversationRole.ASSISTANT) {
@@ -153,7 +157,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, toolCalls: item.toolCalls || (index === conversation.length - 1 ? toolCalls : undefined), contentSegments: item.contentSegments }))),
+                    index === conversation.length - 1, resources: item.resources, messageId: item.messageId, feedback: item.feedback, onFeedbackChange: handleFeedbackChange, 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

@@ -10,9 +10,10 @@ export type SearchAiMessageProps = {
     messageId?: string;
     feedback?: FeedbackType;
     onFeedbackChange: (messageId: string, feedback: FeedbackType | undefined) => void;
+    /** @deprecated Not used; the message reads its tool calls from `contentSegments`. */
     toolCalls?: ToolCall[];
     contentSegments?: ContentSegment[];
 };
-declare function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, toolCalls, contentSegments, }: SearchAiMessageProps): JSX.Element;
+declare function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, contentSegments, }: SearchAiMessageProps): JSX.Element;
 export declare const SearchAiMessage: React.MemoExoticComponent<typeof SearchAiMessageComponent>;
 export {};