github/OpenHands
1
0
Fork 0
mirror of https://github.com/OpenHands/OpenHands.git synced 2025-12-26 05:48:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): AppConversationStartTask timezone display in ui (#11847)

Browse Source
This commit is contained in:
Hiep Le 2025-12-01 20:13:54 +07:00 committed by GitHub
parent 27590497d5
commit e7e49c9110
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/features/conversation-panel/conversation-card/conversation-card-footer.tsx
View File

@ -39,7 +39,7 @@ export function ConversationCardFooter({
{(createdAt ?? lastUpdatedAt) && (
<p className="text-xs text-[#A3A3A3] flex-1 text-right">
<time>
{`${formatTimeDelta(new Date(lastUpdatedAt ?? createdAt))} ${t(I18nKey.CONVERSATION$AGO)}`}
{`${formatTimeDelta(lastUpdatedAt ?? createdAt)} ${t(I18nKey.CONVERSATION$AGO)}`}
</time>
</p>
)}

2
frontend/src/components/features/conversation-panel/start-task-card/start-task-card-footer.tsx
View File

@ -31,7 +31,7 @@ export function StartTaskCardFooter({
{createdAt && (
<p className="text-xs text-[#A3A3A3] flex-1 text-right">
<time>
{`${formatTimeDelta(new Date(createdAt))} ${t(I18nKey.CONVERSATION$AGO)}`}
{`${formatTimeDelta(createdAt)} ${t(I18nKey.CONVERSATION$AGO)}`}
</time>
</p>
)}

14
frontend/src/components/features/home/recent-conversations/recent-conversation.tsx
View File

@ -67,12 +67,14 @@ export function RecentConversation({ conversation }: RecentConversationProps) {
</div>
) : null}
</div>
<span>
{formatTimeDelta(
new Date(conversation.created_at || conversation.last_updated_at),
)}{" "}
{t(I18nKey.CONVERSATION$AGO)}
</span>
{(conversation.created_at || conversation.last_updated_at) && (
<span>
{formatTimeDelta(
conversation.created_at || conversation.last_updated_at,
)}{" "}
{t(I18nKey.CONVERSATION$AGO)}
</span>
)}
</div>
</button>
</Link>

37
frontend/src/utils/format-time-delta.ts
View File

@ -1,16 +1,45 @@
/**
* Parses a date string as UTC if it doesn't have a timezone indicator.
* This fixes the issue where ISO strings without timezone info are interpreted as local time.
* @param dateString ISO 8601 date string
* @returns Date object parsed as UTC
*
* @example
* parseDateAsUTC("2025-12-01T11:53:37.273886"); // Parsed as UTC
* parseDateAsUTC("2025-12-01T11:53:37.273886Z"); // Already has timezone, parsed correctly
* parseDateAsUTC("2025-12-01T11:53:37+00:00"); // Already has timezone, parsed correctly
*/
const parseDateAsUTC = (dateString: string): Date => {
// Check if the string already has a timezone indicator
// Look for 'Z' (UTC), '+' (positive offset), or '-' after the time part (negative offset)
const hasTimezone =
dateString.includes("Z") || dateString.match(/[+-]\d{2}:\d{2}$/) !== null;
if (hasTimezone) {
// Already has timezone info, parse normally
return new Date(dateString);
}
// No timezone indicator - append 'Z' to force UTC parsing
return new Date(`${dateString}Z`);
};
/**
* Formats a date into a compact string representing the time delta between the given date and the current date.
* @param date The date to format
* @param date The date to format (Date object or ISO 8601 string)
* @returns A compact string representing the time delta between the given date and the current date
*
* @example
* // now is 2024-01-01T00:00:00Z
* formatTimeDelta(new Date("2023-12-31T23:59:59Z")); // "1s"
* formatTimeDelta(new Date("2022-01-01T00:00:00Z")); // "2y"
* formatTimeDelta("2023-12-31T23:59:59Z"); // "1s"
* formatTimeDelta("2025-12-01T11:53:37.273886"); // Parsed as UTC automatically
*/
export const formatTimeDelta = (date: Date) => {
export const formatTimeDelta = (date: Date | string) => {
// Parse string dates as UTC if needed, or use Date object directly
const dateObj = typeof date === "string" ? parseDateAsUTC(date) : date;
const now = new Date();
const delta = now.getTime() - date.getTime();
const delta = now.getTime() - dateObj.getTime();
const seconds = Math.floor(delta / 1000);
const minutes = Math.floor(seconds / 60);