fix: removed hydration errors on intial page load (#134)

Author: nickytonline

src/components/BotMessage.test.tsx

@@ -26,7 +26,7 @@ describe('BotMessage', () => {
       id: 'msg-1',
       content: markdownTable,
       sender: 'agent',
-      timestamp: new Date('2025-07-06T12:00:00Z'),
+      timestamp: '2025-07-06T12:00:00Z',
       status: 'sent',
     }
     const { container } = render(<BotMessage message={message} />)

src/components/BotMessage.tsx

@@ -160,8 +160,8 @@ export function BotMessage({ message, fileAnnotations = [] }: BotMessageProps) {
           )}
         </div>
         <div className="flex gap-1 items-center text-xs text-gray-500 dark:text-gray-400 space-x-1">
-          <time dateTime={message.timestamp.toISOString()}>
-            {formatTimestamp(message.timestamp)}
+          <time dateTime={message.timestamp}>
+            {formatTimestamp(new Date(message.timestamp))}
           </time>
           <button
             type="button"

src/components/Chat.tsx

@@ -25,6 +25,7 @@ import type { AnnotatedFile } from '@/lib/utils/code-interpreter'
 import { isCodeInterpreterSupported } from '@/lib/utils/prompting'
 import { useHasMounted } from '@/hooks/useHasMounted'
 import { WebSearchMessage } from './WebSearchMessage'
+import { getTimestamp } from '@/lib/utils/date'
 
 type StreamEvent =
   | {
@@ -881,6 +882,7 @@ export function Chat() {
           type: 'user',
           id: generateMessageId(),
           content: prompt,
+          timestamp: getTimestamp(),
         },
       ])
 
@@ -997,7 +999,7 @@ export function Chat() {
                       id: key,
                       content: '', // No text, just the file
                       sender: 'agent',
-                      timestamp: new Date(),
+                      timestamp: getTimestamp(),
                       status: 'sent',
                     }}
                     fileAnnotations={[event.annotation]}
@@ -1013,7 +1015,7 @@ export function Chat() {
                       id: event.id,
                       content: event.content,
                       sender: 'agent',
-                      timestamp: new Date(),
+                      timestamp: getTimestamp(),
                       status: 'sent',
                     }}
                     fileAnnotations={event.fileAnnotations || []}
@@ -1027,7 +1029,7 @@ export function Chat() {
                       id: event.id,
                       content: event.content,
                       sender: 'user',
-                      timestamp: new Date(),
+                      timestamp: getTimestamp(),
                       status: 'sent',
                     }}
                   />
