@redocly/theme/lib/components/Search/SearchAiActionButtons.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchAiActionButtons = SearchAiActionButtons;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const types_1 = require("../../core/types");
const Button_1 = require("../../components/Button/Button");
const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
const ThumbUpFilledIcon_1 = require("../../icons/ThumbUpFilledIcon/ThumbUpFilledIcon");
const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
const ThumbDownFilledIcon_1 = require("../../icons/ThumbDownFilledIcon/ThumbDownFilledIcon");
const CopyButton_1 = require("../../components/Buttons/CopyButton");
function SearchAiActionButtons({ content, className, feedback, onFeedback, disabled, }) {
    return (react_1.default.createElement(ActionButtonsWrapper, { className: className, "data-component-name": "Search/SearchAiActionButtons" },
        react_1.default.createElement(CopyButton_1.CopyButton, { data: content }),
        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Like ? react_1.default.createElement(ThumbUpFilledIcon_1.ThumbUpFilledIcon, null) : react_1.default.createElement(ThumbUpIcon_1.ThumbUpIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Like), extraClass: feedback === types_1.FeedbackType.Like ? 'active' : '', "aria-label": "Like this response", disabled: disabled }),
        react_1.default.createElement(FeedbackButton, { variant: "text", size: "small", icon: feedback === types_1.FeedbackType.Dislike ? react_1.default.createElement(ThumbDownFilledIcon_1.ThumbDownFilledIcon, null) : react_1.default.createElement(ThumbDownIcon_1.ThumbDownIcon, null), onClick: () => !disabled && onFeedback(types_1.FeedbackType.Dislike), extraClass: feedback === types_1.FeedbackType.Dislike ? 'active' : '', "aria-label": "Dislike this response", disabled: disabled })));
}
const ActionButtonsWrapper = styled_components_1.default.div `
  display: flex;
  align-items: center;
  gap: var(--search-ai-feedback-gap);
`;
const FeedbackButton = (0, styled_components_1.default)(Button_1.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);
  }
`;
//# sourceMappingURL=SearchAiActionButtons.js.map