feat: knowledge admin role (#5965)

Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

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

@@ -1,31 +1,33 @@
 'use client'
-import { useEffect, useState } from 'react'
-import type { Dispatch } from 'react'
+import { useState } from 'react'
+import { useMount } from 'ahooks'
 import { useContext } from 'use-context-selector'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import { useSWRConfig } from 'swr'
 import { unstable_serialize } from 'swr/infinite'
-import PermissionsRadio from '../permissions-radio'
+import PermissionSelector from '../permission-selector'
 import IndexMethodRadio from '../index-method-radio'
 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 { updateDatasetSetting } from '@/service/datasets'
-import type { DataSet, DataSetListResponse } from '@/models/datasets'
+import type { DataSetListResponse } from '@/models/datasets'
 import DatasetDetailContext from '@/context/dataset-detail'
 import { type RetrievalConfig } from '@/types/app'
-import { useModalContext } from '@/context/modal-context'
+import { useAppContext } from '@/context/app-context'
 import { ensureRerankModelSelected, isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
 import {
   useModelList,
   useModelListAndDefaultModelAndCurrentProviderAndModel,
 } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { DefaultModel } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { fetchMembers } from '@/service/common'
+import type { Member } from '@/models/common'
 
 const rowClass = `
   flex justify-between py-4 flex-wrap gap-y-2
@@ -36,11 +38,6 @@ const labelClass = `
 const inputClass = `
   w-full max-w-[480px] px-3 bg-gray-100 text-sm text-gray-800 rounded-lg outline-none appearance-none
 `
-const useInitialValue: <T>(depend: T, dispatch: Dispatch<T>) => void = (depend, dispatch) => {
-  useEffect(() => {
-    dispatch(depend)
-  }, [depend])
-}
 
 const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
   if (!pageIndex || previousPageData.has_more)
@@ -52,12 +49,14 @@ const Form = () => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
   const { mutate } = useSWRConfig()
+  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
   const { dataset: currentDataset, mutateDatasetRes: mutateDatasets } = useContext(DatasetDetailContext)
-  const { setShowAccountSettingModal } = useModalContext()
   const [loading, setLoading] = useState(false)
   const [name, setName] = useState(currentDataset?.name ?? '')
   const [description, setDescription] = useState(currentDataset?.description ?? '')
   const [permission, setPermission] = useState(currentDataset?.permission)
+  const [selectedMemberIDs, setSelectedMemberIDs] = useState<string[]>(currentDataset?.partial_member_list || [])
+  const [memberList, setMemberList] = useState<Member[]>([])
   const [indexMethod, setIndexMethod] = useState(currentDataset?.indexing_technique)
   const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict as RetrievalConfig)
   const [embeddingModel, setEmbeddingModel] = useState<DefaultModel>(
@@ -78,6 +77,18 @@ const Form = () => {
   } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.rerank)
   const { data: embeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
 
+  const getMembers = async () => {
+    const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
+    if (!accounts)
+      setMemberList([])
+    else
+      setMemberList(accounts)
+  }
+
+  useMount(() => {
+    getMembers()
+  })
+
   const handleSave = async () => {
     if (loading)
       return
@@ -104,7 +115,7 @@ const Form = () => {
     })
     try {
       setLoading(true)
-      await updateDatasetSetting({
+      const requestParams = {
         datasetId: currentDataset!.id,
         body: {
           name,
@@ -118,7 +129,16 @@ const Form = () => {
           embedding_model: embeddingModel.model,
           embedding_model_provider: embeddingModel.provider,
         },
-      })
+      } as any
+      if (permission === 'partial_members') {
+        requestParams.body.partial_member_list = selectedMemberIDs.map((id) => {
+          return {
+            user_id: id,
+            role: memberList.find(member => member.id === id)?.role,
+          }
+        })
+      }
+      await updateDatasetSetting(requestParams)
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
       if (mutateDatasets) {
         await mutateDatasets()
@@ -133,11 +153,6 @@ const Form = () => {
     }
   }
 
-  useInitialValue<string>(currentDataset?.name ?? '', setName)
-  useInitialValue<string>(currentDataset?.description ?? '', setDescription)
-  useInitialValue<DataSet['permission'] | undefined>(currentDataset?.permission, setPermission)
-  useInitialValue<DataSet['indexing_technique'] | undefined>(currentDataset?.indexing_technique, setIndexMethod)
-
   return (
     <div className='w-full sm:w-[800px] p-4 sm:px-16 sm:py-6'>
       <div className={rowClass}>
@@ -174,10 +189,13 @@ const Form = () => {
           <div>{t('datasetSettings.form.permissions')}</div>
         </div>
         <div className='w-full sm:w-[480px]'>
-          <PermissionsRadio
-            disable={!currentDataset?.embedding_available}
-            value={permission}
+          <PermissionSelector
+            disabled={!currentDataset?.embedding_available || isCurrentWorkspaceDatasetOperator}
+            permission={permission}
+            value={selectedMemberIDs}
             onChange={v => setPermission(v)}
+            onMemberSelect={setSelectedMemberIDs}
+            memberList={memberList}
           />
         </div>
       </div>

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

@@ -0,0 +1,174 @@
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import React, { useMemo, useState } from 'react'
+import { useDebounceFn } from 'ahooks'
+import { RiArrowDownSLine } from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Avatar from '@/app/components/base/avatar'
+import SearchInput from '@/app/components/base/search-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 type { DatasetPermission } from '@/models/datasets'
+import { useAppContext } from '@/context/app-context'
+import type { Member } from '@/models/common'
+export type RoleSelectorProps = {
+  disabled?: boolean
+  permission?: DatasetPermission
+  value: string[]
+  memberList: Member[]
+  onChange: (permission?: DatasetPermission) => void
+  onMemberSelect: (v: string[]) => void
+}
+
+const PermissionSelector = ({ disabled, permission, value, memberList, onChange, onMemberSelect }: RoleSelectorProps) => {
+  const { t } = useTranslation()
+  const { userProfile } = useAppContext()
+  const [open, setOpen] = useState(false)
+
+  const [keywords, setKeywords] = useState('')
+  const [searchKeywords, setSearchKeywords] = useState('')
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+  const selectMember = (member: Member) => {
+    if (value.includes(member.id))
+      onMemberSelect(value.filter(v => v !== member.id))
+    else
+      onMemberSelect([...value, member.id])
+  }
+
+  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(() => {
+    return userProfile.name.includes(searchKeywords) || userProfile.email.includes(searchKeywords)
+  }, [searchKeywords, userProfile])
+  const filteredMemberList = useMemo(() => {
+    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])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => !disabled && setOpen(v => !v)}
+          className='block'
+        >
+          {permission === 'only_me' && (
+            <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200', disabled && 'hover:!bg-gray-100 !cursor-default')}>
+              <Avatar name={userProfile.name} className='shrink-0 mr-2' size={24} />
+              <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
+              {!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />}
+            </div>
+          )}
+          {permission === 'all_team_members' && (
+            <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
+              <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
+                <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
+              </div>
+              <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsAllMember')}</div>
+              {!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />}
+            </div>
+          )}
+          {permission === 'partial_members' && (
+            <div className={cn('flex items-center px-3 py-[6px] rounded-lg bg-gray-100 cursor-pointer hover:bg-gray-200', open && 'bg-gray-200')}>
+              <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
+                <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
+              </div>
+              <div title={selectedMembers} className='grow mr-2 text-gray-900 text-sm leading-5 truncate'>{selectedMembers}</div>
+              {!disabled && <RiArrowDownSLine className='shrink-0 w-4 h-4 text-gray-700' />}
+            </div>
+          )}
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1002]'>
+          <div className='relative w-[480px] bg-white rounded-lg border-[0.5px] bg-gray-200 shadow-lg'>
+            <div className='p-1'>
+              <div className='pl-3 pr-2 py-1 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+                onChange('only_me')
+                setOpen(false)
+              }}>
+                <div className='flex items-center gap-2'>
+                  <Avatar name={userProfile.name} className='shrink-0 mr-2' size={24} />
+                  <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsOnlyMe')}</div>
+                  {permission === 'only_me' && <Check className='w-4 h-4 text-primary-600' />}
+                </div>
+              </div>
+              <div className='pl-3 pr-2 py-1 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+                onChange('all_team_members')
+                setOpen(false)
+              }}>
+                <div className='flex items-center gap-2'>
+                  <div className='mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#EEF4FF]'>
+                    <Users01 className='w-3.5 h-3.5 text-[#444CE7]' />
+                  </div>
+                  <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsAllMember')}</div>
+                  {permission === 'all_team_members' && <Check className='w-4 h-4 text-primary-600' />}
+                </div>
+              </div>
+              <div className='pl-3 pr-2 py-1 rounded-lg hover:bg-gray-50 cursor-pointer' onClick={() => {
+                onChange('partial_members')
+                onMemberSelect([userProfile.id])
+              }}>
+                <div className='flex items-center gap-2'>
+                  <div className={cn('mr-2 flex items-center justify-center w-6 h-6 rounded-lg bg-[#FFF6ED]', permission === 'partial_members' && '!bg-[#EEF4FF]')}>
+                    <UsersPlus className={cn('w-3.5 h-3.5 text-[#FB6514]', permission === 'partial_members' && '!text-[#444CE7]')} />
+                  </div>
+                  <div className='grow mr-2 text-gray-900 text-sm leading-5'>{t('datasetSettings.form.permissionsInvitedMembers')}</div>
+                  {permission === 'partial_members' && <Check className='w-4 h-4 text-primary-600' />}
+                </div>
+              </div>
+            </div>
+            {permission === 'partial_members' && (
+              <div className='max-h-[360px] border-t-[1px] border-gray-100 p-1 overflow-y-auto'>
+                <div className='sticky left-0 top-0 p-2 pb-1 bg-white'>
+                  <SearchInput white value={keywords} onChange={handleKeywordsChange} />
+                </div>
+                {showMe && (
+                  <div className='pl-3 pr-[10px] py-1 flex gap-2 items-center rounded-lg'>
+                    <Avatar name={userProfile.name} className='shrink-0' size={24} />
+                    <div className='grow'>
+                      <div className='text-[13px] text-gray-700 font-medium leading-[18px] truncate'>
+                        {userProfile.name}
+                        <span className='text-xs text-gray-500 font-normal'>{t('datasetSettings.form.me')}</span>
+                      </div>
+                      <div className='text-xs text-gray-500 leading-[18px] truncate'>{userProfile.email}</div>
+                    </div>
+                    <Check className='shrink-0 w-4 h-4 text-primary-600 opacity-30' />
+                  </div>
+                )}
+                {filteredMemberList.map(member => (
+                  <div key={member.id} className='pl-3 pr-[10px] py-1 flex gap-2 items-center rounded-lg hover:bg-gray-100 cursor-pointer' onClick={() => selectMember(member)}>
+                    <Avatar name={member.name} className='shrink-0' size={24} />
+                    <div className='grow'>
+                      <div className='text-[13px] text-gray-700 font-medium leading-[18px] truncate'>{member.name}</div>
+                      <div className='text-xs text-gray-500 leading-[18px] truncate'>{member.email}</div>
+                    </div>
+                    {value.includes(member.id) && <Check className='shrink-0 w-4 h-4 text-primary-600' />}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default PermissionSelector

web/app/components/datasets/settings/permissions-radio/assets/user.svg

@@ -1,7 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="24" height="24" rx="8" fill="#EEF4FF"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4043 14.2586C15.5696 13.9296 15.9703 13.7969 16.2993 13.9622C17.3889 14.5095 18.31 15.381 18.9766 16.4548C19.0776 16.6174 19.2246 16.8347 19.2702 17.1291C19.3191 17.4443 19.2335 17.7457 19.1061 17.9749C18.9786 18.2041 18.7676 18.4357 18.4741 18.5605C18.1949 18.6791 17.8913 18.6666 17.6667 18.6666C17.2985 18.6666 17.0001 18.3682 17.0001 18C17.0001 17.6318 17.2985 17.3333 17.6667 17.3333C17.8102 17.3333 17.8856 17.3329 17.9395 17.3292L17.9409 17.3268C17.9536 17.3038 17.8568 17.1789 17.8438 17.158C17.2956 16.2749 16.5524 15.5814 15.7008 15.1536C15.3718 14.9884 15.2391 14.5877 15.4043 14.2586Z" fill="#444CE7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0697 6.01513C14.2336 5.68541 14.6337 5.55095 14.9634 5.71481C16.1691 6.314 17.0001 7.55934 17.0001 8.99998C17.0001 10.4406 16.1691 11.686 14.9634 12.2851C14.6337 12.449 14.2336 12.3145 14.0697 11.9848C13.9059 11.6551 14.0403 11.255 14.37 11.0911C15.14 10.7085 15.6667 9.91515 15.6667 8.99998C15.6667 8.08481 15.14 7.29144 14.37 6.90883C14.0403 6.74497 13.9059 6.34485 14.0697 6.01513Z" fill="#444CE7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.66673 8.99998C6.66673 6.97494 8.30835 5.33331 10.3334 5.33331C12.3584 5.33331 14.0001 6.97494 14.0001 8.99998C14.0001 11.025 12.3584 12.6666 10.3334 12.6666C8.30835 12.6666 6.66673 11.025 6.66673 8.99998Z" fill="#444CE7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3334 13.3333C12.4642 13.3333 14.3691 14.5361 15.5315 16.2801C15.6339 16.4337 15.7431 16.5976 15.8194 16.7533C15.9113 16.9407 15.9773 17.156 15.9619 17.4132C15.9496 17.6183 15.8816 17.8086 15.8007 17.9597C15.7198 18.1107 15.5991 18.2728 15.4352 18.3968C15.2157 18.5628 14.9791 18.621 14.77 18.6453C14.5858 18.6667 14.3677 18.6667 14.148 18.6667C11.6059 18.6662 9.06185 18.6662 6.51877 18.6667C6.29908 18.6667 6.08098 18.6667 5.89682 18.6453C5.68769 18.621 5.4511 18.5628 5.23155 18.3968C5.06767 18.2728 4.94702 18.1107 4.86612 17.9597C4.78523 17.8086 4.71719 17.6183 4.70488 17.4132C4.68945 17.156 4.75545 16.9407 4.84734 16.7533C4.92369 16.5976 5.0329 16.4337 5.13531 16.2801C6.2977 14.5361 8.20257 13.3333 10.3334 13.3333Z" fill="#444CE7"/>
-</svg>

web/app/components/datasets/settings/permissions-radio/index.module.css

@@ -1,46 +0,0 @@
-.user-icon {
-  width: 24px;
-  height: 24px;
-  background: url(./assets/user.svg) center center;
-  background-size: contain;
-}
-
-.wrapper .item:hover {
-  background-color: #ffffff;
-  border-color: #B2CCFF;
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-}
-
-.wrapper .item-active {
-  background-color: #ffffff;
-  border-width: 1.5px;
-  border-color: #528BFF;
-  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
-}
-
-.wrapper .item-active .radio {
-  border-width: 5px;
-  border-color: #155EEF;
-}
-
-.wrapper .item-active:hover {
-  border-width: 1.5px;
-  border-color: #528BFF;
-  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
-}
-
-.wrapper .item.disable {
-  @apply opacity-60;
-}
-.wrapper .item-active.disable {
-  @apply opacity-60;
-}
-.wrapper .item.disable:hover {
-  @apply bg-gray-25 border border-gray-100 shadow-none cursor-default opacity-60;
-}
-.wrapper .item-active.disable:hover {
-  @apply cursor-default opacity-60;
-  border-width: 1.5px;
-  border-color: #528BFF;
-  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
-}

web/app/components/datasets/settings/permissions-radio/index.tsx

@@ -1,66 +0,0 @@
-'use client'
-import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
-import s from './index.module.css'
-import type { DataSet } from '@/models/datasets'
-
-const itemClass = `
-  flex items-center w-full sm:w-[234px] h-12 px-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
-`
-const radioClass = `
-  w-4 h-4 border-[2px] border-gray-200 rounded-full
-`
-type IPermissionsRadioProps = {
-  value?: DataSet['permission']
-  onChange: (v?: DataSet['permission']) => void
-  itemClassName?: string
-  disable?: boolean
-}
-
-const PermissionsRadio = ({
-  value,
-  onChange,
-  itemClassName,
-  disable,
-}: IPermissionsRadioProps) => {
-  const { t } = useTranslation()
-  const options = [
-    {
-      key: 'only_me',
-      text: t('datasetSettings.form.permissionsOnlyMe'),
-    },
-    {
-      key: 'all_team_members',
-      text: t('datasetSettings.form.permissionsAllMember'),
-    },
-  ]
-
-  return (
-    <div className={classNames(s.wrapper, 'flex justify-between w-full flex-wrap gap-y-2')}>
-      {
-        options.map(option => (
-          <div
-            key={option.key}
-            className={classNames(
-              itemClass,
-              itemClassName,
-              s.item,
-              option.key === value && s['item-active'],
-              disable && s.disable,
-            )}
-            onClick={() => {
-              if (!disable)
-                onChange(option.key as DataSet['permission'])
-            }}
-          >
-            <div className={classNames(s['user-icon'], 'mr-3')} />
-            <div className='grow text-sm text-gray-900'>{option.text}</div>
-            <div className={classNames(radioClass, s.radio)} />
-          </div>
-        ))
-      }
-    </div>
-  )
-}
-
-export default PermissionsRadio