Fix: disable operations of dataset when embedding unavailable (#1055)

Co-authored-by: jyong <jyong@dify.ai>
2023-08-30 17:27:19 +08:00
parent 8b8e510bfe
commit c67f345d0e
16 changed files with 401 additions and 287 deletions
--- a/web/app/components/datasets/documents/detail/completed/InfiniteVirtualList.tsx
+++ b/web/app/components/datasets/documents/detail/completed/InfiniteVirtualList.tsx
@@ -15,7 +15,7 @@ type IInfiniteVirtualListProps = {
  onChangeSwitch: (segId: string, enabled: boolean) => Promise<void>
  onDelete: (segId: string) => Promise<void>
  archived?: boolean
-
+  embeddingAvailable: boolean
 }

 const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
@@ -27,6 +27,7 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
  onChangeSwitch,
  onDelete,
  archived,
+  embeddingAvailable,
 }) => {
  // If there are more items to be loaded then add an extra row to hold a loading indicator.
  const itemCount = hasNextPage ? items.length + 1 : items.length
@@ -45,7 +46,7 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
      content = (
        <>
          {[1, 2, 3].map(v => (
-            <SegmentCard loading={true} detail={{ position: v } as any} />
+            <SegmentCard key={v} loading={true} detail={{ position: v } as any} />
          ))}
        </>
      )
@@ -60,6 +61,7 @@ const InfiniteVirtualList: FC<IInfiniteVirtualListProps> = ({
          onDelete={onDelete}
          loading={false}
          archived={archived}
+          embeddingAvailable={embeddingAvailable}
        />
      ))
    }
--- a/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
+++ b/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
@@ -43,6 +43,7 @@ type ISegmentCardProps = {
  scene?: UsageScene
  className?: string
  archived?: boolean
+  embeddingAvailable: boolean
 }

 const SegmentCard: FC<ISegmentCardProps> = ({
@@ -55,6 +56,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
  scene = 'doc',
  className = '',
  archived,
+  embeddingAvailable,
 }) => {
  const { t } = useTranslation()
  const {
@@ -115,24 +117,26 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                : (
                  <>
                    <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-gray-500 text-xs" />
-                    <div className="hidden group-hover:inline-flex items-center">
-                      <Divider type="vertical" className="!h-2" />
-                      <div
-                        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
-                          e.stopPropagation()
-                        }
-                        className="inline-flex items-center"
-                      >
-                        <Switch
-                          size='md'
-                          disabled={archived}
-                          defaultValue={enabled}
-                          onChange={async (val) => {
-                            await onChangeSwitch?.(id, val)
-                          }}
-                        />
+                    {embeddingAvailable && (
+                      <div className="hidden group-hover:inline-flex items-center">
+                        <Divider type="vertical" className="!h-2" />
+                        <div
+                          onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+                            e.stopPropagation()
+                          }
+                          className="inline-flex items-center"
+                        >
+                          <Switch
+                            size='md'
+                            disabled={archived}
+                            defaultValue={enabled}
+                            onChange={async (val) => {
+                              await onChangeSwitch?.(id, val)
+                            }}
+                          />
+                        </div>
                      </div>
-                    </div>
+                    )}
                  </>
                )}
            </div>
@@ -173,7 +177,7 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                  <div className={cn(s.commonIcon, s.bezierCurveIcon)} />
                  <div className={s.segDataText}>{index_node_hash}</div>
                </div>
