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
     }

components/header.tsx

@@ -18,11 +18,10 @@ 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 (
-    <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" />}>
@@ -49,6 +48,17 @@ export async function Header() {
           </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">
+        <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">