- Updated .js files to .jsx on frontend.

- Removed Yarn dependency and replaced with PNPM
- Changed Frontend to render via vite

CONTRIBUTING.md

@@ -44,9 +44,9 @@ Flowise has 3 different modules in a single mono repository.
 
 #### Prerequisite
 
--   Install [Yarn v1](https://classic.yarnpkg.com/en/docs/install)
+-   Install [PNPM](https://pnpm.io/installation)
     ```bash
-    npm i -g yarn
+    npm i -g pnpm
     ```
 
 #### Step by step
@@ -71,19 +71,19 @@ Flowise has 3 different modules in a single mono repository.
 6. Install all dependencies of all modules:
 
     ```bash
-    yarn install
+    pnpm install
     ```
 
 7. Build all the code:
 
     ```bash
-    yarn build
+    pnpm build
     ```
 
 8. Start the app on [http://localhost:3000](http://localhost:3000)
 
     ```bash
-    yarn start
+    pnpm start
     ```
 
 9. For development:
@@ -93,23 +93,23 @@ Flowise has 3 different modules in a single mono repository.
     - Run
 
     ```bash
-    yarn dev
+    pnpm dev
     ```
 
-    Any changes made in `packages/ui` or `packages/server` will be reflected on [http://localhost:8080](http://localhost:8080)
+    Any changes made in `packages/ui` or `packages/server` will be reflected on [http://localhost:5173](http://localhost:5173)
 
-    For changes made in `packages/components`, run `yarn build` again to pickup the changes.
+    For changes made in `packages/components`, run `pnpm build` again to pickup the changes.
 
 10. After making all the changes, run
 
     ```bash
-    yarn build
+    pnpm build
     ```
 
     and
 
     ```bash
-    yarn start
+    pnpm start
     ```
 
     to make sure everything works fine in production.

package.json

@@ -10,20 +10,18 @@
         "components"
     ],
     "scripts": {
-        "build": "turbo run build",
+        "dev": "kill-port 3000 5173 && pnpm --filter \"./packages/**\" dev",
-        "build-force": "turbo run build --force",
+        "build": "pnpm --filter \"./packages/**\" build",
-        "dev": "turbo run dev --parallel",
+        "start": "kill-port 3000 && run-script-os",
-        "start": "run-script-os",
         "start:windows": "cd packages/server/bin && run start",
         "start:default": "cd packages/server/bin && ./run start",
-        "clean": "npm exec -ws -- rimraf dist build",
+        "clean": "pnpm exec -ws -- rimraf dist build",
         "format": "prettier --write \"**/*.{ts,tsx,md}\"",
-        "test": "turbo run test",
         "lint": "eslint \"**/*.{js,jsx,ts,tsx,json,md}\"",
-        "lint-fix": "yarn lint --fix",
+        "lint-fix": "pnpm lint --fix",
         "quick": "pretty-quick --staged",
         "postinstall": "husky install",
-        "migration:create": "yarn typeorm migration:create"
+        "migration:create": "pnpm typeorm migration:create"
     },
     "lint-staged": {
         "*.{js,jsx,ts,tsx,json,md}": "eslint --fix"
@@ -43,12 +41,12 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-unused-imports": "^2.0.0",
         "husky": "^8.0.1",
+        "kill-port": "^2.0.1",
         "lint-staged": "^13.0.3",
         "prettier": "^2.7.1",
         "pretty-quick": "^3.1.3",
         "rimraf": "^3.0.2",
         "run-script-os": "^1.1.6",
-        "turbo": "1.7.4",
         "typescript": "^4.8.4"
     },
     "engines": {

packages/components/gulpfile.ts

@@ -1,6 +1,4 @@
-import gulp from 'gulp'
+const { src, dest } = require('gulp')
-
-const { src, dest } = gulp
 
 function copyIcons() {
     return src(['nodes/**/*.{jpg,png,svg}']).pipe(dest('dist/nodes'))

packages/components/package.json

@@ -39,6 +39,8 @@
         "cheerio": "^1.0.0-rc.12",
         "chromadb": "^1.5.11",
         "cohere-ai": "^6.2.0",
+        "crypto-js": "^4.1.1",
+        "css-what": "^6.1.0",
         "d3-dsv": "2",
         "dotenv": "^16.0.0",
         "express": "^4.17.3",
@@ -53,6 +55,7 @@
         "langsmith": "^0.0.32",
         "linkifyjs": "^4.1.1",
         "llmonitor": "^0.5.5",
+        "lodash": "^4.17.21",
         "mammoth": "^1.5.1",
         "moment": "^2.29.3",
         "mongodb": "^6.2.0",
@@ -70,19 +73,27 @@
         "pyodide": ">=0.21.0-alpha.2",
         "redis": "^4.6.7",
         "replicate": "^0.12.3",
+        "socket.io": "^4.6.1",
         "srt-parser-2": "^1.2.3",
+        "typeorm": "^0.3.6",
         "vm2": "^3.9.19",
         "weaviate-ts-client": "^1.1.0",
+        "winston": "^3.9.0",
         "ws": "^8.9.0",
+        "zod": "^3.22.4",
         "zod-to-json-schema": "^3.21.4"
     },
     "devDependencies": {
+        "@types/crypto-js": "^4.1.1",
         "@types/gulp": "4.0.9",
+        "@types/lodash": "^4.14.202",
         "@types/node-fetch": "2.6.2",
         "@types/object-hash": "^3.0.2",
         "@types/pg": "^8.10.2",
         "@types/ws": "^8.5.3",
+        "babel-register": "^6.26.0",
         "gulp": "^4.0.2",
+        "ts-node": "^10.7.0",
         "typescript": "^4.8.4"
     }
 }

packages/components/tsconfig.json

@@ -16,5 +16,6 @@
         "declaration": true,
         "module": "commonjs"
     },
-    "include": ["src", "nodes", "credentials"]
+    "include": ["src", "nodes", "credentials"],
+    "exclude": ["gulpfile.ts", "node_modules", "dist"]
 }

packages/server/nodemon.json

@@ -1,6 +1,6 @@
 {
     "ignore": ["**/*.spec.ts", ".git", "node_modules"],
     "watch": ["commands", "index.ts", "src", "../components/nodes", "../components/src"],
-    "exec": "yarn oclif-dev",
+    "exec": "./bin/dev start",
     "ext": "ts"
 }

packages/server/package.json

@@ -24,12 +24,12 @@
         "start": "run-script-os",
         "start:windows": "cd bin && run start",
         "start:default": "cd bin && ./run start",
-        "dev": "concurrently \"yarn watch\" \"nodemon\"",
+        "dev": "nodemon",
         "oclif-dev": "run-script-os",
         "oclif-dev:windows": "cd bin && dev start",
         "oclif-dev:default": "cd bin && ./dev start",
         "postpack": "shx rm -f oclif.manifest.json",
-        "prepack": "yarn build && oclif manifest && oclif readme",
+        "prepack": "pnpm build && oclif manifest && oclif readme",
         "typeorm": "typeorm-ts-node-commonjs",
         "watch": "tsc --watch",
         "version": "oclif readme && git add README.md"
@@ -46,6 +46,8 @@
     "license": "SEE LICENSE IN LICENSE.md",
     "dependencies": {
         "@oclif/core": "^1.13.10",
+        "@types/lodash": "^4.14.202",
+        "@types/uuid": "^9.0.7",
         "async-mutex": "^0.4.0",
         "axios": "^0.27.2",
         "cors": "^2.8.5",
@@ -54,11 +56,14 @@
         "express": "^4.17.3",
         "express-basic-auth": "^1.2.1",
         "express-rate-limit": "^6.9.0",
-        "flowise-components": "*",
+        "flowise-components": "workspace:^",
-        "flowise-ui": "*",
+        "flowise-ui": "workspace:^",
+        "lodash": "^4.17.21",
+        "moment": "^2.29.3",
         "moment-timezone": "^0.5.34",
         "multer": "^1.4.5-lts.1",
         "mysql": "^2.18.1",
+        "openai": "^4.20.0",
         "pg": "^8.11.1",
         "reflect-metadata": "^0.1.13",
         "socket.io": "^4.6.1",
@@ -72,7 +77,7 @@
         "@types/crypto-js": "^4.1.1",
         "@types/multer": "^1.4.7",
         "concurrently": "^7.1.0",
-        "nodemon": "^2.0.15",
+        "nodemon": "^2.0.22",
         "oclif": "^3",
         "run-script-os": "^1.1.6",
         "shx": "^0.3.3",

packages/ui/craco.config.js

@@ -1,16 +0,0 @@
-module.exports = {
-    webpack: {
-        configure: {
-            module: {
-                rules: [
-                    {
-                        test: /\.m?js$/,
-                        resolve: {
-                            fullySpecified: false
-                        }
-                    }
-                ]
-            }
-        }
-    }
-}

packages/ui/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>Flowise - Low-code LLM apps builder</title>
+	<link rel="icon" href="favicon.ico" />
+	<!-- Meta Tags-->
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta name="theme-color" content="#2296f3" />
+	<meta name="title" content="Flowise - Low-code LLM apps builder" />
+	<meta name="description" content="Flowise helps you to better integrate Web3 with existing Web2 applications" />
+	<meta name="keywords" content="react, material-ui, reactjs, reactjs, workflow automation, web3, web2, blockchain" />
+	<meta name="author" content="CodedThemes" />
+	<!-- Open Graph / Facebook -->
+	<meta property="og:locale" content="en_US" />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="https://flowiseai.com/" />
+	<meta property="og:site_name" content="flowiseai.com" />
+	<meta property="article:publisher" content="https://www.facebook.com/codedthemes" />
+	<meta property="og:title" content="Flowise - Low-code LLM apps builder" />
+	<meta property="og:description" content="Flowise helps you to better build LLM flows using Langchain in simple GUI" />
+	<meta property="og:image" content="https://flowiseai.com/og-image/og-facebook.png" />
+	<!-- Twitter -->
+	<meta property="twitter:card" content="summary_large_image" />
+	<meta property="twitter:url" content="https://flowiseai.com" />
+	<meta property="twitter:title" content="Flowise - Low-code LLM apps builder" />
+	<meta property="twitter:description" content="Flowise helps you to better build LLM flows using Langchain in simple GUI" />
+	<meta property="twitter:image" content="https://flowiseai.com/og-image/og-twitter.png" />
+	<meta name="twitter:creator" content="@codedthemes" />
+
+	<link rel="preconnect" href="https://fonts.gstatic.com" />
+	<link
+			href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap"
+			rel="stylesheet"
+	/>
+</head>
+
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+<div id="portal"></div>
+<script type="module" src="src/index.jsx"></script>
+</body>
+</html>

packages/ui/jsconfig.json

@@ -2,7 +2,9 @@
     "compilerOptions": {
         "target": "esnext",
         "module": "commonjs",
-        "baseUrl": "src"
+        "paths": {
+            "@/*": ["./src/*"]
+        }
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules"]

packages/ui/package.json

@@ -15,7 +15,11 @@
         "@mui/material": "^5.11.12",
         "@mui/x-data-grid": "^6.8.0",
         "@tabler/icons": "^1.39.1",
+        "@vitejs/plugin-react": "^4.2.0",
+        "axios": "^0.27.2",
         "clsx": "^1.1.1",
+        "dotenv": "^16.0.0",
+        "find-up": "^7.0.0",
         "flowise-embed": "*",
         "flowise-embed-react": "*",
         "flowise-react-json-view": "*",
@@ -26,6 +30,7 @@
         "lodash": "^4.17.21",
         "moment": "^2.29.3",
         "notistack": "^2.0.4",
+        "openai": "^4.20.0",
         "prismjs": "^1.28.0",
         "prop-types": "^15.7.2",
         "react": "^18.2.0",
@@ -48,14 +53,14 @@
         "remark-gfm": "^3.0.1",
         "remark-math": "^5.1.1",
         "socket.io-client": "^4.6.1",
+        "uuid": "^9.0.1",
+        "vite": "^5.0.2",
+        "vite-plugin-react-js-support": "^1.0.7",
         "yup": "^0.32.9"
     },
     "scripts": {
-        "start": "craco start",
+        "dev": "vite",
-        "dev": "craco start",
+        "build": "vite build"
-        "build": "craco build",
-        "test": "craco test",
-        "eject": "craco eject"
     },
     "babel": {
         "presets": [
@@ -77,7 +82,6 @@
     "devDependencies": {
         "@babel/eslint-parser": "^7.15.8",
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-        "@craco/craco": "^7.1.0",
         "@testing-library/jest-dom": "^5.11.10",
         "@testing-library/react": "^14.0.0",
         "@testing-library/user-event": "^12.8.3",

packages/ui/src/App.jsx

@@ -4,13 +4,13 @@ import { ThemeProvider } from '@mui/material/styles'
 import { CssBaseline, StyledEngineProvider } from '@mui/material'
 
 // routing
-import Routes from 'routes'
+import Routes from '@/routes'
 
 // defaultTheme
-import themes from 'themes'
+import themes from '@/themes'
 
 // project imports
-import NavigationScroll from 'layout/NavigationScroll'
+import NavigationScroll from '@/layout/NavigationScroll'
 
 // ==============================|| APP ||============================== //
 

packages/ui/src/api/client.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { baseURL } from 'store/constant'
+import { baseURL } from '@/store/constant'
 
 const apiClient = axios.create({
     baseURL: `${baseURL}/api/v1`,

packages/ui/src/assets/scss/style.scss

@@ -2,7 +2,7 @@
 @import 'themes-vars.module.scss';
 
 // third-party
-@import '~react-perfect-scrollbar/dist/css/styles.css';
+@import 'react-perfect-scrollbar/dist/css/styles.css';
 
 // ==============================|| LIGHT BOX ||============================== //
 .fullscreen .react-images__blanket {

packages/ui/src/hooks/useApi.jsx

@@ -1,3 +1,4 @@
+
 import { useState } from 'react'
 
 export default (apiFunc) => {

packages/ui/src/hooks/useConfirm.jsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
-import ConfirmContext from 'store/context/ConfirmContext'
+import ConfirmContext from '@/store/context/ConfirmContext'
-import { HIDE_CONFIRM, SHOW_CONFIRM } from 'store/actions'
+import { HIDE_CONFIRM, SHOW_CONFIRM } from '@/store/actions'
 
 let resolveCallback
 const useConfirm = () => {

packages/ui/src/index.jsx

@@ -1,17 +1,17 @@
 import React from 'react'
-import App from './App'
+import App from '@/App'
-import { store } from 'store'
+import { store } from '@/store'
 import { createRoot } from 'react-dom/client'
 
 // style + assets
-import 'assets/scss/style.scss'
+import '@/assets/scss/style.scss'
 
 // third party
 import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import { SnackbarProvider } from 'notistack'
-import ConfirmContextProvider from 'store/context/ConfirmContextProvider'
+import ConfirmContextProvider from '@/store/context/ConfirmContextProvider'
-import { ReactFlowContext } from 'store/context/ReactFlowContext'
+import { ReactFlowContext } from '@/store/context/ReactFlowContext'
 
 const container = document.getElementById('root')
 const root = createRoot(container)

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

@@ -24,18 +24,18 @@ import {
 import PerfectScrollbar from 'react-perfect-scrollbar'
 
 // project imports
-import MainCard from 'ui-component/cards/MainCard'
+import MainCard from '@/ui-component/cards/MainCard'
-import Transitions from 'ui-component/extended/Transitions'
+import Transitions from '@/ui-component/extended/Transitions'
-import { BackdropLoader } from 'ui-component/loading/BackdropLoader'
+import { BackdropLoader } from '@/ui-component/loading/BackdropLoader'
-import AboutDialog from 'ui-component/dialog/AboutDialog'
+import AboutDialog from '@/ui-component/dialog/AboutDialog'
 
 // assets
 import { IconLogout, IconSettings, IconFileExport, IconFileDownload, IconInfoCircle } from '@tabler/icons'
 
 // API
-import databaseApi from 'api/database'
+import databaseApi from '@/api/database'
 
-import { SET_MENU } from 'store/actions'
+import { SET_MENU } from '@/store/actions'
 
 import './index.css'
 

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

@@ -16,7 +16,7 @@ import ProfileSection from './ProfileSection'
 import { IconMenu2 } from '@tabler/icons'
 
 // store
-import { SET_DARKMODE } from 'store/actions'
+import { SET_DARKMODE } from '@/store/actions'
 
 // ==============================|| MAIN NAVBAR / HEADER ||============================== //
 

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

@@ -4,8 +4,8 @@ import { Link } from 'react-router-dom'
 import { ButtonBase } from '@mui/material'
 
 // project imports
-import config from 'config'
+import config from '@/config'
-import Logo from 'ui-component/extended/Logo'
+import Logo from '@/ui-component/extended/Logo'
 
 // ==============================|| MAIN LOGO ||============================== //
 

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

@@ -8,8 +8,8 @@ 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 { MENU_OPEN, SET_MENU } from '@/store/actions'
-import config from 'config'
+import config from '@/config'
 
 // assets
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'

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

@@ -3,7 +3,7 @@ import { Typography } from '@mui/material'
 
 // project imports
 import NavGroup from './NavGroup'
-import menuItem from 'menu-items'
+import menuItem from '@/menu-items'
 
 // ==============================|| SIDEBAR MENU 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 } from '@/store/constant'
 
 // ==============================|| SIDEBAR DRAWER ||============================== //
 

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

@@ -9,8 +9,8 @@ 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 } from '@/store/constant'
-import { SET_MENU } from 'store/actions'
+import { SET_MENU } from '@/store/actions'
 
 // styles
 const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({

packages/ui/src/routes/CanvasRoutes.jsx

@@ -1,12 +1,12 @@
 import { lazy } from 'react'
 
 // project imports
-import Loadable from 'ui-component/loading/Loadable'
+import Loadable from '@/ui-component/loading/Loadable'
-import MinimalLayout from 'layout/MinimalLayout'
+import MinimalLayout from '@/layout/MinimalLayout'
 
 // canvas routing
-const Canvas = Loadable(lazy(() => import('views/canvas')))
+const Canvas = Loadable(lazy(() => import('@/views/canvas')))
-const MarketplaceCanvas = Loadable(lazy(() => import('views/marketplaces/MarketplaceCanvas')))
+const MarketplaceCanvas = Loadable(lazy(() => import('@/views/marketplaces/MarketplaceCanvas')))
 
 // ==============================|| CANVAS ROUTING ||============================== //
 

packages/ui/src/routes/ChatbotRoutes.jsx

@@ -1,11 +1,11 @@
 import { lazy } from 'react'
 
 // project imports
-import Loadable from 'ui-component/loading/Loadable'
+import Loadable from '@/ui-component/loading/Loadable'
-import MinimalLayout from 'layout/MinimalLayout'
+import MinimalLayout from '@/layout/MinimalLayout'
 
 // canvas routing
-const ChatbotFull = Loadable(lazy(() => import('views/chatbot')))
+const ChatbotFull = Loadable(lazy(() => import('@/views/chatbot')))
 
 // ==============================|| CANVAS ROUTING ||============================== //
 

packages/ui/src/routes/MainRoutes.jsx

@@ -1,26 +1,26 @@
 import { lazy } from 'react'
 
 // project imports
-import MainLayout from 'layout/MainLayout'
+import MainLayout from '@/layout/MainLayout'
-import Loadable from 'ui-component/loading/Loadable'
+import Loadable from '@/ui-component/loading/Loadable'
 
 // chatflows routing
-const Chatflows = Loadable(lazy(() => import('views/chatflows')))
+const Chatflows = Loadable(lazy(() => import('@/views/chatflows')))
 
 // marketplaces routing
-const Marketplaces = Loadable(lazy(() => import('views/marketplaces')))
+const Marketplaces = Loadable(lazy(() => import('@/views/marketplaces')))
 
 // apikey routing
-const APIKey = Loadable(lazy(() => import('views/apikey')))
+const APIKey = Loadable(lazy(() => import('@/views/apikey')))
 
 // tools routing
-const Tools = Loadable(lazy(() => import('views/tools')))
+const Tools = Loadable(lazy(() => import('@/views/tools')))
 
 // assistants routing
-const Assistants = Loadable(lazy(() => import('views/assistants')))
+const Assistants = Loadable(lazy(() => import('@/views/assistants')))
 
 // credentials routing
-const Credentials = Loadable(lazy(() => import('views/credentials')))
+const Credentials = Loadable(lazy(() => import('@/views/credentials')))
 
 // ==============================|| MAIN ROUTING ||============================== //
 

packages/ui/src/routes/index.jsx

@@ -4,7 +4,7 @@ import { useRoutes } from 'react-router-dom'
 import MainRoutes from './MainRoutes'
 import CanvasRoutes from './CanvasRoutes'
 import ChatbotRoutes from './ChatbotRoutes'
-import config from 'config'
+import config from '@/config'
 
 // ==============================|| ROUTING RENDER ||============================== //
 

packages/ui/src/store/constant.js

@@ -3,7 +3,8 @@ export const gridSpacing = 3
 export const drawerWidth = 260
 export const appDrawerWidth = 320
 export const maxScroll = 100000
-export const baseURL = process.env.NODE_ENV === 'production' ? window.location.origin : window.location.origin.replace(':8080', ':3000')
+export const baseURL =
+    import.meta.env.PROD === true ? window.location.protocol : window.location.protocol + '//' + window.location.hostname + ':3000'
 export const uiBaseURL = window.location.origin
 export const FLOWISE_CREDENTIAL_ID = 'FLOWISE_CREDENTIAL_ID'
 export const REDACTED_CREDENTIAL_VALUE = '_FLOWISE_BLANK_07167752-1a71-43b1-bf8f-4f32252165db'

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

@@ -1,9 +1,9 @@
 import { createContext, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
-import { getUniqueNodeId } from 'utils/genericHelper'
+import { getUniqueNodeId } from '@/utils/genericHelper'
 import { cloneDeep } from 'lodash'
-import { SET_DIRTY } from 'store/actions'
+import { SET_DIRTY } from '@/store/actions'
 
 const initialValue = {
     reactFlowInstance: null,

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

@@ -1,5 +1,5 @@
 // project imports
-import config from 'config'
+import config from '@/config'
 
 // action - state management
 import * as actionTypes from '../actions'

packages/ui/src/themes/index.js

@@ -1,7 +1,7 @@
 import { createTheme } from '@mui/material/styles'
 
 // assets
-import colors from 'assets/scss/_themes-vars.module.scss'
+import colors from '@/assets/scss/_themes-vars.module.scss'
 
 // project imports
 import componentStyleOverrides from './compStyleOverride'

packages/ui/src/ui-component/cards/ItemCard.jsx

@@ -5,8 +5,8 @@ import { styled } from '@mui/material/styles'
 import { Box, Grid, Typography } from '@mui/material'
 
 // project imports
-import MainCard from 'ui-component/cards/MainCard'
+import MainCard from '@/ui-component/cards/MainCard'
-import SkeletonChatflowCard from 'ui-component/cards/Skeleton/ChatflowCard'
+import SkeletonChatflowCard from '@/ui-component/cards/Skeleton/ChatflowCard'
 
 const CardWrapper = styled(MainCard)(({ theme }) => ({
     background: theme.palette.card.main,

packages/ui/src/ui-component/dialog/AboutDialog.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { Dialog, DialogContent, DialogTitle, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, Paper } from '@mui/material'
 import moment from 'moment'
 import axios from 'axios'
-import { baseURL } from 'store/constant'
+import { baseURL } from '@/store/constant'
 
 const AboutDialog = ({ show, onCancel }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/ui-component/dialog/AdditionalParamsDialog.jsx

@@ -4,8 +4,8 @@ import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 import { Dialog, DialogContent } from '@mui/material'
 import PerfectScrollbar from 'react-perfect-scrollbar'
-import NodeInputHandler from 'views/canvas/NodeInputHandler'
+import NodeInputHandler from '@/views/canvas/NodeInputHandler'
-import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
 const AdditionalParamsDialog = ({ show, dialogProps, onCancel }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/ui-component/dialog/AnalyseFlowDialog.jsx

@@ -2,7 +2,7 @@ import { createPortal } from 'react-dom'
 import { useDispatch } from 'react-redux'
 import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from 'store/actions'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from '@/store/actions'
 
 // material-ui
 import {
@@ -24,21 +24,21 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import { IconX } from '@tabler/icons'
 
 // Project import
-import CredentialInputHandler from 'views/canvas/CredentialInputHandler'
+import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'
-import { TooltipWithParser } from 'ui-component/tooltip/TooltipWithParser'
+import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
-import { SwitchInput } from 'ui-component/switch/Switch'
+import { SwitchInput } from '@/ui-component/switch/Switch'
-import { Input } from 'ui-component/input/Input'
+import { Input } from '@/ui-component/input/Input'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
-import langsmithPNG from 'assets/images/langchain.png'
+import langsmithPNG from '@/assets/images/langchain.png'
-import langfusePNG from 'assets/images/langfuse.png'
+import langfusePNG from '@/assets/images/langfuse.png'
-import llmonitorPNG from 'assets/images/llmonitor.png'
+import llmonitorPNG from '@/assets/images/llmonitor.png'
 
 // store
-import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
-import useNotifier from 'utils/useNotifier'
+import useNotifier from '@/utils/useNotifier'
 
 // API
-import chatflowsApi from 'api/chatflows'
+import chatflowsApi from '@/api/chatflows'
 
 const analyticProviders = [
     {

packages/ui/src/ui-component/dialog/ConfirmDialog.jsx

@@ -1,7 +1,7 @@
 import { createPortal } from 'react-dom'
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@mui/material'
-import useConfirm from 'hooks/useConfirm'
+import useConfirm from '@/hooks/useConfirm'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
 
 const ConfirmDialog = () => {
     const { onConfirm, onCancel, confirmState } = useConfirm()

packages/ui/src/ui-component/dialog/ExpandTextDialog.jsx

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types'
 import { Button, Dialog, DialogActions, DialogContent, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import PerfectScrollbar from 'react-perfect-scrollbar'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
-import { DarkCodeEditor } from 'ui-component/editor/DarkCodeEditor'
+import { DarkCodeEditor } from '@/ui-component/editor/DarkCodeEditor'
-import { LightCodeEditor } from 'ui-component/editor/LightCodeEditor'
+import { LightCodeEditor } from '@/ui-component/editor/LightCodeEditor'
-import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
 import './ExpandTextDialog.css'
 

packages/ui/src/ui-component/dialog/FormatPromptValuesDialog.jsx

@@ -4,8 +4,8 @@ import { useSelector, useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Dialog, DialogContent, DialogTitle } from '@mui/material'
 import PerfectScrollbar from 'react-perfect-scrollbar'
-import { JsonEditorInput } from 'ui-component/json/JsonEditor'
+import { JsonEditorInput } from '@/ui-component/json/JsonEditor'
-import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
 const FormatPromptValuesDialog = ({ show, dialogProps, onChange, onCancel }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/ui-component/dialog/LoginDialog.jsx

@@ -3,8 +3,8 @@ import { useState } from 'react'
 import PropTypes from 'prop-types'
 
 import { Dialog, DialogActions, DialogContent, Typography, DialogTitle } from '@mui/material'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
-import { Input } from 'ui-component/input/Input'
+import { Input } from '@/ui-component/input/Input'
 
 const LoginDialog = ({ show, dialogProps, onConfirm }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/ui-component/dialog/NodeInfoDialog.jsx

@@ -5,15 +5,15 @@ import PropTypes from 'prop-types'
 
 // Material
 import { Dialog, DialogContent, DialogTitle } from '@mui/material'
-import { TableViewOnly } from 'ui-component/table/Table'
+import { TableViewOnly } from '@/ui-component/table/Table'
 
 // Store
-import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
-import { baseURL } from 'store/constant'
+import { baseURL } from '@/store/constant'
 
 // API
-import configApi from 'api/config'
+import configApi from '@/api/config'
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
 
 const NodeInfoDialog = ({ show, dialogProps, onCancel }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/ui-component/dialog/SaveChatflowDialog.jsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
 import { Button, Dialog, DialogActions, DialogContent, OutlinedInput, DialogTitle } from '@mui/material'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
 
 const SaveChatflowDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/ui-component/dialog/ViewMessagesDialog.jsx

@@ -25,33 +25,33 @@ import {
 import { useTheme } from '@mui/material/styles'
 import DatePicker from 'react-datepicker'
 
-import robotPNG from 'assets/images/robot.png'
+import robotPNG from '@/assets/images/robot.png'
-import userPNG from 'assets/images/account.png'
+import userPNG from '@/assets/images/account.png'
-import msgEmptySVG from 'assets/images/message_empty.svg'
+import msgEmptySVG from '@/assets/images/message_empty.svg'
 import { IconFileExport, IconEraser, IconX } from '@tabler/icons'
 
 // Project import
-import { MemoizedReactMarkdown } from 'ui-component/markdown/MemoizedReactMarkdown'
+import { MemoizedReactMarkdown } from '@/ui-component/markdown/MemoizedReactMarkdown'
-import { CodeBlock } from 'ui-component/markdown/CodeBlock'
+import { CodeBlock } from '@/ui-component/markdown/CodeBlock'
-import SourceDocDialog from 'ui-component/dialog/SourceDocDialog'
+import SourceDocDialog from '@/ui-component/dialog/SourceDocDialog'
-import { MultiDropdown } from 'ui-component/dropdown/MultiDropdown'
+import { MultiDropdown } from '@/ui-component/dropdown/MultiDropdown'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
 
 // store
-import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
 // API
-import chatmessageApi from 'api/chatmessage'
+import chatmessageApi from '@/api/chatmessage'
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
-import useConfirm from 'hooks/useConfirm'
+import useConfirm from '@/hooks/useConfirm'
 
 // Utils
-import { isValidURL, removeDuplicateURL } from 'utils/genericHelper'
+import { isValidURL, removeDuplicateURL } from '@/utils/genericHelper'
-import useNotifier from 'utils/useNotifier'
+import useNotifier from '@/utils/useNotifier'
 
-import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from 'store/actions'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from '@/store/actions'
 
-import 'views/chatmessage/ChatMessage.css'
+import '@/views/chatmessage/ChatMessage.css'
 import 'react-datepicker/dist/react-datepicker.css'
 
 const DatePickerCustomInput = forwardRef(function DatePickerCustomInput({ value, onClick }, ref) {

packages/ui/src/ui-component/dropdown/AsyncDropdown.jsx

@@ -9,10 +9,10 @@ import { Popper, CircularProgress, TextField, Box, Typography } from '@mui/mater
 import { styled } from '@mui/material/styles'
 
 // API
-import credentialsApi from 'api/credentials'
+import credentialsApi from '@/api/credentials'
 
 // const
-import { baseURL } from 'store/constant'
+import { baseURL } from '@/store/constant'
 
 const StyledPopper = styled(Popper)({
     boxShadow: '0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%)',

packages/ui/src/ui-component/extended/Breadcrumbs.jsx

@@ -8,8 +8,8 @@ import { Box, Card, Divider, Grid, Typography } from '@mui/material'
 import MuiBreadcrumbs from '@mui/material/Breadcrumbs'
 
 // project imports
-import config from 'config'
+import config from '@/config'
-import { gridSpacing } from 'store/constant'
+import { gridSpacing } from '@/store/constant'
 
 // assets
 import { IconTallymark1 } from '@tabler/icons'

packages/ui/src/ui-component/extended/Logo.jsx

@@ -1,5 +1,5 @@
-import logo from 'assets/images/flowise_logo.png'
+import logo from '@/assets/images/flowise_logo.png'
-import logoDark from 'assets/images/flowise_logo_dark.png'
+import logoDark from '@/assets/images/flowise_logo_dark.png'
 
 import { useSelector } from 'react-redux'
 

packages/ui/src/ui-component/file/File.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { useTheme } from '@mui/material/styles'
 import { FormControl, Button } from '@mui/material'
 import { IconUpload } from '@tabler/icons'
-import { getFileName } from 'utils/genericHelper'
+import { getFileName } from '@/utils/genericHelper'
 
 export const File = ({ value, fileType, onChange, disabled = false }) => {
     const theme = useTheme()

packages/ui/src/ui-component/grid/DataGrid.jsx

@@ -5,7 +5,7 @@ import { IconPlus } from '@tabler/icons'
 import { Button } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { cloneDeep } from 'lodash'
-import { formatDataGridRows } from 'utils/genericHelper'
+import { formatDataGridRows } from '@/utils/genericHelper'
 
 export const DataGrid = ({ columns, rows, style, disabled = false, hideFooter = false, onChange }) => {
     const [rowValues, setRowValues] = useState(formatDataGridRows(rows) ?? [])

packages/ui/src/ui-component/input/Input.jsx

@@ -1,9 +1,9 @@
 import { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import { FormControl, OutlinedInput, Popover } from '@mui/material'
-import ExpandTextDialog from 'ui-component/dialog/ExpandTextDialog'
+import ExpandTextDialog from '@/ui-component/dialog/ExpandTextDialog'
-import SelectVariable from 'ui-component/json/SelectVariable'
+import SelectVariable from '@/ui-component/json/SelectVariable'
-import { getAvailableNodesForVariable } from 'utils/genericHelper'
+import { getAvailableNodesForVariable } from '@/utils/genericHelper'
 
 export const Input = ({
     inputParam,

packages/ui/src/ui-component/json/JsonEditor.jsx

@@ -4,7 +4,7 @@ import { FormControl, Popover } from '@mui/material'
 import ReactJson from 'flowise-react-json-view'
 import SelectVariable from './SelectVariable'
 import { cloneDeep } from 'lodash'
-import { getAvailableNodesForVariable } from 'utils/genericHelper'
+import { getAvailableNodesForVariable } from '@/utils/genericHelper'
 
 export const JsonEditorInput = ({ value, onChange, inputParam, nodes, edges, nodeId, disabled = false, isDarkMode = false }) => {
     const [myValue, setMyValue] = useState(value ? JSON.parse(value) : {})

packages/ui/src/ui-component/json/SelectVariable.jsx

@@ -2,9 +2,9 @@ import { useSelector } from 'react-redux'
 import PropTypes from 'prop-types'
 import { Box, List, ListItemButton, ListItem, ListItemAvatar, ListItemText, Typography, Stack } from '@mui/material'
 import PerfectScrollbar from 'react-perfect-scrollbar'
-import robotPNG from 'assets/images/robot.png'
+import robotPNG from '@/assets/images/robot.png'
-import chatPNG from 'assets/images/chathistory.png'
+import chatPNG from '@/assets/images/chathistory.png'
-import { baseURL } from 'store/constant'
+import { baseURL } from '@/store/constant'
 
 const SelectVariable = ({ availableNodesForVariable, disabled = false, onSelectAndReturnVal }) => {
     const customization = useSelector((state) => state.customization)

packages/ui/src/ui-component/markdown/CodeBlock.jsx

@@ -1,3 +1,4 @@
+
 import { IconClipboard, IconDownload } from '@tabler/icons'
 import { memo, useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'

packages/ui/src/utils/useNotifier.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useSnackbar } from 'notistack'
-import { removeSnackbar } from 'store/actions'
+import { removeSnackbar } from '@/store/actions'
 
 let displayed = []
 

packages/ui/src/views/apikey/APIKeyDialog.jsx

@@ -2,7 +2,7 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import { useState, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
-import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from 'store/actions'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from '@/store/actions'
 
 import {
     Box,
@@ -18,16 +18,16 @@ import {
     Popover
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
 
 // Icons
 import { IconX, IconCopy } from '@tabler/icons'
 
 // API
-import apikeyApi from 'api/apikey'
+import apikeyApi from '@/api/apikey'
 
 // utils
-import useNotifier from 'utils/useNotifier'
+import useNotifier from '@/utils/useNotifier'
 
 const APIKeyDialog = ({ show, dialogProps, onCancel, onConfirm }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/views/apikey/index.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from 'store/actions'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from '@/store/actions'
 
 // material-ui
 import {
@@ -21,24 +21,24 @@ import {
 import { useTheme } from '@mui/material/styles'
 
 // project imports
-import MainCard from 'ui-component/cards/MainCard'
+import MainCard from '@/ui-component/cards/MainCard'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
 import APIKeyDialog from './APIKeyDialog'
-import ConfirmDialog from 'ui-component/dialog/ConfirmDialog'
+import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
 
 // API
-import apiKeyApi from 'api/apikey'
+import apiKeyApi from '@/api/apikey'
 
 // Hooks
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
-import useConfirm from 'hooks/useConfirm'
+import useConfirm from '@/hooks/useConfirm'
 
 // utils
-import useNotifier from 'utils/useNotifier'
+import useNotifier from '@/utils/useNotifier'
 
 // Icons
 import { IconTrash, IconEdit, IconCopy, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons'
-import APIEmptySVG from 'assets/images/api_empty.svg'
+import APIEmptySVG from '@/assets/images/api_empty.svg'
 
 // ==============================|| APIKey ||============================== //
 

packages/ui/src/views/assistants/AssistantDialog.jsx

@@ -2,33 +2,33 @@ import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import { useState, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
-import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from 'store/actions'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction } from '@/store/actions'
 import { v4 as uuidv4 } from 'uuid'
 
 import { Box, Typography, Button, IconButton, Dialog, DialogActions, DialogContent, DialogTitle, Stack, OutlinedInput } from '@mui/material'
 
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
-import { TooltipWithParser } from 'ui-component/tooltip/TooltipWithParser'
+import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
-import ConfirmDialog from 'ui-component/dialog/ConfirmDialog'
+import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
-import { Dropdown } from 'ui-component/dropdown/Dropdown'
+import { Dropdown } from '@/ui-component/dropdown/Dropdown'
-import { MultiDropdown } from 'ui-component/dropdown/MultiDropdown'
+import { MultiDropdown } from '@/ui-component/dropdown/MultiDropdown'
-import CredentialInputHandler from 'views/canvas/CredentialInputHandler'
+import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'
-import { File } from 'ui-component/file/File'
+import { File } from '@/ui-component/file/File'
-import { BackdropLoader } from 'ui-component/loading/BackdropLoader'
+import { BackdropLoader } from '@/ui-component/loading/BackdropLoader'
 
 // Icons
 import { IconX } from '@tabler/icons'
 
 // API
-import assistantsApi from 'api/assistants'
+import assistantsApi from '@/api/assistants'
 
 // Hooks
-import useConfirm from 'hooks/useConfirm'
+import useConfirm from '@/hooks/useConfirm'
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
 
 // utils
-import useNotifier from 'utils/useNotifier'
+import useNotifier from '@/utils/useNotifier'
-import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from 'store/actions'
+import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
 const assistantAvailableModels = [
     {

packages/ui/src/views/assistants/LoadAssistantDialog.jsx

@@ -2,11 +2,11 @@ import { useState, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import PropTypes from 'prop-types'
 import { Stack, Typography, Dialog, DialogContent, DialogTitle, DialogActions, Box } from '@mui/material'
-import CredentialInputHandler from 'views/canvas/CredentialInputHandler'
+import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'
-import { Dropdown } from 'ui-component/dropdown/Dropdown'
+import { Dropdown } from '@/ui-component/dropdown/Dropdown'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
-import assistantsApi from 'api/assistants'
+import assistantsApi from '@/api/assistants'
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
 
 const LoadAssistantDialog = ({ show, dialogProps, onCancel, onAssistantSelected }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/views/assistants/index.jsx

@@ -6,19 +6,19 @@ import { Grid, Box, Stack, Button } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 
 // project imports
-import MainCard from 'ui-component/cards/MainCard'
+import MainCard from '@/ui-component/cards/MainCard'
-import ItemCard from 'ui-component/cards/ItemCard'
+import ItemCard from '@/ui-component/cards/ItemCard'
-import { gridSpacing } from 'store/constant'
+import { gridSpacing } from '@/store/constant'
-import ToolEmptySVG from 'assets/images/tools_empty.svg'
+import ToolEmptySVG from '@/assets/images/tools_empty.svg'
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
 import AssistantDialog from './AssistantDialog'
 import LoadAssistantDialog from './LoadAssistantDialog'
 
 // API
-import assistantsApi from 'api/assistants'
+import assistantsApi from '@/api/assistants'
 
 // Hooks
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
 
 // icons
 import { IconPlus, IconFileImport } from '@tabler/icons'

packages/ui/src/views/canvas/AddNodes.jsx

@@ -29,16 +29,16 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import PerfectScrollbar from 'react-perfect-scrollbar'
 
 // project imports
-import MainCard from 'ui-component/cards/MainCard'
+import MainCard from '@/ui-component/cards/MainCard'
-import Transitions from 'ui-component/extended/Transitions'
+import Transitions from '@/ui-component/extended/Transitions'
-import { StyledFab } from 'ui-component/button/StyledFab'
+import { StyledFab } from '@/ui-component/button/StyledFab'
 
 // icons
 import { IconPlus, IconSearch, IconMinus, IconX } from '@tabler/icons'
 
 // const
-import { baseURL } from 'store/constant'
+import { baseURL } from '@/store/constant'
-import { SET_COMPONENT_NODES } from 'store/actions'
+import { SET_COMPONENT_NODES } from '@/store/actions'
 
 // ==============================|| ADD NODES||============================== //
 

packages/ui/src/views/canvas/ButtonEdge.jsx

@@ -2,8 +2,8 @@ import { getBezierPath, EdgeText } from 'reactflow'
 import PropTypes from 'prop-types'
 import { useDispatch } from 'react-redux'
 import { useContext } from 'react'
-import { SET_DIRTY } from 'store/actions'
+import { SET_DIRTY } from '@/store/actions'
-import { flowContext } from 'store/context/ReactFlowContext'
+import { flowContext } from '@/store/context/ReactFlowContext'
 
 import './index.css'
 

packages/ui/src/views/canvas/CanvasHeader.jsx

@@ -11,22 +11,22 @@ import { Avatar, Box, ButtonBase, Typography, Stack, TextField } from '@mui/mate
 import { IconSettings, IconChevronLeft, IconDeviceFloppy, IconPencil, IconCheck, IconX, IconCode } from '@tabler/icons'
 
 // project imports
-import Settings from 'views/settings'
+import Settings from '@/views/settings'
-import SaveChatflowDialog from 'ui-component/dialog/SaveChatflowDialog'
+import SaveChatflowDialog from '@/ui-component/dialog/SaveChatflowDialog'
-import APICodeDialog from 'views/chatflows/APICodeDialog'
+import APICodeDialog from '@/views/chatflows/APICodeDialog'
-import AnalyseFlowDialog from 'ui-component/dialog/AnalyseFlowDialog'
+import AnalyseFlowDialog from '@/ui-component/dialog/AnalyseFlowDialog'
-import ViewMessagesDialog from 'ui-component/dialog/ViewMessagesDialog'
+import ViewMessagesDialog from '@/ui-component/dialog/ViewMessagesDialog'
 
 // API
-import chatflowsApi from 'api/chatflows'
+import chatflowsApi from '@/api/chatflows'
 
 // Hooks
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
 
 // utils
-import { generateExportFlowData } from 'utils/genericHelper'
+import { generateExportFlowData } from '@/utils/genericHelper'
-import { uiBaseURL } from 'store/constant'
+import { uiBaseURL } from '@/store/constant'
-import { SET_CHATFLOW } from 'store/actions'
+import { SET_CHATFLOW } from '@/store/actions'
 
 // ==============================|| CANVAS HEADER ||============================== //
 

packages/ui/src/views/canvas/CanvasNode.jsx

@@ -8,16 +8,16 @@ import { IconButton, Box, Typography, Divider, Button } from '@mui/material'
 import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'
 
 // project imports
-import MainCard from 'ui-component/cards/MainCard'
+import MainCard from '@/ui-component/cards/MainCard'
 import NodeInputHandler from './NodeInputHandler'
 import NodeOutputHandler from './NodeOutputHandler'
-import AdditionalParamsDialog from 'ui-component/dialog/AdditionalParamsDialog'
+import AdditionalParamsDialog from '@/ui-component/dialog/AdditionalParamsDialog'
-import NodeInfoDialog from 'ui-component/dialog/NodeInfoDialog'
+import NodeInfoDialog from '@/ui-component/dialog/NodeInfoDialog'
 
 // const
-import { baseURL } from 'store/constant'
+import { baseURL } from '@/store/constant'
 import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons'
-import { flowContext } from 'store/context/ReactFlowContext'
+import { flowContext } from '@/store/context/ReactFlowContext'
 
 const CardWrapper = styled(MainCard)(({ theme }) => ({
     background: theme.palette.card.main,

packages/ui/src/views/canvas/CredentialInputHandler.jsx

@@ -6,12 +6,12 @@ import { IconButton } from '@mui/material'
 import { IconEdit } from '@tabler/icons'
 
 // project import
-import { AsyncDropdown } from 'ui-component/dropdown/AsyncDropdown'
+import { AsyncDropdown } from '@/ui-component/dropdown/AsyncDropdown'
-import AddEditCredentialDialog from 'views/credentials/AddEditCredentialDialog'
+import AddEditCredentialDialog from '@/views/credentials/AddEditCredentialDialog'
-import CredentialListDialog from 'views/credentials/CredentialListDialog'
+import CredentialListDialog from '@/views/credentials/CredentialListDialog'
 
 // API
-import credentialsApi from 'api/credentials'
+import credentialsApi from '@/api/credentials'
 
 // ===========================|| CredentialInputHandler ||=========================== //
 

packages/ui/src/views/canvas/NodeInputHandler.jsx

@@ -10,27 +10,27 @@ import { tooltipClasses } from '@mui/material/Tooltip'
 import { IconArrowsMaximize, IconEdit, IconAlertTriangle } from '@tabler/icons'
 
 // project import
-import { Dropdown } from 'ui-component/dropdown/Dropdown'
+import { Dropdown } from '@/ui-component/dropdown/Dropdown'
-import { MultiDropdown } from 'ui-component/dropdown/MultiDropdown'
+import { MultiDropdown } from '@/ui-component/dropdown/MultiDropdown'
-import { AsyncDropdown } from 'ui-component/dropdown/AsyncDropdown'
+import { AsyncDropdown } from '@/ui-component/dropdown/AsyncDropdown'
-import { Input } from 'ui-component/input/Input'
+import { Input } from '@/ui-component/input/Input'
-import { DataGrid } from 'ui-component/grid/DataGrid'
+import { DataGrid } from '@/ui-component/grid/DataGrid'
-import { File } from 'ui-component/file/File'
+import { File } from '@/ui-component/file/File'
-import { SwitchInput } from 'ui-component/switch/Switch'
+import { SwitchInput } from '@/ui-component/switch/Switch'
-import { flowContext } from 'store/context/ReactFlowContext'
+import { flowContext } from '@/store/context/ReactFlowContext'
-import { isValidConnection } from 'utils/genericHelper'
+import { isValidConnection } from '@/utils/genericHelper'
-import { JsonEditorInput } from 'ui-component/json/JsonEditor'
+import { JsonEditorInput } from '@/ui-component/json/JsonEditor'
-import { TooltipWithParser } from 'ui-component/tooltip/TooltipWithParser'
+import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
-import ToolDialog from 'views/tools/ToolDialog'
+import ToolDialog from '@/views/tools/ToolDialog'
-import AssistantDialog from 'views/assistants/AssistantDialog'
+import AssistantDialog from '@/views/assistants/AssistantDialog'
-import FormatPromptValuesDialog from 'ui-component/dialog/FormatPromptValuesDialog'
+import FormatPromptValuesDialog from '@/ui-component/dialog/FormatPromptValuesDialog'
 import CredentialInputHandler from './CredentialInputHandler'
 
 // utils
-import { getInputVariables } from 'utils/genericHelper'
+import { getInputVariables } from '@/utils/genericHelper'
 
 // const
-import { FLOWISE_CREDENTIAL_ID } from 'store/constant'
+import { FLOWISE_CREDENTIAL_ID } from '@/store/constant'
 
 const EDITABLE_OPTIONS = ['selectedTool', 'selectedAssistant']
 

packages/ui/src/views/canvas/NodeOutputHandler.jsx

@@ -6,9 +6,9 @@ import { useEffect, useRef, useState, useContext } from 'react'
 import { useTheme, styled } from '@mui/material/styles'
 import { Box, Typography, Tooltip } from '@mui/material'
 import { tooltipClasses } from '@mui/material/Tooltip'
-import { flowContext } from 'store/context/ReactFlowContext'
+import { flowContext } from '@/store/context/ReactFlowContext'
-import { isValidConnection } from 'utils/genericHelper'
+import { isValidConnection } from '@/utils/genericHelper'
-import { Dropdown } from 'ui-component/dropdown/Dropdown'
+import { Dropdown } from '@/ui-component/dropdown/Dropdown'
 
 const CustomWidthTooltip = styled(({ className, ...props }) => <Tooltip {...props} classes={{ popper: className }} />)({
     [`& .${tooltipClasses.tooltip}`]: {

packages/ui/src/views/canvas/index.jsx

@@ -11,7 +11,7 @@ import {
     SET_CHATFLOW,
     enqueueSnackbar as enqueueSnackbarAction,
     closeSnackbar as closeSnackbarAction
-} from 'store/actions'
+} from '@/store/actions'
 import { omit, cloneDeep } from 'lodash'
 
 // material-ui
@@ -23,27 +23,27 @@ import CanvasNode from './CanvasNode'
 import ButtonEdge from './ButtonEdge'
 import CanvasHeader from './CanvasHeader'
 import AddNodes from './AddNodes'
-import ConfirmDialog from 'ui-component/dialog/ConfirmDialog'
+import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
-import { ChatPopUp } from 'views/chatmessage/ChatPopUp'
+import { ChatPopUp } from '@/views/chatmessage/ChatPopUp'
-import { flowContext } from 'store/context/ReactFlowContext'
+import { flowContext } from '@/store/context/ReactFlowContext'
 
 // API
-import nodesApi from 'api/nodes'
+import nodesApi from '@/api/nodes'
-import chatflowsApi from 'api/chatflows'
+import chatflowsApi from '@/api/chatflows'
 
 // Hooks
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
-import useConfirm from 'hooks/useConfirm'
+import useConfirm from '@/hooks/useConfirm'
 
 // icons
 import { IconX } from '@tabler/icons'
 
 // utils
-import { getUniqueNodeId, initNode, getEdgeLabelName, rearrangeToolsOrdering } from 'utils/genericHelper'
+import { getUniqueNodeId, initNode, getEdgeLabelName, rearrangeToolsOrdering } from '@/utils/genericHelper'
-import useNotifier from 'utils/useNotifier'
+import useNotifier from '@/utils/useNotifier'
 
 // const
-import { FLOWISE_CREDENTIAL_ID } from 'store/constant'
+import { FLOWISE_CREDENTIAL_ID } from '@/store/constant'
 
 const nodeTypes = { customNode: CanvasNode }
 const edgeTypes = { buttonedge: ButtonEdge }

packages/ui/src/views/chatbot/index.jsx

@@ -3,16 +3,16 @@ import { FullPageChat } from 'flowise-embed-react'
 import { useNavigate } from 'react-router-dom'
 
 // Project import
-import LoginDialog from 'ui-component/dialog/LoginDialog'
+import LoginDialog from '@/ui-component/dialog/LoginDialog'
 
 // API
-import chatflowsApi from 'api/chatflows'
+import chatflowsApi from '@/api/chatflows'
 
 // Hooks
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
 
 //Const
-import { baseURL } from 'store/constant'
+import { baseURL } from '@/store/constant'
 
 // ==============================|| Chatbot ||============================== //
 

packages/ui/src/views/chatflows/APICodeDialog.jsx

@@ -20,31 +20,31 @@ import { CopyBlock, atomOneDark } from 'react-code-blocks'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 
 // Project import
-import { Dropdown } from 'ui-component/dropdown/Dropdown'
+import { Dropdown } from '@/ui-component/dropdown/Dropdown'
 import ShareChatbot from './ShareChatbot'
 import EmbedChat from './EmbedChat'
 
 // Const
-import { baseURL } from 'store/constant'
+import { baseURL } from '@/store/constant'
-import { SET_CHATFLOW } from 'store/actions'
+import { SET_CHATFLOW } from '@/store/actions'
 
 // Images
-import pythonSVG from 'assets/images/python.svg'
+import pythonSVG from '@/assets/images/python.svg'
-import javascriptSVG from 'assets/images/javascript.svg'
+import javascriptSVG from '@/assets/images/javascript.svg'
-import cURLSVG from 'assets/images/cURL.svg'
+import cURLSVG from '@/assets/images/cURL.svg'
-import EmbedSVG from 'assets/images/embed.svg'
+import EmbedSVG from '@/assets/images/embed.svg'
-import ShareChatbotSVG from 'assets/images/sharing.png'
+import ShareChatbotSVG from '@/assets/images/sharing.png'
-import settingsSVG from 'assets/images/settings.svg'
+import settingsSVG from '@/assets/images/settings.svg'
 
 // API
-import apiKeyApi from 'api/apikey'
+import apiKeyApi from '@/api/apikey'
-import chatflowsApi from 'api/chatflows'
+import chatflowsApi from '@/api/chatflows'
-import configApi from 'api/config'
+import configApi from '@/api/config'
 
 // Hooks
-import useApi from 'hooks/useApi'
+import useApi from '@/hooks/useApi'
-import { CheckboxInput } from 'ui-component/checkbox/Checkbox'
+import { CheckboxInput } from '@/ui-component/checkbox/Checkbox'
-import { TableViewOnly } from 'ui-component/table/Table'
+import { TableViewOnly } from '@/ui-component/table/Table'
 
 import { IconBulb } from '@tabler/icons'
 import Configuration from './Configuration'

packages/ui/src/views/chatflows/Configuration.jsx

@@ -1,22 +1,22 @@
 import { useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from 'store/actions'
+import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackbarAction, SET_CHATFLOW } from '@/store/actions'
 import PropTypes from 'prop-types'
 
 import { Box, Typography, Button, OutlinedInput } from '@mui/material'
 
 // Project import
-import { StyledButton } from 'ui-component/button/StyledButton'
+import { StyledButton } from '@/ui-component/button/StyledButton'
 
 // Icons
 import { IconX } from '@tabler/icons'
 
 // API
-import chatflowsApi from 'api/chatflows'
+import chatflowsApi from '@/api/chatflows'
 
 // utils
-import useNotifier from 'utils/useNotifier'
+import useNotifier from '@/utils/useNotifier'
-import { TooltipWithParser } from 'ui-component/tooltip/TooltipWithParser'
+import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
 
 const Configuration = () => {
     const dispatch = useDispatch()