dify

dify/web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx

@@ -0,0 +1,40 @@
+import type { FC } from 'react'
+import { memo } from 'react'
+import cn from '@/utils/classnames'
+
+type DatasourceIconProps = {
+  size?: string
+  className?: string
+  iconUrl: string
+}
+
+const ICON_CONTAINER_CLASSNAME_SIZE_MAP: Record<string, string> = {
+  xs: 'w-4 h-4 rounded-[5px] shadow-xs',
+  sm: 'w-5 h-5 rounded-md shadow-xs',
+  md: 'w-6 h-6 rounded-lg shadow-md',
+}
+
+const DatasourceIcon: FC<DatasourceIconProps> = ({
+  size = 'sm',
+  className,
+  iconUrl,
+}) => {
+  return (
+    <div className={
+      cn(
+        'flex items-center justify-center shadow-none',
+        ICON_CONTAINER_CLASSNAME_SIZE_MAP[size],
+        className,
+      )}
+    >
+      <div
+        className='h-full w-full shrink-0 rounded-md bg-cover bg-center'
+        style={{
+          backgroundImage: `url(${iconUrl})`,
+        }}
+      />
+    </div>
+  )
+}
+
+export default memo(DatasourceIcon)

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

@@ -0,0 +1,23 @@
+import { useMemo } from 'react'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import { basePath } from '@/utils/var'
+import { useDataSourceList } from '@/service/use-pipeline'
+import { transformDataSourceToTool } from '@/app/components/workflow/block-selector/utils'
+
+export const useDatasourceIcon = (data: DataSourceNodeType) => {
+  const { data: dataSourceListData, isSuccess } = useDataSourceList(true)
+
+  const datasourceIcon = useMemo(() => {
+    if (!isSuccess) return
+    const dataSourceList = [...(dataSourceListData || [])]
+    dataSourceList.forEach((item) => {
+      const icon = item.declaration.identity.icon
+      if (typeof icon == 'string' && !icon.includes(basePath))
+        item.declaration.identity.icon = `${basePath}${icon}`
+    })
+    const formattedDataSourceList = dataSourceList.map(item => transformDataSourceToTool(item))
+    return formattedDataSourceList?.find(toolWithProvider => toolWithProvider.plugin_id === data.plugin_id)?.icon
+  }, [data.plugin_id, dataSourceListData, isSuccess])
+
+  return datasourceIcon
+}

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

dify/web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import cn from '@/utils/classnames'
+import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
+import DatasourceIcon from './datasource-icon'
+import { useDatasourceIcon } from './hooks'
+
+type OptionCardProps = {
+  label: string
+  selected: boolean
+  nodeData: DataSourceNodeType
+  onClick?: () => void
+}
+
+const OptionCard = ({
+  label,
+  selected,
+  nodeData,
+  onClick,
+}: OptionCardProps) => {
+  const iconUrl = useDatasourceIcon(nodeData) as string
+
+  return (
+    <div
+      className={cn(
+        'flex cursor-pointer items-center gap-2 rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg p-3 shadow-shadow-shadow-3',
+        selected
+          ? 'border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs ring-[0.5px] ring-inset ring-components-option-card-option-selected-border'
+          : 'hover:bg-components-option-card-bg-hover hover:border-components-option-card-option-border-hover hover:shadow-xs',
+      )}
+      onClick={onClick}
+    >
+      <div className='flex size-8 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border bg-background-default-dodge p-1.5'>
+        <DatasourceIcon iconUrl={iconUrl} />
+      </div>
+      <div
+        className={cn('system-sm-medium line-clamp-2 grow text-text-secondary', selected && 'text-text-primary')}
+        title={label}
+      >
+        {label}
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(OptionCard)