Initial push

packages/ui/src/store/actions.js

@@ -0,0 +1,46 @@
+// action - customization reducer
+export const SET_MENU = '@customization/SET_MENU'
+export const MENU_TOGGLE = '@customization/MENU_TOGGLE'
+export const MENU_OPEN = '@customization/MENU_OPEN'
+export const SET_FONT_FAMILY = '@customization/SET_FONT_FAMILY'
+export const SET_BORDER_RADIUS = '@customization/SET_BORDER_RADIUS'
+export const SET_LAYOUT = '@customization/SET_LAYOUT '
+export const SET_DARKMODE = '@customization/SET_DARKMODE'
+
+// action - canvas reducer
+export const REMOVE_EDGE = '@canvas/REMOVE_EDGE'
+export const SET_DIRTY = '@canvas/SET_DIRTY'
+export const REMOVE_DIRTY = '@canvas/REMOVE_DIRTY'
+export const SET_CHATFLOW = '@canvas/SET_CHATFLOW'
+
+// action - notifier reducer
+export const ENQUEUE_SNACKBAR = 'ENQUEUE_SNACKBAR'
+export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR'
+export const REMOVE_SNACKBAR = 'REMOVE_SNACKBAR'
+
+// action - dialog reducer
+export const SHOW_CONFIRM = 'SHOW_CONFIRM'
+export const HIDE_CONFIRM = 'HIDE_CONFIRM'
+
+export const enqueueSnackbar = (notification) => {
+    const key = notification.options && notification.options.key
+
+    return {
+        type: ENQUEUE_SNACKBAR,
+        notification: {
+            ...notification,
+            key: key || new Date().getTime() + Math.random()
+        }
+    }
+}
+
+export const closeSnackbar = (key) => ({
+    type: CLOSE_SNACKBAR,
+    dismissAll: !key, // dismiss all if no key has been defined
+    key
+})
+
+export const removeSnackbar = (key) => ({
+    type: REMOVE_SNACKBAR,
+    key
+})

packages/ui/src/store/constant.js

@@ -0,0 +1,5 @@
+// constant
+export const gridSpacing = 3
+export const drawerWidth = 260
+export const appDrawerWidth = 320
+export const baseURL = process.env.NODE_ENV === 'production' ? window.location.origin : window.location.origin.replace(':8080', ':3000')

packages/ui/src/store/context/ConfirmContext.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+const ConfirmContext = React.createContext()
+
+export default ConfirmContext

packages/ui/src/store/context/ConfirmContextProvider.js

@@ -0,0 +1,16 @@
+import { useReducer } from 'react'
+import PropTypes from 'prop-types'
+import alertReducer, { initialState } from '../reducers/dialogReducer'
+import ConfirmContext from './ConfirmContext'
+
+const ConfirmContextProvider = ({ children }) => {
+    const [state, dispatch] = useReducer(alertReducer, initialState)
+
+    return <ConfirmContext.Provider value={[state, dispatch]}>{children}</ConfirmContext.Provider>
+}
+
+ConfirmContextProvider.propTypes = {
+    children: PropTypes.any
+}
+
+export default ConfirmContextProvider

packages/ui/src/store/context/ReactFlowContext.js

@@ -0,0 +1,35 @@
+import { createContext, useState } from 'react'
+import PropTypes from 'prop-types'
+
+const initialValue = {
+    reactFlowInstance: null,
+    setReactFlowInstance: () => {},
+    deleteNode: () => {}
+}
+
+export const flowContext = createContext(initialValue)
+
+export const ReactFlowContext = ({ children }) => {
+    const [reactFlowInstance, setReactFlowInstance] = useState(null)
+
+    const deleteNode = (id) => {
+        reactFlowInstance.setNodes(reactFlowInstance.getNodes().filter((n) => n.id !== id))
+        reactFlowInstance.setEdges(reactFlowInstance.getEdges().filter((ns) => ns.source !== id && ns.target !== id))
+    }
+
+    return (
+        <flowContext.Provider
+            value={{
+                reactFlowInstance,
+                setReactFlowInstance,
+                deleteNode
+            }}
+        >
+            {children}
+        </flowContext.Provider>
+    )
+}
+
+ReactFlowContext.propTypes = {
+    children: PropTypes.any
+}

packages/ui/src/store/index.js

@@ -0,0 +1,9 @@
+import { createStore } from 'redux'
+import reducer from './reducer'
+
+// ==============================|| REDUX - MAIN STORE ||============================== //
+
+const store = createStore(reducer)
+const persister = 'Free'
+
+export { store, persister }

packages/ui/src/store/reducer.js

