Skip to content

Commit 19bb234

Browse files
0xi4o0xi4o
authored
UI Improvements (#1935)
* Update styles for dashboard page * Fix grid in chatflows and marketplaces pages * Update styles for main routes * Create ViewHeader component and use it in chatflows and marketplace * Use viewheader in all main routes views and make the styles consistent * Update table styles for chatflow and marketplace views * Update table and grid styles in all main routes views * Make backgrounds, borders, and colors everywhere * Apply text ellipsis for titles in cards and tables * Update credentials list dialog styles * Update tools dialog styles * Update styles for inputs and dialogs * Show skeleton loaders for main routes * Apply text ellipsis to chatflow title in canvas page * Update icons for load and export buttons in tools and assistants * Fix issue where table header is shown when number of elements is zero * Add error boundary component to main routes * Capture errors from all requests in main routes * Fix id for add api key and add variable buttons * Fix missing th tag in variables table body
1 parent 19e14c4 commit 19bb234

32 files changed

+2253
-1648
lines changed

‎packages/ui/src/ErrorBoundary.jsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import PropTypes from 'prop-types'
2+
3+
import { Box, Card, IconButton, Stack, Typography, useTheme } from '@mui/material'
4+
import { IconCopy } from '@tabler/icons'
5+
6+
const ErrorBoundary = ({ error }) => {
7+
const theme = useTheme()
8+
9+
const copyToClipboard = () => {
10+
const errorMessage = `Status: ${error.response.status}\n${error.response.data.message}`
11+
navigator.clipboard.writeText(errorMessage)
12+
}
13+
14+
return (
15+
<Box sx={{ border: 1, borderColor: theme.palette.grey[900] + 25, borderRadius: 2, padding: '20px', maxWidth: '1280px' }}>
16+
<Stack flexDirection='column' sx={{ alignItems: 'center', gap: 3 }}>
17+
<Stack flexDirection='column' sx={{ alignItems: 'center', gap: 1 }}>
18+
<Typography variant='h2'>Oh snap!</Typography>
19+
<Typography variant='h3'>The following error occured when loading this page.</Typography>
20+
</Stack>
21+
<Card variant='outlined'>
22+
<Box sx={{ position: 'relative', px: 2, py: 3 }}>
23+
<IconButton
24+
onClick={copyToClipboard}
25+
size='small'
26+
sx={{ position: 'absolute', top: 1, right: 1, color: theme.palette.grey[900] + 25 }}
27+
>
28+
<IconCopy />
29+
</IconButton>
30+
<pre style={{ margin: 0 }}>
31+
<code>{`Status: ${error.response.status}`}</code>
32+
<br />
33+
<code>{error.response.data.message}</code>
34+
</pre>
35+
</Box>
36+
</Card>
37+
<Typography variant='body1' sx={{ fontSize: '1.1rem', textAlign: 'center', lineHeight: '1.5' }}>
38+
Please retry after some time. If the issue persists, reach out to us on our Discord server.
39+
<br />
40+
Alternatively, you can raise an issue on Github.
41+
</Typography>
42+
</Stack>
43+
</Box>
44+
)
45+
}
46+
47+
ErrorBoundary.propTypes = {
48+
error: PropTypes.object
49+
}
50+
51+
export default ErrorBoundary

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

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ const NavGroup = ({ item }) => {
4444
</Typography>
4545
)
4646
}
47+
sx={{ py: '20px' }}
4748
>
4849
{items}
4950
</List>

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

+20-7
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { BrowserView, MobileView } from 'react-device-detect'
1111
// project imports
1212
import MenuList from './MenuList'
1313
import LogoSection from '../LogoSection'
14-
import { drawerWidth } from '@/store/constant'
14+
import { drawerWidth, headerHeight } from '@/store/constant'
1515

1616
// ==============================|| SIDEBAR DRAWER ||============================== //
1717

@@ -21,7 +21,12 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
2121

