From 6d04e6b1295606fe221c911e8fcc850222ea9672 Mon Sep 17 00:00:00 2001
From: Naitik <naitikverma5207@gmail.com>
Date: Tue, 30 Jun 2026 12:10:13 +0530
Subject: [PATCH] fix: use created_at for message timestamps to prevent Invalid
 date on history messages

---
 .../src/components/chat/MessageBubble.tsx     | 38 +++++++++++++++----
 frontend/src/store/chat-store.ts              |  5 ++-
 2 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/chat/MessageBubble.tsx b/frontend/src/components/chat/MessageBubble.tsx
index b3710276..2460a2ba 100644
--- a/frontend/src/components/chat/MessageBubble.tsx
+++ b/frontend/src/components/chat/MessageBubble.tsx
@@ -73,6 +73,28 @@ const markdownComponents: Components = {
   },
 };
 
+/**
+ * Extracts a valid Date from a message.
+ *
+ * History messages from the DB have real UUIDs as IDs —
+ * splitting on "-" and parsing as a number gives NaN.
+ * We use `created_at` (returned by the history API) when
+ * available, and fall back to the synthetic ID-based
+ * timestamp only for streamed messages (format: role-timestamp).
+ */
+const getMessageDate = (message: ChatMsg): Date | null => {
+  if (message.created_at) {
+    const d = new Date(message.created_at);
+    if (!isNaN(d.getTime())) return d;
+  }
+  const parts = message.id.split("-");
+  if (parts.length >= 2) {
+    const ts = Number(parts[1]);
+    if (!isNaN(ts) && ts > 0) return new Date(ts);
+  }
+  return null;
+};
+
 export default function MessageBubble({ message }: Props) {
   const isUser = message.role === "user";
   const [copied, setCopied] = useState(false);
@@ -109,6 +131,8 @@ export default function MessageBubble({ message }: Props) {
     large: "text-base",
   }[activeFontSize];
 
+  const messageDate = getMessageDate(message);
+
   const handleCopy = async () => {
     if (!message.content) return;
     try {
@@ -177,7 +201,6 @@ export default function MessageBubble({ message }: Props) {
 
   const handleBranch = () => {
     setCurrentBranchId(message.id);
-
     console.log("Branch created from:", message.id);
   };
 
@@ -355,13 +378,11 @@ export default function MessageBubble({ message }: Props) {
             isUser ? "justify-end" : "justify-start"
           }`}
         >
-          <div
-            title={new Date(Number(message.id.split("-")[1])).toLocaleString()}
-          >
-            {formatDistanceToNow(new Date(Number(message.id.split("-")[1])), {
-              addSuffix: true,
-            })}
-          </div>
+          {messageDate && (
+            <div title={messageDate.toLocaleString()}>
+              {formatDistanceToNow(messageDate, { addSuffix: true })}
+            </div>
+          )}
           {!isUser && message.response_time_ms && (
             <span className="text-[10px] ml-auto">
               ⚡ {(message.response_time_ms / 1000).toFixed(1)}s
@@ -369,6 +390,7 @@ export default function MessageBubble({ message }: Props) {
           )}
         </div>
       </div>
+
       {isUser && (
         <div className="w-8 h-8 rounded-lg bg-primary/20 flex items-center justify-center shrink-0 mt-0.5">
           <User className="w-4 h-4 text-primary-foreground" />
diff --git a/frontend/src/store/chat-store.ts b/frontend/src/store/chat-store.ts
index 25097890..a1eccd12 100644
--- a/frontend/src/store/chat-store.ts
+++ b/frontend/src/store/chat-store.ts
@@ -30,6 +30,7 @@ export interface ChatMsg {
   feedback?: "up" | "down" | null;
   isStreaming?: boolean;
   response_time_ms?: number;
+  created_at?: string;
 }
 
 export interface ChatSession {
@@ -93,7 +94,9 @@ export const useChatStore = create<ChatStore>((set, get) => ({
   },
 
   setIsTyping(value) {
-    set((state) => ({ isTyping: resolveValue(value, state.isTyping) }));
+    set((state) => ({
+      isTyping: resolveValue(value, state.isTyping),
+    }));
   },
 
   setHistoryLoading(value) {