fix: always use English for TimeAgo (#894)

* fix: always use English for TimeAgo

* apply suggestions

Author: eternal-flame-AD

ui/src/common/LastUsedCell.tsx

@@ -1,6 +1,7 @@
 import {Typography} from '@mui/material';
 import React from 'react';
 import TimeAgo from 'react-timeago';
+import {TimeAgoFormatter} from './TimeAgoFormatter';
 
 export const LastUsedCell: React.FC<{lastUsed: string | null}> = ({lastUsed}) => {
     if (lastUsed === null) {
@@ -11,5 +12,5 @@ export const LastUsedCell: React.FC<{lastUsed: string | null}> = ({lastUsed}) =>
         return <Typography title={lastUsed}>Recently</Typography>;
     }
 
-    return <TimeAgo date={lastUsed} />;
+    return <TimeAgo date={lastUsed} formatter={TimeAgoFormatter.long} />;
 };

ui/src/common/TimeAgoFormatter.ts

@@ -0,0 +1,7 @@
+import {Formatter} from 'react-timeago';
+import {makeIntlFormatter} from 'react-timeago/defaultFormatter';
+
+export const TimeAgoFormatter: Record<'long' | 'narrow', Formatter> = {
+    long: makeIntlFormatter({style: 'long', locale: 'en'}),
+    narrow: makeIntlFormatter({style: 'narrow', locale: 'en'}),
+};

ui/src/message/Message.tsx

@@ -11,7 +11,7 @@ import {Markdown} from '../common/Markdown';
 import * as config from '../config';
 import {IMessageExtras} from '../types';
 import {contentType, RenderMode} from './extras';
-import {makeIntlFormatter} from 'react-timeago/defaultFormatter';
+import {TimeAgoFormatter} from '../common/TimeAgoFormatter';
 
 const PREVIEW_LENGTH = 500;
 
@@ -248,7 +248,7 @@ const HeaderWide = ({
                 </Typography>
             </div>
             <Typography variant="body1" className={classes.date}>
-                <TimeAgo date={date} formatter={makeIntlFormatter({style: 'narrow'})} />
+                <TimeAgo date={date} formatter={TimeAgoFormatter.narrow} />
             </Typography>
             <IconButton
                 onClick={fDelete}
@@ -279,7 +279,7 @@ const HeaderSmall = ({
                     {appName}
                 </Typography>
                 <Typography variant="body1" className={classes.date}>
-                    <TimeAgo date={date} formatter={makeIntlFormatter({style: 'long'})} />
+                    <TimeAgo date={date} formatter={TimeAgoFormatter.long} />
                 </Typography>
             </div>
             <div style={{display: 'flex', alignItems: 'end', flexDirection: 'column'}}>

ui/src/typedef/react-timeago.d.ts

@@ -3,6 +3,7 @@ declare module 'react-timeago' {
 
     export type FormatterOptions = {
         style?: 'long' | 'short' | 'narrow';
+        locale?: string;
     };
     export type Formatter = (options: FormatterOptions) => React.ReactNode;