From b7cdea1b822c757fe5127e2246b853d423085f4c Mon Sep 17 00:00:00 2001
From: leedom <jld1221@163.com>
Date: Thu, 6 Apr 2023 21:02:48 +0800
Subject: [PATCH] refactor: optimize send button

---
 app/components/button.module.scss | 7 +++++++
 app/components/button.tsx         | 6 ++++--
 app/components/chat.tsx           | 1 +
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/components/button.module.scss b/app/components/button.module.scss
index 88da9748..2c33d0ac 100644
--- a/app/components/button.module.scss
+++ b/app/components/button.module.scss
@@ -10,6 +10,13 @@
   transition: all 0.3s ease;
   overflow: hidden;
   user-select: none;
+  outline: none;
+  border: none;
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 }
 
 .shadow {
diff --git a/app/components/button.tsx b/app/components/button.tsx
index 2e5707ae..1675a4b7 100644
--- a/app/components/button.tsx
+++ b/app/components/button.tsx
@@ -11,9 +11,10 @@ export function IconButton(props: {
   noDark?: boolean;
   className?: string;
   title?: string;
+  disabled?: boolean;
 }) {
   return (
-    <div
+    <button
       className={
         styles["icon-button"] +
         ` ${props.bordered && styles.border} ${props.shadow && styles.shadow} ${
@@ -22,6 +23,7 @@ export function IconButton(props: {
       }
       onClick={props.onClick}
       title={props.title}
+      disabled={props.disabled}
       role="button"
     >
       <div
@@ -32,6 +34,6 @@ export function IconButton(props: {
       {props.text && (
         <div className={styles["icon-button-text"]}>{props.text}</div>
       )}
-    </div>
+    </button>
   );
 }
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
index 90c88d97..9fefe952 100644
--- a/app/components/chat.tsx
+++ b/app/components/chat.tsx
@@ -679,6 +679,7 @@ export function Chat(props: {
             text={Locale.Chat.Send}
             className={styles["chat-input-send"]}
             noDark
+            disabled={!userInput}
             onClick={onUserSubmit}
           />
         </div>