Add user color and clear messages

src/components/TwitchChat.vue

@@ -15,7 +15,7 @@ export default {
   },
   setup(props) {
     let messages: Ref<
-      { username: string; channel: string; message: string; messageType: string }[]
+      { username: string; channel: string; message: string; messageType: string, tags: Record<string,string> }[]
     > = ref([])
     let ws = new WebSocket('ws://localhost:7000')
 
@@ -34,6 +34,7 @@ export default {
         chatStatusMessage.textContent = `Connected to ${this.channelName}`
       } else {
         this.messages.push(JSON.parse(message.data))
+        this.clearMessages()
         this.scrollToBottom(chatList)
       }
     }
@@ -49,13 +50,18 @@ export default {
     },
     scrollToBottom(el: Element) {
       el.scrollTop = el.scrollHeight
+    },
+    clearMessages() {
+      if (this.messages.length > 50) {
+        this.messages.shift
+      }
     }
   }
 }
 </script>
 <template>
   <div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-[15.625rem] flex flex-col">
-    <ul class="overflow-y-scroll h-[46.875rem]" ref="chatList">
+    <ul class="overflow-y-scroll  overflow-x-hidden whitespace-pre-wrap h-[46.875rem]" ref="chatList">
       <li>
         <p ref="initConnectingStatus" class="text-gray-500 text-sm italic">
           Connecting to {{ channelName }}.
@@ -64,7 +70,7 @@ export default {
       <li v-for="message in getChat()" :key="messages.indexOf(message)">
         <div class="text-white inline-flex">
           <p class="text-sm">
-            <strong class="text-ctp-pink font-bold text-sm">{{ message.username }}</strong
+            <strong :style="message.tags.color ? `color: ${message.tags.color};` : ``" class="text-ctp-pink font-bold text-sm">{{ message.username }}</strong
             >: {{ message.message }}
           </p>
         </div>