@plteam/chat-ui/dist/views/message/actions/feedback/MessageFeedbackWindow.js

CUI Kit is a free and open-source library for creating AI assistant chat interfaces, built with React, Material UI, and TypeScript

import * as React from 'react';
import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';
import InputBase from '@mui/material/InputBase';
import { useChatCoreSlots } from '../../../core/ChatSlotsContext';
import { CloseIcon } from '../../../../icons';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import { Popover } from '@mui/material';
import { useChatContext } from '../../../../views/core/ChatGlobalContext';
import { useLocalizationContext } from '../../../../views/core/LocalizationContext';
const MessageFeedbackWindow = ({ message, anchorEl, onClose }) => {
    const [feedback, setFeedback] = React.useState('');
    const [tags, setTags] = React.useState([]);
    const locale = useLocalizationContext();
    const { onSendMessageFeedback, feedbackLikeOptions, feedbackDislikeOptions } = useChatContext();
    const coreSlots = useChatCoreSlots();
    const handelClear = () => {
        setFeedback('');
        setTags([]);
    };
    React.useEffect(() => {
        if (anchorEl)
            handelClear();
    }, [anchorEl]);
    const tagArray = React.useMemo(() => {
        return message.rating === 'like' ? feedbackLikeOptions : feedbackDislikeOptions;
    }, [message.rating]);
    const handleSubmit = () => {
        onSendMessageFeedback?.({ message: message.data, feedback, tags });
        onClose();
    };
    const handleTag = (tag) => {
        if (tags.find(t => t.id === tag.id)) {
            setTags(tags.filter(t => t.id !== tag.id));
        }
        else {
            setTags([...tags, tag]);
        }
    };
    if (!onSendMessageFeedback)
        return null;
    return (React.createElement(Popover, { open: Boolean(anchorEl), anchorEl: anchorEl, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, slotProps: {
            paper: {
                sx: {
                    display: 'flex',
                    flexDirection: 'column',
                    padding: 2,
                    borderRadius: 2,
                    gap: 2,
                    maxWidth: 500,
                    backgroundColor: (theme) => theme.palette.grey[200],
                }
            }
        }, onClose: onClose },
        React.createElement(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between" },
            React.createElement(Box, { display: "flex", gap: 1, flexDirection: "row", alignItems: "center" },
                React.createElement(Typography, { variant: 'subtitle1' }, locale.messageFeedbackTitle),
                React.createElement(Typography, { variant: 'body2' }, locale.messageFeedbackSecondTitle)),
            React.createElement(coreSlots.iconButton, { size: 'small', onClick: onClose },
                React.createElement(CloseIcon, null))),
        React.createElement(Stack, { width: "100%", display: "flex", direction: "row", gap: 1, flexWrap: "wrap" }, tagArray?.map((tag) => {
            const isActive = tags.find((t) => t.id === tag.id);
            return (React.createElement(Box, { key: tag.id },
                React.createElement(coreSlots.chip, { label: tag.label, variant: isActive ? 'filled' : 'outlined', sx: {
                        color: (theme) => isActive ? theme.palette.common.white : theme.palette.grey[600],
                        backgroundColor: (theme) => isActive ? theme.palette.primary.main : undefined,
                    }, onClick: () => handleTag(tag) })));
        })),
        React.createElement(InputBase, { multiline: true, placeholder: locale.messageFeedbackPlaceholder, value: feedback, maxRows: 3, sx: {
                padding: 1,
                borderRadius: 2,
                border: '1px solid',
                borderColor: (theme) => theme.palette.divider,
            }, onChange: (event) => {
                setFeedback(event.target.value);
            } }),
        React.createElement(Typography, { variant: 'body2' },
            React.createElement(Link, { target: '_blank', href: '' }, locale.messageFeedbackLink),
            ` ${locale.messageFeedbackText}`),
        React.createElement(Box, null,
            React.createElement(coreSlots.button, { disabled: !feedback && tags.length === 0, variant: 'text', onClick: handleSubmit }, locale.messageFeedbackSubmitButton))));
};
export default MessageFeedbackWindow;