From 1b9d7cf437421ce745ea3712cb37da635ed36b61 Mon Sep 17 00:00:00 2001
From: Dispatch <45262335+DispatchCommit@users.noreply.github.com>
Date: Wed, 23 Oct 2019 21:32:58 -0700
Subject: [PATCH] Improve Chat UX (#50)

* Create ChatSettings component, overhaul chat input UI

* Simplify chat component

* Create ChatInput component

isolate textbox input for better performance

* Remove unused components from chat index

* Make chat input clearable

* Fix null message when input is cleared

* Switch autoscroll function

* Begin work on ChatMessages wrapper

* Add counter back to input

* Use ChatMessages container

* Convert ChatMessage to functional component

* Code Cleanup

Remove old chat code and clean up files

* Improve viewerlist scrolling

* Load chat settings async

* Remove vuetify components from functional component

* Reduce chat message line height

* Improve chat message typography

* Revert line height

* ViewerList scroll improvement, restore settings divider
---
 components/Chat/ChatInput.vue      | 149 ++++++++++
 components/Chat/ChatMessage.vue    |  87 +++---
 components/Chat/ChatMessages.vue   | 113 +++++++
 components/Chat/ChatSettings.vue   | 217 ++++++++++++++
 components/Chat/ViewerList.vue     |   2 +-
 components/Chat/index.vue          | 462 +++++++----------------------
 components/Notifications/index.vue |   2 +-
 components/User.vue                |   2 +-
 components/UserList.vue            |   2 +-
 package.json                       |   2 +-
 store/chat.js                      |  32 ++
 11 files changed, 668 insertions(+), 402 deletions(-)
 create mode 100644 components/Chat/ChatInput.vue
 create mode 100644 components/Chat/ChatMessages.vue
 create mode 100644 components/Chat/ChatSettings.vue

diff --git a/components/Chat/ChatInput.vue b/components/Chat/ChatInput.vue
new file mode 100644
index 00000000..3687bda9
--- /dev/null
+++ b/components/Chat/ChatInput.vue
@@ -0,0 +1,149 @@
+<template>
+  <!-- Chat Input -->
+  <v-sheet class="px-2 py-2" color="black">
+    <div class="d-flex">
+      <v-text-field
+        ref="chatmessageinput"
+        :value="getMessage"
+        :label="`Chat as ${username}...`"
+        color="yellow"
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="true"
+        single-line
+        validate-on-blur
+        outlined
+        dense
+        clearable
+        :error="error"
+        counter="300"
+        @change="value => this.setMessage( value )"
+        @keyup.enter.prevent="sendMessage"
+        @keyup.prevent="event => lastMessageHandler(event)"
+        @cut="event => lastMessageHandler(event)"
+      ></v-text-field>
+    </div>
+
+    <div class="d-flex">
+      <v-menu
+        v-model="showChatSettings"
+        :close-on-content-click="false"
+        :close-on-click="false"
+        transition="slide-x-transition"
+        :max-width="320"
+        top
+        right
+        offset-y
+      >
+        <template #activator="{ on }">
+          <v-btn
+            v-on="on"
+            small
+            text
+            icon
+          >
+            <v-icon>settings</v-icon>
+          </v-btn>
+        </template>
+        <chat-settings
+          @close="showChatSettings = false"
+        ></chat-settings>
+      </v-menu>
+
+      <v-spacer/>
+
+      <v-btn
+        small
+        color="yellow black--text"
+        class="px-2"
+        @click="sendMessage"
+      >
+        send
+        <v-icon small>send</v-icon>
+      </v-btn>
+    </div>
+
+  </v-sheet>
+</template>
+
+<script>
+  import { mapState, mapMutations } from 'vuex'
+
+  const ChatSettings = () => import( '@/components/Chat/ChatSettings' );
+
+  export default {
+    name: 'ChatInput',
+
+    components: {
+      ChatSettings,
+    },
+
+    props: {
+      username: { type: String },
+    },
+
+    data() {
+      return {
+        showChatSettings: false,
+        messageBuffer: [],
+        messageBufferIndex: 0,
+      }
+    },
+
+    methods: {
+      ...mapMutations( 'chat', {
+        setMessage: 'SET_CHAT_MESSAGE',
+      }),
+
+      sendMessage() {
+        if ( this.getMessage.length > 300 ) return;
+        this.$emit( 'send' );
+        this.messageBuffer.push(this.getMessage);
+        this.messageBuffer = this.messageBuffer.splice(-10);
+        this.messageBufferIndex = this.messageBuffer.length;
+        this.setMessage( '' );
+      },
+
+      lastMessageHandler ( event ) {
+        if ( !event.srcElement.value || event.srcElement.value === this.messageBuffer[ this.messageBufferIndex ] ) {
+          // Up Arrow (keyCode 38)
+          if ( event.key === 'ArrowUp' ) {
+            this.messageBufferIndex -= ( this.messageBufferIndex > 0 ) ? 1 : 0;
+            this.setMessage( this.messageBuffer[ this.messageBufferIndex ] );
+            event.preventDefault();
+          }
+          // Down Arrow (keyCode 40)
+          else if ( event.key === 'ArrowDown' ) {
+            this.messageBufferIndex += ( this.messageBufferIndex < this.messageBuffer.length ) ? 1 : 0;
+            if ( this.messageBufferIndex === this.messageBuffer.length ) this.setMessage( '' );
+            else this.setMessage( this.messageBuffer[ this.messageBufferIndex ] );
+            event.preventDefault();
+          }
+          // Idk why this is needed
+          else {
+            // this.message = '';
+          }
+        }
+
+        if ( event.type === 'cut' ) {
+          setTimeout( () => {
+            if ( !event.srcElement.value ) {
+              this.setMessage( '' );
+            }
+          }, 20 );
+        }
+      },
+    },
+
+    computed: {
+      ...mapState( 'chat', {
+        getMessage: 'message',
+      }),
+
+      error () {
+        return this.getMessage.length > 300;
+      }
+    },
+  }
+</script>
diff --git a/components/Chat/ChatMessage.vue b/components/Chat/ChatMessage.vue
index e0b80788..8e699d4e 100644
--- a/components/Chat/ChatMessage.vue
+++ b/components/Chat/ChatMessage.vue
@@ -1,46 +1,44 @@
-<template>
+<template functional>
   <v-flex class="msg">
-    <v-layout
-      row
-      py-1
-      ml-3
-      mr-1
-    >
-      <v-avatar
-        class="mr-2"
-        size="34"
-        @click="$emit('reply', username)"
+    <div class="d-flex py-1 ml-3 mr-1">
+
+      <!-- Chat Avatar -->
+      <div
+        class="v-avatar mr-2 mt-2"
+        @click="listeners.reply(props.username)"
       >
-        <img v-if="!!avatar" :src="avatar" :alt="username">
-        <v-icon v-else :style="{ background: color }">person</v-icon>
-      </v-avatar>
-
-      <v-list-item-content class="py-0">
-        <v-list-item-subtitle>
-          <v-layout>
-            <v-flex shrink>
-              <span class="time">{{ timestamp }}</span>
-              <span class="username" :style="userStyling" v-html="displayName"></span>
-            </v-flex>
-            <v-spacer/>
-            <v-flex shrink>
-              <nuxt-link
-                :to="channel"
-              >
-                <kbd>{{ channel }}</kbd>
-              </nuxt-link>
-            </v-flex>
-          </v-layout>
-        </v-list-item-subtitle>
-        <slot></slot>
-      </v-list-item-content>
+        <img v-if="!!props.avatar" :src="props.avatar" :alt="props.username">
+        <div v-else class="v-icon notranslate material-icons" :style="{ background: props.color }">person</div>
+      </div>
+
+      <!-- Chat Content -->
+      <div class="flex-grow-1">
+
+        <!-- Message Header -->
+        <div class="d-flex align-center">
 
-    </v-layout>
+          <!-- Timestamp & Username -->
+          <div class="flex-grow-1 subtitle-2">
+            <span class="time">{{ props.timestamp }}</span>
+            <span class="username" :style="props.userStyling" v-html="props.displayName"></span>
+          </div>
+
+          <!-- Room Label -->
+          <div class="flex-shrink-1">
+            <nuxt-link :to="props.channel">
+              <kbd>{{ props.channel }}</kbd>
+            </nuxt-link>
+          </div>
+        </div>
+
+        <!-- Chat Body -->
+        <slot></slot>
+      </div>
+    </div>
   </v-flex>
 </template>
 
 <script>
-
   export default {
     name: 'ChatMessage',
 
@@ -64,10 +62,6 @@
         type: String,
       },
     },
