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

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchAiNegativeFeedbackForm = SearchAiNegativeFeedbackForm;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const types_1 = require("../../core/types");
const Button_1 = require("../../components/Button/Button");
const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
const SendIcon_1 = require("../../icons/SendIcon/SendIcon");
const hooks_1 = require("../../core/hooks");
const NEGATIVE_FEEDBACK_DEFAULT_REASONS = [
    "Didn't answer my question",
    "Couldn't find what I was looking for",
    'Wrong topic',
    'Partially helpful, but missing details',
];
function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, formRef, }) {
    const { useTranslate } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const [showMoreInput, setShowMoreInput] = (0, react_1.useState)(false);
    const [detailedFeedback, setDetailedFeedback] = (0, react_1.useState)('');
    const textAreaRef = react_1.default.useRef(null);
    const adjustTextAreaHeight = () => {
        const textArea = textAreaRef.current;
        if (textArea) {
            textArea.style.height = 'auto';
            textArea.style.height = `${textArea.scrollHeight}px`;
        }
    };
    const handleTextChange = (e) => {
        setDetailedFeedback(e.target.value);
        adjustTextAreaHeight();
    };
    (0, react_1.useEffect)(() => {
        if (showMoreInput) {
            adjustTextAreaHeight();
        }
    }, [showMoreInput]);
    return (react_1.default.createElement(FeedbackFormWrapper, { "data-component-name": "Search/SearchAiNegativeFeedbackForm", ref: formRef },
        react_1.default.createElement(FeedbackHeader, null,
            showMoreInput ? (react_1.default.createElement(BackButton, { variant: "text", size: "small", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), onClick: () => setShowMoreInput(false), "aria-label": "Back to feedback reasons" })) : null,
            react_1.default.createElement(FeedbackTitle, { "data-translation-key": "search.ai.feedback.title" }, translate('search.ai.feedback.title', "What didn't you like about this response?")),
            react_1.default.createElement(CloseButton, { variant: "text", size: "small", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: () => onClose(messageId, types_1.FeedbackType.Dislike, undefined), "aria-label": "Close feedback form" })),
        !showMoreInput ? (react_1.default.createElement(FeedbackReasonsWrapper, null,
            NEGATIVE_FEEDBACK_DEFAULT_REASONS.map((reason) => (react_1.default.createElement(Button_1.Button, { key: reason, variant: "outlined", size: "small", onClick: () => onSubmit(reason) }, reason))),
            react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "small", onClick: () => setShowMoreInput(true) }, translate('search.ai.feedback.more', 'More...')))) : (react_1.default.createElement(FeedbackInputWrapper, null,
            react_1.default.createElement(FeedbackTextArea, { ref: textAreaRef, placeholder: translate('search.ai.feedback.detailsPlaceholder', 'Add specific details'), value: detailedFeedback, onChange: handleTextChange, rows: 1, autoFocus: true }),
            react_1.default.createElement(SendButton, { size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: !detailedFeedback.trim()
                        ? '--button-content-color-disabled'
                        : 'var(--search-ai-conversation-input-send-button-icon-color)' }), onClick: () => onSubmit(detailedFeedback), disabled: !detailedFeedback.trim(), "aria-label": "Send feedback" })))));
}
const FeedbackFormWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs);
  background: var(--search-ai-feedback-form-bg-color);
  border: 1px solid var(--search-ai-feedback-form-border-color);
  border-radius: var(--border-radius-lg);
`;
const FeedbackHeader = styled_components_1.default.div `
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
`;
const FeedbackTitle = styled_components_1.default.div `
  font-size: var(--font-size-base);
  color: var(--text-color);
  flex: 1;
`;
const BackButton = (0, styled_components_1.default)(Button_1.Button) `
  flex-shrink: 0;
`;
const CloseButton = (0, styled_components_1.default)(Button_1.Button) `
  flex-shrink: 0;
`;
const FeedbackReasonsWrapper = styled_components_1.default.div `
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
`;
const FeedbackInputWrapper = styled_components_1.default.div `
  position: relative;
  width: 100%;
`;
const FeedbackTextArea = styled_components_1.default.textarea `
  width: 100%;
  min-height: 5rem;
  max-height: 12.5rem;
  padding: var(--spacing-xs);
  padding-right: 3rem;
  border: 1px solid var(--border-color-primary);
  border-radius: var(--border-radius-md);
  font-family: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background: var(--background-color);
  color: var(--text-color);
  resize: none;
  overflow-y: auto;

  &:focus {
    outline: 1px solid var(--button-border-color-focused);
    border-color: var(--button-border-color-focused);
  }

  &::placeholder {
    color: var(--text-color-helper);
  }
`;
const SendButton = (0, styled_components_1.default)(Button_1.Button) `
  position: absolute;
  right: var(--search-ai-conversation-input-send-button-right);
  bottom: var(--spacing-sm);
  transition: background-color 0.2s ease;
  background-color: var(--search-ai-conversation-input-send-button-bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--search-ai-conversation-input-send-button-border-radius);
  padding: var(--search-ai-conversation-input-send-button-padding);

  &:hover {
    background-color: var(--search-ai-conversation-input-send-button-bg-color-hover);
  }

  &:disabled {
    background-color: var(--search-ai-conversation-input-send-button-bg-color-disabled);
    border: var(--search-ai-conversation-input-send-button-border-disabled);
  }
`;
//# sourceMappingURL=SearchAiNegativeFeedbackForm.js.map