From e4806022a83ec8d17201cb7d88c28aedb702c4cf Mon Sep 17 00:00:00 2001
From: lyonbot <lyonbot@gmail.com>
Date: Mon, 13 Jan 2025 15:23:47 +0800
Subject: [PATCH] feat: clear btn

---
 web/src/App.scss                     |  5 +++++
 web/src/components/ContentInput.tsx  | 13 ++++++++++++-
 web/src/components/UploadRecords.tsx |  2 +-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/web/src/App.scss b/web/src/App.scss
index 5aa0427..9b0af10 100644
--- a/web/src/App.scss
+++ b/web/src/App.scss
@@ -29,6 +29,11 @@ button {
   @apply bg-brand hover:bg-brand-4 disabled:bg-brand-3 text-white rounded-md border-0 transition-colors;
   @apply flex items-center justify-center gap-1 px-4 py-2;
 
+  &.btn-gray {
+    @apply bg-coolGray-5 hover:bg-coolGray-4 disabled:bg-coolGray-3;
+    @apply focus:ring-coolGray-4 focus:outline-coolGray-6;
+  }
+
   &:not(:disabled)::after {
     content: ' ';
     position: absolute;
diff --git a/web/src/components/ContentInput.tsx b/web/src/components/ContentInput.tsx
index f3c9c5f..a053e0b 100644
--- a/web/src/components/ContentInput.tsx
+++ b/web/src/components/ContentInput.tsx
@@ -144,6 +144,13 @@ export const ContentInput = memo<Props>((props) => {
     props.onSend?.(text, files)
   });
 
+  const doClear = useConsistCallback(() => {
+    setFiles([]);
+    setText('');
+    props.onTextChange?.('');
+    props.onFilesChange?.([]);
+  });
+
   useEffect(() => { if (props.text !== undefined && props.text !== text) setText(props.text); }, [props.text]);
   useEffect(() => { if (props.files !== undefined && !isEqual(props.files, files)) setFiles(props.files); }, [props.files]);
 
@@ -172,12 +179,16 @@ export const ContentInput = memo<Props>((props) => {
       </div>
 
       <div className="flex gap-2 flex-wrap">
-        <button onClick={openFilePicker}>
+        <button onClick={openFilePicker} key='addFileBtn'>
           <i className="i-mdi-file-plus"></i>
           Add file
         </button>
 
         {files.map((file, index) => <UploadedFileItem file={file} index={index} removeFile={removeFile} key={index} />)}
+
+        <button onClick={doClear} className='btn-gray' key='clearBtn'>
+          Clear
+        </button>
       </div>
 
       {!!isDragOver && (
diff --git a/web/src/components/UploadRecords.tsx b/web/src/components/UploadRecords.tsx
index 0df82ea..e46c147 100644
--- a/web/src/components/UploadRecords.tsx
+++ b/web/src/components/UploadRecords.tsx
@@ -73,7 +73,7 @@ const UploadRecordItem = memo((props: { record: UploadRecord }) => {
               Copy Message
             </div>
 
-            <div className="popover-content bg-white min-w-full">
+            <div className="popover-content bg-white min-w-full b-b b-b-gray-2 b-b-solid">
               <a
                 className={`${actionLink} py-2`}
                 target="_blank"