-
-    data() {
-      return {}
-    },
   }
 </script>
 
@@ -89,6 +83,19 @@
     .v-avatar {
       cursor: pointer;
       user-select: none;
+
+      align-items: center;
+      border-radius: 50%;
+      display: inline-flex;
+      justify-content: center;
+      line-height: normal;
+      position: relative;
+      text-align: center;
+      vertical-align: middle;
+
+      height: 32px;
+      min-width: 32px;
+      width: 32px;
     }
 
     .v-list-item__avatar {
diff --git a/components/Chat/ChatMessages.vue b/components/Chat/ChatMessages.vue
new file mode 100644
index 00000000..4c82c2d7
--- /dev/null
+++ b/components/Chat/ChatMessages.vue
@@ -0,0 +1,113 @@
+<template>
+  <v-flex
+    id="inner-chat"
+    fill-height
+    style="overflow: hidden;"
+  >
+    <div
+      id="chat-scroll"
+      ref="scroller"
+      style="overflow-y: scroll; will-change: transform;"
+    >
+      <chat-message
+        v-for="item in messages"
+        :key="item.timestamp"
+        :username="item.username"
+        :display-name="item.username"
+        :user-styling="{ color: item.userColor ? item.userColor : '#9e9e9e' }"
+        :channel="item.channel"
+        :timestamp="getTime(item.timestamp)"
+        :avatar="item.avatar"
+        :color="item.color"
+        @reply="addUserTag"
+      >
+        <div
+          class="body-2"
+          :style="{ lineHeight: 1.5, }"
+          v-html="item.message"
+        ></div>
+      </chat-message>
+    </div>
+  </v-flex>
+</template>
+
+<script>
+  import moment from 'moment'
+
+  import ChatMessage from '@/components/Chat/ChatMessage'
+
+  export default {
+    name: 'ChatMessages',
+
+    components: {
+      ChatMessage,
+    },
+
+    props: {
+      messages: { type: Array },
+      showTimestamps: { type: Boolean },
+    },
+
+    data() {
+      return {
+        chatContainer: null,
+      }
+    },
+
+    methods: {
+      addUserTag ( user ) {
+        this.$emit('reply', user);
+      },
+
+      checkIfBottom () {
+        const scrollTop    = this.chatContainer.scrollTop;
+        const clientHeight = this.chatContainer.clientHeight; // or offsetHeight
+        const scrollHeight = this.chatContainer.scrollHeight;
+        return scrollTop + clientHeight >= scrollHeight - document.querySelector("#chat-scroll > div:last-child").clientHeight;
+      },
+
+      async scrollToBottom ( force ) {
+        // If we are NOT at the bottom && NOT forcing scroll, bail early
+        if ( !this.checkIfBottom() && !force ) return;
+
+        // Scroll to last message
+        this.chatContainer.scroll({
+          top: this.chatContainer.scrollHeight,
+          behavior: 'smooth',
+        });
+
+        setTimeout( () => {
+          this.chatContainer.scroll({
+            top: this.chatContainer.scrollHeight,
+            behavior: 'smooth',
+          });
+        }, 500 );
+      },
+
+      jumpToBottom () {
+        this.chatContainer.scrollTop = this.chatContainer.scrollHeight + 750;
+      },
+
+      getTime ( timestamp ) {
+        return this.showTimestamps ? `[${moment( timestamp ).format( 'HH:mm' )}]` : '';
+      },
+
+      onScroll ( event ) {
+        console.log( `At Bottom: ${this.checkIfBottom()}` );
+      },
+    },
+
+    computed: {},
+
+    watch: {
+      /*messages: async function () {
+        // await this.scrollToBottom(true);
+      },*/
+    },
+
+    async mounted () {
+      this.chatContainer = this.$refs.scroller;
+      // this.chatContainer.addEventListener( 'scroll', e => this.onScroll(e) );
+    },
+  }
+</script>
diff --git a/components/Chat/ChatSettings.vue b/components/Chat/ChatSettings.vue
new file mode 100644
index 00000000..fb67e43c
--- /dev/null
+++ b/components/Chat/ChatSettings.vue
@@ -0,0 +1,217 @@
+<template>
+  <v-card>
+    <v-sheet color="yellow">
+      <v-layout class="pl-2" align-center>
+        <v-flex>
+          <h5 class="black--text body-2">Settings</h5>
+        </v-flex>
+        <v-flex shrink>
+          <v-btn
+            color="black"
+            text
+            icon
+            pa-0
+            @click="closeMenu"
+          >
+            <v-icon color="black">close</v-icon>
+          </v-btn>
+        </v-flex>
+      </v-layout>
+    </v-sheet>
+
+    <v-list>
+      <v-list-item>
+        <v-switch
+          v-model="globalChat"
+          :label="`${ globalChat ? 'Global' : 'Local' } Chat`"
+          class="ml-0 mt-0 pt-0"
+          color="yellow"
+          hide-details
+        ></v-switch>
+        <v-switch
+          v-model="showTimestamps"
+          label="Timestamps"
+          class="ml-2 mt-0 pt-0"
+          color="yellow"
+          hide-details
+        ></v-switch>
+      </v-list-item>
+      <!--<v-list-item>
+        <v-switch
+          v-model="useIgnoreList"
+          @change="toggleUseIgnore"
+          label="Ignore chat messages"
+          class="ml-0 mt-0 pt-0"
+          color="yellow"
+          hide-details
+        ></v-switch>
+      </v-list-item>-->
+    </v-list>
+
+    <v-divider/>
+
+    <v-list subheader pb-2>
+      <v-subheader class="mb-0">Text To Speech Options</v-subheader>
+
+      <v-layout mb-3>
+        <v-flex>
+          <v-switch
+            v-model="useTts"
+            label="Use TTS"
+            class="ml-3 mt-0 pt-0"
+            color="yellow"
+            hide-details
+            @change="toggleTts"
+          ></v-switch>
+        </v-flex>
+        <v-flex>
+          <v-switch
+            v-model="trollTts"
+            :disabled="!useTts"
+            label="Troll TTS"
+            class="ml-0 mt-0 pt-0"
+            color="yellow"
+            hide-details
+            @change="toggleTrollTts"
+          ></v-switch>
+        </v-flex>
+      </v-layout>
+
+      <v-flex mx-3>
+        <v-select
+          v-model="ttsVoice"
+          :items="ttsVoices"
+          :disabled="!useTts"
+          label="TTS Voice"
+          style="font-size: 12px;"
+          hide-details
+        ></v-select>
+      </v-flex>
+
+      <v-list-item>
+        <v-slider
+          :disabled="!useTts"
+          label="Speed"
+          v-model="ttsRate"
+          class="align-center"
+          :max="20"
+          :min="1"
+          :step="0.5"
+          hide-details
+        >
+          <template #append>
+            <v-text-field
+              v-model="ttsRate"
+              class="mt-0 pt-0"
+              hide-details
+              single-line
+              type="number"
+              style="width: 50px"
+            ></v-text-field>
+          </template>
+        </v-slider>
+      </v-list-item>
+    </v-list>
+  </v-card>
+</template>
+
+<script>
+  import { mapState, mapMutations } from 'vuex'
+
+  export default {
+    name: 'ChatSettings',
+
+    props: {
+
+    },
+
+    data() {
+      return {
+        useIgnoreList: true,
+        ttsVoices: [],
+      }
+    },
+
+    methods: {
+      ...mapMutations ('chat', {
+        setModeGlobal: 'SET_MODE_GLOBAL',
+        setModeTimestamps: 'SET_TIMESTAMPS',
+        setUseTts: 'SET_USE_TTS',
+        setTrollTts: 'SET_TROLL_TTS',
+        setTtsRate: 'SET_TTS_RATE',
+        setTtsVoice: 'SET_TTS_VOICE',
+      }),
+
+      toggleUseIgnore() {
+
+      },
+
+      toggleTts() {
+
+      },
+
+      toggleTrollTts() {
+
+      },
+
+      closeMenu() {
+        this.$emit('close');
+      },
+
+      updateSettings() {
+        const settings = {};
+        this.$emit('input', settings);
+      },
+    },
+
+    computed: {
+      ...mapState ('chat', {
+        getModeGlobal: 'global',
+        getModeTimestamps: 'timestamps',
+        getUseTts: 'useTts',
+        getTrollTts: 'trollTts',
+        getTtsRate: 'ttsRate',
+        getTtsVoice: 'ttsVoice',
+      }),
+
+      globalChat: {
+        set ( val ) { this.setModeGlobal( val ) },
+        get () { return this.getModeGlobal }
+      },
+
+      showTimestamps: {
+        set ( val ) { this.setModeTimestamps( val ) },
+        get () { return this.getModeTimestamps }
+      },
+
+      useTts: {
+        set ( val ) { this.setUseTts( val ) },
+        get () { return this.getUseTts }
+      },
+
+      trollTts: {
+        set ( val ) { this.setTrollTts( val ) },
+        get () { return this.getTrollTts }
+      },
+
+      ttsRate: {
+        set ( val ) { this.setTtsRate( val ) },
+        get () { return this.getTtsRate }
+      },
+
+      ttsVoice: {
+        set ( val ) { this.setTtsVoice( val ) },
+        get () { return this.getTtsVoice }
+      },
+    },
+
+    created () {
+
+    },
+
+    async mounted () {
+      this.ttsVoices = speechSynthesis.getVoices().map( ( voice, index ) => ({ text: voice.name, value: index }));
+      speechSynthesis.onvoiceschanged = () => this.ttsVoices = speechSynthesis.getVoices().map( ( voice, index ) => ({ text: voice.name, value: index }) );
+    },
+  }
+</script>
diff --git a/components/Chat/ViewerList.vue b/components/Chat/ViewerList.vue
index fb467425..07b28971 100644
--- a/components/Chat/ViewerList.vue
+++ b/components/Chat/ViewerList.vue
@@ -38,7 +38,7 @@
         </v-layout>
       </v-sheet>
 
-      <v-layout style="max-height: 75vh; overflow: auto; overscroll-behavior: contain;">
+      <v-layout style="max-height: 75vh; overflow: auto; overscroll-behavior: contain; will-change: transform;">
         <v-list
           dense
           class="py-0"
diff --git a/components/Chat/index.vue b/components/Chat/index.vue
index f0978b09..e0c011d0 100644
--- a/components/Chat/index.vue
+++ b/components/Chat/index.vue
@@ -7,210 +7,58 @@
   >
 
     <!-- Chat Header -->
-    <v-sheet id="chat-header">
-      <v-layout
-        align-center
-        class="pa-2"
-      >
-        <!-- Viewer List -->
-        <v-flex shrink>
-          <ViewerList :page="page" />
-        </v-flex>
-
-        <!-- Chat Label -->
-        <v-flex grow ml-2>
-          <h4>{{ page }}</h4>
-        </v-flex>
-
-        <!-- Create Poll Button -->
-        <v-flex
-          v-if="page === username"
-          shrink
-        >
-          <v-menu
-            v-model="showPoll"
-            :close-on-content-click="false"
-            bottom
-            left
-          >
-            <template #activator="{ on }">
-              <v-btn
-                v-on="on"
-                :style="{ 'min-width': '40px' }"
-                small
-                class="black--text"
-                :disabled="showPollClient"
-                color="yellow"
-                @click="scrollToBottom(true)"
-              >POLL</v-btn>
-            </template>
-
-            <!-- Create Poll Dialog -->
-            <chat-poll
-              id="chat-poll"
-              @close="showPoll = false"
-              @create="createPoll"
-            />
-
-          </v-menu>
-        </v-flex>
-
-        <!-- Tools -->
-        <v-flex
-          shrink
-          class="mx-2"
+    <v-sheet
+      id="chat-header"
+      class="d-flex align-center pa-2"
+    >
+      <!-- Viewer List -->
+      <ViewerList
+        :page="page"
+        class="flex-shrink-1"
+      ></ViewerList>
+
+      <!-- Chat Label -->
+      <div class="ml-2 flex-grow-1">
+        <h4>{{ page }}</h4>
+      </div>
+
+      <!-- Create Poll Button -->
+      <div v-if="page === username">
+        <v-menu
+          v-model="showPoll"
+          :close-on-content-click="false"
+          bottom
+          left
         >
-          <v-menu
-            v-model="showToolMenu"
-            :close-on-content-click="false"
-            transition="slide-x-reverse-transition"
-            :max-width="320"
-            bottom
-            offset-x
-            offset-y
-          >
-            <template #activator="{ on }">
-              <v-btn
-                v-on="on"
-                :style="{ 'min-width': '40px' }"
-                small
-                class="black--text"
-                color="yellow"
-                @click="scrollToBottom(true)"
-              >
-                <v-icon>settings</v-icon>
-              </v-btn>
-            </template>
-
-            <v-card>
-              <v-sheet color="yellow">
-                <v-layout class="pl-2" align-center>
-                  <v-flex>
-                    <h5 class="black--text body-2">Settings</h5>
-                  </v-flex>
-                  <v-flex shrink>
-                    <v-btn
-                      color="black"
-                      text
-                      icon
-                      pa-0
-                      @click="showToolMenu = false"
-                    >
-                      <v-icon color="black">close</v-icon>
-                    </v-btn>
-                  </v-flex>
-                </v-layout>
-              </v-sheet>
-
-              <v-list>
-                <v-list-item>
-                  <v-switch
-                    v-model="global"
-                    :label="`${ global ? 'Global' : 'Local' } Chat`"
-                    class="ml-0 mt-0 pt-0"
-                    :disabled="false"
-                    color="yellow"
-                    hide-details
-                  ></v-switch>
-                  <v-switch
-                    v-model="showTimestamps"
-                    label="Timestamps"
-                    class="ml-2 mt-0 pt-0"
-                    color="yellow"
-                    hide-details
-                  ></v-switch>
-                </v-list-item>
-                <v-list-item>
-                  <v-switch
-                    v-model="useIgnoreListForChat"
-                    @change="toggleUseIgnore"
-                    label="Ignore chat messages"
-                    class="ml-0 mt-0 pt-0"
-                    color="yellow"
-                    hide-details
-                  ></v-switch>
-                </v-list-item>
-              </v-list>
-
-              <v-divider/>
-
-              <v-list subheader pb-2>
-                <v-subheader class="mb-0">Text To Speech Options</v-subheader>
-
-                <v-layout mb-3>
-                  <v-flex>
-                    <v-switch
-                      v-model="useTTS"
-                      label="Use TTS"
-                      class="ml-3 mt-0 pt-0"
-                      color="yellow"
-                      hide-details
-                      @change="toggleTTS"
-                    ></v-switch>
-                  </v-flex>
-                  <v-flex>
-                    <v-switch
-                      v-model="allowTrollTTS"
-                      :disabled="!useTTS"
-                      label="Troll TTS"
-                      class="ml-0 mt-0 pt-0"
-                      color="yellow"
-                      hide-details
-                    ></v-switch>
-                  </v-flex>
-                </v-layout>
-
-                <v-flex mx-3>
-                  <v-select
-                    v-model="selectionTTS"
-                    :items="voices"
-                    label="TTS Voice"
-                    style="font-size: 12px;"
-                    hide-details
-                  ></v-select>
-                </v-flex>
-
-                <v-list-item>
-                  <v-slider
-                    label="Speed"
-                    v-model="rateTTS"
-                    class="align-center"
-                    :max="20"
-                    :min="1"
-                    :step="0"
-                    hide-details
-                  >
-                    <template #append>
-                      <v-text-field
-                        v-model="rateTTS"
-                        class="mt-0 pt-0"
-                        hide-details
-                        single-line
-                        type="number"
-                        style="width: 40px"
-                      ></v-text-field>
-                    </template>
-                  </v-slider>
-                </v-list-item>
-              </v-list>
-            </v-card>
-          </v-menu>
-        </v-flex>
-
-        <!-- Scroll to Chat Bottom -->
-        <v-flex shrink>
-          <!-- Scroll to bottom button -->
-          <v-btn
-            :style="{ 'min-width': '40px' }"
-            small
-            color="yellow"
-            @click="scrollToBottom(true)"
-            class="px-0 black--text"
-          ><v-icon>keyboard_arrow_down</v-icon>
-          </v-btn>
-        </v-flex>
-
-      </v-layout>
+          <template #activator="{ on }">
+            <v-btn
+              v-on="on"
+              small
+              class="black--text"
+              :disabled="showPollClient"
+              color="yellow"
+            >POLL</v-btn>
+          </template>
+
+          <!-- Create Poll Dialog -->
+          <chat-poll
+            id="chat-poll"
+            @close="showPoll = false"
+            @create="createPoll"
+          />
+        </v-menu>
+      </div>
+
+      <!-- Scroll to Chat Bottom -->
+      <v-btn
+        :style="{ 'min-width': '40px' }"
+        small
+        color="yellow"
+        @click="scrollToBottom(true)"
+        class="ml-2 px-0 black--text"
+      >
+        <v-icon>keyboard_arrow_down</v-icon>
+      </v-btn>
     </v-sheet>
 
     <!-- Show Poll to Users -->
@@ -223,87 +71,46 @@
         @end="endPoll"
         @destroy="destroyPoll"
       />
+
     </v-flex>
 
     <!-- Chat Messages -->
-    <v-flex
-      id="inner-chat"
-      fill-height
-      style="overflow: hidden;"
-    >
-      <div id="chat-scroll" ref="scroller" style="overflow-y: scroll;">
-        <chat-message
-          v-for="item in messages"
-          :key="item.timestamp"
-          :username="item.username"
-          :display-name="item.username"
-          :user-styling="{ color: item.userColor ? item.userColor : '#9e9e9e' }"
-          :channel="item.channel"
-          :timestamp="getTime(item.timestamp)"
-          :avatar="item.avatar"
-          :color="item.color"
-          @reply="addUserTag"
-        >
-          <div
-            :style="{ 'font-size': '14px', 'line-height': '1.5' }"
-            v-html="item.message"
-          ></div>
-        </chat-message>
-      </div>
-    </v-flex>
+    <chat-messages
+      ref="chat-messages"
+      :messages="messages"
+      :show-timestamps="showTimestamps"
+      @reply="addUserTag"
+    ></chat-messages>
 
-    <!-- Chat Input -->
 
-    <v-sheet class="px-2 pb-1">
-      <v-layout>
-        <v-flex>
-          <v-text-field
-            ref="chatmessageinput"
-            :value="message"
-            :label="`Chat as ${username}...`"
-            color="yellow"
-            autocomplete="off"
-            autocorrect="off"
-            autocapitalize="off"
-            spellcheck="true"
-            single-line
-            append-outer-icon="send"
-            counter="300"
-            validate-on-blur
-            @change="value => this.message = value"
-            @click:append-outer.prevent="sendMessage"
-            @keyup.enter.prevent="sendMessage"
-            @keyup.prevent="event => lastMessageHandler(event)"
-            @cut="event => lastMessageHandler(event)"
-          ></v-text-field>
-        </v-flex>
-      </v-layout>
-    </v-sheet>
+    <!-- Chat Input -->
+    <chat-input
+      ref="chat-input"
+      :username="username"
+      @send="sendMessage"
+    ></chat-input>
 
   </v-layout>
 </template>
 
 <script>
   import { auth, db } from '@/plugins/firebase.js'
-  import ChatMessage from './ChatMessage'
-  import moment from 'moment'
   import jwt_decode from 'jwt-decode'
 
-  import { mapGetters } from 'vuex'
-
   import socketio from 'socket.io-client'
 
+  import ChatMessages from '@/components/Chat/ChatMessages'
   import ChatPoll from '@/components/Chat/ChatPoll'
   import ChatPollVote from '@/components/Chat/ChatPollVote'
+  import ChatInput from '@/components/Chat/ChatInput'
 
-  import { mapState, mapMutations, mapActions } from 'vuex'
+  import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
   import ViewerList from '@/components/Chat/ViewerList'
 
   export default {
     name: 'Chat',
 
     props: {
-      dark        : { type: Boolean },
       chatChannel : { type: String },
       forceGlobal : { type: Boolean },
     },
@@ -312,13 +119,12 @@
       ViewerList,
       ChatPollVote,
       ChatPoll,
-      ChatMessage,
+      ChatMessages,
+      ChatInput,
     },
 
     data() {
       return {
-        color: null,
-
         unsubscribeUser: null,
         unsubscribePoll: null,
 
@@ -326,10 +132,6 @@
 
         socket: null,
 
-        message: '',
-        messageBuffer: [],
-        messageBufferIndex: 0,
-
         messages: [
           {
             timestamp: Date.now(),
@@ -348,12 +150,9 @@
         chatLimit: 50,
         chatContainer: null,
 
-        showToolMenu: false,
+        showChatSettings: false,
+
         useIgnoreListForChat: true,
-        useTTS: false,
-        allowTrollTTS: true,
-        selectionTTS: 1,
-        rateTTS: 10.00,
         voicesListTTS: [],
 
         showPoll: false,
@@ -372,7 +171,6 @@
           title: '',
           voters: 0,
         },
-
       }
     },
 
@@ -381,9 +179,9 @@
         await this.$nextTick( async () => await this.scrollToBottom(false) );
       },
 
-      addUserTag ( user ) {
-        this.message = `${this.$refs['chatmessageinput'].value}@${user} `;
-        this.$refs['chatmessageinput'].focus();
+      async addUserTag ( user ) {
+        this.$refs['chat-input'].$refs['chatmessageinput'].focus();
+        this.appendChatMessage(`@${user} `);
       },
 
       async authenticated ( user ) {
@@ -475,20 +273,7 @@
       },
 
       async scrollToBottom ( force ) {
-        if ( this.checkIfBottom() && !force ) {
-          return;
-        }
-
-        // Scroll to last message
-        document.querySelector("#chat-scroll > div:last-child").scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
-        // this.chatContainer.scrollTop = this.chatContainer.scrollTop + this.chatContainer.clientHeight;
-        // this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
-
-        setTimeout( () => {
-          this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
-        }, 500 );
-
-        if (this.messages.length > 2 * this.chatLimit) this.messages = this.messages.splice( -this.chatLimit );
+        this.$refs['chat-messages'].scrollToBottom( force );
       },
 
       connectChat ( tokenUser ) {
@@ -510,17 +295,19 @@
         this.socket.on( 'hydrate', async data => await this.hydrate( data ) );
         this.socket.on( 'bulkmessage', async data => await this.rcvMessageBulk( data ) );
 
-        this.socket.on( 'blocked',   data => this.message = data.message );
+        this.socket.on( 'blocked',   data => this.setMessage( data.message ) );
         this.socket.on( 'pollstate', data => this.updatePoll( data ) );
 
       },
 
       async hydrate ( data ) {
         await this.socket.emit( 'hydratepoll', this.pollData.id );
+
         if ( !data ) {
           console.log( 'Failed to receive hydration data' );
           return;
         }
+
         const size = data.length;
         if ( !size ) {
           console.log( 'Hydration data was empty' );
@@ -532,7 +319,7 @@
           data = data.filter( el => ( el.channel.toLowerCase() === this.page.toLowerCase() || el.channel.toLowerCase() === this.username.toLowerCase() ) );
         }
 
-        this.messages = size > 100 ? data.splice( -this.chatLimit ) : data;
+        this.messages = size > 2 * this.chatLimit ? data.splice( -this.chatLimit ) : data;
 
         // re-highlight username mentions on hydration
         const pattern = new RegExp( `@${this.username}\\b`, 'gi' );
@@ -542,13 +329,11 @@
 
         // Scroll after hydration
         await this.$nextTick( async () => {
-          this.chatContainer.scrollTop = this.chatContainer.scrollHeight + 750
+          this.$refs['chat-messages'].jumpToBottom();
         });
       },
 
       async rcvMessageBulk ( messages ) {
-        let atBottom = this.checkIfBottom();
-
         // Remove ignored user messages
         if ( this.useIgnoreListForChat ){
           messages = messages.filter( el => !this.ignoreList.includes( el.username.toLowerCase() ) );
@@ -577,17 +362,23 @@
           if ( currentChat || myChat ) this.speak( el.message, el.username ); // Say Message
 
           // Add message to list
-          this.messages.push( { ...{ id: Date.now() }, ...el } );
+          this.messages.push( el );
         });
 
-        if ( atBottom ) await this.$nextTick( async () => await this.scrollToBottom(true) );
+        // Trim chat history
+        if ( this.messages.length > 1.25 * this.chatLimit ) {
+          this.messages = this.messages.splice( -this.chatLimit );
+          console.log('Trimmed History');
+        }
+
+        this.scrollToBottom();
       },
 
       async sendMessage () {
-        if ( this.message.length > 300 ) return false;
+        if ( !this.getMessage || this.getMessage.length > 300 ) return false;
 
-        const match = /^\/(\w+)\s?(\w+)?/g.exec( this.message );
-        const parts = this.message.split( ' ' );
+        const match = /^\/(\w+)\s?(\w+)?/g.exec( this.getMessage );
+        const parts = this.getMessage.split( ' ' );
 
         if ( match ) {
           const command  = match[1].toLowerCase();
@@ -641,53 +432,19 @@
             case 'w':
             case 'whisper':
               const msg = {
-                message: this.message,
+                message: this.getMessage,
                 channel: this.page,
               };
               this.socket.emit( 'whisper', msg );
           }
         } else {
           const msg = {
-            message: this.message,
+            message: this.getMessage,
             channel: this.page,
             global: this.global,
           };
           this.socket.emit( 'message', msg );
         }
-        this.messageBuffer.push(this.message);
-        this.messageBuffer = this.messageBuffer.splice(-10);
-        this.messageBufferIndex = this.messageBuffer.length;
-        this.message = '';
-      },
-
-      lastMessageHandler ( event ) {
-        if ( !event.srcElement.value || event.srcElement.value === this.messageBuffer[ this.messageBufferIndex ] ) {
-          // Up Arrow (keyCode 38)
-          if ( event.key === 'ArrowUp' ) {
-            this.messageBufferIndex -= ( this.messageBufferIndex > 0 ) ? 1 : 0;
-            this.message = this.messageBuffer[ this.messageBufferIndex ];
-            event.preventDefault();
-          }
-          // Down Arrow (keyCode 40)
-          else if ( event.key === 'ArrowDown' ) {
-            this.messageBufferIndex += ( this.messageBufferIndex < this.messageBuffer.length ) ? 1 : 0;
-            if ( this.messageBufferIndex === this.messageBuffer.length ) this.message = '';
-            else this.message = this.messageBuffer[ this.messageBufferIndex ];
-            event.preventDefault();
-          }
-          // Idk why this is needed
-          else {
-            // this.message = '';
-          }
-        }
-
-        if ( event.type === 'cut' ) {
-          setTimeout( () => {
-            if ( !event.srcElement.value ) {
-              this.message = '';
-            }
-          }, 20 );
-        }
       },
 
       async setupTrollData () {
@@ -702,9 +459,9 @@
       },
 
       speak ( message, username ) {
-        if ( !this.useTTS ) return;
+        if ( !this.getUseTts ) return;
         if ( this.ignoreList.find( user => user === username ) ) return;
-        if ( !this.allowTrollTTS && /troll:\w+/.test(username) ) return; // disables troll TTS
+        if ( !this.getTrollTts && /troll:\w+/.test(username) ) return; // disables troll TTS
 
         function unescapeHtml(unsafe) {
           return unsafe
@@ -725,8 +482,8 @@
 
         const voice = new SpeechSynthesisUtterance();
         const pitch = 1;
-        voice.voice = this.voicesListTTS[this.selectionTTS];
-        voice.rate  = this.rateTTS / 10.0;
+        voice.voice = this.voicesListTTS[this.getTtsVoice];
+        voice.rate  = this.getTtsRate / 10.0;
         voice.pitch = pitch;
         voice.text  = message;
 
@@ -737,11 +494,6 @@
         speechSynthesis.speak(voice);
       },
 
-      toggleTTS () {
-        speechSynthesis.cancel();
-        localStorage.setItem( 'tts', this.useTTS );
-      },
-
 
       // POLL FUNCTIONS -> SOCKET
       //-------------------------
@@ -792,12 +544,6 @@
         this.pollData.voters  = data.voters;
       },
 
