From 49b15d350969808dcd362c2786d3683297b7bd32 Mon Sep 17 00:00:00 2001
From: steven <stevenlgtm@gmail.com>
Date: Tue, 25 Apr 2023 15:12:36 +0800
Subject: [PATCH] feat: add clear conversation buttion

---
 src/components/ClearConversationButton.tsx    | 27 +++++++++++++
 .../ClearConversationConfirmModal.tsx         | 39 +++++++++++++++++++
 .../ConversationView/MessageTextarea.tsx      |  2 +-
 src/components/ConversationView/index.tsx     |  4 +-
 src/components/Icon.tsx                       |  2 +
 5 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ClearConversationButton.tsx
 create mode 100644 src/components/ClearConversationConfirmModal.tsx

diff --git a/src/components/ClearConversationButton.tsx b/src/components/ClearConversationButton.tsx
new file mode 100644
index 0000000..8f941e0
--- /dev/null
+++ b/src/components/ClearConversationButton.tsx
@@ -0,0 +1,27 @@
+import { useState } from "react";
+import { useConversationStore, useMessageStore } from "@/store";
+import Icon from "./Icon";
+import ClearConversationConfirmModal from "./ClearConversationConfirmModal";
+
+const ClearConversationButton = () => {
+  const conversationStore = useConversationStore();
+  const messageStore = useMessageStore();
+  const [showConfirmModal, setShowConfirmModal] = useState(false);
+  const messageList = messageStore.messageList.filter((message) => message.conversationId === conversationStore.currentConversationId);
+
+  return (
+    <>
+      <button
+        className="mr-2 opacity-80 hover:opacity-100 disabled:cursor-not-allowed disabled:opacity-60"
+        disabled={messageList.length === 0}
+        onClick={() => setShowConfirmModal(true)}
+      >
+        <Icon.GiBroom className="w-6 h-auto" />
+      </button>
+
+      {showConfirmModal && <ClearConversationConfirmModal close={() => setShowConfirmModal(false)} />}
+    </>
+  );
+};
+
+export default ClearConversationButton;
diff --git a/src/components/ClearConversationConfirmModal.tsx b/src/components/ClearConversationConfirmModal.tsx
new file mode 100644
index 0000000..d7be483
--- /dev/null
+++ b/src/components/ClearConversationConfirmModal.tsx
@@ -0,0 +1,39 @@
+import { useTranslation } from "react-i18next";
+import { useConversationStore, useMessageStore } from "@/store";
+import Modal from "./kit/Modal";
+
+interface Props {
+  close: () => void;
+}
+
+const ClearConversationConfirmModal = (props: Props) => {
+  const { close } = props;
+  const { t } = useTranslation();
+  const conversationStore = useConversationStore();
+  const messageStore = useMessageStore();
+
+  const handleClearMessages = () => {
+    messageStore.clearMessage((item) => item.conversationId !== conversationStore.currentConversationId);
+    close();
+  };
+
+  return (
+    <Modal title="Clear messages" className="!w-96" onClose={close}>
+      <div>
+        <div className="w-full flex flex-col justify-start items-start mt-2">
+          <p className="text-gray-500">Are you sure to clear the messages in current conversation?</p>
+        </div>
+        <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
+          <button className="btn btn-outline" onClick={close}>
+            {t("common.close")}
+          </button>
+          <button className="btn btn-error" onClick={handleClearMessages}>
+            {t("common.clear")}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default ClearConversationConfirmModal;
diff --git a/src/components/ConversationView/MessageTextarea.tsx b/src/components/ConversationView/MessageTextarea.tsx
index 51571d8..faa6340 100644
--- a/src/components/ConversationView/MessageTextarea.tsx
+++ b/src/components/ConversationView/MessageTextarea.tsx
@@ -73,7 +73,7 @@ const MessageTextarea = (props: Props) => {
   };
 
   return (
-    <div className="w-full h-auto flex flex-row justify-between items-end border dark:border-zinc-700 rounded-lg mb-2 px-2 py-1 relative shadow bg-white dark:bg-zinc-800">
+    <div className="w-full h-auto flex flex-row justify-between items-end border dark:border-zinc-700 rounded-lg px-2 py-1 relative shadow bg-white dark:bg-zinc-800">
       <TextareaAutosize
         ref={textareaRef}
         className="w-full h-full outline-none border-none bg-transparent leading-6 py-2 px-2 resize-none hide-scrollbar"
diff --git a/src/components/ConversationView/index.tsx b/src/components/ConversationView/index.tsx
index d7ba409..62c6f92 100644
--- a/src/components/ConversationView/index.tsx
+++ b/src/components/ConversationView/index.tsx
@@ -17,6 +17,7 @@ import { countTextTokens, generateUUID } from "@/utils";
 import Header from "./Header";
 import EmptyView from "../EmptyView";
 import MessageView from "./MessageView";
+import ClearConversationButton from "../ClearConversationButton";
 import MessageTextarea from "./MessageTextarea";
 import DataStorageBanner from "../DataStorageBanner";
 import ProductHuntBanner from "../ProductHuntBanner";
@@ -259,7 +260,8 @@ const ConversationView = () => {
           messageList.map((message) => <MessageView key={message.id} message={message} />)
         )}
       </div>
-      <div className="sticky bottom-0 w-full max-w-4xl py-2 px-4 sm:px-8 mx-auto bg-white dark:bg-zinc-800 bg-opacity-80 backdrop-blur">
+      <div className="sticky bottom-0 flex flex-row justify-center items-center w-full max-w-4xl py-2 pb-4 px-4 sm:px-8 mx-auto bg-white dark:bg-zinc-800 bg-opacity-80 backdrop-blur">
+        <ClearConversationButton />
         <MessageTextarea disabled={lastMessage?.status === "LOADING"} sendMessage={sendMessageToCurrentConversation} />
       </div>
     </div>
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index f5ddd80..5b2bb89 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -3,6 +3,7 @@ import * as Bi from "react-icons/bi";
 import * as Bs from "react-icons/bs";
 import * as Di from "react-icons/di";
 import * as Fi from "react-icons/fi";
+import * as Gi from "react-icons/gi";
 import * as Io from "react-icons/io";
 import * as Io5 from "react-icons/io5";
 
@@ -12,6 +13,7 @@ const Icon = {
   ...Bs,
   ...Di,
   ...Fi,
+  ...Gi,
   ...Io,
   ...Io5,
 };