@botonic/react
Version:
Build Chatbots using React
48 lines • 2.31 kB
JavaScript
import { __awaiter } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext, useEffect, useState } from 'react';
import ThumbsDown from '../../assets/thumbs-down.svg';
import ThumbsUp from '../../assets/thumbs-up.svg';
import { resolveImage } from '../../util';
import { WebchatContext } from '../../webchat/context';
import { useTracking } from '../../webchat/tracking';
import { FeedbackButton, FeedbackMessageContainer } from './styles';
export const MessageFeedback = ({ botInteractionId, inferenceId, messageId, }) => {
const { webchatState, updateMessage } = useContext(WebchatContext);
const { trackKnowledgebaseFeedback } = useTracking();
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 (isUseful) {
setDisabled({ positive: false, negative: true });
}
else {
setDisabled({ positive: true, negative: false });
}
yield trackKnowledgebaseFeedback({
messageId,
isUseful,
botInteractionId,
inferenceId,
});
});
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