@redocly/theme 0.59.0-next.7 → 0.59.0-next.9

package/lib/components/Search/variables.js

@@ -146,27 +146,24 @@ exports.search = (0, styled_components_1.css) `
   /**
   * @tokens AI Search
   */
-  
+
   --search-ai-gradient: linear-gradient(to right, #715efe, #ff5cdc);
 
-  --search-ai-spinner-icon-color: var(--icon-color-interactive);
-  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
   --search-ai-response-padding: var(--spacing-lg);
   --search-ai-response-gap: var(--spacing-sm);
-
   --search-ai-response-header-gap: var(--spacing-md);
+  --search-ai-response-body-gap: var(--spacing-xl);
+  --search-ai-response-body-padding: 0 40px;
 
   --search-ai-question-font-size: var(--font-size-xl);
   --search-ai-question-font-weight: var(--font-weight-semibold);
   --search-ai-question-line-height: var(--line-height-xl);
   --search-ai-question-text-color: var(--text-color-primary);
 
-  --search-ai-response-body-gap: var(--spacing-xl);
-  --search-ai-response-body-padding: 0 40px;
-
   --search-ai-text-color: var(--text-color-secondary);
   --search-ai-text-font-size: var(--font-size-lg);
   --search-ai-text-line-height: var(--line-height-lg);
+  --search-ai-thinking-text-margin: var(--md-pre-margin) 0;
 
   --search-ai-user-bg-color: var(--color-blue-6);
   --search-ai-user-text-color: var(--color-static-white);
@@ -175,40 +172,50 @@ exports.search = (0, styled_components_1.css) `
   --search-ai-assistant-border: 1px solid var(--border-color-primary);
   --search-ai-assistant-message-max-width: 80%;
 
-  --search-ai-resources-gap: var(--spacing-base);
+  --search-ai-icon-size: 32px;
+  --search-ai-icon-bg-color: var(--search-ai-gradient);
+  --search-ai-icon-color: var(--color-static-white);
+  --search-ai-icon-wrapper-padding: var(--spacing-xs);
+
+  --search-ai-resources-gap: var(--spacing-xxs);
   --search-ai-resources-title-font-weight: var(--font-weight-medium);
   --search-ai-resources-title-font-size: var(--font-size-lg);
   --search-ai-resources-title-line-height: var(--line-height-lg);
 
-  --search-ai-resource-tags-gap: var(--spacing-base);
+  --search-ai-resource-tags-gap: var(--spacing-xxs);
   --search-ai-resource-tag-text-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-color: var(--text-color-secondary);
   --search-ai-resource-tag-icon-size: 16px;
 
-  --search-ai-icon-size: 32px;
-  --search-ai-icon-bg-color: var(--search-ai-gradient);
-  --search-ai-icon-color: var(--color-static-white);
-
-  --search-ai-button-icon-color: none;
+  --search-ai-suggestions-gap: var(--spacing-sm);
+  --search-ai-suggestions-margin-left: var(--spacing-xs);
+  --search-ai-suggestion-item-gap: var(--spacing-xxs);
+  --search-ai-suggestions-title-text-color: var(--text-color-description);
+  --search-ai-suggestions-title-font-size: var(--font-size-base);
+  --search-ai-suggestions-title-line-height: var(--line-height-base);
+  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
+  --search-ai-suggestions-text-color: var(--text-color-description);
 
   --search-ai-thinking-dots-gap: 4px;
   --search-ai-thinking-dots-padding: 4px 0;
   --search-ai-thinking-dot-size: 6px;
   --search-ai-thinking-dot-color: var(--search-ai-gradient);
 
+  --search-ai-spinner-icon-color: var(--icon-color-interactive);
+  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+
+  --search-ai-feedback-gap: var(--spacing-xxs);
+
+  --search-ai-feedback-form-bg-color: var(--background-color-secondary);
+  --search-ai-feedback-form-border-color: var(--border-color-primary);
+
   --search-ai-disclaimer-font-size: var(--font-size-sm);
   --search-ai-disclaimer-line-height: var(--line-height-sm);
   --search-ai-disclaimer-text-color: var(--text-color-secondary);
 
-
   --search-ai-welcome-margin: var(--spacing-md);
-  --search-ai-icon-wrapper-padding: var(--spacing-xs);
 
