From a61fe012d722e6f9ed6a124b69243066cfb7b297 Mon Sep 17 00:00:00 2001
From: EthanHealy01 <80844253+EthanHealy01@users.noreply.github.com>
Date: Fri, 5 Jun 2026 10:45:27 +0100
Subject: [PATCH] chore: i18n time utils and use TFunction type (#6507) (#6539)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Addresses two review comments from #6507:

- **`timeUtils.ts`** — route relative time strings (`just now`, `Xm
ago`, `Xh ago`, `Xd ago`) through i18n by accepting a `TFunction`
parameter and using new `time.relative.*` keys in `en-GB`
- **`ChatPanel.tsx`** — replace `ReturnType<typeof useTranslation>["t"]`
with `TFunction` from `i18next`

## Test plan
- [x] `task frontend:check` passes (695 tests)
---
 .../editor/public/locales/en-GB/translation.toml     |  6 ++++++
 frontend/editor/src/core/utils/timeUtils.ts          | 12 +++++++-----
 .../src/proprietary/components/chat/ChatPanel.tsx    |  5 +++--
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/editor/public/locales/en-GB/translation.toml b/frontend/editor/public/locales/en-GB/translation.toml
index d2aa0300d..d1f4ecab8 100644
--- a/frontend/editor/public/locales/en-GB/translation.toml
+++ b/frontend/editor/public/locales/en-GB/translation.toml
@@ -8151,6 +8151,12 @@ label = "Select a TSA server"
 [timestampPdf.steps]
 settings = "Settings"
 
+[time.relative]
+daysAgo = "{{count}}d ago"
+hoursAgo = "{{count}}h ago"
+justNow = "just now"
+minutesAgo = "{{count}}m ago"
+
 [tool]
 endpointUnavailable = "This tool is unavailable on your server."
 endpointUnavailableClickable = "Not available in this mode. Click to sign in."
diff --git a/frontend/editor/src/core/utils/timeUtils.ts b/frontend/editor/src/core/utils/timeUtils.ts
index 7bca31100..b38c4c267 100644
--- a/frontend/editor/src/core/utils/timeUtils.ts
+++ b/frontend/editor/src/core/utils/timeUtils.ts
@@ -1,10 +1,12 @@
-export function formatRelativeTime(timestamp: number): string {
+import { TFunction } from "i18next";
+
+export function formatRelativeTime(timestamp: number, t: TFunction): string {
   const diff = Date.now() - timestamp;
   const mins = Math.floor(diff / 60_000);
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins}m ago`;
+  if (mins < 1) return t("time.relative.justNow");
+  if (mins < 60) return t("time.relative.minutesAgo", { count: mins });
   const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
+  if (hours < 24) return t("time.relative.hoursAgo", { count: hours });
   const days = Math.floor(hours / 24);
-  return `${days}d ago`;
+  return t("time.relative.daysAgo", { count: days });
 }
diff --git a/frontend/editor/src/proprietary/components/chat/ChatPanel.tsx b/frontend/editor/src/proprietary/components/chat/ChatPanel.tsx
index 2e1d00e8e..7baf5d0a5 100644
--- a/frontend/editor/src/proprietary/components/chat/ChatPanel.tsx
+++ b/frontend/editor/src/proprietary/components/chat/ChatPanel.tsx
@@ -6,6 +6,7 @@ import {
   type KeyboardEvent,
 } from "react";
 import { renderMarkdown } from "@app/components/viewer/nonpdf/MarkdownRenderer";
+import { TFunction } from "i18next";
 import { useTranslation } from "react-i18next";
 import {
   ActionIcon,
@@ -43,7 +44,7 @@ import { StirlingLogoAnimated } from "@app/components/agents/StirlingLogoAnimate
 import { ChatQuickActions } from "@app/components/chat/ChatQuickActions";
 import "@app/components/chat/ChatPanel.css";
 
-type TranslateFn = ReturnType<typeof useTranslation>["t"];
+type TranslateFn = TFunction;
 
 /** Resolver mapping a tool endpoint path to its translated display name. */
 type ToolNameResolver = (endpoint: string) => string | null;
@@ -207,7 +208,7 @@ function ChatMessageBubble({
         <ContentCopyIcon sx={{ fontSize: 13 }} />
       </button>
       <span className="chat-message-timestamp">
-        {formatRelativeTime(timestamp)}
+        {formatRelativeTime(timestamp, t)}
       </span>
     </div>
   );