@botonic/react
Version:
Build Chatbots using React
60 lines • 3.19 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 uuid_1 = require("uuid");
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 contexts_1 = require("../../contexts");
const util_1 = require("../../util");
const tracking_1 = require("../../webchat/tracking");
const styles_1 = require("./styles");
const MessageFeedback = ({ inferenceId, messageId }) => {
const { webchatState, updateMessage, trackEvent } = (0, react_1.useContext)(contexts_1.WebchatContext);
const request = (0, react_1.useContext)(contexts_1.RequestContext);
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 (!trackEvent) {
return;
}
if (isUseful) {
setDisabled({ positive: false, negative: true });
}
else {
setDisabled({ positive: true, negative: false });
}
const args = {
knowledgebaseInferenceId: inferenceId,
feedbackTargetId: messageId,
feedbackGroupId: (0, uuid_1.v4)(),
possibleOptions: [tracking_1.FeedbackOption.ThumbsUp, tracking_1.FeedbackOption.ThumbsDown],
possibleValues: [0, 1],
option: isUseful ? tracking_1.FeedbackOption.ThumbsUp : tracking_1.FeedbackOption.ThumbsDown,
value: isUseful ? 1 : 0,
};
yield trackEvent(request, tracking_1.EventAction.FeedbackKnowledgebase, args);
});
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