@redocly/theme 0.59.0-rc.2 → 0.59.0

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -0,0 +1,180 @@
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { MCPOption } from '@redocly/theme/core/types';
+
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CursorIcon } from '@redocly/theme/icons/CursorIcon/CursorIcon';
+import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
+import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
+import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
+import { ConnectIcon } from '@redocly/theme/icons/ConnectIcon/ConnectIcon';
+import { useConnectMCPButton } from '@redocly/theme/core/hooks/use-connect-mcp-button';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+type TriggerButtonProps = {
+  text: string;
+};
+
+const TriggerButton = React.memo(({ text }: TriggerButtonProps): JSX.Element => {
+  return (
+    <StyledButton variant="secondary" icon={<ConnectIcon />}>
+      {text}
+    </StyledButton>
+  );
+});
+
+type MenuOption = {
+  key: MCPOption;
+  icon: React.ComponentType;
+  titleTranslationKey: string;
+  titleDefault: string;
+  descriptionTranslationKey: string;
+  descriptionDefault: string;
+};
+
+const MENU_OPTIONS: MenuOption[] = [
+  {
+    key: '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',
+    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: 'copy',
+    icon: CopyIcon,
+    titleTranslationKey: 'page.actions.connectMcp.copyConfig',
+    titleDefault: 'Copy MCP Configuration',
+    descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
+    descriptionDefault: 'Copy MCP JSON Configuration',
+  },
+];
+
+export type ConnectMCPButtonProps = {
+  placement?: 'top' | 'bottom';
+  alignment?: 'start' | 'end';
+  options?: MCPOption[];
+};
+
+export function ConnectMCPButton({
+  placement = 'bottom',
+  alignment = 'end',
+  options = ['cursor', 'vscode', 'copy'],
+}: ConnectMCPButtonProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const { isCopied, triggerButtonText, visibleOptions, handleAction } = useConnectMCPButton({
+    options,
+  });
+
+  const menuOptions = useMemo(
+    () => MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key)),
+    [visibleOptions],
+  );
+
+  return (
+    <ConnectMCPButtonWrapper data-component-name="Buttons/ConnectMCPButton">
+      <Dropdown
+        trigger={<TriggerButton text={triggerButtonText} />}
+        triggerEvent="hover"
+        placement={placement}
+        alignment={alignment}
+        closeOnClick={false}
+      >
+        <DropdownMenu>
+          {menuOptions.map((option) => {
+            const Icon = option.icon;
+            const showCheckmark = option.key === 'copy' && isCopied;
+
+            return (
+              <DropdownMenuItem key={option.key} onAction={() => handleAction(option.key)}>
+                <MenuItemContent>
+                  <MenuItemIcon>
+                    {showCheckmark ? (
+                      <CheckmarkFilledIcon color="var(--color-success-base)" />
+                    ) : (
+                      <Icon />
+                    )}
+                  </MenuItemIcon>
+                  <MenuItemText>
+                    <MenuItemTitle>
+                      {translate(option.titleTranslationKey, option.titleDefault)}
+                    </MenuItemTitle>
+                    <MenuItemDescription>
+                      {translate(option.descriptionTranslationKey, option.descriptionDefault)}
+                    </MenuItemDescription>
+                  </MenuItemText>
+                </MenuItemContent>
+              </DropdownMenuItem>
+            );
+          })}
+        </DropdownMenu>
+      </Dropdown>
+    </ConnectMCPButtonWrapper>
+  );
+}
+
+const ConnectMCPButtonWrapper = styled.div`
+  display: inline-block;
+  position: relative;
+`;
+
+const StyledButton = styled(Button)`
+  --button-gap: var(--connect-mcp-button-gap);
+`;
+
+const MenuItemContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--connect-mcp-button-menu-item-gap);
+  padding: var(--connect-mcp-button-menu-item-padding-block)
+    var(--connect-mcp-button-menu-item-padding-inline);
+`;
+
+const MenuItemIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--connect-mcp-button-menu-item-icon-size);
+  height: var(--connect-mcp-button-menu-item-icon-size);
+  flex-shrink: 0;
+  border: var(--connect-mcp-button-menu-item-icon-border);
+  border-radius: var(--connect-mcp-button-menu-item-icon-border-radius);
+  color: var(--connect-mcp-button-menu-item-icon-color);
+`;
+
+const MenuItemText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--connect-mcp-button-menu-item-text-gap);
+  flex: 1;
+`;
+
+const MenuItemTitle = styled.div`
+  font-size: var(--connect-mcp-button-menu-item-title-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-title-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-title-line-height);
+  color: var(--connect-mcp-button-menu-item-title-color);
+`;
+
+const MenuItemDescription = styled.div`
+  font-size: var(--connect-mcp-button-menu-item-description-font-size);
+  font-weight: var(--connect-mcp-button-menu-item-description-font-weight);
+  line-height: var(--connect-mcp-button-menu-item-description-line-height);
+  color: var(--connect-mcp-button-menu-item-description-color);
+`;

package/src/components/Buttons/variables.ts

@@ -21,7 +21,7 @@ export const aiAssistantButton = css`
   /* Positioning */
   --ai-assistant-button-bottom: var(--spacing-xl);
   --ai-assistant-button-right: var(--spacing-xl);
