From 72e3a2fae8b13ba93b09ad96b7a06bd68b4525a9 Mon Sep 17 00:00:00 2001
From: e-roy <eric@fullstackeric.com>
Date: Thu, 21 Dec 2023 20:41:56 -0500
Subject: [PATCH] feat: add clear chat

---
 src/components/ChatContainer.tsx            | 57 ++++++++++++++++-----
 src/components/CommonForm.tsx               |  1 +
 src/components/ImageUploadComponent.tsx     |  2 +-
 src/components/MarkdownViewer.tsx           |  1 -
 src/components/VisionContainer.tsx          |  2 +-
 src/components/control/SafetySelector.tsx   |  3 +-
 src/components/control/SettingsSelector.tsx |  1 -
 7 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/src/components/ChatContainer.tsx b/src/components/ChatContainer.tsx
index 33b9383..6ac6836 100644
--- a/src/components/ChatContainer.tsx
+++ b/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}
diff --git a/src/components/CommonForm.tsx b/src/components/CommonForm.tsx
index 6908439..73f3f1e 100644
--- a/src/components/CommonForm.tsx
+++ b/src/components/CommonForm.tsx
@@ -1,3 +1,4 @@
+"use client";
 // components/CommonForm.tsx
 import React, {
   useState,
diff --git a/src/components/ImageUploadComponent.tsx b/src/components/ImageUploadComponent.tsx
index c080691..403b4c5 100644
--- a/src/components/ImageUploadComponent.tsx
+++ b/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(
diff --git a/src/components/MarkdownViewer.tsx b/src/components/MarkdownViewer.tsx
index 96ffa11..5516efb 100644
--- a/src/components/MarkdownViewer.tsx
+++ b/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";
diff --git a/src/components/VisionContainer.tsx b/src/components/VisionContainer.tsx
index 1f88e21..c840eab 100644
--- a/src/components/VisionContainer.tsx
+++ b/src/components/VisionContainer.tsx
@@ -85,7 +85,7 @@ export const VisionContainer = () => {
         setLoading(false);
       }
     },
-    [mediaDataList, prompt, generalSettings, safetySettings]
+    [mediaDataList, generalSettings, safetySettings]
   );
 
   const handleRefresh = useCallback(() => {
diff --git a/src/components/control/SafetySelector.tsx b/src/components/control/SafetySelector.tsx
index e3edef8..3ca28b9 100644
--- a/src/components/control/SafetySelector.tsx
+++ b/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 {
diff --git a/src/components/control/SettingsSelector.tsx b/src/components/control/SettingsSelector.tsx
index 18492ac..609dadd 100644
--- a/src/components/control/SettingsSelector.tsx
+++ b/src/components/control/SettingsSelector.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import * as React from "react";
 
 import {