Another take on chat timestamps (#2214)

Co-authored-by: Nahiyan Khan <nahiyan@squareup.com>

ui/desktop/src/components/UserMessage.tsx

@@ -1,9 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useRef, useMemo } from 'react';
 import LinkPreview from './LinkPreview';
 import { extractUrls } from '../utils/urlUtils';
 import MarkdownContent from './MarkdownContent';
 import { Message, getTextContent } from '../types/message';
 import MessageCopyLink from './MessageCopyLink';
+import { formatMessageTimestamp } from '../utils/timeUtils';
 
 interface UserMessageProps {
   message: Message;
@@ -15,6 +16,9 @@ export default function UserMessage({ message }: UserMessageProps) {
   // Extract text content from the message
   const textContent = getTextContent(message);
 
+  // Memoize the timestamp
+  const timestamp = useMemo(() => formatMessageTimestamp(message.created), [message.created]);
+
   // Extract URLs which explicitly contain the http:// or https:// protocol
   const urls = extractUrls(textContent, []);
 
@@ -30,8 +34,13 @@ export default function UserMessage({ message }: UserMessageProps) {
               />
             </div>
           </div>
-          <div className="flex justify-end">
-            <MessageCopyLink text={textContent} contentRef={contentRef} />
+          <div className="relative h-[22px] flex justify-end">
+            <div className="absolute right-0 text-xs text-textSubtle pt-1 transition-all duration-200 group-hover:-translate-y-4 group-hover:opacity-0">
+              {timestamp}
+            </div>
+            <div className="absolute right-0 pt-1">
+              <MessageCopyLink text={textContent} contentRef={contentRef} />
+            </div>
           </div>
         </div>