@redocly/theme 0.60.0-next.1 → 0.60.0-next.3

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

@@ -4,14 +4,16 @@ import * as Sampler from 'openapi-sampler';
 
 import { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { useCatalogEntitySchema } from '@redocly/theme/core/hooks/catalog/useCatalogEntitySchema';
+import { useCatalogEntitySchema } from '@redocly/theme/core/hooks';
 import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
 
 export type CatalogEntitySchemaProps = {
   entity: BffCatalogEntity;
   relatedEntity: BffCatalogRelatedEntity | null;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   RedocSchema: React.ComponentType<any>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   StoreProvider: React.ComponentType<any>;
   GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
 };

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

@@ -52,7 +52,7 @@ export function CatalogFilterDateRange({
         <FilterOptions>
           <DateRangeWrapper>
             <DateRangeRow>
-              <span>From:</span>
+              <span>{translate('filter.dateRange.from', 'From:')}</span>
               <DatePicker
                 closeCalendar={true}
                 format="y-MM-dd"
@@ -72,7 +72,7 @@ export function CatalogFilterDateRange({
               />
             </DateRangeRow>
             <DateRangeRow>
-              <span>To:</span>
+              <span>{translate('filter.dateRange.to', 'To:')}</span>
               <DatePicker
                 closeCalendar={true}
                 dayPlaceholder="DD"

package/src/components/Catalog/CatalogSelector.tsx

@@ -20,8 +20,8 @@ export function CatalogSelector({
   setSortOption,
 }: CatalogSelectorProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
-
   const { translate } = useTranslate();
+
   const navigate = useNavigate();
   const pathPrefix = getPathPrefix();
 
@@ -35,7 +35,7 @@ export function CatalogSelector({
 
   return (
     <CatalogSelectWrapper data-component-name="Catalog/CatalogSelector">
-      <CatalogSelectLabel>Catalogs</CatalogSelectLabel>
+      <CatalogSelectLabel>{translate('catalog.catalogs.label', 'Catalogs')}</CatalogSelectLabel>
       <CatalogSelect
         value={selectedCatalogItem?.slug}
         options={options}

package/src/components/Catalog/CatalogSortButton.tsx

@@ -7,6 +7,7 @@ import { DescSortIcon } from '@redocly/theme/icons/DescSortIcon/DescSortIcon';
 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 { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogSortButtonProps = {
   onSortChange: (sortOption: SortOption | null) => void;
@@ -20,6 +21,9 @@ export function CatalogSortButton({
   onSortChange: (sortOption: SortOption | null) => void;
   currentSort?: SortOption | null;
 }) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const toggleSort = useCallback(
     (field: string): void => {
       const newSort = currentSort === `-${field}` ? field : `-${field}`;
@@ -36,7 +40,7 @@ export function CatalogSortButton({
             <SortIconWrapper>
               {currentSort === '-title' ? <DescSortIcon /> : <AscSortIcon />}
             </SortIconWrapper>
-            <SortText>Sort</SortText>
+            <SortText>{translate('catalog.sort', 'Sort')}</SortText>
           </SortTrigger>
         }
         alignment="end"

package/src/components/Catalog/CatalogTableView/CatalogTableHeaderCell.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { SortOption } from '@redocly/theme/core/types';
 import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
 import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
-import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks/catalog/useCatalogTableHeaderCellActions';
+import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks';
 import {
   BaseEntity,
   CatalogColumn,

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -7,7 +7,7 @@ import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTabl
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
-import { useCatalogTableViewRow } from '@redocly/theme/core/hooks/catalog/useCatalogTableViewRow';
+import { useCatalogTableViewRow } from '@redocly/theme/core/hooks';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 
 import { Link } from '../../Link/Link';

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -5,6 +5,7 @@ import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
 import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogTagsWithTooltipProps = {
   items: string[];
@@ -19,10 +20,14 @@ export function CatalogTagsWithTooltip({
   showPlaceholder = true,
   tagProps,
 }: CatalogTagsWithTooltipProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   if (!items || items.length === 0) {
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
+          {/* eslint-disable-next-line theme/require-translate */}
           <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
             N/A
           </Tag>
@@ -61,7 +66,9 @@ export function CatalogTagsWithTooltip({
           </Tag>
         ))}
 
-        <MoreTagsButton>+{remainingCount} more</MoreTagsButton>
+        <MoreTagsButton>
+          +{remainingCount} {translate('catalog.tags.more', 'more')}
+        </MoreTagsButton>
       </CatalogTagsWrapper>
     </TooltipComponent>
   );

package/src/components/Catalog/variables.dark.ts

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
 
 export const catalogDarkMode = css`
-  --catalog-avatar-bg-color: #3b3c45;
+  --catalog-avatar-bg-color: var(--color-warm-grey-4);
 `;

package/src/components/Catalog/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const catalog = css`
   /* === Catalog === */
   /**
@@ -284,7 +285,7 @@ export const catalog = css`
   --catalog-page-badge-line-height: var(--line-height-base);
 
   --catalog-page-badge-dot-size: 6px;
-  --catalog-page-badge-dot-border-color: #ffffff;
+  --catalog-page-badge-dot-border-color: var(--color-static-white);
 
   /**
     * @tokens Catalog table
@@ -405,8 +406,8 @@ export const catalog = css`
   --catalog-entity-relations-node-font-weight-root: 600;
 
   --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
-  --catalog-entity-relations-node-root-text-color: #ffffff;
-  --catalog-entity-relations-node-root-icon-color: #ffffff;
+  --catalog-entity-relations-node-root-text-color: var(--color-static-white);
+  --catalog-entity-relations-node-root-icon-color: var(--color-static-white);
   // @tokens End
 
   /**
@@ -427,3 +428,4 @@ export const catalog = css`
   --catalog-entity-relations-edge-label-line-height: 1.2;
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -13,6 +13,7 @@ export type CatalogClassicInfoBlockProps = {
     scorecardLevel?: string;
     scoreCardSlug?: string;
     scorecardLevelIdx?: number;
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     scorecardLevels?: Record<string, any>;
 
     [key: string]: unknown;

package/src/components/CatalogClassic/variables.ts

@@ -100,7 +100,7 @@ export const catalogClassic = css`
   --catalog-classic-page-badge-line-height: var(--line-height-base);
 
   --catalog-classic-page-badge-dot-size: 6px;
-  --catalog-classic-page-badge-dot-border-color: #ffffff;
+  --catalog-classic-page-badge-dot-border-color: var(--color-static-white);
 
   // @tokens End
 `;

package/src/components/CodeBlock/CodeBlock.tsx

@@ -46,8 +46,11 @@ export type CodeBlockItems = {
 type ExternalSource = {
   sample: UnstableExternalCodeSample;
   exampleName?: string;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   pathParams?: any;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   properties?: any;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   operation?: any;
 };
 
@@ -128,6 +131,7 @@ export function CodeBlock({
                 }
               : undefined
           }
+          /* eslint-disable-next-line no-warning-comments */
           suppressHydrationWarning // TODO: investigate issue
           data-testid={dataTestId}
           hideCodeColors={hideCodeColors}

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -39,6 +39,7 @@ type ControlProps = {
   label?: string;
   tooltipText?: string;
   onClick?: () => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   props?: Record<string, any>;
 };
 

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -8,7 +8,7 @@ import { useCodeBlockTabsControls } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
-import { getFileIconByExt, getFileIconByLanguage } from '@redocly/theme/core/utils/get-file-icon';
+import { getFileIconByExt, getFileIconByLanguage } from '@redocly/theme/core/utils';
 
 export type CodeBlockTabsProps = {
   tabs: CodeBlockItems;

package/src/components/DatePicker/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const datePicker = css`
   --date-picker-nav-color: #000000;
   --date-picker-tile-bg-color: var(--color-blue-2);
@@ -18,4 +19,5 @@ export const datePicker = css`
   --date-picker-wrapper-border-color: var(--border-color-primary);
   --date-picker-wrapper-radius: var(--border-radius-md);
   --date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
-`
+`;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/Feedback/Mood.tsx

@@ -269,10 +269,10 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelMoodForm} variant="text" size="small">
-              Cancel
+              {translate('feedback.cancel', 'Cancel')}
             </Button>
             <Button type="submit" variant="secondary" size="small">
-              Submit
+              {translate('feedback.submit', 'Submit')}
             </Button>
           </ButtonsContainer>
         )}

package/src/components/Feedback/Rating.tsx

@@ -182,10 +182,10 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelRatingForm} variant="text" size="small">
-              Cancel
+              {translate('feedback.cancel', 'Cancel')}
             </Button>
             <Button onClick={onSubmitRatingForm} variant="secondary" size="small">
-              Submit
+              {translate('feedback.submit', 'Submit')}
             </Button>
           </ButtonsContainer>
         )}

package/src/components/Filter/FilterDateRange.tsx

@@ -25,7 +25,7 @@ export function FilterDateRange({ filter }: FilterProps): JSX.Element {
       <FilterOptions>
         <DateRangeWrapper>
           <DateRangeRow>
-            <span>From:</span>
+            <span>{translate('filter.dateRange.from', 'From:')}</span>
             <DatePicker
               closeCalendar={true}
               format="y-MM-dd"
@@ -45,7 +45,7 @@ export function FilterDateRange({ filter }: FilterProps): JSX.Element {
             />
           </DateRangeRow>
           <DateRangeRow>
-            <span>To:</span>
+            <span>{translate('filter.dateRange.to', 'To:')}</span>
             <DatePicker
               closeCalendar={true}
               dayPlaceholder="DD"

package/src/components/Filter/FilterSelect.tsx

@@ -55,6 +55,7 @@ export function FilterSelect({
         {translate(filter.titleTranslationKey, filter.title)}
       </FilterTitle>
       <StyledSelect
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
         onChange={(value) => filter.selectOption(value)}
         options={selectOptions}

package/src/components/JsonViewer/{helpers.tsx → Helpers.tsx}

@@ -7,6 +7,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
 export function JsonValue(props: {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
   standalone?: boolean; // if true, will render the opening and closing punctuation (when it's an item inside array or top-level)
@@ -103,6 +104,7 @@ export function JsonValue(props: {
 
 function JsonKeyValue(props: {
   name: string;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
   defaultExpandLevel: number;

package/src/components/JsonViewer/JsonViewer.tsx

@@ -6,13 +6,14 @@ import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
-import { JsonValue } from './helpers';
+import { JsonValue } from './Helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 
 export type JsonProps = {
   title?: CodeBlockControlsProps['title'];
   controls?: CodeBlockControlsProps['controls'];
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   data: any;
   className?: string;
   expandLevel: number;

package/src/components/LastUpdated/LastUpdated.tsx

@@ -63,6 +63,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
       data-print-datetime={isoDate}
       data-translation-key={translationKey}
     >
+      {/* eslint-disable-next-line no-warning-comments */}
       {text} {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </LastUpdatedWrapper>

package/src/components/Loaders/Loading.tsx

@@ -5,6 +5,7 @@ import type { JSX } from 'react';
 
 import { getCssColorVariable } from '@redocly/theme/core/utils';
 import { Spinner } from '@redocly/theme/icons/Spinner/Spinner';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 const LoadingMessage = styled.div<{ color: string }>`
   font-family: helvetica, sans, sans-serif;
@@ -20,9 +21,12 @@ export type LoadingProps = {
 };
 
 export function Loading({ color }: LoadingProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div style={{ textAlign: 'center' }}>
-      <LoadingMessage color={color}>Loading ...</LoadingMessage>
+      <LoadingMessage color={color}>{translate('loaders.loading', 'Loading...')}</LoadingMessage>
       <Spinner color={color} />
     </div>
   );

package/src/components/Markdown/Markdown.tsx

@@ -3,9 +3,9 @@ import styled, { css } from 'styled-components';
 import type { PropsWithChildren } from 'react';
 
 import { typography } from '@redocly/theme/core/utils';
-import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/baseTable';
+import { markdownBaseTableCss } from '@redocly/theme/components/Markdown/styles/base-table';
 import { markdownLinksCss } from '@redocly/theme/components/Markdown/styles/links';
-import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/headingAnchor';
+import { headingAnchorCss } from '@redocly/theme/components/Markdown/styles/heading-anchor';
 
 export type MarkdownProps = PropsWithChildren<{
   className?: string;

package/src/components/Menu/MenuItem.tsx

@@ -11,7 +11,7 @@ import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDow
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
 import { MenuItemType } from '@redocly/theme/core/constants';
-import { getMenuItemType } from '@redocly/theme/core/utils';
+import { getMenuItemType, getOperationColor } from '@redocly/theme/core/utils';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { Badge } from '@redocly/theme/components/Badge/Badge';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
@@ -67,7 +67,11 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
     )
   ) : null;
 
-  const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
+  const httpColor = getOperationColor({
+    isAdditionalOperation: item.isAdditionalOperation,
+    deprecated: item.deprecated,
+    httpVerb: item.httpVerb || '',
+  });
 
   const label = item.label && (
     <MenuItemLabelWrapper

package/src/components/OpenApiDocs/hooks/AfterOpenApiOperation.tsx

@@ -5,5 +5,5 @@
 // export function AfterOpenApiOperation(_props: AfterOpenAPIOperationProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/AfterOpenApiTitle.tsx

@@ -5,5 +5,5 @@
 // export function AfterOpenApiTitle(_props: AfterOpenApiTitleProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const AfterOpenApiTitle: any = null;

package/src/components/OpenApiDocs/hooks/BeforeOpenApiOperation.tsx

@@ -5,5 +5,5 @@
 // export function BeforeOpenApiOperation(_props: BeforeOpenAPIOperationProps) {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const BeforeOpenApiOperation: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiFooter.tsx

@@ -1,5 +1,5 @@
 // export function OpenApiFooter() {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const OpenApiFooter: any = null;

package/src/components/OpenApiDocs/hooks/OpenApiHeader.tsx

@@ -1,5 +1,5 @@
 // export function OpenApiHeader() {
 //   return null;
 // }
-
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 export const OpenApiHeader: any = null;

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

@@ -27,6 +27,7 @@ export function SearchFilterFieldSelect({
   const { useFacetQuery, useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const [selectOptions, setSelectOptions] = useState<any[]>([]);
   const isMultiple = facet.type === 'multi-select';
 
@@ -101,7 +102,9 @@ export function SearchFilterFieldSelect({
       searchable={true}
       footer={
         selectOptions.length === MAX_SELECT_OPTIONS ? (
-          <FilterSelectFooter>Search to show more items...</FilterSelectFooter>
+          <FilterSelectFooter>
+            {translate('search.filter.field.footer', 'Search to show more items...')}
+          </FilterSelectFooter>
         ) : null
       }
       onSearch={onSearch}

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

@@ -4,6 +4,8 @@ import styled from 'styled-components';
 import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
 
 import { Tag } from '@redocly/theme/components/Tag/Tag';
+import { getOperationColor } from '@redocly/theme/core/utils';
+import { REQUEST_METHODS } from '@redocly/theme/core/constants';
 
 type SearchFilterFieldTagsProps = {
   className?: string;
@@ -32,11 +34,15 @@ export function SearchFilterFieldTags({
             : [...selectedValues, value];
           onChange(values);
         };
+        const color = getOperationColor({
+          httpVerb: value,
+          isAdditionalOperation: !REQUEST_METHODS.includes(value.toUpperCase()),
+        });
         return (
           <FilterTagWrapper
             key={`${count}-${index}`}
             tabIndex={0}
-            color={value}
+            color={color}
             onClick={() => {
               updateSelectedValues();
             }}

package/src/components/Search/SearchAiMessage.tsx

@@ -95,9 +95,9 @@ function SearchAiMessageComponent({
         />
       )}
       <MessageContentWrapper>
-        <MessageWrapper role={role}>
-          {role === AiSearchConversationRole.ASSISTANT ? (
-            <>
+        {role === AiSearchConversationRole.ASSISTANT ? (
+          <>
+            <MessageWrapper role={role}>
               <ResponseText as="div" children={markDownContent} data-testid="response-text" />
               {hasResources && (
                 <>
@@ -119,42 +119,47 @@ function SearchAiMessageComponent({
                       ))}
                     </ResourceTagsWrapper>
                   </ResourcesWrapper>
-                  <FeedbackWrapper>
-                    <SearchAiActionButtons
-                      content={content}
-                      feedback={feedback}
-                      onFeedback={handleFeedbackClick}
-                      disabled={feedbackSent}
-                    />
-                  </FeedbackWrapper>
                 </>
               )}
-            </>
-          ) : (
-            content
-          )}
-          {isThinking && content.length === 0 && (
-            <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
-              <ThinkingDot />
-              <ThinkingDot />
-              <ThinkingDot />
-            </ThinkingDotsWrapper>
-          )}
-        </MessageWrapper>
-        {messageId && feedback === FeedbackType.Dislike && !showSuccessMessage && (
-          <SearchAiNegativeFeedbackForm
-            messageId={messageId}
-            onClose={onFeedbackChange}
-            onSubmit={(reason) => handleFeedbackClick(FeedbackType.Dislike, reason)}
-          />
-        )}
-        {showSuccessMessage && (
-          <SuccessMessageWrapper data-component-name="Search/SearchAiMessage/Success">
-            <CheckmarkOutlineIcon size="20px" color="var(--color-success-base)" />
-            <SuccessMessageText>
-              {translate('search.ai.feedback.thanks', 'Thank you for your feedback!')}
-            </SuccessMessageText>
-          </SuccessMessageWrapper>
+              {isThinking && content.length === 0 && (
+                <ThinkingDotsWrapper data-testid="thinking-dots-wrapper">
+                  <ThinkingDot />
+                  <ThinkingDot />
+                  <ThinkingDot />
+                </ThinkingDotsWrapper>
+              )}
+              {content.length > 0 && (
+                <FeedbackWrapper>
+                  <SearchAiActionButtons
+                    content={content}
+                    feedback={feedback}
+                    onFeedback={handleFeedbackClick}
+                    disabled={!!feedback}
+                  />
+                </FeedbackWrapper>
+              )}
+            </MessageWrapper>
+            {messageId && feedback === FeedbackType.Dislike && !showSuccessMessage && (
+              <SearchAiNegativeFeedbackForm
+                messageId={messageId}
+                onClose={(messageId: string, feedback: FeedbackType) => {
+                  onFeedbackChange(messageId, feedback);
+                  setFeedbackSent(true);
+                }}
+                onSubmit={(reason) => handleFeedbackClick(FeedbackType.Dislike, reason)}
+              />
+            )}
+            {showSuccessMessage && (
+              <SuccessMessageWrapper data-component-name="Search/SearchAiMessage/Success">
+                <CheckmarkOutlineIcon size="20px" color="var(--color-success-base)" />
+                <SuccessMessageText>
+                  {translate('search.ai.feedback.thanks', 'Thank you for your feedback!')}
+                </SuccessMessageText>
+              </SuccessMessageWrapper>
+            )}
+          </>
+        ) : (
+          <MessageWrapper role={role}>{content}</MessageWrapper>
         )}
       </MessageContentWrapper>
     </SearchAiMessageWrapper>