Another take on chat timestamps (#2214)

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

ui/desktop/src/components/sessions/SessionHistoryView.tsx

@@ -11,7 +11,8 @@ import {
   LoaderCircle,
 } from 'lucide-react';
 import { type SessionDetails } from '../../sessions';
-import { SessionHeaderCard, SessionMessages, formatDate } from './SessionViewComponents';
+import { SessionHeaderCard, SessionMessages } from './SessionViewComponents';
+import { formatMessageTimestamp } from '../../utils/timeUtils';
 import { createSharedSession } from '../../sharedSessions';
 import { Modal, ModalContent } from '../ui/modal';
 import { Button } from '../ui/button';
@@ -120,7 +121,7 @@ const SessionHistoryView: React.FC<SessionHistoryViewProps> = ({
           <div className="flex items-center text-sm text-textSubtle mt-1 space-x-5">
             <span className="flex items-center">
               <Calendar className="w-4 h-4 mr-1" />
-              {formatDate(session.messages[0]?.created)}
+              {formatMessageTimestamp(session.messages[0]?.created)}
             </span>
             <span className="flex items-center">
               <MessageSquareText className="w-4 h-4 mr-1" />

ui/desktop/src/components/sessions/SessionListView.tsx

@@ -14,6 +14,7 @@ import { Button } from '../ui/button';
 import BackButton from '../ui/BackButton';
 import { ScrollArea } from '../ui/scroll-area';
 import { View, ViewOptions } from '../../App';
+import { formatMessageTimestamp } from '../../utils/timeUtils';
 
 interface SessionListViewProps {
   setView: (view: View, viewOptions?: ViewOptions) => void;
@@ -45,29 +46,6 @@ const SessionListView: React.FC<SessionListViewProps> = ({ setView, onSelectSess
     }
   };
 
-  // Format date to be more readable
-  // eg. "10:39 PM, Feb 28, 2025"
-  const formatDateString = (dateString: string) => {
-    try {
-      const date = new Date(dateString);
-      const time = new Intl.DateTimeFormat('en-US', {
-        hour: 'numeric',
-        minute: 'numeric',
-        hour12: true,
-      }).format(date);
-
-      const dateStr = new Intl.DateTimeFormat('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-      }).format(date);
-
-      return `${time}, ${dateStr}`;
-    } catch (e) {
-      return dateString;
-    }
-  };
-
   return (
     <div className="h-screen w-full">
       <div className="relative flex items-center h-[36px] w-full bg-bgSubtle"></div>
@@ -115,7 +93,9 @@ const SessionListView: React.FC<SessionListViewProps> = ({ setView, onSelectSess
                         <div className="flex gap-3">
                           <div className="flex items-center text-textSubtle text-sm">
                             <Calendar className="w-3 h-3 mr-1 flex-shrink-0" />
-                            <span className="truncate">{formatDateString(session.modified)}</span>
+                            <span className="truncate">
+                              {formatMessageTimestamp(Date.parse(session.modified) / 1000)}
+                            </span>
                           </div>
                           <div className="flex items-center text-textSubtle text-sm">
                             <Folder className="w-3 h-3 mr-1 flex-shrink-0" />

ui/desktop/src/components/sessions/SessionViewComponents.tsx

@@ -8,31 +8,7 @@ import MarkdownContent from '../MarkdownContent';
 import ToolCallWithResponse from '../ToolCallWithResponse';
 import { ToolRequestMessageContent, ToolResponseMessageContent } from '../../types/message';
 import { type Message } from '../../types/message';
-
-/**
- * Format a timestamp into a human-readable date string
- */
-export const formatDate = (timestamp: number) => {
-  const date = new Date(timestamp * 1000);
-
-  const getOrdinal = (n: number) => {
-    const s = ['th', 'st', 'nd', 'rd'];
-    const v = n % 100;
-    return n + (s[(v - 20) % 10] || s[v] || s[0]);
-  };
-
-  const hours = date.toLocaleTimeString('en-US', {
-    hour: 'numeric',
-    minute: '2-digit',
-    hour12: true,
-  });
-
-  const month = date.toLocaleString('en-US', { month: 'short' });
-  const day = getOrdinal(date.getDate());
-  const year = date.getFullYear();
-
-  return `${hours}, ${month} ${day}, ${year}`;
-};
+import { formatMessageTimestamp } from '../../utils/timeUtils';
 
 /**
  * Get tool responses map from messages
@@ -166,7 +142,7 @@ export const SessionMessages: React.FC<SessionMessagesProps> = ({
                           {message.role === 'user' ? 'You' : 'Goose'}
                         </span>
                         <span className="text-xs text-textSubtle">
-                          {new Date(message.created * 1000).toLocaleTimeString()}
+                          {formatMessageTimestamp(message.created)}
                         </span>
                       </div>
 

ui/desktop/src/components/sessions/SharedSessionView.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Calendar, MessageSquareText, Folder, Target } from 'lucide-react';
 import { type SharedSessionDetails } from '../../sharedSessions';
-import { SessionHeaderCard, SessionMessages, formatDate } from './SessionViewComponents';
+import { SessionHeaderCard, SessionMessages } from './SessionViewComponents';
+import { formatMessageTimestamp } from '../../utils/timeUtils';
 
 interface SharedSessionViewProps {
   session: SharedSessionDetails | null;
@@ -32,7 +33,7 @@ const SharedSessionView: React.FC<SharedSessionViewProps> = ({
           <div className="flex items-center text-sm text-textSubtle mt-1 space-x-5">
             <span className="flex items-center">
               <Calendar className="w-4 h-4 mr-1" />
-              {formatDate(session.messages[0]?.created)}
+              {formatMessageTimestamp(session.messages[0]?.created)}
             </span>
             <span className="flex items-center">
               <MessageSquareText className="w-4 h-4 mr-1" />