refactor: update expiration time handling in human input component with new utility functions and localization support

web/app/components/base/chat/chat/answer/human-input-content/expiration-time.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import { useLocale } from '@/context/i18n'
-import { formatRelativeTimeInZone } from './utils'
+import { getRelativeTime, isRelativeTimeSameOrAfter } from './utils'
 
 type ExpirationTimeProps = {
   expirationTime: number
@@ -12,11 +12,14 @@ const ExpirationTime = ({
 }: ExpirationTimeProps) => {
   const { t } = useTranslation()
   const locale = useLocale()
-  const relativeTime = formatRelativeTimeInZone(expirationTime, locale)
+  const relativeTime = getRelativeTime(expirationTime, locale)
+  const isSameOrAfter = isRelativeTimeSameOrAfter(expirationTime)
 
   return (
     <div className="system-xs-regular mt-1 text-text-tertiary">
-      {t('humanInput.expirationTime', { relativeTime, ns: 'share' })}
+      {isSameOrAfter
+        ? t('humanInput.expirationTimeNowOrFuture', { relativeTime, ns: 'share' })
+        : t('humanInput.expirationTimePast', { relativeTime, ns: 'share' })}
     </div>
   )
 }

web/app/components/base/chat/chat/answer/human-input-content/utils.ts

@@ -1,6 +1,7 @@
 import type { FormInputItem } from '@/app/components/workflow/nodes/human-input/types'
 import type { Locale } from '@/i18n-config'
 import dayjs from 'dayjs'
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
 import relativeTime from 'dayjs/plugin/relativeTime'
 import utc from 'dayjs/plugin/utc'
 import { UserActionButtonType } from '@/app/components/workflow/nodes/human-input/types'
@@ -10,6 +11,7 @@ import 'dayjs/locale/ja'
 
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
+dayjs.extend(isSameOrAfter)
 
 export const getButtonStyle = (style: UserActionButtonType) => {
   if (style === UserActionButtonType.Primary)
@@ -45,7 +47,7 @@ const localeMap: Record<string, string> = {
   'ja-JP': 'ja',
 }
 
-export const formatRelativeTimeInZone = (
+export const getRelativeTime = (
   utcTimestamp: string | number,
   locale: Locale = 'en-US',
 ) => {
@@ -56,3 +58,7 @@ export const formatRelativeTimeInZone = (
     .locale(dayjsLocale)
     .fromNow()
 }
+
+export const isRelativeTimeSameOrAfter = (utcTimestamp: string | number) => {
+  return dayjs.utc(utcTimestamp).isSameOrAfter(dayjs())
+}

web/i18n/en-US/share.json

@@ -59,7 +59,8 @@
   "generation.tabs.saved": "Saved",
   "generation.title": "AI Completion",
   "humanInput.completed": "Seems like this request was dealt with elsewhere.",
-  "humanInput.expirationTime": "This action will expire {{relativeTime}}.",
+  "humanInput.expirationTimeNowOrFuture": "This action will expire {{relativeTime}}.",
+  "humanInput.expirationTimePast": "This action has expired {{relativeTime}}.",
   "humanInput.expired": "Seems like this request has expired.",
   "humanInput.formNotFound": "Form not found.",
   "humanInput.recorded": "Your input has been recorded.",

web/i18n/zh-Hans/share.json

@@ -59,7 +59,8 @@
   "generation.tabs.saved": "已保存",
   "generation.title": "AI 智能书写",
   "humanInput.completed": "此请求似乎在其他地方得到了处理。",
-  "humanInput.expirationTime": "此操作将在 {{relativeTime}}过期。",
+  "humanInput.expirationTimeNowOrFuture": "此操作将在 {{relativeTime}}过期。",
+  "humanInput.expirationTimePast": "此操作已在 {{relativeTime}}过期。",
   "humanInput.expired": "此请求似乎已过期。",
   "humanInput.formNotFound": "表单不存在。",
   "humanInput.recorded": "您的输入已被记录。",