@redocly/theme 0.59.0-next.1 → 0.59.0-next.2

package/lib/markdoc/components/Tabs/Tabs.js

@@ -15,21 +15,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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.TabContent = exports.TabsSize = void 0;
 exports.Tabs = Tabs;
 const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importStar(require("styled-components"));
 const hooks_1 = require("../../../core/hooks");
 const TabList_1 = require("../../../markdoc/components/Tabs/TabList");
 const utils_1 = require("../../../core/utils");
@@ -38,22 +46,62 @@ var TabsSize;
     TabsSize["SMALL"] = "small";
     TabsSize["MEDIUM"] = "medium";
 })(TabsSize || (exports.TabsSize = TabsSize = {}));
-function Tabs({ id, children, className, size, initialTab: propInitialTab, }) {
+function Tabs({ id, children, className, size, initialTab: propInitialTab, forceReady = false, }) {
     var _a, _b;
-    const [childrenArray, setChildrenArray] = (0, react_1.useState)(react_1.default.Children.toArray(children));
+    const childrenArray = react_1.default.Children.toArray(children);
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    const containerRef = (0, react_1.useRef)(null);
     const initialTab = (_b = propInitialTab !== null && propInitialTab !== void 0 ? propInitialTab : (_a = childrenArray[0]) === null || _a === void 0 ? void 0 : _a.props.label) !== null && _b !== void 0 ? _b : '';
-    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ tabsId: id, initialTab });
-    (0, react_1.useEffect)(() => {
-        setChildrenArray(react_1.default.Children.toArray(children));
-    }, [children]);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id },
-        react_1.default.createElement(TabList_1.TabList, { size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab }),
+    const labelsHash = childrenArray.map((c) => c.props.label).join('|');
+    const handleReadyChange = (0, react_1.useCallback)((ready) => {
+        setIsReady(ready);
+    }, []);
+    // Reset isReady when children change (new page/tabs)
+    // Use useLayoutEffect to run synchronously before paint
+    (0, react_1.useLayoutEffect)(() => {
+        setIsReady(false);
+    }, [labelsHash]);
+    const inRouter = (0, react_router_dom_1.useInRouterContext)();
+    return (react_1.default.createElement(TabsView, { id: id, className: className, size: size, childrenArray: childrenArray, initialTab: initialTab, useActiveTab: inRouter ? useActiveTabWithRouter : useActiveTabWithoutRouter, isReady: isReady || forceReady, labelsHash: labelsHash, containerRef: containerRef, onReadyChange: handleReadyChange }));
+}
+function TabsView({ id, className, size, childrenArray, useActiveTab, initialTab, isReady, labelsHash, containerRef, onReadyChange, }) {
+    const { activeTab, setActiveTab } = useActiveTab(initialTab, id, childrenArray);
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdoc/Tabs/Tabs", className: className, key: id, "$isReady": isReady },
+        react_1.default.createElement(TabList_1.TabList, { key: labelsHash, size: size, childrenArray: childrenArray, activeTab: activeTab, onTabChange: setActiveTab, containerRef: containerRef, onReadyChange: onReadyChange }),
         childrenArray.map((child, index) => {
             const { label } = child.props;
             const tabId = (0, utils_1.getTabId)(label, index);
             return label === activeTab ? (react_1.default.createElement(exports.TabContent, { key: `content-${tabId}`, id: `panel-${tabId}`, "aria-labelledby": `tab-${tabId}`, tabIndex: 0, role: "tabpanel" }, child.props.children)) : null;
         })));
 }
