refactor(dayjs): Refactor internationalized time formatting feature (#22870) (#22872)

web/app/components/app/app-publisher/index.tsx

@@ -5,8 +5,6 @@ import {
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
 import {
   RiArrowDownSLine,
   RiArrowRightSLine,
@@ -39,7 +37,6 @@ import { basePath } from '@/utils/var'
 import { fetchInstalledAppList } from '@/service/explore'
 import EmbeddedModal from '@/app/components/app/overview/embedded'
 import { useStore as useAppStore } from '@/app/components/app/store'
-import { useGetLanguage } from '@/context/i18n'
 import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
 import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
 import type { InputVar } from '@/app/components/workflow/types'
@@ -49,7 +46,7 @@ import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/acces
 import { AccessMode } from '@/models/access-control'
 import { fetchAppDetail } from '@/service/apps'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-dayjs.extend(relativeTime)
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 
 export type AppPublisherProps = {
   disabled?: boolean
@@ -92,6 +89,7 @@ const AppPublisher = ({
   const appDetail = useAppStore(state => state.appDetail)
   const setAppDetail = useAppStore(s => s.setAppDetail)
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  const { formatTimeFromNow } = useFormatTimeFromNow()
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
   const appMode = (appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode
   const appURL = `${appBaseURL}${basePath}/${appMode}/${accessToken}`
@@ -117,11 +115,6 @@ const AppPublisher = ({
       setIsAppAccessSet(true)
     }
   }, [appAccessSubjects, appDetail])
-  const language = useGetLanguage()
-
-  const formatTimeFromNow = useCallback((time: number) => {
-    return dayjs(time).locale(language === 'zh_Hans' ? 'zh-cn' : language.replace('_', '-')).fromNow()
-  }, [language])
 
   const handlePublish = useCallback(async (params?: ModelAndParameter | PublishWorkflowParams) => {
     try {

web/app/components/header/account-setting/members-page/index.tsx

@@ -1,9 +1,6 @@
 'use client'
 import { useState } from 'react'
 import useSWR from 'swr'
-import dayjs from 'dayjs'
-import 'dayjs/locale/zh-cn'
-import relativeTime from 'dayjs/plugin/relativeTime'
 import { useContext } from 'use-context-selector'
 import { RiUserAddLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
@@ -28,7 +25,7 @@ import cn from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import { RiPencilLine } from '@remixicon/react'
 import { useGlobalPublicStore } from '@/context/global-public-context'
-dayjs.extend(relativeTime)
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 
 const MembersPage = () => {
   const { t } = useTranslation()
@@ -50,6 +47,7 @@ const MembersPage = () => {
     fetchMembers,
   )
   const { systemFeatures } = useGlobalPublicStore()
+  const { formatTimeFromNow } = useFormatTimeFromNow()
   const [inviteModalVisible, setInviteModalVisible] = useState(false)
   const [invitationResults, setInvitationResults] = useState<InvitationResult[]>([])
   const [invitedModalVisible, setInvitedModalVisible] = useState(false)
@@ -133,7 +131,7 @@ const MembersPage = () => {
                       <div className='system-xs-regular text-text-tertiary'>{account.email}</div>
                     </div>
                   </div>
-                  <div className='system-sm-regular flex w-[104px] shrink-0 items-center py-2 text-text-secondary'>{dayjs(Number((account.last_active_at || account.created_at)) * 1000).locale(locale === 'zh-Hans' ? 'zh-cn' : 'en').fromNow()}</div>
+                  <div className='system-sm-regular flex w-[104px] shrink-0 items-center py-2 text-text-secondary'>{formatTimeFromNow(Number((account.last_active_at || account.created_at)) * 1000)}</div>
                   <div className='flex w-[96px] shrink-0 items-center'>
                     {isCurrentWorkspaceOwner && account.role === 'owner' && isAllowTransferWorkspace && (
                       <TransferOwnership onOperate={() => setShowTransferOwnershipModal(true)}></TransferOwnership>

web/app/components/tools/mcp/hooks.ts

@@ -1,15 +0,0 @@
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import { useCallback } from 'react'
-import { useI18N } from '@/context/i18n'
-
-dayjs.extend(relativeTime)
-
-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/app/components/tools/mcp/provider-card.tsx

@@ -6,7 +6,7 @@ import { useAppContext } from '@/context/app-context'
 import { RiHammerFill } from '@remixicon/react'
 import Indicator from '@/app/components/header/indicator'
 import Icon from '@/app/components/plugins/card/base/card-icon'
-import { useFormatTimeFromNow } from './hooks'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import type { ToolWithProvider } from '../../workflow/types'
 import Confirm from '@/app/components/base/confirm'
 import MCPModal from './modal'

web/app/components/workflow/header/editing-title.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useFormatTimeFromNow } from '../hooks'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { useStore } from '@/app/components/workflow/store'
 import useTimestamp from '@/hooks/use-timestamp'
 

web/app/components/workflow/header/restoring-title.tsx

@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useFormatTimeFromNow } from '../hooks'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { useStore } from '../store'
 import { WorkflowVersion } from '../types'
 import useTimestamp from '@/hooks/use-timestamp'

web/app/components/workflow/header/view-history.tsx

@@ -11,12 +11,12 @@ import {
   RiErrorWarningLine,
 } from '@remixicon/react'
 import {
-  useFormatTimeFromNow,
   useIsChatMode,
   useNodesInteractions,
   useWorkflowInteractions,
   useWorkflowRun,
 } from '../hooks'
+import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
 import { ControlMode, WorkflowRunningStatus } from '../types'
 import { formatWorkflowRunIdentifier } from '../utils'
 import cn from '@/utils/classnames'

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

@@ -15,7 +15,6 @@ export * from './use-workflow-variables'
 export * from './use-shortcuts'
 export * from './use-workflow-interactions'
 export * from './use-workflow-mode'
-export * from './use-format-time-from-now'
 export * from './use-workflow-refresh-draft'
 export * from './use-inspect-vars-crud'
 export * from './use-set-workflow-vars-with-value'

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

@@ -1,6 +1,10 @@
 import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
 import { useCallback } from 'react'
 import { useI18N } from '@/context/i18n'
+import 'dayjs/locale/zh-cn'
+
+dayjs.extend(relativeTime)
 
 export const useFormatTimeFromNow = () => {
   const { locale } = useI18N()