Feature/mutil embedding model (#908)

Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>

web/app/(commonLayout)/datasets/DatasetCard.tsx

@@ -5,13 +5,14 @@ import Link from 'next/link'
 import type { MouseEventHandler } from 'react'
 import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from 'classnames'
+import cn from 'classnames'
 import style from '../list.module.css'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
 import { deleteDataset } from '@/service/datasets'
 import AppIcon from '@/app/components/base/app-icon'
 import type { DataSet } from '@/models/datasets'
+import Tooltip from '@/app/components/base/tooltip'
 
 export type DatasetCardProps = {
   dataset: DataSet
@@ -45,26 +46,36 @@ const DatasetCard = ({
 
   return (
     <>
-      <Link href={`/datasets/${dataset.id}/documents`} className={style.listItem}>
+      <Link href={`/datasets/${dataset.id}/documents`} className={cn(style.listItem)}>
         <div className={style.listItemTitle}>
-          <AppIcon size='small' />
-          <div className={style.listItemHeading}>
-            <div className={style.listItemHeadingContent}>{dataset.name}</div>
+          <AppIcon size='small' className={cn(!dataset.embedding_available && style.unavailable)} />
+          <div className={cn(style.listItemHeading, !dataset.embedding_available && style.unavailable)}>
+            <div className={style.listItemHeadingContent}>
+              {dataset.name}
+            </div>
           </div>
+          {!dataset.embedding_available && (
+            <Tooltip
+              selector={`dataset-tag-${dataset.id}`}
+              htmlContent={t('dataset.unavailableTip')}
+            >
+              <span className='px-1 border boder-gray-200 rounded-md text-gray-500 text-xs font-normal leading-[18px]'>{t('dataset.unavailable')}</span>
+            </Tooltip>
+          )}
           <span className={style.deleteDatasetIcon} onClick={onDeleteClick} />
         </div>
-        <div className={style.listItemDescription}>{dataset.description}</div>
-        <div className={classNames(style.listItemFooter, style.datasetCardFooter)}>
+        <div className={cn(style.listItemDescription, !dataset.embedding_available && style.unavailable)}>{dataset.description}</div>
+        <div className={cn(style.listItemFooter, style.datasetCardFooter, !dataset.embedding_available && style.unavailable)}>
           <span className={style.listItemStats}>
-            <span className={classNames(style.listItemFooterIcon, style.docIcon)} />
+            <span className={cn(style.listItemFooterIcon, style.docIcon)} />
             {dataset.document_count}{t('dataset.documentCount')}
           </span>
           <span className={style.listItemStats}>
-            <span className={classNames(style.listItemFooterIcon, style.textIcon)} />
+            <span className={cn(style.listItemFooterIcon, style.textIcon)} />
             {Math.round(dataset.word_count / 1000)}{t('dataset.wordCount')}
           </span>
           <span className={style.listItemStats}>
-            <span className={classNames(style.listItemFooterIcon, style.applicationIcon)} />
+            <span className={cn(style.listItemFooterIcon, style.applicationIcon)} />
             {dataset.app_count}{t('dataset.appCount')}
           </span>
         </div>

web/app/(commonLayout)/datasets/page.tsx

@@ -1,13 +1,7 @@
-import classNames from 'classnames'
-import { getLocaleOnServer } from '@/i18n/server'
-import { useTranslation } from '@/i18n/i18next-serverside-config'
 import Datasets from './Datasets'
 import DatasetFooter from './DatasetFooter'
 
 const AppList = async () => {
-  const locale = getLocaleOnServer()
-  const { t } = await useTranslation(locale, 'dataset')
-
   return (
     <div className='flex flex-col overflow-auto bg-gray-100 shrink-0 grow'>
       <Datasets />

web/app/(commonLayout)/list.module.css

@@ -192,3 +192,11 @@
   @apply inline-flex items-center mb-2 text-sm font-medium;
 }
 /* #endregion new app dialog */
+
+.unavailable {
+  @apply opacity-50;
+}
+
+.listItem:hover .unavailable {
+  @apply opacity-100;
+}