Implement chat message feedback for UI chat window

packages/ui/src/ui-component/button/CopyToClipboardButton.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { IconButton } from '@mui/material'
+import { IconClipboard } from '@tabler/icons'
+
+const CopyToClipboardButton = (props) => {
+    const customization = useSelector((state) => state.customization)
+
+    return (
+        <IconButton
+            disabled={props.isDisabled || props.isLoading}
+            onClick={props.onClick}
+            size='small'
+            sx={{ background: 'transparent', border: 'none' }}
+            title='Copy to clipboard'
+        >
+            <IconClipboard
+                style={{ width: '20px', height: '20px' }}
+                color={props.isLoading ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
+            />
+        </IconButton>
+    )
+}
+
+CopyToClipboardButton.propTypes = {
+    isDisabled: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    onClick: PropTypes.func
+}
+
+export default CopyToClipboardButton

packages/ui/src/ui-component/button/ThumbsDownButton.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { IconButton } from '@mui/material'
+import { IconThumbDown } from '@tabler/icons'
+
+const ThumbsDownButton = (props) => {
+    const customization = useSelector((state) => state.customization)
+    return (
+        <IconButton
+            disabled={props.isDisabled || props.isLoading}
+            onClick={props.onClick}
+            size='small'
+            sx={{ background: 'transparent', border: 'none' }}
+            title='Thumbs Down'
+        >
+            <IconThumbDown
+                style={{ width: '20px', height: '20px' }}
+                color={props.rating === 'THUMBS_DOWN' ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
+            />
+        </IconButton>
+    )
+}
+
+ThumbsDownButton.propTypes = {
+    isDisabled: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    onClick: PropTypes.func,
+    rating: PropTypes.string
+}
+
+export default ThumbsDownButton

packages/ui/src/ui-component/button/ThumbsUpButton.js

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types'
+import { useSelector } from 'react-redux'
+import { IconButton } from '@mui/material'
+import { IconThumbUp } from '@tabler/icons'
+
+const ThumbsUpButton = (props) => {
+    const customization = useSelector((state) => state.customization)
+    return (
+        <IconButton
+            disabled={props.isDisabled || props.isLoading}
+            onClick={props.onClick}
+            size='small'
+            sx={{ background: 'transparent', border: 'none' }}
+            title='Thumbs Up'
+        >
+            <IconThumbUp
+                style={{ width: '20px', height: '20px' }}
+                color={props.rating === 'THUMBS_UP' ? '#9e9e9e' : customization.isDarkMode ? 'white' : '#1e88e5'}
+            />
+        </IconButton>
+    )
+}
+
+ThumbsUpButton.propTypes = {
+    isDisabled: PropTypes.bool,
+    isLoading: PropTypes.bool,
+    onClick: PropTypes.func,
+    rating: PropTypes.string
+}
+
+export default ThumbsUpButton

packages/ui/src/ui-component/dialog/ChatFeedbackContentDialog.js

@@ -0,0 +1,73 @@
+import { useCallback, useEffect } from 'react'
+import { createPortal } from 'react-dom'
+import { useDispatch } from 'react-redux'
+
+// material-ui
+import { Button, Dialog, DialogContent, DialogTitle, DialogActions, Box, OutlinedInput } from '@mui/material'
+import { useState } from 'react'
+
+// Project import
+import { StyledButton } from 'ui-component/button/StyledButton'
+
+// store
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
+
+const ChatFeedbackContentDialog = ({ show, onCancel, onConfirm }) => {
+    const portalElement = document.getElementById('portal')
+    const dispatch = useDispatch()
+
+    const [feedbackContent, setFeedbackContent] = useState('')
+
+    const onChange = useCallback((e) => setFeedbackContent(e.target.value), [setFeedbackContent])
+
+    const onSave = () => {
+        onConfirm(feedbackContent)
+    }
+
+    useEffect(() => {
+        if (show) dispatch({ type: SHOW_CANVAS_DIALOG })
+        else dispatch({ type: HIDE_CANVAS_DIALOG })
+        return () => dispatch({ type: HIDE_CANVAS_DIALOG })
+    }, [show, dispatch])
+
+    const component = show ? (
+        <Dialog
+            onClose={onCancel}
+            open={show}
+            fullWidth
+            maxWidth='sm'
+            aria-labelledby='alert-dialog-title'
+            aria-describedby='alert-dialog-description'
+        >
+            <DialogTitle sx={{ fontSize: '1rem' }} id='alert-dialog-title'>
+                Provide additional feedback
+            </DialogTitle>
+            <DialogContent>
+                <Box sx={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                    <OutlinedInput
+                        // eslint-disable-next-line
+                        autoFocus
+                        id='feedbackContentInput'
+                        multiline={true}
+                        name='feedbackContentInput'
+                        onChange={onChange}
+                        placeholder='What do you think of the response?'
+                        rows={4}
+                        value={feedbackContent}
+                        sx={{ width: '100%' }}
+                    />
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onCancel}>Cancel</Button>
+                <StyledButton variant='contained' onClick={onSave}>
+                    Submit Feedback
+                </StyledButton>
+            </DialogActions>
+        </Dialog>
+    ) : null
+
+    return createPortal(component, portalElement)
+}
+
+export default ChatFeedbackContentDialog