Changes chat messages to use absolute timestamps (jupyterlab#159)

* Changes messages to use absolute timestamps

* Only calls setTimestamps if a new timestamp is added

* Unwraps function

* Prepopulates newTimestamps

packages/jupyter-ai/package.json

@@ -70,7 +70,6 @@
     "@jupyterlab/ui-components": "^3.6.3",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.0",
-    "date-fns": "^2.29.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-markdown": "^8.0.6",

packages/jupyter-ai/src/components/chat-messages.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 
 import { Avatar, Box, Typography } from '@mui/material';
 import type { SxProps, Theme } from '@mui/material';
-import { formatDistanceToNowStrict, fromUnixTime } from 'date-fns';
 import ReactMarkdown from 'react-markdown';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
@@ -106,24 +105,28 @@ export function ChatMessages(props: ChatMessagesProps) {
   const [timestamps, setTimestamps] = useState<Record<string, string>>({});
 
   /**
-   * Effect: update cached timestamp strings upon receiving a new message and
-   * every 5 seconds after that.
+   * Effect: update cached timestamp strings upon receiving a new message.
    */
   useEffect(() => {
-    function updateTimestamps() {
-      const newTimestamps: Record<string, string> = {};
-      for (const message of props.messages) {
+    const newTimestamps: Record<string, string> = { ...timestamps };
+    let timestampAdded: boolean = false;
+
+    for (const message of props.messages) {
+      if (!(message.id in newTimestamps)) {
+        // Use the browser's default locale
         newTimestamps[message.id] =
-          formatDistanceToNowStrict(fromUnixTime(message.time)) + ' ago';
+          new Date(message.time * 1000) // Convert message time to milliseconds
+            .toLocaleTimeString([], {
+              hour: 'numeric', // Avoid leading zero for hours; we don't want "03:15 PM"
+              minute: '2-digit'
+            });
+
+        timestampAdded = true;
       }
+    }
+    if (timestampAdded) {
       setTimestamps(newTimestamps);
     }
-
-    updateTimestamps();
-    const intervalId = setInterval(updateTimestamps, 5000);
-    return () => {
-      clearInterval(intervalId);
-    };
   }, [props.messages]);
 
   return (

yarn.lock

@@ -4694,13 +4694,6 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@^2.29.3:
-  version "2.30.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
-  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
-  dependencies:
-    "@babel/runtime" "^7.21.0"
-
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"