From 7e3409c3e1c62db0627fcc4ea2570df2f13f9824 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranavrajs@gmail.com>
Date: Sat, 9 Nov 2019 17:12:31 +0530
Subject: [PATCH] [Enhancement] Enter to send message, add click on bubble
 instead of icon (#202)

---
 app/javascript/packs/sdk.js                   |  3 +-
 app/javascript/widget/assets/images/logo.svg  | 12 ++++++
 .../widget/assets/images/message-send.svg     | 10 ++---
 .../widget/components/ChatFooter.vue          | 20 +++++++++
 .../widget/components/ChatInputArea.vue       |  3 +-
 .../widget/components/ChatInputWrap.vue       | 43 +++++++++++--------
 .../widget/components/ChatSendButton.vue      | 14 ++----
 .../widget/components/ConversationWrap.vue    | 26 ++++++-----
 .../widget/components/HelloWorld.vue          | 31 -------------
 app/javascript/widget/helpers/actionCable.js  |  1 -
 app/javascript/widget/views/Home.vue          | 15 +------
 11 files changed, 84 insertions(+), 94 deletions(-)
 create mode 100644 app/javascript/widget/assets/images/logo.svg
 delete mode 100755 app/javascript/widget/components/HelloWorld.vue

diff --git a/app/javascript/packs/sdk.js b/app/javascript/packs/sdk.js
index d4d513d47..8d98a82ad 100755
--- a/app/javascript/packs/sdk.js
+++ b/app/javascript/packs/sdk.js
@@ -105,8 +105,7 @@ function bubbleClickCallback() {
 }
 
 function onClickChatBubble() {
-  wootOn(chatBubble, 'click', bubbleClickCallback);
-  wootOn(closeBubble, 'click', bubbleClickCallback);
+  wootOn(bubbleHolder, 'click', bubbleClickCallback);
 }
 
 function disableScroll() {
diff --git a/app/javascript/widget/assets/images/logo.svg b/app/javascript/widget/assets/images/logo.svg
new file mode 100644
index 000000000..16529675d
--- /dev/null
+++ b/app/javascript/widget/assets/images/logo.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="512px" height="512px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>woot-log</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="woot-log" fill-rule="nonzero">
+            <circle id="Oval" fill="#47A7F6" cx="256" cy="256" r="256"></circle>
+            <path d="M362.807947,368.807947 L244.122956,368.807947 C178.699407,368.807947 125.456954,315.561812 125.456954,250.12177 C125.456954,184.703089 178.699407,131.456954 244.124143,131.456954 C309.565494,131.456954 362.807947,184.703089 362.807947,250.12177 L362.807947,368.807947 Z" id="Fill-1" stroke="#FFFFFF" stroke-width="6" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/javascript/widget/assets/images/message-send.svg b/app/javascript/widget/assets/images/message-send.svg
index 3295ce96d..2506e365a 100755
--- a/app/javascript/widget/assets/images/message-send.svg
+++ b/app/javascript/widget/assets/images/message-send.svg
@@ -1,10 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
-    <title>Untitled</title>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <title>message-send</title>
     <desc>Created with Sketch.</desc>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="message-send" fill="#FFFFFF" fill-rule="nonzero">
+    <g id="Logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="message-send" fill="#999A9B" fill-rule="nonzero">
             <path d="M18.34,7.32 L4.34,0.32 C3.20803579,-0.243393454 1.84434515,-0.0365739638 0.930331262,0.837115781 C0.0163173744,1.71080553 -0.251780361,3.06378375 0.26,4.22 L2.66,9.59 L2.66,9.59 C2.77000426,9.8522654 2.77000426,10.1477346 2.66,10.41 L0.26,15.78 C-0.153051509,16.7079201 -0.0685371519,17.7818234 0.48458191,18.6337075 C1.03770097,19.4855916 1.98429967,19.9997529 3,20 C3.46823099,19.9953274 3.9294892,19.8859921 4.35,19.68 L18.35,12.68 C19.3627539,12.1705304 20.001816,11.1336797 20.001816,10 C20.001816,8.86632027 19.3627539,7.82946961 18.35,7.32 L18.34,7.32 Z M17.45,10.89 L3.45,17.89 C3.07351737,18.0707705 2.62434212,17.9985396 2.32351279,17.7088521 C2.02268345,17.4191646 1.93356002,16.9730338 2.1,16.59 L4.49,11.22 C4.5209392,11.1482915 4.54765161,11.0748324 4.57,11 L11.46,11 C12.0122847,11 12.46,10.5522847 12.46,10 C12.46,9.44771525 12.0122847,9 11.46,9 L4.57,9 C4.54765161,8.9251676 4.5209392,8.85170847 4.49,8.78 L2.1,3.41 C1.93356002,3.02696622 2.02268345,2.5808354 2.32351279,2.2911479 C2.62434212,2.00146039 3.07351737,1.92922952 3.45,2.11 L17.45,9.11 C17.7839662,9.28109597 17.9940395,9.62475706 17.9940395,10 C17.9940395,10.3752429 17.7839662,10.718904 17.45,10.89 Z" id="Shape"></path>
         </g>
     </g>
diff --git a/app/javascript/widget/components/ChatFooter.vue b/app/javascript/widget/components/ChatFooter.vue
index e1fd507de..4313a0d24 100755
--- a/app/javascript/widget/components/ChatFooter.vue
+++ b/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>
diff --git a/app/javascript/widget/components/ChatInputArea.vue b/app/javascript/widget/components/ChatInputArea.vue
index b6e562ef5..25b312707 100755
--- a/app/javascript/widget/components/ChatInputArea.vue
+++ b/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;
 }
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index c6dc48a99..b492a908c 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/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>
diff --git a/app/javascript/widget/components/ChatSendButton.vue b/app/javascript/widget/components/ChatSendButton.vue
index e37253d84..7e43c4028 100755
--- a/app/javascript/widget/components/ChatSendButton.vue
+++ b/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>
diff --git a/app/javascript/widget/components/ConversationWrap.vue b/app/javascript/widget/components/ConversationWrap.vue
index 3ced87b89..01813a754 100755
--- a/app/javascript/widget/components/ConversationWrap.vue
+++ b/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>
diff --git a/app/javascript/widget/components/HelloWorld.vue b/app/javascript/widget/components/HelloWorld.vue
deleted file mode 100755
index 7237f3eab..000000000
--- a/app/javascript/widget/components/HelloWorld.vue
+++ /dev/null
@@ -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>
diff --git a/app/javascript/widget/helpers/actionCable.js b/app/javascript/widget/helpers/actionCable.js
index d43e740b8..c8a5bbd33 100644
--- a/app/javascript/widget/helpers/actionCable.js
+++ b/app/javascript/widget/helpers/actionCable.js
@@ -6,7 +6,6 @@ class ActionCableConnector extends BaseActionCableConnector {
     this.events = {
       'message.created': this.onMessageCreated,
     };
-    console.log('joined', app, pubsubToken);
   }
 
   onMessageCreated = data => {
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 73f4baec2..af2a037ea 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -3,9 +3,7 @@
     <div class="header-wrap">
       <ChatHeaderExpanded />
     </div>
-    <div class="conversation-wrap">
-      <ConversationWrap :messages="getConversation" />
-    </div>
+    <ConversationWrap :messages="getConversation" />
     <div class="footer-wrap">
       <ChatFooter :on-send-message="handleSendMessage" />
     </div>
@@ -15,7 +13,6 @@
 <script>
 import { mapActions, mapGetters } from 'vuex';
 
-// import { DEFAULT_CONVERSATION } from 'widget/store/modules/conversation';
 import ChatFooter from 'widget/components/ChatFooter.vue';
 import ChatHeaderExpanded from 'widget/components/ChatHeaderExpanded.vue';
 import ConversationWrap from 'widget/components/ConversationWrap.vue';
@@ -34,20 +31,10 @@ export default {
         content,
       });
     },
-    scrollToBottom() {
-      const container = this.$el.querySelector('.conversation-wrap');
-      container.scrollTop = container.scrollHeight;
-    },
   },
   computed: {
     ...mapGetters('conversation', ['getConversation']),
   },
-  mounted() {
-    this.scrollToBottom();
-  },
-  updated() {
-    this.scrollToBottom();
-  },
 };
 </script>