chore: time from now i18n support (#26328)

web/app/components/datasets/list/dataset-card/index.tsx

@@ -11,9 +11,6 @@ import cn from '@/utils/classnames'
 import { useHover } from 'ahooks'
 import { RiFileTextFill, RiMoreFill, RiRobot2Fill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
-import { useGetLanguage } from '@/context/i18n'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
 import { checkIsUsedInApp, deleteDataset } from '@/service/datasets'
 import RenameDatasetModal from '../../rename-modal'
 import Confirm from '@/app/components/base/confirm'
@@ -24,7 +21,7 @@ import AppIcon from '@/app/components/base/app-icon'
 import CornerLabel from '@/app/components/base/corner-label'
 import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets'
 import { useExportPipelineDSL } from '@/service/use-pipeline'
-dayjs.extend(relativeTime)
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 
 const EXTERNAL_PROVIDER = 'external'
 
@@ -87,10 +84,7 @@ const DatasetCard = ({
       return t('dataset.partialEnabled', { count: dataset.document_count, num: availableDocCount })
   }, [t, dataset.document_count, dataset.total_available_documents])
 
-  const language = useGetLanguage()
+  const { formatTimeFromNow } = useFormatTimeFromNow()
-  const formatTimeFromNow = useCallback((time: number) => {
-    return dayjs(time * 1_000).locale(language === 'zh_Hans' ? 'zh-cn' : language.replace('_', '-')).fromNow()
-  }, [language])
 
   const openRenameModal = useCallback(() => {
     setShowRenameModal(true)
@@ -269,7 +263,7 @@ const DatasetCard = ({
             </Tooltip>
           )}
           <span className='system-xs-regular text-divider-deep'>/</span>
-          <span className='system-xs-regular'>{`${t('dataset.updated')} ${formatTimeFromNow(dataset.updated_at)}`}</span>
+          <span className='system-xs-regular'>{`${t('dataset.updated')} ${formatTimeFromNow(dataset.updated_at * 1000)}`}</span>
         </div>
         <div className='absolute right-2 top-2 z-[5] hidden group-hover:block'>
           <CustomPopover

web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx

@@ -21,7 +21,6 @@ import {
 import Button from '@/app/components/base/button'
 import {
   useChecklistBeforePublish,
-  useFormatTimeFromNow,
 } from '@/app/components/workflow/hooks'
 import Divider from '@/app/components/base/divider'
 import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '@/app/components/workflow/utils'
@@ -47,6 +46,7 @@ import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
 import { useModalContextSelector } from '@/context/modal-context'
 import Link from 'next/link'
 import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
 

web/app/components/workflow/hooks/index.ts

@@ -22,4 +22,3 @@ export * from './use-DSL'
 export * from './use-inspect-vars-crud'
 export * from './use-set-workflow-vars-with-value'
 export * from './use-workflow-search'
-export * from './use-format-time-from-now'

web/app/components/workflow/hooks/use-format-time-from-now.ts

@@ -1,12 +0,0 @@
-import dayjs from 'dayjs'
-import { useCallback } from 'react'
-import { useI18N } from '@/context/i18n'
-
-export const useFormatTimeFromNow = () => {
-  const { locale } = useI18N()
-  const formatTimeFromNow = useCallback((time: number) => {
-    return dayjs(time).locale(locale === 'zh-Hans' ? 'zh-cn' : locale).fromNow()
-  }, [locale])
-
-  return { formatTimeFromNow }
-}

web/hooks/use-format-time-from-now.ts

@@ -2,14 +2,59 @@ import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import { useCallback } from 'react'
 import { useI18N } from '@/context/i18n'
+import type { Locale } from '@/i18n-config'
+import 'dayjs/locale/de'
+import 'dayjs/locale/es'
+import 'dayjs/locale/fa'
+import 'dayjs/locale/fr'
+import 'dayjs/locale/hi'
+import 'dayjs/locale/id'
+import 'dayjs/locale/it'
+import 'dayjs/locale/ja'
+import 'dayjs/locale/ko'
+import 'dayjs/locale/pl'
+import 'dayjs/locale/pt-br'
+import 'dayjs/locale/ro'
+import 'dayjs/locale/ru'
+import 'dayjs/locale/sl'
+import 'dayjs/locale/th'
+import 'dayjs/locale/tr'
+import 'dayjs/locale/uk'
+import 'dayjs/locale/vi'
 import 'dayjs/locale/zh-cn'
+import 'dayjs/locale/zh-tw'
 
 dayjs.extend(relativeTime)
 
+const localeMap: Record<Locale, string> = {
+  'en-US': 'en',
+  'zh-Hans': 'zh-cn',
+  'zh-Hant': 'zh-tw',
+  'pt-BR': 'pt-br',
+  'es-ES': 'es',
+  'fr-FR': 'fr',
+  'de-DE': 'de',
+  'ja-JP': 'ja',
+  'ko-KR': 'ko',
+  'ru-RU': 'ru',
+  'it-IT': 'it',
+  'th-TH': 'th',
+  'id-ID': 'id',
+  'uk-UA': 'uk',
+  'vi-VN': 'vi',
+  'ro-RO': 'ro',
+  'pl-PL': 'pl',
+  'hi-IN': 'hi',
+  'tr-TR': 'tr',
+  'fa-IR': 'fa',
+  'sl-SI': 'sl',
+}
+
 export const useFormatTimeFromNow = () => {
   const { locale } = useI18N()
   const formatTimeFromNow = useCallback((time: number) => {
-    return dayjs(time).locale(locale === 'zh-Hans' ? 'zh-cn' : locale).fromNow()
+    const dayjsLocale = localeMap[locale] ?? 'en'
+    return dayjs(time).locale(dayjsLocale).fromNow()
   }, [locale])
 
   return { formatTimeFromNow }