Merge pull request #567 from leedom92/optimize-send-button

refactor: optimize component `IconButton`

app/components/button.module.scss

@@ -10,6 +10,14 @@
   transition: all 0.3s ease;
   overflow: hidden;
   user-select: none;
+  outline: none;
+  border: none;
+  color: rgb(51, 51, 51);
+
+  &[disabled] {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
 }
 
 .shadow {

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>
   );
 }

app/components/chat.tsx

@@ -404,7 +404,6 @@ export function Chat(props: {
 
   // submit user input
   const onUserSubmit = () => {
-    if (userInput.length <= 0) return;
     setIsLoading(true);
     chatStore.onUserInput(userInput).then(() => setIsLoading(false));
     setUserInput("");
@@ -680,6 +679,7 @@ export function Chat(props: {
             text={Locale.Chat.Send}
             className={styles["chat-input-send"]}
             noDark
+            disabled={!userInput}
             onClick={onUserSubmit}
           />
         </div>