Initial push

2026-06-28 15:00:57 +03:00 · 2023-04-06 22:17:34 +01:00
commit 05c86ff9c5
162 changed files with 9112 additions and 0 deletions
@@ -0,0 +1,124 @@
+import PropTypes from 'prop-types'
+import { useState } from 'react'
+import { useSelector } from 'react-redux'
+
+// material-ui
+import { useTheme } from '@mui/material/styles'
+import { Collapse, List, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'
+
+// project imports
+import NavItem from '../NavItem'
+
+// assets
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
+import { IconChevronDown, IconChevronUp } from '@tabler/icons'
+
+// ==============================|| SIDEBAR MENU LIST COLLAPSE ITEMS ||============================== //
+
+const NavCollapse = ({ menu, level }) => {
+    const theme = useTheme()
+    const customization = useSelector((state) => state.customization)
+
+    const [open, setOpen] = useState(false)
+    const [selected, setSelected] = useState(null)
+
+    const handleClick = () => {
+        setOpen(!open)
+        setSelected(!selected ? menu.id : null)
+    }
+
+    // menu collapse & item
+    const menus = menu.children?.map((item) => {
+        switch (item.type) {
+            case 'collapse':
+                return <NavCollapse key={item.id} menu={item} level={level + 1} />
+            case 'item':
+                return <NavItem key={item.id} item={item} level={level + 1} />
+            default:
+                return (
+                    <Typography key={item.id} variant='h6' color='error' align='center'>
+                        Menu Items Error
+                    </Typography>
+                )
+        }
+    })
+
+    const Icon = menu.icon
+    const menuIcon = menu.icon ? (
+        <Icon strokeWidth={1.5} size='1.3rem' style={{ marginTop: 'auto', marginBottom: 'auto' }} />
+    ) : (
+        <FiberManualRecordIcon
+            sx={{
+                width: selected === menu.id ? 8 : 6,
+                height: selected === menu.id ? 8 : 6
+            }}
+            fontSize={level > 0 ? 'inherit' : 'medium'}
+        />
+    )
+
+    return (
+        <>
+            <ListItemButton
+                sx={{
+                    borderRadius: `${customization.borderRadius}px`,
+                    mb: 0.5,
+                    alignItems: 'flex-start',
+                    backgroundColor: level > 1 ? 'transparent !important' : 'inherit',
+                    py: level > 1 ? 1 : 1.25,
+                    pl: `${level * 24}px`
+                }}
+                selected={selected === menu.id}
+                onClick={handleClick}
+            >
+                <ListItemIcon sx={{ my: 'auto', minWidth: !menu.icon ? 18 : 36 }}>{menuIcon}</ListItemIcon>
+                <ListItemText
+                    primary={
+                        <Typography variant={selected === menu.id ? 'h5' : 'body1'} color='inherit' sx={{ my: 'auto' }}>
+                            {menu.title}
+                        </Typography>
+                    }
+                    secondary={
+                        menu.caption && (
+                            <Typography variant='caption' sx={{ ...theme.typography.subMenuCaption }} display='block' gutterBottom>
+                                {menu.caption}
+                            </Typography>
+                        )
+                    }
+                />
+                {open ? (
+                    <IconChevronUp stroke={1.5} size='1rem' style={{ marginTop: 'auto', marginBottom: 'auto' }} />
+                ) : (
+                    <IconChevronDown stroke={1.5} size='1rem' style={{ marginTop: 'auto', marginBottom: 'auto' }} />
+                )}
+            </ListItemButton>
+            <Collapse in={open} timeout='auto' unmountOnExit>
+                <List
+                    component='div'
+                    disablePadding
+                    sx={{
+                        position: 'relative',
+                        '&:after': {
+                            content: "''",
+                            position: 'absolute',
+                            left: '32px',
+                            top: 0,
+                            height: '100%',
+                            width: '1px',
+                            opacity: 1,
+                            background: theme.palette.primary.light
+                        }
+                    }}
+                >
+                    {menus}
+                </List>
+            </Collapse>
+        </>
+    )
+}
+
+NavCollapse.propTypes = {
+    menu: PropTypes.object,
+    level: PropTypes.number
+}
+
+export default NavCollapse
@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types'
+
+// material-ui
+import { useTheme } from '@mui/material/styles'
+import { Divider, List, Typography } from '@mui/material'
+
+// project imports
+import NavItem from '../NavItem'
+import NavCollapse from '../NavCollapse'
+
+// ==============================|| SIDEBAR MENU LIST GROUP ||============================== //
+
+const NavGroup = ({ item }) => {
+    const theme = useTheme()
+
+    // menu list collapse & items
+    const items = item.children?.map((menu) => {
+        switch (menu.type) {
+            case 'collapse':
+                return <NavCollapse key={menu.id} menu={menu} level={1} />
+            case 'item':
+                return <NavItem key={menu.id} item={menu} level={1} navType='MENU' />
+            default:
+                return (
+                    <Typography key={menu.id} variant='h6' color='error' align='center'>
+                        Menu Items Error
+                    </Typography>
+                )
+        }
+    })
+
+    return (
+        <>
+            <List
+                subheader={
+                    item.title && (
+                        <Typography variant='caption' sx={{ ...theme.typography.menuCaption }} display='block' gutterBottom>
+                            {item.title}
+                            {item.caption && (
+                                <Typography variant='caption' sx={{ ...theme.typography.subMenuCaption }} display='block' gutterBottom>
+                                    {item.caption}
+                                </Typography>
+                            )}
+                        </Typography>
+                    )
+                }
+            >
+                {items}
+            </List>
+
+            {/* group divider */}
+            <Divider sx={{ mt: 0.25, mb: 1.25 }} />
+        </>
+    )
+}
+
+NavGroup.propTypes = {
+    item: PropTypes.object
+}
+
+export default NavGroup
@@ -0,0 +1,150 @@
+import PropTypes from 'prop-types'
+import { forwardRef, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { useDispatch, useSelector } from 'react-redux'
+
+// material-ui
+import { useTheme } from '@mui/material/styles'
+import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material'
+
+// project imports
+import { MENU_OPEN, SET_MENU } from 'store/actions'
+import config from 'config'
+
+// assets
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
+
+// ==============================|| SIDEBAR MENU LIST ITEMS ||============================== //
+
+const NavItem = ({ item, level, navType, onClick, onUploadFile }) => {
+    const theme = useTheme()
+    const dispatch = useDispatch()
+    const customization = useSelector((state) => state.customization)
+    const matchesSM = useMediaQuery(theme.breakpoints.down('lg'))
+
+    const Icon = item.icon
+    const itemIcon = item?.icon ? (
+        <Icon stroke={1.5} size='1.3rem' />
+    ) : (
+        <FiberManualRecordIcon
+            sx={{
+                width: customization.isOpen.findIndex((id) => id === item?.id) > -1 ? 8 : 6,
+                height: customization.isOpen.findIndex((id) => id === item?.id) > -1 ? 8 : 6
+            }}
+            fontSize={level > 0 ? 'inherit' : 'medium'}
+        />
+    )
+
+    let itemTarget = '_self'
+    if (item.target) {
+        itemTarget = '_blank'
+    }
+
+    let listItemProps = {
+        component: forwardRef(function ListItemPropsComponent(props, ref) {
+            return <Link ref={ref} {...props} to={`${config.basename}${item.url}`} target={itemTarget} />
+        })
+    }
+    if (item?.external) {
+        listItemProps = { component: 'a', href: item.url, target: itemTarget }
+    }
+    if (item?.id === 'loadChatflow') {
+        listItemProps.component = 'label'
+    }
+
+    const handleFileUpload = (e) => {
+        if (!e.target.files) return
+
+        const file = e.target.files[0]
+
+        const reader = new FileReader()
+        reader.onload = (evt) => {
+            if (!evt?.target?.result) {
+                return
+            }
+            const { result } = evt.target
+            onUploadFile(result)
+        }
+        reader.readAsText(file)
+    }
+
+    const itemHandler = (id) => {
+        if (navType === 'SETTINGS' && id !== 'loadChatflow') {
+            onClick(id)
+        } else {
+            dispatch({ type: MENU_OPEN, id })
+            if (matchesSM) dispatch({ type: SET_MENU, opened: false })
+        }
+    }
+
+    // active menu item on page load
+    useEffect(() => {
+        if (navType === 'MENU') {
+            const currentIndex = document.location.pathname
+                .toString()
+                .split('/')
+                .findIndex((id) => id === item.id)
+            if (currentIndex > -1) {
+                dispatch({ type: MENU_OPEN, id: item.id })
+            }
+            if (!document.location.pathname.toString().split('/')[1]) {
+                itemHandler('chatflows')
+            }
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [navType])
+
+    return (
+        <ListItemButton
+            {...listItemProps}
+            disabled={item.disabled}
+            sx={{
+                borderRadius: `${customization.borderRadius}px`,
+                mb: 0.5,
+                alignItems: 'flex-start',
+                backgroundColor: level > 1 ? 'transparent !important' : 'inherit',
+                py: level > 1 ? 1 : 1.25,
+                pl: `${level * 24}px`
+            }}
+            selected={customization.isOpen.findIndex((id) => id === item.id) > -1}
+            onClick={() => itemHandler(item.id)}
+        >
+            {item.id === 'loadChatflow' && <input type='file' hidden accept='.json' onChange={(e) => handleFileUpload(e)} />}
+            <ListItemIcon sx={{ my: 'auto', minWidth: !item?.icon ? 18 : 36 }}>{itemIcon}</ListItemIcon>
+            <ListItemText
+                primary={
+                    <Typography variant={customization.isOpen.findIndex((id) => id === item.id) > -1 ? 'h5' : 'body1'} color='inherit'>
+                        {item.title}
+                    </Typography>
+                }
+                secondary={
+                    item.caption && (
+                        <Typography variant='caption' sx={{ ...theme.typography.subMenuCaption }} display='block' gutterBottom>
+                            {item.caption}
+                        </Typography>
+                    )
+                }
+            />
+            {item.chip && (
+                <Chip
+                    color={item.chip.color}
+                    variant={item.chip.variant}
+                    size={item.chip.size}
+                    label={item.chip.label}
+                    avatar={item.chip.avatar && <Avatar>{item.chip.avatar}</Avatar>}
+                />
+            )}
+        </ListItemButton>
+    )
+}
+
+NavItem.propTypes = {
+    item: PropTypes.object,
+    level: PropTypes.number,
+    navType: PropTypes.string,
+    onClick: PropTypes.func,
+    onUploadFile: PropTypes.func
+}
+
+export default NavItem
@@ -0,0 +1,27 @@
+// material-ui
+import { Typography } from '@mui/material'
+
+// project imports
+import NavGroup from './NavGroup'
+import menuItem from 'menu-items'
+
+// ==============================|| SIDEBAR MENU LIST ||============================== //
+
+const MenuList = () => {
+    const navItems = menuItem.items.map((item) => {
+        switch (item.type) {
+            case 'group':
+                return <NavGroup key={item.id} item={item} />
+            default:
+                return (
+                    <Typography key={item.id} variant='h6' color='error' align='center'>
+                        Menu Items Error
+                    </Typography>
+                )
+        }
+    })
+
+    return <>{navItems}</>
+}
+
+export default MenuList
@@ -0,0 +1,85 @@
+import PropTypes from 'prop-types'
+
+// material-ui
+import { useTheme } from '@mui/material/styles'
+import { Box, Drawer, useMediaQuery } from '@mui/material'
+
+// third-party
+import PerfectScrollbar from 'react-perfect-scrollbar'
+import { BrowserView, MobileView } from 'react-device-detect'
+
+// project imports
+import MenuList from './MenuList'
+import LogoSection from '../LogoSection'
+import { drawerWidth } from 'store/constant'
+
+// ==============================|| SIDEBAR DRAWER ||============================== //
+
+const Sidebar = ({ drawerOpen, drawerToggle, window }) => {
+    const theme = useTheme()
+    const matchUpMd = useMediaQuery(theme.breakpoints.up('md'))
+
+    const drawer = (
+        <>
+            <Box sx={{ display: { xs: 'block', md: 'none' } }}>
+                <Box sx={{ display: 'flex', p: 2, mx: 'auto' }}>
+                    <LogoSection />
+                </Box>
+            </Box>
+            <BrowserView>
+                <PerfectScrollbar
+                    component='div'
+                    style={{
+                        height: !matchUpMd ? 'calc(100vh - 56px)' : 'calc(100vh - 88px)',
+                        paddingLeft: '16px',
+                        paddingRight: '16px'
+                    }}
+                >
+                    <MenuList />
+                </PerfectScrollbar>
+            </BrowserView>
+            <MobileView>
+                <Box sx={{ px: 2 }}>
+                    <MenuList />
+                </Box>
+            </MobileView>
+        </>
+    )
+
+    const container = window !== undefined ? () => window.document.body : undefined
+
+    return (
+        <Box component='nav' sx={{ flexShrink: { md: 0 }, width: matchUpMd ? drawerWidth : 'auto' }} aria-label='mailbox folders'>
+            <Drawer
+                container={container}
+                variant={matchUpMd ? 'persistent' : 'temporary'}
+                anchor='left'
+                open={drawerOpen}
+                onClose={drawerToggle}
+                sx={{
+                    '& .MuiDrawer-paper': {
+                        width: drawerWidth,
+                        background: theme.palette.background.default,
+                        color: theme.palette.text.primary,
+                        borderRight: 'none',
+                        [theme.breakpoints.up('md')]: {
+                            top: '66px'
+                        }
+                    }
+                }}
+                ModalProps={{ keepMounted: true }}
+                color='inherit'
+            >
+                {drawer}
+            </Drawer>
+        </Box>
+    )
+}
+
+Sidebar.propTypes = {
+    drawerOpen: PropTypes.bool,
+    drawerToggle: PropTypes.func,
+    window: PropTypes.object
+}
+
+export default Sidebar