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/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'