@botonic/react
Version:
Build Chatbots using React
52 lines • 2.73 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 = Object.assign(Object.assign({}, 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 = (isUseful) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
if (isUseful) {
setDisabled({ positive: false, negative: true });
}
else {
setDisabled({ positive: true, negative: false });
}
yield trackKnowledgebaseFeedback({
messageId,
isUseful,
botInteractionId,
inferenceId,
});
});
return ((0, jsx_runtime_1.jsxs)(styles_1.FeedbackMessageContainer, { children: [(0, jsx_runtime_1.jsx)(styles_1.FeedbackButton, Object.assign({ 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, Object.assign({ 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