@redocly/theme 0.67.0-next.3 → 0.67.0-next.4

package/lib/components/Breadcrumbs/BreadcrumbDropdown.d.ts

@@ -9,6 +9,7 @@ type BreadcrumbDropdownProps = {
     })[];
     onItemClick?: (item: BreadcrumbItem, index: number) => void;
     className?: string;
+    withChevron?: boolean;
 };
-export declare function BreadcrumbDropdown({ children, label, items, onItemClick, className }: BreadcrumbDropdownProps): JSX.Element | null;
+export declare function BreadcrumbDropdown({ children, label, items, onItemClick, className, withChevron }: BreadcrumbDropdownProps): JSX.Element | null;
 export {};

package/lib/components/Breadcrumbs/BreadcrumbDropdown.js

@@ -47,19 +47,22 @@ const Tooltip_1 = require("../../components/Tooltip/Tooltip");
 const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 const constants_1 = require("../../core/constants");
 const BreadcrumbIcon_1 = require("../../components/Breadcrumbs/BreadcrumbIcon");
-function BreadcrumbDropdown({ children, label, items, onItemClick, className, }) {
+function BreadcrumbDropdown({ children, label, items, onItemClick, className, withChevron, }) {
     const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const { translate } = useTranslate();
+    const [isOpen, setIsOpen] = react_1.default.useState(false);
     if (!items || items.length === 0) {
         return null;
     }
     const isTruncated = label.length > constants_1.BREADCRUMB_MAX_LENGTH;
     const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom" },
         react_1.default.createElement(TriggerContentWrapper, null, children))) : (children);
