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

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: {