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

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 {};

package/lib/components/Search/SearchAiMessage.js

@@ -41,6 +41,7 @@ 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 utils_1 = require("../../core/utils");
 const Link_1 = require("../../components/Link/Link");
 const Tag_1 = require("../../components/Tag/Tag");
 const hooks_1 = require("../../core/hooks");
@@ -50,36 +51,14 @@ 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");
+const SearchAiActivity_1 = require("../../components/Search/SearchAiActivity");
+const styles_1 = require("../../core/styles");
 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" });
 }
-// The codemode `execute` tool passes a human-readable `description` of what its code
-// does; show that instead of a generic "Executing execute..." label.
-function getExecuteDescription(args) {
-    if (args && typeof args === 'object' && 'description' in args) {
-        const { description } = args;
-        if (typeof description === 'string' && description.trim().length > 0) {
-            return description.trim();
-        }
-    }
-    return undefined;
-}
-function getToolCallDisplayText(toolCall) {
-    var _a;
-    if (toolCall.name === types_1.ToolCallName.Execute) {
-        const description = getExecuteDescription(toolCall.args);
-        if (description) {
-            return { inProgressText: description, completedText: description };
-        }
-    }
-    return ((_a = constants_1.TOOL_CALL_DISPLAY_TEXT[toolCall.name]) !== null && _a !== void 0 ? _a : {
-        inProgressText: `Executing ${toolCall.name}...`,
-        completedText: `${toolCall.name} executed`,
-    });
-}
-function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, toolCalls = [], contentSegments = [{ type: 'text', text: content }], }) {
+function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, contentSegments = [{ type: 'text', text: content }], }) {
     var _a;
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -88,7 +67,8 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
     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 groupedSegments = (0, utils_1.groupToolCallSegments)(contentSegments, isThinking);
+    const isFullWidth = (0, utils_1.hasToolCallsAndText)(contentSegments);
     const sendFeedbackTelemetry = (feedbackValue, dislikeReason) => {
         if (!messageId)
             return;
@@ -122,17 +102,11 @@ 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,
-            react_1.default.createElement(MessageWrapper, { $role: role },
-                contentSegments.map((segment, index) => {
-                    if (segment.type === 'tool') {
-                        const toolCallCompleted = Boolean(segment.toolCall.result);
-                        const { inProgressText, completedText } = getToolCallDisplayText(segment.toolCall);
-                        const toolCallDisplayText = toolCallCompleted ? completedText : inProgressText;
-                        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))));
+        react_1.default.createElement(MessageContentWrapper, { $isFullWidth: isFullWidth }, role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(MessageWrapper, { $role: role, $isFullWidth: isFullWidth },
+                groupedSegments.map((segment, index) => {
+                    if (segment.type === 'tools') {
+                        return (react_1.default.createElement(ToolCallsActivity, { key: `tools-${index}`, toolCalls: segment.toolCalls, isActive: segment.isActive }));
                     }
                     return react_1.default.createElement(MarkdownSegment, { key: `text-${index}`, text: segment.text });
                 }),
@@ -146,11 +120,7 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
                             translate('search.ai.resourcesFound.resources', 'resources')),
                         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)))))))),
