Skip to content

fix: use created_at for message timestamps to prevent Invalid date on history messages #729

Open
NaitikVerma6776 wants to merge 1 commit into
param20h:devfrom
NaitikVerma6776:fix/message-bubble-invalid-date
Open

fix: use created_at for message timestamps to prevent Invalid date on history messages #729
NaitikVerma6776 wants to merge 1 commit into
param20h:devfrom
NaitikVerma6776:fix/message-bubble-invalid-date

Conversation

@NaitikVerma6776

Copy link
Copy Markdown
Contributor

🔗 Related Issue

Closes #728


📝 What does this PR do?

MessageBubble.tsx was extracting the display timestamp by splitting the message ID on "-" and parsing the second segment as a number:

new Date(Number(message.id.split("-")[1]))

This works for streamed messages, which use synthetic IDs like user-1717000000000. But all messages loaded from chat history use real database UUIDs (e.g. 550e8400-e29b-41d4-a716-446655440000).

Splitting a UUID on "-" and parsing "e29b" as a Number gives NaN → new Date(NaN)formatDistanceToNow renders "Invalid date" under every historical message.

Fix:

  • Added a getMessageDate() helper that first tries
    message.created_at (returned by the history API for
    all persisted messages), falls back to the synthetic
    ID-based timestamp for streamed messages, and returns
    null if both produce an invalid date
  • Timestamp div only renders when messageDate is not
    null — no more "Invalid date" shown to users
  • Added created_at?: string to the ChatMsg interface
    in chat-store.ts so TypeScript correctly types the
    field the history API already returns

🗂️ Type of Change

  • 🐛 Bug fix

🧪 How was this tested?

  • Ran the frontend locally (npm run dev inside frontend/)
  • Sent a message → confirmed timestamp shows correctly
    during streaming ✅
  • Refreshed the page → reloaded the same chat session
    from history → confirmed timestamps now show correctly
    (e.g. "2 hours ago") instead of "Invalid date" ✅
  • Confirmed response_time_ms badge still renders
    correctly alongside the timestamp ✅
  • Ran npx prettier --write on both changed files ✅
  • TypeScript build passes ✅

⚠️ Anything to flag for reviewers?

Two files changed:

  1. frontend/src/components/chat/MessageBubble.tsx — core fix: getMessageDate() helper + updated
    timestamp render
  2. frontend/src/store/chat-store.ts — one line added: created_at?: string on ChatMsg interface to properly type the field the history API already returns (previously untyped/missing from the interface)

No other behavior is affected — streamed messages continue to work exactly as before via the ID-based fallback.


✅ Self-Review Checklist

  • My branch is based on dev, not main
  • I have not added any secrets / API keys
  • I have not modified main branch or any HuggingFace deployment config
  • My code follows the existing style
    (no unnecessary formatting changes)
  • I have updated relevant docs / comments if needed

@vercel

vercel Bot commented Jun 30, 2026

Copy link
Copy Markdown

@NaitikVerma6776 is attempting to deploy a commit to the param20h's projects Team on Vercel.

A member of the Team first needs to authorize it.

@NaitikVerma6776 NaitikVerma6776 changed the title fix: use created_at for message timestamps to prevent Invalid date on… fix: use created_at for message timestamps to prevent Invalid date on history messages Jun 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] MessageBubble shows "Invalid date" for all messages loaded from chat history

1 participant