mirror of https://github.com/langgenius/dify.git
125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
'use client'
|
|
import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
|
|
import type { Member } from '@/models/common'
|
|
import type { DataSet, DatasetPermission, IconInfo } from '@/models/datasets'
|
|
import type { AppIconType } from '@/types/app'
|
|
import { useTranslation } from 'react-i18next'
|
|
import AppIcon from '@/app/components/base/app-icon'
|
|
import AppIconPicker from '@/app/components/base/app-icon-picker'
|
|
import Input from '@/app/components/base/input'
|
|
import Textarea from '@/app/components/base/textarea'
|
|
import PermissionSelector from '../../permission-selector'
|
|
|
|
const rowClass = 'flex gap-x-1'
|
|
const labelClass = 'flex items-center shrink-0 w-[180px] h-7 pt-1'
|
|
|
|
type BasicInfoSectionProps = {
|
|
currentDataset: DataSet | undefined
|
|
isCurrentWorkspaceDatasetOperator: boolean
|
|
name: string
|
|
setName: (value: string) => void
|
|
description: string
|
|
setDescription: (value: string) => void
|
|
iconInfo: IconInfo
|
|
showAppIconPicker: boolean
|
|
handleOpenAppIconPicker: () => void
|
|
handleSelectAppIcon: (icon: AppIconSelection) => void
|
|
handleCloseAppIconPicker: () => void
|
|
permission: DatasetPermission | undefined
|
|
setPermission: (value: DatasetPermission | undefined) => void
|
|
selectedMemberIDs: string[]
|
|
setSelectedMemberIDs: (value: string[]) => void
|
|
memberList: Member[]
|
|
}
|
|
|
|
const BasicInfoSection = ({
|
|
currentDataset,
|
|
isCurrentWorkspaceDatasetOperator,
|
|
name,
|
|
setName,
|
|
description,
|
|
setDescription,
|
|
iconInfo,
|
|
showAppIconPicker,
|
|
handleOpenAppIconPicker,
|
|
handleSelectAppIcon,
|
|
handleCloseAppIconPicker,
|
|
permission,
|
|
setPermission,
|
|
selectedMemberIDs,
|
|
setSelectedMemberIDs,
|
|
memberList,
|
|
}: BasicInfoSectionProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
return (
|
|
<>
|
|
{/* Dataset name and icon */}
|
|
<div className={rowClass}>
|
|
<div className={labelClass}>
|
|
<div className="system-sm-semibold text-text-secondary">{t('form.nameAndIcon', { ns: 'datasetSettings' })}</div>
|
|
</div>
|
|
<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}
|
|
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('form.desc', { ns: 'datasetSettings' })}</div>
|
|
</div>
|
|
<div className="grow">
|
|
<Textarea
|
|
disabled={!currentDataset?.embedding_available}
|
|
className="resize-none"
|
|
placeholder={t('form.descPlaceholder', { ns: 'datasetSettings' }) || ''}
|
|
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('form.permissions', { ns: 'datasetSettings' })}</div>
|
|
</div>
|
|
<div className="grow">
|
|
<PermissionSelector
|
|
disabled={!currentDataset?.embedding_available || isCurrentWorkspaceDatasetOperator}
|
|
permission={permission}
|
|
value={selectedMemberIDs}
|
|
onChange={v => setPermission(v)}
|
|
onMemberSelect={setSelectedMemberIDs}
|
|
memberList={memberList}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{showAppIconPicker && (
|
|
<AppIconPicker
|
|
onSelect={handleSelectAppIcon}
|
|
onClose={handleCloseAppIconPicker}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default BasicInfoSection
|