datasource panel

web/app/components/workflow/block-selector/hooks.ts

@@ -3,6 +3,8 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useDataSourceList } from '@/service/use-pipeline'
+import { useStore } from '../store'
 import {
   TabsEnum,
   ToolTypeEnum,
@@ -75,3 +77,10 @@ export const useToolTabs = () => {
     },
   ]
 }
+
+export const useDataSources = () => {
+  const pipelineId = useStore(s => s.pipelineId)
+  const { data: dataSourceList } = useDataSourceList(!!pipelineId)
+
+  return dataSourceList || []
+}

web/app/components/workflow/block-selector/index.tsx

@@ -5,8 +5,7 @@ import type { NodeSelectorProps } from './main'
 import NodeSelector from './main'
 import { useHooksStore } from '@/app/components/workflow/hooks-store/store'
 import { BlockEnum } from '@/app/components/workflow/types'
-import { useStore } from '@/app/components/workflow/store'
+import { useDataSources } from './hooks'
-import { useDataSourceList } from '@/service/use-pipeline'
 
 const NodeSelectorWrapper = (props: NodeSelectorProps) => {
   const availableNodesMetaData = useHooksStore(s => s.availableNodesMetaData)
@@ -34,8 +33,7 @@ const NodeSelectorWrapper = (props: NodeSelectorProps) => {
     })
   }, [availableNodesMetaData?.nodes])
 
-  const pipelineId = useStore(s => s.pipelineId)
+  const dataSourceList = useDataSources()
-  const { data: dataSourceList } = useDataSourceList(!!pipelineId)
 
   return (
     <NodeSelector

web/app/components/workflow/hooks/use-nodes-interactions.ts

@@ -711,7 +711,7 @@ export const useNodesInteractions = () => {
       const outgoers = getOutgoers(prevNode, nodes, edges).sort((a, b) => a.position.y - b.position.y)
       const lastOutgoer = outgoers[outgoers.length - 1]
 
-      newNode.data._connectedTargetHandleIds = [targetHandle]
+      newNode.data._connectedTargetHandleIds = nodeType === BlockEnum.DataSource ? [] : [targetHandle]
       newNode.data._connectedSourceHandleIds = []
       newNode.position = {
         x: lastOutgoer ? lastOutgoer.position.x : prevNode.position.x + prevNode.width! + X_OFFSET,
@@ -745,27 +745,31 @@ export const useNodesInteractions = () => {
         }
       }
 
-      const newEdge: Edge = {
+      let newEdge = null
-        id: `${prevNodeId}-${prevNodeSourceHandle}-${newNode.id}-${targetHandle}`,
+      if (nodeType !== BlockEnum.DataSource) {
-        type: CUSTOM_EDGE,
+        newEdge = {
-        source: prevNodeId,
+          id: `${prevNodeId}-${prevNodeSourceHandle}-${newNode.id}-${targetHandle}`,
-        sourceHandle: prevNodeSourceHandle,
+          type: CUSTOM_EDGE,
-        target: newNode.id,
+          source: prevNodeId,
-        targetHandle,
+          sourceHandle: prevNodeSourceHandle,
-        data: {
+          target: newNode.id,
-          sourceType: prevNode.data.type,
+          targetHandle,
-          targetType: newNode.data.type,
+          data: {
-          isInIteration,
+            sourceType: prevNode.data.type,
-          isInLoop,
+            targetType: newNode.data.type,
-          iteration_id: isInIteration ? prevNode.parentId : undefined,
+            isInIteration,
-          loop_id: isInLoop ? prevNode.parentId : undefined,
+            isInLoop,
-          _connectedNodeIsSelected: true,
+            iteration_id: isInIteration ? prevNode.parentId : undefined,
-        },
+            loop_id: isInLoop ? prevNode.parentId : undefined,
-        zIndex: prevNode.parentId ? (isInIteration ? ITERATION_CHILDREN_Z_INDEX : LOOP_CHILDREN_Z_INDEX) : 0,
+            _connectedNodeIsSelected: true,
+          },
+          zIndex: prevNode.parentId ? (isInIteration ? ITERATION_CHILDREN_Z_INDEX : LOOP_CHILDREN_Z_INDEX) : 0,
+        }
       }
+
       const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
         [
-          { type: 'add', edge: newEdge },
+          ...(newEdge ? [{ type: 'add', edge: newEdge }] : []),
         ],
         nodes,
       )
@@ -816,7 +820,8 @@ export const useNodesInteractions = () => {
             _connectedNodeIsSelected: false,
           }
         })