-  --ai-assistant-button-z-index: 1000;
+  --ai-assistant-button-z-index: 50
 
   /* Typography */
   --ai-assistant-button-font-size: var(--font-size-base);
@@ -46,3 +46,44 @@ export const aiAssistantButton = css`
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
 `;
+
+export const connectMCPButton = css`
+  /**
+   * @tokens Connect MCP Button
+   * @presenter Color
+   */
+
+  /* Button gap */
+  --connect-mcp-button-gap: var(--spacing-xs);
+
+  /* Menu item layout */
+  --connect-mcp-button-menu-item-gap: var(--spacing-sm);
+  --connect-mcp-button-menu-item-padding-block: var(--spacing-xxs);
+  --connect-mcp-button-menu-item-padding-inline: 0;
+
+  /* Menu item icon */
+  --connect-mcp-button-menu-item-icon-size: 32px;
+  --connect-mcp-button-menu-item-icon-border-color: var(--border-color-secondary);
+  --connect-mcp-button-menu-item-icon-border-style: solid;
+  --connect-mcp-button-menu-item-icon-border-width: 1px;
+  --connect-mcp-button-menu-item-icon-border: var(--connect-mcp-button-menu-item-icon-border-width)
+    var(--connect-mcp-button-menu-item-icon-border-style)
+    var(--connect-mcp-button-menu-item-icon-border-color);
+  --connect-mcp-button-menu-item-icon-border-radius: var(--border-radius);
+  --connect-mcp-button-menu-item-icon-color: var(--icon-color-secondary);
+
+  /* Menu item text */
+  --connect-mcp-button-menu-item-text-gap: var(--spacing-xxs);
+
+  /* Menu item title */
+  --connect-mcp-button-menu-item-title-font-size: var(--font-size-base);
+  --connect-mcp-button-menu-item-title-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-title-line-height: var(--line-height-base);
+  --connect-mcp-button-menu-item-title-color: var(--text-color-secondary);
+
+  /* Menu item description */
+  --connect-mcp-button-menu-item-description-font-size: var(--font-size-sm);
+  --connect-mcp-button-menu-item-description-font-weight: var(--font-weight-regular);
+  --connect-mcp-button-menu-item-description-line-height: var(--line-height-sm);
+  --connect-mcp-button-menu-item-description-color: var(--text-color-description);
+`;

package/src/components/Catalog/CatalogEntity/CatalogEntityInfoBar.tsx

@@ -41,6 +41,7 @@ const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
   transition: all 0.2s ease-in-out;
   height: 100%;
   padding: var(--catalog-card-gap);
