feat: Enhance dataset settings with chunk structure and icon selection

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/settings/page.tsx

@@ -8,8 +8,8 @@ const Settings = async () => {
 
   return (
     <div className='h-full overflow-y-auto'>
-      <div className='px-6 py-3'>
-        <div className='system-xl-semibold mb-1 text-text-primary'>{t('title')}</div>
+      <div className='flex flex-col gap-y-0.5 px-6 pb-2 pt-3'>
+        <div className='system-xl-semibold text-text-primary'>{t('title')}</div>
         <div className='system-sm-regular text-text-tertiary'>{t('desc')}</div>
       </div>
       <Form />

web/app/components/app-sidebar/dataset-info.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import AppIcon from '../base/app-icon'
 import Effect from '../base/effect'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
+import type { DataSet } from '@/models/datasets'
 import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import Badge from '../base/badge'
@@ -20,16 +21,16 @@ const DatasetInfo: FC<Props> = ({
   extraInfo,
 }) => {
   const { t } = useTranslation()
-  const dataset = useDatasetDetailContextWithSelector(state => state.dataset)
-  const iconInfo = dataset!.icon_info || {
+  const dataset = useDatasetDetailContextWithSelector(state => state.dataset) as DataSet
+  const iconInfo = dataset.icon_info || {
     icon: '📙',
     icon_type: 'emoji',
     icon_background: '#FFF4ED',
     icon_url: '',
   }
-  const isExternal = dataset!.provider === 'external'
+  const isExternal = dataset.provider === 'external'
   const { formatIndexingTechniqueAndMethod } = useKnowledge()
-  const Icon = isExternal ? DOC_FORM_ICON_WITH_BG.external : DOC_FORM_ICON_WITH_BG[dataset!.doc_form]
+  const Icon = isExternal ? DOC_FORM_ICON_WITH_BG.external : DOC_FORM_ICON_WITH_BG[dataset.doc_form]
 
   return (
     <div className={cn('relative flex flex-col', expand ? '' : 'p-1')}>
@@ -53,22 +54,22 @@ const DatasetInfo: FC<Props> = ({
                 <div className='flex flex-col gap-y-1'>
                   <div
                     className='system-md-semibold truncate text-text-secondary'
-                    title={dataset!.name}
+                    title={dataset.name}
                   >
-                    {dataset!.name}
+                    {dataset.name}
                   </div>
                   <div className='system-2xs-medium-uppercase text-text-tertiary'>
                     {isExternal && t('dataset.externalTag')}
                     {!isExternal && (
                       <div className='flex items-center gap-x-1'>
-                        <Badge>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset!.doc_form]}`)}</Badge>
-                        <Badge>{formatIndexingTechniqueAndMethod(dataset!.indexing_technique, dataset!.retrieval_model_dict?.search_method)}</Badge>
+                        <Badge>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</Badge>
+                        <Badge>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</Badge>
                       </div>
                     )}
                   </div>
                 </div>
                 <p className='system-xs-regular line-clamp-3 text-text-tertiary first-letter:capitalize'>
-                  {dataset!.description}
+                  {dataset.description}
                 </p>
               </>
           </div>

web/app/components/base/effect/index.tsx

@@ -10,7 +10,7 @@ const Effect = ({
 }: EffectProps) => {
   return (
     <div
-      className={cn('absolute size-[112px] bg-util-colors-blue-brand-blue-brand-500 blur-[80px]', className)}
+      className={cn('absolute size-[112px] rounded-full bg-util-colors-blue-brand-blue-brand-500 blur-[80px]', className)}
     />
   )
 }

web/app/components/datasets/settings/chunk-structure/hooks.tsx

@@ -0,0 +1,42 @@
+import {
+  GeneralChunk,
+  ParentChildChunk,
+  QuestionAndAnswer,
+} from '@/app/components/base/icons/src/vender/knowledge'
+import { EffectColor, type Option } from './types'
+import { ChunkingMode } from '@/models/datasets'
+
+export const useChunkStructure = () => {
+  const GeneralOption: Option = {
+    id: ChunkingMode.text,
+    icon: <GeneralChunk className='size-[18px] text-util-colors-indigo-indigo-600' />,
+    title: 'General',
+    description: 'General text chunking mode, the chunks retrieved and recalled are the same.',
+    effectColor: EffectColor.indigo,
+    showEffectColor: true,
+  }
+  const ParentChildOption: Option = {
+    id: ChunkingMode.parentChild,
+    icon: <ParentChildChunk className='size-[18px] text-util-colors-blue-light-blue-light-500' />,
+    title: 'Parent-Child',
+    description: 'When using the parent-child mode, the child-chunk is used for retrieval and the parent-chunk is used for recall as context.',
+    effectColor: EffectColor.blueLight,
+    showEffectColor: true,
+  }
+  const QuestionAnswerOption: Option = {
+    id: ChunkingMode.qa,
+    icon: <QuestionAndAnswer className='size-[18px] text-text-tertiary' />,
+    title: 'Q&A',
+    description: 'When using structured Q&A data, you can create documents that pair questions with answers. These documents are indexed based on the question portion, allowing the system to retrieve relevant answers based on query similarity',
+  }
+
+  const options = [
+    GeneralOption,
+    ParentChildOption,
+    QuestionAnswerOption,
+  ]
+
+  return {
+    options,
+  }
+}

web/app/components/datasets/settings/chunk-structure/index.tsx

@@ -0,0 +1,43 @@
+import type { ChunkingMode } from '@/models/datasets'
+import React from 'react'
+import { useChunkStructure } from './hooks'
+import OptionCard from '../option-card'
+
+type ChunkStructureProps = {
+  chunkStructure: ChunkingMode
+  onChunkStructureChange: (value: ChunkingMode) => void
+}
+
+const ChunkStructure = ({
+  chunkStructure,
+  onChunkStructureChange,
+}: ChunkStructureProps) => {
+  const {
+    options,
+  } = useChunkStructure()
+
+  return (
+    <div className='flex flex-col gap-y-1'>
+      {
+        options.map(option => (
+          <OptionCard
+            key={option.id}
+            id={option.id}
+            icon={option.icon}
+            title={option.title}
+            description={option.description}
+            onClick={() => {
+              onChunkStructureChange(option.id)
+            }}
+            showHighlightBorder={chunkStructure === option.id}
+            effectColor={option.effectColor}
+            showEffectColor
+            className='gap-x-1.5 p-3 pr-4'
+          />
+        ))
+      }
+    </div>
+  )
+}
+
+export default React.memo(ChunkStructure)

web/app/components/datasets/settings/chunk-structure/types.ts

@@ -0,0 +1,17 @@
+import type { ChunkingMode } from '@/models/datasets'
+
+export enum EffectColor {
+  indigo = 'indigo',
+  blueLight = 'blue-light',
+  orange = 'orange',
+  purple = 'purple',
+}
+
+export type Option = {
+  id: ChunkingMode
+  icon?: React.ReactNode
+  title: string
+  description?: string
+  effectColor?: EffectColor
+  showEffectColor?: boolean
+}

web/app/components/datasets/settings/form/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { useMount } from 'ahooks'
 import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
@@ -11,16 +11,16 @@ import RetrievalSettings from '../../external-knowledge-base/create/RetrievalSet
 import { IndexingType } from '../../create/step-two'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
-import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'
 import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import { updateDatasetSetting } from '@/service/datasets'
+import type { IconInfo } from '@/models/datasets'
 import { type DataSetListResponse, DatasetPermission } from '@/models/datasets'
 import DatasetDetailContext from '@/context/dataset-detail'
-import type { RetrievalConfig } from '@/types/app'
-import { useAppContext } from '@/context/app-context'
+import type { AppIconType, RetrievalConfig } from '@/types/app'
+import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import {
@@ -31,12 +31,16 @@ import type { DefaultModel } from '@/app/components/header/account-setting/model
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { fetchMembers } from '@/service/common'
 import type { Member } from '@/models/common'
-import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
+import AppIcon from '@/app/components/base/app-icon'
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import AppIconPicker from '@/app/components/base/app-icon-picker'
+import Divider from '@/app/components/base/divider'
+import ChunkStructure from '../chunk-structure'
+import Toast from '@/app/components/base/toast'
+import { RiAlertFill } from '@remixicon/react'
 
 const rowClass = 'flex'
-const labelClass = `
-  flex items-center shrink-0 w-[180px] h-9
-`
+const labelClass = 'flex items-center shrink-0 w-[180px] h-7 pt-1'
 
 const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
   if (!pageIndex || previousPageData.has_more)
@@ -44,16 +48,25 @@ const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
   return null
 }
 
+const DEFAULT_APP_ICON: IconInfo = {
+  icon_type: 'emoji',
+  icon: '📙',
+  icon_background: '#FFF4ED',
+  icon_url: '',
+}
+
 const Form = () => {
   const { t } = useTranslation()
-  const { notify } = useContext(ToastContext)
   const { mutate } = useSWRConfig()
-  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const isCurrentWorkspaceDatasetOperator = useAppContextWithSelector(state => state.isCurrentWorkspaceDatasetOperator)
   const { dataset: currentDataset, mutateDatasetRes: mutateDatasets } = useContext(DatasetDetailContext)
   const [loading, setLoading] = useState(false)
   const [name, setName] = useState(currentDataset?.name ?? '')
+  const [iconInfo, setIconInfo] = useState(currentDataset?.icon_info || DEFAULT_APP_ICON)
+  const [showAppIconPicker, setShowAppIconPicker] = useState(false)
   const [description, setDescription] = useState(currentDataset?.description ?? '')
   const [permission, setPermission] = useState(currentDataset?.permission)
+  const [chunkStructure, setChunkStructure] = useState(currentDataset?.doc_form)
   const [topK, setTopK] = useState(currentDataset?.external_retrieval_model.top_k ?? 2)
   const [scoreThreshold, setScoreThreshold] = useState(currentDataset?.external_retrieval_model.score_threshold ?? 0.5)
   const [scoreThresholdEnabled, setScoreThresholdEnabled] = useState(currentDataset?.external_retrieval_model.score_threshold_enabled ?? false)
@@ -76,6 +89,7 @@ const Form = () => {
     modelList: rerankModelList,
   } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.rerank)
   const { data: embeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
+  const previousAppIcon = useRef(DEFAULT_APP_ICON)
 
   const getMembers = async () => {
     const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
@@ -85,14 +99,35 @@ const Form = () => {
       setMemberList(accounts)
   }
 
-  const handleSettingsChange = (data: { top_k?: number; score_threshold?: number; score_threshold_enabled?: boolean }) => {
+  const handleOpenAppIconPicker = useCallback(() => {
+    setShowAppIconPicker(true)
+    previousAppIcon.current = iconInfo
+  }, [iconInfo])
+
+  const handleSelectAppIcon = useCallback((icon: AppIconSelection) => {
+    const iconInfo: IconInfo = {
+      icon_type: icon.type,
+      icon: icon.type === 'emoji' ? icon.icon : icon.fileId,
+      icon_background: icon.type === 'emoji' ? icon.background : undefined,
+      icon_url: icon.type === 'emoji' ? undefined : icon.url,
+    }
+    setIconInfo(iconInfo)
+    setShowAppIconPicker(false)
+  }, [])
+
+  const handleCloseAppIconPicker = useCallback(() => {
+    setIconInfo(previousAppIcon.current)
+    setShowAppIconPicker(false)
+  }, [])
+
+  const handleSettingsChange = useCallback((data: { top_k?: number; score_threshold?: number; score_threshold_enabled?: boolean }) => {
     if (data.top_k !== undefined)
       setTopK(data.top_k)
     if (data.score_threshold !== undefined)
       setScoreThreshold(data.score_threshold)
     if (data.score_threshold_enabled !== undefined)
       setScoreThresholdEnabled(data.score_threshold_enabled)
-  }
+  }, [])
 
   useMount(() => {
     getMembers()
@@ -102,7 +137,7 @@ const Form = () => {
     if (loading)
       return
     if (!name?.trim()) {
-      notify({ type: 'error', message: t('datasetSettings.form.nameError') })
+      Toast.notify({ type: 'error', message: t('datasetSettings.form.nameError') })
       return
     }
     if (
@@ -112,7 +147,7 @@ const Form = () => {
         indexMethod,
       })
     ) {
-      notify({ type: 'error', message: t('appDebug.datasetConfig.rerankModelRequired') })
+      Toast.notify({ type: 'error', message: t('appDebug.datasetConfig.rerankModelRequired') })
       return
     }
     if (retrievalConfig.weights) {
@@ -125,6 +160,8 @@ const Form = () => {
         datasetId: currentDataset!.id,
         body: {
           name,
+          icon_info: iconInfo,
+          doc_form: chunkStructure,
           description,
           permission,
           indexing_technique: indexMethod,
@@ -154,14 +191,14 @@ const Form = () => {
         })
       }
       await updateDatasetSetting(requestParams)
-      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+      Toast.notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
       if (mutateDatasets) {
         await mutateDatasets()
         mutate(unstable_serialize(getKey))
       }
     }
     catch {
-      notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
+      Toast.notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
     }
     finally {
       setLoading(false)
@@ -169,20 +206,31 @@ const Form = () => {
   }
 
   return (
-    <div className='flex w-full flex-col gap-y-4 px-14 py-8 sm:w-[880px]'>
+    <div className='flex w-full flex-col gap-y-4 px-20 py-8 sm:w-[960px]'>
+      {/* Dataset name and icon */}
       <div className={rowClass}>
         <div className={labelClass}>
-          <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.name')}</div>
+          <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.nameAndIcon')}</div>
         </div>
-        <div className='grow'>
+        <div className='flex grow items-center gap-x-2'>
+          <AppIcon
+            size='small'
+            onClick={handleOpenAppIconPicker}
+            className='cursor-pointer'
+            iconType={iconInfo.icon_type as AppIconType}
+            icon={iconInfo.icon}
+            background={iconInfo.icon_background}
+            imageUrl={iconInfo.icon_url}
+            showEditIcon
+          />
           <Input
             disabled={!currentDataset?.embedding_available}
-            className='h-9'
             value={name}
             onChange={e => setName(e.target.value)}
           />
         </div>
       </div>
+      {/* Dataset description */}
       <div className={rowClass}>
         <div className={labelClass}>
           <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.desc')}</div>
@@ -190,13 +238,14 @@ const Form = () => {
         <div className='grow'>
           <Textarea
             disabled={!currentDataset?.embedding_available}
-            className='h-[120px] resize-none'
+            className='resize-none'
             placeholder={t('datasetSettings.form.descPlaceholder') || ''}
             value={description}
             onChange={e => setDescription(e.target.value)}
           />
         </div>
       </div>
+      {/* Permissions */}
       <div className={rowClass}>
         <div className={labelClass}>
           <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.permissions')}</div>
@@ -212,9 +261,43 @@ const Form = () => {
           />
         </div>
       </div>
+      <Divider
+        type='horizontal'
+        className='my-1 h-px bg-divider-subtle'
+        />
+      {/* Chunk Structure */}
+      <div className={rowClass}>
+        <div>
+          <div className='flex w-[180px] shrink-0 flex-col'>
+            <div className='system-sm-semibold flex h-8 items-center text-text-secondary'>
+              {t('datasetSettings.form.chunkStructure.title')}
+            </div>
+            <div className='body-xs-regular text-text-tertiary'>
+              <a
+                target='_blank'
+                rel='noopener noreferrer'
+                href='https://example.com' // todo: replace link
+                className='text-text-accent'
+              >
+                {t('datasetSettings.form.chunkStructure.learnMore')}
+              </a>
+              {t('datasetSettings.form.chunkStructure.description')}
+            </div>
+          </div>
+        </div>
+        <div className='grow'>
+          <ChunkStructure
+            chunkStructure={chunkStructure!}
+            onChunkStructureChange={setChunkStructure}
+          />
+        </div>
+      </div>
       {currentDataset && currentDataset.indexing_technique && (
         <>
-          <div className='my-1 h-0 w-full border-b border-divider-subtle' />
+          <Divider
+            type='horizontal'
+            className='my-1 h-px bg-divider-subtle'
+          />
           <div className={rowClass}>
             <div className={labelClass}>
               <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.indexMethod')}</div>
@@ -227,13 +310,17 @@ const Form = () => {
                 docForm={currentDataset.doc_form}
                 currentValue={currentDataset.indexing_technique}
               />
-              {currentDataset.indexing_technique === IndexingType.ECONOMICAL && indexMethod === IndexingType.QUALIFIED && <div className='mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-2 shadow-xs backdrop-blur-[5px]'>
-                <div className='absolute bottom-0 left-0 right-0 top-0 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40'></div>
-                <div className='p-1'>
-                  <AlertTriangle className='size-4 text-text-warning-secondary' />
+              {currentDataset.indexing_technique === IndexingType.ECONOMICAL && indexMethod === IndexingType.QUALIFIED && (
+                <div className='mt-2 flex h-10 items-center gap-x-0.5 overflow-hidden rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur px-2 shadow-xs shadow-shadow-shadow-3'>
+                  <div className='flex items-center bg-toast-warning-bg' />
+                  <div className='p-1'>
+                    <RiAlertFill className='size-4 text-text-warning-secondary' />
+                  </div>
+                  <span className='system-xs-medium text-text-primary'>
+                    {t('datasetSettings.form.upgradeHighQualityTip')}
+                  </span>
                 </div>
-                <span className='system-xs-medium'>{t('datasetSettings.form.upgradeHighQualityTip')}</span>
-              </div>}
+              )}
             </div>
           </div>
         </>
@@ -347,6 +434,12 @@ const Form = () => {
           </Button>
         </div>
       </div>
+      {showAppIconPicker && (
+        <AppIconPicker
+          onSelect={handleSelectAppIcon}
+          onClose={handleCloseAppIconPicker}
+        />
+      )}
     </div>
   )
 }

web/app/components/datasets/settings/option-card.tsx

@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import Badge from '@/app/components/base/badge'
+import { useTranslation } from 'react-i18next'
+import { EffectColor } from './chunk-structure/types'
+
+const HEADER_EFFECT_MAP: Record<EffectColor, string> = {
+  [EffectColor.indigo]: 'bg-util-colors-indigo-indigo-600 opacity-50',
+  [EffectColor.blueLight]: 'bg-util-colors-blue-light-blue-light-600 opacity-80',
+  [EffectColor.orange]: 'bg-util-colors-orange-orange-500 opacity-50',
+  [EffectColor.purple]: 'bg-util-colors-purple-purple-600 opacity-80',
+}
+type OptionCardProps<T> = {
+  id: T
+  className?: string
+  showHighlightBorder?: boolean
+  icon?: ReactNode
+  title: string
+  description?: string
+  isRecommended?: boolean
+  effectColor?: EffectColor
+  showEffectColor?: boolean
+  onClick?: (id: T) => void
+}
+const OptionCard = <T,>({
+  id,
+  className,
+  showHighlightBorder,
+  icon,
+  title,
+  description,
+  isRecommended,
+  effectColor,
+  showEffectColor,
+  onClick,
+}: OptionCardProps<T>) => {
+  const { t } = useTranslation()
+
+  return (
+    <div
+      className={cn(
+        'cursor-pointer overflow-hidden rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg',
+        showHighlightBorder && 'border border-components-option-card-option-selected-border ring-[0.5px] ring-inset ring-components-option-card-option-selected-border',
+      )}
+      onClick={() => onClick?.(id)}
+    >
+      <div className={cn(
+        'relative flex rounded-t-xl p-2',
+        className,
+      )}>
+        {
+          effectColor && showEffectColor && (
+            <div className={cn(
+              'absolute left-[-2px] top-[-2px] h-14 w-14 rounded-full blur-[80px]',
+              `${HEADER_EFFECT_MAP[effectColor]}`,
+            )}/>
+          )
+        }
+        {
+          icon && (
+            <div className='flex size-6 shrink-0 items-center justify-center'>
+              {icon}
+            </div>
+          )
+        }
+        <div className='flex grow flex-col gap-y-0.5 py-px'>
+          <div className='flex items-center gap-x-1'>
+            <span className='system-sm-medium grow text-text-secondary'>
+              {title}
+            </span>
+            {
+              isRecommended && (
+                <Badge className='h-[18px] border-text-accent-secondary text-text-accent-secondary'>
+                  {t('datasetCreation.stepTwo.recommend')}
+                </Badge>
+              )
+            }
+          </div>
+          {
+            description && (
+              <div className='system-xs-regular text-text-tertiary'>
+                {description}
+              </div>
+            )
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(OptionCard)

web/app/components/datasets/settings/permission-selector/index.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
-import React, { useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { useDebounceFn } from 'ahooks'
-import { RiArrowDownSLine } from '@remixicon/react'
+import { RiArrowDownSLine, RiGroup2Line, RiLock2Line } from '@remixicon/react'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -10,11 +10,12 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import Avatar from '@/app/components/base/avatar'
 import Input from '@/app/components/base/input'
-import { Check } from '@/app/components/base/icons/src/vender/line/general'
-import { Users01, UsersPlus } from '@/app/components/base/icons/src/vender/solid/users'
 import { DatasetPermission } from '@/models/datasets'
-import { useAppContext } from '@/context/app-context'
+import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import type { Member } from '@/models/common'
+import Item from './permission-item'
+import MemberItem from './member-item'
+
 export type RoleSelectorProps = {
   disabled?: boolean
   permission?: DatasetPermission
@@ -24,9 +25,16 @@ export type RoleSelectorProps = {
   onMemberSelect: (v: string[]) => void
 }
 
-const PermissionSelector = ({ disabled, permission, value, memberList, onChange, onMemberSelect }: RoleSelectorProps) => {
+const PermissionSelector = ({
+  disabled,
+  permission,
+  value,
+  memberList,
+  onChange,
+  onMemberSelect,
+}: RoleSelectorProps) => {
   const { t } = useTranslation()
-  const { userProfile } = useAppContext()
+  const userProfile = useAppContextWithSelector(state => state.userProfile)
   const [open, setOpen] = useState(false)
 
   const [keywords, setKeywords] = useState('')
@@ -38,18 +46,18 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
     setKeywords(value)
     handleSearch()
   }
-  const selectMember = (member: Member) => {
+  const selectMember = useCallback((member: Member) => {
     if (value.includes(member.id))
       onMemberSelect(value.filter(v => v !== member.id))
     else
       onMemberSelect([...value, member.id])
-  }
+  }, [value, onMemberSelect])
 
   const selectedMembers = useMemo(() => {
     return [
       userProfile,
       ...memberList.filter(member => member.id !== userProfile.id).filter(member => value.includes(member.id)),
-    ].map(member => member.name).join(', ')
+    ]
   }, [userProfile, value, memberList])
 
   const showMe = useMemo(() => {
@@ -60,9 +68,25 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
     return memberList.filter(member => (member.name.includes(searchKeywords) || member.email.includes(searchKeywords)) && member.id !== userProfile.id && ['owner', 'admin', 'editor', 'dataset_operator'].includes(member.role))
   }, [memberList, searchKeywords, userProfile])
 
+  const onSelectOnlyMe = useCallback(() => {
+    onChange(DatasetPermission.onlyMe)
+    setOpen(false)
+  }, [onChange])
+
+  const onSelectAllMembers = useCallback(() => {
+    onChange(DatasetPermission.allTeamMembers)
+    setOpen(false)
+  }, [onChange])
+
+  const onSelectPartialMembers = useCallback(() => {
+    onChange(DatasetPermission.partialMembers)
+    onMemberSelect([userProfile.id])
+  }, [onChange, onMemberSelect, userProfile])
+
   const isOnlyMe = permission === DatasetPermission.onlyMe
   const isAllTeamMembers = permission === DatasetPermission.allTeamMembers
   const isPartialMembers = permission === DatasetPermission.partialMembers
+  const selectedMemberNames = selectedMembers.map(member => member.name).join(', ')
 
   return (
     <PortalToFollowElem
@@ -76,82 +100,122 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
           onClick={() => !disabled && setOpen(v => !v)}
           className='block'
         >
-          <div className={cn('flex cursor-pointer items-center rounded-lg bg-components-input-bg-normal px-3 py-[6px] hover:bg-state-base-hover-alt',
+          <div className={cn('flex cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt',
             open && 'bg-state-base-hover-alt',
             disabled && '!cursor-not-allowed !bg-components-input-bg-disabled hover:!bg-components-input-bg-disabled',
           )}>
             {
               isOnlyMe && (
                 <>
-                  <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='mr-2 shrink-0' size={24} />
-                  <div className='mr-2 grow text-sm leading-5 text-components-input-text-filled'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
+                  <div className='flex size-6 shrink-0 items-center justify-center'>
+                    <Avatar avatar={userProfile.avatar_url} name={userProfile.name} size={20} />
+                  </div>
+                  <div className='system-sm-regular grow p-1 text-components-input-text-filled'>
+                    {t('datasetSettings.form.permissionsOnlyMe')}
+                  </div>
                 </>
               )
             }
             {
               isAllTeamMembers && (
                 <>
-                  <div className='mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEF4FF]'>
-                    <Users01 className='h-3.5 w-3.5 text-[#444CE7]' />
+                  <div className='flex size-6 shrink-0 items-center justify-center'>
+                    <RiGroup2Line className='size-4 text-text-secondary' />
+                  </div>
+                  <div className='system-sm-regular grow p-1 text-components-input-text-filled'>
+                    {t('datasetSettings.form.permissionsAllMember')}
                   </div>
-                  <div className='mr-2 grow text-sm leading-5 text-components-input-text-filled'>{t('datasetSettings.form.permissionsAllMember')}</div>
                 </>
               )
             }
             {
               isPartialMembers && (
                 <>
-                  <div className='mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEF4FF]'>
-                    <Users01 className='h-3.5 w-3.5 text-[#444CE7]' />
+                  <div className='relative flex size-6 shrink-0 items-center justify-center'>
+                    {
+                      selectedMembers.length === 1 && (
+                        <Avatar
+                          avatar={selectedMembers[0].avatar_url}
+                          name={selectedMembers[0].name}
+                          size={20}
+                        />
+                      )
+                    }
+                    {
+                      selectedMembers.length >= 2 && (
+                        <>
+                          <Avatar
+                            avatar={selectedMembers[0].avatar_url}
+                            name={selectedMembers[0].name}
+                            className='absolute left-0 top-0 z-0'
+                            size={16}
+                          />
+                          <Avatar
+                            avatar={selectedMembers[1].avatar_url}
+                            name={selectedMembers[1].name}
+                            className='absolute bottom-0 right-0 z-10'
+                            size={16}
+                          />
+                        </>
+                      )
+                    }
+                  </div>
+                  <div
+                    title={selectedMemberNames}
+                    className='system-sm-regular grow truncate p-1 text-components-input-text-filled'
+                  >
+                    {selectedMemberNames}
                   </div>
-                  <div title={selectedMembers} className='mr-2 grow truncate text-sm leading-5 text-components-input-text-filled'>{selectedMembers}</div>
                 </>
               )
             }
-            <RiArrowDownSLine className={cn('h-4 w-4 shrink-0 text-text-secondary', disabled && '!text-components-input-text-placeholder')} />
+            <RiArrowDownSLine
+              className={cn(
+                'h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',
+                open && 'text-text-secondary',
+                disabled && '!text-components-input-text-placeholder',
+              )}
+            />
           </div>
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1002]'>
-          <div className='relative w-[480px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
+          <div className='relative w-[480px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg shadow-shadow-shadow-5'>
             <div className='p-1'>
-              <div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
-                onChange(DatasetPermission.onlyMe)
-                setOpen(false)
-              }}>
-                <div className='flex items-center gap-2'>
-                  <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='mr-2 shrink-0' size={24} />
-                  <div className='mr-2 grow text-sm leading-5 text-text-primary'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
-                  {isOnlyMe && <Check className='h-4 w-4 text-primary-600' />}
-                </div>
-              </div>
-              <div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
-                onChange(DatasetPermission.allTeamMembers)
-                setOpen(false)
-              }}>
-                <div className='flex items-center gap-2'>
-                  <div className='mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#EEF4FF]'>
-                    <Users01 className='h-3.5 w-3.5 text-[#444CE7]' />
+              {/* Only me */}
+              <Item
+                leftIcon={
+                  <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0' size={24} />
+                }
+                text={t('datasetSettings.form.permissionsOnlyMe')}
+                onClick={onSelectOnlyMe}
+                isSelected={isOnlyMe}
+              />
+              {/* All team members */}
+              <Item
+                leftIcon={
+                  <div className='flex size-6 shrink-0 items-center justify-center'>
+                    <RiGroup2Line className='size-4 text-text-secondary' />
                   </div>
-                  <div className='mr-2 grow text-sm leading-5 text-text-primary'>{t('datasetSettings.form.permissionsAllMember')}</div>
-                  {isAllTeamMembers && <Check className='h-4 w-4 text-primary-600' />}
-                </div>
-              </div>
-              <div className='cursor-pointer rounded-lg py-1 pl-3 pr-2 hover:bg-state-base-hover' onClick={() => {
-                onChange(DatasetPermission.partialMembers)
-                onMemberSelect([userProfile.id])
-              }}>
-                <div className='flex items-center gap-2'>
-                  <div className={cn('mr-2 flex h-6 w-6 items-center justify-center rounded-lg bg-[#FFF6ED]', isPartialMembers && '!bg-[#EEF4FF]')}>
-                    <UsersPlus className={cn('h-3.5 w-3.5 text-[#FB6514]', isPartialMembers && '!text-[#444CE7]')} />
+                }
+                text={t('datasetSettings.form.permissionsAllMember')}
+                onClick={onSelectAllMembers}
+                isSelected={isAllTeamMembers}
+              />
+              {/* Partial members */}
+              <Item
+                leftIcon={
+                  <div className='flex size-6 shrink-0 items-center justify-center'>
+                    <RiLock2Line className='size-4 text-text-secondary' />
                   </div>
-                  <div className='mr-2 grow text-sm leading-5 text-text-primary'>{t('datasetSettings.form.permissionsInvitedMembers')}</div>
-                  {isPartialMembers && <Check className='h-4 w-4 text-primary-600' />}
-                </div>
-              </div>
+                }
+                text={t('datasetSettings.form.permissionsInvitedMembers')}
+                onClick={onSelectPartialMembers}
+                isSelected={isPartialMembers}
+              />
             </div>
             {isPartialMembers && (
-              <div className='max-h-[360px] overflow-y-auto border-t-[1px] border-divider-regular pb-1 pl-1 pr-1'>
-                <div className='sticky left-0 top-0 z-10 bg-white p-2 pb-1'>
+              <div className='max-h-[360px] overflow-y-auto border-t-[1px] border-divider-regular'>
+                <div className='sticky left-0 top-0 z-10 p-2 pb-1'>
                   <Input
                     showLeftIcon
                     showClearIcon
@@ -160,29 +224,37 @@ const PermissionSelector = ({ disabled, permission, value, memberList, onChange,
                     onClear={() => handleKeywordsChange('')}
                   />
                 </div>
-                {showMe && (
-                  <div className='flex items-center gap-2 rounded-lg py-1 pl-3 pr-[10px]'>
-                    <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0' size={24} />
-                    <div className='grow'>
-                      <div className='truncate text-[13px] font-medium leading-[18px] text-text-secondary'>
-                        {userProfile.name}
-                        <span className='text-xs font-normal text-text-tertiary'>{t('datasetSettings.form.me')}</span>
+                <div className='flex flex-col p-1'>
+                  {showMe && (
+                    <MemberItem
+                      leftIcon={
+                        <Avatar avatar={userProfile.avatar_url} name={userProfile.name} className='shrink-0' size={24} />
+                      }
+                      name={userProfile.name}
+                      email={userProfile.email}
+                      isSelected
+                      isMe
+                    />
+                  )}
+                  {filteredMemberList.map(member => (
+                    <MemberItem
+                      leftIcon={
+                        <Avatar avatar={member.avatar_url} name={member.name} className='shrink-0' size={24} />
+                      }
+                      name={member.name}
+                      email={member.email}
+                      isSelected={value.includes(member.id)}
+                      onClick={selectMember.bind(null, member)}
+                    />
+                  ))}
+                  {
+                    !showMe && filteredMemberList.length === 0 && (
+                      <div className='system-xs-regular flex items-center justify-center whitespace-pre-wrap px-1 py-6 text-center text-text-tertiary'>
+                        {t('datasetSettings.form.onSearchResults')}
                       </div>
-                      <div className='truncate text-xs leading-[18px] text-text-tertiary'>{userProfile.email}</div>
-                    </div>
-                    <Check className='h-4 w-4 shrink-0 text-text-accent opacity-30' />
-                  </div>
-                )}
-                {filteredMemberList.map(member => (
-                  <div key={member.id} className='flex cursor-pointer items-center gap-2 rounded-lg py-1 pl-3 pr-[10px] hover:bg-state-base-hover' onClick={() => selectMember(member)}>
-                    <Avatar avatar={userProfile.avatar_url} name={member.name} className='shrink-0' size={24} />
-                    <div className='grow'>
-                      <div className='truncate text-[13px] font-medium leading-[18px] text-text-secondary'>{member.name}</div>
-                      <div className='truncate text-xs leading-[18px] text-text-tertiary'>{member.email}</div>
-                    </div>
-                    {value.includes(member.id) && <Check className='h-4 w-4 shrink-0 text-text-accent' />}
-                  </div>
-                ))}
+                    )
+                  }
+                </div>
               </div>
             )}
           </div>

web/app/components/datasets/settings/permission-selector/member-item.tsx

@@ -0,0 +1,45 @@
+import cn from '@/utils/classnames'
+import { RiCheckLine } from '@remixicon/react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+type MemberItemProps = {
+  leftIcon: React.ReactNode
+  name: string
+  email: string
+  isSelected: boolean
+  isMe?: boolean
+  onClick?: () => void
+}
+
+const MemberItem = ({
+  leftIcon,
+  name,
+  email,
+  isSelected,
+  isMe = false,
+  onClick,
+}: MemberItemProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div
+      className='flex items-center gap-2 rounded-lg py-1 pl-2 pr-[10px]'
+      onClick={onClick}
+    >
+      {leftIcon}
+      <div className='grow'>
+        <div className='system-sm-medium truncate text-text-secondary'>
+          {name}
+          {isMe && <span className='system-xs-regular text-text-tertiary'>
+            {t('datasetSettings.form.me')}
+          </span>}
+        </div>
+        <div className='system-xs-regular truncate text-text-tertiary'>{email}</div>
+      </div>
+      {isSelected && <RiCheckLine className={cn('size-4 shrink-0 text-text-accent', isMe && 'opacity-30')} />}
+    </div>
+  )
+}
+
+export default React.memo(MemberItem)

web/app/components/datasets/settings/permission-selector/permission-item.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { RiCheckLine } from '@remixicon/react'
+
+type PermissionItemProps = {
+  leftIcon: React.ReactNode
+  text: string
+  onClick: () => void
+  isSelected: boolean
+}
+
+const PermissionItem = ({
+  leftIcon,
+  text,
+  onClick,
+  isSelected,
+}: PermissionItemProps) => {
+  return (
+    <div
+      className='flex cursor-pointer items-center gap-x-1 rounded-lg px-2 py-1 hover:bg-state-base-hover'
+      onClick={onClick}
+    >
+      {leftIcon}
+      <div className='system-md-regular grow text-text-secondary'>
+        {text}
+      </div>
+      {isSelected && <RiCheckLine className='size-4 text-text-accent' />}
+    </div>
+  )
+}
+
+export default React.memo(PermissionItem)

web/i18n/en-US/dataset-settings.ts

@@ -3,9 +3,10 @@ const translation = {
   desc: 'Here you can modify the properties and retrieval settings of this Knowledge.',
   form: {
     name: 'Knowledge Name',
+    nameAndIcon: 'Name & Icon',
     namePlaceholder: 'Please enter the Knowledge name',
     nameError: 'Name cannot be empty',
-    desc: 'Knowledge Description',
+    desc: 'Description',
     descInfo: 'Please write a clear textual description to outline the content of the Knowledge. This description will be used as a basis for matching when selecting from multiple Knowledge for inference.',
     descPlaceholder: 'Describe what is in this data set. A detailed description allows AI to access the content of the data set in a timely manner. If empty, LangGenius will use the default hit strategy.',
     helpText: 'Learn how to write a good dataset description.',
@@ -15,6 +16,12 @@ const translation = {
     permissionsAllMember: 'All team members',
     permissionsInvitedMembers: 'Partial team members',
     me: '(You)',
+    onSearchResults: 'No members match your search query.\nTry your search again.',
+    chunkStructure: {
+      title: 'Chunk Structure',
+      learnMore: 'Learn more',
+      description: ' about Chunk Structure.',
+    },
     indexMethod: 'Index Method',
     indexMethodHighQuality: 'High Quality',
     indexMethodHighQualityTip: 'Calling the embedding model to process documents for more precise retrieval helps LLM generate high-quality answers.',

web/i18n/zh-Hans/dataset-settings.ts

@@ -3,9 +3,10 @@ const translation = {
   desc: '在这里，您可以修改此知识库的属性和检索设置',
   form: {
     name: '知识库名称',
+    nameAndIcon: '名称和图标',
     namePlaceholder: '请输入知识库名称',
     nameError: '名称不能为空',
-    desc: '知识库描述',
+    desc: '描述',
     descInfo: '请写出清楚的文字描述来概述知识库的内容。当从多个知识库中进行选择匹配时，该描述将用作匹配的基础。',
     descPlaceholder: '描述该数据集的内容。详细描述可以让 AI 更快地访问数据集的内容。如果为空，LangGenius 将使用默认的命中策略。',
     helpText: '学习如何编写一份优秀的数据集描述。',
@@ -15,6 +16,12 @@ const translation = {
     permissionsAllMember: '所有团队成员',
     permissionsInvitedMembers: '部分团队成员',
     me: '（你）',
+    onSearchResults: '没有成员匹配您的搜索查询。\n请尝试其他关键词。',
+    chunkStructure: {
+      title: '分段模式',
+      learnMore: '了解更多',
+      description: '关于分段模式。',
+    },
     indexMethod: '索引模式',
     indexMethodHighQuality: '高质量',
     indexMethodHighQualityTip: '调用嵌入模型来处理文档以实现更精确的检索，可以帮助大语言模型生成高质量的回答。',

web/service/datasets.ts

@@ -57,7 +57,7 @@ export const fetchDatasetDetail: Fetcher<DataSet, string> = (datasetId: string)
 export const updateDatasetSetting: Fetcher<DataSet, {
   datasetId: string
   body: Partial<Pick<DataSet,
-    'name' | 'description' | 'permission' | 'partial_member_list' | 'indexing_technique' | 'retrieval_model' | 'embedding_model' | 'embedding_model_provider'
+    'name' | 'description' | 'permission' | 'partial_member_list' | 'indexing_technique' | 'retrieval_model' | 'embedding_model' | 'embedding_model_provider' | 'icon_info' | 'doc_form'
   >>
 }> = ({ datasetId, body }) => {
   return patch<DataSet>(`/datasets/${datasetId}`, { body })