Add option to have send button by input

assets/chat/css/style.scss

@@ -223,7 +223,7 @@ hr {
   position: relative;
   color: $color-chat-text2;
   background: $color-surface-dark2;
-  border: 1px solid $color-surface-dark3;
+  border: none;
   outline: none;
   resize: none;
   margin: 0;
@@ -238,6 +238,39 @@ hr {
 #chat-input-control::placeholder {
   color: $color-chat-place;
 }
+#chat-input-textarea {
+  display: flex;
+  border: 1px solid $color-surface-dark3;
+  border-radius: $bradius;
+}
+#chat:not(.pref-showsendmsgbtn) #chat-input-textarea {
+  #chat-input-control {
+    border-radius: $bradius 0 0 $bradius;
+  }
+  #chat-input-send {
+    display: block;
+  }
+}
+#chat-input-send {
+  display: none;
+  background-color: $color-surface-dark2;
+  border-radius: 0 $bradius $bradius 0;
+  width: 30px;
+  padding: 5px;
+  .btn-icon {
+    cursor: pointer;
+    display: inline-block;
+    opacity: 0.25;
+    transition: opacity 150ms;
+    width: 100%;
+    height: 100%;
+    background: transparent url('../img/icon-send.svg') no-repeat center center;
+    background-size: contain;
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
 #chat-input-subonly {
   cursor: default;
   display: none;

assets/chat/js/autocomplete.js

@@ -98,7 +98,7 @@ class ChatAutoComplete {
   bind(chat) {
     this.chat = chat;
     this.input = chat.input;
-    this.ui.insertBefore(chat.input);
+    this.ui.insertBefore('#chat-input-textarea');
     let originval = '';
     let shiftdown = false;
     let keypressed = false;

assets/chat/js/chat.js

@@ -284,6 +284,7 @@ class Chat {
     this.ishidden = (document.visibilityState || 'visible') !== 'visible';
     this.output = this.ui.find('#chat-output-frame');
     this.input = this.ui.find('#chat-input-control');
+    this.inputsendbtn = this.ui.find('#chat-input-send');
     this.subonlyicon = this.ui.find('#chat-input-subonly');
     this.loginscrn = this.ui.find('#chat-login-screen');
     this.loadingscrn = this.ui.find('#chat-loading');
@@ -368,6 +369,12 @@ class Chat {
       }
     });
 
+    this.inputsendbtn.on('click', '.btn-icon', () => {
+      this.control.emit('SEND', this.input.val().toString().trim());
+      this.adjustInputHeight();
+      this.input.focus();
+    });
+
     // Watching focus
     this.ui.on('click touch', '#chat-watching-focus-btn', () => {
       this.watchingfocus = !this.watchingfocus;

assets/chat/js/const.js

@@ -128,6 +128,7 @@ const settingsdefault = new Map(
     notificationtimeout: true,
     ignorementions: false,
     autocompletehelper: true,
+    showsendmsgbtn: false,
     taggedvisibility: false,
     hidensfw: false,
     hidensfl: false,

assets/views/embed.html

@@ -29,14 +29,17 @@
 
   <div id="chat-input-frame">
     <div id="chat-input-wrap">
-      <textarea
-        id="chat-input-control"
-        placeholder="Getting things ready ..."
-        autocomplete="off"
-        tabindex="1"
-        autofocus
-        spellcheck
-      ></textarea>
+      <div id="chat-input-textarea">
+        <textarea
+          id="chat-input-control"
+          placeholder="Getting things ready ..."
+          autocomplete="off"
+          tabindex="1"
+          autofocus
+          spellcheck
+        ></textarea>
+        <div id="chat-input-send"><i class="btn-icon"></i></div>
+      </div>
       <a id="chat-input-subonly" class="chat-tool-btn" title="Subonly mode">
         <i class="btn-icon"></i>
       </a>
@@ -94,6 +97,13 @@ <h5><span>Settings</span> <i class="chat-menu-close"></i></h5>
               </select>
             </div>
 
+            <div class="form-group checkbox">
+              <label title="Show send message button">
+                <input name="showsendmsgbtn" type="checkbox" data-opposite />
+                Show send message button
+              </label>
+            </div>
+
             <h4>Messages</h4>
             <div class="form-group checkbox">
               <label title="Show all user flair icons">