refactor: update datasource handling in InputFieldDialog and Datasource components

web/app/components/rag-pipeline/components/input-field/index.tsx

@@ -5,6 +5,7 @@ import {
 } from 'react'
 import { useStore } from '@/app/components/workflow/store'
 import { RiCloseLine } from '@remixicon/react'
+import type { Node } from '@/app/components/workflow/types'
 import { BlockEnum } from '@/app/components/workflow/types'
 import DialogWrapper from './dialog-wrapper'
 import FieldList from './field-list'
@@ -33,15 +34,14 @@ const InputFieldDialog = ({
   const setRagPipelineVariables = useStore(state => state.setRagPipelineVariables)
   const { doSyncWorkflowDraft } = useNodesSyncDraft()
 
-  const datasourceTitleMap = useMemo(() => {
-    const datasourceNameMap: Record<string, string> = {}
-    const datasourceNodes = nodes.filter(node => node.data.type === BlockEnum.DataSource)
+  const datasourceNodeDataMap = useMemo(() => {
+    const datasourceNodeDataMap: Record<string, DataSourceNodeType> = {}
+    const datasourceNodes: Node<DataSourceNodeType>[] = nodes.filter(node => node.data.type === BlockEnum.DataSource)
     datasourceNodes.forEach((node) => {
       const { id, data } = node
-      if (data?.title)
-        datasourceNameMap[id] = data.title
+      datasourceNodeDataMap[id] = data
     })
-    return datasourceNameMap
+    return datasourceNodeDataMap
   }, [nodes])
 
   const inputFieldsMap = useMemo(() => {
@@ -56,10 +56,6 @@ const InputFieldDialog = ({
     return inputFieldsMap
   }, [ragPipelineVariables])
 
-  const datasourceKeys = useMemo(() => {
-    return Object.keys(inputFieldsMap).filter(key => key !== 'shared')
-  }, [inputFieldsMap])
-
   const updateInputFields = useCallback(async (key: string, value: InputVar[]) => {
     const NewInputFieldsMap = produce(inputFieldsMap, (draft) => {
       draft[key] = value
@@ -106,12 +102,12 @@ const InputFieldDialog = ({
         <div className='flex grow flex-col overflow-y-auto'>
           {/* Datasources Inputs */}
           {
-            datasourceKeys.map((key) => {
+            Object.keys(datasourceNodeDataMap).map((key) => {
               const inputFields = inputFieldsMap[key] || []
               return (
                 <FieldList
                   key={key}
-                  LabelRightContent={<Datasource title={datasourceTitleMap[key]} />}
+                  LabelRightContent={<Datasource nodeData={datasourceNodeDataMap[key]} />}
                   inputFields={inputFields}
                   readonly={readonly}
                   labelClassName='pt-2 pb-1'

web/app/components/rag-pipeline/components/input-field/label-right-content/datasource.tsx

@@ -1,19 +1,20 @@
 import React from 'react'
 import { RiDatabase2Fill } from '@remixicon/react'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 
 type DatasourceProps = {
-  title: string
+  nodeData: DataSourceNodeType
 }
 
 const Datasource = ({
-  title,
+  nodeData,
 }: DatasourceProps) => {
   return (
     <div className='flex items-center gap-x-1.5'>
       <div className='flex size-5 items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default'>
         <RiDatabase2Fill className='size-3.5 text-text-secondary' />
       </div>
-      <span className='system-sm-medium text-text-secondary'>{title}</span>
+      <span className='system-sm-medium text-text-secondary'>{nodeData.title}</span>
     </div>
   )
 }