-                {!archived && (
+                {!archived && embeddingAvailable && (
                  <div className='shrink-0 w-6 h-6 flex items-center justify-center rounded-md hover:bg-red-100 hover:text-red-600 cursor-pointer group/delete' onClick={(e) => {
                    e.stopPropagation()
                    setShowModal(true)
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -46,6 +46,7 @@ export const SegmentIndexTag: FC<{ positionId: string | number; className?: stri
 }

 type ISegmentDetailProps = {
+  embeddingAvailable: boolean
  segInfo?: Partial<SegmentDetailModel> & { id: string }
  onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>
  onUpdate: (segmentId: string, q: string, a: string, k: string[]) => void
@@ -56,6 +57,7 @@ type ISegmentDetailProps = {
 * Show all the contents of the segment
 */
 const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
+  embeddingAvailable,
  segInfo,
  archived,
  onChangeSwitch,
@@ -146,7 +148,7 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
            </Button>
          </>
        )}
-        {!isEditing && !archived && (
+        {!isEditing && !archived && embeddingAvailable && (
          <>
            <div className='group relative flex justify-center items-center w-6 h-6 hover:bg-gray-100 rounded-md cursor-pointer'>
              <div className={cn(s.editTip, 'hidden items-center absolute -top-10 px-3 h-[34px] bg-white rounded-lg whitespace-nowrap text-xs font-semibold text-gray-700 group-hover:flex')}>{t('common.operation.edit')}</div>
@@ -183,15 +185,19 @@ const SegmentDetailComponent: FC<ISegmentDetailProps> = ({
        </div>
        <div className='flex items-center'>
          <StatusItem status={segInfo?.enabled ? 'enabled' : 'disabled'} reverse textCls='text-gray-500 text-xs' />
-          <Divider type='vertical' className='!h-2' />
-          <Switch
-            size='md'
-            defaultValue={segInfo?.enabled}
-            onChange={async (val) => {
-              await onChangeSwitch?.(segInfo?.id || '', val)
-            }}
-            disabled={archived}
-          />
+          {embeddingAvailable && (
+            <>
+              <Divider type='vertical' className='!h-2' />
+              <Switch
+                size='md'
+                defaultValue={segInfo?.enabled}
+                onChange={async (val) => {
+                  await onChangeSwitch?.(segInfo?.id || '', val)
+                }}
+                disabled={archived}
+              />
+            </>
+          )}
        </div>
      </div>
    </div>
@@ -209,6 +215,7 @@ export const splitArray = (arr: any[], size = 3) => {
 }

 type ICompletedProps = {
+  embeddingAvailable: boolean
  showNewSegmentModal: boolean
  onNewSegmentModalChange: (state: boolean) => void
  importStatus: ProcessStatus | string | undefined
@@ -220,6 +227,7 @@ type ICompletedProps = {
 * Support search and filter
 */
 const Completed: FC<ICompletedProps> = ({
+  embeddingAvailable,
  showNewSegmentModal,
  onNewSegmentModalChange,
  importStatus,
@@ -384,6 +392,7 @@ const Completed: FC<ICompletedProps> = ({
        <Input showPrefix wrapperClassName='!w-52' className='!h-8' onChange={debounce(setSearchValue, 500)} />
      </div>
      <InfiniteVirtualList
+        embeddingAvailable={embeddingAvailable}
        hasNextPage={lastSegmentsRes?.has_more ?? true}
        isNextPageLoading={loading}
        items={allSegments}
@@ -395,6 +404,7 @@ const Completed: FC<ICompletedProps> = ({
      />
      <Modal isShow={currSegment.showModal} onClose={() => {}} className='!max-w-[640px] !overflow-visible'>
        <SegmentDetail
+          embeddingAvailable={embeddingAvailable}
          segInfo={currSegment.segInfo ?? { id: '' }}
          onChangeSwitch={onChangeSwitch}
          onUpdate={handleUpdateSegment}
--- a/web/app/components/datasets/documents/detail/index.tsx
+++ b/web/app/components/datasets/documents/detail/index.tsx
@@ -22,6 +22,7 @@ import type { MetadataType } from '@/service/datasets'
 import { checkSegmentBatchImportProgress, fetchDocumentDetail, segmentBatchImport } from '@/service/datasets'
 import { ToastContext } from '@/app/components/base/toast'
 import type { DocForm } from '@/models/datasets'
+import { useDatasetDetailContext } from '@/context/dataset-detail'

 export const DocumentContext = createContext<{ datasetId?: string; documentId?: string; docForm: string }>({ docForm: '' })

@@ -50,6 +51,8 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
  const router = useRouter()
  const { t } = useTranslation()
  const { notify } = useContext(ToastContext)
+  const { dataset } = useDatasetDetailContext()
+  const embeddingAvailable = !!dataset?.embedding_available
  const [showMetadata, setShowMetadata] = useState(true)
  const [newSegmentModalVisible, setNewSegmentModalVisible] = useState(false)
  const [batchModalVisible, setBatchModalVisible] = useState(false)
@@ -128,7 +131,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
          <Divider className='!h-4' type='vertical' />
          <DocumentTitle extension={documentDetail?.data_source_info?.upload_file?.extension} name={documentDetail?.name} />
          <StatusItem status={documentDetail?.display_status || 'available'} scene='detail' errorMessage={documentDetail?.error || ''} />
-          {documentDetail && !documentDetail.archived && (
+          {embeddingAvailable && documentDetail && !documentDetail.archived && (
            <SegmentAdd
              importStatus={importStatus}
              clearProcessStatus={resetProcessStatus}
@@ -138,6 +141,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
          )}
          <OperationAction
            scene='detail'
+            embeddingAvailable={embeddingAvailable}
            detail={{
              enabled: documentDetail?.enabled || false,
              archived: documentDetail?.archived || false,
@@ -161,6 +165,7 @@ const DocumentDetail: FC<Props> = ({ datasetId, documentId }) => {
              {embedding
                ? <Embedding detail={documentDetail} detailUpdate={detailMutate} />
                : <Completed
+                  embeddingAvailable={embeddingAvailable}
                  showNewSegmentModal={newSegmentModalVisible}
                  onNewSegmentModalChange={setNewSegmentModalVisible}
                  importStatus={importStatus}
--- a/web/app/components/datasets/documents/index.tsx
+++ b/web/app/components/datasets/documents/index.tsx
@@ -51,7 +51,7 @@ const NotionIcon = ({ className }: React.SVGProps<SVGElement>) => {
  </svg>
 }

-const EmptyElement: FC<{ onClick: () => void; type?: 'upload' | 'sync' }> = ({ onClick, type = 'upload' }) => {
+const EmptyElement: FC<{ canAdd: boolean; onClick: () => void; type?: 'upload' | 'sync' }> = ({ canAdd = true, onClick, type = 'upload' }) => {
  const { t } = useTranslation()
  return <div className={s.emptyWrapper}>
    <div className={s.emptyElement}>
@@ -62,7 +62,7 @@ const EmptyElement: FC<{ onClick: () => void; type?: 'upload' | 'sync' }> = ({ o
      <div className={s.emptyTip}>
        {t(`datasetDocuments.list.empty.${type}.tip`)}
      </div>
-      {type === 'upload' && <Button onClick={onClick} className={s.addFileBtn}>
+      {type === 'upload' && canAdd && <Button onClick={onClick} className={s.addFileBtn}>
        <PlusIcon className={s.plusIcon} />{t('datasetDocuments.list.addFile')}
      </Button>}
    </div>
@@ -84,6 +84,7 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
  const [notionPageSelectorModalVisible, setNotionPageSelectorModalVisible] = useState(false)
  const [timerCanRun, setTimerCanRun] = useState(true)
  const isDataSourceNotion = dataset?.data_source_type === DataSourceType.NOTION
+  const embeddingAvailable = !!dataset?.embedding_available

  const query = useMemo(() => {
    return { page: currPage + 1, limit, keyword: searchValue, fetch: isDataSourceNotion ? true : '' }
@@ -205,20 +206,19 @@ const Documents: FC<IDocumentsProps> = ({ datasetId }) => {
            onChange={debounce(setSearchValue, 500)}
            value={searchValue}
          />
-          <Button type='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px]'>
-            <PlusIcon className='h-4 w-4 mr-2 stroke-current' />
-            {
-              isDataSourceNotion
-                ? t('datasetDocuments.list.addPages')
-                : t('datasetDocuments.list.addFile')
-            }
-          </Button>
+          {embeddingAvailable && (
+            <Button type='primary' onClick={routeToDocCreate} className='!h-8 !text-[13px]'>
+              <PlusIcon className='h-4 w-4 mr-2 stroke-current' />
+              {isDataSourceNotion && t('datasetDocuments.list.addPages')}
+              {!isDataSourceNotion && t('datasetDocuments.list.addFile')}
+            </Button>
+          )}
        </div>
        {isLoading
          ? <Loading type='app' />
          : total > 0
-            ? <List documents={documentsList || []} datasetId={datasetId} onUpdate={mutate} />
-            : <EmptyElement onClick={routeToDocCreate} type={isDataSourceNotion ? 'sync' : 'upload'} />
+            ? <List embeddingAvailable={embeddingAvailable} documents={documentsList || []} datasetId={datasetId} onUpdate={mutate} />
+            : <EmptyElement canAdd={embeddingAvailable} onClick={routeToDocCreate} type={isDataSourceNotion ? 'sync' : 'upload'} />
        }
        {/* Show Pagination only if the total is more than the limit */}
        {(total && total > limit)
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -103,6 +103,7 @@ type OperationName = 'delete' | 'archive' | 'enable' | 'disable' | 'sync' | 'un_

 // operation action for list and detail
 export const OperationAction: FC<{
+  embeddingAvailable: boolean
  detail: {
    enabled: boolean
    archived: boolean
@@ -114,7 +115,7 @@ export const OperationAction: FC<{
  onUpdate: (operationName?: string) => void
  scene?: 'list' | 'detail'
  className?: string
-}> = ({ datasetId, detail, onUpdate, scene = 'list', className = '' }) => {
+}> = ({ embeddingAvailable, datasetId, detail, onUpdate, scene = 'list', className = '' }) => {
  const { id, enabled = false, archived = false, data_source_type } = detail || {}
  const [showModal, setShowModal] = useState(false)
  const { notify } = useContext(ToastContext)
@@ -154,87 +155,94 @@ export const OperationAction: FC<{
  }

  return <div className='flex items-center' onClick={e => e.stopPropagation()}>
-    {isListScene && <>
-      {archived
-        ? <Tooltip selector={`list-switch-${id}`} content={t('datasetDocuments.list.action.enableWarning') as string} className='!font-semibold'>
-          <div>
-            <Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' />
-          </div>
-        </Tooltip>
-        : <Switch defaultValue={enabled} onChange={v => onOperate(v ? 'enable' : 'disable')} size='md' />
-      }
-      <Divider className='!ml-4 !mr-2 !h-3' type='vertical' />
-    </>}
-    <Popover
-      htmlContent={
-        <div className='w-full py-1'>
-          {!isListScene && <>
-            <div className='flex justify-between items-center mx-4 pt-2'>
-              <span className={cn(s.actionName, 'font-medium')}>
-                {!archived && enabled ? t('datasetDocuments.list.index.enable') : t('datasetDocuments.list.index.disable')}
-              </span>
-              <Tooltip
-                selector={`detail-switch-${id}`}
-                content={t('datasetDocuments.list.action.enableWarning') as string}
-                className='!font-semibold'
-                disabled={!archived}
-              >
-                <div>
-                  <Switch
-                    defaultValue={archived ? false : enabled}
-                    onChange={v => !archived && onOperate(v ? 'enable' : 'disable')}
-                    disabled={archived}
-                    size='md'
-                  />
-                </div>
-              </Tooltip>
+    {isListScene && !embeddingAvailable && (
+      <Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' />
+    )}
+    {isListScene && embeddingAvailable && (
+      <>
+        {archived
+          ? <Tooltip selector={`list-switch-${id}`} content={t('datasetDocuments.list.action.enableWarning') as string} className='!font-semibold'>
+            <div>
+              <Switch defaultValue={false} onChange={() => { }} disabled={true} size='md' />
            </div>
-            <div className='mx-4 pb-1 pt-0.5 text-xs text-gray-500'>
-              {!archived && enabled ? t('datasetDocuments.list.index.enableTip') : t('datasetDocuments.list.index.disableTip')}
-            </div>
-            <Divider />
-          </>}
-          {!archived && (
-            <>
-              <div className={s.actionItem} onClick={() => router.push(`/datasets/${datasetId}/documents/${detail.id}/settings`)}>
-                <SettingsIcon />
-                <span className={s.actionName}>{t('datasetDocuments.list.action.settings')}</span>
+          </Tooltip>
+          : <Switch defaultValue={enabled} onChange={v => onOperate(v ? 'enable' : 'disable')} size='md' />
+        }
+        <Divider className='!ml-4 !mr-2 !h-3' type='vertical' />
+      </>
+    )}
+    {embeddingAvailable && (
+      <Popover
+        htmlContent={
+          <div className='w-full py-1'>
+            {!isListScene && <>
+              <div className='flex justify-between items-center mx-4 pt-2'>
+                <span className={cn(s.actionName, 'font-medium')}>
+                  {!archived && enabled ? t('datasetDocuments.list.index.enable') : t('datasetDocuments.list.index.disable')}
+                </span>
+                <Tooltip
+                  selector={`detail-switch-${id}`}
+                  content={t('datasetDocuments.list.action.enableWarning') as string}
+                  className='!font-semibold'
+                  disabled={!archived}
+                >
+                  <div>
+                    <Switch
+                      defaultValue={archived ? false : enabled}
+                      onChange={v => !archived && onOperate(v ? 'enable' : 'disable')}
+                      disabled={archived}
+                      size='md'
+                    />
+                  </div>
+                </Tooltip>
              </div>
-              {data_source_type === 'notion_import' && (
-                <div className={s.actionItem} onClick={() => onOperate('sync')}>
-                  <SyncIcon />
-                  <span className={s.actionName}>{t('datasetDocuments.list.action.sync')}</span>
+              <div className='mx-4 pb-1 pt-0.5 text-xs text-gray-500'>
+                {!archived && enabled ? t('datasetDocuments.list.index.enableTip') : t('datasetDocuments.list.index.disableTip')}
+              </div>
+              <Divider />
+            </>}
+            {!archived && (
+              <>
+                <div className={s.actionItem} onClick={() => router.push(`/datasets/${datasetId}/documents/${detail.id}/settings`)}>
+                  <SettingsIcon />
+                  <span className={s.actionName}>{t('datasetDocuments.list.action.settings')}</span>
                </div>
-              )}
-              <Divider className='my-1' />
-            </>
-          )}
-          {!archived && <div className={s.actionItem} onClick={() => onOperate('archive')}>
-            <ArchiveIcon />
-            <span className={s.actionName}>{t('datasetDocuments.list.action.archive')}</span>
-          </div>}
-          {archived && (
-            <div className={s.actionItem} onClick={() => onOperate('un_archive')}>
+                {data_source_type === 'notion_import' && (
+                  <div className={s.actionItem} onClick={() => onOperate('sync')}>
+                    <SyncIcon />
+                    <span className={s.actionName}>{t('datasetDocuments.list.action.sync')}</span>
+                  </div>
+                )}
+                <Divider className='my-1' />
+              </>
+            )}
+            {!archived && <div className={s.actionItem} onClick={() => onOperate('archive')}>
              <ArchiveIcon />
-              <span className={s.actionName}>{t('datasetDocuments.list.action.unarchive')}</span>
+              <span className={s.actionName}>{t('datasetDocuments.list.action.archive')}</span>
+            </div>}
+            {archived && (
+              <div className={s.actionItem} onClick={() => onOperate('un_archive')}>
+                <ArchiveIcon />
+                <span className={s.actionName}>{t('datasetDocuments.list.action.unarchive')}</span>
+              </div>
+            )}
+            <div className={cn(s.actionItem, s.deleteActionItem, 'group')} onClick={() => setShowModal(true)}>
+              <TrashIcon className={'w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
+              <span className={cn(s.actionName, 'group-hover:text-red-500')}>{t('datasetDocuments.list.action.delete')}</span>
            </div>
-          )}
-          <div className={cn(s.actionItem, s.deleteActionItem, 'group')} onClick={() => setShowModal(true)}>
-            <TrashIcon className={'w-4 h-4 stroke-current text-gray-500 stroke-2 group-hover:text-red-500'} />
-            <span className={cn(s.actionName, 'group-hover:text-red-500')}>{t('datasetDocuments.list.action.delete')}</span>
          </div>
-        </div>
-      }
-      trigger='click'
-      position='br'
-      btnElement={
-        <div className={cn(s.commonIcon)}>
-          <DotsHorizontal className='w-4 h-4 text-gray-700' />
-        </div>
-      }
-      btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!bg-gray-100 !shadow-none' : '!bg-transparent')}
-      className={`!w-[200px] h-fit !z-20 ${className}`}
-    />
+        }
+        trigger='click'
+        position='br'
+        btnElement={
+          <div className={cn(s.commonIcon)}>
+            <DotsHorizontal className='w-4 h-4 text-gray-700' />
+          </div>
+        }
+        btnClassName={open => cn(isListScene ? s.actionIconWrapperList : s.actionIconWrapperDetail, open ? '!bg-gray-100 !shadow-none' : '!bg-transparent')}
+        className={`!w-[200px] h-fit !z-20 ${className}`}
+      />
+    )}
    {showModal && <Modal isShow={showModal} onClose={() => setShowModal(false)} className={s.delModal} closable>
      <div>
        <div className={s.warningWrapper}>
@@ -277,6 +285,7 @@ const renderCount = (count: number | undefined) => {

 type LocalDoc = SimpleDocumentDetail & { percent?: number }
 type IDocumentListProps = {
+  embeddingAvailable: boolean
  documents: LocalDoc[]
  datasetId: string
  onUpdate: () => void
@@ -285,7 +294,7 @@ type IDocumentListProps = {
 /**
 * Document list component including basic information
 */
-const DocumentList: FC<IDocumentListProps> = ({ documents = [], datasetId, onUpdate }) => {
+const DocumentList: FC<IDocumentListProps> = ({ embeddingAvailable, documents = [], datasetId, onUpdate }) => {
  const { t } = useTranslation()
  const router = useRouter()
  const [localDocs, setLocalDocs] = useState<LocalDoc[]>(documents)
@@ -361,6 +370,7 @@ const DocumentList: FC<IDocumentListProps> = ({ documents = [], datasetId, onUpd
              </td>
              <td>
                <OperationAction
+                  embeddingAvailable={embeddingAvailable}
                  datasetId={datasetId}
                  detail={pick(doc, ['enabled', 'archived', 'id', 'data_source_type', 'doc_form'])}
                  onUpdate={onUpdate}