v1.6.0/scroll fix, thread styling, interactive system link message

app/src/Chat.js

@@ -50,6 +50,7 @@ import {
   emptyLocalData,
   updateLocalData,
   UpdateAdminOnly,
+  scrollThread,
 } from './Api';
 import {
   Send,
@@ -177,6 +178,7 @@ export default class Chat extends Component {
       // IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
       if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
         if (response.messages && response.messages.length !== this.state.messages.length) {
+          scrollThread();
           const lastMessage = response.messages[response.messages.length - 1];
           if (lastMessage.uid !== '<system>') {
             this.props.notify(`${lastMessage.name}${lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text}`);
@@ -189,8 +191,6 @@ export default class Chat extends Component {
       }
       this.setState(response);
       if (response.player) this.mVideoListener.doUpdate(response.player);
-      const pcc = document.querySelector('.thread-wrapper');
-      if (pcc) pcc.scrollTop = pcc.scrollHeight;
     });
 
     // GIPHY IPC
@@ -326,16 +326,19 @@ export default class Chat extends Component {
       const rmi = sm.indexOf(data);
       sm.splice(rmi,1);
       this.setState({ sendingMessages: sm });
+      scrollThread();
     })
     .catch((err) => {
       const { sendingMessages: sm } = this.state;
       const rmi = sm.indexOf(data);
       sm.splice(rmi,1);
       this.setState({ sendingMessages: sm });
+      scrollThread();
       this.props.notify(err.message || err.statusText);
       console.error('Send Message API error', err);
     });
     this.setState({ replyTo: null });
+    scrollThread();
   }
   sendMessageInvoker(overrideMessage) {
     if (overrideMessage) this.sendMessage(overrideMessage);
@@ -415,6 +418,7 @@ export default class Chat extends Component {
     this.setState({
       replyTo: message,
     });
+    scrollThread();
   }
   getReplyToContent() {
     const { replyTo } = this.state;
@@ -787,6 +791,7 @@ export default class Chat extends Component {
             value={newMessage}
             onChange={(e) => {
               this.setState({ newMessage: e.target.value });
+              scrollThread();
               if (gif) {
                 window.postMessage({
                   watchPartyDirection: 'TO_SCRIPT',
@@ -823,6 +828,7 @@ export default class Chat extends Component {
                           type: 'WATCH_PARTY_SEARCH_GIF',
                           value: newMessage,
                         });
+                        scrollThread();
                       }
                     }}
                     edge="start"