feat(navbar): make delete & plus button work

This commit is contained in:
ItzCrazyKns 2024-10-29 19:59:58 +05:30
parent dfb532e4d3
commit 03d0ff2ca4
3 changed files with 27 additions and 8 deletions

View File

@ -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}

View File

@ -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 {

View File

@ -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
size={17}
<a
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>
);