-    const trigger = react_1.default.createElement(StyledDropdownTrigger, null, triggerContent);
+    const trigger = (react_1.default.createElement(StyledDropdownTrigger, null,
+        triggerContent,
+        withChevron && react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: isOpen ? 'chevron-up' : 'chevron-down' })));
     return (react_1.default.createElement(BreadcrumbDropdownWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbDropdown", className: className, "data-testid": "breadcrumb-dropdown" },
-        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: trigger, closeOnClick: true },
+        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: trigger, closeOnClick: true, onOpen: () => setIsOpen(true), onClose: () => setIsOpen(false) },
             react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item, index) => {
                 const isActive = Boolean(item === null || item === void 0 ? void 0 : item.isActive);
                 const hasLink = Boolean(item.link);
@@ -101,7 +104,7 @@ const StyledDropdownTrigger = styled_components_1.default.button `
     background-color: var(--breadcrumbs-background-color-hover);
   }
 
-  &:focus {
+  &:focus-visible {
     box-shadow: var(--breadcrumbs-box-shadow-focus);
     outline: none;
   }

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -12,7 +12,6 @@ const BreadcrumbDropdown_1 = require("../../components/Breadcrumbs/BreadcrumbDro
 const BreadcrumbIcon_1 = require("../../components/Breadcrumbs/BreadcrumbIcon");
 const utils_1 = require("../../core/utils");
 const constants_1 = require("../../core/constants");
-const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
 function Breadcrumbs(props) {
     const { useBreadcrumbs, useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { breadcrumbs: fileBreadcrumbs, currentItemSiblings } = useBreadcrumbs();
@@ -46,7 +45,7 @@ function Breadcrumbs(props) {
                 ...currentItemSiblings,
             ];
             const translatedLabel = translate(breadcrumb.labelTranslationKey, breadcrumb.label);
-            return (react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: translatedLabel, items: siblingsWithActive, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage([
+            return (react_1.default.createElement(BreadcrumbDropdown_1.BreadcrumbDropdown, { label: translatedLabel, items: siblingsWithActive, withChevron: true, onItemClick: (item, itemIdx) => telemetry.sendBreadcrumbClickedMessage([
                     {
                         object: 'breadcrumb',
                         link: item.link,
@@ -55,8 +54,7 @@ function Breadcrumbs(props) {
                     },
                 ]) },
                 react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: breadcrumb.icon }),
-                (0, utils_1.trimText)(translatedLabel, constants_1.BREADCRUMB_MAX_LENGTH),
-                react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: "chevron-down" })));
+                (0, utils_1.trimText)(translatedLabel, constants_1.BREADCRUMB_MAX_LENGTH)));
         }
         return (react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: translate(breadcrumb.labelTranslationKey, breadcrumb.label), isActive: isActive, icon: breadcrumb.icon, onClick: () => telemetry.sendBreadcrumbClickedMessage([
                 {

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

@@ -12,6 +12,7 @@ export type DropdownProps = PropsWithChildren<{
     withArrow?: boolean;
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
+    onOpen?: () => void;
 }>;
 export declare const Dropdown: React.ForwardRefExoticComponent<{
     trigger: React.ReactNode;
@@ -25,6 +26,7 @@ export declare const Dropdown: React.ForwardRefExoticComponent<{
     withArrow?: boolean;
     onClick?: (event: React.UIEvent) => void;
     onClose?: () => void;
+    onOpen?: () => void;
 } & {
     children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/lib/components/Dropdown/Dropdown.js

@@ -42,11 +42,12 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
 const ChevronUpIcon_1 = require("../../icons/ChevronUpIcon/ChevronUpIcon");
-exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, onClick, onClose, }, ref) => {
+exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigger, triggerEvent = 'click', closeOnClick = true, withArrow, dataAttributes, placement, alignment, onClick, onClose, onOpen, }, ref) => {
     const dropdownRef = (0, react_1.useRef)(null);
     const [isOpen, setIsOpen] = (0, hooks_1.useControlledState)(false, active);
     const handleOpen = () => {
         setIsOpen(true);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     };
     const handleClose = () => {
         setIsOpen(false);
@@ -58,7 +59,12 @@ exports.Dropdown = (0, react_1.forwardRef)(({ children, className, active, trigg
     const handleToggle = (event) => {
         event.stopPropagation();
         event.preventDefault();
-        setIsOpen(!isOpen);
+        if (isOpen) {
+            handleClose();
+        }
+        else {
+            handleOpen();
+        }
     };
     const handleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {

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 types_2 = require("../../core/types");
 const Link_1 = require("../../components/Link/Link");
 const Tag_1 = require("../../components/Tag/Tag");
 const constants_2 = require("../../core/constants");
@@ -56,11 +57,28 @@ function MarkdownSegment({ text }) {
     const markdown = useMarkdownText(text);
     return react_1.default.createElement(ResponseText, { as: "div", children: markdown, "data-testid": "response-text" });
 }
-function getToolCallDisplayText(toolName) {
+// 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;
-    return ((_a = constants_1.TOOL_CALL_DISPLAY_TEXT[toolName]) !== null && _a !== void 0 ? _a : {
-        inProgressText: `Executing ${toolName}...`,
-        completedText: `${toolName} executed`,
+    if (toolCall.name === types_2.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 }], }) {
@@ -111,7 +129,7 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
                 contentSegments.map((segment, index) => {
                     if (segment.type === 'tool') {
                         const toolCallCompleted = Boolean(segment.toolCall.result);
-                        const { inProgressText, completedText } = getToolCallDisplayText(segment.toolCall.name);
+                        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,

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

@@ -124,5 +124,6 @@ export declare enum ToolCallName {
     GetEndpoints = "get-endpoints",
     GetEndpointInfo = "get-endpoint-info",
     GetSecuritySchemes = "get-security-schemes",
-    GetFullApiDescription = "get-full-api-description"
+    GetFullApiDescription = "get-full-api-description",
+    Execute = "execute"
 }

package/lib/core/types/search.js

@@ -14,5 +14,6 @@ var ToolCallName;
     ToolCallName["GetEndpointInfo"] = "get-endpoint-info";
     ToolCallName["GetSecuritySchemes"] = "get-security-schemes";
     ToolCallName["GetFullApiDescription"] = "get-full-api-description";
+    ToolCallName["Execute"] = "execute";
 })(ToolCallName || (exports.ToolCallName = ToolCallName = {}));
 //# sourceMappingURL=search.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.67.0-next.3",
+  "version": "0.67.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.1.8",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.13.0-next.2"
+    "@redocly/realm-asyncapi-sdk": "0.13.0-next.3"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Breadcrumbs/BreadcrumbDropdown.tsx

@@ -19,6 +19,7 @@ type BreadcrumbDropdownProps = {
   items: (BreadcrumbItem & { isActive?: boolean })[];
   onItemClick?: (item: BreadcrumbItem, index: number) => void;
   className?: string;
+  withChevron?: boolean;
 };
 
 export function BreadcrumbDropdown({
@@ -27,10 +28,12 @@ export function BreadcrumbDropdown({
   items,
   onItemClick,
   className,
+  withChevron,
 }: BreadcrumbDropdownProps): JSX.Element | null {
   const { useTelemetry, useTranslate } = useThemeHooks();
   const telemetry = useTelemetry();
   const { translate } = useTranslate();
+  const [isOpen, setIsOpen] = React.useState(false);
 
   if (!items || items.length === 0) {
     return null;
@@ -46,7 +49,12 @@ export function BreadcrumbDropdown({
     children
   );
 
-  const trigger = <StyledDropdownTrigger>{triggerContent}</StyledDropdownTrigger>;
+  const trigger = (
+    <StyledDropdownTrigger>
+      {triggerContent}
+      {withChevron && <GenericIcon icon={isOpen ? 'chevron-up' : 'chevron-down'} />}
+    </StyledDropdownTrigger>
+  );
 
   return (
     <BreadcrumbDropdownWrapper
@@ -54,7 +62,12 @@ export function BreadcrumbDropdown({
       className={className}
       data-testid="breadcrumb-dropdown"
     >
-      <Dropdown trigger={trigger} closeOnClick={true}>
+      <Dropdown
+        trigger={trigger}
+        closeOnClick={true}
+        onOpen={() => setIsOpen(true)}
+        onClose={() => setIsOpen(false)}
+      >
         <DropdownMenu>
           {items.map((item, index) => {
             const isActive = Boolean(item?.isActive);
@@ -117,7 +130,7 @@ const StyledDropdownTrigger = styled.button`
     background-color: var(--breadcrumbs-background-color-hover);
   }
 
