Use tabler icons react instead of tabler icons package (#2389)

* Use tabler icons react instead of tabler icons package

* Update package.json

---------

Co-authored-by: Octavian Cioaca <devtools@domselardi.com>

packages/ui/package.json

@@ -18,7 +18,7 @@
         "@mui/lab": "5.0.0-alpha.156",
         "@mui/material": "5.15.0",
         "@mui/x-data-grid": "6.8.0",
-        "@tabler/icons": "^1.39.1",
+        "@tabler/icons-react": "^3.3.0",
         "@uiw/codemirror-theme-sublime": "^4.21.21",
         "@uiw/codemirror-theme-vscode": "^4.21.21",
         "@uiw/react-codemirror": "^4.21.21",

packages/ui/src/ErrorBoundary.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 
 import { Box, Card, IconButton, Stack, Typography, useTheme } from '@mui/material'
-import { IconCopy } from '@tabler/icons'
+import { IconCopy } from '@tabler/icons-react'
 
 const ErrorBoundary = ({ error }) => {
     const theme = useTheme()

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

@@ -28,7 +28,7 @@ import Transitions from '@/ui-component/extended/Transitions'
 import AboutDialog from '@/ui-component/dialog/AboutDialog'
 
 // assets
-import { IconLogout, IconSettings, IconInfoCircle } from '@tabler/icons'
+import { IconLogout, IconSettings, IconInfoCircle } from '@tabler/icons-react'
 
 import './index.css'
 

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

@@ -13,7 +13,7 @@ import LogoSection from '../LogoSection'
 import ProfileSection from './ProfileSection'
 
 // assets
-import { IconMenu2 } from '@tabler/icons'
+import { IconMenu2 } from '@tabler/icons-react'
 
 // store
 import { SET_DARKMODE } from '@/store/actions'

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

@@ -11,7 +11,7 @@ import NavItem from '../NavItem'
 
 // assets
 import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord'
-import { IconChevronDown, IconChevronUp } from '@tabler/icons'
+import { IconChevronDown, IconChevronUp } from '@tabler/icons-react'
 
 // ==============================|| SIDEBAR MENU LIST COLLAPSE ITEMS ||============================== //
 

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

@@ -6,7 +6,7 @@ import { useTheme } from '@mui/material/styles'
 import { StyledFab } from '@/ui-component/button/StyledFab'
 
 // icons
-import { IconSearch, IconArrowLeft, IconEdit } from '@tabler/icons'
+import { IconSearch, IconArrowLeft, IconEdit } from '@tabler/icons-react'
 
 const ViewHeader = ({
     children,

packages/ui/src/menu-items/dashboard.js

@@ -1,5 +1,5 @@
 // assets
-import { IconHierarchy, IconBuildingStore, IconKey, IconTool, IconLock, IconRobot, IconVariable, IconFiles } from '@tabler/icons'
+import { IconHierarchy, IconBuildingStore, IconKey, IconTool, IconLock, IconRobot, IconVariable, IconFiles } from '@tabler/icons-react'
 
 // constant
 const icons = { IconHierarchy, IconBuildingStore, IconKey, IconTool, IconLock, IconRobot, IconVariable, IconFiles }

packages/ui/src/menu-items/settings.js

@@ -8,7 +8,7 @@ import {
     IconDatabaseExport,
     IconAdjustmentsHorizontal,
     IconUsers
-} from '@tabler/icons'
+} from '@tabler/icons-react'
 
 // constant
 const icons = {

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import { IconButton } from '@mui/material'
-import { IconClipboard } from '@tabler/icons'
+import { IconClipboard } from '@tabler/icons-react'
 
 const CopyToClipboardButton = (props) => {
     const customization = useSelector((state) => state.customization)

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

@@ -17,7 +17,7 @@ import VpnLockOutlinedIcon from '@mui/icons-material/VpnLockOutlined'
 import MicNoneOutlinedIcon from '@mui/icons-material/MicNoneOutlined'
 import Button from '@mui/material/Button'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 import chatflowsApi from '@/api/chatflows'
 

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import { IconButton } from '@mui/material'
-import { IconThumbDown } from '@tabler/icons'
+import { IconThumbDown } from '@tabler/icons-react'
 
 const ThumbsDownButton = (props) => {
     const customization = useSelector((state) => state.customization)

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useSelector } from 'react-redux'
 import { IconButton } from '@mui/material'
-import { IconThumbUp } from '@tabler/icons'
+import { IconThumbUp } from '@tabler/icons-react'
 
 const ThumbsUpButton = (props) => {
     const customization = useSelector((state) => state.customization)

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

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 // material-ui
 import { styled } from '@mui/material/styles'
 import { Box, Grid, Typography, useTheme } from '@mui/material'
-import { IconVectorBezier2, IconLanguage, IconScissors } from '@tabler/icons'
+import { IconVectorBezier2, IconLanguage, IconScissors } from '@tabler/icons-react'
 
 // project imports
 import MainCard from '@/ui-component/cards/MainCard'

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

@@ -16,7 +16,7 @@ import {
     Stack,
     Typography
 } from '@mui/material'
-import { IconEraser, IconTrash, IconX } from '@tabler/icons'
+import { IconEraser, IconTrash, IconX } from '@tabler/icons-react'
 import PerfectScrollbar from 'react-perfect-scrollbar'
 
 import { BackdropLoader } from '@/ui-component/loading/BackdropLoader'

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

@@ -23,7 +23,7 @@ import {
     OutlinedInput
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconFileExport, IconSearch } from '@tabler/icons'
+import { IconFileExport, IconSearch } from '@tabler/icons-react'
 import leadsEmptySVG from '@/assets/images/leads_empty.svg'
 
 // store

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

@@ -31,7 +31,7 @@ import DatePicker from 'react-datepicker'
 import robotPNG from '@/assets/images/robot.png'
 import userPNG from '@/assets/images/account.png'
 import msgEmptySVG from '@/assets/images/message_empty.svg'
-import { IconFileExport, IconEraser, IconX, IconDownload } from '@tabler/icons'
+import { IconFileExport, IconEraser, IconX, IconDownload } from '@tabler/icons-react'
 
 // Project import
 import { MemoizedReactMarkdown } from '@/ui-component/markdown/MemoizedReactMarkdown'

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

@@ -5,7 +5,7 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
 
 // material-ui
 import { Button, IconButton, OutlinedInput, Box, List, InputAdornment, Typography } from '@mui/material'
-import { IconX, IconTrash, IconPlus } from '@tabler/icons'
+import { IconX, IconTrash, IconPlus } from '@tabler/icons-react'
 
 // Project import
 import { StyledButton } from '@/ui-component/button/StyledButton'

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

@@ -16,7 +16,7 @@ import {
     ListItemText
 } from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // Project import
 import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'

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

@@ -12,7 +12,7 @@ import config from '@/config'
 import { gridSpacing } from '@/store/constant'
 
 // assets
-import { IconTallymark1 } from '@tabler/icons'
+import { IconTallymark1 } from '@tabler/icons-react'
 import AccountTreeTwoToneIcon from '@mui/icons-material/AccountTreeTwoTone'
 import HomeIcon from '@mui/icons-material/Home'
 import HomeTwoToneIcon from '@mui/icons-material/HomeTwoTone'

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 // material-ui
 import { Button, Box } from '@mui/material'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // Project import
 import { StyledButton } from '@/ui-component/button/StyledButton'

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

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 // material-ui
 import { Button, Box, OutlinedInput, Typography } from '@mui/material'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // Project import
 import { StyledButton } from '@/ui-component/button/StyledButton'

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

@@ -10,7 +10,7 @@ import { StyledButton } from '@/ui-component/button/StyledButton'
 import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
 
 // Icons
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // API
 import chatflowsApi from '@/api/chatflows'

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

@@ -5,7 +5,7 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
 
 // material-ui
 import { Typography, Box, Button, FormControl, ListItem, ListItemAvatar, ListItemText, MenuItem, Select } from '@mui/material'
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // Project import
 import CredentialInputHandler from '@/views/canvas/CredentialInputHandler'

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

@@ -5,7 +5,7 @@ import { enqueueSnackbar as enqueueSnackbarAction, closeSnackbar as closeSnackba
 
 // material-ui
 import { Button, IconButton, OutlinedInput, Box, List, InputAdornment } from '@mui/material'
-import { IconX, IconTrash, IconPlus, IconBulb } from '@tabler/icons'
+import { IconX, IconTrash, IconPlus, IconBulb } from '@tabler/icons-react'
 
 // Project import
 import { StyledButton } from '@/ui-component/button/StyledButton'

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

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

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import { useState, useCallback } from 'react'
 import { DataGrid as MUIDataGrid, GridActionsCellItem } from '@mui/x-data-grid'
-import { IconPlus } from '@tabler/icons'
+import { IconPlus } from '@tabler/icons-react'
 import { Button } from '@mui/material'
 import DeleteIcon from '@mui/icons-material/Delete'
 import { cloneDeep } from 'lodash'

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

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

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

@@ -21,7 +21,7 @@ import { useTheme } from '@mui/material/styles'
 import { StyledButton } from '@/ui-component/button/StyledButton'
 
 // Icons
-import { IconX, IconCopy } from '@tabler/icons'
+import { IconX, IconCopy } from '@tabler/icons-react'
 
 // API
 import apikeyApi from '@/api/apikey'

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

@@ -44,7 +44,7 @@ import useConfirm from '@/hooks/useConfirm'
 import useNotifier from '@/utils/useNotifier'
 
 // Icons
-import { IconTrash, IconEdit, IconCopy, IconChevronsUp, IconChevronsDown, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons'
+import { IconTrash, IconEdit, IconCopy, IconChevronsUp, IconChevronsDown, IconX, IconPlus, IconEye, IconEyeOff } from '@tabler/icons-react'
 import APIEmptySVG from '@/assets/images/api_empty.svg'
 
 // ==============================|| APIKey ||============================== //

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

@@ -32,7 +32,7 @@ import DeleteConfirmDialog from './DeleteConfirmDialog'
 import AssistantVectorStoreDialog from './AssistantVectorStoreDialog'
 
 // Icons
-import { IconX, IconPlus } from '@tabler/icons'
+import { IconX, IconPlus } from '@tabler/icons-react'
 
 // API
 import assistantsApi from '@/api/assistants'

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

@@ -16,7 +16,7 @@ import { Dropdown } from '@/ui-component/dropdown/Dropdown'
 import { BackdropLoader } from '@/ui-component/loading/BackdropLoader'
 
 // Icons
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // API
 import assistantsApi from '@/api/assistants'

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

@@ -19,7 +19,7 @@ import assistantsApi from '@/api/assistants'
 import useApi from '@/hooks/useApi'
 
 // icons
-import { IconPlus, IconFileUpload } from '@tabler/icons'
+import { IconPlus, IconFileUpload } from '@tabler/icons-react'
 import ViewHeader from '@/layout/MainLayout/ViewHeader'
 import ErrorBoundary from '@/ErrorBoundary'
 

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

@@ -37,7 +37,7 @@ import Transitions from '@/ui-component/extended/Transitions'
 import { StyledFab } from '@/ui-component/button/StyledFab'
 
 // icons
-import { IconPlus, IconSearch, IconMinus, IconX } from '@tabler/icons'
+import { IconPlus, IconSearch, IconMinus, IconX } from '@tabler/icons-react'
 import LlamaindexPNG from '@/assets/images/llamaindex.png'
 import LangChainPNG from '@/assets/images/langchain.png'
 

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

@@ -8,7 +8,7 @@ import { useTheme } from '@mui/material/styles'
 import { Avatar, Box, ButtonBase, Typography, Stack, TextField } from '@mui/material'
 
 // icons
-import { IconSettings, IconChevronLeft, IconDeviceFloppy, IconPencil, IconCheck, IconX, IconCode } from '@tabler/icons'
+import { IconSettings, IconChevronLeft, IconDeviceFloppy, IconPencil, IconCheck, IconX, IconCode } from '@tabler/icons-react'
 
 // project imports
 import Settings from '@/views/settings'

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

@@ -17,7 +17,7 @@ import NodeInfoDialog from '@/ui-component/dialog/NodeInfoDialog'
 
 // const
 import { baseURL } from '@/store/constant'
-import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons'
+import { IconTrash, IconCopy, IconInfoCircle, IconAlertTriangle } from '@tabler/icons-react'
 import { flowContext } from '@/store/context/ReactFlowContext'
 import LlamaindexPNG from '@/assets/images/llamaindex.png'
 

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

@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react'
 
 // material-ui
 import { IconButton } from '@mui/material'
-import { IconEdit } from '@tabler/icons'
+import { IconEdit } from '@tabler/icons-react'
 
 // project import
 import { AsyncDropdown } from '@/ui-component/dropdown/AsyncDropdown'

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

@@ -8,7 +8,7 @@ import { useTheme, styled } from '@mui/material/styles'
 import { Box, Typography, Tooltip, IconButton, Button } from '@mui/material'
 import IconAutoFixHigh from '@mui/icons-material/AutoFixHigh'
 import { tooltipClasses } from '@mui/material/Tooltip'
-import { IconArrowsMaximize, IconEdit, IconAlertTriangle } from '@tabler/icons'
+import { IconArrowsMaximize, IconEdit, IconAlertTriangle } from '@tabler/icons-react'
 
 // project import
 import { Dropdown } from '@/ui-component/dropdown/Dropdown'

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

@@ -9,7 +9,7 @@ import { useTheme } from '@mui/material/styles'
 import NodeCardWrapper from '@/ui-component/cards/NodeCardWrapper'
 import NodeTooltip from '@/ui-component/tooltip/NodeTooltip'
 import { IconButton, Box } from '@mui/material'
-import { IconCopy, IconTrash } from '@tabler/icons'
+import { IconCopy, IconTrash } from '@tabler/icons-react'
 import { Input } from '@/ui-component/input/Input'
 
 // const

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

@@ -38,7 +38,7 @@ import useApi from '@/hooks/useApi'
 import useConfirm from '@/hooks/useConfirm'
 
 // icons
-import { IconX, IconRefreshAlert } from '@tabler/icons'
+import { IconX, IconRefreshAlert } from '@tabler/icons-react'
 
 // utils
 import {

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

@@ -35,7 +35,7 @@ import cURLSVG from '@/assets/images/cURL.svg'
 import EmbedSVG from '@/assets/images/embed.svg'
 import ShareChatbotSVG from '@/assets/images/sharing.png'
 import settingsSVG from '@/assets/images/settings.svg'
-import { IconBulb } from '@tabler/icons'
+import { IconBulb } from '@tabler/icons-react'
 
 // API
 import apiKeyApi from '@/api/apikey'

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

@@ -12,7 +12,7 @@ import { StyledButton } from '@/ui-component/button/StyledButton'
 import { TooltipWithParser } from '@/ui-component/tooltip/TooltipWithParser'
 
 // Icons
-import { IconX, IconCopy, IconArrowUpRightCircle } from '@tabler/icons'
+import { IconX, IconCopy, IconArrowUpRightCircle } from '@tabler/icons-react'
 
 // API
 import chatflowsApi from '@/api/chatflows'

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

@@ -27,7 +27,7 @@ import useApi from '@/hooks/useApi'
 import { baseURL } from '@/store/constant'
 
 // icons
-import { IconPlus, IconLayoutGrid, IconList } from '@tabler/icons'
+import { IconPlus, IconLayoutGrid, IconList } from '@tabler/icons-react'
 
 // ==============================|| CHATFLOWS ||============================== //
 

packages/ui/src/views/chatmessage/ChatExpandDialog.jsx

@@ -5,7 +5,7 @@ import { useSelector } from 'react-redux'
 import { Dialog, DialogContent, DialogTitle, Button } from '@mui/material'
 import { ChatMessage } from './ChatMessage'
 import { StyledButton } from '@/ui-component/button/StyledButton'
-import { IconEraser } from '@tabler/icons'
+import { IconEraser } from '@tabler/icons-react'
 
 const ChatExpandDialog = ({ show, dialogProps, onClear, onCancel, previews, setPreviews }) => {
     const portalElement = document.getElementById('portal')

packages/ui/src/views/chatmessage/ChatMessage.jsx

@@ -23,7 +23,7 @@ import {
     Typography
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconCircleDot, IconDownload, IconSend, IconMicrophone, IconPhotoPlus, IconTrash, IconX, IconTool } from '@tabler/icons'
+import { IconCircleDot, IconDownload, IconSend, IconMicrophone, IconPhotoPlus, IconTrash, IconX, IconTool } from '@tabler/icons-react'
 import robotPNG from '@/assets/images/robot.png'
 import userPNG from '@/assets/images/account.png'
 import audioUploadSVG from '@/assets/images/wave-sound.jpg'

packages/ui/src/views/chatmessage/ChatPopUp.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 
 import { ClickAwayListener, Paper, Popper, Button } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconMessage, IconX, IconEraser, IconArrowsMaximize } from '@tabler/icons'
+import { IconMessage, IconX, IconEraser, IconArrowsMaximize } from '@tabler/icons-react'
 
 // project import
 import { StyledFab } from '@/ui-component/button/StyledFab'

packages/ui/src/views/credentials/AddEditCredentialDialog.jsx

@@ -14,7 +14,7 @@ import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
 import CredentialInputHandler from './CredentialInputHandler'
 
 // Icons
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 
 // API
 import credentialsApi from '@/api/credentials'

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

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 
 // material-ui
 import { Box, Typography, IconButton } from '@mui/material'
-import { IconArrowsMaximize, IconAlertTriangle } from '@tabler/icons'
+import { IconArrowsMaximize, IconAlertTriangle } from '@tabler/icons-react'
 
 // project import
 import { Dropdown } from '@/ui-component/dropdown/Dropdown'

packages/ui/src/views/credentials/CredentialListDialog.jsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
 import { List, ListItemButton, Dialog, DialogContent, DialogTitle, Box, OutlinedInput, InputAdornment, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconSearch, IconX } from '@tabler/icons'
+import { IconSearch, IconX } from '@tabler/icons-react'
 
 // const
 import { baseURL } from '@/store/constant'

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

@@ -40,7 +40,7 @@ import useConfirm from '@/hooks/useConfirm'
 import useNotifier from '@/utils/useNotifier'
 
 // Icons
-import { IconTrash, IconEdit, IconX, IconPlus } from '@tabler/icons'
+import { IconTrash, IconEdit, IconX, IconPlus } from '@tabler/icons-react'
 import CredentialEmptySVG from '@/assets/images/credential_empty.svg'
 
 // const

packages/ui/src/views/docstore/AddDocStoreDialog.jsx

@@ -17,7 +17,7 @@ import { StyledButton } from '@/ui-component/button/StyledButton'
 import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
 
 // Icons
-import { IconX, IconFiles } from '@tabler/icons'
+import { IconX, IconFiles } from '@tabler/icons-react'
 
 // API
 import documentStoreApi from '@/api/documentstore'

packages/ui/src/views/docstore/DocStoreInputHandler.jsx

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux'
 
 // material-ui
 import { Box, Typography, IconButton, Button } from '@mui/material'
-import { IconArrowsMaximize, IconAlertTriangle } from '@tabler/icons'
+import { IconArrowsMaximize, IconAlertTriangle } from '@tabler/icons-react'
 
 // project import
 import { Dropdown } from '@/ui-component/dropdown/Dropdown'

packages/ui/src/views/docstore/DocumentLoaderListDialog.jsx

@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'
 import PropTypes from 'prop-types'
 import { List, ListItemButton, Dialog, DialogContent, DialogTitle, Box, OutlinedInput, InputAdornment, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconSearch, IconX } from '@tabler/icons'
+import { IconSearch, IconX } from '@tabler/icons-react'
 
 // API
 import documentStoreApi from '@/api/documentstore'

packages/ui/src/views/docstore/DocumentStoreDetail.jsx

@@ -42,7 +42,7 @@ import useConfirm from '@/hooks/useConfirm'
 import useNotifier from '@/utils/useNotifier'
 
 // icons
-import { IconPlus, IconRefresh, IconScissors, IconTrash, IconX, IconVectorBezier2 } from '@tabler/icons'
+import { IconPlus, IconRefresh, IconScissors, IconTrash, IconX, IconVectorBezier2 } from '@tabler/icons-react'
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import FileDeleteIcon from '@mui/icons-material/Delete'
 import FileEditIcon from '@mui/icons-material/Edit'

packages/ui/src/views/docstore/ExpandedChunkDialog.jsx

@@ -7,7 +7,7 @@ import { HIDE_CANVAS_DIALOG, SHOW_CANVAS_DIALOG } from '@/store/actions'
 
 // Material
 import { Button, Dialog, IconButton, DialogContent, DialogTitle, Typography } from '@mui/material'
-import { IconEdit, IconTrash, IconX, IconLanguage } from '@tabler/icons'
+import { IconEdit, IconTrash, IconX, IconLanguage } from '@tabler/icons-react'
 
 // Project imports
 import { CodeEditor } from '@/ui-component/editor/CodeEditor'

packages/ui/src/views/docstore/LoaderConfigPreviewChunks.jsx

@@ -11,7 +11,7 @@ import useApi from '@/hooks/useApi'
 // Material-UI
 import { Skeleton, Toolbar, Box, Button, Card, CardContent, Grid, OutlinedInput, Stack, Typography } from '@mui/material'
 import { useTheme, styled } from '@mui/material/styles'
-import { IconScissors, IconArrowLeft, IconDatabaseImport, IconBook, IconX, IconEye } from '@tabler/icons'
+import { IconScissors, IconArrowLeft, IconDatabaseImport, IconBook, IconX, IconEye } from '@tabler/icons-react'
 
 // Project import
 import MainCard from '@/ui-component/cards/MainCard'

packages/ui/src/views/docstore/ShowStoredChunks.jsx

@@ -7,7 +7,7 @@ import ReactJson from 'flowise-react-json-view'
 import { Box, Card, Button, Grid, IconButton, Stack, Typography } from '@mui/material'
 import { useTheme, styled } from '@mui/material/styles'
 import CardContent from '@mui/material/CardContent'
-import { IconLanguage, IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons'
+import { IconLanguage, IconX, IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
 import chunks_emptySVG from '@/assets/images/chunks_empty.svg'
 
 // project imports

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

@@ -34,7 +34,7 @@ import useApi from '@/hooks/useApi'
 import documentsApi from '@/api/documentstore'
 
 // icons
-import { IconPlus, IconLayoutGrid, IconList } from '@tabler/icons'
+import { IconPlus, IconLayoutGrid, IconList } from '@tabler/icons-react'
 import doc_store_empty from '@/assets/images/doc_store_empty.svg'
 
 // const

packages/ui/src/views/marketplaces/MarketplaceCanvasHeader.jsx

@@ -7,7 +7,7 @@ import { Avatar, Box, ButtonBase, Typography, Stack } from '@mui/material'
 import { StyledButton } from '@/ui-component/button/StyledButton'
 
 // icons
-import { IconCopy, IconChevronLeft } from '@tabler/icons'
+import { IconCopy, IconChevronLeft } from '@tabler/icons-react'
 
 // ==============================|| CANVAS HEADER ||============================== //
 

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

@@ -18,7 +18,7 @@ import {
     Skeleton
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
-import { IconLayoutGrid, IconList } from '@tabler/icons'
+import { IconLayoutGrid, IconList } from '@tabler/icons-react'
 
 // project imports
 import MainCard from '@/ui-component/cards/MainCard'

packages/ui/src/views/tools/ToolDialog.jsx

@@ -16,7 +16,7 @@ import { CodeEditor } from '@/ui-component/editor/CodeEditor'
 import HowToUseFunctionDialog from './HowToUseFunctionDialog'
 
 // Icons
-import { IconX, IconFileDownload, IconPlus } from '@tabler/icons'
+import { IconX, IconFileDownload, IconPlus } from '@tabler/icons-react'
 
 // API
 import toolsApi from '@/api/tools'

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

@@ -18,7 +18,7 @@ import toolsApi from '@/api/tools'
 import useApi from '@/hooks/useApi'
 
 // icons
-import { IconPlus, IconFileUpload } from '@tabler/icons'
+import { IconPlus, IconFileUpload } from '@tabler/icons-react'
 import ViewHeader from '@/layout/MainLayout/ViewHeader'
 import ErrorBoundary from '@/ErrorBoundary'
 

packages/ui/src/views/variables/AddEditVariableDialog.jsx

@@ -12,7 +12,7 @@ import { StyledButton } from '@/ui-component/button/StyledButton'
 import ConfirmDialog from '@/ui-component/dialog/ConfirmDialog'
 
 // Icons
-import { IconX, IconVariable } from '@tabler/icons'
+import { IconX, IconVariable } from '@tabler/icons-react'
 
 // API
 import variablesApi from '@/api/variables'

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

@@ -39,7 +39,7 @@ import useConfirm from '@/hooks/useConfirm'
 import useNotifier from '@/utils/useNotifier'
 
 // Icons
-import { IconTrash, IconEdit, IconX, IconPlus, IconVariable } from '@tabler/icons'
+import { IconTrash, IconEdit, IconX, IconPlus, IconVariable } from '@tabler/icons-react'
 import VariablesEmptySVG from '@/assets/images/variables_empty.svg'
 
 // const

packages/ui/src/views/vectorstore/UpsertHistoryDialog.jsx

@@ -32,7 +32,7 @@ import {
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import { IconChevronsUp, IconChevronsDown, IconTrash, IconX } from '@tabler/icons'
+import { IconChevronsUp, IconChevronsDown, IconTrash, IconX } from '@tabler/icons-react'
 
 // Project imports
 import { TableViewOnly } from '@/ui-component/table/Table'

packages/ui/src/views/vectorstore/VectorStoreDialog.jsx

@@ -23,7 +23,7 @@ import { CheckboxInput } from '@/ui-component/checkbox/Checkbox'
 import { BackdropLoader } from '@/ui-component/loading/BackdropLoader'
 import { TableViewOnly } from '@/ui-component/table/Table'
 
-import { IconX } from '@tabler/icons'
+import { IconX } from '@tabler/icons-react'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import pythonSVG from '@/assets/images/python.svg'
 import javascriptSVG from '@/assets/images/javascript.svg'

packages/ui/src/views/vectorstore/VectorStorePopUp.jsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
-import { IconDatabaseImport, IconX } from '@tabler/icons'
+import { IconDatabaseImport, IconX } from '@tabler/icons-react'
 
 // project import
 import { StyledFab } from '@/ui-component/button/StyledFab'