Some fixes

app/api/chat/route.ts

@@ -1,6 +1,6 @@
 import { kv } from '@vercel/kv'
 import { OpenAIStream, StreamingTextResponse } from 'ai'
-import OpenAI from 'openai';
+import OpenAI from 'openai'
 
 import { auth } from '@/auth'
 import { nanoid } from '@/lib/utils'
@@ -8,16 +8,14 @@ import { nanoid } from '@/lib/utils'
 export const runtime = 'edge'
 
 const openai = new OpenAI({
-  apiKey: process.env.OPENAI_API_KEY,
+  apiKey: process.env.OPENAI_API_KEY
-});
+})
 
 export async function POST(req: Request) {
   const json = await req.json()
   const { messages, previewToken } = json
   const userId = (await auth())?.user.id // this doesn't seem to work getting the id
 
-  console.log('auth', await auth())
-
   if (!userId) {
     return new Response('Unauthorized', {
       status: 401

app/chat/[id]/page.tsx

@@ -5,9 +5,6 @@ import { auth } from '@/auth'
 import { getChat } from '@/app/actions'
 import { Chat } from '@/components/chat'
 
-export const runtime = 'edge'
-export const preferredRegion = 'home'
-
 export interface ChatPageProps {
   params: {
     id: string

app/layout.tsx

@@ -9,7 +9,7 @@ import { Providers } from '@/components/providers'
 import { Header } from '@/components/header'
 
 export const metadata = {
-  metadataBase: new URL('https://chat.vercel.ai/'),
+  metadataBase: new URL(`https://${process.env.VERCEL_URL}`),
   title: {
     default: 'Next.js AI Chatbot',
     template: `%s - Next.js AI Chatbot`

app/page.tsx

@@ -1,8 +1,6 @@
 import { nanoid } from '@/lib/utils'
 import { Chat } from '@/components/chat'
 
-export const runtime = 'edge'
-
 export default function IndexPage() {
   const id = nanoid()
 

app/share/[id]/page.tsx

@@ -6,9 +6,6 @@ import { getSharedChat } from '@/app/actions'
 import { ChatList } from '@/components/chat-list'
 import { FooterText } from '@/components/footer'
 
-export const runtime = 'edge'
-export const preferredRegion = 'home'
-
 interface SharePageProps {
   params: {
     id: string

auth.ts

@@ -12,7 +12,7 @@ declare module 'next-auth' {
 
 export const {
   handlers: { GET, POST },
-  auth,
+  auth
 } = NextAuth({
   providers: [GitHub],
   callbacks: {
@@ -23,6 +23,12 @@ export const {
       }
       return token
     },
+    session: ({ session, token }) => {
+      if (session?.user && token?.id) {
+        session.user.id = String(token.id)
+      }
+      return session
+    },
     authorized({ auth }) {
       return !!auth?.user // this ensures there is a logged in user for -every- request
     }
@@ -30,4 +36,4 @@ export const {
   pages: {
     signIn: '/sign-in' // overrides the next-auth default signin page https://authjs.dev/guides/basics/pages
   }
-})
+})

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 ? (
+        <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
-          <Sidebar>
+          <UserOrLogin />
-            <React.Suspense fallback={<div className="flex-1 overflow-auto" />}>
+        </React.Suspense>
-              <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>
       </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">