[Enhancement] Enter to send message, add click on bubble instead of icon (#202)

app/javascript/widget/components/ChatFooter.vue

@@ -1,6 +1,10 @@
 <template>
   <footer class="footer">
     <ChatInputWrap :on-send-message="onSendMessage" />
+    <a class="branding" href="https://www.chatwoot.com" target="_blank">
+      <img src="~widget/assets/images/logo.svg" />
+      <span>We run on Chatwoot</span>
+    </a>
   </footer>
 </template>
 
@@ -30,4 +34,20 @@ export default {
   padding: $space-small;
   width: 100%;
 }
+
+.branding {
+  align-items: center;
+  color: $color-body;
+  display: flex;
+  font-size: $font-size-default;
+  justify-content: center;
+  padding: $space-one;
+  text-align: center;
+  text-decoration: none;
+
+  img {
+    margin-right: $space-small;
+    max-width: $space-two;
+  }
+}
 </style>

app/javascript/widget/components/ChatInputArea.vue

@@ -21,8 +21,7 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 
 .user-message-input {
-  border-color: $color-white;
-  border-bottom-color: $color-border-light;
+  border: 0;
   height: $space-big;
   resize: none;
 }

app/javascript/widget/components/ChatInputWrap.vue

@@ -1,14 +1,10 @@
 <template>
-  <div class="input-wrap">
-    <div>
-      <ChatInputArea v-model="userInput" :placeholder="placeholder" />
-    </div>
-    <div class="message-button-wrap">
-      <ChatSendButton
-        :on-click="handleButtonClick"
-        :disabled="!userInput.length"
-      />
-    </div>
+  <div class="chat-message--input">
+    <ChatInputArea v-model="userInput" :placeholder="placeholder" />
+    <ChatSendButton
+      :on-click="handleButtonClick"
+      :disabled="!userInput.length"
+    />
   </div>
 </template>
 
@@ -39,13 +35,26 @@ export default {
       userInput: '',
     };
   },
+  destroyed() {
+    document.removeEventListener('keypress', this.handleEnterKeyPress);
+  },
+  mounted() {
+    document.addEventListener('keypress', this.handleEnterKeyPress);
+  },
+
   methods: {
     handleButtonClick() {
-      if (this.userInput) {
+      if (this.userInput && this.userInput.trim()) {
         this.onSendMessage(this.userInput);
       }
       this.userInput = '';
     },
+    handleEnterKeyPress(e) {
+      if (e.keyCode === 13 && !e.shiftKey) {
+        e.preventDefault();
+        this.handleButtonClick();
+      }
+    },
   },
 };
 </script>
@@ -53,13 +62,9 @@ export default {
 <style scoped lang="scss">
 @import '~widget/assets/scss/variables.scss';
 
-.input-wrap {
-  .message-button-wrap {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    margin-top: $space-small;
-  }
+.chat-message--input {
+  align-items: center;
+  border-bottom: 1px $color-border-light solid;
+  display: flex;
 }
 </style>

app/javascript/widget/components/ChatSendButton.vue

@@ -2,12 +2,11 @@
   <button
     type="submit"
     :disabled="disabled"
-    class="button  send-button"
+    class="send-button"
     @click="onClick"
   >
     <span v-if="!loading" class="icon-holder">
       <img src="~widget/assets/images/message-send.svg" />
-      <span>Send</span>
     </span>
     <spinner v-else size="small" />
   </button>
@@ -42,10 +41,9 @@ export default {
 @import '~widget/assets/scss/variables.scss';
 
 .send-button {
-  align-items: center;
-  display: flex;
-  justify-content: space-around;
-  min-width: $space-big;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
   position: relative;
 
   .icon-holder {
@@ -54,10 +52,6 @@ export default {
     justify-content: center;
     fill: $color-white;
     font-weight: $font-weight-medium;
-
-    img {
-      margin-right: $space-small;
-    }
   }
 }
 </style>

app/javascript/widget/components/ConversationWrap.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="conversation">
+  <section class="conversation-wrap">
     <ChatMessage
       v-for="message in messages"
       :key="message.id"
@@ -19,14 +19,20 @@ export default {
   props: {
     messages: Object,
   },
+  mounted() {
+    this.scrollToBottom();
+  },
+  updated() {
+    this.scrollToBottom();
+  },
+  methods: {
+    scrollToBottom() {
+      const container = this.$el;
+      container.scrollTop =
+        container.scrollHeight < this.minScrollHeight
+          ? this.minScrollHeight
+          : container.scrollHeight;
+    },
+  },
 };
 </script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-@import '~widget/assets/scss/variables.scss';
-
-.conversation {
-  height: 100%;
-}
-</style>

app/javascript/widget/components/HelloWorld.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    msg: String,
-  },
-};
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>