@nuskin/chat-bot/src/components/errorAlert/errorAlert.jsx

React Chat Bot component for GenAI interaction with Amazon Bedrock

import { Alert, Box, Collapse, IconButton } from '@mui/material'
import CloseIcon from '@mui/icons-material/Close'
import React, { useState } from 'react'

/**
 * ErrorAlert component
 *
 * Displays an error alert with a close button.
 *
 * @param {Object} props - The component props.
 * @param {Object} props.e - The error object containing the question and error message.
 * @returns {JSX.Element} The ErrorAlert component.
 */
export default function ErrorAlert({ e }) {
    const [open, setOpen] = useState(true)

    const handleClose = () => {
        setOpen(false)
    }

    return (
        <Box sx={{ maxWidth: '1200px', margin: 'auto', width: '100%' }}>
            <Collapse in={open}>
                <Alert
                    variant="filled"
                    severity="error"
                    action={
                        <IconButton color="inherit" size="small" onClick={handleClose}>
                            <CloseIcon fontSize="inherit" />
                        </IconButton>
                    }
                    sx={{ maxWidth: '1200px', margin: 'auto', width: '100%' }}
                >
                    <div>Question: {e.question}</div>
                    <div>{e.error}</div>
                </Alert>
            </Collapse>
        </Box>
    )
}