-                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))),
-                content.length > 0 && (react_1.default.createElement(FeedbackWrapper, null,
+                !isThinking && content.length > 0 && (react_1.default.createElement(FeedbackWrapper, null,
                     react_1.default.createElement(SearchAiActionButtons_1.SearchAiActionButtons, { content: content, feedback: feedback, onFeedback: handleFeedbackClick, disabled: !!feedback })))),
             messageId && feedback === types_1.FeedbackType.Dislike && !showSuccessMessage && (react_1.default.createElement(SearchAiNegativeFeedbackForm_1.SearchAiNegativeFeedbackForm, { messageId: messageId, onClose: (messageId, feedback) => {
                     onFeedbackChange(messageId, feedback);
@@ -171,7 +141,6 @@ 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 &&
@@ -179,7 +148,6 @@ exports.SearchAiMessage = (0, react_1.memo)(SearchAiMessageComponent, (prevProps
         prevProps.feedback === nextProps.feedback &&
         prevProps.onFeedbackChange === nextProps.onFeedbackChange &&
         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 `
@@ -192,6 +160,7 @@ const SearchAiMessageWrapper = styled_components_1.default.div `
 const MessageContentWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
+  flex-grow: ${({ $isFullWidth }) => ($isFullWidth ? 1 : 0)};
   gap: var(--spacing-sm);
   max-width: 80%;
   min-width: 0;
@@ -217,7 +186,7 @@ const MessageWrapper = styled_components_1.default.div `
     ? 'var(--spacing-sm)'
     : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
   border-radius: var(--border-radius-xl);
-  width: fit-content;
+  width: ${({ $isFullWidth }) => ($isFullWidth ? 'auto' : 'fit-content')};
   max-width: 100%;
   word-wrap: break-word;
   white-space: pre-wrap;
@@ -234,12 +203,14 @@ const ResourcesWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
   margin: 0;
+  ${styles_1.searchAiAppearAnimation}
 `;
 const FeedbackWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
   gap: var(--search-ai-feedback-gap);
   margin-top: var(--spacing-sm);
+  ${styles_1.searchAiAppearAnimation}
 `;
 const ResourcesTitle = styled_components_1.default.div `
   font-weight: var(--search-ai-resources-title-font-weight);
@@ -270,41 +241,6 @@ const ResourceTag = (0, styled_components_1.default)(Tag_1.Tag).attrs({ textTran
     max-width: 100%;
   }
 `;
-const ThinkingDotsWrapper = styled_components_1.default.div `
-  display: flex;
-  gap: var(--search-ai-thinking-dots-gap);
-  padding: var(--search-ai-thinking-dots-padding);
-`;
-const ThinkingDot = styled_components_1.default.div `
-  width: var(--search-ai-thinking-dot-size);
-  height: var(--search-ai-thinking-dot-size);
-  border-radius: 50%;
-  background: var(--search-ai-thinking-dot-color);
-  animation: bounce 1.4s infinite ease-in-out;
-
-  &:nth-child(1) {
-    animation-delay: -0.32s;
-  }
-  &:nth-child(2) {
-    animation-delay: -0.16s;
-  }
-  &:nth-child(3) {
-    animation-delay: 0s;
-  }
-
-  @keyframes bounce {
-    0%,
-    80%,
-    100% {
-      opacity: 0.2;
-      transform: scale(0.8);
-    }
-    40% {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-`;
 const SuccessMessageWrapper = styled_components_1.default.div `
   max-width: fit-content;
   display: flex;
@@ -319,35 +255,11 @@ 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);
+const ToolCallsActivity = (0, styled_components_1.default)(SearchAiActivity_1.SearchAiActivity) `
   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;
-      }
-    }
-  `}
+  &:last-child {
+    margin-bottom: var(--spacing-xxs);
+  }
 `;
 //# sourceMappingURL=SearchAiMessage.js.map

package/lib/components/Search/SearchItem.js

@@ -67,14 +67,7 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
     });
     return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, onClick: onClick, tabIndex: 0, innerRef: (el) => {
             ref.current = el;
-            if (!innerRef)
-                return;
-            if (typeof innerRef === 'function') {
-                innerRef(el);
-            }
-            else {
-                innerRef.current = el;
-            }
+            (0, utils_1.assignRef)(innerRef, el);
         }, "data-component-name": "Search/SearchItem" },
         react_1.default.createElement(SearchItemContent, null,
             react_1.default.createElement(SearchItemHeader, null,

package/lib/components/Search/variables.js

@@ -200,8 +200,21 @@ exports.search = (0, styled_components_1.css) `
   --search-ai-suggestions-title-font-weight: var(--font-weight-light);
   --search-ai-suggestions-text-color: var(--text-color-description);
 
-  --search-ai-thinking-dots-gap: 4px;
-  --search-ai-thinking-dots-padding: 4px 0;
+  --search-ai-activity-font-size: var(--font-size-base);
+  --search-ai-activity-line-height: var(--line-height-sm);
+  --search-ai-activity-count-font-size: var(--font-size-sm);
+  --search-ai-activity-count-bg-color: var(--border-color-secondary);
+  --search-ai-activity-text-color: var(--text-color-description);
+  --search-ai-activity-text-color-hover: var(--text-color-primary);
+  --search-ai-activity-detail-color: var(--text-color-secondary);
+  --search-ai-activity-shimmer-color: var(--text-color-primary);
+  --search-ai-activity-rail-color: var(--border-color-primary);
+  --search-ai-activity-icon-size: 14px;
+  --search-ai-activity-fade-duration: 200ms;
+  --search-ai-activity-expand-duration: 250ms;
+  --search-ai-activity-shimmer-duration: 2s;
+  --search-ai-activity-easing: cubic-bezier(0.32, 0.72, 0, 1);
+
   --search-ai-thinking-dot-size: 6px;
   --search-ai-thinking-dot-color: var(--search-ai-gradient);
 

package/lib/components/Segmented/Segmented.js

@@ -32,15 +32,35 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typed_memo_1 = require("../../core/hoc/typed-memo");
+const hooks_1 = require("../../core/hooks");
 function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
-    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist", $size: size }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
-        opt.divider,
-        react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), $isActive: value == opt.value, $size: size }, opt.element || opt.label))))));
+    const { tabListProps, getTabProps } = (0, hooks_1.useTabList)({
+        count: options.length,
+        activeIndex: options.findIndex((opt) => value == opt.value),
+        onChange: (index) => onChange(options[index]),
+    });
+    return (react_1.default.createElement(SegmentedGroup, Object.assign({ ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}` }, tabListProps, { $size: size }), options.map((opt, index) => {
+        const _a = getTabProps(index), { 'aria-controls': _noPanel } = _a, tabProps = __rest(_a, ['aria-controls']);
+        return (react_1.default.createElement(react_1.default.Fragment, { key: index },
+            opt.divider,
+            react_1.default.createElement(SegmentedItem, Object.assign({ key: opt.label }, tabProps, { title: opt.label, $isActive: value == opt.value, $size: size }), opt.element || opt.label)));
+    })));
 }
 exports.Segmented = (0, typed_memo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `

package/lib/components/Select/Select.js

@@ -68,6 +68,7 @@ function Select(props) {
     const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
     const [stickyInputValue, setStickyInputValue] = (0, react_1.useState)(placeholder || '');
     const inputId = (0, react_1.useId)();
+    const listboxId = `${inputId}-listbox`;
     (0, hooks_1.useOutsideClick)(selectRef, () => {
         setDropdownActive(false);
     });
@@ -169,14 +170,20 @@ function Select(props) {
         return !!selectedOptions.find((selectOption) => selectOption.value === option.value || selectOption.value === option.label);
     };
     const renderDefaultInput = (inputRef) => {
-        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, listboxId: inputId, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
+        return (react_1.default.createElement(SelectInput_1.SelectInput, { id: inputId, listboxId: listboxId, expanded: dropdownActive, selectedOptions: selectedOptions, searchValue: searchValue, placeholder: placeholder, stickyValue: stickyInputValue, multiple: multiple, searchable: searchable, clearable: clearable, customIcon: icon, inputRef: inputRef, onlyIcon: onlyIcon, clearHandler: clearHandler, searchHandler: searchHandler, inputBlurHandler: inputBlurHandler, inputFocusHandler: inputFocusHandler, clickHandler: inputClickHandler }));
     };
     return (react_1.default.createElement(exports.SelectWrapper, Object.assign({ "data-component-name": "Select/Select", ref: selectRef }, dataAttributes, { disabled: disabled, "data-testid": dataTestId, className: className, onKeyDown: (e) => {
             if (e.key === 'Enter' && document.activeElement === selectRef.current) {
                 e.preventDefault();
                 setDropdownActive(!dropdownActive);
             }
-        }, tabIndex: 0, "aria-haspopup": "listbox", "aria-expanded": dropdownActive, "aria-label": "Select option", onFocus: (e) => {
+        }, tabIndex: searchable ? undefined : 0 }, (!searchable && {
+        role: 'combobox',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': dropdownActive,
+        'aria-controls': listboxId,
+        'aria-label': 'Select option',
+    }), { onFocus: (e) => {
             var _a;
             if (e.target === selectRef.current) {
                 (_a = selectInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
@@ -185,7 +192,7 @@ function Select(props) {
             e.preventDefault();
         } }),
         react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(selectInputRef), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
-            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
+            react_1.default.createElement(SelectDropdownMenu, { id: listboxId, role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
                 return (react_1.default.createElement(react_1.Fragment, { key: index },
                     react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon &&
                             (checkmarkIconPosition ? checkmarkIconPosition === 'start' : false) &&