[Bug] Scroll conversation to bottom on load (#205)

app/javascript/widget/assets/scss/_forms.scss

@@ -9,7 +9,6 @@ $input-height: $space-two * 2;
 
   appearance: none;
   background: $color-white;
-  border: $form-border-width solid $color-border;
   border-radius: $border-radius;
   box-sizing: border-box;
   color: $color-body;
@@ -19,7 +18,7 @@ $input-height: $space-two * 2;
   line-height: 1.3;
   max-width: 100%;
   outline: none;
-  padding: $space-small $space-slab;
+  padding: $space-smaller;
   position: relative;
   transition: background .2s, border .2s, box-shadow .2s, color .2s;
   width: 100%;

app/javascript/widget/assets/scss/sdk.js

@@ -1,4 +1,5 @@
 export const SDK_CSS = `
+
 .woot-widget-holder {
   z-index: 2147483000!important;
   position: fixed!important;
@@ -17,7 +18,9 @@ export const SDK_CSS = `
   -webkit-border-radius: 8px!important;
   border-radius: 8px!important;
   overflow: hidden!important;
-  opacity: 1!important;
+  opacity: 1;
+  transition-property: opacity, bottom;
+  transition-duration: 0.5s, 0.5s;
 }
 
 .woot-widget-holder iframe { width: 100% !important; height: 100% !important; border: 0; }
@@ -62,6 +65,10 @@ export const SDK_CSS = `
 }
 
 .woot--hide {
-  display: none !important;
+  visibility: hidden !important;
+  z-index: -1!important;
+  opacity: 0;
+  bottom: 60px;
 }
+
 `;

app/javascript/widget/components/AgentMessage.vue

@@ -39,7 +39,7 @@ export default {
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-end;
-  margin: 0 $space-smaller $space-micro auto;
+  margin: 0 0 $space-micro $space-small;
 
   & + .agent-message {
     margin-bottom: $space-micro;

app/javascript/widget/components/Branding.vue

@@ -0,0 +1,37 @@
+<template>
+  <a
+    class="branding"
+    href="https://www.chatwoot.com?utm_source=widget_branding"
+    rel="noreferrer noopener nofollow"
+    target="_blank"
+  >
+    <img src="~widget/assets/images/logo.svg" />
+    <span>Powered by Chatwoot</span>
+  </a>
+</template>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+@import '~widget/assets/scss/variables.scss';
+
+.branding {
+  align-items: center;
+  color: $color-gray;
+  display: flex;
+  filter: grayscale(1);
+  font-size: $font-size-default;
+  justify-content: center;
+  padding: $space-one;
+  text-align: center;
+  text-decoration: none;
+
+  &:hover {
+    filter: grayscale(0);
+  }
+
+  img {
+    margin-right: $space-small;
+    max-width: $space-two;
+  }
+}
+</style>

app/javascript/widget/components/ChatFooter.vue

@@ -1,10 +1,6 @@
 <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>
 

app/javascript/widget/components/ChatInputArea.vue

@@ -22,7 +22,7 @@ export default {
 
 .user-message-input {
   border: 0;
-  height: $space-big;
+  height: $space-large;
   resize: none;
 }
 </style>

app/javascript/widget/components/ChatInputWrap.vue

@@ -64,7 +64,6 @@ export default {
 
 .chat-message--input {
   align-items: center;
-  border-bottom: 1px $color-border-light solid;
   display: flex;
 }
 </style>

app/javascript/widget/components/ConversationWrap.vue

@@ -5,15 +5,18 @@
       :key="message.id"
       :message="message"
     />
+    <branding></branding>
   </section>
 </template>
 
 <script>
+import Branding from 'widget/components/Branding.vue';
 import ChatMessage from 'widget/components/ChatMessage.vue';
 
 export default {
   name: 'ConversationWrap',
   components: {
+    Branding,
     ChatMessage,
   },
   props: {

app/javascript/widget/views/Home.vue

@@ -56,7 +56,7 @@ export default {
   .conversation-wrap {
     flex: 1;
     overflow-y: auto;
-    padding: $space-large $space-small $space-large $space-normal;
+    padding: $space-large $space-small $zero $space-small;
   }
 
   .footer-wrap {