fix: workaround for using currentUser in server actions

components/chat-list.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import { type Message } from 'ai-connector'
 
 import { Separator } from '@/components/ui/separator'

components/sidebar-item.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import * as React from 'react'
-import { useTransition } from 'react'
 import Link from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'
 
@@ -17,25 +16,21 @@ import {
   AlertDialogTitle
 } from '@/components/ui/alert-dialog'
 import { Button, buttonVariants } from '@/components/ui/button'
-import { removeChat } from '@/app/actions'
 import { IconMessage, IconSpinner, IconTrash } from '@/components/ui/icons'
 
-export function SidebarItem({
-  title,
-  href,
-  id,
-  userId
-}: {
+interface SidebarItemProps {
   title: string
   href: string
   id: string
-  userId: string
-}) {
+  removeChat: (args: { id: string; path: string }) => Promise<void>
+}
+
+export function SidebarItem({ title, href, id, removeChat }: SidebarItemProps) {
   const [open, setIsOpen] = React.useState(false)
   const pathname = usePathname()
   const router = useRouter()
+  const [isPending, startTransition] = React.useTransition()
   const isActive = pathname === href
-  const [isPending, startTransition] = useTransition()
 
   if (!id) return null
 
@@ -85,7 +80,7 @@ export function SidebarItem({
               onClick={event => {
                 event.preventDefault()
                 startTransition(async () => {
-                  await removeChat({ id, userId, path: href })
+                  await removeChat({ id, path: href })
                   setIsOpen(false)
                   router.push('/')
                 })

components/sidebar-list.tsx

@@ -1,27 +1,12 @@
-import { getChats } from '@/app/actions'
+import { getChats, removeChat } from '@/app/actions'
 
 import { SidebarItem } from '@/components/sidebar-item'
-import { LoginButton } from '@/components/login-button'
 
 export interface SidebarListProps {
   userId?: string
 }
 
 export async function SidebarList({ userId }: SidebarListProps) {
-  if (!userId) {
-    return (
-      <div className="flex flex-1 flex-col items-center space-y-4 p-6 text-sm">
-        <div className="space-y-1 text-center">
-          <p className="font-medium">You are not logged in!</p>
-          <p className="text-muted-foreground">
-            Please login for chat history.
-          </p>
-        </div>
-        <LoginButton />
-      </div>
-    )
-  }
-
   const chats = await getChats(userId)
 
   return (
@@ -32,9 +17,9 @@ export async function SidebarList({ userId }: SidebarListProps) {
             <SidebarItem
               key={chat.id}
               title={chat.title}
-              userId={userId ?? ''}
               href={`/chat/${chat.id}`}
               id={chat.id}
+              removeChat={removeChat}
             />
           ))}
         </div>
@@ -46,5 +31,3 @@ export async function SidebarList({ userId }: SidebarListProps) {
     </div>
   )
 }
-
-SidebarList.displayName = 'SidebarList'

components/sidebar.tsx

@@ -21,6 +21,7 @@ export interface SidebarProps {
 
 export function Sidebar({ userId, children }: SidebarProps) {
   const { signOut } = useClerk()
+
   return (
     <Sheet>
       <SheetTrigger asChild>