+/**
+ * Validates that the active tab exists in children and resets to initial tab if not found.
+ * Ensures tab state remains consistent when tab structure changes.
+ */
+function useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab) {
+    (0, react_1.useEffect)(() => {
+        const availableLabels = childrenArray.map((child) => child.props.label);
+        if (activeTab && !availableLabels.includes(activeTab) && availableLabels.length > 0) {
+            setActiveTab(initialTab);
+        }
+    }, [childrenArray, activeTab, initialTab, setActiveTab]);
+}
+const useActiveTabWithRouter = (initialTab, tabsId, childrenArray) => {
+    const { activeTab, setActiveTab } = (0, hooks_1.useActiveTab)({ initialTab, tabsId });
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
+const useActiveTabWithoutRouter = (initialTab, _tabsId, childrenArray) => {
+    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
+    useValidateActiveTab(activeTab, setActiveTab, childrenArray, initialTab);
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
 const TabsContainer = styled_components_1.default.div `
   position: relative;
   color: var(--md-tabs-container-text-color);
@@ -70,6 +118,13 @@ const TabsContainer = styled_components_1.default.div `
     margin: 0;
     padding: 0;
   }
+
+  ${({ $isReady }) => !$isReady &&
+    (0, styled_components_1.css) `
+      opacity: 0;
+      pointer-events: none;
+      overflow: hidden;
+    `}
 `;
 exports.TabContent = styled_components_1.default.div `
   color: var(--md-tabs-content-text-color);

package/lib/markdoc/default.d.ts

@@ -4,8 +4,111 @@ export * from '../markdoc/attributes/img-srcset';
 export * from '../markdoc/attributes/relative-path';
 export * from '../markdoc/attributes/svg-content';
 export * as components from '../markdoc/components/default';
+import { admonition } from '../markdoc/tags/admonition';
+import { html } from '../markdoc/tags/html';
+import { markdocExample } from '../markdoc/tags/markdoc-example';
+import { partial } from '../markdoc/tags/partial';
+import { tab } from '../markdoc/tags/tab';
+import { tabs } from '../markdoc/tags/tabs';
+import { debug } from '../markdoc/tags/debug';
+import { codeSnippet } from '../markdoc/tags/code-snippet';
+import { inlineSvg } from '../markdoc/tags/inline-svg';
+import { cards } from '../markdoc/tags/cards';
+import { card } from '../markdoc/tags/card';
+import { img } from '../markdoc/tags/img';
+import { codeWalkthrough } from '../markdoc/tags/code-walkthrough';
+import { codeStep } from '../markdoc/tags/code-step';
+import { input } from '../markdoc/tags/input';
+import { toggle } from '../markdoc/tags/code-toggle';
+import { codeGroup } from '../markdoc/tags/code-group';
+import { icon } from '../markdoc/tags/icon';
 export declare const tags: {
-    [x: string]: import("@markdoc/markdoc").Schema & {
+    [admonition.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [debug.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [html.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [markdocExample.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [partial.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [tab.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [tabs.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeSnippet.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [inlineSvg.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [cards.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [card.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [img.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeWalkthrough.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeStep.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [toggle.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [input.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [codeGroup.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
+    [icon.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
             resolver?: string;
         }>;

package/lib/markdoc/default.js

@@ -18,13 +18,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+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.tags = exports.components = void 0;
 /* Attributes */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.1",
+  "version": "0.59.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,10 +63,10 @@
     "styled-system": "5.1.5",
     "ts-node": "10.9.2",
     "ts-node-dev": "2.0.0",
-    "tsc-alias": "1.8.10",
+    "tsc-alias": "1.8.16",
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
-    "typescript": "5.6.2",
+    "typescript": "5.9.3",
     "vitest": "3.2.4",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0"
@@ -84,10 +84,10 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.1",
+    "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.35.1",
+    "@redocly/config": "0.36.0",
     "@redocly/realm-asyncapi-sdk": "0.5.0-next.0"
   },
   "scripts": {

package/src/components/Catalog/Catalog.tsx

@@ -20,8 +20,11 @@ import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/Catalog
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
 
+type CatalogFiltersWithCounts = Record<string, { value: string; count: number }[]>;
+
 export type CatalogProps = {
   catalogConfig: CatalogEntityConfig;
+  filters?: CatalogFiltersWithCounts;
   entitiesTypes: string[];
   initialEntitiesList?: BffCatalogEntityList;
   catalogSwitcherItems: CatalogSwitcherItem[];
@@ -29,9 +32,11 @@ export type CatalogProps = {
 };
 
 const customCatalogOptionsCasing = (str: string): string => {
-  if (!str) return str;
+  const trimmedStr = str.trim();
+  if (!trimmedStr) return trimmedStr;
+
+  const words = trimmedStr.split(/[\s-_]+/);
 
-  const words = str.split(/[\s-_]+/);
   return words
     .map((word, index) => {
       if (index === 0 && word.toLowerCase() === 'api') {
@@ -45,6 +50,7 @@ const customCatalogOptionsCasing = (str: string): string => {
 export function Catalog(props: CatalogProps): JSX.Element {
   const {
     catalogConfig,
+    filters: serverFilters,
     entitiesTypes,
     initialEntitiesList,
     catalogSwitcherItems,
@@ -72,7 +78,12 @@ export function Catalog(props: CatalogProps): JSX.Element {
     onChangeCollapseSidebarClick,
     layout,
     collapsedSidebar,
-  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0, initialViewMode);
+  } = useCatalog(
+    catalogConfig,
+    serverFilters,
+    initialEntitiesList?.page.total || 0,
+    initialViewMode,
+  );
 
   return (
     <>
@@ -94,7 +105,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
               filters={filters}
               filterTerm={searchQuery}
               hideSearch={true}
-              showCounter={false}
+              showCounter={true}
               filterValuesCasing={customCatalogOptionsCasing}
             />
           }

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -74,7 +74,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs size={TabsSize.MEDIUM}>
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"

package/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
-import React, { cloneElement, useRef } from 'react';
+import React, { cloneElement, useRef, forwardRef } from 'react';
 import styled from 'styled-components';
 
-import type { PropsWithChildren, ReactElement, JSX } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 
 import { useOutsideClick, useControlledState } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
@@ -32,84 +32,89 @@ export type DropdownProps = PropsWithChildren<{
   onClose?: () => void;
 }>;
 
-export function Dropdown({
-  children,
-  className,
-  active,
-  trigger,
-  triggerEvent = 'click',
-  closeOnClick = true,
-  withArrow,
-  dataAttributes,
-  placement,
-  alignment,
-  onClick,
-  onClose,
-}: DropdownProps): JSX.Element {
-  const dropdownRef = useRef<HTMLDivElement | null>(null);
-  const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
-
-  const handleOpen = () => {
-    setIsOpen(true);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-    onClose?.();
-  };
-
-  const handleChildClick = () => {
-    handleClose();
-  };
-
-  const handleToggle = (event: React.UIEvent) => {
-    event.stopPropagation();
-    event.preventDefault();
-    setIsOpen(!isOpen);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      handleToggle(event);
-    }
-  };
-
-  useOutsideClick(dropdownRef, handleClose);
-
-  const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
-
-  const dropdownTrigger = cloneElement(triggerChild, {
-    onClick: triggerEvent === 'click' ? handleToggle : undefined,
-    icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
-    ...(withArrow ? { iconPosition: 'right' } : {}),
-    ...triggerChild.props,
-    onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
-  });
-
-  return (
-    <DropdownWrapper
-      data-component-name="Dropdown/Dropdown"
-      data-testid="dropdown"
-      {...dataAttributes}
-      className={className}
-      ref={dropdownRef}
-      onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
-      onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
-      onClick={onClick}
-    >
-      {dropdownTrigger}
-
-      <ChildrenWrapper
-        placement={placement}
-        alignment={alignment}
-        isOpen={isOpen}
-        onClick={closeOnClick ? handleChildClick : undefined}
+export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
+  (
+    {
+      children,
+      className,
+      active,
+      trigger,
+      triggerEvent = 'click',
+      closeOnClick = true,
+      withArrow,
+      dataAttributes,
+      placement,
+      alignment,
+      onClick,
+      onClose,
+    },
+    ref,
+  ) => {
+    const dropdownRef = useRef<HTMLDivElement | null>(null);
+    const [isOpen, setIsOpen] = useControlledState<boolean>(false, active);
+
+    const handleOpen = () => {
+      setIsOpen(true);
+    };
+
+    const handleClose = () => {
+      setIsOpen(false);
+      onClose?.();
+    };
+
+    const handleChildClick = () => {
+      handleClose();
+    };
+
+    const handleToggle = (event: React.UIEvent) => {
+      event.stopPropagation();
+      event.preventDefault();
+      setIsOpen(!isOpen);
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        handleToggle(event);
+      }
+    };
+
+    useOutsideClick((ref as React.RefObject<HTMLElement | null>) || dropdownRef, handleClose);
+
+    const triggerChild = React.Children.only(trigger) as ReactElement<TriggerProps>;
+
+    const dropdownTrigger = cloneElement(triggerChild, {
+      onClick: triggerEvent === 'click' ? handleToggle : undefined,
+      icon: withArrow ? isOpen ? <ChevronUpIcon /> : <ChevronDownIcon /> : undefined,
+      ...(withArrow ? { iconPosition: 'right' } : {}),
+      ...triggerChild.props,
+      onKeyDown: triggerEvent === 'click' ? handleKeyDown : undefined,
+    });
+
+    return (
+      <DropdownWrapper
+        data-component-name="Dropdown/Dropdown"
+        data-testid="dropdown"
+        {...dataAttributes}
+        className={className}
+        ref={ref || dropdownRef}
+        onPointerEnter={triggerEvent === 'hover' ? handleOpen : undefined}
+        onPointerLeave={triggerEvent === 'hover' ? handleClose : undefined}
+        onClick={onClick}
       >
-        {children}
-      </ChildrenWrapper>
-    </DropdownWrapper>
-  );
-}
+        {dropdownTrigger}
+
+        <ChildrenWrapper
+          placement={placement}
+          alignment={alignment}
+          isOpen={isOpen}
+          onClick={closeOnClick ? handleChildClick : undefined}
+        >
+          {children}
+        </ChildrenWrapper>
+      </DropdownWrapper>
+    );
+  },
+);
 
 const DropdownWrapper = styled.div`
   --button-gap: var(--spacing-xxs);

package/src/components/Menu/MenuItem.tsx

@@ -82,6 +82,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       role={item.link ? 'none' : 'link'}
       tabIndex={!item.link ? 0 : undefined}
       data-testid="menu-item-label"
+      data-active={item.active}
     >
       {hasChevron ? <ChevronWrapper>{chevron}</ChevronWrapper> : null}
       <MenuItemIcon icon={item.icon} srcSet={item.srcSet} />

package/src/components/Search/SearchAiConversationInput.tsx

@@ -13,6 +13,7 @@ type SearchAiConversationInputProps = {
   isGeneratingResponse: boolean;
   placeholder?: string;
   className?: string;
+  disabled?: boolean;
 };
 
 export function SearchAiConversationInput({
@@ -20,6 +21,7 @@ export function SearchAiConversationInput({
   onMessageSent,
   className,
   placeholder,
+  disabled,
 }: SearchAiConversationInputProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
@@ -36,6 +38,8 @@ export function SearchAiConversationInput({
   }, [isGeneratingResponse]);
 
   const handleSendMessage = () => {
+    if (disabled) return;
+
     setQuery('');
     onMessageSent(query);
   };
@@ -46,7 +50,7 @@ export function SearchAiConversationInput({
     }
   };
 
-  const isDisabled = isGeneratingResponse || query.trim().length === 0;
+  const isDisabled = disabled || isGeneratingResponse || query.trim().length === 0;
 
   return (
     <SearchAiConversationInputWrapper
@@ -62,7 +66,7 @@ export function SearchAiConversationInput({
         onChange={(e) => setQuery(e.target.value)}
         onKeyUp={handleOnKeyUp}
         value={query}
-        disabled={isGeneratingResponse}
+        disabled={disabled || isGeneratingResponse}
         maxLength={AI_SEARCH_MAX_MESSAGE_LENGTH}
       />
 
@@ -111,6 +115,10 @@ const ConversationInput = styled.input`
     border-color: var(--search-ai-conversation-input-border-color-focus);
   }
 
+  &:disabled {
+    background-color: var(--search-ai-conversation-input-bg-color-disabled);
+  }
+
   &:focus:disabled {
     border-color: var(--search-ai-conversation-input-border-color-disabled);
   }
@@ -126,6 +134,8 @@ const SendButton = styled(Button)`
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--search-ai-conversation-input-send-button-border-radius);
+  padding: var(--search-ai-conversation-input-send-button-padding);
 
   &:hover {
     background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);