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

package/lib/core/utils/search-ai-activity.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSearchAiActivityStatus = getSearchAiActivityStatus;
+exports.getSearchAiActivityStep = getSearchAiActivityStep;
+const search_1 = require("../types/search");
+const search_2 = require("../constants/search");
+const type_guards_1 = require("./type-guards");
+function getSearchAiActivityStatus(toolCalls, isActive, runningToolCall, translate) {
+    var _a;
+    const latestToolCall = toolCalls.at(-1);
+    if (!latestToolCall) {
+        return {
+            label: translate('search.ai.thinkingText', 'Thinking...'),
+            kind: 'thinking',
+            isRunning: true,
+        };
+    }
+    if (isActive || toolCalls.length === 1) {
+        const toolCall = runningToolCall !== null && runningToolCall !== void 0 ? runningToolCall : latestToolCall;
+        return Object.assign(Object.assign({}, getToolCallLabel(toolCall, !isActive, translate)), { kind: getSearchAiActivityKind(toolCall.name), isRunning: isActive });
+    }
+    const isSameTool = toolCalls.every((toolCall) => toolCall.name === latestToolCall.name);
+    const sharedText = isSameTool
+        ? (_a = search_2.TOOL_CALL_DISPLAY_TEXT[latestToolCall.name]) === null || _a === void 0 ? void 0 : _a.completedText
+        : undefined;
+    return {
+        label: sharedText !== null && sharedText !== void 0 ? sharedText : translate('search.ai.toolCall.usedTools', 'Used tools'),
+        kind: isSameTool ? getSearchAiActivityKind(latestToolCall.name) : 'code',
+        isRunning: false,
+    };
+}
+function getSearchAiActivityStep(toolCall, isRunning, translate) {
+    const detail = getToolCallDetail(toolCall);
+    const kind = getSearchAiActivityKind(toolCall.name);
+    if (toolCall.name === search_1.ToolCallName.SearchDocumentation && detail) {
+        return { id: toolCall.id, label: `“${detail}”`, kind, isRunning };
+    }
+    const { label } = getToolCallLabel(toolCall, !isRunning, translate);
+    return { id: toolCall.id, label: detail ? label : stripEllipsis(label), kind, isRunning };
+}
+function getToolCallLabel(toolCall, isCompleted, translate) {
+    const detail = getToolCallDetail(toolCall);
+    if (toolCall.name === search_1.ToolCallName.Execute && detail) {
+        return { label: detail };
+    }
+    const builtInText = search_2.TOOL_CALL_DISPLAY_TEXT[toolCall.name];
+    if (builtInText) {
+        const text = isCompleted ? builtInText.completedText : builtInText.inProgressText;
+        return detail ? { label: stripEllipsis(text), detail } : { label: text };
+    }
+    const prefix = isCompleted
+        ? translate('search.ai.toolCall.executed', 'Executed')
+        : translate('search.ai.toolCall.executing', 'Executing');
+    return { label: `${prefix} ${toolCall.name}` };
+}
+function getSearchAiActivityKind(name) {
+    if (name === search_1.ToolCallName.SearchDocumentation)
+        return 'search';
+    if (name === search_1.ToolCallName.ContactSupport)
+        return 'support';
+    return 'code';
+}
+function getToolCallDetail(toolCall) {
+    switch (toolCall.name) {
+        case search_1.ToolCallName.SearchDocumentation:
+            return getStringArg(toolCall.args, 'query');
+        case search_1.ToolCallName.Execute:
+            return getStringArg(toolCall.args, 'description');
+        default:
+            return undefined;
+    }
+}
+function getStringArg(args, name) {
+    if (!(0, type_guards_1.isObject)(args) || !(name in args)) {
+        return undefined;
+    }
+    const value = Reflect.get(args, name);
+    return typeof value === 'string' && value.trim().length > 0 ? value.trim() : undefined;
+}
+function stripEllipsis(text) {
+    return text.replace(/(\.{3}|…)$/, '');
+}
+//# sourceMappingURL=search-ai-activity.js.map

package/lib/markdoc/tags/connect-mcp.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.connectMcp = void 0;
 const constants_1 = require("../../core/constants");