-  --search-ai-suggestions-title-text-color: var(--text-color-description);
-  --search-ai-suggestions-title-font-size: var(--font-size-base);
-  --search-ai-suggestions-title-line-height: var(--line-height-base);
-  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
-  --search-ai-suggestions-text-color: var(--text-color-description);
+  --search-ai-button-icon-color: none;
 
   --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
   --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
@@ -246,52 +253,8 @@ exports.search = (0, styled_components_1.css) `
 
   --search-ai-conversation-input-send-button-right: 12px;
   --search-ai-conversation-input-send-button-padding: 5px;
-  --search-ai-conversation-input-send-button-bg-color: var(--button-bg-color-primary);
-  --search-ai-conversation-input-send-button-bg-color-hover: var(--button-bg-color-primary-hover);
-  --search-ai-conversation-input-send-button-bg-color-disabled: var(--button-bg-color-disabled);
-  --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
   --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
-
-  /**
-  * @tokens AI Search Response
-  */
-  --search-ai-response-padding: var(--spacing-lg);
-  --search-ai-response-gap: var(--spacing-sm);
-  --search-ai-response-header-gap: var(--spacing-md);
-  --search-ai-response-body-gap: var(--spacing-xl);
-  --search-ai-response-body-padding: 0 40px;
-
-  --search-ai-text-color: var(--text-color-secondary);
-  --search-ai-text-font-size: var(--font-size-lg);
-  --search-ai-text-line-height: var(--line-height-lg);
-
-  --search-ai-thinking-text-margin: var(--md-pre-margin) 0;
-
-  --search-ai-question-font-size: var(--font-size-xl);
-  --search-ai-question-font-weight: var(--font-weight-semibold);
-  --search-ai-question-line-height: var(--line-height-xl);
-  --search-ai-question-text-color: var(--text-color-primary);
-
-  --search-ai-resources-gap: var(--spacing-base);
-  --search-ai-resources-title-font-weight: var(--font-weight-medium);
-  --search-ai-resources-title-font-size: var(--font-size-lg);
-  --search-ai-resources-title-line-height: var(--line-height-lg);
-
-  --search-ai-resource-tags-gap: var(--spacing-base);
-  --search-ai-resource-tag-text-color: var(--text-color-secondary);
-  --search-ai-resource-tag-icon-color: var(--text-color-secondary);
-
-  --search-ai-suggestions-gap: var(--spacing-sm);
-  --search-ai-suggestions-margin-left: var(--spacing-xs);
-  --search-ai-suggestion-item-gap: var(--spacing-xxs);
-
-  --search-ai-suggestions-title-text-color: var(--text-color-description);
-  --search-ai-suggestions-title-font-size: var(--font-size-base);
-  --search-ai-suggestions-title-line-height: var(--line-height-base);
-  --search-ai-suggestions-title-font-weight: var(--font-weight-light);
-
-  --search-ai-spinner-icon-color: var(--icon-color-interactive);
-  --search-ai-checkmark-icon-color: var(--icon-color-interactive);
+  --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
 
   // @tokens End
 `;

package/lib/core/hooks/index.d.ts

@@ -26,6 +26,7 @@ export * from './use-language-picker';
 export * from './use-product-picker';
 export * from './search/use-search-dialog';
 export * from './search/use-search-filter';
+export * from './search/use-feedback-tooltip';
 export * from './use-controlled-state';
 export * from './use-codeblock-tabs-controls';
 export * from './code-walkthrough/use-code-walkthrough';

package/lib/core/hooks/index.js

@@ -42,6 +42,7 @@ __exportStar(require("./use-language-picker"), exports);
 __exportStar(require("./use-product-picker"), exports);
 __exportStar(require("./search/use-search-dialog"), exports);
 __exportStar(require("./search/use-search-filter"), exports);
+__exportStar(require("./search/use-feedback-tooltip"), exports);
 __exportStar(require("./use-controlled-state"), exports);
 __exportStar(require("./use-codeblock-tabs-controls"), exports);
 __exportStar(require("./code-walkthrough/use-code-walkthrough"), exports);

package/lib/core/hooks/search/use-feedback-tooltip.d.ts

@@ -0,0 +1,6 @@
+type UseFeedbackTooltipReturn = {
+    isOpen: boolean;
+    showTooltip: () => void;
+};
+export declare function useFeedbackTooltip(): UseFeedbackTooltipReturn;
+export {};

