feat: add clear chat

src/components/ChatContainer.tsx

@@ -9,29 +9,36 @@ import React, {
 } from "react";
 import { Message, useChat } from "ai/react";
 import { Card } from "./ui/card";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card";
 import { MarkdownViewer } from "./MarkdownViewer";
 import { useControlContext } from "@/providers/ControlContext";
 import { CommonForm } from "./CommonForm";
 import { TypingBubble } from "./TypingBubble";
+import { MessageCircleX } from "lucide-react";
 
 export const ChatContainer = () => {
   const { generalSettings, safetySettings } = useControlContext();
   const [loading, setLoading] = useState<boolean>(false);
 
-  const { messages, input, handleInputChange, handleSubmit } = useChat({
-    id: "gemini-pro",
-    api: `/api/gemini-pro`,
-    body: {
-      general_settings: generalSettings,
-      safety_settings: safetySettings,
-    },
-    onError: () => {
-      setLoading(false);
-    },
-    onFinish: () => {
-      setLoading(false);
-    },
-  });
+  const { messages, setMessages, input, handleInputChange, handleSubmit } =
+    useChat({
+      id: "gemini-pro",
+      api: `/api/gemini-pro`,
+      body: {
+        general_settings: generalSettings,
+        safety_settings: safetySettings,
+      },
+      onError: () => {
+        setLoading(false);
+      },
+      onFinish: () => {
+        setLoading(false);
+      },
+    });
 
   const messagesEndRef = useRef<HTMLDivElement>(null);
 
@@ -49,10 +56,32 @@ export const ChatContainer = () => {
     handleSubmit(event);
   };
 
+  const handleClearChat = () => {
+    setMessages([]);
+  };
+
   return (
     <div className="flex flex-col h-[95vh]">
       <Card className="flex flex-col flex-1 overflow-hidden">
         <div className="flex-1 overflow-y-auto">
+          {messages.length > 0 && (
+            <div className={`flex justify-end p-4`}>
+              <HoverCard openDelay={200}>
+                <HoverCardTrigger asChild onClick={handleClearChat}>
+                  <div className={`text-primary/60 hover:text-primary/90`}>
+                    <MessageCircleX />
+                  </div>
+                </HoverCardTrigger>
+                <HoverCardContent
+                  align="start"
+                  className="w-[260px] text-sm"
+                  side="right"
+                >
+                  Clear chat history
+                </HoverCardContent>
+              </HoverCard>
+            </div>
+          )}
           {messages.map((message: Message) => (
             <div
               key={message.id}

src/components/CommonForm.tsx

@@ -1,3 +1,4 @@
+"use client";
 // components/CommonForm.tsx
 import React, {
   useState,

src/components/ImageUploadComponent.tsx

@@ -22,7 +22,7 @@ const ImageUploadComponent: React.FC<ImageUploadComponentProps> = memo(
 
     const removeMedia = useCallback(() => {
       setMedia(null);
-      onRemove(); // Use the onRemove prop instead
+      onRemove();
     }, [onRemove]);
 
     const resizeImage = useCallback(

src/components/MarkdownViewer.tsx

@@ -1,7 +1,6 @@
 "use client";
 // components/MarkdownViewer.tsx
 import React, { useMemo, useState } from "react";
-// import CodeBlock from "./CodeBlock";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeRaw from "rehype-raw";

src/components/VisionContainer.tsx

@@ -85,7 +85,7 @@ export const VisionContainer = () => {
         setLoading(false);
       }
     },
-    [mediaDataList, prompt, generalSettings, safetySettings]
+    [mediaDataList, generalSettings, safetySettings]
   );
 
   const handleRefresh = useCallback(() => {

src/components/control/SafetySelector.tsx

@@ -1,6 +1,5 @@
-// componets/control/SafetySelector.tsx
 "use client";
-
+// componets/control/SafetySelector.tsx
 import * as React from "react";
 
 import {

src/components/control/SettingsSelector.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import * as React from "react";
 
 import {