@botonic/react
Version:
Build Chatbots using React
55 lines • 2.64 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.MessageFeedback = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const thumbs_down_svg_1 = tslib_1.__importDefault(require("../../assets/thumbs-down.svg"));
const thumbs_up_svg_1 = tslib_1.__importDefault(require("../../assets/thumbs-up.svg"));
const util_1 = require("../../util");
const context_1 = require("../../webchat/context");
const tracking_1 = require("../../webchat/tracking");
const styles_1 = require("./styles");
const MessageFeedback = ({ botInteractionId, inferenceId, messageId, }) => {
const { webchatState, updateMessage } = (0, react_1.useContext)(context_1.WebchatContext);
const { trackKnowledgebaseFeedback } = (0, tracking_1.useTracking)();
const [className, setClassName] = (0, react_1.useState)('');
const [disabled, setDisabled] = (0, react_1.useState)({
positive: false,
negative: false,
});
const updateMsgWithFeedback = (feedbackEnabled) => {
const message = webchatState.messagesJSON.find(message => message.id === messageId);
const updatedMsg = {
...message,
feedbackEnabled,
};
updateMessage(updatedMsg);
};
(0, react_1.useEffect)(() => {
updateMsgWithFeedback(true);
}, []);
(0, react_1.useEffect)(() => {
if (disabled.positive || disabled.negative) {
setClassName('clicked');
updateMsgWithFeedback(false);
}
}, [disabled]);
const handleClick = async (isUseful) => {
if (isUseful) {
setDisabled({ positive: false, negative: true });
}
else {
setDisabled({ positive: true, negative: false });
}
await trackKnowledgebaseFeedback({
messageId,
isUseful,
botInteractionId,
inferenceId,
});
};
return ((0, jsx_runtime_1.jsxs)(styles_1.FeedbackMessageContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.FeedbackButton, { className: className, disabled: disabled.positive, onClick: () => handleClick(true), children: (0, jsx_runtime_1.jsx)("img", { src: (0, util_1.resolveImage)(thumbs_up_svg_1.default) }) }), (0, jsx_runtime_1.jsx)(styles_1.FeedbackButton, { className: className, disabled: disabled.negative, onClick: () => handleClick(false), children: (0, jsx_runtime_1.jsx)("img", { src: (0, util_1.resolveImage)(thumbs_down_svg_1.default) }) })] }));
};
exports.MessageFeedback = MessageFeedback;
//# sourceMappingURL=message-feedback.js.map