UI Improvements

packages/ui/src/ErrorBoundary.jsx

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types'
+
+import { Box, Card, IconButton, Stack, Typography, useTheme } from '@mui/material'
+import { IconCopy } from '@tabler/icons'
+
+const ErrorBoundary = ({ error }) => {
+    const theme = useTheme()
+
+    const copyToClipboard = () => {
+        const errorMessage = `Status: ${error.response.status}\n${error.response.data.message}`
+        navigator.clipboard.writeText(errorMessage)
+    }
+
+    return (
+        <Box sx={{ border: 1, borderColor: theme.palette.grey[900] + 25, borderRadius: 2, padding: '20px', maxWidth: '1280px' }}>
+            <Stack flexDirection='column' sx={{ alignItems: 'center', gap: 3 }}>
+                <Stack flexDirection='column' sx={{ alignItems: 'center', gap: 1 }}>
+                    <Typography variant='h2'>Oh snap!</Typography>
+                    <Typography variant='h3'>The following error occured when loading this page.</Typography>
+                </Stack>
+                <Card variant='outlined'>
+                    <Box sx={{ position: 'relative', px: 2, py: 3 }}>
+                        <IconButton
+                            onClick={copyToClipboard}
+                            size='small'
+                            sx={{ position: 'absolute', top: 1, right: 1, color: theme.palette.grey[900] + 25 }}
+                        >
+                            <IconCopy />
+                        </IconButton>
+                        <pre style={{ margin: 0 }}>
+                            <code>{`Status: ${error.response.status}`}</code>
+                            <br />
+                            <code>{error.response.data.message}</code>
+                        </pre>
+                    </Box>
+                </Card>
+                <Typography variant='body1' sx={{ fontSize: '1.1rem', textAlign: 'center', lineHeight: '1.5' }}>
+                    Please retry after some time. If the issue persists, reach out to us on our Discord server.
+                    <br />
+                    Alternatively, you can raise an issue on Github.
+                </Typography>
+            </Stack>
+        </Box>
+    )
+}
+
+ErrorBoundary.propTypes = {
+    error: PropTypes.object
+}
+
+export default ErrorBoundary

packages/ui/src/layout/MainLayout/Sidebar/MenuList/NavGroup/index.jsx

@@ -44,6 +44,7 @@ const NavGroup = ({ item }) => {
                         </Typography>
                     )
                 }
+                sx={{ py: '20px' }}
             >
                 {items}
             </List>

packages/ui/src/layout/MainLayout/Sidebar/index.jsx

@@ -11,7 +11,7 @@ import { BrowserView, MobileView } from 'react-device-detect'
 // project imports
 import MenuList from './MenuList'
 import LogoSection from '../LogoSection'
-import { drawerWidth } from '@/store/constant'
+import { drawerWidth, headerHeight } from '@/store/constant'
 
 // ==============================|| SIDEBAR DRAWER ||============================== //
 
@@ -21,7 +21,12 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
 
     const drawer = (
         <>
-            <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+            <Box
+                sx={{
+                    display: { xs: 'block', md: 'none' },
+                    height: '80px'
+                }}
+            >
                 <Box sx={{ display: 'flex', p: 2, mx: 'auto' }}>
                     <LogoSection />
                 </Box>
@@ -30,7 +35,7 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
                 <PerfectScrollbar
                     component='div'
                     style={{
-                        height: !matchUpMd ? 'calc(100vh - 56px)' : 'calc(100vh - 88px)',
+                        height: !matchUpMd ? 'calc(100vh - 56px)' : `calc(100vh - ${headerHeight}px)`,
                         paddingLeft: '16px',
                         paddingRight: '16px'
                     }}
@@ -49,7 +54,14 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
     const container = window !== undefined ? () => window.document.body : undefined
 
     return (
-        <Box component='nav' sx={{ flexShrink: { md: 0 }, width: matchUpMd ? drawerWidth : 'auto' }} aria-label='mailbox folders'>
+        <Box
+            component='nav'
+            sx={{
+                flexShrink: { md: 0 },
+                width: matchUpMd ? drawerWidth : 'auto'
+            }}
+            aria-label='mailbox folders'
+        >
             <Drawer
                 container={container}
                 variant={matchUpMd ? 'persistent' : 'temporary'}
@@ -61,10 +73,11 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
                         width: drawerWidth,
                         background: theme.palette.background.default,
                         color: theme.palette.text.primary,
-                        borderRight: 'none',
                         [theme.breakpoints.up('md')]: {
-                            top: '66px'
-                        }
+                            top: `${headerHeight}px`
+                        },
+                        borderRight: drawerOpen ? '1px solid' : 'none',
+                        borderColor: drawerOpen ? theme.palette.primary[200] + 75 : 'transparent'
                     }
                 }}
                 ModalProps={{ keepMounted: true }}

packages/ui/src/layout/MainLayout/ViewHeader.jsx

