Add clear chat feature

Backend/hairify/chat/urls.py

@@ -11,5 +11,6 @@
 
     path('reporthistory',views.GetReport.as_view(), name="reporthistory"),
 
-
+    path('chat/delete', views.deleteHistory, name="deletehistory")
+
 ]

Backend/hairify/chat/views.py

@@ -22,7 +22,7 @@
 from langchain_core.output_parsers import JsonOutputParser
 
 
-
+import asyncio
 from .models import report,chats
 from authentication.models import User
 from .serializers import ReportSerializer
@@ -93,6 +93,18 @@ def historyMessages(request):
 
     return Response(serialized_data)
 
+@api_view(['DELETE'])
+@permission_classes([IsAuthenticated])
+def deleteHistory(request):
+    user_id = request.user.id
+    print(user_id)
+    postgres_url = str(os.getenv("POSTGRE_URI"))
+    message = PostgresChatMessageHistory(connection_string = postgres_url,
+        session_id=str(user_id))
+
+    asyncio.run(message.aclear())
+
+    return Response("Chat history deleted")
 
 @api_view(['POST'])
 @permission_classes([IsAuthenticated])

frontend/src/app/chat/page.tsx

@@ -9,13 +9,16 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
+  DialogFooter,
+  DialogClose,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { FaImage } from "react-icons/fa6";
 import { PiStarFourFill } from "react-icons/pi";
 import { FiArrowRight } from "react-icons/fi";
+import { Trash } from "lucide-react";
 import Header from "@/components/header";
 import axios from "axios";
 import Router from "next/router";
@@ -324,6 +327,32 @@ function ChatpageInner() {
     setChatState("idle");
   };
 
+  const handleChatDelete = async () => {
+    setChatState("busy");
+
+    try {
+      const response = await fetch(
+        `${process.env.NEXT_PUBLIC_BACKEND_PATH}/chatapi/chat/delete`,
+        {
+          method: "DELETE",
+          headers: {
+            Authorization: "Bearer " + token,
+          },
+        }
+      );
+      // Check if the response is ok
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+
+      setChat([]);
+    } catch (error) {
+      console.error("Error deleting chat history:", error);
+    }
+
+    setChatState("idle");
+  };
+
   return (
     <div
       className="px-4 bg-zinc-100 flex-grow pagecont"
@@ -393,6 +422,41 @@ function ChatpageInner() {
               onChange={(e) => setMessage(e.target.value)}
             />
             {/* <ImageChatPopup chatState={chatState} setChatState={setChatState} /> */}
+            <Dialog>
+              <DialogTrigger disabled={chatState === "busy" || chat.length === 0}>
+                <Button 
+                  type="button"
+                  variant="outline"
+                  disabled={chatState === "busy" || chat.length === 0}
+                >
+                  <Trash />
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="max-w-md">
+                <DialogHeader>
+                  <DialogTitle>Are you sure?</DialogTitle>
+                  <DialogDescription>
+                    This action will permanently delete your chat history.
+                  </DialogDescription>
+                </DialogHeader>
+                <DialogFooter className="sm:justify-start">
+                  <DialogClose asChild>
+                    <Button type="button" variant="outline">
+                      Cancel
+                    </Button>
+                  </DialogClose>
+                  <DialogClose asChild>
+                    <Button 
+                      type="button"
+                      onClick={handleChatDelete}
+                    >
+                      Delete Chat
+                    </Button>
+                  </DialogClose>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
+
             <Button
               onClick={() => {
                 handleClick();