feat(navbar): make delete & plus button work

ui/components/ChatWindow.tsx

@@ -503,7 +503,7 @@ const ChatWindow = ({ id }: { id?: string }) => {
       <div>
         {messages.length > 0 ? (
           <>
-            <Navbar messages={messages} />
+            <Navbar chatId={chatId!} messages={messages} />
             <Chat
               loading={loading}
               messages={messages}

ui/components/DeleteChat.tsx

@@ -11,19 +11,24 @@ import {
 import { Fragment, useState } from 'react';
 import { toast } from 'sonner';
 import { Chat } from '@/app/library/page';
+import { useRouter } from 'next/navigation';
 
 const DeleteChat = ({
   chatId,
   chats,
   setChats,
+  redirect = false,
 }: {
   chatId: string;
   chats: Chat[];
   setChats: (chats: Chat[]) => void;
+  redirect?: boolean;
 }) => {
   const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
   const [loading, setLoading] = useState(false);
 
+  const router = useRouter();
+
   const handleDelete = async () => {
     setLoading(true);
     try {
@@ -44,6 +49,10 @@ const DeleteChat = ({
       const newChats = chats.filter((chat) => chat.id !== chatId);
 
       setChats(newChats);
+
+      if (redirect) {
+        router.push('/');
+      }
     } catch (err: any) {
       toast.error(err.message);
     } finally {

ui/components/Navbar.tsx

@@ -2,8 +2,15 @@ import { Clock, Edit, Share, Trash } from 'lucide-react';
 import { Message } from './ChatWindow';
 import { useEffect, useState } from 'react';
 import { formatTimeDifference } from '@/lib/utils';
+import DeleteChat from './DeleteChat';
 
-const Navbar = ({ messages }: { messages: Message[] }) => {
+const Navbar = ({
+  chatId,
+  messages,
+}: {
+  messages: Message[];
+  chatId: string;
+}) => {
   const [title, setTitle] = useState<string>('');
   const [timeAgo, setTimeAgo] = useState<string>('');
 
@@ -39,10 +46,12 @@ const Navbar = ({ messages }: { messages: Message[] }) => {
 
   return (
     <div className="fixed z-40 top-0 left-0 right-0 px-4 lg:pl-[104px] lg:pr-6 lg:px-8 flex flex-row items-center justify-between w-full py-4 text-sm text-black dark:text-white/70 border-b bg-light-primary dark:bg-dark-primary border-light-100 dark:border-dark-200">
-      <Edit
+      <a
-        size={17}
+        href="/"
         className="active:scale-95 transition duration-100 cursor-pointer lg:hidden"
-      />
+      >
+        <Edit size={17} />
+      </a>
       <div className="hidden lg:flex flex-row items-center justify-center space-x-2">
         <Clock size={17} />
         <p className="text-xs">{timeAgo} ago</p>
@@ -54,10 +63,11 @@ const Navbar = ({ messages }: { messages: Message[] }) => {
           size={17}
           className="active:scale-95 transition duration-100 cursor-pointer"
         />
-        <Trash
+        {/* <Trash
           size={17}
-          className="text-red-400 active:scale-95 transition duration-100 cursor-pointer"
+          className='text-red-400 active:scale-95 transition duration-100 cursor-pointer'
-        />
+        /> */}
+        <DeleteChat redirect chatId={chatId} chats={[]} setChats={() => {}} />
       </div>
     </div>
   );