@botonic/react
Version:
Build Chatbots using React
56 lines • 2.73 kB
JavaScript
import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useEffect, useState } from 'react';
import { v4 as uuid } from 'uuid';
import ThumbsDown from '../../assets/thumbs-down.svg';
import ThumbsUp from '../../assets/thumbs-up.svg';
import { RequestContext, WebchatContext } from '../../contexts';
import { resolveImage } from '../../util';
import { EventAction, FeedbackOption } from '../../webchat/tracking';
import { FeedbackButton, FeedbackMessageContainer } from './styles';
export const MessageFeedback = ({ inferenceId, messageId }) => {
const { webchatState, updateMessage, trackEvent } = useContext(WebchatContext);
const request = useContext(RequestContext);
const [className, setClassName] = useState('');
const [disabled, setDisabled] = 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);
};
useEffect(() => {
updateMsgWithFeedback(true);
}, []);
useEffect(() => {
if (disabled.positive || disabled.negative) {
setClassName('clicked');
updateMsgWithFeedback(false);
}
}, [disabled]);
const handleClick = (isUseful) => __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: uuid(),
possibleOptions: [FeedbackOption.ThumbsUp, FeedbackOption.ThumbsDown],
possibleValues: [0, 1],
option: isUseful ? FeedbackOption.ThumbsUp : FeedbackOption.ThumbsDown,
value: isUseful ? 1 : 0,
};
yield trackEvent(request, EventAction.FeedbackKnowledgebase, args);
});
return (_jsxs(FeedbackMessageContainer, { children: [_jsx(FeedbackButton, Object.assign({ className: className, disabled: disabled.positive, onClick: () => handleClick(true) }, { children: _jsx("img", { src: resolveImage(ThumbsUp) }) })), _jsx(FeedbackButton, Object.assign({ className: className, disabled: disabled.negative, onClick: () => handleClick(false) }, { children: _jsx("img", { src: resolveImage(ThumbsDown) }) }))] }));
};
//# sourceMappingURL=message-feedback.js.map