-      getTime ( timestamp ) { return this.showTimestamps ? `[${moment( timestamp ).format( 'HH:mm' )}]` : ''; },
-
-      toggleUseIgnore () {
-        localStorage.setItem( 'useignore', this.useIgnoreListForChat );
-      },
-
       async ignoreUser ( username ) {
         username = username.replace('@', '');
         const exists = this.ignoreList.find( el => el.toLowerCase() === username.toLowerCase() );
@@ -928,6 +674,8 @@
         setModeGlobal: 'SET_MODE_GLOBAL',
         setModeTimestamps: 'SET_TIMESTAMPS',
         setIgnoreList: 'SET_IGNORE_LIST',
+        setMessage: 'SET_CHAT_MESSAGE',
+        appendChatMessage: 'APPEND_CHAT_MESSAGE',
       }),
 
       ...mapActions ('chat', {
@@ -946,6 +694,11 @@
         getModeGlobal: 'global',
         getModeTimestamps: 'timestamps',
         getIgnoreList: 'ignoreList',
+        getUseTts: 'useTts',
+        getTrollTts: 'trollTts',
+        getTtsRate: 'ttsRate',
+        getTtsVoice: 'ttsVoice',
+        getMessage: 'message',
       }),
 
       global: {
@@ -971,11 +724,6 @@
           return 'Global';
         }
       },
