Move to clerk

components/chat.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useChat, type Message } from 'ai-connector'
+import { useChat, type Message } from 'ai-connector/react'
 
 import { cn } from '@/lib/utils'
 import { ChatList } from '@/components/chat-list'

components/header.tsx

@@ -1,29 +1,28 @@
 import { Suspense } from 'react'
 
-import { auth } from '@/auth'
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
 import { Sidebar } from '@/components/sidebar'
-import { UserMenu } from '@/components/user-menu'
 import { SidebarList } from '@/components/sidebar-list'
 import { IconGitHub, IconSeparator, IconVercel } from '@/components/ui/icons'
+import { UserButton, currentUser } from '@clerk/nextjs'
 
 export async function Header() {
-  const session = await auth()
+  const user = await currentUser()
 
   return (
-    <header className="sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between border-b bg-gradient-to-b from-background/10 via-background/50 to-background/80 px-4 backdrop-blur-xl">
+    <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">
         {/* @ts-ignore */}
-        <Sidebar session={session}>
+        <Sidebar user={user?.id}>
           <Suspense fallback={<div className="flex-1 overflow-auto" />}>
             {/* @ts-ignore */}
-            <SidebarList session={session} />
+            <SidebarList userId={user?.id} />
           </Suspense>
         </Sidebar>
         <div className="flex items-center">
-          <IconSeparator className="h-6 w-6 text-muted-foreground/50" />
-          <UserMenu session={session} />
+          <IconSeparator className="w-6 h-6 text-muted-foreground/50" />
+          <UserButton />
         </div>
       </div>
       <div className="flex items-center justify-end space-x-2">
@@ -34,7 +33,7 @@ export async function Header() {
           className={cn(buttonVariants({ variant: 'outline' }))}
         >
           <IconGitHub />
-          <span className="hidden md:flex ml-2">GitHub</span>
+          <span className="hidden ml-2 md:flex">GitHub</span>
         </a>
         <a
           href="https://github.com/vercel/nextjs-ai-chatbot/"

components/login-button.tsx

@@ -1,11 +1,11 @@
 'use client'
 
 import * as React from 'react'
-import { signIn } from '@auth/nextjs/client'
 
 import { cn } from '@/lib/utils'
 import { Button, type ButtonProps } from '@/components/ui/button'
 import { IconGitHub, IconSpinner } from '@/components/ui/icons'
+import { useClerk } from '@clerk/nextjs'
 
 interface LoginButtonProps extends ButtonProps {
   text?: string
@@ -17,13 +17,14 @@ export function LoginButton({
   ...props
 }: LoginButtonProps) {
   const [isLoading, setIsLoading] = React.useState(false)
+  const clerk = useClerk()
 
   return (
     <Button
       variant="outline"
       onClick={() => {
         setIsLoading(true)
-        signIn('github')
+        clerk.openSignIn({})
       }}
       disabled={isLoading}
       className={cn(className)}

components/sidebar-list.tsx

@@ -1,17 +1,16 @@
 import { getChats } from '@/app/actions'
-import { Session } from '@auth/core/types'
 
 import { SidebarItem } from '@/components/sidebar-item'
 import { LoginButton } from '@/components/login-button'
 
 export interface SidebarListProps {
-  session?: Session
+  userId?: string
 }
 
-export async function SidebarList({ session }: SidebarListProps) {
-  if (!session?.user?.email) {
+export async function SidebarList({ userId }: SidebarListProps) {
+  if (!userId) {
     return (
-      <div className="flex-1 p-6 flex text-sm items-center flex-col space-y-4">
+      <div className="flex flex-col items-center flex-1 p-6 space-y-4 text-sm">
         <div className="space-y-1 text-center">
           <p className="font-medium">You are not logged in!</p>
           <p className="text-muted-foreground">
@@ -23,7 +22,7 @@ export async function SidebarList({ session }: SidebarListProps) {
     )
   }
 
-  const chats = await getChats(session.user.email)
+  const chats = await getChats(userId)
 
   return (
     <div className="flex-1 overflow-auto">
@@ -33,7 +32,7 @@ export async function SidebarList({ session }: SidebarListProps) {
             <SidebarItem
               key={chat.id}
               title={chat.title}
-              userId={session?.user?.email ?? ''}
+              userId={userId ?? ''}
               href={`/chat/${chat.id}`}
               id={chat.id}
             />

components/sidebar.tsx

@@ -1,8 +1,6 @@
 'use client'
 
 import * as React from 'react'
-import { signOut } from '@auth/nextjs/client'
-import { type Session } from '@auth/nextjs/types'
 
 import { Button } from '@/components/ui/button'
 import {
@@ -14,18 +12,20 @@ import {
 } from '@/components/ui/sheet'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { IconSidebar } from '@/components/ui/icons'
+import { useClerk } from '@clerk/nextjs'
 
 export interface SidebarProps {
-  session?: Session
+  userId?: string
   children?: React.ReactNode
 }
 
-export function Sidebar({ session, children }: SidebarProps) {
+export function Sidebar({ userId, children }: SidebarProps) {
+  const { signOut } = useClerk()
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="ghost" className="-ml-2 h-9 w-9 p-0">
-          <IconSidebar className="h-6 w-6" />
+        <Button variant="ghost" className="p-0 -ml-2 h-9 w-9">
+          <IconSidebar className="w-6 h-6" />
           <span className="sr-only">Toggle Sidebar</span>
         </Button>
       </SheetTrigger>
@@ -36,7 +36,7 @@ export function Sidebar({ session, children }: SidebarProps) {
         {children}
         <div className="flex items-center p-4">
           <ThemeToggle />
-          {session?.user && (
+          {userId && (
             <Button
               variant="ghost"
               onClick={() => signOut()}

components/ui/icons.tsx

@@ -394,7 +394,28 @@ function IconClose({ className, ...props }: React.ComponentProps<'svg'>) {
   )
 }
 
+function IconEdit({ className, ...props }: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={cn('h-4 w-4', className)}
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
+      />
+    </svg>
+  )
+}
+
 export {
+  IconEdit,
   IconNextChat,
   IconOpenAI,
   IconVercel,