feat: knowledge pipeline (#25360)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: quicksand <quicksandzn@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Harry <xh001x@hotmail.com>

web/app/components/datasets/documents/create-from-pipeline/data-source-options/index.tsx

@@ -0,0 +1,52 @@
+import { useCallback, useEffect } from 'react'
+import { useDatasourceOptions } from '../hooks'
+import OptionCard from './option-card'
+import type { Datasource } from '@/app/components/rag-pipeline/components/panel/test-run/types'
+import type { Node } from '@/app/components/workflow/types'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+
+type DataSourceOptionsProps = {
+  pipelineNodes: Node<DataSourceNodeType>[]
+  datasourceNodeId: string
+  onSelect: (option: Datasource) => void
+}
+
+const DataSourceOptions = ({
+  pipelineNodes,
+  datasourceNodeId,
+  onSelect,
+}: DataSourceOptionsProps) => {
+  const options = useDatasourceOptions(pipelineNodes)
+
+  const handelSelect = useCallback((value: string) => {
+    const selectedOption = options.find(option => option.value === value)
+    if (!selectedOption)
+      return
+    const datasource = {
+      nodeId: selectedOption.value,
+      nodeData: selectedOption.data,
+    }
+    onSelect(datasource)
+  }, [onSelect, options])
+
+  useEffect(() => {
+    if (options.length > 0 && !datasourceNodeId)
+      handelSelect(options[0].value)
+  }, [])
+
+  return (
+    <div className='grid w-full grid-cols-4 gap-1'>
+      {options.map(option => (
+        <OptionCard
+          key={option.value}
+          label={option.label}
+          selected={datasourceNodeId === option.value}
+          nodeData={option.data}
+          onClick={handelSelect.bind(null, option.value)}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default DataSourceOptions