@@ -0,0 +1,83 @@
+import PropTypes from 'prop-types'
+
+// material-ui
+import { Box, OutlinedInput, Toolbar, Typography } from '@mui/material'
+import { useTheme } from '@mui/material/styles'
+
+// icons
+import { IconSearch } from '@tabler/icons'
+
+const ViewHeader = ({ children, filters = null, onSearchChange, search, searchPlaceholder = 'Search', title }) => {
+    const theme = useTheme()
+
+    return (
+        <Box sx={{ flexGrow: 1, py: 1.25, width: '100%' }}>
+            <Toolbar
+                disableGutters={true}
+                sx={{
+                    p: 0,
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    width: '100%'
+                }}
+            >
+                <Typography
+                    sx={{
+                        fontSize: '2rem',
+                        fontWeight: 600
+                    }}
+                    variant='h1'
+                >
+                    {title}
+                </Typography>
+                <Box sx={{ height: 40, display: 'flex', alignItems: 'center', gap: 1 }}>
+                    {search && (
+                        <OutlinedInput
+                            size='small'
+                            sx={{
+                                width: '280px',
+                                height: '100%',
+                                display: { xs: 'none', sm: 'flex' },
+                                borderRadius: 2,
+
+                                '& .MuiOutlinedInput-notchedOutline': {
+                                    borderRadius: 2
+                                }
+                            }}
+                            variant='outlined'
+                            placeholder={searchPlaceholder}
+                            onChange={onSearchChange}
+                            startAdornment={
+                                <Box
+                                    sx={{
+                                        color: theme.palette.grey[400],
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        mr: 1
+                                    }}
+                                >
+                                    <IconSearch style={{ color: 'inherit', width: 16, height: 16 }} />
+                                </Box>
+                            }
+                            type='search'
+                        />
+                    )}
+                    {filters}
+                    {children}
+                </Box>
+            </Toolbar>
+        </Box>
+    )
+}
+
+ViewHeader.propTypes = {
+    children: PropTypes.node,
+    filters: PropTypes.node,
+    onSearchChange: PropTypes.func,
+    search: PropTypes.bool,
+    searchPlaceholder: PropTypes.string,
+    title: PropTypes.string
+}
+
+export default ViewHeader

packages/ui/src/layout/MainLayout/index.jsx

@@ -9,21 +9,23 @@ import { AppBar, Box, CssBaseline, Toolbar, useMediaQuery } from '@mui/material'
 // project imports
 import Header from './Header'
 import Sidebar from './Sidebar'
-import { drawerWidth } from '@/store/constant'
+import { drawerWidth, headerHeight } from '@/store/constant'
 import { SET_MENU } from '@/store/actions'
 
 // styles
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
     ...theme.typography.mainContent,
     ...(!open && {
+        backgroundColor: 'transparent',
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
-        transition: theme.transitions.create('margin', {
+        transition: theme.transitions.create('all', {
             easing: theme.transitions.easing.sharp,
             duration: theme.transitions.duration.leavingScreen
         }),
+        marginRight: 0,
         [theme.breakpoints.up('md')]: {
-            marginLeft: -(drawerWidth - 20),
+            marginLeft: -drawerWidth,
             width: `calc(100% - ${drawerWidth}px)`
         },
         [theme.breakpoints.down('md')]: {
@@ -39,20 +41,16 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
         }
     }),
     ...(open && {
-        transition: theme.transitions.create('margin', {
+        backgroundColor: 'transparent',
+        transition: theme.transitions.create('all', {
             easing: theme.transitions.easing.easeOut,
             duration: theme.transitions.duration.enteringScreen
         }),
         marginLeft: 0,
+        marginRight: 0,
         borderBottomLeftRadius: 0,
         borderBottomRightRadius: 0,
-        width: `calc(100% - ${drawerWidth}px)`,
-        [theme.breakpoints.down('md')]: {
-            marginLeft: '20px'
-        },
-        [theme.breakpoints.down('sm')]: {
-            marginLeft: '10px'
-        }
+        width: `calc(100% - ${drawerWidth}px)`
     })
 }))
 
@@ -88,7 +86,7 @@ const MainLayout = () => {
                     transition: leftDrawerOpened ? theme.transitions.create('width') : 'none'
                 }}
             >
-                <Toolbar>
+                <Toolbar sx={{ height: `${headerHeight}px`, borderBottom: '1px solid', borderColor: theme.palette.primary[200] + 75 }}>
                     <Header handleLeftDrawerToggle={handleLeftDrawerToggle} />
                 </Toolbar>
             </AppBar>

packages/ui/src/store/constant.js

@@ -2,6 +2,7 @@
 export const gridSpacing = 3
 export const drawerWidth = 260
 export const appDrawerWidth = 320
+export const headerHeight = 80
 export const maxScroll = 100000
 export const baseURL =
     import.meta.env.PROD === true

packages/ui/src/ui-component/button/FlowListMenu.jsx

@@ -72,7 +72,7 @@ const StyledMenu = styled((props) => (
     }
 }))
 
-export default function FlowListMenu({ chatflow, updateFlowsApi }) {
+export default function FlowListMenu({ chatflow, setError, updateFlowsApi }) {
     const { confirm } = useConfirm()
     const dispatch = useDispatch()
     const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
@@ -153,6 +153,7 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
             await updateChatflowApi.request(chatflow.id, updateBody)
             await updateFlowsApi.request()
         } catch (error) {
+            setError(error)
             enqueueSnackbar({
                 message: error.response.data.message,
                 options: {
@@ -191,6 +192,7 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
             await updateChatflowApi.request(chatflow.id, updateBody)
             await updateFlowsApi.request()
         } catch (error) {
+            setError(error)
             enqueueSnackbar({
                 message: error.response.data.message,
                 options: {
@@ -222,6 +224,7 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
                 await chatflowsApi.deleteChatflow(chatflow.id)
                 await updateFlowsApi.request()
             } catch (error) {
+                setError(error)
                 enqueueSnackbar({
                     message: error.response.data.message,
                     options: {
@@ -370,5 +373,6 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
 
 FlowListMenu.propTypes = {
     chatflow: PropTypes.object,
+    setError: PropTypes.func,
     updateFlowsApi: PropTypes.object
 }