-        draft.push(newEdge)
+        if (newEdge)
+          draft.push(newEdge)
       })
 
       if (checkNestedParallelLimit(newNodes, newEdges, prevNode)) {
@@ -959,7 +964,7 @@ export const useNodesInteractions = () => {
       const prevNode = nodes.find(node => node.id === prevNodeId)!
       const nextNode = nodes.find(node => node.id === nextNodeId)!
 
-      newNode.data._connectedTargetHandleIds = [targetHandle]
+      newNode.data._connectedTargetHandleIds = nodeType === BlockEnum.DataSource ? [] : [targetHandle]
       newNode.data._connectedSourceHandleIds = [sourceHandle]
       newNode.position = {
         x: nextNode.position.x,
@@ -986,24 +991,29 @@ export const useNodesInteractions = () => {
       }
 
       const currentEdgeIndex = edges.findIndex(edge => edge.source === prevNodeId && edge.target === nextNodeId)
-      const newPrevEdge = {
+      let newPrevEdge = null
-        id: `${prevNodeId}-${prevNodeSourceHandle}-${newNode.id}-${targetHandle}`,
+
-        type: CUSTOM_EDGE,
+      if (nodeType !== BlockEnum.DataSource) {
-        source: prevNodeId,
+        newPrevEdge = {
-        sourceHandle: prevNodeSourceHandle,
+          id: `${prevNodeId}-${prevNodeSourceHandle}-${newNode.id}-${targetHandle}`,
-        target: newNode.id,
+          type: CUSTOM_EDGE,
-        targetHandle,
+          source: prevNodeId,
-        data: {
+          sourceHandle: prevNodeSourceHandle,
-          sourceType: prevNode.data.type,
+          target: newNode.id,
-          targetType: newNode.data.type,
+          targetHandle,
-          isInIteration,
+          data: {
-          isInLoop,
+            sourceType: prevNode.data.type,
-          iteration_id: isInIteration ? prevNode.parentId : undefined,
+            targetType: newNode.data.type,
-          loop_id: isInLoop ? prevNode.parentId : undefined,
+            isInIteration,
-          _connectedNodeIsSelected: true,
+            isInLoop,
-        },
+            iteration_id: isInIteration ? prevNode.parentId : undefined,
-        zIndex: prevNode.parentId ? (isInIteration ? ITERATION_CHILDREN_Z_INDEX : LOOP_CHILDREN_Z_INDEX) : 0,
+            loop_id: isInLoop ? prevNode.parentId : undefined,
+            _connectedNodeIsSelected: true,
+          },
+          zIndex: prevNode.parentId ? (isInIteration ? ITERATION_CHILDREN_Z_INDEX : LOOP_CHILDREN_Z_INDEX) : 0,
+        }
       }
+
       let newNextEdge: Edge | null = null
 
       const nextNodeParentNode = nodes.find(node => node.id === nextNode.parentId) || null
@@ -1033,7 +1043,7 @@ export const useNodesInteractions = () => {
       const nodesConnectedSourceOrTargetHandleIdsMap = getNodesConnectedSourceOrTargetHandleIdsMap(
         [
           { type: 'remove', edge: edges[currentEdgeIndex] },
-          { type: 'add', edge: newPrevEdge },
+          ...(newPrevEdge ? [{ type: 'add', edge: newPrevEdge }] : []),
           ...(newNextEdge ? [{ type: 'add', edge: newNextEdge }] : []),
         ],
         [...nodes, newNode],
@@ -1088,7 +1098,8 @@ export const useNodesInteractions = () => {
             _connectedNodeIsSelected: false,
           }
         })
-        draft.push(newPrevEdge)
+        if (newPrevEdge)
+          draft.push(newPrevEdge)
 
         if (newNextEdge)
           draft.push(newNextEdge)

web/app/components/workflow/hooks/use-tool-icon.ts

@@ -10,6 +10,7 @@ import {
 import {
   useStore,
 } from '../store'
+import { useDataSources } from '../block-selector/hooks'
 import { CollectionType } from '@/app/components/tools/types'
 import { canFindTool } from '@/utils'
 
@@ -17,6 +18,8 @@ export const useToolIcon = (data: Node['data']) => {
   const buildInTools = useStore(s => s.buildInTools)
   const customTools = useStore(s => s.customTools)
   const workflowTools = useStore(s => s.workflowTools)
+  const dataSourceList = useDataSources()
+  // const a = useStore(s => s.data)
   const toolIcon = useMemo(() => {
     if (data.type === BlockEnum.Tool) {
       let targetTools = buildInTools
@@ -28,7 +31,9 @@ export const useToolIcon = (data: Node['data']) => {
         targetTools = workflowTools
       return targetTools.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon
     }
-  }, [data, buildInTools, customTools, workflowTools])
+    if (data.type === BlockEnum.DataSource)
+      return dataSourceList.find(toolWithProvider => canFindTool(toolWithProvider.id, data.provider_id))?.icon
+  }, [data, buildInTools, customTools, workflowTools, dataSourceList])
 
   return toolIcon
 }

web/app/components/workflow/nodes/data-source/hooks/use-config.ts

@@ -1,5 +1,34 @@
+import { useCallback } from 'react'
+import { useStoreApi } from 'reactflow'
+import { useNodeDataUpdate } from '@/app/components/workflow/hooks'
+import type { DataSourceNodeType } from '../types'
+
 export const useConfig = (id: string) => {
+  const store = useStoreApi()
+  const { handleNodeDataUpdateWithSyncDraft } = useNodeDataUpdate()
+
+  const getNodeData = useCallback(() => {
+    const { getNodes } = store.getState()
+    const nodes = getNodes()
+
+    return nodes.find(node => node.id === id)
+  }, [store, id])
+
+  const handleNodeDataUpdate = useCallback((data: Partial<DataSourceNodeType>) => {
+    handleNodeDataUpdateWithSyncDraft({
+      id,
+      data,
+    })
+  }, [id, handleNodeDataUpdateWithSyncDraft])
+  const handleFileExtensionsChange = useCallback((fileExtensions: string[]) => {
+    const nodeData = getNodeData()
+    handleNodeDataUpdate({
+      ...nodeData?.data,
+      fileExtensions,
+    })
+  }, [handleNodeDataUpdate, getNodeData])
+
   return {
-    id,
+    handleFileExtensionsChange,
   }
 }

web/app/components/workflow/nodes/data-source/panel.tsx

@@ -5,15 +5,27 @@ import {
 import { useTranslation } from 'react-i18next'
 import { memo } from 'react'
 import type { DataSourceNodeType } from './types'
+import { CollectionType } from '@/app/components/tools/types'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-import { GroupWithBox } from '@/app/components/workflow/nodes/_base/components/layout'
+import {
+  Field,
+  GroupWithBox,
+} from '@/app/components/workflow/nodes/_base/components/layout'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
 import StructureOutputItem from '@/app/components/workflow/nodes/_base/components/variable/object-child-tree-panel/show'
+import TagInput from '@/app/components/base/tag-input'
 import { Type } from '../llm/types'
+import { useConfig } from './hooks/use-config'
 
-const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ data }) => {
+const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ id, data }) => {
   const { t } = useTranslation()
-  const { output_schema = {} } = data
+  const {
+    output_schema = {},
+    provider_id,
+    provider_type,
+    fileExtensions = [],
+  } = data
+  const { handleFileExtensionsChange } = useConfig(id)
   const outputSchema = useMemo(() => {
       const res: any[] = []
       if (!output_schema)
@@ -48,52 +60,66 @@ const Panel: FC<NodePanelProps<DataSourceNodeType>> = ({ data }) => {
 
   return (
     <div >
-      <GroupWithBox boxProps={{ withBorderBottom: true }}>
+      {
-
+        provider_id === 'langgenius/file/file' && provider_type === CollectionType.datasource && (
-      </GroupWithBox>
+          <GroupWithBox boxProps={{ withBorderBottom: true }}>
+            <Field
+              fieldTitleProps={{
+                title: 'supported file formats',
+              }}
+            >
+              <TagInput
+                items={fileExtensions}
+                onChange={handleFileExtensionsChange}
+                placeholder='File extension, e.g. doc'
+              />
+            </Field>
+          </GroupWithBox>
+        )
+      }
       <OutputVars>
         <VarItem
-            name='text'
+          name='text'
-            type='string'
+          type='string'
-            description={t('workflow.nodes.tool.outputVars.text')}
+          description={t('workflow.nodes.tool.outputVars.text')}
-            isIndent={hasObjectOutput}
+          isIndent={hasObjectOutput}
-          />
+        />
-          <VarItem
+        <VarItem
-            name='files'
+          name='files'
-            type='array[file]'
+          type='array[file]'
-            description={t('workflow.nodes.tool.outputVars.files.title')}
+          description={t('workflow.nodes.tool.outputVars.files.title')}
-            isIndent={hasObjectOutput}
+          isIndent={hasObjectOutput}
-          />
+        />
-          <VarItem
+        <VarItem
-            name='json'
+          name='json'
-            type='array[object]'
+          type='array[object]'
-            description={t('workflow.nodes.tool.outputVars.json')}
+          description={t('workflow.nodes.tool.outputVars.json')}
-            isIndent={hasObjectOutput}
+          isIndent={hasObjectOutput}
-          />
+        />
-          {outputSchema.map((outputItem: any) => (
+        {outputSchema.map((outputItem: any) => (
-            <div key={outputItem.name}>
+          <div key={outputItem.name}>
-              {outputItem.value?.type === 'object' ? (
+            {outputItem.value?.type === 'object' ? (
-                <StructureOutputItem
+              <StructureOutputItem
-                  rootClassName='code-sm-semibold text-text-secondary'
+                rootClassName='code-sm-semibold text-text-secondary'
-                  payload={{
+                payload={{
-                    schema: {
+                  schema: {
-                      type: Type.object,
+                    type: Type.object,
-                      properties: {
+                    properties: {
-                        [outputItem.name]: outputItem.value,
+                      [outputItem.name]: outputItem.value,
-                      },
-                      additionalProperties: false,
                     },
-                  }} />
+                    additionalProperties: false,
-              ) : (
+                  },
-                <VarItem
+                }} />
-                  name={outputItem.name}
+            ) : (
-                  type={outputItem.type.toLocaleLowerCase()}
+              <VarItem
-                  description={outputItem.description}
+                name={outputItem.name}
-                  isIndent={hasObjectOutput}
+                type={outputItem.type.toLocaleLowerCase()}
-                />
+                description={outputItem.description}
-              )}
+                isIndent={hasObjectOutput}
-            </div>
+              />
-          ))}
+            )}
+          </div>
+        ))}
       </OutputVars>
     </div>
   )

web/app/components/workflow/nodes/data-source/types.ts

@@ -1,7 +1,11 @@
 import type { CommonNodeType } from '@/app/components/workflow/types'
 import type { RAGPipelineVariables } from '@/models/pipeline'
+import type { CollectionType } from '@/app/components/tools/types'
 
 export type DataSourceNodeType = CommonNodeType & {
   variables: RAGPipelineVariables
   output_schema: Record<string, any>
+  provider_id: string
+  provider_type: CollectionType
+  fileExtensions?: string[]
 }