@plteam/chat-ui
Version:
CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript
30 lines (29 loc) • 1.76 kB
JavaScript
import * as React from 'react';
import Stack from '@mui/material/Stack';
import MessageFeedbackButton from './MessageFeedbackButton';
import MessageFeedbackWindow from './MessageFeedbackWindow';
import { useChatContext } from '../../../../views/core/ChatGlobalContext';
import { useLocalizationContext } from '../../../../views/core/LocalizationContext';
const MessageActionFeedback = ({ message }) => {
const [messageRating, setMessageRating] = React.useState(message.rating);
const [anchorEl, setAnchorEl] = React.useState(null);
const ref = React.useRef(null);
const { onChangeMessageRating, onSendMessageFeedback } = useChatContext();
const locale = useLocalizationContext();
const handleActionClick = (action) => {
const newValue = message.rating === action ? undefined : action;
if (newValue && onSendMessageFeedback)
setAnchorEl(ref.current);
onChangeMessageRating?.({ message: message.data, rating: newValue });
setMessageRating(newValue);
message.rating = newValue;
};
const handleClose = () => {
setAnchorEl(null);
};
return (React.createElement(Stack, { ref: ref, gap: 1.5, direction: "row", alignItems: "center", position: "relative" },
React.createElement(MessageFeedbackButton, { tooltip: locale.messageLikeTooltip, type: "like", activeType: messageRating, onClick: handleActionClick }),
React.createElement(MessageFeedbackButton, { tooltip: locale.messageDislikeTooltip, type: "dislike", activeType: messageRating, onClick: handleActionClick }),
React.createElement(MessageFeedbackWindow, { message: message, anchorEl: anchorEl, onClose: handleClose })));
};
export default MessageActionFeedback;