moment timestamp formatting

package.json

@@ -39,6 +39,7 @@
 		"react-error-boundary": "^3.1.4",
 		"react-hook-form": "^7.43.9",
 		"react-loading-skeleton": "^3.3.1",
+		"react-moment": "^1.1.3",
 		"react-router-dom": "^6.11.1",
 		"react-scripts": "5.0.1",
 		"react-secure-storage": "^1.2.2",

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@emotion/react':
     specifier: ^11.11.0
@@ -82,6 +86,9 @@ dependencies:
   react-loading-skeleton:
     specifier: ^3.3.1
     version: 3.3.1(react@18.2.0)
+  react-moment:
+    specifier: ^1.1.3
+    version: 1.1.3(moment@2.29.4)(prop-types@15.8.1)(react@18.2.0)
   react-router-dom:
     specifier: ^6.11.1
     version: 6.11.1(react-dom@18.2.0)(react@18.2.0)
@@ -7880,6 +7887,10 @@ packages:
     resolution: {integrity: sha512-HdKewQEREEJgsWnErClfbFoVebze6rGazxFLU/XUyrII8dORfVszN1V0BMRnQSzcgsNNtkX8DHj3nC6cdWE9YQ==}
     dev: false
 
+  /moment@2.29.4:
+    resolution: {integrity: sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==}
+    dev: false
+
   /ms@2.0.0:
     resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
@@ -9256,6 +9267,18 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-moment@1.1.3(moment@2.29.4)(prop-types@15.8.1)(react@18.2.0):
+    resolution: {integrity: sha512-8EPvlUL8u6EknPp1ISF5MQ3wx2OHJVXIP/iZc4wRh3iV3XozftZERDv9ANZeAtMlhNNQHdFoqcZHFUkBSTONfA==}
+    peerDependencies:
+      moment: ^2.29.0
+      prop-types: ^15.7.0
+      react: ^16.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      moment: 2.29.4
+      prop-types: 15.8.1
+      react: 18.2.0
+    dev: false
+
   /react-refresh@0.11.0:
     resolution: {integrity: sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==}
     engines: {node: '>=0.10.0'}

src/components/Message.tsx

@@ -1,6 +1,8 @@
+import Moment from "react-moment";
 import styled from "styled-components";
 import { QueuedMessage } from "../stores/MessageQueue";
 import { default as MessageObject } from "../stores/objects/Message";
+import { calendarStrings } from "../utils/i18n";
 import Avatar from "./Avatar";
 
 type MessageLike = MessageObject | QueuedMessage;
@@ -74,7 +76,10 @@ function Message({ message, isHeader, isSending, isFailed }: Props) {
 							</MessageAuthor>
 
 							<MessageTimestamp>
-								{message.timestamp.toLocaleTimeString()}
+								<Moment
+									calendar={calendarStrings}
+									date={new Date(message.timestamp)}
+								/>
 							</MessageTimestamp>
 						</MessageHeader>
 					)}

src/utils/i18n.ts

@@ -0,0 +1,6 @@
+export const calendarStrings = {
+	lastDay: "[Yesterday at] LT",
+	nextDay: "[Tomorrow at] LT",
+	sameDay: "[Today at] LT",
+	sameElse: "MM/DD/YYYY LT",
+};