@@ -0,0 +1,18 @@
+import { combineReducers } from 'redux'
+
+// reducer import
+import customizationReducer from './reducers/customizationReducer'
+import canvasReducer from './reducers/canvasReducer'
+import notifierReducer from './reducers/notifierReducer'
+import dialogReducer from './reducers/dialogReducer'
+
+// ==============================|| COMBINE REDUCER ||============================== //
+
+const reducer = combineReducers({
+    customization: customizationReducer,
+    canvas: canvasReducer,
+    notifier: notifierReducer,
+    dialog: dialogReducer
+})
+
+export default reducer

packages/ui/src/store/reducers/canvasReducer.js

@@ -0,0 +1,39 @@
+// action - state management
+import * as actionTypes from '../actions'
+
+export const initialState = {
+    removeEdgeId: '',
+    isDirty: false,
+    chatflow: null
+}
+
+// ==============================|| CANVAS REDUCER ||============================== //
+
+const canvasReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case actionTypes.REMOVE_EDGE:
+            return {
+                ...state,
+                removeEdgeId: action.edgeId
+            }
+        case actionTypes.SET_DIRTY:
+            return {
+                ...state,
+                isDirty: true
+            }
+        case actionTypes.REMOVE_DIRTY:
+            return {
+                ...state,
+                isDirty: false
+            }
+        case actionTypes.SET_CHATFLOW:
+            return {
+                ...state,
+                chatflow: action.chatflow
+            }
+        default:
+            return state
+    }
+}
+
+export default canvasReducer

packages/ui/src/store/reducers/customizationReducer.js

@@ -0,0 +1,57 @@
+// project imports
+import config from 'config'
+
+// action - state management
+import * as actionTypes from '../actions'
+
+export const initialState = {
+    isOpen: [], // for active default menu
+    fontFamily: config.fontFamily,
+    borderRadius: config.borderRadius,
+    opened: true,
+    isHorizontal: localStorage.getItem('isHorizontal') === 'true' ? true : false,
+    isDarkMode: localStorage.getItem('isDarkMode') === 'true' ? true : false
+}
+
+// ==============================|| CUSTOMIZATION REDUCER ||============================== //
+
+const customizationReducer = (state = initialState, action) => {
+    let id
+    switch (action.type) {
+        case actionTypes.MENU_OPEN:
+            id = action.id
+            return {
+                ...state,
+                isOpen: [id]
+            }
+        case actionTypes.SET_MENU:
+            return {
+                ...state,
+                opened: action.opened
+            }
+        case actionTypes.SET_FONT_FAMILY:
+            return {
+                ...state,
+                fontFamily: action.fontFamily
+            }
+        case actionTypes.SET_BORDER_RADIUS:
+            return {
+                ...state,
+                borderRadius: action.borderRadius
+            }
+        case actionTypes.SET_LAYOUT:
+            return {
+                ...state,
+                isHorizontal: action.isHorizontal
+            }
+        case actionTypes.SET_DARKMODE:
+            return {
+                ...state,
+                isDarkMode: action.isDarkMode
+            }
+        default:
+            return state
+    }
+}
+
+export default customizationReducer

packages/ui/src/store/reducers/dialogReducer.js

@@ -0,0 +1,28 @@
+import { SHOW_CONFIRM, HIDE_CONFIRM } from '../actions'
+
+export const initialState = {
+    show: false,
+    title: '',
+    description: '',
+    confirmButtonName: 'OK',
+    cancelButtonName: 'Cancel'
+}
+
+const alertReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case SHOW_CONFIRM:
+            return {
+                show: true,
+                title: action.payload.title,
+                description: action.payload.description,
+                confirmButtonName: action.payload.confirmButtonName,
+                cancelButtonName: action.payload.cancelButtonName
+            }
+        case HIDE_CONFIRM:
+            return initialState
+        default:
+            return state
+    }
+}
+
+export default alertReducer

packages/ui/src/store/reducers/notifierReducer.js

@@ -0,0 +1,40 @@
+import { ENQUEUE_SNACKBAR, CLOSE_SNACKBAR, REMOVE_SNACKBAR } from '../actions'
+
+export const initialState = {
+    notifications: []
+}
+
+const notifierReducer = (state = initialState, action) => {
+    switch (action.type) {
+        case ENQUEUE_SNACKBAR:
+            return {
+                ...state,
+                notifications: [
+                    ...state.notifications,
+                    {
+                        key: action.key,
+                        ...action.notification
+                    }
+                ]
+            }
+
+        case CLOSE_SNACKBAR:
+            return {
+                ...state,
+                notifications: state.notifications.map((notification) =>
+                    action.dismissAll || notification.key === action.key ? { ...notification, dismissed: true } : { ...notification }
+                )
+            }
+
+        case REMOVE_SNACKBAR:
+            return {
+                ...state,
+                notifications: state.notifications.filter((notification) => notification.key !== action.key)
+            }
+
+        default:
+            return state
+    }
+}
+
+export default notifierReducer