+const utils_1 = require("../../core/utils");
 exports.connectMcp = {
     schema: {
         render: 'ConnectMCP',
@@ -19,6 +20,20 @@ exports.connectMcp = {
             options: {
                 type: Array,
                 default: constants_1.DEFAULT_MCP_OPTIONS,
+                validate(value) {
+                    if (!Array.isArray(value))
+                        return [];
+                    const unknownOptions = value.filter((option) => !(0, utils_1.isMCPOption)(option));
+                    if (unknownOptions.length === 0)
+                        return [];
+                    return [
+                        {
+                            id: 'invalid-connect-mcp-options',
+                            level: 'error',
+                            message: `Invalid connect-mcp options: ${unknownOptions.join(', ')}. Must be one of: ${constants_1.MCP_OPTIONS.join(', ')}`,
+                        },
+                    ];
+                },
             },
         },
         selfClosing: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.70.0-next.5",
+  "version": "0.70.0-next.7",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -43,6 +43,7 @@
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
     "@redocly/realm-asyncapi-sdk": "0.16.0-next.2",
+    "@redocly/tooling-test-utils": "0.0.0",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -71,7 +72,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.61.1",
+    "@redocly/config": "0.62.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -19,7 +19,6 @@ import { useConnectMCPButton, useThemeHooks } from '@redocly/theme/core/hooks';
 import { DEFAULT_MCP_OPTIONS } from '@redocly/theme/core/constants';
 
 type MenuOption = {
-  key: MCPOption;
   icon: React.ComponentType;
   titleTranslationKey: string;
   titleDefault: string;
@@ -27,48 +26,43 @@ type MenuOption = {
   descriptionDefault: string;
 };
 
-const MENU_OPTIONS: MenuOption[] = [
-  {
-    key: 'cursor',
+const MENU_OPTIONS: Record<MCPOption, MenuOption> = {
+  cursor: {
     icon: 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,
     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,
     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,
     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,
     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: MCPOption[] = ['claude-code', 'codex', 'copy'];
@@ -89,7 +83,7 @@ export function ConnectMCPButton({
 
   const { copiedOption, visibleOptions, handleAction } = useConnectMCPButton({ options });
 
-  const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
+  const menuOptions = visibleOptions.map((key) => ({ key, ...MENU_OPTIONS[key] }));
   const primaryOption = menuOptions[0];
   const dropdownOptions = menuOptions.slice(1);
 

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.tsx

@@ -3,5 +3,7 @@ import type { CatalogEntityRelationsGraphProps } from '@redocly/theme/components
 import { dynamic } from '@redocly/theme/core/utils';
 
 export const CatalogEntityRelationsGraph = dynamic<CatalogEntityRelationsGraphProps>(() =>
-  import('./CatalogEntityRelationsGraph').then((mod) => mod.CatalogEntityRelationsGraph),
+  import('@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph').then(
+    (mod) => mod.CatalogEntityRelationsGraph,
+  ),
 );

package/src/components/Catalog/CatalogFilter/CatalogFilterDateRange.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -19,6 +19,7 @@ export function CatalogFilterDateRange({
   filter,
   className,
 }: CatalogFilterDateRangeProps): JSX.Element {
+  const [today] = useState(() => new Date());
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -60,7 +61,7 @@ export function CatalogFilterDateRange({
                 monthPlaceholder="MM"
                 yearPlaceholder="YYYY"
                 value={from}
-                maxDate={new Date()}
+                maxDate={today}
                 onChange={(from) => {
                   if (Array.isArray(from)) return;
                   filter.selectOption({

package/src/components/Dropdown/Dropdown.tsx

@@ -11,9 +11,10 @@ import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 
 import type { CSSProperties, ReactElement } from 'react';
-import type { RenderableChildren } from '@redocly/theme/core/types';
+import type { DropdownAlignment, RenderableChildren } from '@redocly/theme/core/types';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
+import { fitDropdownAlignment } from '@redocly/theme/core/utils';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';
 
@@ -37,7 +38,7 @@ export type DropdownProps = {
   children: RenderableChildren<DropdownMenuContext>;
   triggerEvent?: 'click' | 'hover';
   placement?: 'top' | 'bottom';
-  alignment?: 'start' | 'end';
+  alignment?: DropdownAlignment;
 
   active?: boolean;
   closeOnClick?: boolean;
@@ -46,6 +47,8 @@ export type DropdownProps = {
   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;
@@ -66,6 +69,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       placement,
       alignment,
       portalled = false,
+      alignmentAnchorRef,
       onClick,
       onClose,
       onOpen,
@@ -76,6 +80,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     const menuRef = useRef<HTMLDivElement | null>(null);
     const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
     const [menuStyle, setMenuStyle] = useState<CSSProperties>({});
+    const [fittedAlignment, setFittedAlignment] = useState(alignment);
 
     const wrapperRef = (ref as React.RefObject<HTMLDivElement | null>) || dropdownRef;
 
@@ -115,7 +120,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     const updateMenuPosition = useCallback(() => {
       const wrapper = wrapperRef.current;
       if (!wrapper) return;
-      const rect = wrapper.getBoundingClientRect();
+      const rect = (alignmentAnchorRef?.current ?? wrapper).getBoundingClientRect();
       const menuHeight = menuRef.current?.offsetHeight ?? 0;
       const fitsBelow = rect.bottom + menuHeight <= window.innerHeight;
       const fitsAbove = rect.top - menuHeight >= 0;
@@ -126,7 +131,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       } else {
         style.top = rect.bottom;
       }
-      if (alignment === 'end') {
+      if (fitDropdownAlignment(rect, menuRef.current?.offsetWidth ?? 0, alignment) === 'end') {
         style.right = window.innerWidth - rect.right;
       } else {
         style.left = rect.left;
@@ -136,7 +141,24 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
         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 = useCallback(() => {
+      const wrapper = wrapperRef.current;
+      const menu = menuRef.current;
+      if (!wrapper || !menu) return;
+      const rect = (alignmentAnchorRef?.current ?? wrapper).getBoundingClientRect();
+      setFittedAlignment(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;
@@ -172,7 +194,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       <ChildrenWrapper
         ref={menuRef}
         $placement={placement}
-        $alignment={alignment}
+        $alignment={fittedAlignment}
         $isOpen={isOpen}
         $portalled={portalled}
         style={portalled ? menuStyle : undefined}

package/src/components/Filter/FilterDateRange.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -11,6 +11,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { formatDateWithoutTimeZone } from '@redocly/theme/core/utils';
 
 export function FilterDateRange({ filter }: FilterProps): JSX.Element {
+  const [today] = useState(() => new Date());
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -33,7 +34,7 @@ export function FilterDateRange({ filter }: FilterProps): JSX.Element {
               monthPlaceholder="MM"
               yearPlaceholder="YYYY"
               value={from}
-              maxDate={new Date()}
+              maxDate={today}
               onChange={(from) => {
                 if (Array.isArray(from)) return;
                 filter.selectOption({

package/src/components/Portal/Portal.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { createPortal } from 'react-dom';
 
 import type { PropsWithChildren, JSX } from 'react';
 
 import { IS_BROWSER } from '@redocly/theme/core/utils';
+import { PortalContainerContext } from '@redocly/theme/core/contexts/PortalContainerContext';
 
 export type PortalProps = {
   mountId?: string;
@@ -13,7 +14,8 @@ export function Portal({
   children,
   mountId = 'root',
 }: PropsWithChildren<PortalProps>): React.ReactPortal | JSX.Element {
-  const mount = IS_BROWSER ? document.getElementById(mountId) || document.body : null;
+  const container = useContext(PortalContainerContext);
+  const mount = IS_BROWSER ? container || document.getElementById(mountId) || document.body : null;
 
   if (!mount) {
     return <>{children}</>;

package/src/components/Search/SearchAiActionButtons.tsx

@@ -10,6 +10,8 @@ import { ThumbUpFilledIcon } from '@redocly/theme/icons/ThumbUpFilledIcon/ThumbU
 import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
 import { ThumbDownFilledIcon } from '@redocly/theme/icons/ThumbDownFilledIcon/ThumbDownFilledIcon';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type SearchAiActionButtonsProps = {
   content: string;
@@ -26,28 +28,38 @@ export function SearchAiActionButtons({
   onFeedback,
   disabled,
 }: SearchAiActionButtonsProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <ActionButtonsWrapper className={className} data-component-name="Search/SearchAiActionButtons">
-      <CopyButton data={content} />
-      <FeedbackButton
-        variant="text"
-        size="small"
-        icon={feedback === FeedbackType.Like ? <ThumbUpFilledIcon /> : <ThumbUpIcon />}
-        onClick={() => !disabled && onFeedback(FeedbackType.Like)}
-        extraClass={feedback === FeedbackType.Like ? 'active' : ''}
-        aria-label="Like this response"
-        disabled={disabled}
-      />
+      <Tooltip tip={translate('search.ai.actions.copy', 'Copy the response')} placement="top">
+        <CopyButton data={content} />
+      </Tooltip>
+
+      <Tooltip tip={translate('search.ai.actions.like', 'Like the response')} placement="top">
+        <FeedbackButton
+          variant="text"
+          size="small"
+          icon={feedback === FeedbackType.Like ? <ThumbUpFilledIcon /> : <ThumbUpIcon />}
+          onClick={() => !disabled && onFeedback(FeedbackType.Like)}
+          extraClass={feedback === FeedbackType.Like ? 'active' : ''}
+          aria-label="Like this response"
+          disabled={disabled}
+        />
+      </Tooltip>
 
-      <FeedbackButton
-        variant="text"
-        size="small"
-        icon={feedback === FeedbackType.Dislike ? <ThumbDownFilledIcon /> : <ThumbDownIcon />}
-        onClick={() => !disabled && onFeedback(FeedbackType.Dislike)}
-        extraClass={feedback === FeedbackType.Dislike ? 'active' : ''}
-        aria-label="Dislike this response"
-        disabled={disabled}
-      />
+      <Tooltip tip={translate('search.ai.actions.dislike', 'Dislike the response')} placement="top">
+        <FeedbackButton
+          variant="text"
+          size="small"
+          icon={feedback === FeedbackType.Dislike ? <ThumbDownFilledIcon /> : <ThumbDownIcon />}
+          onClick={() => !disabled && onFeedback(FeedbackType.Dislike)}
+          extraClass={feedback === FeedbackType.Dislike ? 'active' : ''}
+          aria-label="Dislike this response"
+          disabled={disabled}
+        />
+      </Tooltip>
     </ActionButtonsWrapper>
   );
 }