package/lib/core/hooks/search/use-feedback-tooltip.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFeedbackTooltip = useFeedbackTooltip;
+const react_1 = require("react");
+const use_control_1 = require("../use-control");
+const DEFAULT_TOOLTIP_DURATION = 1500;
+function useFeedbackTooltip() {
+    const [closeTooltipTimeout, setCloseTooltipTimeout] = (0, react_1.useState)(null);
+    const tooltipControl = (0, use_control_1.useControl)();
+    const showTooltip = () => {
+        tooltipControl.handleOpen();
+        if (closeTooltipTimeout) {
+            clearTimeout(closeTooltipTimeout);
+        }
+        const newCloseTooltipTimeout = setTimeout(() => {
+            tooltipControl.handleClose();
+            setCloseTooltipTimeout(null);
+        }, DEFAULT_TOOLTIP_DURATION);
+        setCloseTooltipTimeout(newCloseTooltipTimeout);
+    };
+    return {
+        isOpen: tooltipControl.isOpened,
+        showTooltip,
+    };
+}
+//# sourceMappingURL=use-feedback-tooltip.js.map

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -38,6 +38,7 @@ export declare const useTelemetryFallback: () => {
     sendSearchQueryMessage: () => void;
     sendSearchAiOpenedMessage: () => void;
     sendSearchAIQueryMessage: () => void;
+    sendSearchAIFeedbackMessage: () => void;
     sendFeedbackMessage: () => void;
     sendSearchResultClickedMessage: () => void;
     sendRedirectMessage: () => void;

package/lib/core/hooks/use-telemetry-fallback.js

@@ -42,6 +42,7 @@ const useTelemetryFallback = () => ({
     sendSearchQueryMessage: () => { },
     sendSearchAiOpenedMessage: () => { },
     sendSearchAIQueryMessage: () => { },
+    sendSearchAIFeedbackMessage: () => { },
     sendFeedbackMessage: () => { },
     sendSearchResultClickedMessage: () => { },
     sendRedirectMessage: () => { },

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

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
 export type Locale = {
     code: string;
     name: string;

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

@@ -82,11 +82,18 @@ export type AiSearchErrorConfig = {
     messageKey: string;
     messageDefault: string;
 };
+export declare enum FeedbackType {
+    Like = "like",
+    Dislike = "dislike"
+}
+export type SearchAiMessageResource = {
+    url: string;
+    title: string;
+};
 export type AiSearchConversationItem = {
     role: AiSearchConversationRole;
     content: string;
-    resources?: {
-        url: string;
-        title: string;
-    }[];
+    resources?: SearchAiMessageResource[];
+    messageId?: string;
+    feedback?: FeedbackType;
 };

package/lib/core/types/search.js

@@ -1,3 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeedbackType = void 0;
+var FeedbackType;
+(function (FeedbackType) {
+    FeedbackType["Like"] = "like";
+    FeedbackType["Dislike"] = "dislike";
+})(FeedbackType || (exports.FeedbackType = FeedbackType = {}));
 //# sourceMappingURL=search.js.map

package/lib/core/utils/frontmatter-translate.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Utility function for use in React frontmatter
+ * This function creates a string that will be processed by the frontmatter loader
+ * to convert it into a translation key object
+ */
+export declare const frontmatterTranslate: (key: string, defaultValue: string) => string;

package/lib/core/utils/frontmatter-translate.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.frontmatterTranslate = void 0;
+/**
+ * Utility function for use in React frontmatter
+ * This function creates a string that will be processed by the frontmatter loader
+ * to convert it into a translation key object
+ */
+const frontmatterTranslate = (key, defaultValue) => {
+    const escapedDefaultValue = defaultValue.replace(/'/g, "\\'");
+    return `frontmatterTranslate('${key}', '${escapedDefaultValue}')`;
+};
+exports.frontmatterTranslate = frontmatterTranslate;
+//# sourceMappingURL=frontmatter-translate.js.map

package/lib/core/utils/index.d.ts

@@ -38,3 +38,4 @@ export * from './enhanced-smoothstep';
 export * from './icon-resolver';
 export * from './dynamic';
 export * from './tabs';
+export * from './frontmatter-translate';

package/lib/core/utils/index.js

@@ -54,4 +54,5 @@ __exportStar(require("./enhanced-smoothstep"), exports);
 __exportStar(require("./icon-resolver"), exports);
 __exportStar(require("./dynamic"), exports);
 __exportStar(require("./tabs"), exports);
+__exportStar(require("./frontmatter-translate"), exports);
 //# sourceMappingURL=index.js.map

package/lib/icons/ThumbDownFilledIcon/ThumbDownFilledIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ThumbDownFilledIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/ThumbDownFilledIcon/ThumbDownFilledIcon.js

@@ -0,0 +1,34 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThumbDownFilledIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => {
+    const { color } = props, restProps = __rest(props, ["color"]);
+    return (react_1.default.createElement("svg", Object.assign({ width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
+        react_1.default.createElement("path", { d: "M3.0625 0.875H0.875V7H3.0625V0.875Z", fill: (0, utils_1.getCssColorVariable)(color) || '#DCDDE5' }),
+        react_1.default.createElement("path", { d: "M10.0625 0.875H3.9375V7.35118L5.26846 9.34771L5.63828 11.9362C5.66886 12.1443 5.77308 12.3346 5.932 12.4725C6.09092 12.6103 6.29402 12.6866 6.5044 12.6875H6.5625C6.91048 12.6871 7.2441 12.5487 7.49016 12.3027C7.73621 12.0566 7.87462 11.723 7.875 11.375V8.75H11.375C11.839 8.74948 12.2838 8.56494 12.6119 8.23686C12.9399 7.90879 13.1245 7.46397 13.125 7V3.9375C13.1241 3.12555 12.8012 2.34712 12.227 1.77298C11.6529 1.19885 10.8744 0.875903 10.0625 0.875Z", fill: (0, utils_1.getCssColorVariable)(color) || '#DCDDE5' })));
+};
+exports.ThumbDownFilledIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ThumbDownFilledIcon/ThumbDownFilledIcon',
+})) `
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && (0, utils_1.getCssColorVariable)(color)};
+`;
+//# sourceMappingURL=ThumbDownFilledIcon.js.map

package/lib/icons/ThumbUpFilledIcon/ThumbUpFilledIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ThumbUpFilledIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/ThumbUpFilledIcon/ThumbUpFilledIcon.js

@@ -0,0 +1,34 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThumbUpFilledIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => {
+    const { color } = props, restProps = __rest(props, ["color"]);
+    return (react_1.default.createElement("svg", Object.assign({ width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
+        react_1.default.createElement("path", { d: "M3.0625 7H0.875V13.125H3.0625V7Z", fill: (0, utils_1.getCssColorVariable)(color) || '#DCDDE5' }),
+        react_1.default.createElement("path", { d: "M10.0625 13.125H3.9375V6.64882L5.26846 4.65229L5.63828 2.06382C5.66886 1.85567 5.77308 1.66539 5.932 1.52753C6.09092 1.38967 6.29402 1.31338 6.5044 1.3125H6.5625C6.91048 1.31288 7.2441 1.45129 7.49016 1.69734C7.73621 1.9434 7.87462 2.27702 7.875 2.625V5.25H11.375C11.839 5.25052 12.2838 5.43506 12.6119 5.76314C12.9399 6.09121 13.1245 6.53603 13.125 7V10.0625C13.1241 10.8744 12.8012 11.6529 12.227 12.227C11.6529 12.8012 10.8744 13.1241 10.0625 13.125Z", fill: (0, utils_1.getCssColorVariable)(color) || '#DCDDE5' })));
+};
+exports.ThumbUpFilledIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ThumbUpFilledIcon/ThumbUpFilledIcon',
+})) `
+  height: ${({ size }) => size || '14px'};
+  width: ${({ size }) => size || '14px'};
+  color: ${({ color }) => color && (0, utils_1.getCssColorVariable)(color)};
+`;
+//# sourceMappingURL=ThumbUpFilledIcon.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.59.0-next.7",
+  "version": "0.59.0-next.9",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.36.1",
-    "@redocly/realm-asyncapi-sdk": "0.5.0-next.2"
+    "@redocly/config": "0.36.2",
+    "@redocly/realm-asyncapi-sdk": "0.5.0-next.3"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Buttons/AIAssistantButton.tsx

@@ -21,7 +21,7 @@ interface AIAssistantButtonConfig {
 const defaultConfig: Required<AIAssistantButtonConfig> = {
   hide: false,
   inputType: 'button',
-  inputIcon: 'redocly',
+  inputIcon: 'sparkles',
 };
 
 const getIcon = (

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/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);
+  }
+`;