From 67359e19b3dec9e74fa6d5bb7151c6e3404eaf45 Mon Sep 17 00:00:00 2001
From: Lee Robinson <lrobinson2011@gmail.com>
Date: Sun, 26 Nov 2023 18:30:48 -0600
Subject: [PATCH] Some fixes

---
 app/api/chat/route.ts          |  8 ++---
 app/chat/[id]/page.tsx         |  3 --
 app/layout.tsx                 |  2 +-
 app/page.tsx                   |  2 --
 app/share/[id]/page.tsx        |  3 --
 auth.ts                        | 10 ++++--
 components/header.tsx          | 64 ++++++++++++++++++++--------------
 components/sidebar-actions.tsx |  3 +-
 8 files changed, 51 insertions(+), 44 deletions(-)

diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 8a98d14..5166430 100644
--- a/app/api/chat/route.ts
+++ b/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
diff --git a/app/chat/[id]/page.tsx b/app/chat/[id]/page.tsx
index 25d6c30..0ca46b1 100644
--- a/app/chat/[id]/page.tsx
+++ b/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
diff --git a/app/layout.tsx b/app/layout.tsx
index 0982724..25b5559 100644
--- a/app/layout.tsx
+++ b/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`
diff --git a/app/page.tsx b/app/page.tsx
index ebc083b..c464137 100644
--- a/app/page.tsx
+++ b/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()
 
diff --git a/app/share/[id]/page.tsx b/app/share/[id]/page.tsx
index 4ee6620..638fed5 100644
--- a/app/share/[id]/page.tsx
+++ b/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
diff --git a/auth.ts b/auth.ts
index 53c545c..7c0c6a0 100644
--- a/auth.ts
+++ b/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
   }
-})
\ No newline at end of file
+})
diff --git a/components/header.tsx b/components/header.tsx
index 36929d6..23677f7 100644
--- a/components/header.tsx
+++ b/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
diff --git a/components/sidebar-actions.tsx b/components/sidebar-actions.tsx
index 7273180..af1e139 100644
--- a/components/sidebar-actions.tsx
+++ b/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">