+  margin-bottom: var(--spacing-xs);
 
   ${({ hoverEffect }) =>
     hoverEffect &&

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/Catalog/CatalogEntityIcon.tsx

@@ -11,6 +11,7 @@ import { HierarchyIcon } from '@redocly/theme/icons/HierarchyIcon/HierarchyIcon'
 import { Image } from '@redocly/theme/components/Image/Image';
 import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
 import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
+import { CubeIcon } from '@redocly/theme/icons/CubeIcon/CubeIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
@@ -59,7 +60,7 @@ const getEntityIcon = ({
     );
   }
 
-  return <CodeIcon color="var(--catalog-entity-icon-color)" />; // @TODO: add default icon
+  return <CubeIcon color="var(--catalog-entity-icon-color)" />;
 };
 
 export function CatalogEntityIcon({

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

@@ -26,6 +26,11 @@ export function CatalogFilter({
 }: CatalogFilterProps): JSX.Element | null {
   if (!filter.parentUsed) return null;
 
+  const filteredOptions = filter.filteredOptions || filter.options;
+  if (!filteredOptions || filteredOptions.length === 0) {
+    return null;
+  }
+
   const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
 
   return (

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -23,11 +23,7 @@ export function CatalogTagsWithTooltip({
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          <Tag
-            variant="outline"
-            style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }}
-            color="grey"
-          >
+          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
             N/A
           </Tag>
         </CatalogTagsWrapper>

package/src/components/Catalog/variables.ts

@@ -97,7 +97,7 @@ export const catalog = css`
   /**
     * @tokens Catalog entity icon
     */
-  --catalog-entity-icon-color: var(--color-primary-base);
+  --catalog-entity-icon-color: var(--color-persian-green-8);
   --catalog-entity-border-color: var(--border-color-secondary);
   --catalog-entity-bg-color: var(--bg-color-tonal);
 

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/Navbar/NavbarItem.tsx

@@ -34,12 +34,13 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
   if (navItem.type !== 'link' && !navItem.items) return null;
 
   const item = navItem as ResolvedNavLinkItem;
-  const normalizedPath =
-    (item.link && item.link !== '/' ? removeTrailingSlash(item.link) : item.link) || '';
+  const normalizedPath = (item.link ? removeTrailingSlash(item.link) : item.link) || '';
 
-  const isActive =
-    pathname ===
-    withPathPrefix(getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales));
+  const pathWithPathPrefix = withPathPrefix(
+    getPathnameForLocale(normalizedPath, defaultLocale, currentLocale, locales),
+  );
+
+  const isActive = removeTrailingSlash(pathname) === removeTrailingSlash(pathWithPathPrefix);
 
   const itemContent = (
     <NavbarMenuItem

package/src/components/PageActions/PageActions.tsx

@@ -77,7 +77,7 @@ export function PageActions(props: PageActionProps): JSX.Element | null {
         </Button>
         {actions.length > 1 ? (
           <Dropdown withArrow trigger={<Button />} placement="bottom" alignment="end">
-            <DropdownMenu items={menuItems} />
+            <StyledDropdownMenu items={menuItems} />
           </Dropdown>
         ) : null}
       </ButtonGroup>
@@ -110,3 +110,7 @@ const LinkMenuItem = styled(Link)`
   text-decoration: none;
   --link-decoration-hover: none;
 `;
+
+const StyledDropdownMenu = styled(DropdownMenu)`
+  --dropdown-menu-max-height: var(--page-actions-dropdown-max-height);
+`;

package/src/components/PageActions/variables.ts

@@ -7,6 +7,8 @@ export const pageActions = css`
   --page-actions-button-text-color: var(--text-color-secondary);
   --page-actions-button-padding: 5px 14px 5px var(--spacing-sm);
 
+  --page-actions-dropdown-max-height: fit-content;
+
   --page-actions-menu-item-padding: 3px 0;
   --page-actions-menu-item-gap: var(--spacing-xs);
   --page-actions-menu-item-icon-color: var(--icon-color-secondary);

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
 
-import { Tag, type TagProps } from '@redocly/theme/components/Tag/Tag';
+import { Tag } from '@redocly/theme/components/Tag/Tag';
 
 type SearchFilterFieldTagsProps = {
   className?: string;
@@ -47,6 +47,7 @@ export function SearchFilterFieldTags({
             }}
             active={active}
             borderless
+            selectable
           >
             {value} {isCounterVisible && <span>{count}</span>}
           </FilterTagWrapper>
@@ -62,9 +63,8 @@ const FilterTagsWrapper = styled.div`
   gap: var(--search-filter-field-tags-gap);
 `;
 
-const FilterTagWrapper = styled(Tag)<{ color: TagProps['color'] }>`
+const FilterTagWrapper = styled(Tag)`
   text-transform: uppercase;
   cursor: pointer;
-  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
   margin: var(--search-filter-field-tags-tag-margin);
 `;

package/src/components/Search/SearchAiActionButtons.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { FeedbackType } from '@redocly/theme/core/types';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { ThumbUpIcon } from '@redocly/theme/icons/ThumbUpIcon/ThumbUpIcon';
+import { ThumbUpFilledIcon } from '@redocly/theme/icons/ThumbUpFilledIcon/ThumbUpFilledIcon';
+import { ThumbDownIcon } from '@redocly/theme/icons/ThumbDownIcon/ThumbDownIcon';
+import { ThumbDownFilledIcon } from '@redocly/theme/icons/ThumbDownFilledIcon/ThumbDownFilledIcon';
+import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+
+export type SearchAiActionButtonsProps = {
+  content: string;
+  className?: string;
+  feedback?: FeedbackType;
+  onFeedback: (feedback: FeedbackType) => void;
+  disabled?: boolean;
+};
+
+export function SearchAiActionButtons({
+  content,
+  className,
+  feedback,
+  onFeedback,
+  disabled,
+}: SearchAiActionButtonsProps): JSX.Element {
+  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}
+      />
+
+      <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}
+      />
+    </ActionButtonsWrapper>
+  );
+}
+
+const ActionButtonsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--search-ai-feedback-gap);
+`;
+
+const FeedbackButton = styled(Button)`
+  &:disabled {
+    pointer-events: none;
+    cursor: default;
+    opacity: 1;
+    background-color: var(--button-bg-color);
+    color: var(--button-color);
+    border-color: var(--button-border-color);
+  }
+
+  &:disabled.active {
+    background-color: var(--button-bg-color-active);
+    border-color: var(--button-border-color-active);
+    color: var(--button-color-active);
+  }
+`;