2222
const drawer = (
2323
<>
24-
<Box sx={{ display: { xs: 'block', md: 'none' } }}>
24+
<Box
25+
sx={{
26+
display: { xs: 'block', md: 'none' },
27+
height: '80px'
28+
}}
29+
>
2530
<Box sx={{ display: 'flex', p: 2, mx: 'auto' }}>
2631
<LogoSection />
2732
</Box>
@@ -30,7 +35,7 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
3035
<PerfectScrollbar
3136
component='div'
3237
style={{
33-
height: !matchUpMd ? 'calc(100vh - 56px)' : 'calc(100vh - 88px)',
38+
height: !matchUpMd ? 'calc(100vh - 56px)' : `calc(100vh - ${headerHeight}px)`,
3439
paddingLeft: '16px',
3540
paddingRight: '16px'
3641
}}
@@ -49,7 +54,14 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
4954
const container = window !== undefined ? () => window.document.body : undefined
5055

5156
return (
52-
<Box component='nav' sx={{ flexShrink: { md: 0 }, width: matchUpMd ? drawerWidth : 'auto' }} aria-label='mailbox folders'>
57+
<Box
58+
component='nav'
59+
sx={{
60+
flexShrink: { md: 0 },
61+
width: matchUpMd ? drawerWidth : 'auto'
62+
}}
63+
aria-label='mailbox folders'
64+
>
5365
<Drawer
5466
container={container}
5567
variant={matchUpMd ? 'persistent' : 'temporary'}
@@ -61,10 +73,11 @@ const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
6173
width: drawerWidth,
6274
background: theme.palette.background.default,
6375
color: theme.palette.text.primary,
64-
borderRight: 'none',
6576
[theme.breakpoints.up('md')]: {
66-
top: '66px'
67-
}
77+
top: `${headerHeight}px`
78+
},
79+
borderRight: drawerOpen ? '1px solid' : 'none',
80+
borderColor: drawerOpen ? theme.palette.primary[200] + 75 : 'transparent'
6881
}
6982
}}
7083
ModalProps={{ keepMounted: true }}

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

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import PropTypes from 'prop-types'
2+
3+
// material-ui
4+
import { Box, OutlinedInput, Toolbar, Typography } from '@mui/material'
5+
import { useTheme } from '@mui/material/styles'
6+
7+
// icons
8+
import { IconSearch } from '@tabler/icons'
9+
10+
const ViewHeader = ({ children, filters = null, onSearchChange, search, searchPlaceholder = 'Search', title }) => {
11+
const theme = useTheme()
12+
13+
return (
14+
<Box sx={{ flexGrow: 1, py: 1.25, width: '100%' }}>
15+
<Toolbar
16+
disableGutters={true}
17+
sx={{
18+
p: 0,
19+
display: 'flex',
20+
justifyContent: 'space-between',
21+
width: '100%'
22+
}}
23+
>
24+
<Typography
25+
sx={{
26+
fontSize: '2rem',
27+
fontWeight: 600
28+
}}
29+
variant='h1'
30+
>
31+
{title}
32+
</Typography>
33+
<Box sx={{ height: 40, display: 'flex', alignItems: 'center', gap: 1 }}>
34+
{search && (
35+
<OutlinedInput
36+
size='small'
37+
sx={{
38+
width: '280px',
39+
height: '100%',
40+
display: { xs: 'none', sm: 'flex' },
41+
borderRadius: 2,
42+
43+
'& .MuiOutlinedInput-notchedOutline': {
44+
borderRadius: 2
45+
}
46+
}}
47+
variant='outlined'
48+
placeholder={searchPlaceholder}
49+
onChange={onSearchChange}
50+
startAdornment={
51+
<Box
52+
sx={{
53+
color: theme.palette.grey[400],
54+
display: 'flex',
55+
alignItems: 'center',
56+
justifyContent: 'center',
57+
mr: 1
58+
}}
59+
>
60+
<IconSearch style={{ color: 'inherit', width: 16, height: 16 }} />
61+
</Box>
62+
}
63+
type='search'
64+
/>
65+
)}
66+
{filters}
67+
{children}
68+
</Box>
69+
</Toolbar>
70+
</Box>
71+
)
72+
}
73+
74+
ViewHeader.propTypes = {
75+
children: PropTypes.node,
76+
filters: PropTypes.node,
77+
onSearchChange: PropTypes.func,
78+
search: PropTypes.bool,
79+
searchPlaceholder: PropTypes.string,
80+
title: PropTypes.string
81+
}
82+
83+
export default ViewHeader

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

