Some fixes

components/header.tsx

@@ -18,37 +18,47 @@ import { ThemeToggle } from '@/components/theme-toggle'
 import { ClearHistory } from '@/components/clear-history'
 import { UserMenu } from '@/components/user-menu'
 
-export async function Header() {
+async function UserOrLogin() {
   const session = await auth()
+  return (
+    <>
+      {session?.user ? (
+        <Sidebar>
+          <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
+            <SidebarList userId={session?.user?.id} />
+          </React.Suspense>
+          <SidebarFooter>
+            <ThemeToggle />
+            <ClearHistory clearChats={clearChats} />
+          </SidebarFooter>
+        </Sidebar>
+      ) : (
+        <Link href="/" target="_blank" rel="nofollow">
+          <IconNextChat className="w-6 h-6 mr-2 dark:hidden" inverted />
+          <IconNextChat className="hidden w-6 h-6 mr-2 dark:block" />
+        </Link>
+      )}
+      <div className="flex items-center">
+        <IconSeparator className="w-6 h-6 text-muted-foreground/50" />
+        {session?.user ? (
+          <UserMenu user={session.user} />
+        ) : (
+          <Button variant="link" asChild className="-ml-2">
+            <Link href="/sign-in?callbackUrl=/">Login</Link>
+          </Button>
+        )}
+      </div>
+    </>
+  )
+}
+
+export function Header() {
   return (
     <header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
       <div className="flex items-center">
-        {session?.user ? (
-          <Sidebar>
-            <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
-              <SidebarList userId={session?.user?.id} />
-            </React.Suspense>
-            <SidebarFooter>
-              <ThemeToggle />
-              <ClearHistory clearChats={clearChats} />
-            </SidebarFooter>
-          </Sidebar>
-        ) : (
-          <Link href="/" target="_blank" rel="nofollow">
-            <IconNextChat className="w-6 h-6 mr-2 dark:hidden" inverted />
-            <IconNextChat className="hidden w-6 h-6 mr-2 dark:block" />
-          </Link>
-        )}
-        <div className="flex items-center">
-          <IconSeparator className="w-6 h-6 text-muted-foreground/50" />
-          {session?.user ? (
-            <UserMenu user={session.user} />
-          ) : (
-            <Button variant="link" asChild className="-ml-2">
-              <Link href="/sign-in?callbackUrl=/">Login</Link>
-            </Button>
-          )}
-        </div>
+        <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
+          <UserOrLogin />
+        </React.Suspense>
       </div>
       <div className="flex items-center justify-end space-x-2">
         <a

components/sidebar-actions.tsx

@@ -121,7 +121,8 @@ export function SidebarActions({
           <div className="space-y-1 rounded-md border p-4 text-sm">
             <div className="font-medium">{chat.title}</div>
             <div className="text-muted-foreground">
-              {formatDate(chat.createdAt)} · {chat.messages.length} messages
+              {formatDate(Number(chat.createdAt))} · {chat.messages.length}{' '}
+              messages
             </div>
           </div>
           <DialogFooter className="items-center">