feat: support select dataset

web/app/components/app/configuration/base/feature-panel/index.tsx

 'use client'
-import React, { FC, ReactNode } from 'react'
+import type { FC, ReactNode } from 'react'
+import React from 'react'
 import cn from 'classnames'
 
-export interface IFeaturePanelProps {
+export type IFeaturePanelProps = {
   className?: string
-  headerIcon: ReactNode
+  headerIcon?: ReactNode
   title: ReactNode
   headerRight: ReactNode
   hasHeaderBottomBorder?: boolean
@@ -26,15 +27,17 @@ const FeaturePanel: FC<IFeaturePanelProps> = ({
   return (
     <div
       className={cn(className, isFocus && 'border border-[#2D0DEE]', 'rounded-xl bg-gray-50 pt-2 pb-3', noBodySpacing && '!pb-0')}
-      style={isFocus ? {
-        boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
-      } : {}}
+      style={isFocus
+        ? {
+          boxShadow: '0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)',
+        }
+        : {}}
     >
       {/* Header */}
       <div className={cn('pb-2 px-3', hasHeaderBottomBorder && 'border-b border-gray-100')}>
         <div className='flex justify-between items-center h-8'>
           <div className='flex items-center space-x-1 shrink-0'>
-            <div className='flex items-center justify-center w-4 h-4'>{headerIcon}</div>
+            {headerIcon && <div className='flex items-center justify-center w-4 h-4'>{headerIcon}</div>}
             <div className='text-sm font-semibold text-gray-800'>{title}</div>
           </div>
           <div>

web/app/components/explore/universal-chat/config/data-config/index.tsx

+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import { isEqual } from 'lodash-es'
+import produce from 'immer'
+import FeaturePanel from '@/app/components/app/configuration/base/feature-panel'
+import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
+import CardItem from '@/app/components/app/configuration/dataset-config/card-item'
+import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset'
+import type { DataSet } from '@/models/datasets'
+
+type Props = {
+  dataSets: DataSet[]
+  onChange: (data: DataSet[]) => void
+}
+
+const DatasetConfig: FC<Props> = ({
+  dataSets,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  const selectedIds = dataSets.map(item => item.id)
+
+  const hasData = dataSets.length > 0
+  const [isShowSelectDataSet, { setTrue: showSelectDataSet, setFalse: hideSelectDataSet }] = useBoolean(false)
+  const handleSelect = (data: DataSet[]) => {
+    if (isEqual(data.map(item => item.id), dataSets.map(item => item.id))) {
+      hideSelectDataSet()
+      return
+    }
+
+    if (data.find(item => !item.name)) { // has not loaded selected dataset
+      const newSelected = produce(data, (draft) => {
+        data.forEach((item, index) => {
+          if (!item.name) { // not fetched database
+            const newItem = dataSets.find(i => i.id === item.id)
+            if (newItem)
+              draft[index] = newItem
+          }
+        })
+      })
+      onChange(newSelected)
+    }
+    else {
+      onChange(data)
+    }
+    hideSelectDataSet()
+  }
+  const onRemove = (id: string) => {
+    onChange(dataSets.filter(item => item.id !== id))
+  }
+
+  return (
+    <FeaturePanel
+      className='mt-3'
+      title={t('appDebug.feature.dataSet.title')}
+      headerRight={<OperationBtn type="add" onClick={showSelectDataSet} />}
+      hasHeaderBottomBorder={!hasData}
+    >
+      {hasData
+        ? (
+          <div className='max-h-[220px] overflow-y-auto'>
+            {dataSets.map(item => (
+              <CardItem
+                className="mb-2 !w-full"
+                key={item.id}
+                config={item}
+                onRemove={onRemove}
+              />
+            ))}
+          </div>
+        )
+        : (
+          <div className='pt-2 pb-1 text-xs text-gray-500'>{t('appDebug.feature.dataSet.noData')}</div>
+        )}
+
+      {isShowSelectDataSet && (
+        <SelectDataSet
+          isShow={isShowSelectDataSet}
+          onClose={hideSelectDataSet}
+          selectedIds={selectedIds}
+          onSelect={handleSelect}
+        />
+      )}
+    </FeaturePanel>
+  )
+}
+export default React.memo(DatasetConfig)

web/app/components/explore/universal-chat/config/index.tsx

 'use client'
 import type { FC } from 'react'
 import React from 'react'
+import DataConfig from './data-config'
 
 export type IConfigProps = {
   className?: string
   plugins: Record<string, boolean>
   onPluginChange: (key: string, value: boolean) => void
-  contexts: any[]
-  onContextChange: (contexts: any[]) => void
+  dataSets: any[]
+  onDataSetsChange: (contexts: any[]) => void
 }
 
 const Config: FC<IConfigProps> = ({
   className,
   plugins,
   onPluginChange,
-  contexts,
-  onContextChange,
+  dataSets,
+  onDataSetsChange,
 }) => {
   return (
     <div className={className}>
-      Config content
+      <div >
+
+      </div>
+
+      <DataConfig
+        dataSets={dataSets}
+        onChange={onDataSetsChange}
+      />
     </div>
   )
 }

web/app/components/explore/universal-chat/index.tsx

@@ -34,6 +34,8 @@ import Loading from '@/app/components/base/loading'
 import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
 import Confirm from '@/app/components/base/confirm'
+import type { DataSet } from '@/models/datasets'
+
 const APP_ID = 'universal-chat'
 const isUniversalChat = true
 
@@ -518,7 +520,7 @@ const Main: FC<IMainProps> = () => {
       [key]: value,
     })
   }
-  const [contexts, setContexts] = useState<any[]>([])
+  const [dataSets, setDateSets] = useState<DataSet[]>([])
 
   if (appUnavailable)
     return <AppUnavailable isUnknwonReason={isUnknwonReason} />
@@ -560,8 +562,8 @@ const Main: FC<IMainProps> = () => {
                 configElem={<Init
                   plugins={plugins}
                   onPluginChange={handlePluginsChange}
-                  contexts={contexts}
-                  onContextChange={setContexts}
+                  dataSets={dataSets}
+                  onDataSetsChange={setDateSets}
                 />}
                 chatList={chatList}
                 onSend={handleSend}