+10-12
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,23 @@ import { AppBar, Box, CssBaseline, Toolbar, useMediaQuery } from '@mui/material'
99
// project imports
1010
import Header from './Header'
1111
import Sidebar from './Sidebar'
12-
import { drawerWidth } from '@/store/constant'
12+
import { drawerWidth, headerHeight } from '@/store/constant'
1313
import { SET_MENU } from '@/store/actions'
1414

1515
// styles
1616
const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({
1717
...theme.typography.mainContent,
1818
...(!open && {
19+
backgroundColor: 'transparent',
1920
borderBottomLeftRadius: 0,
2021
borderBottomRightRadius: 0,
21-
transition: theme.transitions.create('margin', {
22+
transition: theme.transitions.create('all', {
2223
easing: theme.transitions.easing.sharp,
2324
duration: theme.transitions.duration.leavingScreen
2425
}),
26+
marginRight: 0,
2527
[theme.breakpoints.up('md')]: {
26-
marginLeft: -(drawerWidth - 20),
28+
marginLeft: -drawerWidth,
2729
width: `calc(100% - ${drawerWidth}px)`
2830
},
2931
[theme.breakpoints.down('md')]: {
@@ -39,20 +41,16 @@ const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({
3941
}
4042
}),
4143
...(open && {
42-
transition: theme.transitions.create('margin', {
44+
backgroundColor: 'transparent',
45+
transition: theme.transitions.create('all', {
4346
easing: theme.transitions.easing.easeOut,
4447
duration: theme.transitions.duration.enteringScreen
4548
}),
4649
marginLeft: 0,
50+
marginRight: 0,
4751
borderBottomLeftRadius: 0,
4852
borderBottomRightRadius: 0,
49-
width: `calc(100% - ${drawerWidth}px)`,
50-
[theme.breakpoints.down('md')]: {
51-
marginLeft: '20px'
52-
},
53-
[theme.breakpoints.down('sm')]: {
54-
marginLeft: '10px'
55-
}
53+
width: `calc(100% - ${drawerWidth}px)`
5654
})
5755
}))
5856

@@ -88,7 +86,7 @@ const MainLayout = () => {
8886
transition: leftDrawerOpened ? theme.transitions.create('width') : 'none'
8987
}}
9088
>
91-
<Toolbar>
89+
<Toolbar sx={{ height: `${headerHeight}px`, borderBottom: '1px solid', borderColor: theme.palette.primary[200] + 75 }}>
9290
<Header handleLeftDrawerToggle={handleLeftDrawerToggle} />
9391
</Toolbar>
9492
</AppBar>

‎packages/ui/src/store/constant.js

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
export const gridSpacing = 3
33
export const drawerWidth = 260
44
export const appDrawerWidth = 320
5+
export const headerHeight = 80
56
export const maxScroll = 100000
67
export const baseURL =
78
import.meta.env.PROD === true

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const StyledMenu = styled((props) => (
7272
}
7373
}))
7474

75-
export default function FlowListMenu({ chatflow, updateFlowsApi }) {
75+
export default function FlowListMenu({ chatflow, setError, updateFlowsApi }) {
7676
const { confirm } = useConfirm()
7777
const dispatch = useDispatch()
7878
const updateChatflowApi = useApi(chatflowsApi.updateChatflow)
@@ -153,6 +153,7 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
153153
await updateChatflowApi.request(chatflow.id, updateBody)
154154
await updateFlowsApi.request()
155155
} catch (error) {
156+
setError(error)
156157
enqueueSnackbar({
157158
message: error.response.data.message,
158159
options: {
@@ -191,6 +192,7 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
191192
await updateChatflowApi.request(chatflow.id, updateBody)
192193
await updateFlowsApi.request()
193194
} catch (error) {
195+
setError(error)
194196
enqueueSnackbar({
195197
message: error.response.data.message,
196198
options: {
@@ -222,6 +224,7 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
222224
await chatflowsApi.deleteChatflow(chatflow.id)
223225
await updateFlowsApi.request()
224226
} catch (error) {
227+
setError(error)
225228
enqueueSnackbar({
226229
message: error.response.data.message,
227230
options: {
@@ -370,5 +373,6 @@ export default function FlowListMenu({ chatflow, updateFlowsApi }) {
370373

371374
FlowListMenu.propTypes = {
372375
chatflow: PropTypes.object,
376+
setError: PropTypes.func,
373377
updateFlowsApi: PropTypes.object
374378
}

0 commit comments

Comments
 (0)