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",

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",
+};