-
-      voices () {
-        return this.voicesListTTS.map( ( voice, index ) => { return { text: voice.name, value: index } } );
-      },
-
     },
 
     created () {
@@ -987,8 +735,8 @@
       this.chatContainer = this.$refs.scroller;
 
       // Add listener for voice changes, then update voices.
+      this.voicesListTTS = speechSynthesis.getVoices();
       speechSynthesis.onvoiceschanged = () => this.voicesListTTS = speechSynthesis.getVoices();
-      this.$nextTick( () => this.voicesListTTS = speechSynthesis.getVoices() );
 
       // Get ignore list
       try {
diff --git a/components/Notifications/index.vue b/components/Notifications/index.vue
index 582d7697..9efa738e 100644
--- a/components/Notifications/index.vue
+++ b/components/Notifications/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-flex mr-1 shrink>
+  <v-flex shrink>
 
     <v-menu
       v-model="notificationMenu"
diff --git a/components/User.vue b/components/User.vue
index a285048b..ea399924 100644
--- a/components/User.vue
+++ b/components/User.vue
@@ -21,7 +21,7 @@
           small
           :loading="loading"
         >
-          <v-avatar size="40">
+          <v-avatar size="32">
             <img :src="avatar" :alt="username">
           </v-avatar>
         </v-btn>
diff --git a/components/UserList.vue b/components/UserList.vue
index 30700e7e..21261d88 100644
--- a/components/UserList.vue
+++ b/components/UserList.vue
@@ -43,7 +43,7 @@
       <!-- User Channels -->
       <v-flex
         class="hide-scrollbar"
-        style="overflow-y: auto"
+        style="overflow-y: auto; will-change: transform;"
       >
         <v-list
           class="pt-0"
diff --git a/package.json b/package.json
index 43f216c0..3730e8b6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bitwave.tv",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "An open platform live streaming service for creators to freely express themselves.",
   "author": "Dispatch",
   "private": true,
diff --git a/store/chat.js b/store/chat.js
index 9f068382..3a97df2e 100644
--- a/store/chat.js
+++ b/store/chat.js
@@ -4,11 +4,17 @@ export const state = () => ({
   room : '',
   global : false,
   timestamps : true,
+  useTts: false,
+  trollTts: true,
+  ttsRate: 10,
+  ttsVoice: 1,
 
   viewerList : [{name: 'NONE'}],
   roomViewerList : {},
 
   ignoreList : [],
+
+  message: '',
 });
 
 
@@ -34,6 +40,23 @@ export const mutations = {
     localStorage.setItem( 'globalchat', data );
   },
 
+  SET_USE_TTS ( state, data ) {
+    state.useTts = JSON.parse(data);
+    localStorage.setItem( 'tts', data );
+  },
+
+  SET_TROLL_TTS ( state, data ) {
+    state.tollTts = data;
+  },
+
+  SET_TTS_RATE ( state, data ) {
+    state.ttsRate = JSON.parse(data);
+  },
+
+  SET_TTS_VOICE ( state, data ) {
+    state.ttsVoice = data;
+  },
+
   SET_VIEWERLIST ( state, data ) {
     state.viewerList = [ ...data ];
   },
@@ -45,6 +68,15 @@ export const mutations = {
   SET_IGNORE_LIST ( state, data ) {
     state.ignoreList = data;
   },
+
+  SET_CHAT_MESSAGE ( state, data ) {
+    if ( data === null ) state.message = '';
+    else state.message = data;
+  },
+
+  APPEND_CHAT_MESSAGE ( state, data ) {
+    state.message += data;
+  },
 };