feat: clear btn

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;

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 && (

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"