-  &:focus {
+  &:focus-visible {
     box-shadow: var(--breadcrumbs-box-shadow-focus);
     outline: none;
   }

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -10,7 +10,6 @@ import { BreadcrumbDropdown } from '@redocly/theme/components/Breadcrumbs/Breadc
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
 import { trimText } from '@redocly/theme/core/utils';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
-import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 
 export function Breadcrumbs(props: {
   className?: string;
@@ -65,6 +64,7 @@ export function Breadcrumbs(props: {
         <BreadcrumbDropdown
           label={translatedLabel}
           items={siblingsWithActive}
+          withChevron
           onItemClick={(item, itemIdx) =>
             telemetry.sendBreadcrumbClickedMessage([
               {
@@ -78,7 +78,6 @@ export function Breadcrumbs(props: {
         >
           <BreadcrumbIcon icon={breadcrumb.icon} />
           {trimText(translatedLabel, BREADCRUMB_MAX_LENGTH)}
-          <GenericIcon icon="chevron-down" />
         </BreadcrumbDropdown>
       );
     }

package/src/components/Dropdown/Dropdown.tsx

@@ -30,6 +30,7 @@ export type DropdownProps = PropsWithChildren<{
 
   onClick?: (event: React.UIEvent) => void;
   onClose?: () => void;
+  onOpen?: () => void;
 }>;
 
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
@@ -47,6 +48,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
       alignment,
       onClick,
       onClose,
+      onOpen,
     },
     ref,
   ) => {
@@ -55,6 +57,7 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
 
     const handleOpen = () => {
       setIsOpen(true);
+      onOpen?.();
     };
 
     const handleClose = () => {
@@ -69,7 +72,11 @@ export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
     const handleToggle = (event: React.UIEvent) => {
       event.stopPropagation();
       event.preventDefault();
-      setIsOpen(!isOpen);
+      if (isOpen) {
+        handleClose();
+      } else {
+        handleOpen();
+      }
     };
 
     const handleKeyDown = (event: React.KeyboardEvent) => {

package/src/components/Search/SearchAiMessage.tsx

@@ -10,6 +10,7 @@ import {
   type ContentSegment,
 } from '@redocly/theme/core/types';
 import { TOOL_CALL_DISPLAY_TEXT } from '@redocly/theme/core/constants';
+import { ToolCallName } from '@redocly/theme/core/types';
 import { Link } from '@redocly/theme/components/Link/Link';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { AiSearchConversationRole } from '@redocly/theme/core/constants';
@@ -26,14 +27,33 @@ function MarkdownSegment({ text }: { text: string }): JSX.Element {
   const markdown = useMarkdownText(text);
   return <ResponseText as="div" children={markdown} data-testid="response-text" />;
 }
-function getToolCallDisplayText(toolName: string): {
+// 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: unknown): string | undefined {
+  if (args && typeof args === 'object' && 'description' in args) {
+    const { description } = args as { description?: unknown };
+    if (typeof description === 'string' && description.trim().length > 0) {
+      return description.trim();
+    }
+  }
+  return undefined;
+}
+
+function getToolCallDisplayText(toolCall: ToolCall): {
   inProgressText: string;
   completedText: string;
 } {
+  if (toolCall.name === ToolCallName.Execute) {
+    const description = getExecuteDescription(toolCall.args);
+    if (description) {
+      return { inProgressText: description, completedText: description };
+    }
+  }
+
   return (
-    TOOL_CALL_DISPLAY_TEXT[toolName] ?? {
-      inProgressText: `Executing ${toolName}...`,
-      completedText: `${toolName} executed`,
+    TOOL_CALL_DISPLAY_TEXT[toolCall.name] ?? {
+      inProgressText: `Executing ${toolCall.name}...`,
+      completedText: `${toolCall.name} executed`,
     }
   );
 }
@@ -135,7 +155,7 @@ function SearchAiMessageComponent({
                   const toolCallCompleted = Boolean(segment.toolCall.result);
 
                   const { inProgressText, completedText } = getToolCallDisplayText(
-                    segment.toolCall.name,
+                    segment.toolCall,
                   );
 
                   const toolCallDisplayText = toolCallCompleted ? completedText : inProgressText;

package/src/core/types/search.ts

@@ -132,4 +132,5 @@ export enum ToolCallName {
   GetEndpointInfo = 'get-endpoint-info',
   GetSecuritySchemes = 'get-security-schemes',
   GetFullApiDescription = 'get-full-api-description',
+  Execute = 'execute',
 }