now user can name each document loader for ease of tracking (FlowiseAI#4039)

* now user can name each document loader for ease of tracking

* Update LoaderConfigPreviewChunks.jsx

---------

Co-authored-by: Henry Heng <[email protected]>

Author: 2 people

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

@@ -9,7 +9,7 @@ import ReactJson from 'flowise-react-json-view'
 import useApi from '@/hooks/useApi'
 
 // Material-UI
-import { Skeleton, Toolbar, Box, Button, Card, CardContent, Grid, OutlinedInput, Stack, Typography } from '@mui/material'
+import { Skeleton, Toolbar, Box, Button, Card, CardContent, Grid, OutlinedInput, Stack, Typography, TextField } from '@mui/material'
 import { useTheme, styled } from '@mui/material/styles'
 import { IconScissors, IconArrowLeft, IconDatabaseImport, IconBook, IconX, IconEye } from '@tabler/icons-react'
 
@@ -72,6 +72,7 @@ const LoaderConfigPreviewChunks = () => {
 
     const [loading, setLoading] = useState(false)
     const [error, setError] = useState(null)
+    const [loaderName, setLoaderName] = useState('')
 
     const [textSplitterNodes, setTextSplitterNodes] = useState([])
     const [splitterOptions, setTextSplitterOptions] = useState([])
@@ -236,7 +237,7 @@ const LoaderConfigPreviewChunks = () => {
 
         // Set store id & loader name
         config.storeId = storeId
-        config.loaderName = selectedDocumentLoader?.label
+        config.loaderName = loaderName || selectedDocumentLoader?.label
 
         // Set loader config
         if (selectedDocumentLoader.inputs) {
@@ -282,6 +283,7 @@ const LoaderConfigPreviewChunks = () => {
             // If this is a document store edit config, set the existing input values
             if (existingLoaderFromDocStoreTable && existingLoaderFromDocStoreTable.loaderConfig) {
                 nodeData.inputs = existingLoaderFromDocStoreTable.loaderConfig
+                setLoaderName(existingLoaderFromDocStoreTable.loaderName)
             }
             setSelectedDocumentLoader(nodeData)
 
@@ -444,6 +446,20 @@ const LoaderConfigPreviewChunks = () => {
                                             paddingRight: 15
                                         }}
                                     >
+                                        <Box sx={{ p: 2 }}>
+                                            <TextField
+                                                fullWidth
+                                                sx={{ mt: 1 }}
+                                                size='small'
+                                                label={
+                                                    selectedDocumentLoader?.label?.toLowerCase().includes('loader')
+                                                        ? selectedDocumentLoader.label + ' name'
+                                                        : selectedDocumentLoader?.label + ' Loader Name'
+                                                }
+                                                value={loaderName}
+                                                onChange={(e) => setLoaderName(e.target.value)}
+                                            />
+                                        </Box>
                                         {selectedDocumentLoader &&
                                             Object.keys(selectedDocumentLoader).length > 0 &&
                                             (selectedDocumentLoader.inputParams ?? [])