diff --git a/app/containers/ConversationBubble/ConversationBubble.js b/app/containers/ConversationBubble/ConversationBubble.js index db03f55..d7deade 100644 --- a/app/containers/ConversationBubble/ConversationBubble.js +++ b/app/containers/ConversationBubble/ConversationBubble.js @@ -1,24 +1,34 @@ -import React from 'react'; +import React, { useContext } from 'react'; import ReactMarkdown from 'react-markdown'; -import Box from '@/app/components/Box/Box'; -import Typography from '@/app/components/Typography/Typography'; import { useTheme } from '@mui/material'; -import IconButton from '@/app/components/IconButton/IconButton'; -import Tooltip from '@/app/components/Tooltip/Tooltip'; import ThumbUpIcon from '@mui/icons-material/ThumbUp'; import ThumbDownIcon from '@mui/icons-material/ThumbDown'; import ErrorIcon from '@mui/icons-material/Error'; +import Box from '@/app/components/Box/Box'; +import Typography from '@/app/components/Typography/Typography'; +import IconButton from '@/app/components/IconButton/IconButton'; +import Tooltip from '@/app/components/Tooltip/Tooltip'; import postFeedback from '@/app/services/postFeedback'; +import { SnackbarContext } from '@/app/contexts/SnackbarContext/SnackbarContext'; const ConversationBubble = ({ entry }) => { const theme = useTheme(); + const { setSnackbar } = useContext(SnackbarContext); const handleFeedback = async (type) => { const success = await postFeedback(entry.requestId, type); if (success) { - console.log('Feedback posted successfully'); + // console.log('Feedback posted successfully'); + setSnackbar({ + message: 'Feedback Received', + severity: 'success', + }) } else { - console.log('Failed to post feedback'); + // console.log('Failed to post feedback'); + setSnackbar({ + message: 'There was an Error Receiving Your Feedback', + severity: 'error', + }) } }; diff --git a/app/contexts/SnackbarContext/SnackbarContext.js b/app/contexts/SnackbarContext/SnackbarContext.js new file mode 100644 index 0000000..9759b4f --- /dev/null +++ b/app/contexts/SnackbarContext/SnackbarContext.js @@ -0,0 +1,12 @@ +import * as React from "react"; + +export const DefaultSnackbar = { + message: '', + duration: 7000, + action: undefined, + severity: 'success' +} + +export const SnackbarContext = React.createContext({ + DefaultSnackbar +}); \ No newline at end of file diff --git a/app/layout.js b/app/layout.js index aa1df52..ed2b50e 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,16 +1,55 @@ -import * as React from 'react'; +'use client'; +import React, { useState } from 'react'; +import { DefaultSnackbar, SnackbarContext } from './contexts/SnackbarContext/SnackbarContext' import { ThemeProvider } from '@mui/material/styles'; import CssBaseline from '@mui/material/CssBaseline'; +import { Snackbar, Alert } from '@mui/material'; import theme from '@/app/theme'; export default function RootLayout(props) { + const [showSnackbar, setShowSnackbar] = useState(false); + const [snackbarDetails, setSnackbarDetails] = useState(DefaultSnackbar); + + // Pieces for the Snackbar Context + const setSnackbar = (props) => { + const { message, action, severity = 'success', duration = 7000 } = props; + setSnackbarDetails({ + message: message, + duration: duration, + action: action, + severity: severity, + }); + setShowSnackbar(true); + }; + + const onDismissSnackBar = () => { + setShowSnackbar(false); + setSnackbarDetails(DefaultSnackbar); + }; + return ( - {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} - - {props.children} + + {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */} + + {props.children} + + + {snackbarDetails.message} + + +