feat: implement sharing

components/sidebar-item.tsx

@@ -1,43 +1,29 @@
 'use client'
 
-import * as React from 'react'
 import Link from 'next/link'
-import { usePathname, useRouter } from 'next/navigation'
+import { usePathname } from 'next/navigation'
 
+import { type Chat } from '@/lib/types'
 import { cn } from '@/lib/utils'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle
-} from '@/components/ui/alert-dialog'
-import { Button, buttonVariants } from '@/components/ui/button'
-import { IconMessage, IconSpinner, IconTrash } from '@/components/ui/icons'
+import { buttonVariants } from '@/components/ui/button'
+import { IconMessage } from '@/components/ui/icons'
+import { SidebarActions } from '@/components/sidebar-actions'
 
 interface SidebarItemProps {
-  title: string
-  href: string
-  id: string
-  removeChat: (args: { id: string; path: string }) => Promise<void>
+  chat: Chat
+  children: React.ReactNode
 }
 
-export function SidebarItem({ title, href, id, removeChat }: SidebarItemProps) {
-  const [open, setIsOpen] = React.useState(false)
+export function SidebarItem({ chat, children }: SidebarItemProps) {
   const pathname = usePathname()
-  const router = useRouter()
-  const [isPending, startTransition] = React.useTransition()
-  const isActive = pathname === href
+  const isActive = pathname === chat.path
 
-  if (!id) return null
+  if (!chat?.id) return null
 
   return (
     <>
       <Link
-        href={href}
+        href={chat.path || `/chat/${chat.id}`}
         className={cn(
           buttonVariants({ variant: 'ghost' }),
           'group w-full px-2',
@@ -47,51 +33,12 @@ export function SidebarItem({ title, href, id, removeChat }: SidebarItemProps) {
         <IconMessage className="mr-2" />
         <div
           className="relative max-h-5 flex-1 select-none overflow-hidden text-ellipsis break-all"
-          title={title}
+          title={chat.title}
         >
-          <span className="whitespace-nowrap">{title}</span>
+          <span className="whitespace-nowrap">{chat.title}</span>
         </div>
-        {isActive && (
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            disabled={isPending}
-            onClick={() => setIsOpen(true)}
-          >
-            <IconTrash />
-            <span className="sr-only">Delete</span>
-          </Button>
-        )}
+        {children}
       </Link>
-      <AlertDialog open={open} onOpenChange={setIsOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete your chat message and remove your
-              data from our servers.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
-            <AlertDialogAction
-              disabled={isPending}
-              onClick={event => {
-                event.preventDefault()
-                startTransition(async () => {
-                  await removeChat({ id, path: href })
-                  setIsOpen(false)
-                  router.push('/')
-                })
-              }}
-            >
-              {isPending && <IconSpinner className="mr-2 animate-spin" />}
-              Delete
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
     </>
   )
 }