@@ -1041,14 +1043,18 @@ export function Chat() {
                 if ('id' in event) {
                   const isAssistant = message.role === 'assistant'
                   if (isAssistant) {
+                    if (!hasMounted) {
+                      return null
+                    }
+
                     return (
                       <BotMessage
                         key={key}
                         message={{
                           id: message.id,
                           content: message.content,
                           sender: 'agent',
-                          timestamp: new Date(),
+                          timestamp: getTimestamp(),
                           status: 'sent',
                         }}
                       />
@@ -1061,7 +1067,7 @@ export function Chat() {
                           id: message.id,
                           content: message.content,
                           sender: 'user',
-                          timestamp: new Date(),
+                          timestamp: getTimestamp(),
                           status: 'sent',
                         }}
                       />

src/components/UserMessage.tsx

@@ -35,7 +35,7 @@ export function UserMessage({ message }: UserMessageProps) {
           <MarkdownContent content={message.content} />
         </div>
         <div className="flex items-center text-xs text-gray-500 dark:text-gray-400 space-x-1">
-          <span>{formatTimestamp(message.timestamp)}</span>
+          <span>{formatTimestamp(new Date(message.timestamp))}</span>
           {statusIcons[message.status]}
         </div>
       </div>

src/components/__snapshots__/BotMessage.test.tsx.snap

@@ -198,7 +198,7 @@ Here is a summary table of total sales from every year. If you need additional d
         class="flex gap-1 items-center text-xs text-gray-500 dark:text-gray-400 space-x-1"
       >
         <time
-          datetime="2025-07-06T12:00:00.000Z"
+          datetime="2025-07-06T12:00:00Z"
         >
           12:00 PM
         </time>

src/lib/utils/date.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest'
+import { getTimestamp } from './date'
+
+// Helper to check if a string is a valid ISO date
+function isValidISODate(str: string): boolean {
+  const d = new Date(str)
+  return !isNaN(d.getTime()) && str === d.toISOString()
+}
+
+describe('getTimestamp', () => {
+  it('returns a valid ISO string', () => {
+    const ts = getTimestamp()
+    expect(isValidISODate(ts)).toBe(true)
+  })
+
+  it('returns a timestamp close to now', () => {
+    const now = new Date()
+    const ts = new Date(getTimestamp())
+    // Should be within 1 second of now
+    expect(Math.abs(ts.getTime() - now.getTime())).toBeLessThan(1000)
+  })
+})

src/lib/utils/date.ts

@@ -0,0 +1,7 @@
+/**
+ * Get the current timestamp in ISO string format
+ * @returns The current timestamp in ISO string format
+ */
+export const getTimestamp = () => {
+  return new Date().toISOString()
+}

src/mcp/client.ts

@@ -1,45 +1,45 @@
 export type MCPRequest = {
-  user: string;
-  prompt: string;
-};
+  user: string
+  prompt: string
+}
 
-export type MessageStatus = "sending" | "sent" | "error";
+export type MessageStatus = 'sending' | 'sent' | 'error'
 
 export type Message = {
-  id: string;
-  content: string;
-  sender: "user" | "agent";
-  timestamp: Date;
-  status: MessageStatus;
-};
+  id: string
+  content: string
+  sender: 'user' | 'agent'
+  timestamp: string
+  status: MessageStatus
+}
 
 /**
  * Calls the Model Control Protocol (MCP) with the user's message
  */
 export async function callMCP({ user, prompt }: MCPRequest): Promise<string> {
   // Simulate network latency
-  await new Promise(resolve => setTimeout(resolve, 1000));
-  
-  console.log(`Calling MCP for ${user}: ${prompt}`);
+  await new Promise((resolve) => setTimeout(resolve, 1000))
+
+  console.log(`Calling MCP for ${user}: ${prompt}`)
 
   // This is a mock implementation - in real usage this would call your actual MCP endpoint
   const responses = [
     "I'm analyzing your request and will have an answer shortly.",
-    "Based on the information available, I would recommend exploring these options further.",
+    'Based on the information available, I would recommend exploring these options further.',
     "That's an interesting question. Let me provide some context that might help.",
     "I've processed your request and here's what I found in our knowledge base.",
-    "According to our latest data, the answer to your question would be...",
-    `Great question! As your AI assistant, I can tell you that ${prompt.toLowerCase().includes("weather") ? "the weather forecast shows mild temperatures with a chance of rain." : "there are multiple approaches to consider here."}`,
-  ];
+    'According to our latest data, the answer to your question would be...',
+    `Great question! As your AI assistant, I can tell you that ${prompt.toLowerCase().includes('weather') ? 'the weather forecast shows mild temperatures with a chance of rain.' : 'there are multiple approaches to consider here.'}`,
+  ]
 
   // Select a response based on input to simulate some contextual awareness
-  const responseIndex = Math.floor(prompt.length % responses.length);
-  return Promise.resolve(responses[responseIndex]);
+  const responseIndex = Math.floor(prompt.length % responses.length)
+  return Promise.resolve(responses[responseIndex])
 }
 
 /**
  * Generates a unique ID for messages
  */
 export function generateMessageId(): string {
-  return Math.random().toString(36).substring(2, 15);
-}
+  return Math.random().toString(36).substring(2, 15)
+}